Show refresh warning when user switch team project in another tab (#1665)

* add team project change warning and trigger

* fix: close popup on submit and always show warning modal in other tab

---------

Co-authored-by: pieterlukasse <pieterlukasse@gmail.com>

Author: tianj7

src/Analysis/SharedUtils/TeamProject/TeamProjectHeader/TeamProjectHeader.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
+import { BroadcastChannel } from 'broadcast-channel';
 import EditIcon from './Icons/EditIcon';
 import isEnterOrSpace from '../../AccessibilityUtils/IsEnterOrSpace';
 import TeamProjectModal from '../TeamProjectModal/TeamProjectModal';
@@ -28,6 +29,26 @@ const TeamProjectHeader = ({ isEditable }) => {
     }
   };
 
+  const channel = new BroadcastChannel('teamProjectChannel');
+
+  const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
+  const showWarningModal = () => {
+    setIsWarningModalOpen(true);
+  };
+
+  useEffect(() => {
+    const handleMessage = () => {
+      showWarningModal();
+    };
+
+    channel.onmessage = handleMessage;
+
+    // Clean up the channel when the component unmounts
+    return () => {
+      channel.close();
+    };
+  }, [channel, showWarningModal]);
+
   const { data, status } = useQuery(
     'teamprojects',
     fetchArboristTeamProjectRoles,
@@ -76,11 +97,26 @@ const TeamProjectHeader = ({ isEditable }) => {
           </button>
         )}
       </div>
+      {isWarningModalOpen && (
+        <TeamProjectModal
+          isModalOpen={isModalOpen}
+          setIsModalOpen={setIsModalOpen}
+          setBannerText={setBannerText}
+          isWarningModalOpen={isWarningModalOpen}
+          setIsWarningModalOpen={setIsWarningModalOpen}
+          data={data}
+          status={status}
+          selectedTeamProject={selectedTeamProject}
+          setSelectedTeamProject={setSelectedTeamProject}
+        />
+      )}
       {isEditable && (
         <TeamProjectModal
           isModalOpen={isModalOpen}
           setIsModalOpen={setIsModalOpen}
           setBannerText={setBannerText}
+          isWarningModalOpen={isWarningModalOpen}
+          setIsWarningModalOpen={setIsWarningModalOpen}
           data={data}
           status={status}
           selectedTeamProject={selectedTeamProject}

src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.jsx

@@ -2,25 +2,42 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import { Button, Modal, Spin } from 'antd';
+import { BroadcastChannel } from 'broadcast-channel';
 import LoadingErrorMessage from '../../LoadingErrorMessage/LoadingErrorMessage';
 import TeamsDropdown from './TeamsDropdown/TeamsDropdown';
 import './TeamProjectModal.css';
 
+
 const TeamProjectModal = ({
   isModalOpen,
   setIsModalOpen,
+  isWarningModalOpen,
+  setIsWarningModalOpen,
   setBannerText,
   data,
   status,
   selectedTeamProject,
   setSelectedTeamProject,
 }) => {
   const history = useHistory();
+
+  const channel = new BroadcastChannel('teamProjectChannel');
+  const sendMessage = (msg) => {
+    channel.postMessage(msg);
+  };
+
   const closeAndUpdateTeamProject = () => {
     setIsModalOpen(false);
+    sendMessage('Team Project Changed!');
     setBannerText(selectedTeamProject);
     localStorage.setItem('teamProject', selectedTeamProject);
   };
+
+  const closeWarningAndRefreshPage = () => {
+    setIsWarningModalOpen(false);
+    window.location.reload();
+  };
+
   const redirectToHomepage = () => {
     history.push('/');
   };
@@ -42,6 +59,32 @@ const TeamProjectModal = ({
       </Modal>
     );
   }
+  if (isWarningModalOpen === true) {
+    return (
+      <Modal
+        open={isWarningModalOpen}
+        className='team-project-modal'
+        title='Team Projects'
+        closable
+        maskClosable={false}
+        keyboard={false}
+        footer={[
+          <Button
+            key='submit'
+            type='primary'
+            disabled={!selectedTeamProject}
+            onClick={() => closeWarningAndRefreshPage()}
+          >
+            Refresh Page
+          </Button>,
+        ]}
+      >
+        <div className='team-project-modal_modal-description'>
+          Team Project has been updated in another tab. Please click refresh page to prevent errors.
+        </div>
+      </Modal>
+    );
+  }
   if (data) {
     if (data.teams.length > 0) {
       return (
@@ -119,6 +162,8 @@ const TeamProjectModal = ({
 TeamProjectModal.propTypes = {
   isModalOpen: PropTypes.bool.isRequired,
   setIsModalOpen: PropTypes.func.isRequired,
+  isWarningModalOpen: PropTypes.bool.isRequired,
+  setIsWarningModalOpen: PropTypes.func.isRequired,
   setBannerText: PropTypes.func.isRequired,
   data: PropTypes.object,
   status: PropTypes.string.isRequired,

src/Analysis/SharedUtils/TeamProject/TeamProjectModal/TeamProjectModal.test.jsx

@@ -13,13 +13,16 @@ const testTeamName = TeamProjectTestData.data.teams[0].teamName;
 const setIsModalOpen = jest.fn();
 const setBannerText = jest.fn();
 const setSelectedTeamProject = jest.fn();
+const setIsWarningModalOpen = jest.fn();
 
 describe('TeamProjectModal', () => {
   test('renders with loading text initially', async () => {
     render(
       <TeamProjectModal
         isModalOpen
         setIsModalOpen={setIsModalOpen}
+        isWarningModalOpen={false}
+        setIsWarningModalOpen={setIsWarningModalOpen}
         setBannerText={setBannerText}
         data={undefined}
         status='loading'
@@ -40,6 +43,8 @@ describe('TeamProjectModal', () => {
       <TeamProjectModal
         isModalOpen
         setIsModalOpen={setIsModalOpen}
+        isWarningModalOpen={false}
+        setIsWarningModalOpen={setIsWarningModalOpen}
         setBannerText={setBannerText}
         data={TeamProjectTestData.data}
         status='success'
@@ -67,6 +72,8 @@ describe('TeamProjectModal', () => {
       <TeamProjectModal
         isModalOpen
         setIsModalOpen={setIsModalOpen}
+        isWarningModalOpen={false}
+        setIsWarningModalOpen={setIsWarningModalOpen}
         setBannerText={setBannerText}
         data={TeamProjectTestData.data}
         status='success'
@@ -93,6 +100,8 @@ describe('TeamProjectModal', () => {
         isModalOpen
         setIsModalOpen={setIsModalOpen}
         setBannerText={setBannerText}
+        isWarningModalOpen={false}
+        setIsWarningModalOpen={setIsWarningModalOpen}
         data={TeamProjectTestData.data}
         status='success'
         selectedTeamProject={testTeamName}
@@ -106,7 +115,25 @@ describe('TeamProjectModal', () => {
     fireEvent.click(submitButton);
 
     // Assert that the modal closes and sets banner text
-    expect(setIsModalOpen).toHaveBeenCalledWith(false);
     expect(setBannerText).toHaveBeenCalledWith(testTeamName);
   });
+
+  test('Render warning modal based ', async () => {
+    render(
+      <TeamProjectModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        setBannerText={setBannerText}
+        isWarningModalOpen
+        setIsWarningModalOpen={setIsWarningModalOpen}
+        data={TeamProjectTestData.data}
+        status='success'
+        selectedTeamProject={testTeamName}
+        setSelectedTeamProject={setSelectedTeamProject}
+      />,
+    );
+
+    // Assert that the modal closes and sets banner text
+    expect(screen.getByText('Refresh Page')).toBeInTheDocument();
+  });
 });