[incubator-apisix-dashboard] branch feat-route updated: feat: added locale

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch feat-route
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git


The following commit(s) were added to refs/heads/feat-route by this push:
     new 2f8767b  feat: added locale
2f8767b is described below

commit 2f8767b94c096dc23227a0ecdc62cb72c14618d5
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Sun May 31 20:57:18 2020 +0800

    feat: added locale
---
 src/components/PluginForm/READMD.md                |  9 +++++++++
 src/components/PluginForm/data.ts                  | 10 ++++------
 src/components/PluginForm/index.ts                 |  4 +++-
 src/components/PluginForm/locales/en-US.ts         | 22 +++++++++++++++++++++
 src/components/PluginForm/locales/zh-CN.ts         | 23 ++++++++++++++++++++++
 src/components/PluginForm/service.ts               | 13 +++++++++---
 src/components/PluginForm/typing.d.ts              | 11 +++++++----
 src/locales/en-US.ts                               |  3 +++
 src/locales/zh-CN.ts                               |  3 +++
 .../Routes/components/CreateStep3/PluginCard.tsx   | 16 +++++++--------
 10 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/src/components/PluginForm/READMD.md b/src/components/PluginForm/READMD.md
new file mode 100644
index 0000000..68d4686
--- /dev/null
+++ b/src/components/PluginForm/READMD.md
@@ -0,0 +1,9 @@
+# PluginForm
+
+> The PluginForm component aims to build UI according to the plugin schema.
+
+## Usage
+
+1. Modify `list` variable in `data.ts` file.
+2. Modify filds under `/locales` folder to have a good translation.
+3. Import files under `/locales` folder to `/src/locales` to be localization.
diff --git a/src/components/PluginForm/data.ts b/src/components/PluginForm/data.ts
index ca53550..ab0e0ac 100644
--- a/src/components/PluginForm/data.ts
+++ b/src/components/PluginForm/data.ts
@@ -1,10 +1,8 @@
-interface Props extends PluginForm.PluginMeta {
-  name: PluginForm.PluginName;
-}
-
-export const list: Props[] = [
+export const list: PluginForm.PluginProps[] = [
   {
     name: 'limit-req',
-    desc: '限流限制请求速度的插件，使用的是漏桶算法。',
+  },
+  {
+    name: 'key-auth',
   },
 ];
diff --git a/src/components/PluginForm/index.ts b/src/components/PluginForm/index.ts
index 927447e..4872268 100644
--- a/src/components/PluginForm/index.ts
+++ b/src/components/PluginForm/index.ts
@@ -1,3 +1,5 @@
 export { default } from './PluginForm';
-export { fetchList as fetchPluginList, getPluginMeta } from './service';
+export { fetchList as fetchPluginList } from './service';
 export { list as pluginList } from './data';
+export { default as PluginFormZhCN } from './locales/zh-CN';
+export { default as PluginFormEnUS } from './locales/en-US';
diff --git a/src/components/PluginForm/locales/en-US.ts b/src/components/PluginForm/locales/en-US.ts
new file mode 100644
index 0000000..47caee9
--- /dev/null
+++ b/src/components/PluginForm/locales/en-US.ts
@@ -0,0 +1,22 @@
+import { list2locale } from '../service';
+
+const prefix = 'PluginForm';
+
+const pluginList: PluginForm.PluginLocaleProps[] = [
+  {
+    name: 'limit-req',
+    desc: '',
+  },
+  {
+    name: 'limit-req',
+    desc: 'limit request rate using the "leaky bucket" method.',
+  },
+  {
+    name: 'key-auth',
+    desc: 'key-auth is an authentication plugin, it should work with consumer together.',
+  },
+];
+
+export default {
+  ...list2locale(pluginList, prefix),
+};
diff --git a/src/components/PluginForm/locales/zh-CN.ts b/src/components/PluginForm/locales/zh-CN.ts
new file mode 100644
index 0000000..0140aa8
--- /dev/null
+++ b/src/components/PluginForm/locales/zh-CN.ts
@@ -0,0 +1,23 @@
+import { list2locale } from '../service';
+
+const prefix = 'PluginForm';
+
+const pluginList: PluginForm.PluginLocaleProps[] = [
+  // BUG: list2locale
+  {
+    name: 'limit-req',
+    desc: '',
+  },
+  {
+    name: 'limit-req',
+    desc: '限流限制请求速度的插件，使用的是漏桶算法。',
+  },
+  {
+    name: 'key-auth',
+    desc: 'basic-auth 是一个认证插件，它需要与 consumer 一起配合才能工作。',
+  },
+];
+
+export default {
+  ...list2locale(pluginList, prefix),
+};
diff --git a/src/components/PluginForm/service.ts b/src/components/PluginForm/service.ts
index cd2711d..2272eb5 100644
--- a/src/components/PluginForm/service.ts
+++ b/src/components/PluginForm/service.ts
@@ -1,11 +1,18 @@
 import { request } from 'umi';
 import { transformSchemaFromAPI } from './transformer';
-import { list } from './data';
 
 export const fetchList = () => request('/plugins/list');
 
 export const fetchPluginSchema = (name: string): Promise<PluginForm.PluginSchema> =>
   request(`/schema/plugins/${name}`).then((data) => transformSchemaFromAPI(data, name));
 
-export const getPluginMeta = (name: PluginForm.PluginName): PluginForm.PluginMeta | undefined =>
-  list.find((item) => item.name === name);
+export const list2locale = (list: PluginForm.PluginLocaleProps[], prefix = '') => {
+  return list.reduce((prev, current) => {
+    const data = {};
+    Object.entries(current).map(([key, value]) => {
+      data[`${prefix}.plugin.${current.name}.${key}`] = value;
+      return { [key]: value };
+    });
+    return { ...prev, ...data };
+  });
+};
diff --git a/src/components/PluginForm/typing.d.ts b/src/components/PluginForm/typing.d.ts
index db29275..b4e66ff 100644
--- a/src/components/PluginForm/typing.d.ts
+++ b/src/components/PluginForm/typing.d.ts
@@ -1,6 +1,4 @@
 declare namespace PluginForm {
-  type PluginName = 'limit-req';
-
   interface Props {
     name?: string;
     initialData?: PluginSchema;
@@ -50,7 +48,12 @@ declare namespace PluginForm {
     };
   }
 
-  interface PluginMeta {
-    desc?: string;
+  interface PluginProps {
+    name: string;
+  }
+
+  interface PluginLocaleProps {
+    name: string;
+    desc: string;
   }
 }
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 6dbf6ab..6b136f7 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -1,3 +1,5 @@
+import { PluginFormEnUS } from '@/components/PluginForm';
+
 import component from './en-US/component';
 import globalHeader from './en-US/globalHeader';
 import menu from './en-US/menu';
@@ -17,4 +19,5 @@ export default {
   ...settings,
   ...pwa,
   ...component,
+  ...PluginFormEnUS,
 };
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 966f0a9..67b4086 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -1,3 +1,5 @@
+import { PluginFormZhCN } from '@/components/PluginForm';
+
 import component from './zh-CN/component';
 import globalHeader from './zh-CN/globalHeader';
 import menu from './zh-CN/menu';
@@ -17,4 +19,5 @@ export default {
   ...settings,
   ...pwa,
   ...component,
+  ...PluginFormZhCN,
 };
diff --git a/src/pages/Routes/components/CreateStep3/PluginCard.tsx b/src/pages/Routes/components/CreateStep3/PluginCard.tsx
index 37a5b52..0505f83 100644
--- a/src/pages/Routes/components/CreateStep3/PluginCard.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginCard.tsx
@@ -1,23 +1,21 @@
 import React from 'react';
 import { Card } from 'antd';
 import { CardProps } from 'antd/lib/card';
-
-import { getPluginMeta } from '@/components/PluginForm';
+import { useIntl } from 'umi';
 
 interface Props extends CardProps {
-  name: PluginForm.PluginName;
+  name: string;
 }
 
 const PluginCard: React.FC<Props> = ({ name, actions }) => {
-  const plugin = getPluginMeta(name);
-  if (!plugin) {
-    return null;
-  }
-  const { desc = '' } = plugin;
+  const { formatMessage } = useIntl();
 
   return (
     <Card style={{ width: 300 }} actions={actions}>
-      <Card.Meta title={name} description={desc} />
+      <Card.Meta
+        title={name}
+        description={formatMessage({ id: `PluginForm.plugin.${name}.desc` })}
+      />
     </Card>
   );
 };