feat(ui) - check for delete

frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx

@@ -105,6 +105,7 @@ function CustomMetricForm(props: Props) {
                 seriesIndex={index}
                 series={series}
                 onRemoveSeries={() => removeSeries(index)}
+                canDelete={metric.series.size > 1}
               />
             </div>
           ))}

frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { IconButton, Icon } from 'UI';
 import FilterSelection from '../../Filters/FilterSelection';
 import SeriesName from './SeriesName';
+import cn from 'classnames';
 
 interface Props {
   seriesIndex: number;
@@ -12,9 +13,11 @@ interface Props {
   edit: typeof edit;
   updateSeries: typeof updateSeries;
   onRemoveSeries: (seriesIndex) => void;
+  canDelete?: boolean; 
 }
 
 function FilterSeries(props: Props) {
+  const { canDelete } = props;
   const [expanded, setExpanded] = useState(true)
   const { series, seriesIndex } = props;
 
@@ -80,7 +83,7 @@ function FilterSeries(props: Props) {
         </div>    
     
         <div className="flex items-center cursor-pointer" >
-          <div onClick={props.onRemoveSeries} className="ml-3">
+          <div onClick={props.onRemoveSeries} className={cn("ml-3", {'disabled': !canDelete})}>
             <Icon name="trash" size="16" />
           </div>
 

frontend/app/styles/main.css

@@ -112,4 +112,9 @@
     display: inline-block;
     margin-bottom: 5px;
   }
+}
+
+.disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }