Merge pull request #457 from bcgov/DAP-1149-track-progress

DAP-1149: Track progress for leave page modal

desktop/src/renderer/src/App.tsx

@@ -15,17 +15,30 @@ import {
 type AppContext = {
   accessToken?: string;
   currentPath: string;
-  setCurrentPath: React.Dispatch<React.SetStateAction<string>>;
+  setCurrentPath:
+    | React.Dispatch<React.SetStateAction<string>>
+    | ((value: string) => void);
+  setProgressMade:
+    | React.Dispatch<React.SetStateAction<boolean>>
+    | ((value: boolean) => void);
 };
 
-export const Context = createContext<AppContext | undefined>(undefined);
+export const Context = createContext<AppContext>({
+  currentPath: "/",
+  setCurrentPath: () => {},
+  setProgressMade: () => {},
+});
 
 function App(): JSX.Element {
   const [api] = useState(window.api); // Preload scripts
   const [showVPNPopup, setShowVPNPopup] = useState<boolean | null>(null);
   const [leavePageModalOpen, setLeavePageModalOpen] = useState(false);
   const [currentPath, setCurrentPath] = useState("/");
 
+  // Track when progress has been made in the app so we can warn the
+  // user about navigating away and losing progress.
+  const [progressMade, setProgressMade] = useState(false);
+
   // Authentication state
   const [accessToken, setAccessToken] = useState<string | undefined>(undefined);
   const [idToken, setIdToken] = useState<string | undefined>(undefined);
@@ -93,6 +106,7 @@ function App(): JSX.Element {
           idToken={idToken}
           currentPath={currentPath}
           setCurrentPath={setCurrentPath}
+          progressMade={progressMade}
         />
       </Grid>
       <Grid size={10}>
@@ -102,7 +116,9 @@ function App(): JSX.Element {
             <Button onClick={() => setLeavePageModalOpen(true)} />
           }
         />
-        <Context.Provider value={{ accessToken, currentPath, setCurrentPath }}>
+        <Context.Provider
+          value={{ accessToken, currentPath, setCurrentPath, setProgressMade }}
+        >
           <Box>
             {currentPath === "/" && <HomePage />}
             {currentPath === "/file-list" && <FileListPage />}

desktop/src/renderer/src/assets/main.css

@@ -15,6 +15,7 @@
 
 .MuiDataGrid-main {
 	border: 1px solid var(--data-grid-border);
+	min-height: 130px;
 }
 
 .MuiDataGrid-columnSeparator {

desktop/src/renderer/src/components/SideNav.tsx

@@ -27,13 +27,15 @@ type Props = {
   idToken: string | undefined;
   currentPath: string;
   setCurrentPath: React.Dispatch<React.SetStateAction<string>>;
+  progressMade: boolean;
 };
 
 export const SideNav = ({
   accessToken,
   idToken,
   currentPath,
   setCurrentPath,
+  progressMade,
 }: Props) => {
   const [leavePageModalOpen, setLeavePageModalOpen] = useState(false);
   const [newPagePath, setNewPagePath] = useState("/");
@@ -44,13 +46,16 @@ export const SideNav = ({
   };
 
   const handleSelection = (path: string) => {
+    // Ignore if path is the currentpath or a sub path.
     if (currentPath === path || (currentPath.startsWith(path) && path !== "/"))
       return;
-    if (currentPath === "/") {
-      setCurrentPath(path);
-    } else {
+    if (progressMade && currentPath !== "/") {
+      // Progress has been made, display leave page modal.
       setNewPagePath(path);
       setLeavePageModalOpen(true);
+    } else {
+      // Progress has not been made, navigate to path.
+      setCurrentPath(path);
     }
   };
 

desktop/src/renderer/src/components/transfer/lan-views/LanSubmissionAgreementView.tsx

@@ -13,7 +13,9 @@ type Props = {
   application: string;
   onNextPress: () => void;
   onBackPress: () => void;
-  setCurrentPath?: React.Dispatch<React.SetStateAction<string>>;
+  setCurrentPath:
+    | React.Dispatch<React.SetStateAction<string>>
+    | ((value: string) => void);
 };
 
 export const LanSubmissionAgreementView = ({
@@ -78,7 +80,7 @@ export const LanSubmissionAgreementView = ({
   };
 
   const handleConfirmDecline = () => {
-    if (setCurrentPath) setCurrentPath("/");
+    setCurrentPath("/");
   };
 
   return (

desktop/src/renderer/src/pages/FileList.tsx

@@ -18,7 +18,7 @@ export const FileListPage = () => {
   const [continueModalIsOpen, setContinueModalIsOpen] =
     useState<boolean>(false);
 
-  const { accessToken, setCurrentPath } = useContext(Context) ?? {};
+  const { accessToken, setCurrentPath, setProgressMade } = useContext(Context);
   const authenticated = !!accessToken;
 
   const theme = useTheme();
@@ -130,6 +130,10 @@ export const FileListPage = () => {
     );
     const hasFolders = folders.length > 0;
 
+    // Update progress when folders are uploaded.
+    setProgressMade(hasFolders);
+
+    // Enable continue button when folders are processed.
     setContinueButtonIsEnabled(
       allFoldersProcessed && hasFolders && authenticated
     );

desktop/src/renderer/src/pages/SendRecords.tsx

@@ -43,8 +43,7 @@ export const SendRecordsPage = () => {
               </Stack>
               <Button
                 onPress={() => {
-                  if (setCurrentPath)
-                    setCurrentPath("/send-records/lan/instructions");
+                  setCurrentPath("/send-records/lan/instructions");
                 }}
                 style={{ width: "fit-content" }}
               >

desktop/src/renderer/src/pages/transfers/LanInstructions.tsx

@@ -9,7 +9,7 @@ export const LanInstructionsPage = () => {
   const { setCurrentPath } = useContext(Context) ?? {};
 
   const goToTransferPage = () => {
-    if (setCurrentPath) setCurrentPath("/send-records/lan");
+    setCurrentPath("/send-records/lan");
   };
 
   const NoteBlock = () => {

desktop/src/renderer/src/pages/transfers/LanTransfer.tsx

@@ -40,7 +40,7 @@ type FileBufferObj = {
 export const LanTransferPage = () => {
   const [api] = useState(window.api); // Preload scripts
 
-  const { accessToken, setCurrentPath } = useContext(Context) ?? {};
+  const { accessToken, setCurrentPath, setProgressMade } = useContext(Context);
 
   const [currentViewIndex, setCurrentViewIndex] = useState(0);
   const [fileList, setFileList] = useState<File | null | undefined>(undefined);
@@ -516,9 +516,15 @@ export const LanTransferPage = () => {
   };
 
   useEffect(() => {
+    setProgressMade(!!fileList);
     if (!fileList) {
+      // Clear state.
+      setAccession(null);
+      setApplication(null);
+      setConfirmAccAppChecked(false);
       setFolders([]);
       setMetadata({});
+      return;
     }
     parseFileList();
   }, [fileList]);
@@ -649,7 +655,7 @@ export const LanTransferPage = () => {
 
   // Send to home on completion
   const handleCompletion = () => {
-    if (setCurrentPath) setCurrentPath("/");
+    setCurrentPath("/");
   };
 
   return (