Scroll only board

Dockerfile

@@ -1,10 +1,11 @@
-FROM golang:alpine
+FROM golang:1.15-alpine
 WORKDIR /src
 RUN apk add --update npm git
 RUN go get -u github.com/jteeuwen/go-bindata/...
 COPY ./webapp/package.json webapp/package.json
+COPY ./webapp/package-lock.json webapp/package-lock.json
 RUN cd ./webapp && \
-    npm install
+    npm ci
 COPY . .
 RUN cd ./webapp && \
     npm run build

webapp/src/components/EntityDetailsBody.tsx

@@ -30,7 +30,14 @@ import { EntityTypes } from '../core/card'
 import CardDetailsTitle from './EntityDetailsTitle'
 import CardDetailsDescription from './EntityDetailsDescription';
 import CardDetailsComments from './EntityDetailsComments';
-import { CardStatus, colorToBackgroundColorClass, Colors, colorToBorderColorClass, Color } from '../core/misc';
+import {
+  CardStatus,
+  colorToBackgroundColorClass,
+  Colors,
+  colorToBorderColorClass,
+  Color,
+  copyStringToClipboard
+} from '../core/misc';
 import ContextMenu from './ContextMenu';
 import { IFeatureComment } from '../store/featurecomments/types';
 import EntityDetailsAnnotations from './EntityDetailsAnnotations';
@@ -120,14 +127,7 @@ class EntityDetailsBody extends Component<Props, State> {
   urlRef = React.createRef<HTMLInputElement>()
 
   copyToClipboard = (url: string) => {
-    const listener = (e: ClipboardEvent) => {
-      e.clipboardData!.setData('text/plain', url);
-      e.preventDefault();
-    }
-
-    document.addEventListener('copy', listener)
-    document.execCommand('copy');
-    document.removeEventListener('copy', listener);
+    copyStringToClipboard(url)
     this.setState({ copySuccess: true })
   }
 

webapp/src/core/misc.ts

@@ -17,6 +17,17 @@ export const isEditor = (level: Roles) => {
     return level === Roles.EDITOR || level === Roles.ADMIN || level === Roles.OWNER
 }
 
+export const copyStringToClipboard = (input: string) => {
+    const listener = (e: ClipboardEvent) => {
+        e.clipboardData!.setData('text/plain', input);
+        e.preventDefault();
+    }
+
+    document.addEventListener('copy', listener)
+    document.execCommand('copy');
+    document.removeEventListener('copy', listener);
+}
+
 export const daysBetween = (fromDate: Date, toDate: Date) => {
     const oneDay = 24 * 60 * 60 * 1000
     return Math.round(Math.abs((fromDate.getTime() - toDate.getTime()) / (oneDay)));

webapp/src/pages/ExternalLinkPage.tsx

@@ -134,6 +134,60 @@ class ExternalLinkPage extends Component<Props, State> {
             })
     }
 
+    renderHeading(project: IProject) {
+        return (
+            <div className="flex flex-row p-2 ">
+                <div className="flex flex-grow m-1 text-xl items-center">
+                    <div className="flex"><span className="font-semibold">{project.title}  </span></div>
+                    <div className="flex ml-2"><span className="font-semibold p-1 bg-gray-200 text-xs "> VIEW ONLY  </span></div>
+                    {this.state.demo && <div className="flex ml-2"><span className="font-semibold p-1 bg-pink-400 text-xs text-white "> DEMO MODE  </span></div>}
+                </div>
+                <div className="flex items-center">
+                    <div className=" flex items-center  text-sm">
+                        <div >
+                            <Button title="Personas" icon="person_outline" noborder handleOnClick={() => this.setState({ showPersonas: true })} />
+                        </div>
+                        <div>
+                            {this.state.showClosedMilestones ?
+                                <Button noborder iconColor="text-green-500" icon="toggle_on" title="Show closed" handleOnClick={() => this.setState({ showClosedMilestones: false })} />
+                                :
+                                <Button noborder icon="toggle_off " title="Show closed" handleOnClick={() => this.setState({ showClosedMilestones: true })} />
+                            }
+                        </div>
+                    </div>
+                    <div className="ml-4"><Link to={this.props.match.url + "/p/" + this.state.projectId}><i className="material-icons text-gray-600">settings</i></Link></div>
+                </div>
+            </div>
+        )
+    }
+
+    renderBoard(project: IProject) {
+        return (
+            <div className="mt-2">
+
+                <Board
+                    showClosed={this.state.showClosedMilestones}
+                    viewOnly={true}
+                    url={this.props.match.url}
+                    features={this.props.features}
+                    workflows={filterWorkflowsOnProject(this.props.workflows, project.id)}
+                    subWorkflows={this.props.subWorkflows}
+                    milestones={filterMilestonesOnProject(this.props.milestones, project.id)}
+                    projectId={project.id}
+                    workspaceId={project.workspaceId}
+                    demo={this.state.demo}
+                    comments={filterFeatureCommentsOnProject(this.props.featureComments, project.id)}
+                    personas={filterPersonasOnProject(this.props.personas, project.id)}
+                    workflowPersonas={filterWorkflowPersonasOnProject(this.props.workflowPersonas, project.id)}
+
+                    showPersonas={this.state.showPersonas}
+                    closePersonas={() => this.setState({ showPersonas: false })}
+                    openPersonas={() => this.setState({ showPersonas: true })}
+                />
+            </div>
+        )
+    }
+
     render() {
         if (this.state.loading) {
             return (<div className="p-2">Loading data...</div>)
@@ -151,51 +205,9 @@ class ExternalLinkPage extends Component<Props, State> {
                             </div>
                         </div>
                     </header>
-                    <div className="">
-                        <div className="flex flex-row p-2 ">
-                            <div className="flex flex-grow m-1 text-xl items-center">
-                                <div className="flex"><span className="font-semibold">{project.title}  </span></div>
-                                <div className="flex ml-2"><span className="font-semibold p-1 bg-gray-200 text-xs "> VIEW ONLY  </span></div>
-                                {this.state.demo && <div className="flex ml-2"><span className="font-semibold p-1 bg-pink-400 text-xs text-white "> DEMO MODE  </span></div>}
-                            </div>
-                            <div className="flex items-center">
-                                <div className=" flex items-center  text-sm">
-                                    <div >
-                                        <Button title="Personas" icon="person_outline" noborder handleOnClick={() => this.setState({ showPersonas: true })} />
-                                    </div>
-                                    <div>
-                                        {this.state.showClosedMilestones ?
-                                            <Button noborder iconColor="text-green-500" icon="toggle_on" title="Show closed" handleOnClick={() => this.setState({ showClosedMilestones: false })} />
-                                            :
-                                            <Button noborder icon="toggle_off " title="Show closed" handleOnClick={() => this.setState({ showClosedMilestones: true })} />
-                                        }
-                                    </div>
-                                </div>
-                                <div className="ml-4"><Link to={this.props.match.url + "/p/" + this.state.projectId}><i className="material-icons text-gray-600">settings</i></Link></div>
-                            </div>
-                        </div>
-                        <div className="mt-2">
-
-                            <Board
-                                showClosed={this.state.showClosedMilestones}
-                                viewOnly={true}
-                                url={this.props.match.url}
-                                features={this.props.features}
-                                workflows={filterWorkflowsOnProject(this.props.workflows, project.id)}
-                                subWorkflows={this.props.subWorkflows}
-                                milestones={filterMilestonesOnProject(this.props.milestones, project.id)}
-                                projectId={project.id}
-                                workspaceId={project.workspaceId}
-                                demo={this.state.demo}
-                                comments={filterFeatureCommentsOnProject(this.props.featureComments, project.id)}
-                                personas={filterPersonasOnProject(this.props.personas, project.id)}
-                                workflowPersonas={filterWorkflowPersonasOnProject(this.props.workflowPersonas, project.id)}
-
-                                showPersonas={this.state.showPersonas}
-                                closePersonas={() => this.setState({ showPersonas: false })}
-                                openPersonas={() => this.setState({ showPersonas: true })}
-                            />
-                        </div>
+                    { this.renderHeading(project) }
+                    <div className="overflow-x-auto">
+                        { this.renderBoard(project) }
                     </div>
 
                     <Switch>