fix(datagrid): check tableId before triggering reset of filters (carb…

…on-design-system#5546) * fix(datagrid): pass tableId to filtercontext * fix(datagrid): pass tableId in subscribe event for filter panel --------- Co-authored-by: Afsal K <[email protected]>
amal-k-joy · Jun 21, 2024 · cf2bb23 · cf2bb23
1 parent 229ecdf
commit cf2bb23
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 28 deletions.
diff --git a/cspell.json b/cspell.json
@@ -159,6 +159,7 @@
     "subcomponents",
     "svgid",
     "tabbable",
+    "tableid",
     "tablist",
     "tagoverflow",
     "tagset",

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/Datagrid.tsx
@@ -71,7 +71,11 @@ export let Datagrid = React.forwardRef(
     };
 
     return (
-      <FilterProvider filters={state?.filters} filterProps={filterProps}>
+      <FilterProvider
+        filters={state?.filters}
+        filterProps={filterProps}
+        tableId={tableId}
+      >
         <InlineEditProvider>
           <div
             {...rest}

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridContent.tsx
@@ -212,7 +212,7 @@ export const DatagridContent = ({
       <FilterSummary
         className={`${blockClass}__filter-summary`}
         filters={filterTags}
-        clearFilters={() => EventEmitter.dispatch(CLEAR_FILTERS)}
+        clearFilters={() => EventEmitter.dispatch(CLEAR_FILTERS, tableId)}
         renderLabel={filterProps?.renderLabel}
         overflowType="tag"
       />

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js
@@ -221,7 +221,11 @@ const FilterFlyout = ({
     cancel();
   });
 
-  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+  // tableId is passed in from the event emitter from the FilterSummary component
+  // in  DatagridContent
+  useSubscribeToEventEmitter(CLEAR_FILTERS, (tableId) => {
+    reset(tableId);
+  });
 
   useEffect(
     function reflectLastAppliedFiltersWhenReactTableUpdates() {

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js
@@ -192,7 +192,11 @@ const FilterPanel = ({
     [filterPanelMinHeight]
   );
 
-  useSubscribeToEventEmitter(CLEAR_FILTERS, reset);
+  // tableId is passed in from the event emitter from the FilterSummary component
+  // in  DatagridContent
+  useSubscribeToEventEmitter(CLEAR_FILTERS, (tableId) => {
+    reset(tableId);
+  });
 
   const getScrollableContainerHeight = () => {
     const filterHeadingHeight =

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/FilterProvider.js
@@ -155,7 +155,7 @@ const filteringReducer = (state, action) => {
   }
 };
 
-export const FilterProvider = ({ children, filters, filterProps }) => {
+export const FilterProvider = ({ children, filters, filterProps, tableId }) => {
   const { renderDateLabel } = filterProps || {};
   const filterTags = prepareFiltersForTags(filters, renderDateLabel);
   const [panelOpen, setPanelOpen] = useState(false);
@@ -172,6 +172,7 @@ export const FilterProvider = ({ children, filters, filterProps }) => {
     setPanelOpen,
     state,
     dispatch,
+    tableId,
   };
 
   return (
@@ -186,4 +187,5 @@ FilterProvider.propTypes = {
   ]).isRequired,
   filterProps: PropTypes.object,
   filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tableId: PropTypes.string,
 };
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js
@@ -54,7 +54,11 @@ const useFilters = ({
   autoHideFilters,
   isFetching,
 }) => {
-  const { state, dispatch: localDispatch } = useContext(FilterContext);
+  const {
+    state,
+    dispatch: localDispatch,
+    tableId: contextTableId,
+  } = useContext(FilterContext);
   const { savedFilters } = state;
   /** State */
   const [filtersState, setFiltersState] = useState(
@@ -96,30 +100,37 @@ const useFilters = ({
     );
   }, [setAllFilters]);
 
-  const reset = useCallback(() => {
-    // When we reset we want the "initialFilters" to be an empty array
-    const resetFiltersArray = [];
-
-    // Get the initial values for the filters
-    const initialFiltersState = getInitialStateFromFilters(
-      filters,
-      variation,
-      resetFiltersArray
-    );
-    const initialFiltersObjectArray = [];
+  const reset = useCallback(
+    (tableId) => {
+      // only reset filters if tableid of the datagrid that triggered "clear filters"
+      // matches the table id stored in its context instance
+      if (tableId === contextTableId) {
+        // When we reset we want the "initialFilters" to be an empty array
+        const resetFiltersArray = [];
+
+        // Get the initial values for the filters
+        const initialFiltersState = getInitialStateFromFilters(
+          filters,
+          variation,
+          resetFiltersArray
+        );
+        const initialFiltersObjectArray = [];
 
-    // Set the state to the initial values
-    setFiltersState(initialFiltersState);
-    setFiltersObjectArray(initialFiltersObjectArray);
-    setAllFilters([]);
+        // Set the state to the initial values
+        setFiltersState(initialFiltersState);
+        setFiltersObjectArray(initialFiltersObjectArray);
+        setAllFilters([]);
 
-    // Update their respective refs so everything is in sync
-    prevFiltersRef.current = JSON.stringify(initialFiltersState);
-    prevFiltersObjectArrayRef.current = JSON.stringify(
-      initialFiltersObjectArray
-    );
-    lastAppliedFilters.current = JSON.stringify([]);
-  }, [filters, setAllFilters, variation]);
+        // Update their respective refs so everything is in sync
+        prevFiltersRef.current = JSON.stringify(initialFiltersState);
+        prevFiltersObjectArrayRef.current = JSON.stringify(
+          initialFiltersObjectArray
+        );
+        lastAppliedFilters.current = JSON.stringify([]);
+      }
+    },
+    [filters, setAllFilters, variation, contextTableId]
+  );
 
   const applyFilters = ({ column, value, type }) => {
     // If no end date is selected return because we need the end date to do computations