fix: cannot delete multiple plugins without page refreshing

web/cypress/fixtures/plugin-list.json

@@ -0,0 +1,41 @@
+{
+  "api-breaker": [
+    {
+      "data": {
+        "break_response_code": 502,
+        "disable": false,
+        "healthy": {
+          "successes": 3
+        },
+        "max_breaker_sec": 10,
+        "unhealthy": {
+          "failures": 1,
+          "http_statuses": [
+            500,
+            503
+          ]
+        }
+      }
+    }
+  ],
+  "echo": [
+    {
+      "data": {
+        "before_body": "before the body modification ",
+        "disable": false
+      }
+    }
+  ],
+  "jwt-auth": [
+    {
+      "data": {
+        "disable": false
+      }
+    }
+  ],
+  "hmac-auth": [
+    {
+      "data": {}
+    }
+  ]
+}

web/cypress/integration/plugin/create_and_delete_plugin.spec.js

@@ -0,0 +1,60 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Plugin List', () => {
+  const domSelectors = {
+    tableCell: '.ant-table-cell',
+    empty: '.ant-empty-normal',
+  };
+
+  beforeEach(() => {
+    cy.login();
+
+    cy.fixture('plugin-list.json').as('cases');
+  });
+
+  it('should create plugins', function () {
+    cy.visit('/');
+    cy.contains('Plugin').click();
+    cy.contains('Create').click();
+
+    // add test plugins
+    cy.configurePlugins(this.cases);
+  });
+
+  it('should delete plugin list', () => {
+    cy.visit('/');
+    cy.contains('Plugin').click();
+
+    cy.wait(500);
+    cy.get(domSelectors.tableCell).then(function (rows) {
+      [...rows].forEach((row) => {
+        const name = row.innerText;
+        const cases = this.cases[name] || [];
+
+        cases.forEach(() => {
+          cy.contains(name).siblings().contains('Delete').click();
+          cy.contains('button', 'Confirm').click();
+        });
+      });
+    });
+
+    // check if plugin list is empty
+    cy.get(domSelectors.empty);
+  });
+});

web/cypress/integration/plugin/schema-smocktest.spec.js

@@ -31,74 +31,7 @@ context('smoke test for plugin schema', () => {
     cy.contains('Plugin').click();
     cy.contains('Create').click();
 
-    const nameSelector = '[data-cy-plugin-name]';
-    cy.get(nameSelector).then(function (cards) {
-      [...cards].forEach((card) => {
-        const name = card.innerText;
-        const cases = this.cases[name] || [];
-        // eslint-disable-next-line consistent-return
-        cases.forEach(({ shouldValid, data, type = '' }) => {
-          /**
-           * NOTE: This test is mainly for GlobalPlugin, which is using non-consumer-type schema.
-           */
-          if (type === 'consumer') {
-            return true;
-          }
-
-          cy.contains(name)
-            .parents('.ant-card-bordered')
-            .within(() => {
-              cy.contains('Enable').click({
-                force: true,
-                timeout,
-              });
-            });
-
-          // NOTE: wait for the Drawer to appear on the DOM
-          const drawerSelector = '.ant-drawer-content';
-          cy.get(drawerSelector).within(() => {
-            const switchSelector = '#disable';
-            cy.get(switchSelector).click({
-              force: true,
-              timeout,
-            });
-          });
-
-          cy.window().then(({ codemirror }) => {
-            if (codemirror) {
-              codemirror.setValue(JSON.stringify(data));
-            }
-          });
-
-          cy.get(drawerSelector).within(() => {
-            cy.contains('Submit').click({
-              force: true,
-              timeout,
-            });
-          });
-
-          // NOTE: wait for the HTTP call
-          cy.wait(500);
-          if (shouldValid) {
-            cy.get(drawerSelector).should('not.exist');
-          } else {
-            cy.get(this.selector.notification).should('contain', 'Invalid plugin data');
-
-            cy.get('.anticon-close').click({
-              force: true,
-              timeout,
-              multiple: true,
-            });
-
-            cy.get(drawerSelector).within(() => {
-              cy.contains('Cancel').click({
-                force: true,
-                timeout,
-              });
-            });
-          }
-        });
-      });
-    });
+    // add test plugins
+    cy.configurePlugins(this.cases);
   });
 });

web/cypress/support/commands.js

@@ -34,3 +34,77 @@ Cypress.Commands.add('login', () => {
     localStorage.setItem('umi_locale', 'en-US');
   });
 });
+
+Cypress.Commands.add('configurePlugins', (cases) => {
+  const timeout = 50000;
+  const domSelectors = {
+    name: '[data-cy-plugin-name]',
+    parents: '.ant-card-bordered',
+    drawer: '.ant-drawer-content',
+    switch: '#disable',
+    close: '.anticon-close',
+  };
+
+  cy.get(domSelectors.name).then(function (cards) {
+    [...cards].forEach((card) => {
+      const name = card.innerText;
+      const pluginCases = cases[name] || [];
+      // eslint-disable-next-line consistent-return
+      pluginCases.forEach(({ shouldValid, data, type = '' }) => {
+        if (type === 'consumer') {
+          return true;
+        }
+
+        cy.contains(name)
+          .parents(domSelectors.parents)
+          .within(() => {
+            cy.contains('Enable').click({
+              force: true,
+              timeout,
+            });
+          });
+
+        // NOTE: wait for the Drawer to appear on the DOM
+        cy.get(domSelectors.drawer).within(() => {
+          cy.get(domSelectors.switch).click({
+            force: true,
+            timeout,
+          });
+        });
+
+        cy.window().then(({ codemirror }) => {
+          if (codemirror) {
+            codemirror.setValue(JSON.stringify(data));
+          }
+        });
+
+        cy.get(domSelectors.drawer).within(() => {
+          cy.contains('Submit').click({
+            force: true,
+            timeout,
+          });
+        });
+
+        // NOTE: wait for the HTTP call
+        if (shouldValid === true) {
+          cy.get(domSelectors.drawer).should('not.exist');
+        } else if (shouldValid === false) {
+          cy.get(this.selector.notification).should('contain', 'Invalid plugin data');
+
+          cy.get(domSelectors.close).click({
+            force: true,
+            timeout,
+            multiple: true,
+          });
+
+          cy.get(domSelectors.drawer).within(() => {
+            cy.contains('Cancel').click({
+              force: true,
+              timeout,
+            });
+          });
+        }
+      });
+    });
+  });
+});

web/src/pages/Plugin/List.tsx

@@ -79,6 +79,7 @@ const Page: React.FC = () => {
                 const plugins = omit(initialData, [`${record.name}`]);
                 createOrUpdate({ plugins }).then(() => {
                   ref.current?.reload();
+                  setInitialData(plugins);
                   setName('');
                 });
               }}