Editor and save state tweaks (#879)

* Editor and save state tweaks * Add test environment check * Refactor * Remove test env check
mui · Sep 1, 2022 · 9e28902 · 9e28902
1 parent 2646e29
commit 9e28902
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 61 deletions.
diff --git a/packages/toolpad-app/next.config.mjs b/packages/toolpad-app/next.config.mjs
@@ -26,7 +26,6 @@ function parseBuidEnvVars(env) {
     TOOLPAD_TARGET: target,
     TOOLPAD_DEMO: env.TOOLPAD_DEMO || '',
     TOOLPAD_VERSION: pkgJson.version,
-    TOOLPAD_DEBUG: process.env.TOOLPAD_DEBUG,
   };
 }
 

diff --git a/packages/toolpad-app/src/config.ts b/packages/toolpad-app/src/config.ts
@@ -28,9 +28,7 @@ export type BuildEnvVars = Record<
   // Whether Toolpad is running in Ddemo mode
   | 'TOOLPAD_DEMO'
   // The current Toolpad version
-  | 'TOOLPAD_VERSION'
-  // Show debug logs
-  | 'TOOLPAD_DEBUG',
+  | 'TOOLPAD_VERSION',
   string
 >;
 

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/AppEditorShell.tsx b/packages/toolpad-app/src/toolpad/AppEditor/AppEditorShell.tsx
@@ -123,52 +123,27 @@ 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">
-          {isSaveStateVisible ? (
-            <Tooltip title={getSaveStateMessage(isSaving, hasUnsavedChanges)}>
-              <Box display="flex" flexDirection="row" alignItems="center">
-                {isSaving ? (
-                  <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} />
-                ) : (
-                  <CloudDoneIcon
-                    color={hasUnsavedChanges ? 'disabled' : 'success'}
-                    fontSize="medium"
-                  />
-                )}
-              </Box>
-            </Tooltip>
-          ) : null}
+          <Tooltip title={getSaveStateMessage(isSaving, hasUnsavedChanges)}>
+            <Box display="flex" flexDirection="row" alignItems="center" mr={1}>
+              {isSaving ? (
+                <CircularProgress size={16} color="inherit" sx={{ mr: 1 }} />
+              ) : (
+                <CloudDoneIcon
+                  color={hasUnsavedChanges ? 'disabled' : 'success'}
+                  fontSize="medium"
+                />
+              )}
+            </Box>
+          </Tooltip>
           <IconButton
             aria-label="Create release"
             color="inherit"

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/PageOptionsPanel.tsx
@@ -32,7 +32,7 @@ export default function PageOptionsPanel() {
         </Button>
         <PageModuleEditor pageNodeId={pageNodeId} />
         <Divider variant="middle" sx={{ alignSelf: 'stretch' }} />
-        <Typography variant="subtitle1">Page State:</Typography>
+        <Typography variant="overline">Page State:</Typography>
         <UrlQueryEditor pageNodeId={pageNodeId} />
         <QueryEditor />
         <MutationEditor />

diff --git a/packages/toolpad-app/src/toolpad/DomLoader.tsx b/packages/toolpad-app/src/toolpad/DomLoader.tsx
@@ -8,7 +8,6 @@ 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 =
   | {
@@ -254,19 +253,10 @@ export function useDomApi(): DomApi {
 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');
+  if (!hasUnsavedChanges && previousUnsavedChanges > 0) {
+    // eslint-disable-next-line no-console
+    console.log(`${previousUnsavedChanges} changes saved.`);
   }
 
   previousUnsavedChanges = unsavedChanges;

diff --git a/packages/toolpad-app/src/utils/logs.ts b/packages/toolpad-app/src/utils/logs.ts