From e04c9d7816dbbbcb79478a97618b14711bf7d0e2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 24 Oct 2022 18:13:02 +0200
Subject: [PATCH] change(ui) - dashboard updates - wip

---
 .../DashboardHeader/DashboardHeader.tsx       | 123 ++++++++++++++++++
 .../components/DashboardHeader/index.ts       |   1 +
 .../DashboardView/DashboardView.tsx           | 104 +--------------
 3 files changed, 130 insertions(+), 98 deletions(-)
 create mode 100644 frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
 create mode 100644 frontend/app/components/Dashboard/components/DashboardHeader/index.ts

diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
new file mode 100644
index 000000000..89d2ed4d0
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import { Tooltip } from 'react-tippy';
+import Breadcrumb from 'Shared/Breadcrumb';
+import { withSiteId } from 'App/routes';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { Button, PageTitle, confirm } from 'UI';
+import SelectDateRange from 'Shared/SelectDateRange';
+import { useStore } from 'App/mstore';
+import { useModal } from 'App/components/Modal';
+import DashboardOptions from '../DashboardOptions';
+import withModal from 'App/components/Modal/withModal';
+import { observer } from 'mobx-react-lite';
+import DashboardEditModal from '../DashboardEditModal';
+
+interface IProps {
+  siteId: string;
+  renderReport?: any;
+}
+
+type Props = IProps & RouteComponentProps;
+
+function DashboardHeader(props: Props) {
+  const { siteId } = props;
+  const { dashboardStore } = useStore();
+  const { showModal } = useModal();
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const [focusTitle, setFocusedInput] = React.useState(true);
+  const [showEditModal, setShowEditModal] = React.useState(false);
+  const period = dashboardStore.period;
+
+  const dashboard: any = dashboardStore.selectedDashboard;
+
+  const onEdit = (isTitle: boolean) => {
+    dashboardStore.initDashboard(dashboard);
+    setFocusedInput(isTitle);
+    setShowEditModal(true);
+  };
+
+  const onDelete = async () => {
+    if (
+      await confirm({
+        header: 'Confirm',
+        confirmButton: 'Yes, delete',
+        confirmation: `Are you sure you want to permanently delete this Dashboard?`,
+      })
+    ) {
+      dashboardStore.deleteDashboard(dashboard).then(() => {
+        props.history.push(withSiteId(`/dashboard`, siteId));
+      });
+    }
+  };
+  return (
+    <div>
+      <DashboardEditModal
+        show={showEditModal}
+        closeHandler={() => setShowEditModal(false)}
+        focusTitle={focusTitle}
+      />
+      <Breadcrumb
+        items={[
+          {
+            label: 'Dashboards',
+            to: withSiteId('/dashboard', siteId),
+          },
+          { label: (dashboard && dashboard.name) || '' },
+        ]}
+      />
+      <div className="flex items-center mb-2 justify-between">
+        <div className="flex items-center" style={{ flex: 3 }}>
+          <PageTitle
+            title={
+              // @ts-ignore
+              <Tooltip delay={100} arrow title="Double click to rename">
+                {dashboard?.name}
+              </Tooltip>
+            }
+            onDoubleClick={() => onEdit(true)}
+            className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
+          />
+        </div>
+        <div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
+          <Button variant="primary" onClick={() => setShowTooltip(true)} icon="plus">
+            Add Card
+          </Button>
+          <div className="mx-4"></div>
+          <div
+            className="flex items-center flex-shrink-0 justify-end"
+            style={{ width: 'fit-content' }}
+          >
+            <SelectDateRange
+              style={{ width: '300px' }}
+              period={period}
+              onChange={(period: any) => dashboardStore.setPeriod(period)}
+              right={true}
+            />
+          </div>
+          <div className="mx-4" />
+          <div className="flex items-center flex-shrink-0">
+            <DashboardOptions
+              editHandler={onEdit}
+              deleteHandler={onDelete}
+              renderReport={props.renderReport}
+              isTitlePresent={!!dashboard?.description}
+            />
+          </div>
+        </div>
+      </div>
+      <div className="pb-4">
+        {/* @ts-ignore */}
+        <Tooltip delay={100} arrow title="Double click to rename" className="w-fit !block">
+          <h2
+            className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
+            onDoubleClick={() => onEdit(false)}
+          >
+            {dashboard?.description || 'Describe the purpose of this dashboard'}
+          </h2>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(withModal(observer(DashboardHeader)));
diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/index.ts b/frontend/app/components/Dashboard/components/DashboardHeader/index.ts
new file mode 100644
index 000000000..4bd864695
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardHeader/index.ts
@@ -0,0 +1 @@
+export { default } from './DashboardHeader';
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 93377efd2..bf02d1f8e 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,23 +1,17 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { Button, PageTitle, Loader, Tooltip, Popover } from 'UI';
+import { Loader, Tooltip, Popover } from 'UI';
 import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
-import { confirm } from 'UI';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { useModal } from 'App/components/Modal';
 import DashboardModal from '../DashboardModal';
-import DashboardEditModal from '../DashboardEditModal';
 import AlertFormModal from 'App/components/Alerts/AlertFormModal';
 import withPageTitle from 'HOCs/withPageTitle';
 import withReport from 'App/components/hocs/withReport';
-import DashboardOptions from '../DashboardOptions';
-import SelectDateRange from 'Shared/SelectDateRange';
-import Breadcrumb from 'Shared/Breadcrumb';
-import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import DashboardHeader from '../DashboardHeader';
 
 interface IProps {
   siteId: string;
@@ -32,14 +26,9 @@ function DashboardView(props: Props) {
   const { dashboardStore } = useStore();
   const { showModal } = useModal();
 
-  const [showTooltip, setShowTooltip] = React.useState(false);
-  const [focusTitle, setFocusedInput] = React.useState(true);
-  const [showEditModal, setShowEditModal] = React.useState(false);
-
   const showAlertModal = dashboardStore.showAlertModal;
   const loading = dashboardStore.fetchingDashboard;
   const dashboard: any = dashboardStore.selectedDashboard;
-  const period = dashboardStore.period;
 
   const queryParams = new URLSearchParams(props.location.search);
 
@@ -50,6 +39,7 @@ function DashboardView(props: Props) {
       search: queryParams.toString(),
     });
   };
+
   const pushQuery = () => {
     if (!queryParams.has('modal')) props.history.push('?modal=addMetric');
   };
@@ -81,96 +71,14 @@ function DashboardView(props: Props) {
     );
   };
 
-  const onEdit = (isTitle: boolean) => {
-    dashboardStore.initDashboard(dashboard);
-    setFocusedInput(isTitle);
-    setShowEditModal(true);
-  };
-
-  const onDelete = async () => {
-    if (
-      await confirm({
-        header: 'Confirm',
-        confirmButton: 'Yes, delete',
-        confirmation: `Are you sure you want to permanently delete this Dashboard?`,
-      })
-    ) {
-      dashboardStore.deleteDashboard(dashboard).then(() => {
-        props.history.push(withSiteId(`/dashboard`, siteId));
-      });
-    }
-  };
-
   if (!dashboard) return null;
 
   return (
     <Loader loading={loading}>
       <div style={{ maxWidth: '1300px', margin: 'auto' }}>
-        <DashboardEditModal
-          show={showEditModal}
-          closeHandler={() => setShowEditModal(false)}
-          focusTitle={focusTitle}
-        />
-        <Breadcrumb
-          items={[
-            {
-              label: 'Dashboards',
-              to: withSiteId('/dashboard', siteId),
-            },
-            { label: (dashboard && dashboard.name) || '' },
-          ]}
-        />
-        <div className="flex items-center mb-2 justify-between">
-          <div className="flex items-center" style={{ flex: 3 }}>
-            <PageTitle
-              title={
-                // @ts-ignore
-                <Tooltip delay={200} title="Double click to rename">
-                  {dashboard?.name}
-                </Tooltip>
-              }
-              onDoubleClick={() => onEdit(true)}
-              className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
-            />
-          </div>
-          <div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
-            <Button variant="primary" onClick={() => setShowTooltip(true)} icon="plus">
-              Add Card
-            </Button>
-            <div className="mx-4"></div>
-            <div
-              className="flex items-center flex-shrink-0 justify-end"
-              style={{ width: 'fit-content' }}
-            >
-              <SelectDateRange
-                style={{ width: '300px' }}
-                period={period}
-                onChange={(period: any) => dashboardStore.setPeriod(period)}
-                right={true}
-              />
-            </div>
-            <div className="mx-4" />
-            <div className="flex items-center flex-shrink-0">
-              <DashboardOptions
-                editHandler={onEdit}
-                deleteHandler={onDelete}
-                renderReport={props.renderReport}
-                isTitlePresent={!!dashboard?.description}
-              />
-            </div>
-          </div>
-        </div>
-        <div className="pb-4">
-          {/* @ts-ignore */}
-          <Tooltip delay={100} arrow title="Double click to rename" className="w-fit !block">
-            <h2
-              className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
-              onDoubleClick={() => onEdit(false)}
-            >
-              {dashboard?.description || 'Describe the purpose of this dashboard'}
-            </h2>
-          </Tooltip>
-        </div>
+         {/* @ts-ignore  */}
+        <DashboardHeader renderReport={props.renderReport} />
+
         <DashboardWidgetGrid
           siteId={siteId}
           dashboardId={dashboardId}