From bb33ea4714abe2e52dae4ab2320c644e9e48ce45 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 16 May 2022 17:51:47 +0200
Subject: [PATCH] fix(ui): lettering fixes, move create dashboard to sidebar
 title

---
 .../DashboardMetricSelection.tsx              |  2 +-
 .../DashboardModal/DashboardModal.tsx         | 64 ++++++++++---------
 .../DashboardOptions/DashboardOptions.tsx     |  6 +-
 .../DashboardRouter/DashboardRouter.tsx       |  2 +-
 .../DashboardSideMenu/DashboardSideMenu.tsx   | 39 +++++++----
 5 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index 400654df2..1482250ef 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -114,4 +114,4 @@ function DashboardMetricSelection(props) {
     ));
 }
 
-export default DashboardMetricSelection;
\ No newline at end of file
+export default DashboardMetricSelection;
diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index d19556857..f310cc824 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -36,41 +36,43 @@ function DashboardModal(props) {
     }
 
     return useObserver(() => (
-        <div
-            className="fixed border-r shadow p-4 h-screen"
-            style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '85%', maxWidth: '1300px' }}
-        >
-            <div className="mb-6 flex items-end justify-between">
-                <div>
-                    <h1 className="text-2xl">
-                        { dashboard.exists() ? "Add metric(s) to dashboard" : "Create Dashboard" }
-                    </h1>
+        <div style={{ width: '85vw' }}>
+            <div
+                className="border-r shadow p-4 h-screen"
+                style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}
+            >
+                <div className="mb-6 flex items-end justify-between">
+                    <div>
+                        <h1 className="text-2xl">
+                            { dashboard.exists() ? "Add metrics to dashboard" : "Create Dashboard" }
+                        </h1>
+                    </div>
+                    <div>
+                        {dashboard.exists() && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
+                    </div>
                 </div>
-                <div>
-                    {dashboard.exists() && <Button outline size="small" onClick={handleCreateNew}>Create New</Button>}
-                </div>
-            </div>
-            { !dashboard.exists() && (
-                <>
-                    <DashboardForm />
-                    <p>Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.</p>
-                </>
-            )}
-            <DashboardMetricSelection />
+                { !dashboard.exists() && (
+                    <>
+                        <DashboardForm />
+                        <p>Create new dashboard by choosing from the range of predefined metrics that you care about. You can always add your custom metrics later.</p>
+                    </>
+                )}
+                <DashboardMetricSelection />
 
-            <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
-                <Button
-                    primary
-                    className=""
-                    disabled={!dashboard.isValid || loading}
-                    onClick={onSave}
-                >
-                    { dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
-                </Button>
-                <span className="ml-2 color-gray-medium">{selectedWidgetsCount} Widgets</span>
+                <div className="flex items-center absolute bottom-0 left-0 right-0 bg-white border-t p-3">
+                    <Button
+                        primary
+                        className=""
+                        disabled={!dashboard.isValid || loading}
+                        onClick={onSave}
+                    >
+                        { dashboard.exists() ? "Add Selected to Dashboard" : "Create" }
+                    </Button>
+                    <span className="ml-2 color-gray-medium">{selectedWidgetsCount} Metrics</span>
+                </div>
             </div>
         </div>
     ));
 }
 
-export default withRouter(DashboardModal);
\ No newline at end of file
+export default withRouter(DashboardModal);
diff --git a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
index b616d2e50..08e5f88f4 100644
--- a/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardOptions/DashboardOptions.tsx
@@ -19,10 +19,10 @@ function DashboardOptions(props: Props) {
     if (isEnterprise) {
         menuItems.unshift({ icon: 'pdf-download', text: 'Download Report', onClick: renderReport });
     }
-        
+
     return (
         <ItemMenu
-            label="Options"
+            label="More Options"
             items={menuItems}
         />
     );
@@ -30,4 +30,4 @@ function DashboardOptions(props: Props) {
 
 export default connect(state => ({
     isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
-}))(DashboardOptions);
\ No newline at end of file
+}))(DashboardOptions);
diff --git a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
index 6004202a2..31e509d52 100644
--- a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
@@ -58,4 +58,4 @@ function DashboardRouter(props: Props) {
     );
 }
 
-export default withRouter(DashboardRouter);
\ No newline at end of file
+export default withRouter(DashboardRouter);
diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
index 9dd64733c..7d2ca62b4 100644
--- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
@@ -11,15 +11,18 @@ import DashboardModal from '../DashboardModal';
 import cn from 'classnames';
 import { Tooltip } from 'react-tippy';
 import { connect } from 'react-redux';
+import { compose } from 'redux'
 import { setShowAlerts } from 'Duck/dashboard';
+import stl from 'Shared/MainSearchBar/mainSearchBar.css';
 
 const SHOW_COUNT = 8;
+
 interface Props {
     siteId: string
     history: any
     setShowAlerts: (show: boolean) => void
 }
-function DashboardSideMenu(props: Props) {
+function DashboardSideMenu(props: RouteComponentProps<Props>) {
     const { history, siteId, setShowAlerts } = props;
     const { hideModal, showModal } = useModal();
     const { dashboardStore } = useStore();
@@ -40,7 +43,7 @@ function DashboardSideMenu(props: Props) {
 
     const onAddDashboardClick = (e) => {
         dashboardStore.initDashboard();
-        showModal(<DashboardModal />, {})
+        showModal(<DashboardModal />, { right: true })
     }
 
     const togglePinned = (dashboard) => {
@@ -49,11 +52,24 @@ function DashboardSideMenu(props: Props) {
 
     return useObserver(() => (
         <div>
-            <SideMenuHeader className="mb-4" text="Dashboards" />
+            <SideMenuHeader
+                className="mb-4 flex items-center"
+                text="DASHBOARDS"
+                button={
+                    <span
+                        className={cn("ml-1 flex items-center", stl.button)}
+                        onClick={onAddDashboardClick}
+                        style={{ marginBottom: 0 }}
+                    >
+                        <Icon name="plus" size="16" color="main" />
+                        <span className="ml-1" style={{ textTransform: 'none' }}>Create</span>
+                    </span>
+                }
+            />
             {dashboardsPicked.sort((a: any, b: any) => a.isPinned === b.isPinned ? 0 : a.isPinned ? -1 : 1 ).map((item: any) => (
                 <SideMenuitem
                     key={ item.dashboardId }
-                    active={item.dashboardId === dashboardId}
+                    active={item.dashboardId === dashboardId && !isMetric}
                     title={ item.name }
                     iconName={ item.icon }
                     onClick={() => onItemClick(item)}
@@ -92,14 +108,6 @@ function DashboardSideMenu(props: Props) {
                 )}
             </div>
             <div className="border-t w-full my-2" />
-            <div className="w-full">
-				<SideMenuitem
-					id="menu-manage-alerts"
-					title="Create Dashboard"
-					iconName="plus"
-					onClick={onAddDashboardClick}
-				/>
-			</div>
             <div className="border-t w-full my-2" />
             <div className="w-full">
 				<SideMenuitem
@@ -117,10 +125,13 @@ function DashboardSideMenu(props: Props) {
 					title="Alerts"
 					iconName="bell-plus"
 					onClick={() => setShowAlerts(true)}
-				/>				
+				/>
 			</div>
         </div>
     ));
 }
 
-export default connect(null, { setShowAlerts })(withRouter(DashboardSideMenu));
\ No newline at end of file
+export default compose(
+    withRouter,
+    connect(null, { setShowAlerts }),
+)(DashboardSideMenu) as React.FunctionComponent<RouteComponentProps<Props>>