fix: drawer components delete plugin not working

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',
+    notification: '.ant-notification-notice',
+    notificationCloseIcon: '.ant-notification-notice-close',
   };
 
   const data = {
@@ -107,6 +109,48 @@ context('Delete Plugin List with the Drawer', () => {
     cy.contains('button', 'Confirm').click({
       force: true,
     });
+    cy.get(selector.notification).should('contain', 'Delete Plugin Successfully');
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
+    cy.get(selector.empty).should('be.visible');
+  });
+
+  it('should delete the plugin with the drawer in the list of plugins', function () {
+    cy.visit('/plugin/list');
+    cy.get(selector.refresh).click();
+    cy.contains('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)
+      .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.notification).should('contain', 'Delete Plugin Successfully');
+    cy.get(selector.notificationCloseIcon).click({ multiple: true });
+    cy.visit('/plugin/list');
     cy.get(selector.empty).should('be.visible');
   });
 });

web/src/components/Plugin/PluginPage.tsx

@@ -16,7 +16,7 @@
  */
 import React, { useEffect, useState } from 'react';
 import { Anchor, Layout, Card, Button, Form, Select, Alert } from 'antd';
-import { omit, orderBy } from 'lodash';
+import { orderBy } from 'lodash';
 import { useIntl } from 'umi';
 
 import PanelSection from '@/components/PanelSection';
@@ -33,7 +33,11 @@ type Props = {
   schemaType?: PluginComponent.Schema;
   referPage?: PluginComponent.ReferPage;
   showSelector?: boolean;
-  onChange?: (plugins: PluginComponent.Data, plugin_config_id?: string) => void;
+  onChange?: (
+    plugins: PluginComponent.Data,
+    handleType: 'edit' | 'delete',
+    plugin_config_id?: string,
+  ) => void;
 };
 
 const PanelSectionStyle = {
@@ -277,14 +281,13 @@ const PluginPage: React.FC<Props> = ({
         setName(NEVER_EXIST_PLUGIN_FLAG);
       }}
       onChange={({ monacoData, formData, shouldDelete }) => {
-        let newPlugins = {
+        const newPlugins = {
           ...initialData,
           [name]: { ...monacoData, disable: !formData.disable },
+          ...(shouldDelete ? { [name]: null } : {}),
         };
-        if (shouldDelete === true) {
-          newPlugins = omit(newPlugins, name);
-        }
-        onChange(newPlugins, form.getFieldValue('plugin_config_id'));
+        const handleType = shouldDelete ? 'delete' : 'edit';
+        onChange(newPlugins, handleType, form.getFieldValue('plugin_config_id'));
         setPlugins(newPlugins);
         setName(NEVER_EXIST_PLUGIN_FLAG);
       }}

web/src/pages/Plugin/List.tsx

@@ -131,6 +131,13 @@ const Page: React.FC = () => {
           setVisible(false);
           setName('');
           ref.current?.reload();
+          notification.success({
+            message: `${formatMessage({
+              id: `component.global.${shouldDelete ? 'delete' : 'edit'}`,
+            })} ${formatMessage({
+              id: 'menu.plugin',
+            })} ${formatMessage({ id: 'component.status.success' })}`,
+          });
         });
       }}
     />

web/src/pages/Plugin/PluginMarket.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import React, { useEffect, useState } from 'react';
-import { Card } from 'antd';
+import { Card, notification } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 import PluginPage from '@/components/Plugin';
@@ -48,14 +48,21 @@ const PluginMarket: React.FC = () => {
           initialData={initialData}
           type="global"
           schemaType="route"
-          onChange={(pluginsData) => {
+          onChange={(pluginsData, handleType) => {
             createOrUpdate({
               plugins: {
                 ...initialData,
                 ...pluginsData,
               },
             }).then(() => {
               initPageData();
+              notification.success({
+                message: `${formatMessage({
+                  id: `component.global.${handleType}`,
+                })} ${formatMessage({
+                  id: 'menu.plugin',
+                })} ${formatMessage({ id: 'component.status.success' })}`,
+              });
             });
           }}
         />