update page title, track dirty state, prevent navigation when dirty

Author: jjspace

packages/sandcastle/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sandcastle Reborn</title>
+    <title>Cesium Sandcastle</title>
     <style>
       /* Load fonts for itwin-ui */
       @font-face {

packages/sandcastle/src/App.tsx

@@ -51,6 +51,10 @@ const defaultHtmlCode = `<style>
 `;
 
 const GALLERY_BASE = __GALLERY_BASE_URL__;
+const cesiumVersion = __CESIUM_VERSION__;
+const versionString = __COMMIT_SHA__
+  ? `Commit: ${__COMMIT_SHA__.substring(0, 7)} - ${cesiumVersion}`
+  : cesiumVersion;
 
 type RightSideRef = {
   toggleExpanded: () => void;
@@ -164,6 +168,7 @@ function AppBarButton({
 
 export type SandcastleAction =
   | { type: "reset" }
+  | { type: "resetDirty" }
   | { type: "setCode"; code: string }
   | { type: "setHtml"; html: string }
   | { type: "runSandcastle" }
@@ -178,9 +183,6 @@ function App() {
   const consoleCollapsedHeight = 26;
   const [consoleExpanded, setConsoleExpanded] = useState(false);
 
-  const cesiumVersion = __CESIUM_VERSION__;
-  const versionString = __COMMIT_SHA__ ? `Commit: ${__COMMIT_SHA__}` : "";
-
   const startOnEditor = !!(window.location.search || window.location.hash);
   const [leftPanel, setLeftPanel] = useState<"editor" | "gallery">(
     startOnEditor ? "editor" : "gallery",
@@ -196,6 +198,7 @@ function App() {
     committedCode: string;
     committedHtml: string;
     runNumber: number;
+    dirty: boolean;
   };
 
   const initialState: CodeState = {
@@ -204,6 +207,7 @@ function App() {
     committedCode: defaultJsCode,
     committedHtml: defaultHtmlCode,
     runNumber: 0,
+    dirty: false,
   };
 
   const [codeState, dispatch] = useReducer(function reducer(
@@ -218,12 +222,14 @@ function App() {
         return {
           ...state,
           code: action.code,
+          dirty: true,
         };
       }
       case "setHtml": {
         return {
           ...state,
           html: action.html,
+          dirty: true,
         };
       }
       case "runSandcastle": {
@@ -241,11 +247,46 @@ function App() {
           committedCode: action.code ?? state.code,
           committedHtml: action.html ?? state.html,
           runNumber: state.runNumber + 1,
+          dirty: false,
+        };
+      }
+      case "resetDirty": {
+        return {
+          ...state,
+          dirty: false,
         };
       }
     }
   }, initialState);
 
+  useEffect(() => {
+    const host = window.location.host;
+    let envString = "";
+    if (host.includes("localhost") && host !== "localhost:8080") {
+      // this helps differentiate tabs for local sandcastle development or other testing
+      envString = `${host.replace("localhost:", "")} `;
+    }
+
+    const baseTitle = "Cesium Sandcastle";
+    const dirtyIndicator = codeState.dirty ? "*" : "";
+    if (title !== "") {
+      document.title = `${envString}${title}${dirtyIndicator} | ${baseTitle}`;
+    } else {
+      document.title = `${envString}${baseTitle}`;
+    }
+  }, [title, codeState.dirty]);
+
+  const confirmLeave = useCallback(() => {
+    if (!codeState.dirty) {
+      return true;
+    }
+
+    /* eslint-disable-next-line no-alert */
+    return window.confirm(
+      "You have unsaved changes. Are you sure you want to navigate away from this demo?",
+    );
+  }, [codeState.dirty]);
+
   const [legacyIdMap, setLegacyIdMap] = useState<Record<string, string>>({});
   const [galleryItems, setGalleryItems] = useState<GalleryItem[]>([]);
   const [galleryLoaded, setGalleryLoaded] = useState(false);
@@ -277,6 +318,9 @@ function App() {
   }
 
   function resetSandcastle() {
+    if (!confirmLeave()) {
+      return;
+    }
     dispatch({ type: "reset" });
 
     window.history.pushState({}, "", getBaseUrl());
@@ -292,6 +336,7 @@ function App() {
 
     const shareUrl = `${getBaseUrl()}#c=${base64String}`;
     window.history.replaceState({}, "", shareUrl);
+    dispatch({ type: "resetDirty" });
   }
 
   function openStandalone() {
@@ -407,12 +452,27 @@ function App() {
   useEffect(() => {
     // Listen to browser forward/back navigation and try to load from URL
     // this is necessary because of the pushState used for faster gallery loading
-    function pushStateListener() {
-      loadFromUrl();
+    function popStateListener() {
+      if (confirmLeave()) {
+        loadFromUrl();
+      }
     }
-    window.addEventListener("popstate", pushStateListener);
-    return () => window.removeEventListener("popstate", pushStateListener);
-  }, [loadFromUrl]);
+    window.addEventListener("popstate", popStateListener);
+    return () => window.removeEventListener("popstate", popStateListener);
+  }, [loadFromUrl, confirmLeave]);
+
+  useEffect(() => {
+    // if the code has been edited listen for navigation away and warn
+    if (codeState.dirty) {
+      function beforeUnloadListener(e: BeforeUnloadEvent) {
+        e.preventDefault();
+        return ""; // modern browsers ignore the contents of this string
+      }
+      window.addEventListener("beforeunload", beforeUnloadListener);
+      return () =>
+        window.removeEventListener("beforeunload", beforeUnloadListener);
+    }
+  }, [codeState.dirty]);
 
   return (
     <Root
@@ -443,8 +503,7 @@ function App() {
         </Button>
         <div className="flex-spacer"></div>
         <div className="version">
-          {versionString && <pre>{versionString.substring(0, 7)} - </pre>}
-          <pre>{cesiumVersion}</pre>
+          {versionString && <pre>{versionString}</pre>}
         </div>
       </header>
       <div className="application-bar">
@@ -505,6 +564,9 @@ function App() {
             hidden={leftPanel !== "gallery"}
             galleryItems={galleryItems}
             loadDemo={(item, switchToCode) => {
+              if (!confirmLeave()) {
+                return;
+              }
               // Load the gallery item every time it's clicked
               loadGalleryItem(item.id);
 

packages/sandcastle/src/main.tsx

@@ -3,13 +3,6 @@ import { createRoot } from "react-dom/client";
 import "./reset.css"; // TODO: this may not be needed with itwin-ui
 import App from "./App.tsx";
 
-const host = window.location.host;
-if (host.includes("localhost")) {
-  document.title = `${host.replace("localhost:", "")} ${document.title}`;
-} else if (host.includes("ci")) {
-  document.title = `CI ${document.title}`;
-}
-
 createRoot(document.getElementById("app-container")!).render(
   <StrictMode>
     <App />

packages/sandcastle/vite.config.ci.ts

@@ -1,5 +1,6 @@
 import { defineConfig, UserConfig } from "vite";
 import { viteStaticCopy } from "vite-plugin-static-copy";
+import { env } from "process";
 
 import baseConfig, { cesiumPathReplace } from "./vite.config.ts";
 
@@ -22,6 +23,7 @@ export default defineConfig(() => {
     ...config.define,
     __PAGE_BASE_URL__: JSON.stringify(process.env.BASE_URL),
     __GALLERY_BASE_URL__: JSON.stringify(`${config.base}/gallery`),
+    __COMMIT_SHA__: JSON.stringify(env.GITHUB_SHA),
   };
 
   const copyPlugin = viteStaticCopy({