resolving some conflicts

apache · Aug 15, 2022 · a9bd4eb · a9bd4eb
1 parent 80029c6
commit a9bd4eb
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 2 deletions.
diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
@@ -30,6 +30,8 @@ context('Delete Plugin List with the Drawer', () => {
     checkedSwitcher: '.ant-switch-checked',
     refresh: '.anticon-reload',
     empty: '.ant-empty-normal',
+    tab: '.ant-tabs-tab',
+    tabBtn: '.ant-tabs-tab-btn',
     notification: '.ant-notification-notice',
     notificationCloseIcon: '.ant-notification-notice-close',
   };
@@ -162,4 +164,56 @@ context('Delete Plugin List with the Drawer', () => {
     cy.visit('/plugin/list');
     cy.get(selector.empty).should('be.visible');
   });
+
+  it('should switch tabs to distinguish with enable or not enbale', function () {
+    cy.visit('/plugin/list');
+    cy.get(selector.refresh).click();
+    cy.contains('button', 'Enable').click();
+    cy.contains(data.basicAuthPlugin)
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').click({
+          force: true,
+        });
+      });
+    cy.get(selector.drawer)
+      .should('be.visible')
+      .within(() => {
+        cy.get(selector.disabledSwitcher).click();
+        cy.get(selector.checkedSwitcher).should('exist');
+      });
+    cy.contains('button', 'Submit').click();
+    cy.contains(data.basicAuthPlugin).should('not.exist');
+
+    cy.get(selector.tab).within(() => {
+      cy.contains(selector.tabBtn, 'Edit').click({
+        force: true,
+      });
+    });
+
+    cy.contains(data.basicAuthPlugin)
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').click({
+          force: true,
+        });
+      });
+
+    cy.contains('button', 'Delete').click({
+      force: true,
+    });
+    cy.contains('button', 'Confirm').click({
+      force: true,
+    });
+
+    cy.contains(data.basicAuthPlugin).should('not.exist');
+    cy.get(selector.tab).within(() => {
+      cy.contains(selector.tabBtn, 'Enable').click({
+        force: true,
+      });
+    });
+    cy.contains(data.basicAuthPlugin).should('exist');
+    cy.visit('/plugin/list');
+    cy.get(selector.empty).should('be.visible');
+  });
 });
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { Anchor, Layout, Card, Button, Form, Select, Alert } from 'antd';
+import { Anchor, Layout, Card, Button, Form, Select, Alert, Tabs } from 'antd';
 import { orderBy, omit } from 'lodash';
 import { useIntl } from 'umi';
 
@@ -104,6 +104,35 @@ const PluginPage: React.FC<Props> = ({
     return index === self.indexOf(elem);
   });
 
+  const [showEnablePlugin, setShowEnablePlugin] = useState<boolean>(true);
+  const tabsList = [
+    {
+      title: formatMessage({ id: 'component.plugin.enable' }),
+      key: 'enablePlugins',
+    },
+    {
+      title: formatMessage({ id: 'component.plugin.disable' }),
+      key: 'allPlugins',
+    },
+  ];
+
+  const SwitchTab = () => (
+    <Tabs
+      defaultActiveKey={showEnablePlugin ? 'enablePlugins' : 'allPlugins'}
+      onChange={(val: string) => {
+        if (val === 'enablePlugins') {
+          setShowEnablePlugin(true);
+        } else {
+          setShowEnablePlugin(false);
+        }
+      }}
+    >
+      {tabsList.map((tab) => (
+        <Tabs.TabPane tab={tab.title} key={tab.key} />
+      ))}
+    </Tabs>
+  );
+
   const PluginList = () => (
     <>
       <style>
@@ -202,7 +231,13 @@ const PluginPage: React.FC<Props> = ({
                 pluginList.filter(
                   readonly
                     ? (item) => item.type === typeItem && !item.hidden && initialData[item.name]
-                    : (item) => item.type === typeItem && !item.hidden,
+                    : (item) =>
+                        showEnablePlugin
+                          ? item.type === typeItem && !item.hidden && !initialData[item.name]
+                          : item.type === typeItem &&
+                            !item.hidden &&
+                            initialData[item.name] &&
+                            !initialData[item.name].disable,
                 ),
                 'name',
                 'asc',
@@ -303,6 +338,7 @@ const PluginPage: React.FC<Props> = ({
           background-color: transparent;
         }
       `}</style>
+      {!readonly && <SwitchTab />}
       <Layout>
         <PluginList />
         <Plugin />