feat: improve Consumer module (#2327)

=

Author: Si-ege

web/cypress/integration/consumer/create_and_delete_consumer.spec.js

@@ -95,6 +95,7 @@ context('Create and Delete Consumer', () => {
 
     cy.get(selector.nameSelector).type(data.consumerName);
     cy.contains('Search').click();
+    cy.contains('key-auth').should('be.visible');
     cy.contains(data.consumerName).siblings().contains('View').click();
     cy.get(selector.drawer).should('be.visible');
 

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

@@ -51,6 +51,9 @@ export default {
   'component.status.fail': 'Failed',
   'component.global.popconfirm.title.delete': 'Are you sure to delete this record ?',
   'component.global.notification.success.message.deleteSuccess': 'Deleted Successfully',
+  'component.global.create.consumer.success': 'Create Consumer Successfully',
+  'component.global.delete.consumer.success': 'Delete Consumer Successfully',
+  'component.global.edit.consumer.success': 'Edit Consumer Successfully',
 
   'component.global.steps.stepTitle.basicInformation': 'Basic Information',
   'component.global.steps.stepTitle.preview': 'Preview',

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

@@ -58,13 +58,16 @@ export default {
   'component.global.name': '名称',
   'component.global.id': 'ID',
   'component.global.updateTime': '更新时间',
+  'component.global.create.consumer.success': '创建消费者成功',
+  'component.global.delete.consumer.success': '删除消费者成功',
+  'component.global.edit.consumer.success': '配置消费者成功',
 
   'component.global.popconfirm.title.delete': '确定删除该条记录吗？',
   'component.global.steps.stepTitle.basicInformation': '基础信息',
   'component.global.steps.stepTitle.preview': '预览',
   'component.global.steps.stepTitle.pluginConfig': '插件配置',
   'component.global.input.ruleMessage.name': '仅支持字母、数字、- 和 _，且只能以字母开头',
-  'component.global.form.itemExtraMessage.nameGloballyUnique': '名称需全局唯一',
+  'component.global.form.itemExtraMessage.nameGloballyUnique': '消费者名称需全局唯一',
   'component.global.input.placeholder.description': '请输入路由描述（内容不超过 256 个字符）',
 
   // User component

web/src/pages/Consumer/Create.tsx

@@ -62,11 +62,9 @@ const Page: React.FC = (props) => {
         notification.success({
           message: `${
             username
-              ? formatMessage({ id: 'component.global.edit' })
-              : formatMessage({ id: 'component.global.create' })
-          } ${formatMessage({ id: 'menu.consumer' })} ${formatMessage({
-            id: 'component.status.success',
-          })}`,
+              ? formatMessage({ id: 'component.global.edit.consumer.success' })
+              : formatMessage({ id: 'component.global.create.consumer.success' })
+          }`,
         });
         history.push('/consumer/list');
       })

web/src/pages/Consumer/List.tsx

@@ -55,6 +55,12 @@ const Page: React.FC = () => {
       hideInSearch: true,
       render: (text) => timestampToLocaleString(text as number),
     },
+    {
+      title: formatMessage({ id: 'menu.plugin' }),
+      dataIndex: 'plugins',
+      hideInSearch: true,
+      render: (_, record) => Object.keys(record.plugins).join(','),
+    },
     {
       title: formatMessage({ id: 'component.global.operation' }),
       valueType: 'option',
@@ -87,9 +93,7 @@ const Page: React.FC = () => {
             onConfirm={() => {
               remove(record.username).then(() => {
                 notification.success({
-                  message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
-                    id: 'menu.consumer',
-                  })} ${formatMessage({ id: 'component.status.success' })}`,
+                  message: `${formatMessage({ id: 'component.global.delete.consumer.success' })}`,
                 });
                 /* eslint-disable no-unused-expressions */
                 ref.current?.reload();

web/src/pages/Consumer/components/Step1.tsx

@@ -40,6 +40,7 @@ const Step1: React.FC<Props> = ({ form, disabled }) => {
       <Form.Item
         label={formatMessage({ id: 'page.consumer.username' })}
         name="username"
+        help={formatMessage({ id: 'component.global.form.itemExtraMessage.nameGloballyUnique' })}
         rules={[
           { required: true },
           {

web/src/pages/Route/List.tsx

@@ -552,6 +552,10 @@ const Page: React.FC = () => {
         </>
       ),
     },
+    {
+      title: formatMessage({ id: 'menu.plugin' }),
+      dataIndex: 'plugins',
+    },
   ];
 
   return (