add new icon and modal for reporting.

1 files changed, 6 insertions, 0 deletions

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 3fc0a237e..cbcfed06f 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,5 +1,6 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
+import { MdBugReport } from 'react-icons/md';
 import { action } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -18,6 +19,7 @@ import { DashboardView } from '../DashboardView';
 import { Borders, Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
 import './TopBar.scss';
+import { ReportManager } from '../../util/ReportManager';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -31,6 +33,7 @@ export class TopBar extends React.Component {
             DashboardView.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 = Doc.ActiveDashboard;
         return (
@@ -92,6 +95,9 @@ export class TopBar extends React.Component {
                                 {GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'view original'}
                             </div>
                         ) : null}
+                        <div className="topbar-button-icon" onClick={() => ReportManager.Instance.open()}>
+                            <MdBugReport />
+                        </div>
                         <div className="topbar-button-icon" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}>
                             <FontAwesomeIcon icon="question-circle" />
                         </div>