From 8affb3fc7f6233735cbf315e8c8f439b3fa5f075 Mon Sep 17 00:00:00 2001
From: UladzislauKutarkin
 <72550466+UladzislauKutarkin@users.noreply.github.com>
Date: Fri, 25 Oct 2024 18:32:49 +0400
Subject: [PATCH] UIBULKED-557: Add hover effect to improve text visibility in
 dropdowns in Bulk Edit in-app form (#624)

---
 CHANGELOG.md                                  |   1 +
 .../ContentUpdatesForm/ValuesColumn.js        | 235 ++++++++++--------
 2 files changed, 129 insertions(+), 107 deletions(-)

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 && (
-      <Select
-        dataOptions={patronGroups}
-        value={actionValue}
-        onChange={e => 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}
-      />
+      <div title={getLabelByValue(patronGroups, actionValue)}>
+        <Select
+          dataOptions={patronGroups}
+          value={actionValue}
+          onChange={e => 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}
+        />
+      </div>
     );
   };
 
@@ -201,7 +206,7 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
     controlType === CONTROL_TYPES.LOCATION && (
       <>
         {isCentralTenant ? (
-          <>
+          <div title={getLabelByValue(locationsEsc, actionValue)}>
             <Selection
               id="locations-esc"
               loading={isLocationEscLoading}
@@ -223,9 +228,9 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
                 });
               }}
             />
-          </>
+          </div>
         ) : (
-          <>
+          <div title={getLabelByValue(locationsEsc, actionValue)}>
             <LocationSelection
               value={actionValue}
               onSelect={(loc) => 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}`}
             />
-          </>
+          </div>
         )}
       </>
     )
   );
 
   const renderStatusSelect = () => controlType === CONTROL_TYPES.STATUS_SELECT && (
-    <Select
-      dataOptions={statuses}
-      value={actionValue}
-      onChange={e => 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}
-    />
+    <div title={getLabelByValue(statuses, actionValue)}>
+      <Select
+        dataOptions={statuses}
+        value={actionValue}
+        onChange={e => 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}
+      />
+    </div>
   );
 
   const renderLoanTypeSelect = () => controlType === CONTROL_TYPES.LOAN_TYPE && (
     isLoanTypesEscLoading ?
       <Loading size="large" />
       :
-      <Selection
-        id="loanType"
-        value={actionValue}
-        loading={isLoanTypesLoading}
-        onChange={value => {
-          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}
-      />
+      <div title={getLabelByValue(isCentralTenant ? removeDuplicatesByValue(loanTypesEsc, tenants) : loanTypes, actionValue)}>
+        <Selection
+          id="loanType"
+          value={actionValue}
+          loading={isLoanTypesLoading}
+          onChange={value => {
+            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}
+        />
+      </div>
   );
 
   const renderNoteTypeSelect = () => controlType === CONTROL_TYPES.NOTE_SELECT && (
@@ -294,91 +303,103 @@ export const ValuesColumn = ({ action, allActions, actionIndex, onChange, option
         isHoldingsNotesEscLoading ?
           <Loading size="large" />
           :
-          <Select
-            id="noteHoldingsType"
-            value={action.value}
-            loading={isHoldingsNotesLoading}
-            onChange={e => 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}
-          />)}
+          <div title={getLabelByValue(sortedHoldingsNotes, action.value)}>
+            <Select
+              id="noteHoldingsType"
+              value={action.value}
+              loading={isHoldingsNotesLoading}
+              onChange={e => 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}
+            />
+          </div>
+      )}
       {isItemCapability && (
         isItemsNotesEscLoading ?
           <Loading size="large" />
           :
+          <div title={getLabelByValue(sortedNotes, action.value)}>
+            <Select
+              id="noteType"
+              value={action.value}
+              disabled={usItemNotesLoading || isItemsNotesEscLoading}
+              onChange={e => onChange({
+                actionIndex,
+                value: e.target.value,
+                fieldName: FIELD_VALUE_KEY,
+                tenants: getTenantsById(sortedNotes, e.target.value),
+              })}
+              dataOptions={sortedNotes}
+              aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
+              marginBottom0
+              dirty={!!actionValue}
+            />
+          </div>
+      )}
+      {isInstanceCapability && (
+        <div title={getLabelByValue(sortedInstanceNotes, actionValue)}>
           <Select
-            id="noteType"
+            id="noteInstanceType"
             value={action.value}
-            disabled={usItemNotesLoading || isItemsNotesEscLoading}
-            onChange={e => 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 && (
-        <Select
-          id="noteInstanceType"
-          value={action.value}
-          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={!!action.value}
-        />
+            dirty={!!action.value}
+          />
+        </div>
       )}
     </>
   );
 
   const renderNoteDuplicateTypeSelect = () => controlType === CONTROL_TYPES.NOTE_DUPLICATE_SELECT && (
-  <Select
-    id="noteTypeDuplicate"
-    value={action.value}
-    disabled
-    onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
-    dataOptions={duplicateNoteOptions}
-    aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
-    marginBottom0
-    dirty={!!actionValue}
-  />
+    <div title={getLabelByValue(duplicateNoteOptions, action.value)}>
+      <Select
+        id="noteTypeDuplicate"
+        value={action.value}
+        disabled
+        onChange={e => onChange({ actionIndex, value: e.target.value, fieldName: FIELD_VALUE_KEY })}
+        dataOptions={duplicateNoteOptions}
+        aria-label={formatMessage({ id: 'ui-bulk-edit.ariaLabel.loanTypeSelect' })}
+        marginBottom0
+        dirty={!!actionValue}
+      />
+    </div>
   );
 
   const renderElectronicAccessRelationshipSelect = () => controlType === CONTROL_TYPES.ELECTRONIC_ACCESS_RELATIONSHIP_SELECT && (
     isElectronicAccessEscLoading ?
       <Loading size="large" />
       :
-      <Select
-        id="urlRelationship"
-        value={action.value}
-        loading={isElectronicAccessLoading || isElectronicAccessEscLoading}
-        onChange={e => 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}
-      />
+      <div title={getLabelByValue(accessRelationshipsWithPlaceholder, action.value)}>
+        <Select
+          id="urlRelationship"
+          value={action.value}
+          loading={isElectronicAccessLoading || isElectronicAccessEscLoading}
+          onChange={e => 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}
+        />
+      </div>
   );
 
   return (