feat(ui): change metric type selector component

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

@@ -3,7 +3,7 @@ import { metricTypes, metricOf, issueOptions } from 'App/constants/filterOptions
 import { FilterKey } from 'Types/filter/filterType';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
-import { Button, Icon } from 'UI'
+import { Button, Icon, SegmentSelection } from 'UI'
 import FilterSeries from '../FilterSeries';
 import { confirm, Popup } from 'UI';
 import Select from 'Shared/Select'
@@ -15,6 +15,12 @@ interface Props {
     onDelete: () => void;
 }
 
+const metricIcons = {
+    timeseries: 'graph-up',
+    table: 'table', 
+    funnel: 'funnel',
+}
+
 function WidgetForm(props: Props) {
     
     const { history, match: { params: { siteId, dashboardId } } } = props;
@@ -64,13 +70,15 @@ function WidgetForm(props: Props) {
         metricStore.merge(obj);
     };
 
+    const onSelect = (_: any, option: Record<string, any>) => writeOption({ value: { value: option.value }, name: option.name})
+
     const onSave = () => {
         const wasCreating = !metric.exists()
         metricStore.save(metric, dashboardId)
             .then((metric: any) => {
                 if (wasCreating) {
                     if (parseInt(dashboardId) > 0) {
-                        history.replace(withSiteId(dashboardMetricDetails(parseInt(dashboardId), metric.metricId), siteId));
+                        history.replace(withSiteId(dashboardMetricDetails(dashboardId, metric.metricId), siteId));
                     } else {
                         history.replace(withSiteId(metricDetails(metric.metricId), siteId));
                     }
@@ -93,11 +101,15 @@ function WidgetForm(props: Props) {
             <div className="form-group">
                 <label className="font-medium">Metric Type</label>
                 <div className="flex items-center">
-                    <Select
+                    <SegmentSelection 
+                        icons
+                        outline
                         name="metricType"
-                        options={metricTypes}
-                        value={metricTypes.find((i: any) => i.value === metric.metricType) || metricTypes[0]}
-                        onChange={ writeOption }
+                        className="my-3"
+                        onSelect={ onSelect }
+                        value={metricTypes.find((i) => i.value === metric.metricType) || metricTypes[0]}
+                        // @ts-ignore
+                        list={metricTypes.map((i) => ({ value: i.value, name: i.label, icon: metricIcons[i.value] }))}
                     />
 
                     {metric.metricType === 'timeseries' && (

frontend/app/components/ui/SegmentSelection/SegmentSelection.js

@@ -9,7 +9,7 @@ class SegmentSelection extends React.Component {
   }
 
   render() {
-    const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false, disabled = false, disabledMessage = 'Not Allowed' } = this.props;
+    const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false, disabled = false, disabledMessage = 'Not Allowed', outline } = this.props;
 
     return (
       <Popup
@@ -22,6 +22,7 @@ class SegmentSelection extends React.Component {
             [styles.extraSmall]  : size === 'extraSmall' || extraSmall,
             [styles.icons]  : icons === true,
             [styles.disabled] : disabled,
+            [styles.outline]: outline,
           }, className) }
         >
           { list.map(item => (

frontend/app/components/ui/SegmentSelection/segmentSelection.module.css

@@ -86,4 +86,22 @@
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
-}
+}
+
+.outline {
+  border: none;
+  border-radius: 3px;
+  & .item {
+    padding: 10px!important;
+    font-size: 14px!important;
+    border: solid thin $gray-light!important;
+    
+    &:not(:last-child) {
+      border-right: none!important;
+    }
+
+    &[data-active=true] {
+      border: solid thin $teal!important;
+    }
+  }
+}