Merge pull request #100 from Open-STEM/kq-bugs

Fixed the layout translation

Author: kcq888

src/assets/images/shell.svg

@@ -42,7 +42,6 @@ function SettingsDlg({ isXrpConnected, toggleDialog }: SettingsProps) {
     const [isValidUsername, setIsValidUsername] = useState<boolean | null>(null);
     const [, setLSXrpUser] = useLocalStorage(StorageKeys.XRPUSER, '');
     const modeLogger = logger.child({ module: 'modes' });
-    const [language, setLanguage] = useLocalStorage(StorageKeys.LANGUAGE, 'en');
 
     const authService = AppMgr.getInstance().authService;
     const USERS = '/users/';
@@ -168,9 +167,8 @@ function SettingsDlg({ isXrpConnected, toggleDialog }: SettingsProps) {
      */
     const handleLanguageChange = (event: { target: { value: string } }) => {
         const newLanguage = event.target.value;
-        setLanguage(newLanguage);
         i18n.changeLanguage(newLanguage);
-        if (modeValue === ModeType.GOOUSER) {
+        if (modeValue === ModeType.GOOUSER && authService.isLogin) {
             fireGoogleUserTree(username ?? '');            
         } else if (modeValue === ModeType.SYSTEM || modeValue === ModeType.USER) {
             CommandToXRPMgr.getInstance().getOnBoardFSTree();
@@ -432,7 +430,7 @@ function SettingsDlg({ isXrpConnected, toggleDialog }: SettingsProps) {
                         <select
                             id="languageSelectedId"
                             className="dark:text-white block rounded border border-s-2 border-shark-300 border-s-curious-blue-500 bg-mountain-mist-100 p-2.5 text-sm text-mountain-mist-700 focus:border-mountain-mist-500 focus:ring-curious-blue-500 dark:border-shark-600 dark:border-s-shark-500 dark:bg-shark-500 dark:text-mountain-mist-200 dark:placeholder-mountain-mist-400 dark:focus:border-matisse-500 dark:focus:ring-shark-300"
-                            value={language}
+                            value={i18n.language}
                             onChange={handleLanguageChange}
                         >
                             {languageOptions.map((option) => (

src/components/dialogs/settings.tsx

@@ -1,10 +1,10 @@
-import { Layout, Model, IJsonModel, TabNode, Action, Actions } from 'flexlayout-react';
+import { Layout, Model, IJsonModel, TabNode, Action, Actions, ITabRenderValues } from 'flexlayout-react';
 import React, { useEffect } from 'react';
 import BlocklyEditor from '@components/blockly';
 import MonacoEditor from '@components/MonacoEditor';
 import XRPShell from '@components/xrpshell';
 import FolderIcon from '@assets/images/folder-24.png';
-import i18n from '@/utils/i18n';
+import ShellIcon from '@assets/images/shell.svg';
 //import treeDaaJson from '@/utils/testdata';
 import AppMgr, { EventType, Themes } from '@/managers/appmgr';
 import FolderTree from './folder-tree';
@@ -16,6 +16,7 @@ import EditorMgr, { EditorStore } from '@/managers/editormgr';
 import { CreateEditorTab } from '@/utils/editorUtils';
 import XRPDashboard from '@/components/dashboard/xrp-dashboard';
 import AIChat from '@/components/chat/ai-chat';
+import { useTranslation } from 'react-i18next';
 
 /**
  *  Layout-React's layout JSON to specify the XRPWeb's single page application's layout
@@ -40,7 +41,7 @@ const layout_json: IJsonModel = {
                 {
                     type: 'tab',
                     id: Constants.FOLDER_TAB_ID,
-                    name: i18n.t('folders'),
+                    name: 'folders',
                     component: 'folders',
                     enableClose: false,
                     icon: FolderIcon,
@@ -74,8 +75,8 @@ const layout_json: IJsonModel = {
                         children: [
                             {
                                 type: 'tab',
-                                id: 'shellId',
-                                name: i18n.t('shell'),
+                                id: Constants.SHELL_TAB_ID,
+                                name: 'shell',
                                 component: 'xterm',
                                 enableClose: false,
                             },
@@ -139,6 +140,7 @@ function useOnceCall(cb: () => void, condition = true) {
  */
 function XRPLayout({ forwardedref }: XRPLayoutProps) {
     const [activeTab, setActiveTab] = useLocalStorage(StorageKeys.ACTIVETAB, '');
+    const { t } = useTranslation();
 
     /**
      * changeTheme - set the system selected theme
@@ -268,7 +270,24 @@ function XRPLayout({ forwardedref }: XRPLayoutProps) {
         return action;
     }
 
-    return <Layout ref={forwardedref} model={model} factory={factory} onAction={handleActions} />;
+    /**
+     * onRenderTab - render the tab with custom functionality
+     * @param node 
+     * @param renderValues
+     * @returns 
+     */
+    const onRenderTab = (node: TabNode, renderValues: ITabRenderValues) => {
+        // Override the content to use the translated tab names
+        if (node.getId() === Constants.FOLDER_TAB_ID) {
+            renderValues.leading = <img src={FolderIcon} alt="icon" style={{ width: '16px', height: '16px', marginRight: '16px' }} />;
+        } else if (node.getId() === Constants.SHELL_TAB_ID) {
+            renderValues.leading = <img src={ShellIcon} alt="icon" style={{ width: '16px', height: '16px', marginRight: '0px' }} />;
+        }
+        renderValues.content = t(node.getName());
+        return renderValues;
+    };
+
+    return <Layout ref={forwardedref} model={model} factory={factory} onAction={handleActions} onRenderTab={onRenderTab}/>;
 }
 
 export default XRPLayout;

src/components/xrplayout.tsx

@@ -2,6 +2,7 @@ export class Constants {
     static readonly APP_VERSION = '2.0.1';
     static readonly EDITOR_TABSET_ID = 'editorTabSetId';
     static readonly SHELL_TABSET_ID = 'shellTabSetId';
+    static readonly SHELL_TAB_ID = 'shellTabId';
     static readonly FOLDER_TAB_ID = 'folderTabId';
     static readonly AI_CHAT_TAB_ID = 'aiChatTabId';
     static readonly DEFAULT_FONTSIZE = 14;