feat(ui) - cards - metric selection and remove add buttons

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>

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>
     </>

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));
           }}
         />
       ))}

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