ERA-8169: Confirmation modal when navigating away from unsaved changes

.env

@@ -10,6 +10,6 @@ REACT_APP_BASE_MAP_STYLES='mapbox://styles/vjoelm/ciobuir0n0061bdnj1c54oakh?opti
 
 # Feature flags
 REACT_APP_ENABLE_PATROL_NEW_UI=false
-REACT_APP_ENABLE_REPORT_NEW_UI=false
+REACT_APP_ENABLE_REPORT_NEW_UI=true
 REACT_APP_ENABLE_GEOPERMISSION_UI=true
 REACT_APP_ENABLE_EVENT_GEOMETRY=true

src/Link/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { NavigationContext } from '../NavigationContextProvider';
+
+const Link = ({ onClick, ...rest }) => {
+  const {
+    isNavigationBlocked,
+    navigationAttemptBlocked,
+    navigationAttemptResolution,
+    navigationAttemptUnblocked,
+  } = useContext(NavigationContext);
+
+  const linkRef = useRef();
+
+  const [localNavigationAttemptBlocked, setLocalNavigationAttemptBlocked] = useState(false);
+  const [localNavigationUnblocked, setLocalNavigationUnblocked] = useState(false);
+
+  const handleClick = useCallback((event) => {
+    if (!localNavigationUnblocked && isNavigationBlocked) {
+      event.preventDefault();
+
+      setLocalNavigationAttemptBlocked(true);
+      navigationAttemptBlocked();
+    } else {
+      onClick?.(event);
+      setLocalNavigationUnblocked(false);
+    }
+  }, [isNavigationBlocked, localNavigationUnblocked, navigationAttemptBlocked, onClick]);
+
+  useEffect(() => {
+    if (localNavigationAttemptBlocked && navigationAttemptResolution !== null) {
+      if (navigationAttemptResolution) {
+        setLocalNavigationUnblocked(true);
+        setTimeout(() => linkRef.current.click());
+      }
+
+      setLocalNavigationAttemptBlocked(false);
+      navigationAttemptUnblocked();
+    }
+  }, [localNavigationAttemptBlocked, navigationAttemptResolution, navigationAttemptUnblocked]);
+
+  return <RouterLink onClick={handleClick} ref={linkRef} {...rest} />;
+};
+
+export default Link;

src/Link/index.test.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Link from './';
+import { NavigationContext } from '../NavigationContextProvider';
+import NavigationWrapper from '../__test-helpers/navigationWrapper';
+
+describe('Link', () => {
+  const LocationDisplay = () => {
+    const location = useLocation();
+
+    return <div data-testid="location-display">{location.pathname}</div>;
+  };
+
+  let navigationAttemptBlocked = jest.fn(), navigationAttemptUnblocked = jest.fn();
+
+  test('navigates to the link route when user clicks it', async () => {
+    render(<NavigationWrapper>
+      <Link to="/route" />
+
+      <LocationDisplay />
+    </NavigationWrapper>);
+
+    const link = await screen.findByRole('link');
+    userEvent.click(link);
+
+    expect((await screen.findByTestId('location-display'))).toHaveTextContent('/route');
+  });
+
+  test('blocks a navigation attempt when navigation is blocked', async () => {
+    render(<NavigationWrapper>
+      <NavigationContext.Provider value={{
+        isNavigationBlocked: true,
+        navigationAttemptBlocked,
+        navigationAttemptResolution: null,
+        navigationAttemptUnblocked,
+      }}>
+        <Link to="/route" />
+
+        <LocationDisplay />
+      </NavigationContext.Provider>
+    </NavigationWrapper>);
+
+    const link = await screen.findByRole('link');
+    userEvent.click(link);
+
+    expect((await screen.findByTestId('location-display'))).toHaveTextContent('/');
+  });
+
+  test('blocks a navigation attempt and unblocks it after when the resolution is true', async () => {
+    render(<NavigationWrapper>
+      <NavigationContext.Provider value={{
+        isNavigationBlocked: true,
+        navigationAttemptBlocked,
+        navigationAttemptResolution: true,
+        navigationAttemptUnblocked,
+      }}>
+        <Link to="/route" />
+
+        <LocationDisplay />
+      </NavigationContext.Provider>
+    </NavigationWrapper>);
+
+    const link = await screen.findByRole('link');
+    userEvent.click(link);
+
+    expect((await screen.findByTestId('location-display'))).toHaveTextContent('/');
+
+    await waitFor(async () => {
+      expect((await screen.findByTestId('location-display'))).toHaveTextContent('/route');
+    });
+  });
+});

src/NavigationContextProvider/index.js

@@ -1,11 +1,59 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useCallback, useState } from 'react';
 
 export const NavigationContext = createContext();
 
 const NavigationContextProvider = ({ children }) => {
+  const [isNavigationAttemptPending, setIsNavigationAttemptPending] = useState(false);
+  const [isNavigationBlocked, setIsNavigationBlocked] = useState(false);
+  const [navigationAttemptResolution, setNavigationAttemptResolution] = useState(null);
   const [navigationData, setNavigationData] = useState({});
 
-  const navigationContextValue = { navigationData, setNavigationData };
+  const blockNavigation = useCallback(() => setIsNavigationBlocked(true), []);
+
+  const cancelNavigationAttempt = useCallback(() => {
+    if (isNavigationAttemptPending) {
+      setNavigationAttemptResolution(false);
+    }
+  }, [isNavigationAttemptPending]);
+
+  const continueNavigationAttempt = useCallback(() => {
+    if (isNavigationAttemptPending) {
+      setNavigationAttemptResolution(true);
+    }
+  }, [isNavigationAttemptPending]);
+
+  const navigationAttemptBlocked = useCallback(() => {
+    if (isNavigationBlocked) {
+      setIsNavigationAttemptPending(true);
+    }
+  }, [isNavigationBlocked]);
+
+  const navigationAttemptUnblocked = useCallback(() => {
+    setIsNavigationAttemptPending(false);
+    setNavigationAttemptResolution(null);
+  }, []);
+
+  const unblockNavigation = useCallback(() => {
+    setIsNavigationAttemptPending(false);
+    setIsNavigationBlocked(false);
+    setNavigationAttemptResolution(null);
+  }, []);
+
+  const navigationContextValue = {
+    isNavigationAttemptPending,
+    isNavigationBlocked,
+    navigationAttemptResolution,
+    navigationData,
+
+    blockNavigation,
+    cancelNavigationAttempt,
+    continueNavigationAttempt,
+    navigationAttemptBlocked,
+    navigationAttemptUnblocked,
+    unblockNavigation,
+
+    setNavigationData,
+  };
 
   return <NavigationContext.Provider value={navigationContextValue}>
     {children}

src/NavigationContextProvider/index.test.js

@@ -23,4 +23,128 @@ describe('NavigationContextProvider', () => {
 
     expect((await screen.findByText('"Navigation data!"'))).toBeDefined();
   });
+
+  test('blocks the navigation', async () => {
+    const ChildComponent = () => {
+      const { blockNavigation, isNavigationBlocked } = useContext(NavigationContext);
+
+      useEffect(() => {
+        blockNavigation();
+      }, [blockNavigation]);
+
+      return <p>{`Navigation blocked: ${isNavigationBlocked}`}</p>;
+    };
+
+    render(
+      <NavigationContextProvider>
+        <ChildComponent />
+      </NavigationContextProvider>
+    );
+
+    expect((await screen.findByText('Navigation blocked: true'))).toBeDefined();
+  });
+
+  test('unblocks the navigation', async () => {
+    const ChildComponent = () => {
+      const { blockNavigation, isNavigationBlocked, unblockNavigation } = useContext(NavigationContext);
+
+      useEffect(() => {
+        blockNavigation();
+      }, [blockNavigation]);
+
+      useEffect(() => {
+        if (isNavigationBlocked) {
+          unblockNavigation();
+        }
+      }, [isNavigationBlocked, unblockNavigation]);
+
+      return <p>{`Navigation blocked: ${isNavigationBlocked}`}</p>;
+    };
+
+    render(
+      <NavigationContextProvider>
+        <ChildComponent />
+      </NavigationContextProvider>
+    );
+
+    expect((await screen.findByText('Navigation blocked: false'))).toBeDefined();
+  });
+
+  test('resolves to true when continuing the navigation of a blocked attempt', async () => {
+    const ChildComponent = () => {
+      const {
+        blockNavigation,
+        continueNavigationAttempt,
+        isNavigationAttemptPending,
+        isNavigationBlocked,
+        navigationAttemptBlocked,
+        navigationAttemptResolution,
+      } = useContext(NavigationContext);
+
+      useEffect(() => {
+        blockNavigation();
+      }, [blockNavigation]);
+
+      useEffect(() => {
+        if (isNavigationBlocked) {
+          navigationAttemptBlocked();
+        }
+      }, [isNavigationBlocked, navigationAttemptBlocked]);
+
+      useEffect(() => {
+        if (isNavigationAttemptPending) {
+          continueNavigationAttempt();
+        }
+      }, [continueNavigationAttempt, isNavigationAttemptPending]);
+
+      return <p>{`Navigation attempt resolution: ${navigationAttemptResolution}`}</p>;
+    };
+
+    render(
+      <NavigationContextProvider>
+        <ChildComponent />
+      </NavigationContextProvider>
+    );
+
+    expect((await screen.findByText('Navigation attempt resolution: true'))).toBeDefined();
+  });
+
+  test('resolves to false when canceling the navigation of a blocked attempt', async () => {
+    const ChildComponent = () => {
+      const {
+        blockNavigation,
+        cancelNavigationAttempt,
+        isNavigationAttemptPending,
+        isNavigationBlocked,
+        navigationAttemptBlocked,
+        navigationAttemptResolution,
+      } = useContext(NavigationContext);
+
+      useEffect(() => {
+        blockNavigation();
+      }, [blockNavigation]);
+
+      useEffect(() => {
+        if (isNavigationBlocked) {
+          navigationAttemptBlocked();
+        }
+      }, [isNavigationBlocked, navigationAttemptBlocked]);
+
+      useEffect(() => {
+        if (isNavigationAttemptPending) {
+          cancelNavigationAttempt();
+        }
+      }, [cancelNavigationAttempt, isNavigationAttemptPending]);
+
+      return <p>{`Navigation attempt resolution: ${navigationAttemptResolution}`}</p>;
+    };
+
+    render(
+      <NavigationContextProvider>
+        <ChildComponent />
+      </NavigationContextProvider>
+    );
+
+    expect((await screen.findByText('Navigation attempt resolution: false'))).toBeDefined();
+  });
 });

src/NavigationPromptModal/index.js

@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+import Button from 'react-bootstrap/Button';
+import Modal from 'react-bootstrap/Modal';
+import PropTypes from 'prop-types';
+
+import { ReactComponent as TrashCanIcon } from '../common/images/icons/trash-can.svg';
+
+import useBlockNavigation from '../hooks/useBlockNavigation';
+
+import styles from './styles.module.scss';
+
+const NavigationPromptModal = ({
+  cancelNavigationButtonText,
+  continueNavigationButtonText,
+  description,
+  title,
+  when,
+  ...rest
+}) => {
+  const { cancelNavigationAttempt, continueNavigationAttempt, isNavigationAttemptPending } = useBlockNavigation(when);
+
+  return <Modal {...rest} onHide={cancelNavigationAttempt} show={isNavigationAttemptPending}>
+    <Modal.Header closeButton>
+      <Modal.Title>{title}</Modal.Title>
+    </Modal.Header>
+
+    <Modal.Body>{description}</Modal.Body>
+
+    <Modal.Footer className={styles.footer}>
+      <Button className={styles.cancelButton} onClick={cancelNavigationAttempt} variant="secondary">
+        {cancelNavigationButtonText}
+      </Button>
+
+      <Button
+        className={styles.continueButton}
+        onClick={continueNavigationAttempt}
+        onFocus={(event) => event.target.blur()}
+        variant="primary"
+      >
+        <TrashCanIcon />
+        {continueNavigationButtonText}
+      </Button>
+    </Modal.Footer>
+  </Modal>;
+};
+
+NavigationPromptModal.defaultProps = {
+  cancelNavigationButtonText: 'Cancel',
+  continueNavigationButtonText: 'Discard',
+  description: 'Would you like to discard changes?',
+  title: 'Discard changes',
+};
+
+NavigationPromptModal.propTypes = {
+  cancelNavigationButtonText: PropTypes.string,
+  continueNavigationButtonText: PropTypes.string,
+  description: PropTypes.string,
+  title: PropTypes.string,
+  when: PropTypes.bool.isRequired,
+};
+
+export default memo(NavigationPromptModal);