UIEH-1424: Agreements accordion - Add a tooltip for the New and Add buttons.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## [9.2.0] (IN PROGRESS)
 
 * Agreements accordion - Revise Are you sure you want to unassign agreement? message. (UIEH-1420)
+* Agreements accordion - Add a tooltip for the `New` and `Add` buttons. (UIEH-1424)
 
 ## [9.1.1] (https://github.com/folio-org/ui-eholdings/tree/v9.1.1) (2024-03-24)
 

src/features/agreements-accordion/agreements-accordion.js

@@ -4,7 +4,10 @@ import {
 } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import {
+  FormattedMessage,
+  useIntl,
+} from 'react-intl';
 
 import {
   Pluggable,
@@ -17,6 +20,7 @@ import {
   Badge,
   Modal,
   ModalFooter,
+  Tooltip,
 } from '@folio/stripes/components';
 
 import Toaster from '../../components/toaster';
@@ -75,6 +79,7 @@ const AgreementsAccordion = ({
   refType,
   unassignAgreement,
 }) => {
+  const intl = useIntl();
   const stripes = useStripes();
   const [showModal, setShowModal] = useState(false);
   const [currentAgreement, setCurrentAgreement] = useState({});
@@ -103,11 +108,29 @@ const AgreementsAccordion = ({
     );
   };
 
-  const renderFindAgreementTrigger = (props) => {
+  const renderFindAgreementTrigger = ({ buttonRef, ...props }) => {
+    const setTriggerRef = (ref) => (element) => {
+      if (!element) return;
+
+      ref.current = element;
+      buttonRef.current = element;
+    };
+
     return (
-      <Button {...props}>
-        <FormattedMessage id="ui-eholdings.add" />
-      </Button>
+      <Tooltip
+        id="agreements-accordion-add"
+        text={intl.formatMessage({ id: 'ui-eholdings.agreements.accordion.add' })}
+      >
+        {({ ref, ariaIds }) => (
+          <Button
+            ref={setTriggerRef(ref)}
+            aria-labelledby={ariaIds.text}
+            {...props}
+          >
+            <FormattedMessage id="ui-eholdings.add" />
+          </Button>
+        )}
+      </Tooltip>
     );
   };
 
@@ -131,13 +154,22 @@ const AgreementsAccordion = ({
           renderTrigger={renderFindAgreementTrigger}
           onAgreementSelected={onAddAgreementHandler}
         />
-        <Button
-          data-test-new-button
-          buttonClass={styles['new-button']}
-          to={`/erm/agreements/create?authority=${refType}&referenceId=${refId}`}
+        <Tooltip
+          id="agreements-accordion-new"
+          text={intl.formatMessage({ id: 'ui-eholdings.agreements.accordion.new' })}
         >
-          <FormattedMessage id="ui-eholdings.new" />
-        </Button>
+          {({ ref, ariaIds }) => (
+            <Button
+              data-test-new-button
+              ref={ref}
+              aria-labelledby={ariaIds.text}
+              buttonClass={styles['new-button']}
+              to={`/erm/agreements/create?authority=${refType}&referenceId=${refId}`}
+            >
+              <FormattedMessage id="ui-eholdings.new" />
+            </Button>
+          )}
+        </Tooltip>
       </>
     );
   };

src/features/agreements-accordion/agreements-accordion.test.js

@@ -4,11 +4,19 @@ import {
   fireEvent,
   waitFor,
 } from '@folio/jest-config-stripes/testing-library/react';
+import { Pluggable } from '@folio/stripes/core';
+
 import { createMemoryHistory } from 'history';
 
 import AgreementsAccordion from './agreements-accordion';
 import Harness from '../../../test/jest/helpers/harness';
 
+const buttonRef = { current: null };
+
+Pluggable.mockImplementation(({ renderTrigger }) => {
+  return renderTrigger({ buttonRef });
+});
+
 jest.mock('@folio/stripes-components', () => ({
   ...jest.requireActual('@folio/stripes-components'),
   Badge: ({ children }) => <div>Badge {children}</div>
@@ -66,6 +74,7 @@ describe('Given AgreementsAccordion', () => {
   afterEach(() => {
     cleanup();
     history = createMemoryHistory();
+    buttonRef.current = null;
   });
 
   it('should display accordion label', () => {
@@ -161,4 +170,26 @@ describe('Given AgreementsAccordion', () => {
       expect(mockOnToggle).toBeCalledTimes(1);
     });
   });
+
+  describe('"Add" button', () => {
+    it('should have a tooltip', () => {
+      const { getByText } = renderAgreementsAccordion();
+
+      expect(getByText('ui-eholdings.agreements.accordion.add')).toBeInTheDocument();
+    });
+
+    it('should assign a ref to the buttonRef so that the "Add" button will be in focus after the plugin is closed', () => {
+      renderAgreementsAccordion();
+
+      expect(buttonRef.current).toBeInstanceOf(HTMLButtonElement);
+    });
+  });
+
+  describe('New button', () => {
+    it('should have a tooltip', () => {
+      const { getByText } = renderAgreementsAccordion();
+
+      expect(getByText('ui-eholdings.agreements.accordion.new')).toBeInTheDocument();
+    });
+  });
 });

test/jest/__mock__/stripesCore.mock.js

@@ -90,6 +90,11 @@ jest.mock('@folio/stripes/core', () => {
 
   const AppContextMenu = (props) => <>{props.children()}</>;
 
+  const Pluggable = jest.fn(({ renderTrigger }) => {
+    const buttonRef = { current: null };
+    return renderTrigger({ buttonRef });
+  });
+
   STRIPES.connect = stripesConnect;
 
   return {
@@ -100,6 +105,7 @@ jest.mock('@folio/stripes/core', () => {
     AppContextMenu,
     useStripes,
     useCallout,
+    Pluggable,
   };
 }, { virtual: true });
 

translations/ui-eholdings/en.json

@@ -27,6 +27,8 @@
     "agreements.deleteModal.description": "Are you sure you want to delete this agreement line: <strong>{recordName}</strong>?",
     "agreements.deleteModal.cancel": "Cancel",
     "agreements.deleteModal.delete": "Delete",
+    "agreements.accordion.new": "Creates a new agreement and then adds eHoldings package/title record as an Agreement Line to it",
+    "agreements.accordion.add": "Adds eHoldings package/title record as an Agreement Line to another Agreement",
     "usageConsolidation": "Usage & analysis",
     "usageConsolidation.filters.year": "Year",
     "usageConsolidation.filters.platformType": "Platform",