refactor: ConfigRollback i18n alibaba#474

jangocheng · Jan 9, 2019 · 5d6085f · 5d6085f
1 parent f2f1132
commit 5d6085f
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 8,668 deletions.
diff --git a/console/src/main/resources/static/console-fe/src/locales/en-US.js b/console/src/main/resources/static/console-fe/src/locales/en-US.js
@@ -371,6 +371,22 @@ const I18N_CONF = {
     configuration: 'Configuration Content:',
     back: 'Back',
   },
+  ConfigRollback: {
+    rollBack: 'Roll Back',
+    determine: 'Are you sure you want to roll back',
+    followingConfiguration: 'the following configuration?',
+    configurationRollback: 'Configuration Rollback',
+    collapse: 'Collapse',
+    more: 'Advanced Options',
+    home: 'Application:',
+    actionType: 'Action Type:',
+    configuration: 'Configuration Content:',
+    back: 'Back',
+    rollbackSuccessful: 'Rollback Successful',
+    rollbackDelete: 'Delete',
+    update: 'Update',
+    insert: 'Insert',
+  },
 };
 
 export default I18N_CONF;
diff --git a/console/src/main/resources/static/console-fe/src/locales/zh-CN.js b/console/src/main/resources/static/console-fe/src/locales/zh-CN.js
@@ -370,6 +370,22 @@ const I18N_CONF = {
     configuration: '配置内容：',
     back: '返回',
   },
+  ConfigRollback: {
+    rollBack: '回滚配置',
+    determine: '确定要',
+    followingConfiguration: '以下配置吗？',
+    configurationRollback: '配置回滚',
+    collapse: '收起',
+    more: '更多高级选项',
+    home: '归属应用：',
+    actionType: '操作类型：',
+    configuration: '配置内容：',
+    back: '返回',
+    rollbackSuccessful: '回滚成功',
+    rollbackDelete: '删除',
+    update: '更新',
+    insert: '插入',
+  },
 };
 
 export default I18N_CONF;
diff --git a/...rces/static/console-fe/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js b/...rces/static/console-fe/src/pages/ConfigurationManagement/ConfigRollback/ConfigRollback.js
@@ -12,13 +12,17 @@
  */
 
 import React from 'react';
+import { getParams, request } from '../../../globalLib';
+import { Button, ConfigProvider, Dialog, Field, Form, Input } from '@alifd/next';
+
 import './index.scss';
-import { getParams, request, aliwareIntl } from '../../../globalLib';
-import { Button, Dialog, Field, Form, Input } from '@alifd/next';
 
 const FormItem = Form.Item;
 
+@ConfigProvider.config
 class ConfigRollback extends React.Component {
+  static displayName = 'ConfigRollback';
+
   constructor(props) {
     super(props);
     this.field = new Field(this);
@@ -32,21 +36,22 @@ class ConfigRollback extends React.Component {
       showmore: false,
     };
     // this.params = window.location.hash.split('?')[1]||'';
+  }
+
+  componentDidMount() {
+    const { locale = {} } = this.props;
     this.typeMap = {
       // 操作映射提示
       U: 'publish',
-      I: aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
+      I: locale.rollbackDelete,
       D: 'publish',
     };
     this.typeMapName = {
       // 操作映射名
-      U: aliwareIntl.get('com.alibaba.nacos.page.configRollback.updated'),
-      I: aliwareIntl.get('com.alibaba.nacos.page.configRollback.inserted'),
-      D: aliwareIntl.get('com.alibaba.nacos.page.configRollback.delete'),
+      U: locale.update,
+      I: locale.insert,
+      D: locale.rollbackDelete,
     };
-  }
-
-  componentDidMount() {
     this.getDataDetail();
   }
 
@@ -94,19 +99,18 @@ class ConfigRollback extends React.Component {
   }
 
   onOpenConfirm() {
+    const { locale = {} } = this.props;
     const self = this;
     let type = 'post';
     if (this.opType.trim() === 'I') {
       type = 'delete';
     }
     Dialog.confirm({
-      language: aliwareIntl.currentLanguageCode || 'zh-cn',
-      title: aliwareIntl.get('com.alibaba.nacos.page.configRollback.please_confirm_rollback'),
+      title: locale.rollBack,
       content: (
         <div style={{ marginTop: '-20px' }}>
           <h3>
-            {aliwareIntl.get('com.alibaba.nacos.page.configRollback.determine')}{' '}
-            {aliwareIntl.get('com.alibaba.nacos.page.configRollback.the_following_configuration')}
+            {locale.determine} {locale.followingConfiguration}
           </h3>
           <p>
             <span style={{ color: '#999', marginRight: 5 }}>Data ID:</span>
@@ -145,12 +149,7 @@ class ConfigRollback extends React.Component {
           data: postData,
           success(data) {
             if (data === true) {
-              Dialog.alert({
-                language: aliwareIntl.currentLanguageCode || 'zh-cn',
-                content: aliwareIntl.get(
-                  'com.alibaba.nacos.page.configRollback.rollback_successful'
-                ),
-              });
+              Dialog.alert({ content: locale.rollbackSuccessful });
             }
           },
         });
@@ -159,6 +158,7 @@ class ConfigRollback extends React.Component {
   }
 
   render() {
+    const { locale = {} } = this.props;
     const { init } = this.field;
     const formItemLayout = {
       labelCol: {
@@ -170,44 +170,31 @@ class ConfigRollback extends React.Component {
     };
     return (
       <div style={{ padding: 10 }}>
-        <h1>{aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration_rollback')}</h1>
+        <h1>{locale.configurationRollback}</h1>
         <Form field={this.field}>
           <FormItem label="Data ID:" required {...formItemLayout}>
             <Input htmlType="text" readOnly {...init('dataId')} />
             <div style={{ marginTop: 10 }}>
               <a style={{ fontSize: '12px' }} onClick={this.toggleMore.bind(this)}>
-                {this.state.showmore
-                  ? aliwareIntl.get('com.alibaba.nacos.page.configRollback.retracted')
-                  : aliwareIntl.get('com.alibaba.nacos.page.configRollback.for_more_advanced')}
+                {this.state.showmore ? locale.collapse : locale.more}
               </a>
             </div>
           </FormItem>
           <div style={{ overflow: 'hidden', height: this.state.showmore ? 'auto' : '0' }}>
             <FormItem label="Group:" required {...formItemLayout}>
               <Input htmlType="text" readOnly {...init('group')} />
             </FormItem>
-            <FormItem
-              label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.home')}
-              {...formItemLayout}
-            >
+            <FormItem label={locale.home} {...formItemLayout}>
               <Input htmlType="text" readOnly {...init('appName')} />
             </FormItem>
           </div>
-          <FormItem
-            label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.action_type')}
-            required
-            {...formItemLayout}
-          >
+          <FormItem label={locale.actionType} required {...formItemLayout}>
             <Input htmlType="text" readOnly {...init('opType')} />
           </FormItem>
           <FormItem label="MD5:" required {...formItemLayout}>
             <Input htmlType="text" readOnly {...init('md5')} />
           </FormItem>
-          <FormItem
-            label={aliwareIntl.get('com.alibaba.nacos.page.configRollback.configuration')}
-            required
-            {...formItemLayout}
-          >
+          <FormItem label={locale.configuration} required {...formItemLayout}>
             <Input.TextArea htmlType="text" multiple rows={15} readOnly {...init('content')} />
           </FormItem>
           <FormItem label=" " {...formItemLayout}>
@@ -216,10 +203,10 @@ class ConfigRollback extends React.Component {
               style={{ marginRight: 10 }}
               onClick={this.onOpenConfirm.bind(this)}
             >
-              {aliwareIntl.get('com.alibaba.nacos.page.configRollback.rollback')}
+              {locale.rollBack}
             </Button>
             <Button type="normal" onClick={this.goList.bind(this)}>
-              {aliwareIntl.get('com.alibaba.nacos.page.configRollback.return')}
+              {locale.back}
             </Button>
           </FormItem>
         </Form>