1 files changed, 24 insertions, 8 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 575d5849e..230a85d32 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, IconButton, isDark, Size, Type } from 'browndash-components';
-import { action, computed, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug } from 'react-icons/fa';
@@ -22,16 +22,27 @@ import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { CollectionLinearView } from '../collections/collectionLinear';
 import { DashboardView } from '../DashboardView';
 import { Colors } from '../global/globalEnums';
-import { DocumentViewInternal } from '../nodes/DocumentView';
+import { DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentView';
 import { DefaultStyleProvider } from '../StyleProvider';
 import './TopBar.scss';
+import { dropActionType } from '../../util/DragManager';
+import { Flip } from 'react-awesome-reveal';
+import { ObservableReactComponent } from '../ObservableReactComponent';
 
 /**
  * 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.
  */
 @observer
-export class TopBar extends React.Component {
+export class TopBar extends ObservableReactComponent<{}> {
+    static Instance: TopBar;
+    @observable private _flipDocumentation = 0;
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+        TopBar.Instance = this;
+    }
+
     navigateToHome = () => {
         (CollectionDockingView.Instance?.CaptureThumbnail() ?? new Promise<void>(res => res())).then(() => {
             Doc.ActivePage = 'home';
@@ -100,16 +111,14 @@ export class TopBar extends React.Component {
             <div className="collectionMenu-contMenuButtons" style={{ height: '100%' }}>
                 <CollectionLinearView
                     Document={selDoc}
+                    docViewPath={returnEmptyDocViewList}
                     fieldKey="data"
-                    dropAction="embed"
-                    setHeight={returnFalse}
+                    dropAction={dropActionType.embed}
                     styleProvider={DefaultStyleProvider}
-                    bringToFront={emptyFunction}
                     select={emptyFunction}
                     isContentActive={returnTrue}
                     isAnyChildContentActive={returnFalse}
                     isSelected={returnFalse}
-                    docViewPath={returnEmptyDoclist}
                     moveDocument={returnFalse}
                     addDocument={returnFalse}
                     addDocTab={DocumentViewInternal.addDocTabFunc}
@@ -163,7 +172,6 @@ export class TopBar extends React.Component {
             </div>
         ) : null;
     }
-
     /**
      * Returns the right hand side of the topbar.
      * This part of the topbar includes information about the current user,
@@ -185,6 +193,9 @@ export class TopBar extends React.Component {
                     />
                 ) : null}
                 <IconButton tooltip={'Issue Reporter ⌘I'} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                <Flip key={this._flipDocumentation}>
+                    <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
+                </Flip>
                 <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton tooltip={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
@@ -200,6 +211,11 @@ export class TopBar extends React.Component {
         );
     }
 
+    /**
+     * Make the documentation icon flip around to draw attention to it.
+     */
+    FlipDocumentationIcon = action(() => (this._flipDocumentation = this._flipDocumentation + 1));
+
     render() {
         return (
             //TODO:glr Add support for light / dark mode