UIBULKED-313 Filter column names (#428)

CHANGELOG.md

@@ -25,6 +25,8 @@
 * [UIBULKED-388](https://issues.folio.org/browse/UIBULKED-388) Bulk edit - Scrollable element not keyboard accessible.
 * [UIBULKED-384](https://issues.folio.org/browse/UIBULKED-384) Rendering holdings electronic access properties.
 * [UIBULKED-382](https://issues.folio.org/browse/UIBULKED-382) Update Item record column names.
+* [UIBULKED-313](https://issues.folio.org/browse/UIBULKED-313) Filter column names.
+
 
 ## [4.0.0](https://github.com/folio-org/ui-bulk-edit/tree/v4.0.0) (2023-10-12)
 

src/components/BulkEditActionMenu/ActionMenuGroup/ActionMenuGroup.css

@@ -1,3 +1,7 @@
+.ActionMenu {
+    max-width: 250px;
+}
+
 .ActionMenuGroup {
     margin-bottom: 20px;
 }

src/components/BulkEditActionMenu/BulkEditActionMenu.js

@@ -1,15 +1,16 @@
 import { FormattedMessage, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { saveAs } from 'file-saver';
-
 import {
   Button,
   Icon,
+  TextField,
 } from '@folio/stripes/components';
 import { CheckboxFilter } from '@folio/stripes/smart-components';
 import React, { useContext, useState } from 'react';
 import { Preloader } from '@folio/stripes-data-transfer-components';
 import { useLocation } from 'react-router-dom';
+import css from './ActionMenuGroup/ActionMenuGroup.css';
 import { ActionMenuGroup } from './ActionMenuGroup/ActionMenuGroup';
 import {
   APPROACHES,
@@ -43,6 +44,8 @@ const BulkEditActionMenu = ({
   const capability = search.get('capabilities');
   const step = search.get('step');
 
+  const [columnSearch, setColumnSearch] = useState('');
+
   const {
     hasUserEditLocalPerm,
     hasHoldingsInventoryEdit,
@@ -164,13 +167,26 @@ const BulkEditActionMenu = ({
   };
 
   const renderColumnsFilter = () => {
+    const filteredColumns = columnsOptions
+      .filter(item => item.label.toLowerCase().includes(columnSearch.toLowerCase()));
+
+    const allDisabled = columnsOptions.every(item => item.disabled);
+
     return (
-      <CheckboxFilter
-        dataOptions={columnsOptions}
-        name="filter"
-        onChange={handleColumnChange}
-        selectedValues={selectedValues}
-      />
+      <div className={css.ActionMenu}>
+        <TextField
+          value={columnSearch}
+          onChange={e => setColumnSearch(e.target.value)}
+          aria-label={intl.formatMessage({ id: 'ui-bulk-edit.ariaLabel.columnFilter' })}
+          disabled={allDisabled}
+        />
+        <CheckboxFilter
+          dataOptions={filteredColumns}
+          name="filter"
+          onChange={handleColumnChange}
+          selectedValues={selectedValues}
+        />
+      </div>
     );
   };
 

src/components/BulkEditActionMenu/BulkEditActionMenu.test.js

@@ -216,6 +216,21 @@ describe('BulkEditActionMenu', () => {
     ]);
   });
 
+  it('should filter columns based on value in input', () => {
+    const setVisibleColumns = jest.fn();
+
+    const { getByRole, queryByText } = renderBulkEditActionMenu({
+      step: EDITING_STEPS.UPLOAD,
+      capability: CAPABILITIES.USER,
+      providerState: { ...defaultProviderState, setVisibleColumns, countOfRecords: 1 },
+    });
+
+    act(() => userEvent.type(getByRole('textbox'), 'name'));
+
+    expect(queryByText('ui-bulk-edit.columns.USER.name')).toBeVisible();
+    expect(queryByText('ui-bulk-edit.columns.USER.uuid')).not.toBeInTheDocument();
+  });
+
   it('should not change visibleColumns when checkbox is pressed and only one option is selected ', () => {
     const setVisibleColumns = jest.fn();
 

src/components/BulkEditList/BulkEditListResult/Preview/ElectronicAccessTable/ElectronicAcess.css

@@ -9,6 +9,12 @@
     background-color: #ccc;
 }
 
+.ElectronicAccess th:nth-child(1) { width: 15% }
+.ElectronicAccess th:nth-child(2) { width: 30% }
+.ElectronicAccess th:nth-child(3) { width: 15% }
+.ElectronicAccess th:nth-child(4) { width: 15% }
+.ElectronicAccess th:nth-child(5) { width: 20% }
+
 .ElectronicAccess th, .ElectronicAccess td {
     border: 1px solid var(--color-border-p2);
     padding: var(--gutter-static-one-third) var(--gutter-static-two-thirds);

translations/ui-bulk-edit/en.json

@@ -387,6 +387,7 @@
   "ariaLabel.statusSelect": "Status select",
   "ariaLabel.loanTypeSelect": "Loan type select",
   "ariaLabel.urlRelationshipSelect": "Url relationship select",
+  "ariaLabel.columnFilter": "Column filter input",
 
   "permissionsModal.title": "Select Permissions",
   "permissionsModal.filter.title": "Search & filter",