feat(Datagrid): remove filter tags individually from FilterSummary

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.js

@@ -10,7 +10,10 @@ import React, { useContext, useEffect, useRef } from 'react';
 import { Table, TableContainer } from '@carbon/react';
 import { carbon, pkg } from '../../../settings';
 
-import { CLEAR_FILTERS } from './addons/Filtering/constants';
+import {
+  CLEAR_FILTERS,
+  CLEAR_SINGLE_FILTER,
+} from './addons/Filtering/constants';
 import DatagridBody from './DatagridBody';
 import DatagridHead from './DatagridHead';
 import DatagridToolbar from './DatagridToolbar';
@@ -23,6 +26,8 @@ import { handleGridKeyPress } from './addons/InlineEdit/handleGridKeyPress';
 import { px } from '@carbon/layout';
 import { useClickOutside } from '../../../global/js/hooks';
 import { useMultipleKeyTracking } from '../../DataSpreadsheet/hooks';
+import { useSubscribeToEventEmitter } from './addons/Filtering/hooks';
+import { clearSingleFilter } from './addons/Filtering/FilterProvider';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 
@@ -49,6 +54,7 @@ export const DatagridContent = ({ datagridState, title }) => {
     DatagridActions,
     totalColumnsWidth,
     gridRef,
+    setAllFilters,
     state,
     page,
     rows,
@@ -141,6 +147,10 @@ export const DatagridContent = ({ datagridState, title }) => {
     }
   }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
 
+  useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, (id) =>
+    clearSingleFilter(id, setAllFilters, state)
+  );
+
   const renderFilterSummary = () =>
     state.filters.length > 0 && (
       <FilterSummary

packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js

@@ -1,12 +1,19 @@
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import React, { createContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { DATE, DROPDOWN, NUMBER, RADIO, CHECKBOX } from './constants';
+import {
+  DATE,
+  DROPDOWN,
+  NUMBER,
+  RADIO,
+  CHECKBOX,
+  CLEAR_SINGLE_FILTER,
+} from './constants';
 
 export const FilterContext = createContext();
 
@@ -27,22 +34,100 @@ const EventEmitter = {
   },
 };
 
+const removeFilterItem = (state, index) => state.splice(index, 1);
+
+const updateFilterState = (state, type, value) => {
+  if (type === CHECKBOX) {
+    return;
+  }
+  if (type === DATE) {
+    const filterTagIndex = state.findIndex(
+      (val) =>
+        formatDateRange(val.value[0], val.value[1]) ===
+        formatDateRange(value[0], value[1])
+    );
+    return removeFilterItem(state, filterTagIndex);
+  }
+  const filterTagIndex = state.findIndex((val) => val.value === value);
+  return removeFilterItem(state, filterTagIndex);
+};
+
+export const clearSingleFilter = ({ key, value }, setAllFilters, state) => {
+  const tempState = [...state.filters];
+  tempState.forEach((f, filterIndex) => {
+    if (f.id === key) {
+      const filterValues = f.value;
+      const filterType = f.type;
+      updateFilterState(tempState, filterType, value);
+      if (filterType === CHECKBOX) {
+        /**
+          When all checkboxes of a group are all unselected the value still exists in the filtersObjectArray
+          This checks if all the checkboxes are selected = false and removes it from the array
+        */
+        const valueIndex = filterValues.findIndex((val) => val.id === value);
+        filterValues[valueIndex].selected = false;
+        const updatedFilterObject = {
+          ...f,
+          value: [...filterValues],
+        };
+        tempState[filterIndex] = updatedFilterObject;
+        const index = tempState.findIndex((filter) => filter.id === key);
+
+        // If all the selected state is false remove from array
+        const shouldRemoveFromArray = tempState[index].value.every(
+          (val) => val.selected === false
+        );
+
+        if (shouldRemoveFromArray) {
+          removeFilterItem(tempState, index);
+        }
+      }
+    }
+  });
+  setAllFilters(tempState);
+};
+
+const handleSingleFilterRemoval = (key, value) => {
+  EventEmitter.dispatch(CLEAR_SINGLE_FILTER, { key, value });
+};
+
+const formatDateRange = (startDate, endDate) => {
+  const startDateObj = new Date(startDate);
+  const endDateObj = new Date(endDate);
+  return `${startDateObj.toLocaleDateString()} - ${endDateObj.toLocaleDateString()}`;
+};
+
 const prepareFiltersForTags = (filters) => {
   const tags = [];
 
   filters.forEach(({ id, type, value }) => {
+    const sharedFilterProps = {
+      filter: true,
+      onClose: () => handleSingleFilterRemoval(id, value),
+    };
+
     if (type === DROPDOWN || type === RADIO || type === NUMBER) {
-      tags.push({ key: id, value });
+      tags.push({
+        key: id,
+        value,
+        ...sharedFilterProps,
+      });
     } else if (type === DATE) {
       const [startDate, endDate] = value;
       tags.push({
         key: id,
-        value: `${startDate.toLocaleDateString()} - ${endDate.toLocaleDateString()}`,
+        value: formatDateRange(startDate, endDate),
+        ...sharedFilterProps,
       });
     } else if (type === CHECKBOX) {
       value.forEach((checkbox) => {
         if (checkbox.selected) {
-          tags.push({ key: id, value: checkbox.value });
+          tags.push({
+            key: id,
+            value: checkbox.value,
+            ...sharedFilterProps,
+            onClose: () => handleSingleFilterRemoval(id, checkbox.value),
+          });
         }
       });
     }

packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/constants.js

@@ -21,6 +21,7 @@ export const DROPDOWN = 'dropdown';
 
 /** Constants for event emitters */
 export const CLEAR_FILTERS = 'clearFilters';
+export const CLEAR_SINGLE_FILTER = 'clearSingleFilter';
 
 /** Constants for panel dimensions */
 export const PANEL_WIDTH = 320;

packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js

@@ -334,7 +334,9 @@ const useFilters = ({
   const cancel = () => {
     // Reverting to previous filters only applies when using batch actions
     if (updateMethod === BATCH) {
-      revertToPreviousFilters();
+      if (variation !== PANEL) {
+        revertToPreviousFilters();
+      }
       onCancel();
     }
   };