From dd5211d00e5d3450e9a94ac32c95c178950e3d0b Mon Sep 17 00:00:00 2001 From: Azizjon Nurov Date: Mon, 23 Dec 2024 18:27:48 +0500 Subject: [PATCH] UIOR-1365 Close actions dropdown before navigation to another page (#1689) * Solution attempt * Wrap onReceive with Promise * Add change log * Write tests for POLine and Order receive buttons * Update change log ticket number * Add small comment for promise usage * Improve goToReceive formatting --- CHANGELOG.md | 2 ++ .../Details/OrderLineDetails.js | 8 ++++++++ src/components/POLine/POLine.js | 8 ++++++++ src/components/POLine/POLine.test.js | 15 ++++++++++++++ .../POLineActionMenu/POLineActionMenu.js | 9 ++++++++- .../POLineActionMenu/POLineActionMenu.test.js | 20 +++++++++++++++++++ src/components/POLine/POLineView.js | 4 ++++ .../PurchaseOrder/getPOActionMenu.js | 5 ++++- 8 files changed, 69 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8dfe34251..b44d478f6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## 7.1.0 (IN PROGRESS) +* Close actions dropdown before navigation to another page. Refs UIOR-1365. + ## [7.0.3](https://github.com/folio-org/ui-orders/tree/v7.0.3) (2024-12-06) [Full Changelog](https://github.com/folio-org/ui-orders/compare/v7.0.2...v7.0.3) diff --git a/src/OrderLinesList/Details/OrderLineDetails.js b/src/OrderLinesList/Details/OrderLineDetails.js index fe832be21..6768b412f 100644 --- a/src/OrderLinesList/Details/OrderLineDetails.js +++ b/src/OrderLinesList/Details/OrderLineDetails.js @@ -92,6 +92,13 @@ const OrderLineDetails = ({ [lineId, order], ); + const goToReceive = useCallback(() => { + history.push({ + pathname: '/receiving', + search: `qindex=poLine.poLineNumber&query=${line?.poLineNumber}`, + }); + }, [history, line?.poLineNumber]); + const deleteLine = useCallback( () => { const lineNumber = line.poLineNumber; @@ -206,6 +213,7 @@ const OrderLineDetails = ({ materialTypes={materialTypes} funds={funds} goToOrderDetails={goToOrderDetails} + goToReceive={goToReceive} deleteLine={deleteLine} cancelLine={cancelLine} tagsToggle={toggleTagsPane} diff --git a/src/components/POLine/POLine.js b/src/components/POLine/POLine.js index ea73d569d..a6c4a5085 100644 --- a/src/components/POLine/POLine.js +++ b/src/components/POLine/POLine.js @@ -93,6 +93,13 @@ function POLine({ [orderId], ); + const goToReceive = useCallback(() => { + history.push({ + pathname: '/receiving', + search: `qindex=poLine.poLineNumber&query=${line?.poLineNumber}`, + }); + }, [history, line?.poLineNumber]); + const deleteLine = useCallback( () => { const lineNumber = line?.poLineNumber; @@ -211,6 +218,7 @@ function POLine({ locations={locations} poURL={poURL} funds={funds} + goToReceive={goToReceive} deleteLine={deleteLine} cancelLine={cancelLine} tagsToggle={toggleTagsPane} diff --git a/src/components/POLine/POLine.test.js b/src/components/POLine/POLine.test.js index c48246b0c..7d1ab1bd6 100644 --- a/src/components/POLine/POLine.test.js +++ b/src/components/POLine/POLine.test.js @@ -72,6 +72,10 @@ const defaultProps = { }, }, poURL: '', + receiving: { + pathname: '/receiving', + search: `qindex=poLine.poLineNumber&query=${orderLine.poLineNumber}`, + }, resources: {}, }; @@ -128,6 +132,17 @@ describe('POLine actions', () => { }); }); + it('should go to receive', async () => { + renderPOLine(); + + await waitFor(() => POLineView.mock.calls[0][0].goToReceive()); + + expect(history.push).toHaveBeenCalledWith({ + pathname: defaultProps.receiving.pathname, + search: defaultProps.receiving.search, + }); + }); + it('should delete POLine', async () => { renderPOLine(); diff --git a/src/components/POLine/POLineActionMenu/POLineActionMenu.js b/src/components/POLine/POLineActionMenu/POLineActionMenu.js index 206ed60a6..5418a1f81 100644 --- a/src/components/POLine/POLineActionMenu/POLineActionMenu.js +++ b/src/components/POLine/POLineActionMenu/POLineActionMenu.js @@ -28,6 +28,7 @@ export const POLineActionMenu = ({ onDeleteLine, onEditLine, onNavigateToOrder, + onReceive, onPrintLine, onPrintOrder, onReexport, @@ -56,6 +57,11 @@ export const POLineActionMenu = ({ onNavigateToOrder(); }, [onNavigateToOrder, onToggle]); + const onClickReceive = useCallback(() => { + onToggle(); + Promise.resolve().then(() => onReceive()); // Delay to ensure toggle is complete before redirection + }, [onReceive, onToggle]); + const onClickReexport = useCallback(() => { onToggle(); onReexport(); @@ -137,7 +143,7 @@ export const POLineActionMenu = ({ data-testid="line-details-receive-action" buttonStyle="dropdownItem" data-test-line-receive-button - to={`/receiving?qindex=poLine.poLineNumber&query=${line.poLineNumber}`} + onClick={onClickReceive} > @@ -232,6 +238,7 @@ POLineActionMenu.propTypes = { onDeleteLine: PropTypes.func.isRequired, onEditLine: PropTypes.func.isRequired, onNavigateToOrder: PropTypes.func, + onReceive: PropTypes.func, onPrintLine: PropTypes.func.isRequired, onPrintOrder: PropTypes.func.isRequired, onReexport: PropTypes.func.isRequired, diff --git a/src/components/POLine/POLineActionMenu/POLineActionMenu.test.js b/src/components/POLine/POLineActionMenu/POLineActionMenu.test.js index b0447493f..a06bd686d 100644 --- a/src/components/POLine/POLineActionMenu/POLineActionMenu.test.js +++ b/src/components/POLine/POLineActionMenu/POLineActionMenu.test.js @@ -2,6 +2,7 @@ import { MemoryRouter } from 'react-router-dom'; import user from '@folio/jest-config-stripes/testing-library/user-event'; import { act, render, screen } from '@folio/jest-config-stripes/testing-library/react'; +import { RECEIPT_STATUS } from '@folio/stripes-acq-components'; import { order, orderLine } from 'fixtures'; import { WORKFLOW_STATUS } from '../../../common/constants'; @@ -21,6 +22,7 @@ const defaultProps = { onEditLine: jest.fn(), onPrintLine: jest.fn(), onPrintOrder: jest.fn(), + onReceive: jest.fn(), onReexport: jest.fn(), onToggle: jest.fn(), restrictions: {}, @@ -44,6 +46,7 @@ describe('POLineActionMenu', () => { defaultProps.onEditLine.mockClear(); defaultProps.onPrintLine.mockClear(); defaultProps.onPrintOrder.mockClear(); + defaultProps.onReceive.mockClear(); defaultProps.onReexport.mockClear(); defaultProps.onToggle.mockClear(); defaultProps.toggleForceVisibility.mockClear(); @@ -75,6 +78,23 @@ describe('POLineActionMenu', () => { expect(defaultProps.onChangeInstance).toHaveBeenCalled(); }); + it('should call \'onReceive\' when \'Receive\' action was triggered', async () => { + renderPOLineActionMenu({ + order: { + ...order, + workflowStatus: WORKFLOW_STATUS.open, + }, + line: { + ...orderLine, + receiptStatus: RECEIPT_STATUS.fullyReceived, + }, + }); + + await act(async () => user.click(screen.getByTestId('line-details-receive-action'))); + + expect(defaultProps.onReceive).toHaveBeenCalled(); + }); + it('should call \'onReexport\' when \'Reexport\' action was triggered', async () => { renderPOLineActionMenu({ order: { diff --git a/src/components/POLine/POLineView.js b/src/components/POLine/POLineView.js index 759cb77e5..9ee7b49a0 100644 --- a/src/components/POLine/POLineView.js +++ b/src/components/POLine/POLineView.js @@ -127,6 +127,7 @@ const POLineView = ({ deleteLine, editable, goToOrderDetails, + goToReceive, history, line, location, @@ -265,6 +266,7 @@ const POLineView = ({ onDeleteLine={toggleConfirmDelete} onEditLine={onEditPOLine} onNavigateToOrder={goToOrderDetails} + onReceive={goToReceive} onPrintLine={togglePrintLineModal} onPrintOrder={togglePrintOrderModal} onReexport={toggleOrderLineReexportModal} @@ -274,6 +276,7 @@ const POLineView = ({ }, [ editable, goToOrderDetails, + goToReceive, hiddenFields, isCancelable, isRestrictionsLoading, @@ -646,6 +649,7 @@ POLineView.propTypes = { onClose: PropTypes.func, editable: PropTypes.bool, goToOrderDetails: PropTypes.func, + goToReceive: PropTypes.func, deleteLine: PropTypes.func, cancelLine: PropTypes.func, tagsToggle: PropTypes.func.isRequired, diff --git a/src/components/PurchaseOrder/getPOActionMenu.js b/src/components/PurchaseOrder/getPOActionMenu.js index 45b800997..1f2e735a8 100644 --- a/src/components/PurchaseOrder/getPOActionMenu.js +++ b/src/components/PurchaseOrder/getPOActionMenu.js @@ -152,7 +152,10 @@ export function getPOActionMenu({ buttonStyle="dropdownItem" data-test-receiving-button data-testid="order-receiving-button" - onClick={clickReceive} + onClick={() => { + onToggle(); + Promise.resolve().then(() => clickReceive()); // Delay to ensure toggle is complete before redirection + }} >