From 1ac4903e843d4fc88b1e0e9599fe34d5f2d752a4 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Sun, 6 Feb 2022 15:07:19 +0100
Subject: [PATCH] feat(ui) - check for delete

---
 .../CustomMetrics/CustomMetricForm/CustomMetricForm.tsx      | 1 +
 .../shared/CustomMetrics/FilterSeries/FilterSeries.tsx       | 5 ++++-
 frontend/app/styles/main.css                                 | 5 +++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx b/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
index 34ba8aa92..b8d96a590 100644
--- a/frontend/app/components/shared/CustomMetrics/CustomMetricForm/CustomMetricForm.tsx
+++ b/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>
           ))}
diff --git a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx b/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
index e0181ac4e..02208d3a7 100644
--- a/frontend/app/components/shared/CustomMetrics/FilterSeries/FilterSeries.tsx
+++ b/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>
 
diff --git a/frontend/app/styles/main.css b/frontend/app/styles/main.css
index 8915fd341..f27155e36 100644
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@@ -112,4 +112,9 @@
     display: inline-block;
     margin-bottom: 5px;
   }
+}
+
+.disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }
\ No newline at end of file