From 9dd8a351d9ea417c6fe69c29305b22d1660913ca Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 6 Jan 2023 11:56:12 +0100
Subject: [PATCH] change(ui) - filter series to check for empty flag

---
 .../components/FilterSeries/FilterSeries.tsx        |  6 ++++--
 .../Dashboard/components/WidgetForm/WidgetForm.tsx  |  1 +
 .../shared/Filters/FilterItem/FilterItem.tsx        | 13 ++++++-------
 .../shared/Filters/FilterList/FilterList.tsx        |  5 ++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
index 12fbab009..c0de60d2d 100644
--- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
+++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx
@@ -11,7 +11,7 @@ interface Props {
   series: any;
   onRemoveSeries: (seriesIndex: any) => void;
   canDelete?: boolean;
-
+  supportsEmpty?: boolean;
   hideHeader?: boolean;
   emptyMessage?: any;
   observeChanges?: () => void;
@@ -23,7 +23,8 @@ function FilterSeries(props: Props) {
     },
     canDelete,
     hideHeader = false,
-    emptyMessage = 'Add user event or filter to define the series by clicking Add Step.'
+    emptyMessage = 'Add user event or filter to define the series by clicking Add Step.',
+    supportsEmpty = true,
   } = props;
   const [expanded, setExpanded] = useState(true)
   const { series, seriesIndex } = props;
@@ -74,6 +75,7 @@ function FilterSeries(props: Props) {
                 onUpdateFilter={onUpdateFilter}
                 onRemoveFilter={onRemoveFilter}
                 onChangeEventsOrder={onChangeEventsOrder}
+                supportsEmpty={supportsEmpty}
               />
             ) : (
               <div className="color-gray-medium">{emptyMessage}</div>
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index bc8429d87..a24db7391 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -201,6 +201,7 @@ function WidgetForm(props: Props) {
               .map((series: any, index: number) => (
                 <div className="mb-2" key={series.name}>
                   <FilterSeries
+                    supportsEmpty={!isClickmap}
                     observeChanges={() => metric.updateKey('hasChanged', true)}
                     hideHeader={isTable || isClickmap}
                     seriesIndex={index}
diff --git a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
index fae8d9f1d..c76cc7938 100644
--- a/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
+++ b/frontend/app/components/shared/Filters/FilterItem/FilterItem.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import FilterOperator from '../FilterOperator';
 import FilterSelection from '../FilterSelection';
 import FilterValue from '../FilterValue';
-import { Icon } from 'UI';
+import { Icon, Button } from 'UI';
 import FilterSource from '../FilterSource';
 import { FilterKey, FilterType } from 'App/types/filter/filterType';
 import SubFilterItem from '../SubFilterItem';
@@ -14,9 +14,10 @@ interface Props {
     onRemoveFilter: () => void;
     isFilter?: boolean;
     saveRequestPayloads?: boolean;
+    disableDelete?: boolean
 }
 function FilterItem(props: Props) {
-    const { isFilter = false, filterIndex, filter, saveRequestPayloads } = props;
+    const { isFilter = false, filterIndex, filter, saveRequestPayloads, disableDelete = false } = props;
     const canShowValues = !(filter.operator === 'isAny' || filter.operator === 'onAny' || filter.operator === 'isUndefined');
     const isSubFilter = filter.type === FilterType.SUB_FILTERS;
 
@@ -49,7 +50,7 @@ function FilterItem(props: Props) {
     };
 
     return (
-        <div className="flex items-center hover:bg-active-blue -mx-5 px-5 py-2">
+        <div className="flex items-center hover:bg-active-blue -mx-5 px-5">
             <div className="flex items-start w-full">
                 {!isFilter && (
                     <div className="mt-1 flex-shrink-0 border w-6 h-6 text-xs flex items-center justify-center rounded-full bg-gray-light-shade mr-2">
@@ -102,10 +103,8 @@ function FilterItem(props: Props) {
                     </div>
                 )}
             </div>
-            <div className="flex flex-shrink-0 self-start mt-1 ml-auto px-2">
-                <div className="cursor-pointer p-1" onClick={props.onRemoveFilter}>
-                    <Icon name="trash" size="14" />
-                </div>
+            <div className="flex flex-shrink-0 self-start ml-auto">
+                <Button disabled={disableDelete} variant="text" icon="trash" onClick={props.onRemoveFilter} size="small" iconSize={14} />
             </div>
         </div>
     );
diff --git a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
index f6cbbec94..afdd02823 100644
--- a/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
+++ b/frontend/app/components/shared/Filters/FilterList/FilterList.tsx
@@ -12,13 +12,15 @@ interface Props {
   hideEventsOrder?: boolean;
   observeChanges?: () => void;
   saveRequestPayloads?: boolean;
+  supportsEmpty?: boolean
 }
 function FilterList(props: Props) {
-  const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads } = props;
+  const { observeChanges = () => {}, filter, hideEventsOrder = false, saveRequestPayloads, supportsEmpty = true } = props;
   const filters = List(filter.filters);
   const hasEvents = filters.filter((i: any) => i.isEvent).size > 0;
   const hasFilters = filters.filter((i: any) => !i.isEvent).size > 0;
   let rowIndex = 0;
+  const cannotDeleteFilter = filters.size === 1 && !supportsEmpty;
 
   useEffect(observeChanges, [filters]);
 
@@ -69,6 +71,7 @@ function FilterList(props: Props) {
                 onUpdate={(filter) => props.onUpdateFilter(filterIndex, filter)}
                 onRemoveFilter={() => onRemoveFilter(filterIndex)}
                 saveRequestPayloads={saveRequestPayloads}
+                disableDelete={cannotDeleteFilter}
               />
             ) : null
           )}