feat(ui) - cards - metric selection

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -9,6 +9,7 @@ interface Props extends RouteComponentProps {
   siteId: string;
   selected?: boolean;
   toggleSelection?: any;
+  disableSelection?: boolean
 }
 
 function MetricTypeIcon({ type }: any) {
@@ -33,7 +34,7 @@ function MetricTypeIcon({ type }: any) {
 }
 
 function MetricListItem(props: Props) {
-  const { metric, history, siteId, selected, toggleSelection = () => {} } = props;
+  const { metric, history, siteId, selected, toggleSelection = () => {}, disableSelection = false } = props;
 
   const onItemClick = () => {
     const path = withSiteId(`/metrics/${metric.metricId}`, siteId);
@@ -46,13 +47,16 @@ function MetricListItem(props: Props) {
       onClick={onItemClick}
     >
       <div className="col-span-4 flex items-center">
-        <Checkbox
-          name="slack"
-          className="mr-4"
-          type="checkbox"
-          checked={selected}
-          onClick={toggleSelection}
-        />
+        {!disableSelection && (
+          <Checkbox
+            name="slack"
+            className="mr-4"
+            type="checkbox"
+            checked={selected}
+            onClick={toggleSelection}
+          />
+        )}
+        
         <div className="flex items-center">
           <MetricTypeIcon type={metric.metricType} />
           <div className="link capitalize-first">{metric.name}</div>

frontend/app/components/Dashboard/components/MetricsList/ListView.tsx

@@ -8,13 +8,15 @@ interface Props {
   selectedList: any;
   toggleSelection?: (metricId: any) => void;
   toggleAll?: (e: any) => void;
+  disableSelection?: boolean
 }
 function ListView(props: Props) {
-  const { siteId, list, selectedList, toggleSelection } = props;
+  const { siteId, list, selectedList, toggleSelection, disableSelection = false } = props;
   return (
     <div>
       <div className="grid grid-cols-12 py-2 font-medium px-6">
-        <div className="col-span-4 flex items-center">
+        {!disableSelection && (
+          <div className="col-span-4 flex items-center">
           <Checkbox
             name="slack"
             className="mr-4"
@@ -25,12 +27,14 @@ function ListView(props: Props) {
           />
           <span>Title</span>
         </div>
+        )}
         <div className="col-span-4">Owner</div>
         <div className="col-span-2">Visibility</div>
         <div className="col-span-2 text-right">Last Modified</div>
       </div>
       {list.map((metric: any) => (
         <MetricListItem
+          disableSelection={disableSelection}
           metric={metric}
           siteId={siteId}
           selected={selectedList.includes(parseInt(metric.metricId))}

frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx

@@ -10,7 +10,7 @@ import ListView from './ListView';
 
 function MetricsList({
   siteId,
-  onSelectionChange = () => {},
+  onSelectionChange,
 }: {
   siteId: string;
   onSelectionChange?: (selected: any[]) => void;
@@ -26,6 +26,9 @@ function MetricsList({
   }, []);
 
   useEffect(() => {
+    if (!onSelectionChange) {
+      return;
+    }
     onSelectionChange(selectedMetrics);
   }, [selectedMetrics]);
 
@@ -65,11 +68,14 @@ function MetricsList({
     >
       {listView ? (
         <ListView
+          disableSelection={!onSelectionChange}
           siteId={siteId}
           list={sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize)}
           selectedList={selectedMetrics}
           toggleSelection={toggleMetricSelection}
-          toggleAll={({ target: { checked, name } }) => setSelectedMetrics(checked ? list.map((i: any) => i.metricId) : [])}
+          toggleAll={({ target: { checked, name } }) =>
+            setSelectedMetrics(checked ? list.map((i: any) => i.metricId) : [])
+          }
         />
       ) : (
         <GridView