chore: added i18n for RawDataEditor & Plugin Drawer (#1747)

apache · Apr 12, 2021 · 36f371f · 36f371f
1 parent eede893
commit 36f371f
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 33 deletions.
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
@@ -27,6 +27,8 @@ import {
   Alert,
   Space,
   Popconfirm,
+  Tooltip,
+  Input,
 } from 'antd';
 import { useIntl } from 'umi';
 import CodeMirror from '@uiw/react-codemirror';
@@ -105,13 +107,13 @@ const PluginDetail: React.FC<Props> = ({
   const [codeMirrorMode, setCodeMirrorMode] = useState<PluginComponent.CodeMirrorMode>(
     codeMirrorModeList.JSON,
   );
-  const modeOptions = [
+  const modeOptions: { label: string; value: string }[] = [
     { label: codeMirrorModeList.JSON, value: codeMirrorModeList.JSON },
     { label: codeMirrorModeList.YAML, value: codeMirrorModeList.YAML },
   ];
 
   if (PLUGIN_UI_LIST.includes(name)) {
-    modeOptions.push({ label: codeMirrorModeList.UIForm, value: codeMirrorModeList.UIForm });
+    modeOptions.push({ label: formatMessage({ id: 'component.plugin.form' }), value: codeMirrorModeList.UIForm });
   }
 
   useEffect(() => {
@@ -247,7 +249,7 @@ const PluginDetail: React.FC<Props> = ({
   return (
     <>
       <Drawer
-        title={`Plugin: ${name}`}
+        title={formatMessage({ id: 'component.plugin.editor' })}
         visible={visible}
         placement="right"
         closable={false}
@@ -315,10 +317,16 @@ const PluginDetail: React.FC<Props> = ({
           border: 1px solid rgb(235, 237, 240);
           margin-top:10px;
         }
+        .ant-input[disabled] {
+          color: #000;
+        }
       `}
         </style>
 
         <Form {...FORM_ITEM_LAYOUT} style={{ marginTop: '10px' }} form={form}>
+          <Form.Item label={formatMessage({ id: 'component.global.name' })}>
+            <Input value={name} bordered={false} disabled />
+          </Form.Item>
           <Form.Item label={formatMessage({ id: 'component.global.enable' })} valuePropName="checked" name="disable">
             <Switch
               defaultChecked={initialData[name] && !initialData[name].disable}
@@ -328,7 +336,7 @@ const PluginDetail: React.FC<Props> = ({
           {type === 'global' && (
             <Form.Item label={formatMessage({ id: 'component.global.scope' })} name="scope">
               <Select disabled>
-                <Select.Option value="global">Global</Select.Option>
+                <Select.Option value="global">{formatMessage({ id: "other.global" })}</Select.Option>
               </Select>
             </Form.Item>
           )}
@@ -338,11 +346,26 @@ const PluginDetail: React.FC<Props> = ({
           title=""
           subTitle={
             pluginType === 'auth' && schemaType !== 'consumer' && (codeMirrorMode !== codeMirrorModeList.UIForm) ? (
-              <Alert message={formatMessage({ id: 'component.global.noConfigurationRequired' })} type="warning" />
+              <Alert message={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} type="warning" />
             ) : null
           }
           ghost={false}
           extra={[
+            <Select
+              defaultValue={codeMirrorModeList.JSON}
+              value={codeMirrorMode}
+              options={modeOptions}
+              onChange={(value: PluginComponent.CodeMirrorMode) => {
+                handleModeChange(value);
+              }}
+              data-cy='code-mirror-mode'
+              key={1}
+            ></Select>,
+            <Tooltip title={formatMessage({ id: "component.plugin.format-codes.disable" })} key={2}>
+              <Button type="primary" onClick={formatCodes} disabled={codeMirrorMode === codeMirrorModeList.UIForm}>
+                {formatMessage({ id: 'component.global.format' })}
+              </Button>
+            </Tooltip>,
             <Button
               type="default"
               icon={<LinkOutlined />}
@@ -353,21 +376,9 @@ const PluginDetail: React.FC<Props> = ({
                   window.open(`https://apisix.apache.org/docs/apisix/plugins/${name}`);
                 }
               }}
-              key={1}
+              key={3}
             >
               {formatMessage({ id: 'component.global.document' })}
-            </Button>,
-            <Select
-              defaultValue={codeMirrorModeList.JSON}
-              value={codeMirrorMode}
-              options={modeOptions}
-              onChange={(value: PluginComponent.CodeMirrorMode) => {
-                handleModeChange(value);
-              }}
-              data-cy='code-mirror-mode'
-            ></Select>,
-            <Button type="primary" onClick={formatCodes} key={3} disabled={codeMirrorMode === codeMirrorModeList.UIForm}>
-              {formatMessage({ id: 'component.global.format' })}
             </Button>
           ]}
         />

diff --git a/web/src/components/Plugin/UI/plugin.tsx b/web/src/components/Plugin/UI/plugin.tsx
@@ -33,7 +33,7 @@ export const PluginForm: React.FC<Props> = ({ name, renderForm, form }) => {
 
   const { formatMessage } = useIntl();
 
-  if (!renderForm) { return <Empty description={formatMessage({ id: 'component.global.noConfigurationRequired' })} /> };
+  if (!renderForm) { return <Empty style={{ marginTop: 100 }} description={formatMessage({ id: 'component.plugin.noConfigurationRequired' })} /> };
 
   switch (name) {
     case 'basic-auth':

diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
@@ -21,4 +21,8 @@ export default {
   'component.step.select.pluginTemplate.select.option': 'Custom',
   'component.plugin.pluginTemplate.tip1': '1. When a route already have plugins field configured, the plugins in the plugin template will be merged into it.',
   'component.plugin.pluginTemplate.tip2': '2. The same plugin in the plugin template will override one in the plugins',
+  'component.plugin.form': 'Form',
+  'component.plugin.format-codes.disable': 'Format JSON or YAML data',
+  'component.plugin.editor': 'Plugin Editor',
+  'component.plugin.noConfigurationRequired': 'Doesn\'t need configuration',
 };
diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
@@ -21,4 +21,8 @@ export default {
   'component.step.select.pluginTemplate.select.option': '手动配置',
   'component.plugin.pluginTemplate.tip1': '1. 若路由已配置插件，则插件模板数据将与已配置的插件数据合并。',
   'component.plugin.pluginTemplate.tip2': '2. 插件模板相同的插件会覆盖掉原有的插件。',
+  'component.plugin.form': '表单',
+  'component.plugin.format-codes.disable': '用于格式化 JSON 或 YAML 内容',
+  'component.plugin.editor': '插件配置',
+  'component.plugin.noConfigurationRequired': '本插件无需配置',
 };
diff --git a/web/src/components/RawDataEditor/RawDataEditor.tsx b/web/src/components/RawDataEditor/RawDataEditor.tsx
@@ -146,18 +146,6 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
         <PageHeader
           title=""
           extra={[
-            <Button
-              type="default"
-              icon={<LinkOutlined />}
-              onClick={() => {
-                window.open(
-                  `https://apisix.apache.org/docs/apisix/admin-api#${type}`,
-                );
-              }}
-              key={1}
-            >
-              Document
-            </Button>,
             <Select
               defaultValue={codeMirrorModeList.JSON}
               value={codeMirrorMode}
@@ -168,7 +156,7 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               data-cy='code-mirror-mode'
             ></Select>,
             <Button type="primary" onClick={formatCodes} key={2}>
-              Format
+              {formatMessage({ id: 'component.global.format' })}
             </Button>,
             <CopyToClipboard text={JSON.stringify(data)} onCopy={(_: string, result: boolean) => {
               if (!result) {
@@ -182,9 +170,21 @@ const RawDataEditor: React.FC<Props> = ({ visible, readonly = true, type, data =
               });
             }}>
               <Button type="primary" key={2}>
-                Copy
+                {formatMessage({ id: 'component.global.copy' })}
               </Button>
             </CopyToClipboard>,
+            <Button
+              type="default"
+              icon={<LinkOutlined />}
+              onClick={() => {
+                window.open(
+                  `https://apisix.apache.org/docs/apisix/admin-api#${type}`,
+                );
+              }}
+              key={1}
+            >
+              {formatMessage({ id: 'component.global.document' })}
+            </Button>,
           ]}
         />
         <CodeMirror

diff --git a/web/src/locales/en-US.ts b/web/src/locales/en-US.ts
@@ -22,6 +22,7 @@ import menu from './en-US/menu';
 import pwa from './en-US/pwa';
 import settingDrawer from './en-US/settingDrawer';
 import settings from './en-US/setting';
+import other from './en-US/other'
 import PluginOrchestration from '../components/PluginOrchestration/locales/en-US';
 import Plugin from '../components/Plugin/locales/en-US';
 import RawDataEditor from '../components/RawDataEditor/locales/en-US';
@@ -38,6 +39,7 @@ export default {
   ...settings,
   ...pwa,
   ...component,
+  ...other,
   ...ActionBarEnUS,
   ...PluginOrchestration,
   ...Plugin,

diff --git a/web/src/locales/en-US/component.ts b/web/src/locales/en-US/component.ts
@@ -76,4 +76,5 @@ export default {
   'component.label-manager': 'Label Manager',
 
   'component.global.noConfigurationRequired': 'No configuration required',
+  'component.global.copy': 'Copy'
 };
diff --git a/web/src/locales/en-US/other.ts b/web/src/locales/en-US/other.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+  'other.global': 'Global',
+}
diff --git a/web/src/locales/zh-CN.ts b/web/src/locales/zh-CN.ts
@@ -20,6 +20,7 @@ import component from './zh-CN/component';
 import globalHeader from './zh-CN/globalHeader';
 import menu from './zh-CN/menu';
 import pwa from './zh-CN/pwa';
+import other from './zh-CN/other'
 import settingDrawer from './zh-CN/settingDrawer';
 import settings from './zh-CN/setting';
 import PluginOrchestration from '../components/PluginOrchestration/locales/zh-CN';
@@ -38,6 +39,7 @@ export default {
   ...settings,
   ...pwa,
   ...component,
+  ...other,
   ...ActionBarZhCN,
   ...PluginOrchestration,
   ...Plugin,

diff --git a/web/src/locales/zh-CN/component.ts b/web/src/locales/zh-CN/component.ts
@@ -72,4 +72,5 @@ export default {
   'component.label-manager': '标签管理器',
 
   'component.global.noConfigurationRequired': '无需配置',
+  'component.global.copy': '复制'
 };
diff --git a/web/src/locales/zh-CN/other.ts b/web/src/locales/zh-CN/other.ts
@@ -0,0 +1,19 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+  'other.global': '全局',
+}