From bc1d5c22fc439ffcc56e6e92f52e44055d412c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rasmus=20W=C3=B8lk?= <rasmuswoelk@gmail.com>
Date: Wed, 3 Feb 2021 18:28:02 +0100
Subject: [PATCH 1/3] Implemented columns toggle  visibility functionality via.
 <SearchAndSort> and removed the previous implementation.

---
 src/components/InstancesList/InstancesList.js | 45 +++----------------
 1 file changed, 7 insertions(+), 38 deletions(-)

diff --git a/src/components/InstancesList/InstancesList.js b/src/components/InstancesList/InstancesList.js
index 954caa943..71f01f415 100644
--- a/src/components/InstancesList/InstancesList.js
+++ b/src/components/InstancesList/InstancesList.js
@@ -69,7 +69,6 @@ const RESULT_COUNT_INCREMENT = 30;
 const TOGGLEABLE_COLUMNS = ['contributors', 'publishers', 'relation'];
 const NON_TOGGLEABLE_COLUMNS = ['select', 'title'];
 const ALL_COLUMNS = [...NON_TOGGLEABLE_COLUMNS, ...TOGGLEABLE_COLUMNS];
-const VISIBLE_COLUMNS_STORAGE_KEY = 'inventory-visible-columns';
 
 class InstancesList extends React.Component {
   static defaultProps = {
@@ -111,19 +110,9 @@ class InstancesList extends React.Component {
       showErrorModal: false,
       selectedRows: {},
       isSelectedRecordsModalOpened: false,
-      visibleColumns: this.getInitialToggableColumns(),
     };
   }
 
-  getInitialToggableColumns = () => {
-    return getItem(VISIBLE_COLUMNS_STORAGE_KEY) || TOGGLEABLE_COLUMNS;
-  }
-
-  getVisibleColumns = () => {
-    const visibleColumns = new Set([...this.state.visibleColumns, ...NON_TOGGLEABLE_COLUMNS]);
-    return ALL_COLUMNS.filter(key => visibleColumns.has(key));
-  }
-
   onFilterChangeHandler = ({ name, values }) => {
     const {
       data: { query },
@@ -328,21 +317,11 @@ class InstancesList extends React.Component {
     );
   }
 
-  handleToggleColumn = ({ target: { value: key } }) => {
-    this.setState(({ visibleColumns }) => ({
-      visibleColumns: visibleColumns.includes(key) ? visibleColumns.filter(k => key !== k) : [...visibleColumns, key]
-    }), () => {
-      setItem(VISIBLE_COLUMNS_STORAGE_KEY, this.state.visibleColumns);
-    });
-  }
-
-  getActionMenu = ({ onToggle }) => {
+  getActionMenu = ({ onToggle, renderColumnsMenu }) => {
     const { parentResources, intl } = this.props;
     const selectedRowsCount = size(this.state.selectedRows);
     const isInstancesListEmpty = isEmpty(get(parentResources, ['records', 'records'], []));
     const isQuickExportLimitExceeded = selectedRowsCount > QUICK_EXPORT_LIMIT;
-    const visibleColumns = this.getVisibleColumns();
-    const columnMapping = this.getColumnMapping();
 
     const buildOnClickHandler = onClickHandler => {
       return () => {
@@ -436,20 +415,7 @@ class InstancesList extends React.Component {
             isDisabled: !selectedRowsCount,
           })}
         </MenuSection>
-        <MenuSection label={intl.formatMessage({ id: 'ui-inventory.showColumns' })} id="columns-menu-section">
-          {TOGGLEABLE_COLUMNS.map(key => (
-            <Checkbox
-              key={key}
-              name={key}
-              data-testid={key}
-              label={columnMapping[key]}
-              id={`inventory-search-column-checkbox-${key}`}
-              checked={visibleColumns.includes(key)}
-              value={key}
-              onChange={this.handleToggleColumn}
-            />
-          ))}
-        </MenuSection>
+        {renderColumnsMenu}
       </>
     );
   };
@@ -561,7 +527,6 @@ class InstancesList extends React.Component {
       'contributors': r => formatters.contributorsFormatter(r, data.contributorTypes),
     };
 
-    const visibleColumns = this.getVisibleColumns();
     const columnMapping = this.getColumnMapping();
 
     const formattedSearchableIndexes = searchableIndexes.map(index => {
@@ -571,11 +536,16 @@ class InstancesList extends React.Component {
       return { ...index, label };
     });
 
+    const columnManagerProps = {
+      excludeKeys: ['select', 'title']
+    };
+
     return (
       <>
         <div data-test-inventory-instances>
           <SearchAndSort
             actionMenu={this.getActionMenu}
+            columnManagerProps={columnManagerProps}
             packageInfo={packageInfo}
             objectName="inventory"
             maxSortKeys={1}
@@ -593,7 +563,6 @@ class InstancesList extends React.Component {
               previouslyHeld: false,
               source: 'FOLIO',
             }}
-            visibleColumns={visibleColumns}
             columnMapping={columnMapping}
             columnWidths={{
               select: '30px',

From c3dcd0f5cfbdbbd40c42c4aa6698f3baaf85e143 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rasmus=20W=C3=B8lk?= <rasmuswoelk@gmail.com>
Date: Wed, 3 Feb 2021 18:50:22 +0100
Subject: [PATCH 2/3] Fixed tests

---
 src/components/InstancesList/InstancesList.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js
index 138d1426c..f8be01dac 100644
--- a/src/components/InstancesList/InstancesList.test.js
+++ b/src/components/InstancesList/InstancesList.test.js
@@ -101,7 +101,7 @@ describe('InstancesRoute', () => {
 
       describe('hiding contributors column', () => {
         beforeEach(() => {
-          userEvent.click(screen.getByTestId('contributors'));
+          userEvent.click(document.querySelector('[data-test-column-manager-checkbox="contributors"]'));
         });
 
         it('should hide contributors column', () => {

From 56475696b785f8a7135594eeb047b981d3a7c39c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rasmus=20W=C3=B8lk?= <rasmuswoelk@gmail.com>
Date: Mon, 8 Mar 2021 21:25:24 +0100
Subject: [PATCH 3/3] Updated the changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 94ce40259..080041d44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -75,7 +75,7 @@
 * Add a warning icon for instance/holdings/item marked as Suppressed from discovery. Refs UIIN-1380.
 * Fix nature of content filter. Fixes UIIN-1441.
 * Add a warning icon for instance marked as Staff suppressed. Refs UIIN-1381.
-
+* Enabled `<ColumnManager>` in the results list. Refs STSMACOM-468.
 ## [5.0.1](https://github.com/folio-org/ui-inventory/tree/v5.0.1) (2020-10-15)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v5.0.0...v5.0.1)