[incubator-apisix-dashboard] branch next updated: feat: update Plugin (#226)

[ju...@apache.org]

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

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


The following commit(s) were added to refs/heads/next by this push:
     new fa5ae77  feat: update Plugin (#226)
fa5ae77 is described below

commit fa5ae774778a2593652f9c8173390521090fd966
Author: 琚致远 <ju...@apache.org>
AuthorDate: Mon Jun 1 13:43:09 2020 +0800

    feat: update Plugin (#226)
    
    * feat: update Plugin
    
    * feat: update PluginDrawer
    
    * codes clean
---
 src/pages/Routes/Create.tsx                        | 11 +++++------
 .../Routes/components/CreateStep3/CreateStep3.tsx  | 10 ++++++++--
 .../Routes/components/CreateStep3/PluginDrawer.tsx | 23 ++++++++++++----------
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index f007825..7ed184d 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -25,6 +25,10 @@ const Create: React.FC = () => {
         rejected_code: 503,
         key: 'remote_addr',
       },
+      'basic-auth': {
+        username: 'testuser',
+        password: 'pass',
+      },
     },
   });
 
@@ -45,12 +49,7 @@ const Create: React.FC = () => {
           />
         );
       case 2:
-        return (
-          <CreateStep3
-            data={data}
-            onChange={(params: RouteModule.Step3Data) => setStep3Data({ ...step3Data, ...params })}
-          />
-        );
+        return <CreateStep3 data={data} onChange={setStep3Data} />;
       default:
         return null;
     }
diff --git a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
index 52b95a7..eb9c569 100644
--- a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
+++ b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { SettingOutlined, LinkOutlined } from '@ant-design/icons';
+import { omit, merge } from 'lodash';
 
 import { pluginList } from '@/components/PluginForm';
 import PanelSection from '../PanelSection';
@@ -15,7 +16,7 @@ const sectionStyle = {
   gridColumnGap: 10,
 };
 
-const CreateStep3: React.FC<Props> = ({ data }) => {
+const CreateStep3: React.FC<Props> = ({ data, onChange }) => {
   // NOTE: Plugin in blacklist WILL NOT be shown on Step3.
   const pluginBlackList = ['redirect'];
 
@@ -71,6 +72,7 @@ const CreateStep3: React.FC<Props> = ({ data }) => {
       </PanelSection>
       <PluginDrawer
         name={currentPlugin}
+        initialData={currentPlugin ? data.step3Data.plugins[currentPlugin] : {}}
         active={Boolean(activeList.find((item) => item.name === currentPlugin))}
         onActive={(name: string) => {
           setInactiveList(inactiveList.filter((item) => item.name !== name));
@@ -79,9 +81,13 @@ const CreateStep3: React.FC<Props> = ({ data }) => {
         onInactive={(name: string) => {
           setActiveList(activeList.filter((item) => item.name !== name));
           setInactiveList(inactiveList.concat({ name }));
+          onChange(omit({ ...data.step3Data }, `plugins.${currentPlugin}`));
           setCurrentPlugin(undefined);
         }}
-        onFinish={(value) => console.log('plugin data:', value)}
+        onClose={() => setCurrentPlugin(undefined)}
+        onFinish={(value) =>
+          onChange(merge(data.step3Data, { plugins: { [currentPlugin as string]: value } }))
+        }
       />
     </>
   );
diff --git a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
index 59447be..575bdb2 100644
--- a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Drawer, Button } from 'antd';
 import { useForm } from 'antd/es/form/util';
 
@@ -8,16 +8,19 @@ interface Props extends Omit<PluginForm.Props, 'form'> {
   active?: boolean;
   onActive(name: string): void;
   onInactive(name: string): void;
+  onClose(): void;
 }
 
-const PluginDrawer: React.FC<Props> = ({ name, active, onActive, onInactive, ...rest }) => {
-  const [visiable, setVisiable] = useState(false);
+const PluginDrawer: React.FC<Props> = ({
+  name,
+  active,
+  onActive,
+  onInactive,
+  onClose,
+  ...rest
+}) => {
   const [form] = useForm();
 
-  useEffect(() => {
-    setVisiable(Boolean(name));
-  }, [name]);
-
   if (!name) {
     return null;
   }
@@ -26,9 +29,9 @@ const PluginDrawer: React.FC<Props> = ({ name, active, onActive, onInactive, ...
     <Drawer
       title={`配置 ${name} 插件`}
       width={400}
-      visible={visiable}
+      visible={Boolean(name)}
       destroyOnClose
-      onClose={() => setVisiable(false)}
+      onClose={onClose}
       footer={
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div>
@@ -45,7 +48,7 @@ const PluginDrawer: React.FC<Props> = ({ name, active, onActive, onInactive, ...
           </div>
           {Boolean(active) && (
             <div>
-              <Button onClick={() => setVisiable(false)}>取消</Button>
+              <Button onClick={onClose}>取消</Button>
               <Button
                 type="primary"
                 style={{ marginRight: 8, marginLeft: 8 }}