Add saving when tab changes

Author: alan412

src/App.tsx

@@ -139,7 +139,6 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
   const { settings, updateLanguage, updateTheme, updateOpenTabs, getOpenTabs, storage, isLoading } = useUserSettings();
 
   const [alertErrorMessage, setAlertErrorMessage] = React.useState('');
-  const [currentModule, setCurrentModule] = React.useState<storageModule.Module | null>(null);
   const [messageApi, contextHolder] = Antd.message.useMessage();
   const [toolboxSettingsModalIsOpen, setToolboxSettingsModalIsOpen] = React.useState(false);
   const [modulePathToContentText, setModulePathToContentText] = React.useState<{[modulePath: string]: string}>({});
@@ -251,14 +250,6 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
     await storage.saveEntry(SHOWN_TOOLBOX_CATEGORIES_KEY, JSON.stringify(array));
   };
 
-  /** Changes current module. */
-  const changeModule = async (module: storageModule.Module | null): Promise<void> => {
-    setCurrentModule(module);
-    if (module) {
-      setActiveTab(module.modulePath);
-    }
-  };
-
   /** Handles toolbox settings modal close. */
   const handleToolboxSettingsCancel = (): void => {
     setToolboxSettingsModalIsOpen(false);
@@ -306,7 +297,6 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
     if (!project || !storage) {
       return;
     }
-    const oldModulePathToContentText = modulePathToContentText;
     const promises: {[modulePath: string]: Promise<string>} = {}; // value is promise of module content.
     const updatedModulePathToContentText: {[modulePath: string]: string} = {}; // value is module content text
     if (project.robot.modulePath in modulePathToContentText) {
@@ -336,17 +326,6 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
       );
       setModulePathToContentText(updatedModulePathToContentText);
     }
-
-    // Update currentModule if the current module was deleted.
-    for (const modulePath in oldModulePathToContentText) {
-      if (modulePath in updatedModulePathToContentText) {
-        continue;
-      }
-      if (currentModule && currentModule.modulePath === modulePath) {
-        setCurrentModule(project.robot);
-        setActiveTab(project.robot.modulePath);
-      }
-    }
   };
 
   // Load saved tabs when project changes
@@ -558,8 +537,6 @@ const AppContent: React.FC<AppContentProps> = ({ project, setProject }): React.J
                 activeTab={activeTab}
                 setTabList={setTabItems}
                 setAlertErrorMessage={setAlertErrorMessage}
-                currentModule={currentModule}
-                setCurrentModule={changeModule}
                 project={project}
                 onProjectChanged={onProjectChanged}
                 storage={storage}

src/reactComponents/TabContent.tsx

@@ -39,6 +39,11 @@ const CODE_PANEL_DEFAULT_SIZE = '25%';
 /** Minimum size for code panel. */
 const CODE_PANEL_MIN_SIZE = 100;
 
+/** Interface for methods exposed by TabContent via ref. */
+export interface TabContentRef {
+  saveModule: () => Promise<void>;
+}
+
 export interface TabContentProps {
   modulePath: string;
   module: storageModule.Module;
@@ -56,7 +61,7 @@ export interface TabContentProps {
  * Component that manages a single tab's BlocklyComponent and CodeDisplay.
  * Each tab has its own workspace and code display.
  */
-export const TabContent: React.FC<TabContentProps> = ({
+export const TabContent = React.forwardRef<TabContentRef, TabContentProps>(({
   modulePath,
   module,
   project,
@@ -67,7 +72,7 @@ export const TabContent: React.FC<TabContentProps> = ({
   messageApi,
   setAlertErrorMessage,
   isActive,
-}) => {
+}, ref) => {
   const [blocklyComponent, setBlocklyComponent] = React.useState<BlocklyComponentType | null>(null);
   const [editorInstance, setEditorInstance] = React.useState<editor.Editor | null>(null);
   const [generatedCode, setGeneratedCode] = React.useState<string>('');
@@ -77,6 +82,15 @@ export const TabContent: React.FC<TabContentProps> = ({
   const [codePanelExpandedSize, setCodePanelExpandedSize] = React.useState<string | number>(CODE_PANEL_DEFAULT_SIZE);
   const [codePanelAnimating, setCodePanelAnimating] = React.useState(false);
 
+  /** Expose saveModule method via ref. */
+  React.useImperativeHandle(ref, () => ({
+    saveModule: async () => {
+      if (editorInstance) {
+        await editorInstance.saveModule();
+      }
+    },
+  }), [editorInstance]);
+
   /** Handles Blockly workspace changes and triggers code regeneration. */
   const handleBlocksChanged = React.useCallback((event: Blockly.Events.Abstract): void => {
     if (event.isUiEvent) {
@@ -261,4 +275,6 @@ export const TabContent: React.FC<TabContentProps> = ({
       </div>
     </div>
   );
-};
+});
+
+TabContent.displayName = 'TabContent';

src/reactComponents/Tabs.tsx

@@ -35,7 +35,7 @@ import {
 import AddTabDialog from './AddTabDialog';
 import ClassNameComponent from './ClassNameComponent';
 import { TabType, TabTypeUtils } from '../types/TabType';
-import { TabContent } from './TabContent';
+import { TabContent, TabContentRef } from './TabContent';
 
 /** Represents a tab item in the tab bar. */
 export interface TabItem {
@@ -52,8 +52,6 @@ export interface TabsProps {
   project: storageProject.Project | null;
   onProjectChanged: () => Promise<void>;
   setAlertErrorMessage: (message: string) => void;
-  currentModule: storageModule.Module | null;
-  setCurrentModule: (module: storageModule.Module | null) => void;
   storage: commonStorage.Storage | null;
   theme: string;
   shownPythonToolboxCategories: Set<string>;
@@ -81,14 +79,23 @@ export function Component(props: TabsProps): React.JSX.Element {
   const [renameModalOpen, setRenameModalOpen] = React.useState(false);
   const [copyModalOpen, setCopyModalOpen] = React.useState(false);
   const [currentTab, setCurrentTab] = React.useState<TabItem | null>(null);
+  
+  // Store refs to TabContent components for each tab
+  const tabContentRefs = React.useRef<Map<string, TabContentRef>>(new Map());
 
   /** Handles tab change and updates current module. */
   const handleTabChange = (key: string): void => {
-    if (props.project) {
-      const modulePath = key;
-      props.setCurrentModule(storageProject.findModuleByModulePath(props.project, modulePath));
-      setActiveKey(key);
+    if (key !== activeKey) {
+      // Save the tab we are changing away from (async, but don't wait)
+      const currentTabRef = tabContentRefs.current.get(activeKey);
+      if (currentTabRef) {
+        currentTabRef.saveModule().catch((error) => {
+          console.error('Error saving module on tab switch:', error);
+          props.setAlertErrorMessage(t('FAILED_TO_SAVE_MODULE'));
+        });
+      }
     }
+    setActiveKey(key);
   };
 
   /** Checks if a key exists in the current tab list. */
@@ -346,6 +353,13 @@ export function Component(props: TabsProps): React.JSX.Element {
         closable: tab.type !== TabType.ROBOT,
         children: module && props.project && props.storage ? (
           <TabContent
+            ref={(ref) => {
+              if (ref) {
+                tabContentRefs.current.set(tab.key, ref);
+              } else {
+                tabContentRefs.current.delete(tab.key);
+              }
+            }}
             modulePath={tab.key}
             module={module}
             project={props.project}