Combine internationalization (wpilibsuite#158)

* First combining of Blockly localization along with react localization

* Move some items from our blocks into being translated

* Moved translations out of public directory into a place that makes more sense

* Translations provided by Copilot (Claude Sonnet 4)

* Adding ability to change language dynamically

* Changed Auto, Teleop, and Test away from being localized

* Update mrc_call_python_function.ts

* Update mrc_component.ts

* Remove old comments noticed in review

* Solve problem with language change not updating block

* Add some additional translations

* Add localization to toolbox categories

* remove spurious import

* restored accidentally deleted close brace

* add saving of blocks before changing language

* Remove unnecessary code now that we reload on language change

* Add node that the translations need to be checked

* Add Internationalization to test

---------

Co-authored-by: Liz Looney <[email protected]>

Author: alan412

public/locales/en/translation.json

@@ -47,6 +47,7 @@ import * as ChangeFramework from './blocks/utils/change_framework'
 import { mutatorOpenListener } from './blocks/mrc_param_container'
 import { TOOLBOX_UPDATE_EVENT } from './blocks/mrc_mechanism_component_holder';
 import { antdThemeFromString } from './reactComponents/ThemeModal';
+import { useTranslation } from 'react-i18next';
 
 /** Storage key for shown toolbox categories. */
 const SHOWN_TOOLBOX_CATEGORIES_KEY = 'shownPythonToolboxCategories';
@@ -86,6 +87,8 @@ const LAYOUT_BACKGROUND_COLOR = '#0F0';
  * project management, and user interface layout.
  */
 const App: React.FC = (): React.JSX.Element => {
+  const { t, i18n } = useTranslation();
+    
   const [alertErrorMessage, setAlertErrorMessage] = React.useState('');
   const [storage, setStorage] = React.useState<commonStorage.Storage | null>(null);
   const [currentModule, setCurrentModule] = React.useState<commonStorage.Module | null>(null);
@@ -101,7 +104,6 @@ const App: React.FC = (): React.JSX.Element => {
   const [rightCollapsed, setRightCollapsed] = React.useState(false);
   const [theme, setTheme] = React.useState('dark');
 
-
   const blocksEditor = React.useRef<editor.Editor | null>(null);
   const generatorContext = React.useRef<GeneratorContext | null>(null);
   const blocklyComponent = React.useRef<BlocklyComponentType | null>(null);
@@ -232,7 +234,7 @@ const App: React.FC = (): React.JSX.Element => {
     const tabs: Tabs.TabItem[] = [
       {
         key: projectData.robot.modulePath,
-        title: 'Robot',
+        title: t('ROBOT'),
         type: TabType.ROBOT,
       },
     ];
@@ -261,7 +263,7 @@ const App: React.FC = (): React.JSX.Element => {
     if (blocksEditor.current && currentModule) {
       blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
     }
-  }, [currentModule, shownPythonToolboxCategories]);
+  }, [currentModule, shownPythonToolboxCategories, i18n.language]);
 
   // Add event listener for toolbox updates
   React.useEffect(() => {
@@ -290,7 +292,31 @@ const App: React.FC = (): React.JSX.Element => {
     if (blocksEditor.current) {
       blocksEditor.current.loadModuleBlocks(currentModule);
     }
-  }, [currentModule]);
+  }, [currentModule]); 
+
+  const setupWorkspace = (newWorkspace: Blockly.WorkspaceSvg) => {
+     if (!blocklyComponent.current || !storage) {
+      return;
+    }
+    // Recreate workspace when Blockly component is ready
+    ChangeFramework.setup(newWorkspace);
+    newWorkspace.addChangeListener(mutatorOpenListener);
+    newWorkspace.addChangeListener(handleBlocksChanged);
+    generatorContext.current = createGeneratorContext();
+    
+    if (currentModule) {
+      generatorContext.current.setModule(currentModule);
+    }
+
+    blocksEditor.current = new editor.Editor(newWorkspace, generatorContext.current, storage);
+    
+    // Set the current module in the editor after creating it
+    if (currentModule) {
+      blocksEditor.current.loadModuleBlocks(currentModule);
+    }
+    
+    blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
+  };
 
   // Initialize Blockly workspace and editor when component and storage are ready
   React.useEffect(() => {
@@ -300,17 +326,8 @@ const App: React.FC = (): React.JSX.Element => {
 
     const blocklyWorkspace = blocklyComponent.current.getBlocklyWorkspace();
     if (blocklyWorkspace) {
-      ChangeFramework.setup(blocklyWorkspace);
-      blocklyWorkspace.addChangeListener(mutatorOpenListener);
-      blocklyWorkspace.addChangeListener(handleBlocksChanged);
+      setupWorkspace(blocklyWorkspace);
     }
-
-    generatorContext.current = createGeneratorContext();
-    if (currentModule) {
-      generatorContext.current.setModule(currentModule);
-    }
-
-    blocksEditor.current = new editor.Editor(blocklyWorkspace, generatorContext.current, storage);
   }, [blocklyComponent, storage]);
 
   // Generate code when module or regeneration trigger changes
@@ -342,6 +359,31 @@ const App: React.FC = (): React.JSX.Element => {
     }
   }, [project]);
 
+  // Handle language changes with automatic saving
+  React.useEffect(() => {
+    const handleLanguageChange = async () => {
+      // Save current blocks before language change
+      if (currentModule && areBlocksModified()) {
+        try {
+          await saveBlocks();
+        } catch (e) {
+          console.error('Failed to save blocks before language change:', e);
+        }
+      }
+      
+      // Update toolbox after language change
+      if (blocksEditor.current) {
+        blocksEditor.current.updateToolbox(shownPythonToolboxCategories);
+      }
+    };
+
+    i18n.on('languageChanged', handleLanguageChange);
+
+    return () => {
+      i18n.off('languageChanged', handleLanguageChange);
+    };
+  }, [currentModule, shownPythonToolboxCategories, i18n]);
+
   const { Sider, Content } = Antd.Layout;
 
   return (
@@ -392,6 +434,7 @@ const App: React.FC = (): React.JSX.Element => {
               <Content>
                 <BlocklyComponent 
                   theme={theme}
+                  onWorkspaceRecreated={setupWorkspace}
                   ref={blocklyComponent} 
                 />
               </Content>

src/App.tsx

@@ -481,12 +481,14 @@ const CALL_PYTHON_FUNCTION = {
       returnType: this.mrcReturnType,
       args: [],
     };
-    this.mrcArgs.forEach((arg) => {
-      extraState.args.push({
-        'name': arg.name,
-        'type': arg.type,
+    if (this.mrcArgs){
+      this.mrcArgs.forEach((arg) => {
+        extraState.args.push({
+          'name': arg.name,
+          'type': arg.type,
+        });
       });
-    });
+    }
     if (this.mrcTooltip) {
       extraState.tooltip = this.mrcTooltip;
     }

src/blocks/mrc_call_python_function.ts

@@ -95,6 +95,7 @@ const CLASS_METHOD_DEF = {
         this.mrcParameters = [];
         this.setPreviousStatement(false);
         this.setNextStatement(false);
+        this.updateBlock_();
     },
     /**
        * Returns the state of this block as a JSON serializable object.

src/blocks/mrc_class_method_def.ts

@@ -69,7 +69,7 @@ const COMPONENT = {
     this.setStyle(MRC_STYLE_COMPONENTS);
     this.appendDummyInput()
       .appendField(new Blockly.FieldTextInput(''), FIELD_NAME)
-      .appendField('of type')
+      .appendField(Blockly.Msg.OF_TYPE)
       .appendField(createFieldNonEditableText(''), FIELD_TYPE);
     this.setPreviousStatement(true, OUTPUT_NAME);
     this.setNextStatement(true, OUTPUT_NAME);
@@ -82,12 +82,14 @@ const COMPONENT = {
     const extraState: ComponentExtraState = {
     };
     extraState.params = [];
-    this.mrcArgs.forEach((arg) => {
-      extraState.params!.push({
-        'name': arg.name,
-        'type': arg.type,
+    if (this.mrcArgs){
+      this.mrcArgs.forEach((arg) => {
+        extraState.params!.push({
+          'name': arg.name,
+          'type': arg.type,
+        });
       });
-    });
+    }
     if (this.mrcImportModule) {
       extraState.importModule = this.mrcImportModule;
     }

src/blocks/mrc_component.ts

@@ -65,11 +65,11 @@ const EVENT_HANDLER = {
    */
   init(this: EventHandlerBlock): void {
     this.appendDummyInput('TITLE')
-        .appendField('When')
+        .appendField(Blockly.Msg.WHEN)
         .appendField(createFieldNonEditableText('sender'), 'SENDER')
         .appendField(createFieldNonEditableText('eventName'), 'EVENT_NAME');
     this.appendDummyInput('PARAMS')
-        .appendField('with');
+        .appendField(Blockly.Msg.WITH);
     this.setOutput(false);
     this.setStyle(MRC_STYLE_EVENT_HANDLER);
     this.appendStatementInput('STACK').appendField('');

src/blocks/mrc_event_handler.ts

@@ -49,7 +49,7 @@ const GET_PARAMETER_BLOCK = {
   init: function(this: GetParameterBlock): void {
     this.setStyle(MRC_STYLE_VARIABLES);
     this.appendDummyInput()
-        .appendField('parameter')
+        .appendField(Blockly.Msg.PARAMETER)
         .appendField(createFieldNonEditableText('parameter'), 'PARAMETER_NAME');
 
     this.setOutput(true, this.parameterType);
@@ -89,7 +89,7 @@ const GET_PARAMETER_BLOCK = {
       }
       // If we end up here it shouldn't be allowed
       block.unplug(true);
-      blockBlock.setWarningText('Parameters can only go in their method\'s block.');
+      blockBlock.setWarningText(Blockly.Msg.PARAMETERS_CAN_ONLY_GO_IN_THEIR_METHODS_BLOCK);
     }
   },
 };

src/blocks/mrc_get_parameter.ts

@@ -55,7 +55,7 @@ const MECHANISM = {
     this.setStyle(MRC_STYLE_MECHANISMS);
     this.appendDummyInput()
       .appendField(new Blockly.FieldTextInput('my_mech'), 'NAME')
-      .appendField('of type')
+      .appendField(Blockly.Msg.OF_TYPE)
       .appendField(createFieldNonEditableText(''), 'TYPE');
     this.setPreviousStatement(true, OUTPUT_NAME);
     this.setNextStatement(true, OUTPUT_NAME);

src/blocks/mrc_mechanism.ts

@@ -72,9 +72,9 @@ const MECHANISM_COMPONENT_HOLDER = {
     */
   init: function (this: MechanismComponentHolderBlock): void {
     this.setInputsInline(false);
-    this.appendStatementInput('MECHANISMS').setCheck(MECHANISM_OUTPUT).appendField('Mechanisms');
-    this.appendStatementInput('COMPONENTS').setCheck(COMPONENT_OUTPUT).appendField('Components');
-    this.appendStatementInput('EVENTS').setCheck(EVENT_OUTPUT).appendField('Events');
+    this.appendStatementInput('MECHANISMS').setCheck(MECHANISM_OUTPUT).appendField(Blockly.Msg.MECHANISMS);
+    this.appendStatementInput('COMPONENTS').setCheck(COMPONENT_OUTPUT).appendField(Blockly.Msg.COMPONENTS);
+    this.appendStatementInput('EVENTS').setCheck(EVENT_OUTPUT).appendField(Blockly.Msg.EVENTS);
 
 
     this.setOutput(false);

src/blocks/mrc_mechanism_component_holder.ts

@@ -31,14 +31,13 @@ export const setup = function() {
   Blockly.Blocks[BLOCK_NAME] = {
     init: function() {
       this.appendValueInput('VALUE')
-          .appendField('evaluate but ignore result')
+          .appendField(Blockly.Msg.EVALUATE_BUT_IGNORE_RESULT)
           .setAlign(Blockly.inputs.Align.RIGHT);
       this.setPreviousStatement(true);
       this.setNextStatement(true);
       this.setStyle(MRC_STYLE_MISC);
       this.setTooltip(
-          'Executes the connected block and ignores the result. ' +
-          'Allows you to call a function and ignore the return value.');
+          Blockly.Msg.EVALUATE_BUT_IGNORE_RESULT_TOOLTIP);
     },
   };
 };