UIBULKED-379 Filtering columns on Bulk edit screens

src/components/BulkEditActionMenu/ActionMenuGroup/ActionMenuGroup.css

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

src/components/BulkEditActionMenu/BulkEditActionMenu.js

@@ -5,12 +5,13 @@ import { saveAs } from 'file-saver';
 import {
   Button,
   Icon,
+  MultiSelection,
 } 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 { ActionMenuGroup } from './ActionMenuGroup/ActionMenuGroup';
+import css from './ActionMenuGroup/ActionMenuGroup.css';
 import {
   APPROACHES,
   CAPABILITIES,
@@ -74,8 +75,13 @@ const BulkEditActionMenu = ({
   });
 
   const { countOfRecords, visibleColumns, setVisibleColumns } = useContext(RootContext);
-  const columns = visibleColumns || [];
-  const selectedValues = columns.filter(item => !item.selected).map(item => item.value);
+
+  const columnsOptions = visibleColumns.map(item => ({
+    ...item,
+    label: item.ignoreTranslation ? item.label : intl.formatMessage({ id: `ui-bulk-edit.columns.${capability}.${item.label}` }),
+  }));
+
+  const selectedValues = columnsOptions.filter(item => item.selected);
 
   const isStartBulkCsvActive = hasUserEditLocalPerm && capability === CAPABILITIES.USER;
   const isInitialStep = step === EDITING_STEPS.UPLOAD;
@@ -84,21 +90,13 @@ const BulkEditActionMenu = ({
     && isInitialStep
     && [JOB_STATUSES.DATA_MODIFICATION, JOB_STATUSES.REVIEW_CHANGES].includes(bulkDetails?.status);
 
-  const isLastUnselectedColumn = (value) => {
-    return selectedValues?.length === 1 && selectedValues?.[0] === value;
-  };
+  const handleColumnChange = (values) => {
+    if (!values?.length) return;
 
-  const columnsOptions = columns.map(item => ({
-    ...item,
-    label: item.ignoreTranslation ? item.label : intl.formatMessage({ id: `ui-bulk-edit.columns.${capability}.${item.label}` }),
-    disabled: isLastUnselectedColumn(item.value) || !countOfRecords,
-  }));
-
-  const handleColumnChange = ({ values }) => {
-    const changedColumns = columns.map(col => {
+    const changedColumns = visibleColumns.map(col => {
       return ({
         ...col,
-        selected: !values.includes(col.value),
+        selected: values.map(({ value }) => value).includes(col.value),
       });
     });
 
@@ -165,17 +163,18 @@ const BulkEditActionMenu = ({
 
   const renderColumnsFilter = () => {
     return (
-      <CheckboxFilter
+      <MultiSelection
+        placeholder="Select columns"
         dataOptions={columnsOptions}
-        name="filter"
+        value={selectedValues}
         onChange={handleColumnChange}
-        selectedValues={selectedValues}
+        backspaceDeletes={false}
       />
     );
   };
 
   return (
-    <>
+    <div className={css.ActionMenu}>
       <ActionMenuGroup
         title={<FormattedMessage id="ui-bulk-edit.menuGroup.actions" />}
       >
@@ -185,8 +184,7 @@ const BulkEditActionMenu = ({
       <ActionMenuGroup title={<FormattedMessage id="ui-bulk-edit.menuGroup.showColumns" />}>
         {Boolean(columnsOptions.length) && renderColumnsFilter()}
       </ActionMenuGroup>
-
-    </>
+    </div>
   );
 };
 

src/components/BulkEditList/BulkEditListResult/BulkEditInAppPreviewModal/BulkEditInAppPreviewModal.js

@@ -94,7 +94,7 @@ const BulkEditInAppPreviewModal = ({
     },
   });
 
-  const visibleColumnKeys = visibleColumns?.filter(item => !item.selected).map(item => item.value);
+  const visibleColumnKeys = visibleColumns?.filter(item => item.selected).map(item => item.value);
 
   const isChangedPreviewReady = bulkDetails && Object.hasOwn(bulkDetails, FILE_KEYS.PROPOSED_CHANGES_LINK);
 

src/components/BulkEditList/BulkEditListResult/Preview/PreviewAccordion/PreviewAccordion.js

@@ -16,7 +16,7 @@ const PreviewAccordion = ({ contentData, columnMapping, visibleColumns, isInitia
   const accordionLabel = <FormattedMessage id={`ui-bulk-edit.list.preview.${translationKey}`} />;
 
   const visibleColumnKeys = useMemo(() => {
-    return visibleColumns?.filter(item => !item.selected).map(item => item.value);
+    return visibleColumns?.filter(item => item.selected).map(item => item.value);
   }, [visibleColumns]);
 
   return (

src/utils/mappers/mappers.js

@@ -50,7 +50,7 @@ export const getMappedTableData = ({ data, capabilities, intl }) => {
     label: cell.value,
     value: cell.value,
     disabled: false,
-    selected: !cell.visible,
+    selected: cell.visible,
     ignoreTranslation: cell.ignoreTranslation,
   }));
 

src/utils/mappers/mappers.test.js

@@ -48,7 +48,7 @@ describe('mappers', () => {
           label: uuidColumn.label,
           value: uuidColumn.value,
           disabled: false,
-          selected: false,
+          selected: true,
         }],
         contentData: [{
           [uuidColumn.value]: row[0],