[Fix-1126] [web] Fix internationalization does not take effect (#1127)

Co-authored-by: wenmo <32723967+wenmo@users.noreply.github.com>

dlink-web/config/routes.ts

@@ -35,8 +35,8 @@ export default [
     ],
   },
   {
-    path: '/datastudio',
-    name: 'datastudio',
+    path: '/dataStudio',
+    name: 'dataStudio',
     icon: 'consoleSql',
     footerRender: false,
     component: './DataStudio',
@@ -131,31 +131,31 @@ export default [
     ],
   },
   {
-    name: 'authenticationcenter',
+    name: 'authenticationCenter',
     icon: 'SafetyCertificateOutlined',
-    path: '/authenticationcenter',
+    path: '/authenticationCenter',
     routes: [
       {
-        path: '/authenticationcenter/usermanager',
-        name: 'usermanager',
+        path: '/authenticationCenter/userManager',
+        name: 'userManager',
         icon: 'UserOutlined',
         component: './AuthenticationCenter/UserManager',
       },
       {
-        path: '/authenticationcenter/rolemanager',
-        name: 'rolemanager',
+        path: '/authenticationCenter/roleManager',
+        name: 'roleManager',
         icon: 'TeamOutlined',
         component: './AuthenticationCenter/RoleManager',
       },
       {
-        path: '/authenticationcenter/namespacemanager',
-        name: 'namespacemanager',
+        path: '/authenticationCenter/namespaceManager',
+        name: 'namespaceManager',
         icon: 'BulbOutlined',
         component: './AuthenticationCenter/NamespaceManager',
       },
       {
-        path: '/authenticationcenter/tenantmanager',
-        name: 'tenantmanager',
+        path: '/authenticationCenter/tenantManager',
+        name: 'tenantManager',
         icon: 'SecurityScanOutlined',
         component: './AuthenticationCenter/TenantManager',
       },
@@ -163,33 +163,33 @@ export default [
   },
   {
     path: '/',
-    redirect: '/datastudio',
+    redirect: '/dataStudio',
   },
   {
     name: 'settings',
     icon: 'setting',
-    path: '/settingcenter',
+    path: '/settingCenter',
     routes: [
       {
-        path: '/settingcenter/flinksettings',
+        path: '/settingCenter/flinkSettings',
         name: 'flinkConfig',
         icon: 'setting',
         component: './SettingCenter/FlinkSettings',
       },
       {
-        path: '/settingcenter/udfTemplate',
+        path: '/settingCenter/udfTemplate',
         name: 'udfTemplate',
         icon: 'setting',
         component: './SettingCenter/UDFTemplate',
       },
       {
-        path: '/settingcenter/systeminfo',
+        path: '/settingCenter/systemInfo',
         name: 'systemInfo',
         icon: 'desktop',
         component: './SettingCenter/SystemInfo',
       },
       {
-        path: '/settingcenter/processList',
+        path: '/settingCenter/processList',
         name: 'processList',
         icon: 'desktop',
         component: './SettingCenter/ProcessList',

dlink-web/src/components/Footer/index.tsx

@@ -23,13 +23,13 @@ import {GithubOutlined} from '@ant-design/icons';
 import {DefaultFooter} from '@ant-design/pro-layout';
 
 export default () => {
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-  const defaultMessage = l('app.copyright.produced', 'Dinky');
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   return (
     <DefaultFooter
-      copyright={`2022 ${defaultMessage}`}
+      copyright={l('app.copyright.produced', 'Produced by Dinky Community')}
       links={[
         {
           key: 'Dinky',

dlink-web/src/components/Studio/StudioConsole/index.tsx

@@ -41,8 +41,8 @@ const {TabPane} = Tabs;
 
 const StudioConsole = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {height, current} = props;
   let consoleHeight = (height - 37.6);

dlink-web/src/components/Studio/StudioHome/index.tsx

@@ -27,8 +27,10 @@ import {VERSION} from "@/components/Common/Version";
 const {Title, Paragraph, Text} = Typography;
 
 const StudioHome = (props: any) => {
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
+
   const {toolHeight} = props;
 
   return (

dlink-web/src/components/Studio/StudioLeftTool/index.tsx

@@ -42,8 +42,9 @@ import StudioFragment from "@/components/Studio/StudioLeftTool/StudioFragment";
 const {TabPane} = Tabs;
 
 const StudioLeftTool = (props: any) => {
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+
+  const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage})
+
   const {toolHeight} = props;
 
   return (

dlink-web/src/components/Studio/StudioRightTool/StudioGuide/index.tsx

@@ -28,8 +28,8 @@ import { history,useIntl } from 'umi';
 const {Title, Paragraph,Link, Text} = Typography;
 
 const StudioGuide = (props: any) => {
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+
+  const l = (id: string, defaultMessage?: string) => useIntl().formatMessage({id,defaultMessage});
 
   const {toolHeight} = props;
 

dlink-web/src/components/Studio/StudioRightTool/StudioSqlConfig/index.tsx

@@ -32,14 +32,13 @@ const { Option } = Select;
 
 const StudioSqlConfig = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {current,form,dispatch,tabs,database,toolHeight} = props;
 
   form.setFieldsValue(current.task);
 
-
   const onValuesChange = (change:any,all:any)=>{
     let newTabs = tabs;
     for(let i=0;i<newTabs.panes.length;i++){

dlink-web/src/locales/en-US.ts

@@ -32,7 +32,7 @@ export default {
   'layout.user.link.help': 'Help',
   'layout.user.link.privacy': 'Privacy',
   'layout.user.link.terms': 'Terms',
-  'app.copyright.produced': 'Produced by DataLink Community',
+  'app.copyright.produced': '2022 Produced by Dinky Community',
   'app.preview.down.block': 'Download this page to your local project',
   'app.welcome.link.fetch-blocks': 'Get all block',
   'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development',

dlink-web/src/locales/en-US/menu.ts

@@ -74,7 +74,7 @@ export default {
   'menu.account.logout': 'Logout',
 
 
-  'menu.datastudio': 'Data Studio',
+  'menu.dataStudio': 'Data Studio',
 
   'menu.devops': 'Devops',
   'menu.job': 'Job Instance',
@@ -82,7 +82,7 @@ export default {
   'menu.datacenter': 'Meta Data Center',
   'menu.datacenter.metadata': 'Meta Data',
 
-  'menu.registration': 'Regist Center',
+  'menu.registration': 'Registration Center',
   'menu.registration.cluster': 'Cluster Management',
   'menu.registration.cluster.clusterInstance': 'Cluster Instance',
   'menu.registration.cluster.clusterConfiguration': 'Cluster Config',
@@ -94,11 +94,11 @@ export default {
   'menu.registration.document': 'Document Management',
   'menu.registration.fragment': 'Global Variable Management',
 
-  'menu.authenticationcenter': 'Authentication Center',
-  'menu.authenticationcenter.usermanager': 'User Management',
-  'menu.authenticationcenter.namespacemanager': 'NameSpace Management',
-  'menu.authenticationcenter.rolemanager': 'Role Management',
-  'menu.authenticationcenter.tenantmanager': 'Tenant Management',
+  'menu.authenticationCenter': 'Authentication Center',
+  'menu.authenticationCenter.userManager': 'User Management',
+  'menu.authenticationCenter.namespaceManager': 'NameSpace Management',
+  'menu.authenticationCenter.roleManager': 'Role Management',
+  'menu.authenticationCenter.tenantManager': 'Tenant Management',
 
   'menu.settings': 'Setting Center',
   'menu.settings.flinkConfig': 'Flink Settings',

dlink-web/src/locales/en-US/pages.ts

@@ -46,7 +46,7 @@ export default {
   'pages.welcome.advancedComponent': 'Advanced Component',
   'pages.welcome.link': 'Welcome',
   'pages.welcome.advancedLayout': 'Advanced Layout',
-  'pages.welcome.alertMessage': 'Faster And Stronger Heavy-duty Components Have Been Released',
+  'pages.welcome.alertMessage': 'Faster And Stronger Heavy-duty Components Have Been Released {version}.',
   'pages.admin.subPage.title': 'This Page Can Only Be Viewed By Admin',
   'pages.admin.subPage.alertMessage':
     'Umi UI Is Now Released, Welcome To Use Npm Run UI To Start The Experience.',
@@ -85,7 +85,7 @@ export default {
   'pages.searchTable.item': 'Item',
   'pages.searchTable.totalServiceCalls': 'Total Number Of Service Calls',
   'pages.searchTable.tenThousand': '0000',
-  'pages.searchTable.batchDeletion': 'Bacth Deletion',
+  'pages.searchTable.batchDeletion': 'Batch Deletion',
   'pages.searchTable.batchApproval': 'Batch Approval',
 
 

dlink-web/src/locales/zh-CN.ts

@@ -35,7 +35,7 @@ export default {
   'app.preview.down.block': '下载此页面到本地项目',
   'app.welcome.link.fetch-blocks': '获取全部区块',
   'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面',
-  'app.copyright.produced': 'Produced by DataLink Community',
+  'app.copyright.produced': '2022 Produced by Dinky Community',
   ...pages,
   ...globalHeader,
   ...menu,

dlink-web/src/locales/zh-CN/menu.ts

@@ -78,7 +78,7 @@ export default {
   'menu.account.checkTenant': '切换租户',
   'menu.account.logout': '退出登录',
 
-  'menu.datastudio': '数据开发',
+  'menu.dataStudio': '数据开发',
 
   'menu.devops': '运维中心',
   'menu.job': '作业实例',
@@ -98,11 +98,11 @@ export default {
   'menu.registration.document': '文档管理',
   'menu.registration.fragment': '全局变量管理',
 
-  'menu.authenticationcenter': '认证中心',
-  'menu.authenticationcenter.usermanager': '用户管理',
-  'menu.authenticationcenter.namespacemanager': '命名空间管理',
-  'menu.authenticationcenter.rolemanager': '角色管理',
-  'menu.authenticationcenter.tenantmanager': '租户管理',
+  'menu.authenticationCenter': '认证中心',
+  'menu.authenticationCenter.userManager': '用户管理',
+  'menu.authenticationCenter.namespaceManager': '命名空间管理',
+  'menu.authenticationCenter.roleManager': '角色管理',
+  'menu.authenticationCenter.tenantManager': '租户管理',
 
   'menu.settings': '配置中心',
   'menu.settings.flinkConfig': 'Flink 配置',

dlink-web/src/locales/zh-CN/pages.ts

@@ -49,7 +49,7 @@ export default {
   'pages.welcome.link': '欢迎加入',
   'pages.welcome.star': '欢迎 Star ',
   'pages.welcome.advancedLayout': 'Github',
-  'pages.welcome.alertMessage': '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 ',
+  'pages.welcome.alertMessage': '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 {version}。',
   'pages.admin.subPage.title': ' 这个页面只有 admin 权限才能查看',
   'pages.admin.subPage.alertMessage': 'umi ui 现已发布，欢迎使用 npm run ui 启动体验。',
   'pages.searchTable.createForm.newRule': '新建规则',
@@ -111,7 +111,7 @@ export default {
   'pages.settings.Flink': 'Flink 设置',
   'pages.settings.FlinkURL': '提交 Jar 文件路径到 FlinkSQL',
 
-  'pages.settings.FlinkSQLJarMainParameter': '将主类条目提交到 FlinkSQL 的 Jar',
+  'pages.settings.FlinkSQLJarMainParameter': '提交FlinkSQL的Jar的主类入参',
   'pages.settings.FlinkSQLJarMainClass': '提交FlinkSQL的Jar主类',
   'pages.settings.FlinkRestAPI': '使用 Rest API',
   'pages.settings.FlinkURLSplit': 'FlinkSQL 语句分隔符',

dlink-web/src/pages/Admin.tsx

@@ -26,8 +26,8 @@ import {useIntl} from 'umi';
 
 export default (): React.ReactNode => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   return (
     <PageHeaderWrapper

dlink-web/src/pages/Cluster/components/ClusterForm.tsx

@@ -40,10 +40,8 @@ const formLayout = {
 
 const ClusterForm: React.FC<ClusterFormProps> = (props) => {
 
-
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
-
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const [form] = Form.useForm();
   const [formVals, setFormVals] = useState<Partial<ClusterTableListItem>>({
@@ -88,8 +86,9 @@ const ClusterForm: React.FC<ClusterFormProps> = (props) => {
         <Form.Item
           name="type"
           label="类型"
+          rules={[{required: true, message: '请选择集群类型！'}]}
         >
-          <Select defaultValue={RUN_MODE.YARN_SESSION} allowClear>
+          <Select>
             <Option value={RUN_MODE.STANDALONE}>Standalone</Option>
             <Option value={RUN_MODE.YARN_SESSION}>Yarn Session</Option>
             <Option value={RUN_MODE.YARN_PER_JOB}>Yarn Per-Job</Option>

dlink-web/src/pages/Cluster/index.tsx

@@ -48,8 +48,8 @@ const url = '/api/cluster';
 
 const ClusterTableList: React.FC<{}> = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {dispatch} = props;
   const [modalVisible, handleModalVisible] = useState<boolean>(false);

dlink-web/src/pages/DataBase/Columns/index.tsx

@@ -25,9 +25,8 @@ import {useIntl} from 'umi';
 
 const Columns = (props: any) => {
 
-
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {dbId, table, schema, scroll} = props;
 

dlink-web/src/pages/DataCenter/MetaData/TableData/index.tsx

@@ -29,8 +29,8 @@ import {useIntl} from 'umi';
 
 const TableData = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   // 数据库id，数据库名称，表名称
   const {dbId, table, schema} = props;

dlink-web/src/pages/DataCenter/MetaData/index.tsx

@@ -50,8 +50,8 @@ const {TabPane} = Tabs;
 
 const MetaDataContainer: React.FC<{}> = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   let [database, setDatabase] = useState<[{
     id: number,

dlink-web/src/pages/DevOps/JobInstanceTable/index.tsx

@@ -44,8 +44,8 @@ const url = '/api/jobInstance';
 
 const JobInstanceTable = (props: any) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {status, activeKey, isHistory, taskStatus} = props;
   const [time, setTime] = useState(() => Date.now());

dlink-web/src/pages/DevOps/index.tsx

@@ -32,8 +32,8 @@ const {Statistic} = StatisticCard;
 
 const DevOps = () => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const [isHistory, setIsHistory] = useState<boolean>(false);
 

dlink-web/src/pages/SettingCenter/FlinkSettings/components/flinkConfig.tsx

@@ -37,8 +37,8 @@ type FlinkConfigProps = {
 
 const FlinkConfigView: React.FC<FlinkConfigProps> = (props) => {
 
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key,defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string) => intl.formatMessage({id,defaultMessage});
 
   const {
     sqlSubmitJarPath,
@@ -127,7 +127,7 @@ const FlinkConfigView: React.FC<FlinkConfigProps> = (props) => {
     },
     {
       title: l('pages.settings.FlinkSQLLogic','使用逻辑计划计算血缘'),
-      description: l('pages.settings.FlinkNoUseSetting','在计算 Flink 任务的字段血缘分析时是否基于逻辑计划进行，只支持 1.14 版本'),
+      description: l('pages.settings.FlinkLogic','在计算 Flink 任务的字段血缘分析时是否基于逻辑计划进行，只支持 1.14 版本'),
       actions: [
         <Form.Item
           name="useLogicalPlan" valuePropName="checked"

dlink-web/src/pages/Welcome.tsx

@@ -34,15 +34,14 @@ const CodePreview: React.FC = ({children}) => (
 
 export default (): React.ReactNode => {
 
-
-  const international = useIntl();
-  const l = (key: string, defaultMsg?: string) => international.formatMessage({id: key, defaultMessage: defaultMsg})
+  const intl = useIntl();
+  const l = (id: string, defaultMessage?: string, value?: {}) => intl.formatMessage({id, defaultMessage}, value);
 
   return (
     <>
       <Card>
         <Alert
-          message={l('pages.welcome.alertMessage', '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 ') + VERSION + '。'}
+          message={l('pages.welcome.alertMessage', '实时计算平台 Dinky 即将发布，目前为体验版，版本号为 ', {version: VERSION})}
           type="success"
           showIcon
           banner