Impl [UI] Add metric type icons to Metrics Selector dropdown (#2472)

src/elements/MetricsSelector/MetricsSelector.js

@@ -37,6 +37,8 @@ import { METRICS_SELECTOR_OPTIONS } from '../../types'
 
 import { ReactComponent as Arrow } from 'igz-controls/images/arrow.svg'
 import { ReactComponent as SearchIcon } from 'igz-controls/images/search.svg'
+import { ReactComponent as MetricIcon } from 'igz-controls/images/circled-m.svg'
+import { ReactComponent as ResultIcon } from 'igz-controls/images/circled-r.svg'
 
 import './metricsSelector.scss'
 
@@ -146,10 +148,7 @@ const MetricsSelector = ({ maxSelectionNumber, metrics, name, onSelect, preselec
           style={{ backgroundColor: metric.color }}
         />
         <span className="data-ellipsis">{metric.name}</span>
-        {/*// todo: metrics - change according to design when ready  */}
-        <span style={{ marginLeft: '5px' }}>
-          {metric.type === metricsTypes.metric ? ' (M)' : ' (R)'}
-        </span>
+        {metric.type === metricsTypes.metric ? <MetricIcon /> : <ResultIcon />}
       </>
     )
   }

src/elements/MetricsSelector/metricsSelector.scss

@@ -63,6 +63,10 @@
             font-size: 15px;
             white-space: nowrap;
             text-overflow: ellipsis;
+
+            svg {
+              margin-left: auto;
+            }
           }
 
           .metrics-selector-color-indicator {
@@ -74,6 +78,20 @@
             background-color: transparent;
             border-radius: 50%;
           }
+
+          &.disabled {
+            label {
+              .metrics-selector-color-indicator {
+                opacity: 0.3;
+              }
+
+              svg {
+                path {
+                  fill: $spunPearl;
+                }
+              }
+            }
+          }
         }
       }
     }