From a3091076238e39e2cae7a3ef8d5c3f231ad4b969 Mon Sep 17 00:00:00 2001
From: vicky-primathon <67091118+vicky-primathon@users.noreply.github.com>
Date: Fri, 22 Jan 2021 15:17:14 +0530
Subject: [PATCH] Fix - Remove delete icon when there are no filters in table
 widget (#2605)

---
 .../designSystems/appsmith/CascadeFields.tsx         | 10 ++++++++--
 .../designSystems/appsmith/TableFilters.tsx          | 12 ++++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/CascadeFields.tsx b/app/client/src/components/designSystems/appsmith/CascadeFields.tsx
index 17ad47fe3a..256499c486 100644
--- a/app/client/src/components/designSystems/appsmith/CascadeFields.tsx
+++ b/app/client/src/components/designSystems/appsmith/CascadeFields.tsx
@@ -28,6 +28,9 @@ const StyledRemoveIcon = styled(
   padding: 0;
   position: relative;
   cursor: pointer;
+  &.hide-icon {
+    display: none;
+  }
 `;
 
 const LabelWrapper = styled.div`
@@ -290,6 +293,7 @@ type CascadeFieldProps = {
   value: any;
   operator: Operator;
   index: number;
+  hasAnyFilters: boolean;
   applyFilter: (filter: ReactTableFilter, index: number) => void;
   removeFilter: (index: number) => void;
 };
@@ -447,7 +451,7 @@ const CascadeField = (props: CascadeFieldProps) => {
 };
 
 const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
-  const { index, removeFilter, applyFilter } = props;
+  const { index, removeFilter, applyFilter, hasAnyFilters } = props;
   const [state, dispatch] = React.useReducer(CaseCaseFieldReducer, props.state);
   const handleRemoveFilter = () => {
     dispatch({ type: CascadeFieldActionTypes.DELETE_FILTER });
@@ -515,7 +519,9 @@ const Fields = (props: CascadeFieldProps & { state: CascadeFieldState }) => {
         height={16}
         width={16}
         color={Colors.RIVER_BED}
-        className="t--table-filter-remove-btn"
+        className={`t--table-filter-remove-btn ${
+          hasAnyFilters ? "" : "hide-icon"
+        }`}
       />
       {index === 1 ? (
         <DropdownWrapper width={75}>
diff --git a/app/client/src/components/designSystems/appsmith/TableFilters.tsx b/app/client/src/components/designSystems/appsmith/TableFilters.tsx
index 6b72968a42..c0fea4d46f 100644
--- a/app/client/src/components/designSystems/appsmith/TableFilters.tsx
+++ b/app/client/src/components/designSystems/appsmith/TableFilters.tsx
@@ -151,8 +151,11 @@ const TableFilters = (props: TableFilterProps) => {
       };
     },
   );
-  const showAddFilter =
-    filters.length >= 1 && filters[0].column && filters[0].condition;
+  const hasAnyFilters = !!(
+    filters.length >= 1 &&
+    filters[0].column &&
+    filters[0].condition
+  );
   return (
     <Popover
       minimal
@@ -170,7 +173,7 @@ const TableFilters = (props: TableFilterProps) => {
         className="t--table-filter-toggle-btn"
         selected={selected}
         icon={
-          showAddFilter ? (
+          hasAnyFilters ? (
             <SelectedFilterWrapper>{filters.length}</SelectedFilterWrapper>
           ) : null
         }
@@ -194,6 +197,7 @@ const TableFilters = (props: TableFilterProps) => {
                 condition={filter.condition}
                 value={filter.value}
                 columns={columns}
+                hasAnyFilters={hasAnyFilters}
                 applyFilter={(filter: ReactTableFilter, index: number) => {
                   const updatedFilters = props.filters
                     ? [...props.filters]
@@ -215,7 +219,7 @@ const TableFilters = (props: TableFilterProps) => {
               />
             );
           })}
-          {showAddFilter ? (
+          {hasAnyFilters ? (
             <ButtonWrapper className={Classes.POPOVER_DISMISS}>
               <Button
                 intent="primary"