UIIN-2533: Show facet options, if they exist, after clicking the +Mor…

…e button. (#2309)

CHANGELOG.md

@@ -10,6 +10,7 @@
 * Consortial holdings accordion is not appearing after the sharing of Instance. Fixes UIIN-2629.
 * Reset CheckboxFacet state.more when user resets search form and fewer facet options are loaded. Fixes UIIN-2531.
 * Edit instance success toast no longer shows the instance HRID. Fixes UIIN-2588.
+* Show facet options, if they exist, after clicking the +More button. Refs UIIN-2533.
 
 ## [10.0.0](https://github.com/folio-org/ui-inventory/tree/v10.0.0) (2023-10-13)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v9.4.12...v10.0.0)

src/components/CheckboxFacet/CheckboxFacetList.js

@@ -52,23 +52,25 @@ function CheckboxFacetList({
           <FormattedMessage id="ui-inventory.noMatchingOptions" />
         }
 
-        {!isPending && dataOptions.map(({ count, value, label, disabled, readOnly }) => {
-          const name = typeof label === 'string' ? label : value;
-          return (
-            <Checkbox
-              id={`clickable-filter-${fieldName}-${kebabCase(name)}`}
-              data-test-checkbox-filter-data-option={value}
-              key={value}
-              label={label}
-              labelInfo={count}
-              name={name}
-              disabled={disabled}
-              readOnly={readOnly}
-              checked={selectedValues.includes(value)}
-              onChange={onChange(value)}
-            />
-          );
-        })}
+        {!isPending && dataOptions
+          .filter(({ isDeleted }) => !isDeleted)
+          .map(({ count, value, label, disabled, readOnly }) => {
+            const name = typeof label === 'string' ? label : value;
+            return (
+              <Checkbox
+                id={`clickable-filter-${fieldName}-${kebabCase(name)}`}
+                data-test-checkbox-filter-data-option={value}
+                key={value}
+                label={label}
+                labelInfo={count}
+                name={name}
+                disabled={disabled}
+                readOnly={readOnly}
+                checked={selectedValues.includes(value)}
+                onChange={onChange(value)}
+              />
+            );
+          })}
       </div>
 
       {!isPending && showMore && (

src/components/CheckboxFacet/CheckboxFacetList.test.js

@@ -38,6 +38,7 @@ const dataOptions = [
     label: 'Check Box 2',
     value: 'checkBox2',
   },
+  { id: 'fakeId', isDeleted: true },
 ];
 const selectedValues = ['checkBox1'];
 const fieldName = 'testFacet';
@@ -123,4 +124,24 @@ describe('CheckboxFacetList', () => {
     const checkBoxs = screen.findAllByRole('checkbox');
     expect(checkBoxs).toMatchObject({});
   });
+
+  it('should not render deleted options', () => {
+    render(
+      <CheckboxFacetList
+        dataOptions={dataOptions}
+        selectedValues={selectedValues}
+        showMore={showMore}
+        showSearch={showSearch}
+        onMoreClick={onMoreClick}
+        onSearch={onSearch}
+        onChange={onChange}
+        fieldName={fieldName}
+        isPending={isPending}
+      />,
+    );
+
+    const allOptions = screen.getAllByRole('checkbox').length;
+
+    expect(allOptions).toBe(2);
+  });
 });

src/components/InstanceFilters/InstanceFilters.js

@@ -444,6 +444,9 @@ const InstanceFilters = props => {
           selectedValues={activeFilters[FACETS.STATUS]}
           isPending={getIsPending(FACETS.STATUS)}
           onChange={onChange}
+          isFilterable
+          onSearch={handleFilterSearch}
+          onFetch={handleFetchFacets}
         />
       </Accordion>
       <Accordion

src/facetUtils.js

@@ -62,6 +62,11 @@ export const getFacetOptions = (selectedFiltersId, entries, facetData, key, pars
     if (facet) {
       const option = parse(facetDataMap.get(entry.id), entry.totalRecords);
       accum.push(option);
+    } else {
+      accum.push({
+        id: entry.id,
+        isDeleted: true,
+      });
     }
     return accum;
   }, []);

src/facetUtils.test.js

@@ -43,6 +43,7 @@ describe('getFacetOptions', () => {
     const key = 'id';
     const expectedOptions = [
       { label: 'Filter 1', value: 'filter1', count: 2 },
+      { id: 'invalid', isDeleted: true },
       { label: 'Filter 2', value: 'filter2', count: 0 },
     ];
     expect(getFacetOptions(selectedFiltersId, entries, facetData, key)).toEqual(expectedOptions);