From 079bc38375c364a9786bac83b0f86e118a37484e Mon Sep 17 00:00:00 2001 From: Dmytro-Melnyshyn Date: Wed, 19 Jun 2024 14:29:21 +0300 Subject: [PATCH 1/2] UIEH-1424: Agreements accordion - Add a tooltip for the New and Add buttons. --- CHANGELOG.md | 1 + .../agreements-accordion.js | 54 +++++++++++++++---- translations/ui-eholdings/en.json | 2 + 3 files changed, 46 insertions(+), 11 deletions(-) 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/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", From 9a01cd16c9a7724f115bd8697bd6c158a342f735 Mon Sep 17 00:00:00 2001 From: Dmytro-Melnyshyn Date: Wed, 19 Jun 2024 16:06:17 +0300 Subject: [PATCH 2/2] add tests --- .../agreements-accordion.test.js | 31 +++++++++++++++++++ test/jest/__mock__/stripesCore.mock.js | 6 ++++ 2 files changed, 37 insertions(+) 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 });