From 86d47b595dd36bbf5904c428870d002323c6b5f7 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 27 Jun 2023 18:05:08 +0200
Subject: [PATCH] change(ui): new card with modal options

---
 .../components/AddCardModal/AddCardModal.tsx  |  4 +-
 .../MetricTypeList/MetricTypeList.tsx         | 24 ++++----
 .../MetricViewHeader/MetricViewHeader.tsx     | 55 ++++++++++---------
 .../MetricsLibraryModal.tsx                   |  2 +-
 .../components/MetricsView/MetricsView.tsx    |  2 +-
 5 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
index 227b485f6..dc9022873 100644
--- a/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
+++ b/frontend/app/components/Dashboard/components/AddCardModal/AddCardModal.tsx
@@ -4,14 +4,14 @@ import MetricTypeList from '../MetricTypeList';
 
 interface Props {
   siteId: string;
-  dashboardId: string;
+  dashboardId?: string;
 }
 function AddCardModal(props: Props) {
   return (
     <>
       <Modal.Header title="Add Card" />
       <Modal.Content className="px-3 pb-6">
-        <MetricTypeList siteId={props.siteId} dashboardId={parseInt(props.dashboardId)} />
+        <MetricTypeList siteId={props.siteId} dashboardId={parseInt(props.dashboardId as string)} />
       </Modal.Content>
     </>
   );
diff --git a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
index 12d6e88d1..898ab416b 100644
--- a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
@@ -4,20 +4,21 @@ import MetricsLibraryModal from '../MetricsLibraryModal';
 import MetricTypeItem, { MetricType } from '../MetricTypeItem/MetricTypeItem';
 import { TYPES, LIBRARY, INSIGHTS } from 'App/constants/card';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { dashboardMetricCreate, withSiteId } from 'App/routes';
+import { dashboardMetricCreate, metricCreate, withSiteId } from 'App/routes';
 import { useStore } from 'App/mstore';
 import { connect } from 'react-redux';
 import { ENTERPRISE_REQUEIRED } from 'App/constants';
 
 interface Props extends RouteComponentProps {
-  dashboardId: number;
+  dashboardId?: number;
   siteId: string;
   isEnterprise: boolean;
 }
+
 function MetricTypeList(props: Props) {
   const { dashboardId, siteId, history, isEnterprise } = props;
   const { metricStore } = useStore();
-  const { hideModal } = useModal();
+  const { showModal, hideModal } = useModal();
 
   const list = React.useMemo(() => {
     return TYPES.map((metric: MetricType) => {
@@ -25,12 +26,15 @@ function MetricTypeList(props: Props) {
       return {
         ...metric,
         disabled: metric.slug === INSIGHTS && !isEnterprise,
-        tooltipTitle: disabled ? ENTERPRISE_REQUEIRED : '',
+        tooltipTitle: disabled ? ENTERPRISE_REQUEIRED : ''
       };
     });
   }, []);
 
-  const { showModal } = useModal();
+  if (!dashboardId) {
+    list.shift();
+  }
+
   const onClick = ({ slug }: MetricType) => {
     hideModal();
     if (slug === LIBRARY) {
@@ -39,16 +43,16 @@ function MetricTypeList(props: Props) {
         width: 800,
         onClose: () => {
           metricStore.updateKey('metricsSearch', '');
-        },
+        }
       });
     }
 
-    // TODO redirect to card builder with metricType query param
-    const path = withSiteId(dashboardMetricCreate(dashboardId + ''), siteId);
+    const path = dashboardId ? withSiteId(dashboardMetricCreate(dashboardId + ''), siteId) :
+      withSiteId(metricCreate(), siteId);
     const queryString = new URLSearchParams({ type: slug }).toString();
     history.push({
       pathname: path,
-      search: `?${queryString}`,
+      search: `?${queryString}`
     });
   };
 
@@ -62,5 +66,5 @@ function MetricTypeList(props: Props) {
 }
 
 export default connect((state: any) => ({
-  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
+  isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee'
 }))(withRouter(MetricTypeList));
diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
index 719677914..89fc066be 100644
--- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
@@ -1,45 +1,48 @@
 import React from 'react';
-import { Icon, PageTitle, Button, Link, Toggler } from 'UI';
+import { PageTitle, Button, Link, Toggler } from 'UI';
 import MetricsSearch from '../MetricsSearch';
 import Select from 'Shared/Select';
 import { useStore } from 'App/mstore';
 import { observer, useObserver } from 'mobx-react-lite';
 import { DROPDOWN_OPTIONS } from 'App/constants/card';
+import AddCardModal from 'Components/Dashboard/components/AddCardModal';
+import { useModal } from 'Components/Modal';
 
-function MetricViewHeader() {
+function MetricViewHeader({ siteId }: { siteId: string }) {
   const { metricStore } = useStore();
   const filter = metricStore.filter;
+  const { showModal } = useModal();
 
   return (
     <div>
-      <div className="flex items-center justify-between px-6">
-        <div className="flex items-baseline mr-3">
-          <PageTitle title="Cards" className="" />
+      <div className='flex items-center justify-between px-6'>
+        <div className='flex items-baseline mr-3'>
+          <PageTitle title='Cards' className='' />
         </div>
-        <div className="ml-auto flex items-center">
-          <Link to={'/metrics/create'}>
-            <Button variant="primary">New Card</Button>
-          </Link>
-          <div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
+        <div className='ml-auto flex items-center'>
+          <Button variant='primary'
+                  onClick={() => showModal(<AddCardModal siteId={siteId} />, { right: true })}
+          >New Card</Button>
+          <div className='ml-4 w-1/4' style={{ minWidth: 300 }}>
             <MetricsSearch />
           </div>
         </div>
       </div>
-      
-      <div className="border-y px-6 py-1 mt-2 flex items-center w-full justify-between">
-        <div className="items-center flex gap-4">
+
+      <div className='border-y px-6 py-1 mt-2 flex items-center w-full justify-between'>
+        <div className='items-center flex gap-4'>
           <Toggler
-            label="My Cards"
+            label='My Cards'
             checked={filter.showMine}
-            name="test"
-            className="font-medium mr-2"
+            name='test'
+            className='font-medium mr-2'
             onChange={() =>
               metricStore.updateKey('filter', { ...filter, showMine: !filter.showMine })
             }
           />
           <Select
             options={[{ label: 'All Types', value: 'all' }, ...DROPDOWN_OPTIONS]}
-            name="type"
+            name='type'
             defaultValue={filter.type}
             onChange={({ value }) =>
               metricStore.updateKey('filter', { ...filter, type: value.value })
@@ -56,19 +59,19 @@ function MetricViewHeader() {
           />
         </div>
 
-        <div className="flex items-center">
+        <div className='flex items-center'>
           <ListViewToggler />
 
           <Select
             options={[
               { label: 'Newest', value: 'desc' },
-              { label: 'Oldest', value: 'asc' },
+              { label: 'Oldest', value: 'asc' }
             ]}
-            name="sort"
+            name='sort'
             defaultValue={metricStore.sort.by}
             onChange={({ value }) => metricStore.updateKey('sort', { by: value.value })}
             plain={true}
-            className="ml-4"
+            className='ml-4'
           />
         </div>
       </div>
@@ -83,13 +86,13 @@ function DashboardDropdown({ onChange, plain = false }: { plain?: boolean; onCha
   const dashboardOptions = dashboardStore.dashboards.map((i: any) => ({
     key: i.id,
     label: i.name,
-    value: i.dashboardId,
+    value: i.dashboardId
   }));
 
   return (
     <Select
       isSearchable={true}
-      placeholder="Filter by Dashboard"
+      placeholder='Filter by Dashboard'
       plain={plain}
       options={dashboardOptions}
       value={metricStore.filter.dashboard}
@@ -103,16 +106,16 @@ function ListViewToggler({}) {
   const { metricStore } = useStore();
   const listView = useObserver(() => metricStore.listView);
   return (
-    <div className="flex items-center">
+    <div className='flex items-center'>
       <Button
-        icon="list-alt"
+        icon='list-alt'
         variant={listView ? 'text-primary' : 'text'}
         onClick={() => metricStore.updateKey('listView', true)}
       >
         List
       </Button>
       <Button
-        icon="grid"
+        icon='grid'
         variant={!listView ? 'text-primary' : 'text'}
         onClick={() => metricStore.updateKey('listView', false)}
       >
diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
index 0683dce60..a269fd915 100644
--- a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite';
 import FooterContent from './FooterContent';
 
 interface Props {
-  dashboardId: number;
+  dashboardId?: number;
   siteId: string;
 }
 function MetricsLibraryModal(props: Props) {
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index a3621291b..e07fa6dab 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -10,7 +10,7 @@ interface Props {
 function MetricsView({ siteId }: Props) {
   return useObserver(() => (
     <div style={{ maxWidth: '1300px', margin: 'auto' }} className="bg-white rounded pt-4 border">
-      <MetricViewHeader />
+      <MetricViewHeader siteId={siteId} />
       <MetricsList siteId={siteId} />
     </div>
   ));