diff --git a/CHANGELOG.md b/CHANGELOG.md index 69c2678a..88d16865 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,6 +68,7 @@ * [UIBULKED-545](https://folio-org.atlassian.net/browse/UIBULKED-545) Clean up permissions. * [UIBULKED-572](https://folio-org.atlassian.net/browse/UIBULKED-572) Include additional field to 'actions'. * [UIBULKED-497](https://folio-org.atlassian.net/browse/UIBULKED-497) "Are you sure" preview displays outdated values after User changed selection on bulk edit form and clicked "Confirm changes". +* [UIBULKED-557](https://folio-org.atlassian.net/browse/UIBULKED-557) Add hover effect to improve text visibility in dropdowns in Bulk Edit in-app form. ## [4.1.4](https://github.com/folio-org/ui-bulk-edit/tree/v4.1.4) (2024-05-29) diff --git a/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.js b/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.js index a7ef246e..b15effd1 100644 --- a/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.js +++ b/src/components/BulkEditPane/BulkEditListResult/BulkEditInApp/ContentUpdatesForm/ValuesColumn.js @@ -115,6 +115,9 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option return [placeholder, ...rest.sort((a, b) => a.label.localeCompare(b.label))]; }; + function getLabelByValue(items, targetValue) { + return items?.find((labeledValue) => labeledValue.value === targetValue)?.label; + } const sortedNotes = sortWithoutPlaceholder(filteredAndMappedNotes); const sortedHoldingsNotes = sortWithoutPlaceholder(filteredAndMappedHoldingsNotes); const sortedInstanceNotes = sortWithoutPlaceholder(filteredAndMappedInstanceNotes); @@ -171,15 +174,17 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option ), formatMessage({ id: 'ui-bulk-edit.layer.selectPatronGroup' })); return controlType === CONTROL_TYPES.PATRON_GROUP_SELECT && ( - onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })} + data-testid={`select-patronGroup-${actionIndex}`} + aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.patronGroupSelect' })} + marginBottom0 + dirty={!!actionValue} + /> + ); }; @@ -201,7 +206,7 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option controlType === CONTROL_TYPES.LOCATION && ( <> {isCentralTenant ? ( - <> +
- +
) : ( - <> +
onChange({ actionIndex, value: loc?.id, fieldName: FIELD_VALUE_KEY })} @@ -245,47 +250,51 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option } data-testid={`locationLookup-${actionIndex}`} /> - +
)} ) ); const renderStatusSelect = () => controlType === CONTROL_TYPES.STATUS_SELECT && ( - onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })} + data-testid={`select-statuses-${actionIndex}`} + aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.statusSelect' })} + marginBottom0 + dirty={!!actionValue} + /> + ); const renderLoanTypeSelect = () => controlType === CONTROL_TYPES.LOAN_TYPE && ( isLoanTypesEscLoading ? : - { - onChange( - { - actionIndex, - value, - fieldName: FIELD_VALUE_KEY, - tenants: getTenantsById(removeDuplicatesByValue(loanTypesEsc, tenants), value) - } - ); - }} - placeholder={formatMessage({ id: 'ui-bulk-edit.layer.selectLoanType' })} - dataOptions={isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes} - aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })} - dirty={!!actionValue} - /> +
+ { + onChange( + { + actionIndex, + value, + fieldName: FIELD_VALUE_KEY, + tenants: getTenantsById(removeDuplicatesByValue(loanTypesEsc, tenants), value) + } + ); + }} + placeholder={formatMessage({ id: 'ui-bulk-edit.layer.selectLoanType' })} + dataOptions={isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes} + aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })} + dirty={!!actionValue} + /> +
); const renderNoteTypeSelect = () => controlType === CONTROL_TYPES.NOTE_SELECT && ( @@ -294,91 +303,103 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option isHoldingsNotesEscLoading ? : - onChange( + { + actionIndex, + value: e.target.value, + fieldName: FIELD_VALUE_KEY, + tenants: getTenantsById(sortedHoldingsNotes, e.target.value) + } + )} + dataOptions={sortedHoldingsNotes} + aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })} + marginBottom0 + dirty={!!action.value} + /> + + )} {isItemCapability && ( isItemsNotesEscLoading ? : +
+ onChange({ - actionIndex, - value: e.target.value, - fieldName: FIELD_VALUE_KEY, - tenants: getTenantsById(sortedNotes, e.target.value), - })} - dataOptions={sortedNotes} + loading={isInstanceNotesLoading} + onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })} + dataOptions={sortedInstanceNotes} aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })} marginBottom0 - dirty={!!actionValue} - />)} - {isInstanceCapability && ( - onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })} - dataOptions={duplicateNoteOptions} - aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })} - marginBottom0 - dirty={!!actionValue} - /> +
+ onChange( - { - actionIndex, - value: e.target.value, - fieldName: FIELD_VALUE_KEY, - tenants: getTenantsById(accessRelationshipsWithPlaceholder, e.target.value) - } - )} - dataOptions={accessRelationshipsWithPlaceholder} - aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.urlRelationshipSelect' })} - marginBottom0 - dirty={!!actionValue} - /> +
+