fix(datagrid): batch no longer updates filter tag

carbon-design-system · Sep 10, 2024 · 482dc00 · 482dc00
1 parent 01d973f
commit 482dc00
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 20 deletions.
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
@@ -5,9 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { BATCH, CLEAR_FILTERS, FLYOUT, INSTANT } from './constants';
+import {
+  BATCH,
+  CLEAR_FILTERS,
+  FLYOUT,
+  INSTANT,
+  SAVED_FILTERS,
+} from './constants';
 import { IconButton, usePrefix } from '@carbon/react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { breakpoints, px } from '@carbon/layout';
 import {
   useClickOutside,
@@ -24,6 +30,7 @@ import { Filter } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../../../settings';
+import { FilterContext } from './FilterProvider';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const componentClass = `${blockClass}-filter-flyout`;
@@ -137,6 +144,9 @@ const FilterFlyout = ({
     handleResize(current);
   });
 
+  /** Context */
+  const { dispatch: localDispatch } = useContext(FilterContext);
+
   /** Memos */
   const showActionSet = updateMethod === BATCH;
   const carbonPrefix = usePrefix();
@@ -176,6 +186,16 @@ const FilterFlyout = ({
 
     // Update the last applied filters
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
+
+    // Dispatch action from local filter context to track filters in order
+    // to keep history if `isFetching` becomes true. If so, react-table
+    // clears all filter history
+    localDispatch({
+      type: SAVED_FILTERS,
+      payload: {
+        savedFilters: filtersObjectArray,
+      },
+    });
   };
 
   /** Renders all filters */

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
@@ -6,7 +6,13 @@
  */
 
 import { Accordion, AccordionItem, Button, Layer, Search } from '@carbon/react';
-import { BATCH, CLEAR_FILTERS, INSTANT, PANEL } from './constants';
+import {
+  BATCH,
+  CLEAR_FILTERS,
+  INSTANT,
+  PANEL,
+  SAVED_FILTERS,
+} from './constants';
 import React, {
   useCallback,
   useContext,
@@ -77,7 +83,11 @@ const FilterPanel = ({
   const [showDividerLine, setShowDividerLine] = useState(false);
 
   /** Context */
-  const { panelOpen, setPanelOpen } = useContext(FilterContext);
+  const {
+    panelOpen,
+    setPanelOpen,
+    dispatch: localDispatch,
+  } = useContext(FilterContext);
 
   const {
     filtersState,
@@ -142,6 +152,16 @@ const FilterPanel = ({
 
     // Update the last applied filters
     lastAppliedFilters.current = JSON.stringify(filtersObjectArray);
+
+    // Dispatch action from local filter context to track filters in order
+    // to keep history if `isFetching` becomes true. If so, react-table
+    // clears all filter history
+    localDispatch({
+      type: SAVED_FILTERS,
+      payload: {
+        savedFilters: filtersObjectArray,
+      },
+    });
   };
 
   const renderActionSet = () => {

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
@@ -15,7 +15,6 @@ import {
   NUMBER,
   PANEL,
   RADIO,
-  SAVED_FILTERS,
 } from '../constants';
 import {
   Checkbox,
@@ -58,11 +57,7 @@ const useFilters = ({
   autoHideFilters,
   isFetching,
 }) => {
-  const {
-    state,
-    dispatch: localDispatch,
-    tableId: contextTableId,
-  } = useContext(FilterContext);
+  const { state, tableId: contextTableId } = useContext(FilterContext);
   const { savedFilters } = state;
   /** State */
   const [filtersState, setFiltersState] = useState(
@@ -170,16 +165,6 @@ const useFilters = ({
 
     setFiltersObjectArray(filterCopy);
 
-    // Dispatch action from local filter context to track filters in order
-    // to keep history if `isFetching` becomes true. If so, react-table
-    // clears all filter history
-    localDispatch({
-      type: SAVED_FILTERS,
-      payload: {
-        savedFilters: filterCopy,
-      },
-    });
-
     if (updateMethod === INSTANT) {
       setAllFilters(filterCopy);
     }