Hide number of changes in UI, add it in debug logging utility

packages/toolpad-app/next.config.mjs

@@ -27,6 +27,7 @@ function parseBuidEnvVars(env) {
     TOOLPAD_DEMO: env.TOOLPAD_DEMO || '',
     TOOLPAD_VERSION: pkgJson.version,
     TOOLPAD_CREATE_WITH_DOM: process.env.TOOLPAD_CREATE_WITH_DOM,
+    TOOLPAD_DEBUG: process.env.TOOLPAD_DEBUG,
   };
 }
 

packages/toolpad-app/src/config.ts

@@ -31,7 +31,9 @@ export type BuildEnvVars = Record<
   | 'TOOLPAD_VERSION'
   // Enable input field for seeding a dom in the app creation dialog
   // (For testing purposes)
-  | 'TOOLPAD_CREATE_WITH_DOM',
+  | 'TOOLPAD_CREATE_WITH_DOM'
+  // Show debug logs
+  | 'TOOLPAD_DEBUG',
   string
 >;
 

packages/toolpad-app/src/toolpad/AppEditor/AppEditorShell.tsx

@@ -11,8 +11,10 @@ import {
   IconButton,
   Stack,
   TextField,
+  Tooltip,
   Typography,
 } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import * as React from 'react';
 import { useForm } from 'react-hook-form';
 import { Outlet, useNavigate } from 'react-router-dom';
@@ -102,6 +104,16 @@ function CreateReleaseDialog({ appId, open, onClose }: CreateReleaseDialogProps)
   );
 }
 
+function getSaveStateMessage(isSaving: boolean, hasUnsavedChanges: boolean): string {
+  if (isSaving) {
+    return 'Saving changes...';
+  }
+  if (hasUnsavedChanges) {
+    return 'You have unsaved changes.';
+  }
+  return 'All changes saved!';
+}
+
 export interface ToolpadAppShellProps {
   appId: string;
   actions?: React.ReactNode;
@@ -111,18 +123,52 @@ export default function AppEditorShell({ appId, ...props }: ToolpadAppShellProps
   const domLoader = useDomLoader();
 
   const [createReleaseDialogOpen, setCreateReleaseDialogOpen] = React.useState(false);
+  const [isSaveStateVisible, setIsSaveStateVisible] = React.useState(false);
+
+  const hasUnsavedChanges = domLoader.unsavedChanges > 0;
+  const isSaving = domLoader.saving;
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout | null = null;
+
+    if (!hasUnsavedChanges) {
+      timeout = setTimeout(() => {
+        setIsSaveStateVisible(false);
+
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+      }, 4500);
+    } else {
+      setIsSaveStateVisible(true);
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [hasUnsavedChanges]);
 
   return (
     <ToolpadAppShell
       appId={appId}
       actions={
         <Stack direction="row" gap={1} alignItems="center">
-          {domLoader.saving ? (
-            <Box display="flex" flexDirection="row" alignItems="center">
-              <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} />
-            </Box>
+          {isSaveStateVisible ? (
+            <Tooltip title={getSaveStateMessage(isSaving, hasUnsavedChanges)}>
+              <Box display="flex" flexDirection="row" alignItems="center">
+                {isSaving ? (
+                  <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} />
+                ) : (
+                  <CheckCircleIcon
+                    color={hasUnsavedChanges ? 'disabled' : 'success'}
+                    fontSize="medium"
+                  />
+                )}
+              </Box>
+            </Tooltip>
           ) : null}
-          <Typography>{domLoader.unsavedChanges} unsaved change(s).</Typography>
           <IconButton
             aria-label="Create release"
             color="inherit"

packages/toolpad-app/src/toolpad/DomLoader.tsx

@@ -8,6 +8,7 @@ import client from '../api';
 import useShortcut from '../utils/useShortcut';
 import useDebouncedHandler from '../utils/useDebouncedHandler';
 import { createProvidedContext } from '../utils/react';
+import { debugLog } from '../utils/logs';
 
 export type DomAction =
   | {
@@ -250,6 +251,27 @@ export function useDomApi(): DomApi {
   return React.useContext(DomApiContext);
 }
 
+let previousUnsavedChanges = 0;
+function logUnsavedChanges(unsavedChanges: number) {
+  const hasUnsavedChanges = unsavedChanges >= 1;
+  const newChanges = unsavedChanges - previousUnsavedChanges;
+
+  const pluralizeChanges = (changesCount: number) => `change${changesCount !== 1 ? 's' : ''}`;
+
+  if (hasUnsavedChanges) {
+    debugLog(
+      `+ ${newChanges} ${pluralizeChanges(
+        newChanges,
+      )}. ${unsavedChanges} unsaved ${pluralizeChanges(unsavedChanges)}.`,
+      'orange',
+    );
+  } else if (previousUnsavedChanges > 0) {
+    debugLog('All changes saved!', 'green');
+  }
+
+  previousUnsavedChanges = unsavedChanges;
+}
+
 export interface DomContextProps {
   appId: string;
   children?: React.ReactNode;
@@ -294,13 +316,15 @@ export default function DomProvider({ appId, children }: DomContextProps) {
   }, [state.dom, debouncedhandleSave]);
 
   React.useEffect(() => {
+    logUnsavedChanges(state.unsavedChanges);
+
     if (state.unsavedChanges <= 0) {
       return () => {};
     }
 
     const onBeforeUnload = (event: BeforeUnloadEvent) => {
       event.preventDefault();
-      event.returnValue = `You have ${state.unsavedChanges} unsaved change(s), are you sure you want to navigate away?`;
+      event.returnValue = `You have unsaved changes. Are you sure you want to navigate away?`;
     };
 
     window.addEventListener('beforeunload', onBeforeUnload);

packages/toolpad-app/src/utils/logs.ts

@@ -0,0 +1,6 @@
+export function debugLog(message: string, color: string): void {
+  if (process.env.TOOLPAD_DEBUG) {
+    // eslint-disable-next-line no-console
+    console.log(`%c[DEBUG] ${message}`, `color: ${color}`);
+  }
+}