Revert "Merge branch 'master' into temporalmedia-mehek"

This reverts commit 145117365b2708ef6b365c6f0f10c38b85a87307, reversing
changes made to 7eedde332010c8896be636f0b5c6a7b2c8043e48.

2 files changed, 201 insertions, 201 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index c5b340514..923f1892e 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,44 +1,29 @@
 @import "../global/globalCssVariables";
 
-
 .topbar-container {
-      display: flex;
-      flex-direction: column;
-      font-size: 10px;
-      line-height: 1;
-      overflow-y: auto;
-      overflow-x: visible;
-      background: $dark-gray;
-      overflow: visible;
-      z-index: 1000;
-      height: $topbar-height;
-      background-color: $dark-gray;
-
-      .topbar-inner-container {
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            display: grid;
-            grid-auto-columns: 33.3% 33.3% 33.3%;
-            align-items: center;
-
-            // &:first-child {
-            //       height: 20px;
-            // }
-      }
-
-      .topbar-button-text {
-            color: $white;
-            padding: 10px;
-            size: 15;
-
-            &:hover {
-                  font-weight: 500;
-            }
-      }
-
-      .topbar-button-icon {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    font-size: 10px;
+    line-height: 1;
+    overflow-y: auto;
+    overflow-x: visible;
+    background: $dark-gray;
+    overflow: visible;
+    z-index: 1000;
+
+    .topbar-bar {
+        height: $topbar-height;
+        display: grid;
+        grid-auto-columns: 33.3% 33.3% 33.3%;
+        align-items: center;
+        background-color: $dark-gray;
+
+        .topBar-icon {
             cursor: pointer;
+            font-size: 12.5px;
+            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -46,22 +31,21 @@
             align-items: center;
             justify-self: center;
             align-self: center;
+            border-radius: $standard-border-radius;
             padding: 5px;
             transition: linear 0.2s;
-            color: $white;
+            color: $black;
+            background-color: $light-gray;
 
             &:hover {
-                  background-color: darken($color: $light-gray, $amount: 20);
+                background-color: darken($color: $light-gray, $amount: 20);
             }
-      }
+        }
 
-      .topbar-title {
-            color: $white;
-            font-size: 17;
-            font-weight: 500;
-      }
 
-      .topbar-center {
+
+
+        .topbar-center {
             grid-column: 2;
             display: inline-flex;
             justify-content: center;
@@ -69,23 +53,42 @@
             gap: 5px;
 
             .topbar-dashboards {
-                  display: flex;
-                  flex-direction: row;
-                  gap: 5px;
+                display: flex;
+                flex-direction: row;
+                gap: 5px;
+            }
+
+            .topbar-lozenge-dashboard {
+                display: flex;
+
+
+
+                .topbar-dashSelect {
+                    border: none;
+                    background-color: $dark-gray;
+                    color: $white;
+                    font-family: 'Roboto';
+                    font-size: 17;
+                    font-weight: 500;
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
             }
-      }
+        }
 
 
-      .topbar-right {
+        .topbar-right {
             grid-column: 3;
             position: relative;
             display: flex;
             justify-content: flex-end;
             gap: 5px;
             margin-right: 5px;
-      }
+        }
 
-      .topbar-left {
+        .topbar-left {
             grid-column: 1;
             color: black;
             font-family: 'Roboto';
@@ -95,122 +98,123 @@
             gap: 5px;
 
             .topBar-icon:hover {
-                  background-color: $close-red;
+                background-color: $close-red;
             }
 
             .topbar-lozenge-user,
             .topbar-lozenge {
-                  height: 23;
-                  font-size: 12;
-                  color: white;
-                  font-family: 'Roboto';
-                  font-weight: 400;
-                  padding: 4px;
-                  align-self: center;
-                  margin-left: 7px;
-                  display: flex;
-                  align-items: center;
-
-                  .topbar-dashSelect {
-                        border: none;
-                        background-color: transparent;
-                        color: black;
-                        font-family: 'Roboto';
-                        font-size: 17;
-                        font-weight: 500;
-
-                        &:hover {
-                              cursor: pointer;
-                        }
-                  }
+                height: 23;
+                font-size: 12;
+                color: white;
+                font-family: 'Roboto';
+                font-weight: 400;
+                padding: 4px;
+                align-self: center;
+                margin-left: 7px;
+                display: flex;
+                align-items: center;
+
+                .topbar-dashSelect {
+                    border: none;
+                    background-color: transparent;
+                    color: black;
+                    font-family: 'Roboto';
+                    font-size: 17;
+                    font-weight: 500;
+
+                    &:hover {
+                        cursor: pointer;
+                    }
+                }
             }
 
             .topbar-logoff {
-                  border-radius: 3px;
-                  background: olivedrab;
-                  color: white;
-                  display: none;
-                  margin-left: 5px;
-                  padding: 1px 2px 1px 2px;
-                  cursor: pointer;
+                border-radius: 3px;
+                background: olivedrab;
+                color: white;
+                display: none;
+                margin-left: 5px;
+                padding: 1px 2px 1px 2px;
+                cursor: pointer;
             }
 
             .topbar-logoff {
-                  background: red;
+                background: red;
             }
 
             .topbar-lozenge-user:hover {
-                  .topbar-logoff {
-                        display: inline-block;
-                  }
+                .topbar-logoff {
+                    display: inline-block;
+                }
             }
-      }
+        }
 
-      .topbar-barChild {
+        .topbar-barChild {
 
             &.topbar-collection {
-                  flex: 0 1 auto;
-                  margin-left: 2px;
-                  margin-right: 2px
+                flex: 0 1 auto;
+                margin-left: 2px;
+                margin-right: 2px
             }
 
             &.topbar-input {
-                  margin: 5px;
-                  border-radius: 20px;
-                  border: $dark-gray;
-                  display: block;
-                  width: 130px;
-                  -webkit-transition: width 0.4s;
-                  transition: width 0.4s;
-                  /* align-self: stretch; */
-                  outline: none;
-
-                  &:focus {
-                        width: 500px;
-                        outline: none;
-                  }
+                margin: 5px;
+                border-radius: 20px;
+                border: $dark-gray;
+                display: block;
+                width: 130px;
+                -webkit-transition: width 0.4s;
+                transition: width 0.4s;
+                /* align-self: stretch; */
+                outline: none;
+
+                &:focus {
+                    width: 500px;
+                    outline: none;
+                }
             }
 
             &.topbar-filter {
-                  align-self: stretch;
+                align-self: stretch;
 
-                  button {
-                        transform: none;
+                button {
+                    transform: none;
 
-                        &:hover {
-                              transform: none;
-                        }
-                  }
+                    &:hover {
+                        transform: none;
+                    }
+                }
             }
 
             &.topbar-submit {
-                  margin-left: 2px;
-                  margin-right: 2px
+                margin-left: 2px;
+                margin-right: 2px
             }
 
             &.topbar-close {
-                  color: $white;
-                  max-height: $topbar-height;
+                color: $white;
+                max-height: $topbar-height;
             }
-      }
+        }
+    }
 }
 
 .topbar-results {
-      display: flex;
-      flex-direction: column;
-      top: 300px;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: visible;
-
-      .no-result {
-            width: 500px;
-            background: $light-gray;
-            padding: 10px;
-            height: 50px;
-            text-transform: uppercase;
-            text-align: left;
-            font-weight: bold;
-      }
+    display: flex;
+    flex-direction: column;
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: visible;
+
+    .no-result {
+        width: 500px;
+        background: $light-gray;
+        padding: 10px;
+        height: 50px;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 0db3950a2..be248ab92 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -3,18 +3,13 @@ import { Tooltip } from "@material-ui/core";
 import { action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from 'react';
-import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
+import { Doc, DocListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { Cast, StrCast } from '../../../fields/Types';
-import { GetEffectiveAcl } from "../../../fields/util";
+import { StrCast } from '../../../fields/Types';
 import { Utils } from '../../../Utils';
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
-import { DocumentManager } from "../../util/DocumentManager";
-import { SelectionManager } from "../../util/SelectionManager";
 import { SettingsManager } from "../../util/SettingsManager";
-import { SharingManager } from "../../util/SharingManager";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
-import { ContextMenu } from "../ContextMenu";
 import { Borders, Colors } from "../global/globalEnums";
 import { MainView } from "../MainView";
 import "./TopBar.scss";
@@ -25,63 +20,64 @@ import "./TopBar.scss";
  */
 @observer
 export class TopBar extends React.Component {
-      navigateToHome = () => {
-            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
-                Doc.UserDoc().activePage = "home";
-                CurrentUserUtils.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use
-            });
-      }
-      render() {
-            const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null)
-            return (
-                  //TODO:glr Add support for light / dark mode
-                  <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
-                        <div className="topbar-inner-container">
-                              <div className="topbar-left">
-                                    {activeDashboard ? <div className="topbar-button-text" onClick={e => {
-                                    ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" });
-                                    ContextMenu.Instance.displayMenu(e.clientX +5, e.clientY + 10);
-                                    }}>{Doc.CurrentUserEmail}</div> : (null)}
-                              </div>
-                              <div className="topbar-center" >
-                                    <div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
-                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
-                                    </div>
-                                    <div className="topbar-button-icon" onClick={e => {
-                                        const dashView = 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 CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
-                                            batch.end();
-                                        }, icon: "edit" });
-                                        dashView?.showContextMenu(e.clientX+20, e.clientY+30);
-                                    }}>
-                                    <FontAwesomeIcon color="white" size="lg" icon="bars" />
-                                    </div>
-                                    <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
-                                        <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
-                                            <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red":"white"} icon="eye"  size="lg" />
-                                        </div>
-                                    </Tooltip>
-                              </div>
-                              <div className="topbar-right" >
-                                    <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
-                                        {/* TODO: if this is my dashboard, display share
-                                        if this is a shared dashboard, display "view original or view annotated" */}
-                                        { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author ===  Doc.CurrentUserEmail ?  "Share": "view original" }
-                                    </div>
-                                    <div className="topbar-button-icon" onClick={() => window.open(
-                                          "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
-                                          <FontAwesomeIcon icon="question-circle" />
-                                    </div>
-                                    <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
-                                          <FontAwesomeIcon icon="cog" />
-                                    </div>
-                              </div>
+    render() {
+        const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
+        return (
+            //TODO:glr Add support for light / dark mode
+            <div style={{ pointerEvents: "all" }} className="topbar-container">
+                <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
+                    <div className="topbar-left">
+                        <div className="topbar-lozenge-user">
+                            {`${Doc.CurrentUserEmail}`}
                         </div>
-                  </div>
-                        
-            );
-      }
+                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                            {"Log out"}
+                        </div>
+                    </div>
+                    <div className="topbar-center" >
+                        <div className="topbar-lozenge-dashboard">
+                            <select className="topbar-dashSelect" onChange={undoBatch(e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)]))}
+                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
+                                style={{ color: Colors.WHITE }}>
+                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
+                            </select>
+                        </div>
+                        <div className="topbar-dashboards">
+                            <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
+                                const batch = UndoManager.StartBatch("new dash");
+                                await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
+                                batch.end();
+                            }}>
+                                {"New"}<FontAwesomeIcon icon="plus" />
+                            </div>
+                            </Tooltip>
+                            <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom">
+                                <div className="topbar-icon" onClick={async () => {
+                                    const batch = UndoManager.StartBatch("snapshot");
+                                    await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
+                                    batch.end();
+                                }}>
+                                    {"Snapshot"}<FontAwesomeIcon icon="camera" />
+                                </div>
+                            </Tooltip>
+                            <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
+                                <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
+                                    {"Explore"}<FontAwesomeIcon icon="map" />
+                                </div>
+                            </Tooltip>
+                        </div>
+                    </div>
+                    <div className="topbar-right" >
+                        <div className="topbar-icon" onClick={() => window.open(
+                            "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
+                            {"Help"}<FontAwesomeIcon icon="question-circle" />
+                        </div>
+                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
+                            {"Settings"}<FontAwesomeIcon icon="cog" />
+                        </div>
+                    </div>
+                </div>
+            </div >
+        );
+    }
 }
\ No newline at end of file