You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/04/07 04:29:00 UTC

[apisix-dashboard] branch chore-route created (now e60b60b)

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

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


      at e60b60b  ui: move actions from list

This branch includes the following new commits:

     new 100e38f  fix: use any for unknown typing
     new 8ee52d1  ui: move toolbar to a component
     new e60b60b  ui: move actions from list

The 3 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


[apisix-dashboard] 02/03: ui: move toolbar to a component

Posted by ju...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 8ee52d166a5b7862f6a09789ba389a96db7dc147
Author: juzhiyuan <ju...@apache.org>
AuthorDate: Wed Apr 7 11:54:00 2021 +0800

    ui: move toolbar to a component
---
 web/src/locales/en-US/menu.ts |  1 +
 web/src/locales/zh-CN/menu.ts |  1 +
 web/src/pages/Route/List.tsx  | 81 ++++++++++++++++++++++++++++---------------
 3 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/web/src/locales/en-US/menu.ts b/web/src/locales/en-US/menu.ts
index 30ec1e0..dde78ac 100644
--- a/web/src/locales/en-US/menu.ts
+++ b/web/src/locales/en-US/menu.ts
@@ -72,4 +72,5 @@ export default {
   'menu.service': 'Service',
   'menu.setting': 'Settings',
   'menu.serverinfo': 'System Info',
+  'menu.advanced-feature': 'Advanced',
 };
diff --git a/web/src/locales/zh-CN/menu.ts b/web/src/locales/zh-CN/menu.ts
index 2a5d930..0a6f83a 100644
--- a/web/src/locales/zh-CN/menu.ts
+++ b/web/src/locales/zh-CN/menu.ts
@@ -69,4 +69,5 @@ export default {
   'menu.service': '服务',
   'menu.setting': '系统设置',
   'menu.serverinfo': '系统信息',
+  'menu.advanced-feature': '高级特性',
 };
diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 26b5cac..5b13413 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -30,9 +30,11 @@ import {
   Upload,
   Modal,
   Divider,
+  Menu,
+  Dropdown,
 } from 'antd';
 import { history, useIntl } from 'umi';
-import { PlusOutlined, BugOutlined, ExportOutlined, ImportOutlined } from '@ant-design/icons';
+import { PlusOutlined, BugOutlined, ExportOutlined, ImportOutlined, DownOutlined } from '@ant-design/icons';
 import { js_beautify } from 'js-beautify';
 import yaml from 'js-yaml';
 import moment from 'moment';
@@ -177,6 +179,52 @@ const Page: React.FC = () => {
     });
   };
 
+  const toolbarMenus = () => {
+    const tools = [
+      {
+        name: formatMessage({ id: 'page.route.pluginTemplateConfig' }),
+        icon: <PlusOutlined />,
+        onClick: () => {
+          history.push('/plugin-template/list')
+        }
+      }, {
+        name: formatMessage({ id: 'component.global.createWithEditor' }),
+        icon: <PlusOutlined />,
+        onClick: () => {
+          setVisible(true);
+          setEditorMode('create');
+          setRawData({});
+        }
+      }, {
+        name: formatMessage({ id: 'page.route.button.importOpenApi' }),
+        icon: <ImportOutlined />,
+        onClick: () => {
+          setUploadFileList([]);
+          setShowImportModal(true);
+        }
+      }, {
+        name: formatMessage({ id: 'page.route.onlineDebug' }),
+        icon: <BugOutlined />,
+        onClick: () => {
+          setDebugDrawVisible(true)
+        }
+      }
+    ]
+
+    return (
+      <Menu>
+        {
+          tools.map(item => (
+            <Menu.Item key={item.name} onClick={item.onClick}>
+              {item.icon}
+              {item.name}
+            </Menu.Item>
+          ))
+        }
+      </Menu>
+    )
+  }
+
   const ListFooter: React.FC = () => {
     return (
       <Popconfirm
@@ -464,36 +512,15 @@ const Page: React.FC = () => {
           resetText: formatMessage({ id: 'component.global.reset' }),
         }}
         toolBarRender={() => [
-          <Button type="primary" onClick={() => { history.push('/plugin-template/list') }}>
-            <PlusOutlined />
-            {formatMessage({ id: 'page.route.pluginTemplateConfig' })}
-          </Button>,
           <Button type="primary" onClick={() => history.push(`/routes/create`)}>
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Button type="primary" onClick={() => {
-            setVisible(true);
-            setEditorMode('create');
-            setRawData({});
-          }}>
-            <PlusOutlined />
-            {formatMessage({ id: 'component.global.createWithEditor' })}
-          </Button>,
-          <Button
-            type="primary"
-            onClick={() => {
-              setUploadFileList([]);
-              setShowImportModal(true);
-            }}
-          >
-            <ImportOutlined />
-            {formatMessage({ id: 'page.route.button.importOpenApi' })}
-          </Button>,
-          <Button type="primary" onClick={() => setDebugDrawVisible(true)}>
-            <BugOutlined />
-            {formatMessage({ id: 'page.route.onlineDebug' })}
-          </Button>,
+          <Dropdown overlay={toolbarMenus}>
+            <Button type="dashed">
+              <DownOutlined /> {formatMessage({ id: "menu.advanced-feature" })}
+            </Button>
+          </Dropdown>
         ]}
         rowSelection={rowSelection}
         footer={() => <ListFooter />}

[apisix-dashboard] 01/03: fix: use any for unknown typing

Posted by ju...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit 100e38f68d8989eef96ab50d6757656becc3ed98
Author: juzhiyuan <ju...@apache.org>
AuthorDate: Wed Apr 7 11:24:38 2021 +0800

    fix: use any for unknown typing
---
 web/src/pages/Route/List.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index a9c1ba5..26b5cac 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -97,7 +97,7 @@ const Page: React.FC = () => {
     setPaginationConfig({ pageSize: Number(pageSize), current: Number(page) });
   }, [window.location.search]);
 
-  const rowSelection = {
+  const rowSelection: any = {
     selectedRowKeys,
     onChange: (currentSelectKeys: string[]) => {
       setSelectedRowKeys(currentSelectKeys);
@@ -529,7 +529,7 @@ const Page: React.FC = () => {
         }}
       >
         <Upload
-          fileList={uploadFileList}
+          fileList={uploadFileList as any}
           beforeUpload={(file) => {
             setUploadFileList([file]);
             return false;

[apisix-dashboard] 03/03: ui: move actions from list

Posted by ju...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

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

commit e60b60b2dfe79e3e4afce946bba9479a60b635df
Author: juzhiyuan <ju...@apache.org>
AuthorDate: Wed Apr 7 12:28:44 2021 +0800

    ui: move actions from list
---
 web/src/pages/Route/List.tsx | 72 ++++++++++++++++++++++++++++++++------------
 1 file changed, 52 insertions(+), 20 deletions(-)

diff --git a/web/src/pages/Route/List.tsx b/web/src/pages/Route/List.tsx
index 5b13413..f996310 100644
--- a/web/src/pages/Route/List.tsx
+++ b/web/src/pages/Route/List.tsx
@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, ReactNode } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable from '@ant-design/pro-table';
 import type { ProColumns, ActionType } from '@ant-design/pro-table';
@@ -179,7 +179,7 @@ const Page: React.FC = () => {
     });
   };
 
-  const toolbarMenus = () => {
+  const ListToolbar = () => {
     const tools = [
       {
         name: formatMessage({ id: 'page.route.pluginTemplateConfig' }),
@@ -212,7 +212,7 @@ const Page: React.FC = () => {
     ]
 
     return (
-      <Menu>
+      <Dropdown overlay={<Menu>
         {
           tools.map(item => (
             <Menu.Item key={item.name} onClick={item.onClick}>
@@ -221,7 +221,53 @@ const Page: React.FC = () => {
             </Menu.Item>
           ))
         }
-      </Menu>
+      </Menu>}>
+        <Button type="dashed">
+          <DownOutlined /> {formatMessage({ id: "menu.advanced-feature" })}
+        </Button>
+      </Dropdown>
+    )
+  }
+
+  const RecordActionDropdown: React.FC<{ record: any }> = ({ record }) => {
+    const tools: {
+      name: string;
+      onClick(): void;
+      icon?: ReactNode;
+    }[] = [
+        {
+          name: formatMessage({ id: 'component.global.view' }),
+          onClick: () => {
+            setId(record.id);
+            setRawData(omit(record, DELETE_FIELDS));
+            setVisible(true);
+            setEditorMode('update');
+          }
+        }, {
+          name: formatMessage({ id: 'component.global.duplicate' }),
+          onClick: () => {
+            history.push(`/routes/${record.id}/duplicate`)
+          }
+        }
+      ]
+
+    return (
+      <Dropdown overlay={
+        <Menu>
+          {
+            tools.map(item => (
+              <Menu.Item key={item.name} onClick={item.onClick}>
+                {item.icon && item.icon}
+                {item.name}
+              </Menu.Item>
+            ))
+          }
+        </Menu>
+      }>
+        <Button type="dashed">
+          更多
+        </Button>
+      </Dropdown>
     )
   }
 
@@ -457,17 +503,6 @@ const Page: React.FC = () => {
             <Button type="primary" onClick={() => history.push(`/routes/${record.id}/edit`)}>
               {formatMessage({ id: 'component.global.edit' })}
             </Button>
-            <Button type="primary" onClick={() => {
-              setId(record.id);
-              setRawData(omit(record, DELETE_FIELDS));
-              setVisible(true);
-              setEditorMode('update');
-            }}>
-              {formatMessage({ id: 'component.global.view' })}
-            </Button>
-            <Button type="primary" onClick={() => history.push(`/routes/${record.id}/duplicate`)}>
-              {formatMessage({ id: 'component.global.duplicate' })}
-            </Button>
             <Popconfirm
               title={formatMessage({ id: 'component.global.popconfirm.title.delete' })}
               onConfirm={() => {
@@ -489,6 +524,7 @@ const Page: React.FC = () => {
                 {formatMessage({ id: 'component.global.delete' })}
               </Button>
             </Popconfirm>
+            <RecordActionDropdown record={record} />
           </Space>
         </>
       ),
@@ -516,11 +552,7 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
-          <Dropdown overlay={toolbarMenus}>
-            <Button type="dashed">
-              <DownOutlined /> {formatMessage({ id: "menu.advanced-feature" })}
-            </Button>
-          </Dropdown>
+          <ListToolbar />
         ]}
         rowSelection={rowSelection}
         footer={() => <ListFooter />}