feat: support show all enable plugin list tab

web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js

@@ -186,7 +186,7 @@ context('Delete Plugin List with the Drawer', () => {
     cy.contains(data.basicAuthPlugin).should('not.exist');
 
     cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Edit').click({
+      cy.contains(selector.tabBtn, 'Enable').click({
         force: true,
       });
     });
@@ -208,7 +208,7 @@ context('Delete Plugin List with the Drawer', () => {
 
     cy.contains(data.basicAuthPlugin).should('not.exist');
     cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Enable').click({
+      cy.contains(selector.tabBtn, 'All').click({
         force: true,
       });
     });

web/cypress/integration/rest/service-create-edit-delete-service.spec.js

@@ -39,8 +39,6 @@ context('Create and Delete Service ', () => {
     drawerFooter: '.ant-drawer-footer',
     notification: '.ant-notification-notice-message',
     nameSelector: '[title=Name]',
-    tab: '.ant-tabs-tab',
-    tabBtn: '.ant-tabs-tab-btn',
   };
 
   const data = {
@@ -104,11 +102,6 @@ context('Create and Delete Service ', () => {
     cy.contains('button', 'Submit').click();
     cy.get(selector.drawer, { timeout }).should('not.exist');
 
-    cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Edit').click({
-        force: true,
-      });
-    });
     cy.contains(data.basicAuthPlugin)
       .parents(selector.pluginCardBordered)
       .within(() => {
@@ -118,12 +111,6 @@ context('Create and Delete Service ', () => {
     cy.get(selector.drawerFooter).contains('button', 'Delete').click({ force: true });
     cy.contains('button', 'Confirm').click({ force: true });
 
-    cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Enable').click({
-        force: true,
-      });
-    });
-
     cy.contains(data.basicAuthPlugin)
       .parents(selector.pluginCardBordered)
       .within(() => {

web/cypress/integration/rest/upstream-create_and_edit_upstream_with_no_nodes.spec.js

@@ -49,7 +49,6 @@ context('Create and Delete Upstream', () => {
     cy.get(selector.upstreamNodeMinus0).click();
 
     cy.contains('Next').click();
-    cy.wait(100);
     cy.contains('Submit').click();
     cy.get(selector.notification).should('contain', data.createUpstreamSuccess);
     cy.url().should('contains', 'upstream/list');

web/cypress/integration/route/create-route-with-cors-form.spec.js

@@ -35,8 +35,6 @@ context('Create and delete route with cors form', () => {
     allow_origins_by_regex0: '#allow_origins_by_regex_0',
     allow_origins_by_regex1: '#allow_origins_by_regex_1',
     addButton: '[data-cy=add-allow_origins_by_regex]',
-    tab: '.ant-tabs-tab',
-    tabBtn: '.ant-tabs-tab-btn',
   };
 
   const data = {
@@ -64,7 +62,6 @@ context('Create and delete route with cors form', () => {
     cy.get(selector.nodes_0_port).clear().type(data.port);
     cy.get(selector.nodes_0_weight).clear().type(data.weight);
     cy.contains('Next').click();
-    cy.wait(1000);
     // config cors plugin
     cy.contains('cors')
       .parents(selector.pluginCardBordered)
@@ -118,14 +115,8 @@ context('Create and delete route with cors form', () => {
     cy.contains('routeName').siblings().contains('Configure').click();
     cy.get(selector.name).should('have.value', 'routeName');
     cy.contains('Next').click();
-    cy.wait(500);
     cy.contains('Next').click();
 
-    cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Edit').click({
-        force: true,
-      });
-    });
     // config cors plugin
     cy.contains('cors')
       .parents(selector.pluginCardBordered)

web/cypress/integration/route/create-route-with-limit-count-plugin-form.spec.js

@@ -46,8 +46,6 @@ context('Create and delete route with limit-count form', () => {
     redis_cluster_nodes_0: '#redis_cluster_nodes_0',
     redis_cluster_nodes_1: '#redis_cluster_nodes_1',
     dropdown: '.rc-virtual-list',
-    tab: '.ant-tabs-tab',
-    tabBtn: '.ant-tabs-tab-btn',
   };
 
   const data = {
@@ -99,11 +97,6 @@ context('Create and delete route with limit-count form', () => {
     });
     cy.get(selector.drawer).should('not.exist');
 
-    cy.get(selector.tab).within(() => {
-      cy.contains(selector.tabBtn, 'Edit').click({
-        force: true,
-      });
-    });
     // config limit-count form with redis policy
     cy.contains(selector.pluginCard, 'limit-count').within(() => {
       cy.get('button').click({

web/src/components/Plugin/PluginPage.tsx

@@ -66,6 +66,7 @@ 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[]>(
     [],
   );
@@ -96,23 +97,32 @@ 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,
   );
+
   const openPluginType = openPluginList.map((item) => item.type);
   const newOpenPluginType = openPluginType.filter((elem, index, self) => {
     return index === self.indexOf(elem);
   });
 
-  const [showEnablePlugin, setShowEnablePlugin] = useState<boolean>(true);
+  const [showEnablePlugin, setShowEnablePlugin] = useState<boolean>(false);
   const tabsList = [
     {
-      title: formatMessage({ id: 'component.plugin.enable' }),
-      key: 'enablePlugins',
+      title: formatMessage({ id: 'component.plugin.all' }),
+      key: 'allPlugins',
     },
     {
-      title: formatMessage({ id: 'component.plugin.disable' }),
-      key: 'allPlugins',
+      title: formatMessage({ id: 'component.plugin.enable' }),
+      key: 'enablePlugins',
     },
   ];
 
@@ -228,19 +238,10 @@ 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) =>
-                        showEnablePlugin
-                          ? item.type === typeItem &&
-                            !item.hidden &&
-                            (!initialData[item.name] ||
-                              (initialData[item.name] && initialData[item.name].disable))
-                          : item.type === typeItem &&
-                            !item.hidden &&
-                            initialData[item.name] &&
-                            !initialData[item.name].disable,
+                    : (item) => item.type === typeItem && !item.hidden,
                 ),
                 'name',
                 'asc',

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 都通过，但请注意这样存在安全隐患。',