From b4982a55f3bc952412d630eda6d21841084fb7a1 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 2 Jan 2023 11:27:09 +0100
Subject: [PATCH] feat(ui) - cards - metric selection and remove add buttons

---
 .../DashboardWidgetGrid/DashboardWidgetGrid.tsx           | 4 ----
 .../MetricsLibraryModal/MetricsLibraryModal.tsx           | 1 -
 .../Dashboard/components/MetricsList/ListView.tsx         | 8 +++++---
 .../Dashboard/components/MetricsList/MetricsList.tsx      | 1 +
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index f0d5bcd67..515d3eaa2 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -3,7 +3,6 @@ import { useStore } from 'App/mstore';
 import WidgetWrapper from '../WidgetWrapper';
 import { NoContent, Loader, Icon } from 'UI';
 import { useObserver } from 'mobx-react-lite';
-import AddMetricContainer from './AddMetricContainer';
 import Widget from 'App/mstore/types/widget';
 import MetricTypeList from '../MetricTypeList';
 
@@ -104,9 +103,6 @@ function DashboardWidgetGrid(props: Props) {
                 />
               </React.Fragment>
             ))}
-          <div className="col-span-2"id="no-print">
-            <AddMetricContainer siteId={siteId} />
-          </div>
         </div>
       </NoContent>
     </Loader>
diff --git a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
index 0593e839e..caa6e0bb1 100644
--- a/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsLibraryModal/MetricsLibraryModal.tsx
@@ -30,7 +30,6 @@ function MetricsLibraryModal(props: Props) {
         <div className="border">
           <MetricsList siteId={siteId} onSelectionChange={onSelectionChange} />
         </div>
-        {/* TODO should show the dynamic values */}
         <SelectedContent dashboardId={dashboardId} selected={selectedList} />
       </Modal.Content>
     </>
diff --git a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
index f7129a97a..b31df78ac 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
@@ -7,6 +7,7 @@ interface Props {
   siteId: any;
   selectedList: any;
   toggleSelection?: (metricId: any) => void;
+  toggleAll?: (e: any) => void;
 }
 function ListView(props: Props) {
   const { siteId, list, selectedList, toggleSelection } = props;
@@ -18,8 +19,9 @@ function ListView(props: Props) {
             name="slack"
             className="mr-4"
             type="checkbox"
-            checked={false}
-            onClick={() => selectedList(list.map((i: any) => i.metricId))}
+            checked={selectedList.length === list.length}
+            // onClick={() => selectedList(list.map((i: any) => i.metricId))}
+            onClick={props.toggleAll}
           />
           <span>Title</span>
         </div>
@@ -34,7 +36,7 @@ function ListView(props: Props) {
           selected={selectedList.includes(parseInt(metric.metricId))}
           toggleSelection={(e: any) => {
             e.stopPropagation();
-            toggleSelection(parseInt(metric.metricId));
+            toggleSelection && toggleSelection(parseInt(metric.metricId));
           }}
         />
       ))}
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index d3167de57..f11eb9bf2 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -69,6 +69,7 @@ function MetricsList({
           list={sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize)}
           selectedList={selectedMetrics}
           toggleSelection={toggleMetricSelection}
+          toggleAll={({ target: { checked, name } }) => setSelectedMetrics(checked ? list.map((i: any) => i.metricId) : [])}
         />
       ) : (
         <GridView