Added global unsaved status, implemented a popup before unsaved refresh or tab close

Author: justinnas

app/front-end/src/features/editor/components/editorView/editorView.tsx

@@ -57,7 +57,7 @@ export const EditorView: React.FC = () => {
 
   const { connected } = useSessionContext();
   const { file, fileContent, filePagination, fileStateUpdate } = useWorkspaceContext();
-  const { blocked, blockedStateUpdate } = useStatusContext();
+  const { blocked, blockedStateUpdate, unsaved, unsavedStateUpdate } = useStatusContext();
   const ref = useGridApiRef();
 
   const handleSave = async () => {
@@ -125,6 +125,11 @@ export const EditorView: React.FC = () => {
     }
   };
 
+  const onCellEditStart = () => {
+    unsavedStateUpdate(true);
+    console.log(unsaved);
+  };
+
   const getWorkspaceFile = useCallback(async () => {
     if (!file.id) {
       setFileContentResponse({ totalRows: 0, header: [], rows: [], page: 0 });
@@ -196,6 +201,19 @@ export const EditorView: React.FC = () => {
     );
   }, [fileContentResponse, fileContent.aggregations]);
 
+  // Browser tab close/refresh warning if there are unsaved changes effect
+  useEffect(() => {
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      if (unsaved) event.preventDefault();
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [unsaved]);
+
   return (
     <DataGrid
       sx={{ height: '100%', border: 'none' }}
@@ -229,6 +247,7 @@ export const EditorView: React.FC = () => {
         toolbar: {},
       }}
       apiRef={ref}
+      onCellEditStart={onCellEditStart}
     />
   );
 };

app/front-end/src/stores/statusContextProvider.tsx

@@ -4,11 +4,15 @@ import React, { createContext, useEffect, useState } from 'react';
 export interface StatusContextProps {
   blocked: boolean;
   blockedStateUpdate: (blocked: boolean) => void;
+  unsaved: boolean;
+  unsavedStateUpdate: (isUnsaved: boolean) => void;
 }
 
 export const StatusContext = createContext<StatusContextProps>({
   blocked: false,
   blockedStateUpdate: () => {},
+  unsaved: false,
+  unsavedStateUpdate: () => {},
 });
 
 interface Props {
@@ -22,6 +26,12 @@ export const StatusContextProvider: React.FC<Props> = ({ children }) => {
     setBlocked(blocked);
   };
 
+  const [unsaved, setUnsaved] = useState<boolean>(false);
+
+  const unsavedStateUpdate = (isUnsaved: boolean) => {
+    setUnsaved(isUnsaved);
+  };
+
   const { connected } = useSessionContext();
 
   useEffect(() => {
@@ -36,6 +46,8 @@ export const StatusContextProvider: React.FC<Props> = ({ children }) => {
   const StatusContextValue: StatusContextProps = {
     blocked,
     blockedStateUpdate,
+    unsaved,
+    unsavedStateUpdate,
   };
 
   return <StatusContext.Provider value={StatusContextValue}>{children}</StatusContext.Provider>;