Pr autosave (wpilibsuite#365)

alan412 · web-flow · commit 9014e53165bf · 2025-12-28T20:19:16.000-08:00
* Adds autosave behavior

* Make "save" menu item work

* Fixed autosave bug

* Changed to use named constant

* Change to get project selected out of i18n

* Changed to be same size as other text per review comment
diff --git a/src/App.tsx b/src/App.tsx
@@ -29,6 +29,7 @@ import SiderCollapseTrigger from './reactComponents/SiderCollapseTrigger';
 import ToolboxSettingsModal from './reactComponents/ToolboxSettings';
 import * as Tabs from './reactComponents/Tabs';
 import { TabType } from './types/TabType';
+import { AutosaveProvider } from './reactComponents/AutosaveManager';
 
 import { extendedPythonGenerator } from './editor/extended_python_generator';
 
@@ -471,19 +472,35 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
     tabsRef.current?.closeTab(tabKey);
   };
 
+  /** Saves the currently active tab. */
+  const saveCurrentTab = async (): Promise<void> => {
+    if (tabsRef.current) {
+      await tabsRef.current.saveCurrentTab();
+    }
+  };
+
+  /** Gets the active tab key for autosave tracking. */
+  const getActiveTabKey = (): string => {
+    return tabsRef.current?.getActiveTabKey() || '';
+  };
+
   const { Sider } = Antd.Layout;
 
   return (
     <Antd.ConfigProvider
       theme={antdThemeFromString(theme)}
     >
       {contextHolder}
-      <Antd.Layout style={{ height: FULL_VIEWPORT_HEIGHT }}>
-          <Header
-            alertErrorMessage={alertErrorMessage}
-            setAlertErrorMessage={setAlertErrorMessage}
-            project={project}
-          />
+      <AutosaveProvider
+        saveCurrentTab={saveCurrentTab}
+        activeTabKey={getActiveTabKey()}
+      >
+        <Antd.Layout style={{ height: FULL_VIEWPORT_HEIGHT }}>
+            <Header
+              alertErrorMessage={alertErrorMessage}
+              setAlertErrorMessage={setAlertErrorMessage}
+              project={project}
+            />
           <Antd.Layout
             style={{
               background: LAYOUT_BACKGROUND_COLOR,
@@ -508,6 +525,7 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
                 openWPIToolboxSettings={() => setToolboxSettingsModalIsOpen(true)}
                 theme={theme}
                 setTheme={setTheme}
+                saveCurrentTab={saveCurrentTab}
               />
               <SiderCollapseTrigger
                 collapsed={leftCollapsed}
@@ -538,6 +556,7 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
           onOk={handleToolboxSettingsConfirm}
           onCancel={handleToolboxSettingsCancel}
         />
+      </AutosaveProvider>
     </Antd.ConfigProvider>
   );
 };
diff --git a/src/reactComponents/AutosaveManager.tsx b/src/reactComponents/AutosaveManager.tsx
@@ -0,0 +1,144 @@
+/**
+ * @license
+ * Copyright 2025 Porpoiseful LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Autosave manager that tracks unsaved changes and triggers saves.
+ * @author alan@porpoiseful.com (Alan Smith)
+ */
+import * as React from 'react';
+
+/** Delay in milliseconds before auto-saving after a change. */
+const AUTOSAVE_DELAY_MS = 5000;
+
+/** Context for autosave state. */
+interface AutosaveContextType {
+  /** Whether the current tab has unsaved changes. */
+  hasUnsavedChanges: boolean;
+  /** Mark the current tab as having unsaved changes. */
+  markAsModified: () => void;
+  /** Mark the current tab as saved. */
+  markAsSaved: () => void;
+  /** Trigger an immediate save of the current tab. */
+  triggerSave: () => Promise<void>;
+}
+
+const AutosaveContext = React.createContext<AutosaveContextType | null>(null);
+
+/** Props for AutosaveProvider. */
+interface AutosaveProviderProps {
+  children: React.ReactNode;
+  /** Function to save the current active tab. */
+  saveCurrentTab: () => Promise<void>;
+  /** Current active tab key. */
+  activeTabKey: string;
+}
+
+/**
+ * Provider component that manages autosave state and triggers.
+ * Handles debounced auto-save after changes.
+ */
+export function AutosaveProvider({ children, saveCurrentTab, activeTabKey }: AutosaveProviderProps): React.JSX.Element {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+  const [lastActiveTabKey, setLastActiveTabKey] = React.useState(activeTabKey);
+  const saveTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  /** Clears any pending autosave timer. */
+  const clearSaveTimer = React.useCallback(() => {
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+  }, []);
+
+  /** Marks the current tab as having unsaved changes and schedules an autosave. */
+  const markAsModified = React.useCallback(() => {
+    setHasUnsavedChanges(true);
+    
+    // Clear any existing timer
+    clearSaveTimer();
+    
+    // Schedule a new autosave
+    saveTimerRef.current = setTimeout(async () => {
+      try {
+        await saveCurrentTab();
+        setHasUnsavedChanges(false);
+      } catch (error) {
+        console.error('Autosave failed:', error);
+        // Keep hasUnsavedChanges true on error
+      }
+    }, AUTOSAVE_DELAY_MS);
+  }, [saveCurrentTab, clearSaveTimer]);
+
+  /** Marks the current tab as saved. */
+  const markAsSaved = React.useCallback(() => {
+    setHasUnsavedChanges(false);
+    clearSaveTimer();
+  }, [clearSaveTimer]);
+
+  /** Triggers an immediate save. */
+  const triggerSave = React.useCallback(async () => {
+    clearSaveTimer();
+    try {
+      await saveCurrentTab();
+      setHasUnsavedChanges(false);
+    } catch (error) {
+      console.error('Manual save failed:', error);
+      throw error;
+    }
+  }, [saveCurrentTab, clearSaveTimer]);
+
+  // When tab changes, clear unsaved state for the new tab
+  React.useEffect(() => {
+    if (activeTabKey !== lastActiveTabKey) {
+      setHasUnsavedChanges(false);
+      setLastActiveTabKey(activeTabKey);
+    }
+  }, [activeTabKey, lastActiveTabKey]);
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => {
+      clearSaveTimer();
+    };
+  }, [clearSaveTimer]);
+
+  const contextValue: AutosaveContextType = {
+    hasUnsavedChanges,
+    markAsModified,
+    markAsSaved,
+    triggerSave,
+  };
+
+  return (
+    <AutosaveContext.Provider value={contextValue}>
+      {children}
+    </AutosaveContext.Provider>
+  );
+}
+
+/**
+ * Hook to access autosave context.
+ * @returns Autosave context value.
+ * @throws Error if used outside of AutosaveProvider.
+ */
+export function useAutosave(): AutosaveContextType {
+  const context = React.useContext(AutosaveContext);
+  if (!context) {
+    throw new Error('useAutosave must be used within AutosaveProvider');
+  }
+  return context;
+}
diff --git a/src/reactComponents/Header.tsx b/src/reactComponents/Header.tsx
@@ -22,6 +22,7 @@ import * as Antd from 'antd';
 import * as storageProject from '../storage/project';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useAutosave } from './AutosaveManager';
 
 /** Function type for setting string values. */
 type StringFunction = (input: string) => void;
@@ -52,6 +53,7 @@ const TEXT_PADDING_LEFT = 20;
 export default function Header(props: HeaderProps): React.JSX.Element {
   const { token } = Antd.theme.useToken();
   const { t } = useTranslation();
+  const autosave = useAutosave();
 
   const isDarkTheme = token.colorBgLayout === '#000000';
 
@@ -77,7 +79,27 @@ export default function Header(props: HeaderProps): React.JSX.Element {
 
   /** Gets the project name or fallback text. */
   const getProjectName = (): string => {
-    return props.project?.projectName || 'No Project Selected';
+    return props.project?.projectName || t('NO_PPROJECT_SELECTED');
+  };
+
+  /** Renders the unsaved changes indicator. */
+  const renderUnsavedIndicator = (): React.JSX.Element | null => {
+    if (!autosave.hasUnsavedChanges) {
+      return null;
+    }
+
+    return (
+      <Antd.Typography.Text
+        style={{
+          marginLeft: 8,
+          fontSize: TEXT_FONT_SIZE,
+          color: token.colorWarning,
+          fontStyle: 'italic',
+        }}
+      >
+        *
+      </Antd.Typography.Text>
+    );
   };
 
   return (
@@ -106,6 +128,7 @@ export default function Header(props: HeaderProps): React.JSX.Element {
           }}
         >
           {t("PROJECT")}: {getProjectName()}
+          {renderUnsavedIndicator()}
         </Antd.Typography>
         {renderErrorAlert()}
       </Antd.Flex>
diff --git a/src/reactComponents/Menu.tsx b/src/reactComponents/Menu.tsx
@@ -65,6 +65,7 @@ export interface MenuProps {
   openWPIToolboxSettings: () => void;
   theme: string;
   setTheme: (theme: string) => void;
+  saveCurrentTab: () => Promise<void>;
 }
 
 /** Default selected menu keys. */
@@ -273,6 +274,8 @@ export function Component(props: MenuProps): React.JSX.Element {
       setThemeModalOpen(true);
     } else if (key == 'deploy') {
       handleDeploy();
+    } else if (key == 'save') {
+      handleSave();
     } else if (key.startsWith('setlang:')) {
       const lang = key.split(':')[1];
       i18n.changeLanguage(lang);
@@ -283,6 +286,16 @@ export function Component(props: MenuProps): React.JSX.Element {
     }
   };
 
+  /** Handles the save action to save the current tab. */
+  const handleSave = async (): Promise<void> => {
+    try {
+      await props.saveCurrentTab();
+    } catch (error) {
+      console.error('Failed to save current tab:', error);
+      props.setAlertErrorMessage(t('FAILED_TO_SAVE_MODULE') || 'Failed to save module');
+    }
+  };
+
   /** Handles the deploy action to generate and download Python files. */
   const handleDeploy = async (): Promise<void> => {
     if (!props.currentProject) {
@@ -294,6 +307,9 @@ export function Component(props: MenuProps): React.JSX.Element {
     }
 
     try {
+      // Save current tab before deploying
+      await props.saveCurrentTab();
+      
       const blobUrl = await createPythonFiles.producePythonProjectBlob(props.currentProject, props.storage);
       
       // Check if the backend server is available
diff --git a/src/reactComponents/TabContent.tsx b/src/reactComponents/TabContent.tsx
@@ -33,6 +33,7 @@ import * as commonStorage from '../storage/common_storage';
 import * as classMethodDef from '../blocks/mrc_class_method_def'
 import * as eventHandler from '../blocks/mrc_event_handler'
 import { Content } from 'antd/es/layout/layout';
+import { useAutosave } from './AutosaveManager';
 
 /** Default size for code panel. */
 const CODE_PANEL_DEFAULT_SIZE = '25%';
@@ -82,6 +83,8 @@ export const TabContent = React.forwardRef<TabContentRef, TabContentProps>(({
   const [codePanelCollapsed, setCodePanelCollapsed] = React.useState(false);
   const [codePanelExpandedSize, setCodePanelExpandedSize] = React.useState<string | number>(CODE_PANEL_DEFAULT_SIZE);
   const [codePanelAnimating, setCodePanelAnimating] = React.useState(false);
+  const autosave = useAutosave();
+  const isInitialActivation = React.useRef(true);
 
   /** Expose saveModule method via ref. */
   React.useImperativeHandle(ref, () => ({
@@ -92,9 +95,11 @@ export const TabContent = React.forwardRef<TabContentRef, TabContentProps>(({
         // modulePathToContentText is passed to Editor.makeCurrent so the active editor will know
         // about changes to other modules.
         modulePathToContentText[modulePath] = moduleContentText;
+        // Mark as saved after successful save
+        autosave.markAsSaved();
       }
     },
-  }), [editorInstance]);
+  }), [editorInstance, autosave]);
 
   /** Handles Blockly workspace changes and triggers code regeneration. */
   const handleBlocksChanged = React.useCallback((event: Blockly.Events.Abstract): void => {
@@ -119,9 +124,12 @@ export const TabContent = React.forwardRef<TabContentRef, TabContentProps>(({
     if (blocklyComponent.current &&
         event.workspaceId === blocklyComponent.current.getBlocklyWorkspace().id) {
       setTriggerPythonRegeneration(Date.now());
-      // Also notify parent
+      // Mark as modified when blocks change, but not during initial activation
+      if (!isInitialActivation.current) {
+        autosave.markAsModified();
+      }
     }
-  }, [blocklyComponent]);
+  }, [blocklyComponent, autosave]);
 
   /** Called when BlocklyComponent is created. */
   const setupBlocklyComponent = React.useCallback((_modulePath: string, newBlocklyComponent: BlocklyComponentType) => {
@@ -161,7 +169,13 @@ export const TabContent = React.forwardRef<TabContentRef, TabContentProps>(({
       blocklyComponent.current.setActive(isActive);
     }
     if (editorInstance && isActive) {
+      // Set flag to ignore changes during activation
+      isInitialActivation.current = true;
       editorInstance.makeCurrent(project, modulePathToContentText);
+      // Clear the flag after a brief delay to allow workspace to settle
+      setTimeout(() => {
+        isInitialActivation.current = false;
+      }, 100);
     }
   }, [isActive, blocklyComponent, editorInstance, project, modulePathToContentText]);
 
diff --git a/src/reactComponents/Tabs.tsx b/src/reactComponents/Tabs.tsx
