diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2903b68ef..3895a8574 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/features/agreements-accordion/agreements-accordion.js b/src/features/agreements-accordion/agreements-accordion.js
index 181599e1e..225b2334c 100644
--- a/src/features/agreements-accordion/agreements-accordion.js
+++ b/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 (
-
+
+ {({ ref, ariaIds }) => (
+
+ )}
+
);
};
@@ -131,13 +154,22 @@ const AgreementsAccordion = ({
renderTrigger={renderFindAgreementTrigger}
onAgreementSelected={onAddAgreementHandler}
/>
-
+ {({ ref, ariaIds }) => (
+
+ )}
+
>
);
};
diff --git a/src/features/agreements-accordion/agreements-accordion.test.js b/src/features/agreements-accordion/agreements-accordion.test.js
index b0e3da171..c2924d038 100644
--- a/src/features/agreements-accordion/agreements-accordion.test.js
+++ b/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 }) =>
Badge {children}
@@ -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();
+ });
+ });
});
diff --git a/test/jest/__mock__/stripesCore.mock.js b/test/jest/__mock__/stripesCore.mock.js
index 8ff180efc..ba56cafa5 100644
--- a/test/jest/__mock__/stripesCore.mock.js
+++ b/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 });
diff --git a/translations/ui-eholdings/en.json b/translations/ui-eholdings/en.json
index 1b68c08f5..768d4c025 100644
--- a/translations/ui-eholdings/en.json
+++ b/translations/ui-eholdings/en.json
@@ -27,6 +27,8 @@
"agreements.deleteModal.description": "Are you sure you want to delete this agreement line: {recordName}?",
"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",