feat: support show all enable plugin list tab

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,54 @@ 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.get(selector.tab).within(() => {
+      cy.contains(selector.tabBtn, 'Enable').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.get(selector.tab).within(() => {
+      cy.contains(selector.tabBtn, 'All').click({
+        force: true,
+      });
+    });
+    cy.contains(data.basicAuthPlugin).should('exist');
+    cy.visit('/plugin/list');
+    cy.get(selector.empty).should('be.visible');
+  });
 });

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';
 
@@ -66,9 +66,11 @@ const PluginPage: React.FC<Props> = ({
   const { formatMessage } = useIntl();
   const [form] = Form.useForm();
   const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
+  const [enablePluginsList, setEnablePluginsList] = useState<PluginComponent.Meta[]>([]);
   const [pluginTemplateList, setPluginTemplateList] = useState<PluginTemplateModule.ResEntity[]>(
     [],
   );
+  const [showEnablePlugin, setShowEnablePlugin] = useState<boolean>(false);
   const [name, setName] = useState<string>(NEVER_EXIST_PLUGIN_FLAG);
   const [typeList, setTypeList] = useState<string[]>([]);
   const [plugins, setPlugins] = useState({});
@@ -96,6 +98,14 @@ const PluginPage: React.FC<Props> = ({
       form.setFieldsValue({ plugin_config_id });
     });
   }, []);
+
+  useEffect(() => {
+    const openList = pluginList.filter(
+      (item) => initialData[item.name] && !initialData[item.name].disable,
+    );
+    setEnablePluginsList(openList);
+  }, [initialData]);
+
   const openPluginList = pluginList.filter(
     (item) => initialData[item.name] && !initialData[item.name].disable,
   );
@@ -104,6 +114,34 @@ const PluginPage: React.FC<Props> = ({
     return index === self.indexOf(elem);
   });
 
+  const tabsList = [
+    {
+      title: formatMessage({ id: 'component.plugin.all' }),
+      key: 'allPlugins',
+    },
+    {
+      title: formatMessage({ id: 'component.plugin.enable' }),
+      key: 'enablePlugins',
+    },
+  ];
+
+  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>
@@ -199,7 +237,7 @@ const PluginPage: React.FC<Props> = ({
               id={`plugin-category-${typeItem}`}
             >
               {orderBy(
-                pluginList.filter(
+                (showEnablePlugin ? enablePluginsList : pluginList).filter(
                   readonly
                     ? (item) => item.type === typeItem && !item.hidden && initialData[item.name]
                     : (item) => item.type === typeItem && !item.hidden,
@@ -303,6 +341,7 @@ const PluginPage: React.FC<Props> = ({
           background-color: transparent;
         }
       `}</style>
+      {!readonly && <SwitchTab />}
       <Layout>
         <PluginList />
         <Plugin />

web/src/components/Plugin/locales/en-US.ts

@@ -31,7 +31,7 @@ export default {
   'component.plugin.serverless': 'Serverless',
   'component.plugin.observability': 'Observability',
   'component.plugin.other': 'Other',
-
+  'component.plugin.all': 'All',
   // cors
   'component.pluginForm.cors.allow_origins.tooltip':
     'Which Origins is allowed to enable CORS, format as：scheme://host:port, for example: https://somehost.com:8081. Multiple origin use , to split. When allow_credential is false, you can use * to indicate allow any origin. you also can allow all any origins forcefully using ** even already enable allow_credential, but it will bring some security risks.',

web/src/components/Plugin/locales/tr-TR.ts

@@ -32,6 +32,7 @@ export default {
   'component.plugin.serverless': 'Sunucusuz Mimari',
   'component.plugin.observability': 'Gözlemlenebilirlik',
   'component.plugin.other': 'Diğer',
+  'component.plugin.all': 'Tümü',
   // cors
   'component.pluginForm.cors.allow_origins.tooltip':
     'Originler CORSları aktif ettiğinde örn : ：scheme://host:port, örn https://somehost.com:8081.Kullanılacak birden çok kaynak allow_credential false olduğunda, herhangi bir kaynağa izin verildiğini belirtmek için * işaretini kullanabilirsiniz. Ayrıca, ** kullanarak tüm kökenlere izin verebilirsiniz, allow_credentialı etkinleştirirseniz bazı güvenlik riskleri getirecektir.',

web/src/components/Plugin/locales/zh-CN.ts

@@ -30,7 +30,7 @@ export default {
   'component.plugin.serverless': '无服务器架构',
   'component.plugin.observability': '可观测性',
   'component.plugin.other': '其它',
-
+  'component.plugin.all': '所有',
   // cors
   'component.pluginForm.cors.allow_origins.tooltip':
     '允许跨域访问的 Origin，格式如：scheme://host:port，比如: https://somehost.com:8081 。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Origin 都通过，但请注意这样存在安全隐患。',