fix(toolbar): sw-2856 hide residual reset filters link (#1394)

RedHatInsights · Sep 9, 2024 · 096933f · 096933f
1 parent f1fccfd
commit 096933f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/src/components/README.md b/src/components/README.md
@@ -6156,6 +6156,8 @@ Application filter toolbar.
     </tr><tr>
     <td>props.t</td><td><code>function</code></td><td></td>
     </tr><tr>
+    <td>props.useProduct</td><td><code>function</code></td><td></td>
+    </tr><tr>
     <td>props.useProductToolbarQuery</td><td><code>function</code></td><td></td>
     </tr><tr>
     <td>props.useSelectCategoryOptions</td><td><code>function</code></td><td></td>

diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap
@@ -40,6 +40,7 @@ exports[`ProductView Component should allow custom inventory displays via config
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -142,6 +143,7 @@ exports[`ProductView Component should allow custom inventory displays via config
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -230,6 +232,7 @@ exports[`ProductView Component should allow custom inventory displays via config
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -317,6 +320,7 @@ exports[`ProductView Component should allow custom product views via productDisp
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -389,6 +393,7 @@ exports[`ProductView Component should allow custom product views via productDisp
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -461,6 +466,7 @@ exports[`ProductView Component should allow custom product views via productDisp
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -533,6 +539,7 @@ exports[`ProductView Component should allow custom product views via productDisp
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -605,6 +612,7 @@ exports[`ProductView Component should allow custom product views via productDisp
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}
@@ -676,6 +684,7 @@ exports[`ProductView Component should render a basic component: basic 1`] = `
           isDisabled={false}
           isGroupVariantDisabled={false}
           t={[Function]}
+          useProduct={[Function]}
           useProductToolbarQuery={[Function]}
           useSelectCategoryOptions={[Function]}
           useToolbarFieldClear={[Function]}

diff --git a/src/components/toolbar/toolbar.js b/src/components/toolbar/toolbar.js
@@ -8,7 +8,7 @@ import {
   ToolbarToggleGroup
 } from '@patternfly/react-core';
 import { FilterIcon } from '@patternfly/react-icons';
-import { useProductToolbarQuery } from '../productView/productViewContext';
+import { useProductToolbarQuery, useProduct } from '../productView/productViewContext';
 import { useToolbarFieldClear, useToolbarFieldClearAll, useToolbarFields } from './toolbarContext';
 import { ToolbarFilter } from './toolbarFilter';
 import { ToolbarFieldGroupVariant } from './toolbarFieldGroupVariant';
@@ -43,6 +43,7 @@ import { translate } from '../i18n/i18n';
  * @param {boolean} props.isDisabled
  * @param {boolean} props.isGroupVariantDisabled
  * @param {Function} props.t
+ * @param {Function} props.useProduct
  * @param {Function} props.useProductToolbarQuery
  * @param {Function} props.useSelectCategoryOptions
  * @param {Function} props.useToolbarFieldClear
@@ -55,12 +56,14 @@ const Toolbar = ({
   isDisabled,
   isGroupVariantDisabled,
   t,
+  useProduct: useAliasProduct,
   useProductToolbarQuery: useAliasProductToolbarQuery,
   useSelectCategoryOptions: useAliasSelectCategoryOptions,
   useToolbarFieldClear: useAliasToolbarFieldClear,
   useToolbarFieldClearAll: useAliasToolbarFieldClearAll,
   useToolbarFields: useAliasToolbarFields
 }) => {
+  const { productGroup } = useAliasProduct();
   const toolbarFieldQueries = useAliasProductToolbarQuery();
   const { currentCategory, options } = useAliasSelectCategoryOptions();
   const clearField = useAliasToolbarFieldClear();
@@ -113,6 +116,7 @@ const Toolbar = ({
   return (
     <PfToolbar
       id="curiosity-toolbar"
+      key={productGroup}
       className="curiosity-toolbar pf-m-toggle-group-container ins-c-primary-toolbar"
       collapseListedFiltersBreakpoint="sm"
       clearAllFilters={onClearAll}
@@ -163,13 +167,15 @@ const Toolbar = ({
  *
  * @type {{useToolbarFieldClear: Function, t: Function, useSelectCategoryOptions: Function,
  *     hardFilterReset: boolean, useToolbarFields: Function, isGroupVariantDisabled: boolean,
- *     useProductToolbarQuery: Function, isDisabled: boolean, useToolbarFieldClearAll: Function}}
+ *     useProduct: Function, useProductToolbarQuery: Function, isDisabled: boolean,
+ *     useToolbarFieldClearAll: Function}}
  */
 Toolbar.propTypes = {
   hardFilterReset: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isGroupVariantDisabled: PropTypes.bool,
   t: PropTypes.func,
+  useProduct: PropTypes.func,
   useProductToolbarQuery: PropTypes.func,
   useSelectCategoryOptions: PropTypes.func,
   useToolbarFieldClear: PropTypes.func,
@@ -182,13 +188,15 @@ Toolbar.propTypes = {
  *
  * @type {{useToolbarFieldClear: Function, t: translate, useSelectCategoryOptions: Function,
  *     hardFilterReset: boolean, useToolbarFields: Function, isGroupVariantDisabled: boolean,
- *     useProductToolbarQuery: Function, isDisabled: boolean, useToolbarFieldClearAll: Function}}
+ *     useProduct: Function, useProductToolbarQuery: Function, isDisabled: boolean,
+ *     useToolbarFieldClearAll: Function}}
  */
 Toolbar.defaultProps = {
   hardFilterReset: false,
   isDisabled: helpers.UI_DISABLED_TOOLBAR,
   isGroupVariantDisabled: helpers.UI_DISABLED_TOOLBAR_GROUP_VARIANT,
   t: translate,
+  useProduct,
   useProductToolbarQuery,
   useSelectCategoryOptions,
   useToolbarFieldClear,