feat(ui) - cards - metric to card text, card type dropdown with icon

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

@@ -22,15 +22,6 @@ function GridView(props: Props) {
             isWidget={metric.metricType === 'predefined'}
             onClick={() => toggleSelection(parseInt(metric.metricId))}
           />
-          {/* <MetricListItem
-            metric={metric}
-            siteId={siteId}
-            selected={selectedList.includes(parseInt(metric.metricId))}
-            toggleSelection={(e: any) => {
-              e.stopPropagation();
-              toggleSelection(parseInt(metric.metricId));
-            }}
-          /> */}
         </React.Fragment>
       ))}
     </div>

frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx

@@ -135,8 +135,8 @@ function WidgetForm(props: Props) {
   return (
     <div className="p-6">
       <div className="form-group">
-        <label className="font-medium">Metric Type</label>
         <div className="flex items-center">
+          <span className="mr-2">Card showing</span>
           <MetricTypeDropdown onSelect={writeOption} />
           <MetricSubtypeDropdown onSelect={writeOption} />
 

frontend/app/components/Dashboard/components/WidgetForm/components/MetricTypeDropdown/MetricTypeDropdown.tsx

@@ -7,7 +7,7 @@ import CustomDropdownOption from 'Shared/CustomDropdownOption';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import withLocationHandlers from 'HOCs/withLocationHandlers';
-
+import { Icon } from 'UI';
 interface Options {
   label: string;
   icon: string;
@@ -33,16 +33,16 @@ function MetricTypeDropdown(props: Props) {
   }, []);
 
   React.useEffect(() => {
-    const queryCardType = props.query.get('type')
+    const queryCardType = props.query.get('type');
     if (queryCardType && options.length > 0 && metric.metricType) {
-      const type = options.find((i) => i.value === queryCardType)
-      setTimeout(() => onChange(type.value), 0)
+      const type = options.find((i) => i.value === queryCardType);
+      setTimeout(() => onChange(type.value), 0);
     }
-  }, [])
+  }, []);
 
   const onChange = (type: string) => {
-    metricStore.changeType(type)
-  }
+    metricStore.changeType(type);
+  };
   return (
     <Select
       name="metricType"
@@ -52,6 +52,17 @@ function MetricTypeDropdown(props: Props) {
       onChange={props.onSelect}
       // onSelect={onSelect}
       components={{
+        SingleValue: ({ children, ...props }: any) => {
+          const { data: { icon, label } } = props;
+          return (
+            <components.SingleValue {...props}>
+              <div className="flex items-center">
+                <Icon name={icon} size="18" color="gray-medium" />
+                <div className="ml-2">{label}</div>
+              </div>
+            </components.SingleValue>
+          );
+        },
         MenuList: ({ children, ...props }: any) => {
           return (
             <components.MenuList {...props} className="!p-3">

frontend/app/mstore/dashboardStore.ts

@@ -379,10 +379,10 @@ export default class DashboardStore {
         return dashboardService
             .addWidget(dashboard, metricIds)
             .then((response) => {
-                toast.success("Metric added to dashboard.");
+                toast.success("Card added to dashboard.");
             })
             .catch(() => {
-                toast.error("Metric could not be added.");
+                toast.error("Card could not be added.");
             })
             .finally(() => {
                 this.isSaving = false;

frontend/app/mstore/metricStore.ts

@@ -117,10 +117,10 @@ export default class MetricStore {
       const metricData = await metricService.saveMetric(metric);
       const _metric = new Widget().fromJson(metricData);
       if (!metric.exists()) {
-        toast.success('Metric created successfully');
+        toast.success('Card created successfully');
         this.addToList(_metric);
       } else {
-        toast.success('Metric updated successfully');
+        toast.success('Card updated successfully');
         this.updateInList(_metric);
       }
       this.instance = _metric;
@@ -166,7 +166,7 @@ export default class MetricStore {
       .then(() => {
         // @ts-ignore
         this.removeById(metric[Widget.ID_KEY]);
-        toast.success('Metric deleted successfully');
+        toast.success('Card deleted successfully');
       })
       .finally(() => {
         this.instance.updateKey('hasChanged', false);

frontend/app/mstore/types/widget.ts

@@ -14,7 +14,7 @@ export default class Widget {
     metricId: any = undefined
     widgetId: any = undefined
     category?: string = undefined
-    name: string = "Untitled Metric"
+    name: string = "Untitled Card"
     // metricType: string = "timeseries"
     metricType: string = "timeseries"
     metricOf: string = "sessionCount"