[FR-42] fix: modify i18n translation json to conform to conventions (#…

…2994)

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

### This PR resolves [#2872](#2872) issue

Fixed i18n translation json to match WebUI conventions.
- Namespaces that represent objects are written in camel case.
- Namespaces corresponding to the key of the translation string are written in Pascal case.

**Checklist:** (if applicable)

- [x] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

react/src/components/AgentSelect.tsx

@@ -119,7 +119,7 @@ const AgentSelect: React.FC<Props> = ({
       {...selectProps}
       value={value}
       options={[
-        { label: t('session.launcher.autoSelect'), value: 'auto' },
+        { label: t('session.launcher.AutoSelect'), value: 'auto' },
         ...agentOptions,
       ]}
     />

react/src/components/BAIErrorBoundary.tsx

@@ -39,8 +39,8 @@ const BAIErrorBoundary: React.FC<BAIErrorBoundaryProps> = ({
               status="warning"
               title={
                 isLoginSessionExpiredError
-                  ? t('ErrorBoundary.expiredLoginSessionTitle')
-                  : t('ErrorBoundary.title')
+                  ? t('errorBoundary.ExpiredLoginSessionTitle')
+                  : t('errorBoundary.Title')
               }
               extra={
                 <Flex direction="column" gap="md">
@@ -60,8 +60,8 @@ const BAIErrorBoundary: React.FC<BAIErrorBoundaryProps> = ({
                     icon={<ReloadOutlined />}
                   >
                     {isLoginSessionExpiredError
-                      ? t('ErrorBoundary.expiredLoginSessionReLogin')
-                      : t('ErrorBoundary.reloadPage')}
+                      ? t('errorBoundary.ExpiredLoginSessionReLogin')
+                      : t('errorBoundary.ReloadPage')}
                   </Button>
                   {process.env.NODE_ENV === 'development' && (
                     <Flex
@@ -82,12 +82,12 @@ const BAIErrorBoundary: React.FC<BAIErrorBoundaryProps> = ({
                                 resetErrorBoundary();
                               }}
                             >
-                              {t('ErrorBoundary.resetErrorBoundary')}
+                              {t('errorBoundary.ResetErrorBoundary')}
                             </Button>
                             <Typography.Text>{error.message}</Typography.Text>
                           </Flex>
                         }
-                        message={t('ErrorBoundary.displayOnlyDevEnv')}
+                        message={t('errorBoundary.DisplayOnlyDevEnv')}
                       />
                     </Flex>
                   )}
@@ -107,7 +107,7 @@ export const ErrorView = () => {
   return (
     <Result
       status="warning"
-      title={t('ErrorBoundary.title')}
+      title={t('errorBoundary.Title')}
       extra={
         <Flex direction="column" gap="md">
           <Button
@@ -124,7 +124,7 @@ export const ErrorView = () => {
             }}
             icon={<ReloadOutlined />}
           >
-            {t('ErrorBoundary.reloadPage')}
+            {t('errorBoundary.ReloadPage')}
           </Button>
         </Flex>
       }

react/src/components/BAIPropertyFilter.tsx

@@ -280,7 +280,7 @@ const BAIPropertyFilter: React.FC<BAIPropertyFilterProps> = ({
                   : option.label?.toString().includes(search);
               },
             )}
-            placeholder={t('propertyFilter.placeHolder')}
+            placeholder={t('propertyFilter.PlaceHolder')}
             onBlur={() => {
               setIsFocused(false);
             }}

react/src/components/ComputeSessionNodeItems/TerminateSessionModal.tsx

@@ -316,7 +316,7 @@ const TerminateSessionModal: React.FC<TerminateSessionModalProps> = ({
         gap={'xs'}
       >
         <Typography.Text>
-          {t('usersettings.SessionTerminationDialog')}
+          {t('userSettings.SessionTerminationDialog')}
         </Typography.Text>
         <Typography.Text mark>
           {sessions.length === 1

react/src/components/KeypairInfoModal.tsx

@@ -123,7 +123,7 @@ const KeypairInfoModal: React.FC<KeypairInfoModalProps> = ({
           {keypair?.concurrency_used}
         </Descriptions.Item>
         <Descriptions.Item
-          label={`${t('credential.RateLimit')} ${t('credential.for900seconds')}`}
+          label={`${t('credential.RateLimit')} ${t('credential.For900Seconds')}`}
         >
           {keypair?.rate_limit}
         </Descriptions.Item>

react/src/components/MyKeypairInfoModal.tsx

@@ -60,7 +60,7 @@ const MyKeypairInfoModal: React.FC<MyKeypairInfoModalProps> = ({
   return (
     <BAIModal
       {...baiModalProps}
-      title={t('usersettings.MyKeypairInfo')}
+      title={t('userSettings.MyKeypairInfo')}
       centered
       onCancel={onRequestClose}
       destroyOnClose

react/src/components/PortSelectFormItem.tsx

@@ -115,7 +115,7 @@ const PortSelectFormItem: React.FC<Props> = ({
           );
         }}
         style={{ width: '100%' }}
-        // placeholder={t('session.launcher.preopen')}
+        // placeholder={t('session.launcher.PreOpen')}
         // options={_.map(portGuides, (v, k) => ({
         //   value: parseInt(k),
         //   // label: `${k} - ${v}`,

react/src/components/SSHKeypairGenerationModal.tsx

@@ -33,13 +33,13 @@ const SSHKeypairGenerationModal: React.FC<SSHKeypairGenerationModalProps> = ({
 
   return (
     <BAIModal
-      title={t('usersettings.SSHKeypairGeneration')}
+      title={t('userSettings.SSHKeypairGeneration')}
       closeIcon={false}
       footer={[
         <Popconfirm
           key="close"
           title={t('button.Confirm')}
-          description={t('usersettings.ClearSSHKeypairInput')}
+          description={t('userSettings.ClearSSHKeypairInput')}
           onConfirm={onRequestClose}
         >
           <Button>{t('button.Close')}</Button>
@@ -48,7 +48,7 @@ const SSHKeypairGenerationModal: React.FC<SSHKeypairGenerationModalProps> = ({
       {...baiModalProps}
     >
       <Spin spinning={isRefreshModalPending} indicator={<LoadingOutlined />}>
-        <Typography.Text strong>{t('usersettings.PublicKey')}</Typography.Text>
+        <Typography.Text strong>{t('userSettings.PublicKey')}</Typography.Text>
         <Flex direction="row" align="start" justify="between">
           <Typography.Paragraph>
             <pre
@@ -67,7 +67,7 @@ const SSHKeypairGenerationModal: React.FC<SSHKeypairGenerationModalProps> = ({
             style={{ marginTop: token.margin }}
           />
         </Flex>
-        <Typography.Text strong>{t('usersettings.PrivateKey')}</Typography.Text>
+        <Typography.Text strong>{t('userSettings.PrivateKey')}</Typography.Text>
         <Flex direction="row" align="start" justify="between">
           <Typography.Paragraph>
             <pre
@@ -81,7 +81,7 @@ const SSHKeypairGenerationModal: React.FC<SSHKeypairGenerationModalProps> = ({
               {data?.ssh_private_key}
             </pre>
             <Typography.Text type="danger">
-              {t('usersettings.SSHKeypairGenerationWarning')}
+              {t('userSettings.SSHKeypairGenerationWarning')}
             </Typography.Text>
           </Typography.Paragraph>
           <Typography.Text

react/src/components/SSHKeypairManagementModal.tsx

@@ -43,7 +43,7 @@ const SSHKeypairManagementModal: React.FC<SSHKeypairManagementModalProps> = ({
   return (
     <>
       <BAIModal
-        title={t('usersettings.SSHKeypairGeneration')}
+        title={t('userSettings.SSHKeypairGeneration')}
         onCancel={() => onRequestClose()}
         footer={[
           <Button key="back" onClick={() => onRequestClose()}>
@@ -67,7 +67,7 @@ const SSHKeypairManagementModal: React.FC<SSHKeypairManagementModalProps> = ({
         {...modalProps}
       >
         <Typography.Text strong>
-          {t('usersettings.CurrentSSHPublicKey')}
+          {t('userSettings.CurrentSSHPublicKey')}
         </Typography.Text>
         {data?.ssh_public_key ? (
           <Flex direction="row" align="start" justify="between">
@@ -84,7 +84,7 @@ const SSHKeypairManagementModal: React.FC<SSHKeypairManagementModalProps> = ({
         ) : (
           <Typography.Paragraph>
             <pre style={{ height: 270 }}>
-              {t('usersettings.NoExistingSSHKeypair')}
+              {t('userSettings.NoExistingSSHKeypair')}
             </pre>
           </Typography.Paragraph>
         )}

react/src/components/SSHKeypairManualFormModal.tsx

@@ -27,7 +27,7 @@ const SSHKeypairManualFormModal: React.FC<SSHKeypairManualFormModalProps> = ({
 
   return (
     <BAIModal
-      title={t('usersettings.SSHKeypairEnterManually')}
+      title={t('userSettings.SSHKeypairEnterManually')}
       okText={t('button.Save')}
       onOk={() => {
         formRef.current
@@ -55,7 +55,7 @@ const SSHKeypairManualFormModal: React.FC<SSHKeypairManualFormModalProps> = ({
           name="pubkey"
           label={
             <Typography.Text strong>
-              {t('usersettings.PublicKey')}
+              {t('userSettings.PublicKey')}
             </Typography.Text>
           }
           rules={[{ required: true, message: t('settings.InputRequired') }]}
@@ -70,7 +70,7 @@ const SSHKeypairManualFormModal: React.FC<SSHKeypairManualFormModalProps> = ({
           name="privkey"
           label={
             <Typography.Text strong>
-              {t('usersettings.PrivateKey')}
+              {t('userSettings.PrivateKey')}
             </Typography.Text>
           }
           rules={[{ required: true, message: t('settings.InputRequired') }]}

react/src/components/SessionLauncherErrorTourProps.tsx

@@ -13,24 +13,24 @@ const SessionLauncherValidationTour: React.FC<
 
   const steps = [
     {
-      title: t('tourguide.NeoSessionLauncher.ValidationErrorTitle'),
-      description: t('tourguide.NeoSessionLauncher.ValidationErrorText'),
+      title: t('tourGuide.neoSessionLauncher.ValidationErrorTitle'),
+      description: t('tourGuide.neoSessionLauncher.ValidationErrorText'),
       target: () =>
         document.getElementsByClassName('bai-card-error')?.[0] as HTMLElement,
     },
     {
-      title: t('tourguide.NeoSessionLauncher.ValidationErrorTitle'),
+      title: t('tourGuide.neoSessionLauncher.ValidationErrorTitle'),
       description: t(
-        'tourguide.NeoSessionLauncher.FixErrorFieldbyModifyButton',
+        'tourGuide.neoSessionLauncher.FixErrorFieldByModifyButton',
       ),
       target: () =>
         (
           document.getElementsByClassName('bai-card-error')?.[0] as HTMLElement
         )?.querySelector('.ant-card-extra') as HTMLElement,
     },
     {
-      title: t('tourguide.NeoSessionLauncher.ValidationErrorTitle'),
-      description: t('tourguide.NeoSessionLauncher.FixErrorAndTryAgainText'),
+      title: t('tourGuide.neoSessionLauncher.ValidationErrorTitle'),
+      description: t('tourGuide.neoSessionLauncher.FixErrorAndTryAgainText'),
       target: () =>
         document.querySelector(
           '[data-test-id="neo-session-launcher-tour-step-navigation"]',

react/src/components/ShellScriptEditModal.tsx

@@ -114,12 +114,12 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
   const saveScript = ({ closeAfter = true } = {}) => {
     if (shellInfo === 'bootstrap') {
       if (!script) {
-        app.message.error(t('usersettings.BootstrapScriptEmpty'));
+        app.message.error(t('userSettings.BootstrapScriptEmpty'));
         return;
       }
       updateBootStrapScriptMutation.mutate(script, {
         onSuccess: (result) => {
-          app.message.success(t('usersettings.BootstrapScriptUpdated'));
+          app.message.success(t('userSettings.BootstrapScriptUpdated'));
           closeAfter && onRequestClose();
         },
         onError: (error: any) => {
@@ -134,30 +134,30 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
       if (existValidator) {
         updateUserConfigScriptMutation.mutate(script, {
           onSuccess: (result) => {
-            app.message.success(t('usersettings.DescScriptUpdated'));
+            app.message.success(t('userSettings.DescScriptUpdated'));
             if (closeAfter) {
               onRequestClose();
             } else {
               fetchScript();
             }
           },
           onError: (error: any) => {
-            app.message.error(t('usersettings.DescNewUserConfigFileCreated'));
+            app.message.error(t('userSettings.DescNewUserConfigFileCreated'));
             console.error(error);
           },
         });
       } else {
         createUserConfigScriptMutation.mutate(script, {
           onSuccess: (result) => {
-            app.message.success(t('usersettings.DescScriptCreated'));
+            app.message.success(t('userSettings.DescScriptCreated'));
             if (closeAfter) {
               onRequestClose();
             } else {
               fetchScript();
             }
           },
           onError: (error: any) => {
-            app.message.error(t('usersettings.DescNewUserConfigFileCreated'));
+            app.message.error(t('userSettings.DescNewUserConfigFileCreated'));
             console.error(error);
           },
         });
@@ -169,7 +169,7 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
     if (shellInfo === 'bootstrap') {
       updateBootStrapScriptMutation.mutate('', {
         onSuccess: (result) => {
-          app.message.success(t('usersettings.BootstrapScriptDeleted'));
+          app.message.success(t('userSettings.BootstrapScriptDeleted'));
           onRequestClose();
         },
         onError: (error: any) => {
@@ -182,7 +182,7 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
       deleteUserConfigScriptMutation.mutate(undefined, {
         onSuccess: (result) => {
           app.message.success(
-            `${t('usersettings.DescScriptDeleted')}${rcfileNames}`,
+            `${t('userSettings.DescScriptDeleted')}${rcfileNames}`,
           );
           onRequestClose();
         },
@@ -199,8 +199,8 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
       width={800}
       title={
         shellInfo === 'bootstrap'
-          ? t('usersettings.EditBootstrapScript')
-          : t('usersettings.EditUserConfigScript')
+          ? t('userSettings.EditBootstrapScript')
+          : t('userSettings.EditUserConfigScript')
       }
       onCancel={() => onRequestClose()}
       okText={t('button.Save')}
@@ -285,7 +285,7 @@ const ShellScriptEditModal: React.FC<BootstrapScriptEditModalProps> = ({
     >
       <Flex direction="column" align="stretch" gap={'sm'}>
         <Typography.Text>
-          {t('usersettings.BootstrapScriptDescription')}
+          {t('userSettings.BootstrapScriptDescription')}
         </Typography.Text>
         {shellInfo === 'userconfig' && (
           <Select

react/src/components/StorageStatusPanel.tsx

@@ -318,7 +318,7 @@ const StorageStatusPanel: React.FC<{
     },
     {
       key: 'userQuotaScopeId',
-      label: t('data.userQuotaScopeId'),
+      label: t('data.UserQuotaScopeId'),
       children: (
         <Typography.Text copyable>
           {addQuotaScopeTypePrefix('user', user?.id || '')}

react/src/helper/index.tsx

@@ -443,11 +443,11 @@ export function preserveDotStartCase(str: string = '') {
 export function formatDuration(duration: Duration, t: TFunction) {
   // We need to `t` function to translate the time unit in React render phase
   return [
-    duration.weeks() ? `${duration.weeks()} ${t('time.week')}` : '',
-    duration.days() ? `${duration.days()} ${t('time.day')}` : '',
-    duration.hours() ? `${duration.hours()} ${t('time.hour')}` : '',
-    duration.minutes() ? `${duration.minutes()} ${t('time.min')}` : '',
-    duration.seconds() ? `${duration.seconds()} ${t('time.sec')}` : '',
+    duration.weeks() ? `${duration.weeks()} ${t('time.Week')}` : '',
+    duration.days() ? `${duration.days()} ${t('time.Day')}` : '',
+    duration.hours() ? `${duration.hours()} ${t('time.Hour')}` : '',
+    duration.minutes() ? `${duration.minutes()} ${t('time.Min')}` : '',
+    duration.seconds() ? `${duration.seconds()} ${t('time.Sec')}` : '',
   ]
     .filter(Boolean)
     .join(' ');

react/src/pages/InteractiveLoginPage.tsx

@@ -38,7 +38,7 @@ const Children = () => {
     >
       <Card title={t('interactiveLogin.InteractiveLoginWithBackendAI')}>
         <Flex direction="column" gap={'sm'} align="stretch">
-          {t('interactiveLogin.confirmLoginMessage', {
+          {t('interactiveLogin.ConfirmLoginMessage', {
             username: userInfo.username,
             email: userInfo.email,
           })}
@@ -84,7 +84,7 @@ const Children = () => {
                 document.dispatchEvent(event);
               }}
             >
-              {t('interactiveLogin.useAnotherAccount')}
+              {t('interactiveLogin.UseAnotherAccount')}
             </Button>
             <Button
               size="large"

react/src/pages/SessionLauncherPage.tsx

@@ -1121,23 +1121,23 @@ const SessionLauncherPage = () => {
                                                   style={{ minWidth: 75 }}
                                                   options={[
                                                     {
-                                                      label: t('time.sec'),
+                                                      label: t('time.Sec'),
                                                       value: 's',
                                                     },
                                                     {
-                                                      label: t('time.min'),
+                                                      label: t('time.Min'),
                                                       value: 'm',
                                                     },
                                                     {
-                                                      label: t('time.hour'),
+                                                      label: t('time.Hour'),
                                                       value: 'h',
                                                     },
                                                     {
-                                                      label: t('time.day'),
+                                                      label: t('time.Day'),
                                                       value: 'd',
                                                     },
                                                     {
-                                                      label: t('time.week'),
+                                                      label: t('time.Week'),
                                                       value: 'w',
                                                     },
                                                   ]}