Fix - Remove delete icon when there are no filters in table widget (#2605)

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}>

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"