[OSDEV-1697] Redirect to the main page from close dialog button

doc/release/RELEASE-NOTES.md

@@ -61,6 +61,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html
     All other traffic will be redirected to the React application.
 
 ### Bugfix
+* [OSDEV-1697](https://opensupplyhub.atlassian.net/browse/OSDEV-1697) - Added a redirect to the main page upon closing the SLC modal window to prevent the creation of multiple moderation events.
 * [OSDEV-1695](https://opensupplyhub.atlassian.net/browse/OSDEV-1695) - [SLC] Enabled the claim button for updated production locations when a moderation event has a pending status. Disabled claim button explicitly if production location has pending claim status.
 * [OSDEV-1701](https://opensupplyhub.atlassian.net/browse/OSDEV-1701) - Refactored "Go Back" button in production location info page.
 

src/react/src/__tests__/components/ProductionLocationDialog.test.js

@@ -1,15 +1,10 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { BrowserRouter as Router, useHistory } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import ProductionLocationDialog from '../../components/Contribute/ProductionLocationDialog';
 import ProductionLocationDialogCloseButton from '../../components/Contribute/ProductionLocationDialogCloseButton';
+import history from '../../util/history';
 
-jest.mock('react-router-dom', () => ({
-    ...jest.requireActual('react-router-dom'),
-    useHistory: jest.fn(),
-}));
-
-const mockHistoryPush = jest.fn();
 
 describe('ProductionLocationDialog', () => {
     const defaultProps = {
@@ -57,12 +52,6 @@ describe('ProductionLocationDialog', () => {
         }
     }
 
-    beforeEach(() => {
-        useHistory.mockReturnValue({
-            push: mockHistoryPush,
-        });
-    });
-
     test('renders dialog content', () => {
         render(
             <Router>
@@ -149,33 +138,28 @@ describe('ProductionLocationDialog', () => {
         expect(claimButton).toHaveAttribute('href', `/facilities/${defaultProps.osID}/claim`);
     })
 
-    test('closes ProductionLocationDialog when close button is clicked', () => {
-        const handleShowMock = jest.fn();
-        const { unmount } = render(
-            <ProductionLocationDialog
-                classes={{}}
-                data={defaultProps.data}
-                osID={defaultProps.osID}
-                moderationStatus={defaultProps.moderationStatus}
-                isOpen
-                handleShow={handleShowMock}
-            >
-                <ProductionLocationDialogCloseButton
-                    handleShow={handleShowMock}
-                    isMobile={false}
-                />
-            </ProductionLocationDialog>
+    test('redirect to the main page when clicking close button', () => {
+        render(
+            <Router history={history}>
+                <ProductionLocationDialog
+                    classes={{}}
+                    data={defaultProps.data}
+                    osID={defaultProps.osID}
+                    moderationStatus={defaultProps.moderationStatus}
+                    isOpen
+                >
+                    <ProductionLocationDialogCloseButton
+                        isMobile={false}
+                    />
+                </ProductionLocationDialog>
+            </Router>
         );
 
         expect(screen.getByText(/Continue to Claim/i)).toBeInTheDocument();
-
-        const closeButton = screen.getByRole('button', { name: /close/i });
-        fireEvent.click(closeButton);
-
-        expect(handleShowMock).toHaveBeenCalledWith(false);
 
-        unmount();
+        const closeButton = screen.getByRole('button', { name: /close/i });
 
-        expect(screen.queryByText(/Continue to Claim/i)).not.toBeInTheDocument();
+        fireEvent.click(closeButton);
+        expect(history.location.pathname).toBe('/');
     });
 });

src/react/src/components/Contribute/ProductionLocationDialog.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { func, number, object, string } from 'prop-types';
+import { number, object, string } from 'prop-types';
 import { withStyles, withTheme } from '@material-ui/core/styles';
 import { useHistory } from 'react-router-dom';
 import {
@@ -27,6 +27,7 @@ import ProductionLocationDialogFields from './ProductionLocationDialogFields';
 import {
     mainRoute,
     searchByNameAndAddressResultRoute,
+    contributeProductionLocationRoute,
     MODERATION_STATUSES_ENUM,
     PRODUCTION_LOCATION_CLAIM_STATUSES_ENUM,
     EMPTY_PLACEHOLDER,
@@ -87,7 +88,6 @@ const ProductionLocationDialog = ({
     data,
     osID,
     moderationStatus,
-    handleShow,
     claimStatus,
 }) => {
     const history = useHistory();
@@ -96,6 +96,20 @@ const ProductionLocationDialog = ({
     const getIsMobileMemoized = useMemo(() => getIsMobile(innerWidth), [
         innerWidth,
     ]);
+
+    // Override browser's go back button when modal dialog is open
+    useEffect(() => {
+        const cleanupListener = history.listen((location, action) => {
+            if (action === 'POP') {
+                history.push(contributeProductionLocationRoute);
+            }
+        });
+
+        return () => {
+            cleanupListener();
+        };
+    }, [history]);
+
     useEffect(() => {
         setIsMobile(getIsMobileMemoized);
     }, [getIsMobileMemoized]);
@@ -144,7 +158,7 @@ const ProductionLocationDialog = ({
         <>
             {isMobile ? (
                 <ProductionLocationDialogCloseButton
-                    handleShow={handleShow}
+                    handleGoToMainPage={handleGoToMainPage}
                     isMobile={isMobile}
                 />
             ) : null}
@@ -168,7 +182,7 @@ const ProductionLocationDialog = ({
                         </p>
                         {!isMobile ? (
                             <ProductionLocationDialogCloseButton
-                                handleShow={handleShow}
+                                handleGoToMainPage={handleGoToMainPage}
                                 isMobile={isMobile}
                             />
                         ) : null}
@@ -311,7 +325,6 @@ ProductionLocationDialog.propTypes = {
     data: object.isRequired,
     osID: string,
     moderationStatus: string.isRequired,
-    handleShow: func.isRequired,
     classes: object.isRequired,
     theme: object.isRequired,
     innerWidth: number.isRequired,

src/react/src/components/Contribute/ProductionLocationDialogCloseButton.jsx

@@ -8,22 +8,22 @@ import { makeProductionLocationCloseButtonStyles } from '../../util/styles';
 const ProductionLocationDialogCloseButton = ({
     isMobile,
     classes,
-    handleShow,
+    handleGoToMainPage,
 }) => (
     <>
         {isMobile ? (
             <IconButton
                 aria-label="Close"
                 className="mobile-dialog-close-button"
-                onClick={() => handleShow(false)}
+                onClick={handleGoToMainPage}
             >
                 <CloseIcon />
             </IconButton>
         ) : (
             <IconButton
                 aria-label="Close"
                 className={classes.desktopCloseButton}
-                onClick={() => handleShow(false)}
+                onClick={handleGoToMainPage}
             >
                 <CloseIcon />
             </IconButton>
@@ -32,7 +32,7 @@ const ProductionLocationDialogCloseButton = ({
 );
 
 ProductionLocationDialogCloseButton.propTypes = {
-    handleShow: func.isRequired,
+    handleGoToMainPage: func.isRequired,
     isMobile: bool.isRequired,
     classes: object.isRequired,
 };

src/react/src/components/Contribute/ProductionLocationInfo.jsx

@@ -769,7 +769,6 @@ const ProductionLocationInfo = ({
                         singleModerationEventItem?.cleaned_data
                     }
                     osID={osID || singleModerationEventItem?.os_id}
-                    handleShow={setShowProductionLocationDialog}
                     innerWidth={innerWidth}
                     moderationStatus={
                         pendingModerationEventData?.status ||