From 64838dd02a52aff43dcd8ab5b29148c49f78a803 Mon Sep 17 00:00:00 2001
From: Dmytro-Melnyshyn <Dmytro_Melnyshyn@epam.com>
Date: Tue, 17 Oct 2023 12:58:27 +0300
Subject: [PATCH] UIIN-2533: Show facet options, if they exist, after clicking
 the +More button.

---
 CHANGELOG.md                                  |  3 ++
 .../CheckboxFacet/CheckboxFacetList.js        | 36 ++++++++++---------
 .../CheckboxFacet/CheckboxFacetList.test.js   | 21 +++++++++++
 .../InstanceFilters/InstanceFilters.js        |  3 ++
 src/facetUtils.js                             |  5 +++
 src/facetUtils.test.js                        |  1 +
 6 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 047214f03..afbe876cb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Change history for ui-inventory
 
+## [10.0.1](IN PROGRESS)
+* 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)
 
diff --git a/src/components/CheckboxFacet/CheckboxFacetList.js b/src/components/CheckboxFacet/CheckboxFacetList.js
index 0212566e4..d1b76bb59 100644
--- a/src/components/CheckboxFacet/CheckboxFacetList.js
+++ b/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 && (
diff --git a/src/components/CheckboxFacet/CheckboxFacetList.test.js b/src/components/CheckboxFacet/CheckboxFacetList.test.js
index 917dbf1fb..a436fdd0c 100644
--- a/src/components/CheckboxFacet/CheckboxFacetList.test.js
+++ b/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);
+  });
 });
diff --git a/src/components/InstanceFilters/InstanceFilters.js b/src/components/InstanceFilters/InstanceFilters.js
index c74fec2ee..250f50707 100644
--- a/src/components/InstanceFilters/InstanceFilters.js
+++ b/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
diff --git a/src/facetUtils.js b/src/facetUtils.js
index c96efd387..9b095f986 100644
--- a/src/facetUtils.js
+++ b/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;
   }, []);
diff --git a/src/facetUtils.test.js b/src/facetUtils.test.js
index ee384f70d..cacdce94e 100644
--- a/src/facetUtils.test.js
+++ b/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);