UIIN-3021: Provide necessary props for browse lookup facets. Remove t…

…he facets state reset functionality. (#2615)
folio-org · Nov 15, 2024 · 343bc3c · 343bc3c
1 parent 8b9ad01
commit 343bc3c
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 337 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## [13.0.0] (IN PROGRESS)
 
 * *BREAKING* Rename quick-marc routes from `bib` to `bibliographic` and `duplicate` to `derive`. Refs UIIN-3120.
+* *BREAKING* Provide necessary props for browse lookup facets. Remove the facets state reset functionality. Refs UIIN-3099.
 
 ## [12.0.1] (IN PROGRESS)
 

diff --git a/package.json b/package.json
@@ -1001,7 +1001,7 @@
     "@folio/stripes-components": "^12.2.2",
     "@folio/stripes-connect": "^9.2.0",
     "@folio/stripes-core": "^10.2.1",
-    "@folio/stripes-inventory-components": "^1.0.0",
+    "@folio/stripes-inventory-components": "^2.0.0",
     "@folio/stripes-marc-components": "^1.1.0",
     "@folio/stripes-smart-components": "^9.2.1",
     "@folio/stripes-testing": "^4.6.0",
@@ -1045,7 +1045,7 @@
   },
   "peerDependencies": {
     "@folio/stripes": "^9.2.2",
-    "@folio/stripes-inventory-components": "^1.0.0",
+    "@folio/stripes-inventory-components": "^2.0.0",
     "@folio/stripes-marc-components": "^1.1.0",
     "react": "^18.2.0",
     "react-intl": "^6.4.4",
@@ -1056,7 +1056,7 @@
   },
   "optionalDependencies": {
     "@folio/plugin-create-inventory-records": "^5.0.0",
-    "@folio/plugin-find-instance": "^8.0.0"
+    "@folio/plugin-find-instance": "^9.0.0"
   },
   "resolutions": {
     "moment": "~2.29.4"

diff --git a/src/components/BrowseInventoryFilters/BrowseInventoryFilters.js b/src/components/BrowseInventoryFilters/BrowseInventoryFilters.js
@@ -1,5 +1,8 @@
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
+import {
+  useCallback,
+  useContext,
+} from 'react';
 
 import { DataContext } from '../../contexts';
 import InstanceFiltersBrowse from '../InstanceFiltersBrowse';
@@ -10,12 +13,15 @@ const BrowseInventoryFilters = ({
 }) => {
   const data = useContext(DataContext);
 
+  const handleChange = useCallback(({ name, values }) => {
+    applyFilters(name, values);
+  }, [applyFilters]);
+
   return (
     <InstanceFiltersBrowse
       data={data}
       query={query}
-      onChange={({ name, values }) => applyFilters(name, values)}
-      onClear={(name) => applyFilters(name, [])}
+      onChange={handleChange}
     />
   );
 };

diff --git a/src/components/BrowseInventoryFilters/BrowseInventoryFilters.test.js b/src/components/BrowseInventoryFilters/BrowseInventoryFilters.test.js
@@ -39,7 +39,6 @@ describe('BrowseInventoryFilters', () => {
       data,
       query,
       onChange: expect.any(Function),
-      onClear: expect.any(Function),
     }, {});
   });
 });
diff --git a/src/components/BrowseResultsList/getBrowseResultsFormatter.js b/src/components/BrowseResultsList/getBrowseResultsFormatter.js
@@ -9,7 +9,6 @@ import {
 } from '@folio/stripes/components';
 import {
   browseModeOptions,
-  deleteFacetStates,
 } from '@folio/stripes-inventory-components';
 
 import {
@@ -53,14 +52,9 @@ const getTargetRecord = (
     }),
   };
 
-  const handleClick = () => {
-    deleteFacetStates(namespace);
-  };
-
   return (
     <TextLink
       to={toParams}
-      onClick={handleClick}
     >
       {record}
     </TextLink>

diff --git a/src/components/InstanceFiltersBrowse/InstanceFiltersBrowse.js b/src/components/InstanceFiltersBrowse/InstanceFiltersBrowse.js
@@ -1,41 +1,37 @@
-import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import omit from 'lodash/omit';
 
 import {
   checkIfUserInMemberTenant,
   useStripes,
 } from '@folio/stripes/core';
-import { AccordionSet } from '@folio/stripes/components';
 import {
   FACETS,
   HeldByFacet,
   browseModeOptions,
   browseCallNumberOptions,
   browseClassificationOptions,
   useFacets,
-  FACETS_TO_REQUEST,
   SharedFacet,
   EffectiveLocationFacet,
+  NameTypeFacet,
   isConsortiaEnv,
+  FACETS_TO_REQUEST,
+  MultiSelectionFacet,
 } from '@folio/stripes-inventory-components';
 
-import { MultiSelectionFacet } from '../MultiSelectionFacet';
-
 const InstanceFiltersBrowse = props => {
   const {
     data,
     query,
     onChange,
-    onClear,
   } = props;
 
   const intl = useIntl();
   const stripes = useStripes();
   const qindex = query.qindex;
 
-  const initialAccordionStates = useMemo(() => ({
+  const initialFacetStates = {
     [FACETS.SHARED]: false,
     [FACETS.CALL_NUMBERS_HELD_BY]: false,
     [FACETS.CLASSIFICATION_SHARED]: false,
@@ -47,54 +43,46 @@ const InstanceFiltersBrowse = props => {
     [FACETS.NAME_TYPE]: false,
     [FACETS.SUBJECT_SOURCE]: false,
     [FACETS.SUBJECT_TYPE]: false,
-  }), []);
-
-  const activeFilters = useMemo(() => omit(query || {}, ['qindex', 'query']), [query]);
+  };
 
   const {
-    accordionStatus,
+    accordionsStatus,
+    activeFilters,
     facetOptions,
-    getIsLoading,
     onToggleAccordion,
-    onInputFocusAndMoreClick,
-    onFacetOptionSearch,
+    getIsLoading,
   } = useFacets({
-    initialAccordionStates,
+    initialAccordionStates: initialFacetStates,
     query,
-    isBrowseLookup: true,
-    activeFilters,
     data,
+    isBrowseLookup: true,
   });
 
   const renderSharedFacet = (name) => (
     <SharedFacet
       name={name}
+      accordionsStatus={accordionsStatus}
       activeFilters={activeFilters}
+      getIsLoading={getIsLoading}
       facetOptions={facetOptions}
       onChange={onChange}
-      onClear={onClear}
-      getIsLoading={getIsLoading}
+      onToggle={onToggleAccordion}
     />
   );
 
   const renderHeldByFacet = (name) => (
     <HeldByFacet
       name={name}
+      accordionsStatus={accordionsStatus}
       activeFilters={activeFilters}
       facetOptions={facetOptions}
-      getIsLoading={getIsLoading}
       onChange={onChange}
-      onClear={onClear}
-      onFetch={onInputFocusAndMoreClick}
-      onSearch={onFacetOptionSearch}
+      onToggle={onToggleAccordion}
     />
   );
 
   return (
-    <AccordionSet
-      accordionStatus={accordionStatus}
-      onToggle={onToggleAccordion}
-    >
+    <>
       {Object.values(browseClassificationOptions).includes(qindex) && (
         renderSharedFacet(FACETS.CLASSIFICATION_SHARED)
       )}
@@ -104,14 +92,12 @@ const InstanceFiltersBrowse = props => {
           {renderHeldByFacet(FACETS.CALL_NUMBERS_HELD_BY)}
           <EffectiveLocationFacet
             name={FACETS.EFFECTIVE_LOCATION}
+            accordionsStatus={accordionsStatus}
             facetOptions={facetOptions}
             separator={isConsortiaEnv(stripes)}
             activeFilters={activeFilters}
-            getIsLoading={getIsLoading}
             onChange={onChange}
-            onClear={onClear}
-            onFetch={onInputFocusAndMoreClick}
-            onSearch={onFacetOptionSearch}
+            onToggle={onToggleAccordion}
           />
         </>
       )}
@@ -120,18 +106,14 @@ const InstanceFiltersBrowse = props => {
           {renderSharedFacet(FACETS.CONTRIBUTORS_SHARED)}
           {/* Hide Held by facet for contributors and subjects browse until back-end requirements and implementation are done */}
           {/* {renderHeldByFacet(FACETS.CONTRIBUTORS_HELD_BY)} */}
-          <MultiSelectionFacet
-            id={FACETS.NAME_TYPE}
-            label={intl.formatMessage({ id: `ui-inventory.filters.${FACETS.NAME_TYPE}` })}
+          <NameTypeFacet
             name={FACETS.NAME_TYPE}
-            closedByDefault
+            accordionsStatus={accordionsStatus}
+            activeFilters={activeFilters}
             separator={checkIfUserInMemberTenant(stripes)}
-            options={facetOptions[FACETS_TO_REQUEST[FACETS.NAME_TYPE]]}
-            selectedValues={activeFilters[FACETS.NAME_TYPE]}
-            onFilterChange={onChange}
-            onClearFilter={() => onClear(FACETS.NAME_TYPE)}
-            displayClearButton={!!activeFilters[FACETS.NAME_TYPE]?.length}
-            isPending={getIsLoading(FACETS.NAME_TYPE)}
+            facetOptions={facetOptions}
+            onChange={onChange}
+            onToggle={onToggleAccordion}
           />
         </>
       )}
@@ -143,39 +125,36 @@ const InstanceFiltersBrowse = props => {
           <MultiSelectionFacet
             id={FACETS.SUBJECT_SOURCE}
             label={intl.formatMessage({ id: `ui-inventory.${FACETS.SUBJECT_SOURCE}` })}
+            open={accordionsStatus[FACETS.SUBJECT_SOURCE]}
+            onToggle={onToggleAccordion}
             name={FACETS.SUBJECT_SOURCE}
-            closedByDefault
-            separator={checkIfUserInMemberTenant(stripes)}
+            onChange={onChange}
             options={facetOptions[FACETS_TO_REQUEST[FACETS.SUBJECT_SOURCE]]}
             selectedValues={activeFilters[FACETS.SUBJECT_SOURCE]}
-            onFilterChange={onChange}
-            onClearFilter={() => onClear(FACETS.SUBJECT_SOURCE)}
             displayClearButton={!!activeFilters[FACETS.SUBJECT_SOURCE]?.length}
-            isPending={getIsLoading(FACETS.SUBJECT_SOURCE)}
+            separator={checkIfUserInMemberTenant(stripes)}
           />
           <MultiSelectionFacet
             id={FACETS.SUBJECT_TYPE}
             label={intl.formatMessage({ id: `ui-inventory.${FACETS.SUBJECT_TYPE}` })}
+            open={accordionsStatus[FACETS.SUBJECT_TYPE]}
+            onToggle={onToggleAccordion}
             name={FACETS.SUBJECT_TYPE}
-            closedByDefault
+            onChange={onChange}
             options={facetOptions[FACETS_TO_REQUEST[FACETS.SUBJECT_TYPE]]}
             selectedValues={activeFilters[FACETS.SUBJECT_TYPE]}
-            onFilterChange={onChange}
-            onClearFilter={() => onClear(FACETS.SUBJECT_TYPE)}
             displayClearButton={!!activeFilters[FACETS.SUBJECT_TYPE]?.length}
-            isPending={getIsLoading(FACETS.SUBJECT_TYPE)}
           />
         </>
       )}
-    </AccordionSet>
+    </>
   );
 };
 
 export default InstanceFiltersBrowse;
 
 InstanceFiltersBrowse.propTypes = {
   onChange: PropTypes.func.isRequired,
-  onClear: PropTypes.func.isRequired,
   data: PropTypes.object.isRequired,
   query: PropTypes.object.isRequired,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,6 @@ describe('BrowseInventoryFilters', () => { @@
           data,
           query,
           onChange: expect.any(Function),
-          onClear: expect.any(Function),
         }, {});
       });
     });