STSMACOM-468: Enabled <ColumnManager> in the results list

CHANGELOG.md

@@ -76,7 +76,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)
 

src/components/InstancesList/InstancesList.js

@@ -72,7 +72,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 = {
@@ -123,20 +122,10 @@ class InstancesList extends React.Component {
       showErrorModal: false,
       selectedRows: {},
       isSelectedRecordsModalOpened: false,
-      visibleColumns: this.getInitialToggableColumns(),
       isImportRecordModalOpened: false,
     };
   }
 
-  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 },
@@ -341,21 +330,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 () => {
@@ -457,20 +436,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}
       </>
     );
   };
@@ -609,7 +575,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 => {
@@ -619,11 +584,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}
@@ -641,7 +611,6 @@ class InstancesList extends React.Component {
               previouslyHeld: false,
               source: 'FOLIO',
             }}
-            visibleColumns={visibleColumns}
             columnMapping={columnMapping}
             columnWidths={{
               select: '30px',

src/components/InstancesList/InstancesList.test.js

@@ -102,7 +102,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', () => {