feat: prevent user from leaving studio page when there are unsaved changes

web/src/components/tree.tsx

@@ -33,7 +33,7 @@ const TreeView = ({
     <ul
       style={{
         listStyle: 'none',
-        padding: '0.25rem 1.25rem',
+        padding: '0.25rem 0.85rem',
         width: 'max-content'
       }}
     >

web/src/containers/Studio/editor.tsx

@@ -39,6 +39,8 @@ import FilePathInputModal from '../../components/filePathInputModal'
 import BootstrapSnackbar, { AlertSeverityType } from '../../components/snackbar'
 import Modal from '../../components/modal'
 
+import usePrompt from '../../utils/usePrompt'
+
 const StyledTabPanel = styled(TabPanel)(() => ({
   padding: '10px'
 }))
@@ -98,6 +100,11 @@ const SASjsEditor = ({
     diffEditorRef.current = diffEditor
   }
 
+  usePrompt(
+    'Changes you made may not be saved.',
+    prevFileContent !== fileContent
+  )
+
   useEffect(() => {
     setRunTimes(Object.values(appContext.runTimes))
   }, [appContext.runTimes])

web/src/utils/usePrompt.ts

@@ -0,0 +1,36 @@
+import { useEffect, useCallback, useContext } from 'react'
+import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom'
+import { History, Blocker, Transition } from 'history'
+
+function useBlocker(blocker: Blocker, when = true) {
+  const navigator = useContext(NavigationContext).navigator as History
+
+  useEffect(() => {
+    if (!when) return
+
+    const unblock = navigator.block((tx: Transition) => {
+      const autoUnblockingTx = {
+        ...tx,
+        retry() {
+          unblock()
+          tx.retry()
+        }
+      }
+
+      blocker(autoUnblockingTx)
+    })
+
+    return unblock
+  }, [navigator, blocker, when])
+}
+
+export default function usePrompt(message: string, when = true) {
+  const blocker = useCallback(
+    (tx) => {
+      if (window.confirm(message)) tx.retry()
+    },
+    [message]
+  )
+
+  useBlocker(blocker, when)
+}