fixed snapshots of dashbaords to have trails setup

3 files changed, 134 insertions, 138 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index ce442801f..68d975a17 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -92,35 +92,32 @@ export class DashboardView extends React.Component {
         const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
         const placeholder = `Dashboard ${dashboardCount}`;
         return (
-            <div className='new-dashboard'>
-                <div className='header'>Create New Dashboard</div>
+            <div className="new-dashboard">
+                <div className="header">Create New Dashboard</div>
                 <div className="title-input">
                     Title
                     <input className="input" placeholder={placeholder} onChange={e => this.setNewDashboardName((e.target as any).value)} />
                 </div>
                 <div className="color-picker">
                     Background
-                    <ColorPicker onChange={(color) => {
-                        this.newDashboardColor = color;
-                    }} />
+                    <ColorPicker
+                        onChange={color => {
+                            this.newDashboardColor = color;
+                        }}
+                    />
                 </div>
                 <div className="button-bar">
-                    <Button
-                        text="Cancel" 
-                        borderRadius={10}
-                        hoverStyle={'gray'}
-                        fontSize={FontSize.SECONDARY}
-                        onClick={this.abortCreateNewDashboard}
-                    />
+                    <Button text="Cancel" borderRadius={10} hoverStyle={'gray'} fontSize={FontSize.SECONDARY} onClick={this.abortCreateNewDashboard} />
                     <Button
                         text="Create"
                         borderRadius={10}
-                        backgroundColor={Colors.LIGHT_BLUE} 
+                        backgroundColor={Colors.LIGHT_BLUE}
                         hoverStyle={'darken'}
                         fontSize={FontSize.SECONDARY}
                         onClick={() => {
                             this.createNewDashboard(this.newDashboardName!, this.newDashboardColor);
-                    }}/>
+                        }}
+                    />
                 </div>
             </div>
         );
@@ -163,20 +160,19 @@ export class DashboardView extends React.Component {
             <>
                 <div className="dashboard-view">
                     <div className="left-menu">
-                        <div
-                            className="new-dashboard-button">
+                        <div className="new-dashboard-button">
                             <Button
-                            icon={<FaPlus/>}
-                            hoverStyle="darken"
-                            backgroundColor={Colors.LIGHT_BLUE}
-                            size={Size.MEDIUM}
-                            fontSize={FontSize.HEADER}
-                            text="New"
-                            onClick={() => {
-                                this.setNewDashboardName('');
-                            }}
-                            borderRadius={50}    
-                        />
+                                icon={<FaPlus />}
+                                hoverStyle="darken"
+                                backgroundColor={Colors.LIGHT_BLUE}
+                                size={Size.MEDIUM}
+                                fontSize={FontSize.HEADER}
+                                text="New"
+                                onClick={() => {
+                                    this.setNewDashboardName('');
+                                }}
+                                borderRadius={50}
+                            />
                         </div>
                         <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
                             My Dashboards
@@ -214,18 +210,15 @@ export class DashboardView extends React.Component {
                                                 e.stopPropagation();
                                                 this.onContextMenu(dashboard, e);
                                             }}>
-                                            <IconButton
-                                                isCircle={true}
-                                                size={Size.SMALL}
-                                                hoverStyle="gray"
-                                                icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />}
-                                            />
+                                            <IconButton isCircle={true} size={Size.SMALL} hoverStyle="gray" icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />} />
                                         </div>
                                     </div>
                                 </div>
                             );
                         })}
-                        <div className="dashboard-container-new" onClick={() => {
+                        <div
+                            className="dashboard-container-new"
+                            onClick={() => {
                                 this.setNewDashboardName('');
                             }}>
                             +
@@ -324,6 +317,15 @@ export class DashboardView extends React.Component {
 
         Doc.AddDocToList(dashboards, 'data', dashboardDoc);
 
+        DashboardView.SetupDashboardTrails(dashboardDoc);
+
+        // open this new dashboard
+        Doc.ActiveDashboard = dashboardDoc;
+        Doc.ActivePage = 'dashboard';
+        Doc.ActivePresentation = undefined;
+    };
+
+    public static SetupDashboardTrails(dashboardDoc: Doc) {
         // this section is creating the button document itself  ===  myTrails = new Button
         const reqdBtnOpts: DocumentOptions = {
             _forceActive: true,
@@ -368,15 +370,11 @@ export class DashboardView extends React.Component {
         };
         dashboardDoc.myTrails = new PrefetchProxy(DocUtils.AssignScripts(Docs.Create.TreeDocument([], reqdOpts), { treeViewChildDoubleClick: 'openPresentation(documentView.rootDoc)' }));
 
-        // open this new dashboard
-        Doc.ActiveDashboard = dashboardDoc;
-        Doc.ActivePage = 'dashboard';
-        Doc.ActivePresentation = undefined;
         const contextMenuScripts = [reqdBtnScript.onClick];
         if (Cast(Doc.MyTrails.contextMenuScripts, listSpec(ScriptField), null)?.length !== contextMenuScripts.length) {
             Doc.MyTrails.contextMenuScripts = new List<ScriptField>(contextMenuScripts.map(script => ScriptField.MakeFunction(script)!));
         }
-    };
+    }
 }
 
 export function AddToList(MySharedDocs: Doc, arg1: string, dash: any) {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6435fdd0f..25fe5fe43 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -430,7 +430,8 @@ export class CollectionDockingView extends CollectionSubView() {
             return newtab;
         });
         const copy = Docs.Create.DockDocument(newtabs, json, { title: incrementTitleCopy(StrCast(doc.title)) });
-        return DashboardView.openDashboard(await copy);
+        DashboardView.SetupDashboardTrails(copy);
+        return DashboardView.openDashboard(copy);
     }
 
     @action
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 2fe0c6e79..7bc7ba3ed 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -19,7 +19,6 @@ import { Borders, Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
 import './TopBar.scss';
 
-
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
  * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard.
@@ -44,88 +43,94 @@ export class TopBar extends React.Component {
      * - Tracking mode
      */
     @computed get topbarLeft() {
-    return (
+        return (
             <div className="topbar-left">
-                {Doc.ActiveDashboard ? <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} isCircle={true} hoverStyle="gray" color={this.textColor} /> : 
-                <div className="logo-container">
-                    <img className='logo' src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
-                    <span style={{color: Colors.LIGHT_GRAY, fontWeight: 200}}>brown</span><span style={{color: Colors.LIGHT_BLUE, fontWeight: 500}}>dash</span>
-                </div>
-                }
-                {Doc.ActiveDashboard && !Doc.noviceMode && <Button
-                    text="Explore"
-                    tooltip="Browsing mode for directly navigating to documents"
-                    fontSize={FontSize.SECONDARY}
-                    isActive={MainView.Instance._exploreMode}
-                    size={Size.SMALL}
-                    color={this.textColor}
-                    borderRadius={5}
-                    hoverStyle="gray"
-                    iconPosition="right"
-                    onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}
-                />}
+                {Doc.ActiveDashboard ? (
+                    <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} isCircle={true} hoverStyle="gray" color={this.textColor} />
+                ) : (
+                    <div className="logo-container">
+                        <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
+                        <span style={{ color: Colors.LIGHT_GRAY, fontWeight: 200 }}>brown</span>
+                        <span style={{ color: Colors.LIGHT_BLUE, fontWeight: 500 }}>dash</span>
+                    </div>
+                )}
+                {Doc.ActiveDashboard && !Doc.noviceMode && (
+                    <Button
+                        text="Explore"
+                        tooltip="Browsing mode for directly navigating to documents"
+                        fontSize={FontSize.SECONDARY}
+                        isActive={MainView.Instance._exploreMode}
+                        size={Size.SMALL}
+                        color={this.textColor}
+                        borderRadius={5}
+                        hoverStyle="gray"
+                        iconPosition="right"
+                        onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}
+                    />
+                )}
             </div>
         );
     }
 
-        /**
+    /**
      * Returns the center of the topbar
      * This part of the topbar contains everything related to the current dashboard including:
      * - Selection of dashboards
      * - Creating a new dashboard
      * - Taking a snapshot of a dashboard
      */
-         @computed get topbarCenter() {
-            const myDashboards = DocListCast(Doc.MyDashboards.data);
-            const activeDashboard = Doc.ActiveDashboard;
-            // const dashboardItems = myDashboards.map(board => {
-            //     const boardTitle = StrCast(board.title);
-            //     console.log(boardTitle);
-            //     return {
-            //         text: boardTitle,
-            //         onClick: () => DashboardView.openDashboard(board),
-            //         val: board,
-            //     };
-            // });
-            return activeDashboard ? (
-                <div className="topbar-center">
-                    <Button
-                        text={StrCast(activeDashboard.title)}
-                        tooltip="Browsing mode for directly navigating to documents"
-                        fontSize={FontSize.SECONDARY}
-                        size={Size.SMALL}
-                        color={"white"}
-                        type="outline"
-                        backgroundColor={Colors.MEDIUM_BLUE}
-                        borderRadius={5}
-                        hoverStyle="none"
-                        onClick={(e) => {
-                                const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
-                                ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
-                                ContextMenu.Instance.addItem({
-                                    description: 'Snapshot Dashboard',
-                                    event: async () => {
-                                        const batch = UndoManager.StartBatch('snapshot');
-                                        await DashboardView.snapshotDashboard();
-                                        batch.end();
-                                    },
-                                    icon: 'edit',
-                                });
-                                dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
-                            }}
-                    />
-                        <Button
-                            text={GetEffectiveAcl(Doc.GetProto(activeDashboard)) === AclAdmin ? 'Share' : 'View Original'}
-                            onClick={() => {
-                                SharingManager.Instance.open(undefined, activeDashboard);
-                            }}
-                            type="outline"
-                            fontSize={FontSize.SECONDARY}
-                            size={Size.SMALL}
-                            borderRadius={5}
-                            hoverStyle="gray"
-                    />
-                    {!Doc.noviceMode && <IconButton
+    @computed get topbarCenter() {
+        const myDashboards = DocListCast(Doc.MyDashboards.data);
+        const activeDashboard = Doc.ActiveDashboard;
+        // const dashboardItems = myDashboards.map(board => {
+        //     const boardTitle = StrCast(board.title);
+        //     console.log(boardTitle);
+        //     return {
+        //         text: boardTitle,
+        //         onClick: () => DashboardView.openDashboard(board),
+        //         val: board,
+        //     };
+        // });
+        return activeDashboard ? (
+            <div className="topbar-center">
+                <Button
+                    text={StrCast(activeDashboard.title)}
+                    tooltip="Browsing mode for directly navigating to documents"
+                    fontSize={FontSize.SECONDARY}
+                    size={Size.SMALL}
+                    color={'white'}
+                    type="outline"
+                    backgroundColor={Colors.MEDIUM_BLUE}
+                    borderRadius={5}
+                    hoverStyle="none"
+                    onClick={(e: React.MouseEvent) => {
+                        const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
+                        ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
+                        ContextMenu.Instance.addItem({
+                            description: 'Snapshot Dashboard',
+                            event: async () => {
+                                const batch = UndoManager.StartBatch('snapshot');
+                                await DashboardView.snapshotDashboard();
+                                batch.end();
+                            },
+                            icon: 'edit',
+                        });
+                        dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
+                    }}
+                />
+                <Button
+                    text={GetEffectiveAcl(Doc.GetProto(activeDashboard)) === AclAdmin ? 'Share' : 'View Original'}
+                    onClick={() => {
+                        SharingManager.Instance.open(undefined, activeDashboard);
+                    }}
+                    type="outline"
+                    fontSize={FontSize.SECONDARY}
+                    size={Size.SMALL}
+                    borderRadius={5}
+                    hoverStyle="gray"
+                />
+                {!Doc.noviceMode && (
+                    <IconButton
                         fontSize={FontSize.SECONDARY}
                         isCircle={true}
                         tooltip="Work on a copy of the dashboard layout"
@@ -139,29 +144,21 @@ export class TopBar extends React.Component {
                             batch.end();
                         }}
                         icon={<FaCamera />}
-                    />}
-                </div>
-            ) : null;
-        }
-    
-        /**
-         * Returns the right hand side of the topbar.
-         * This part of the topbar includes information about the current user,
-         * and allows the user to access their account settings etc.
-         */
-        @computed get topbarRight() {
-    
-            return (
-                <div className="topbar-right">
-                <IconButton
-                    size={Size.SMALL}
-                    isCircle={true}
-                    color={Colors.LIGHT_GRAY}
-                    backgroundColor={Colors.DARK_GRAY}
-                    hoverStyle="gray"
-                    onClick={() => ReportManager.Instance.open()}
-                    icon={<FaBug />}
-                />
+                    />
+                )}
+            </div>
+        ) : null;
+    }
+
+    /**
+     * Returns the right hand side of the topbar.
+     * This part of the topbar includes information about the current user,
+     * and allows the user to access their account settings etc.
+     */
+    @computed get topbarRight() {
+        return (
+            <div className="topbar-right">
+                <IconButton size={Size.SMALL} isCircle={true} color={Colors.LIGHT_GRAY} backgroundColor={Colors.DARK_GRAY} hoverStyle="gray" onClick={() => ReportManager.Instance.open()} icon={<FaBug />} />
                 <IconButton
                     size={Size.SMALL}
                     isCircle={true}
@@ -182,9 +179,9 @@ export class TopBar extends React.Component {
                     icon={<FontAwesomeIcon icon="cog" />}
                 />
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
-                </div>
-            );
-        }
+            </div>
+        );
+    }
 
     // render() {
     //     const activeDashboard = Doc.ActiveDashboard;