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,8 @@ 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');
   });
 
@@ -144,6 +148,8 @@ 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.visit('/plugin/list');
     cy.get(selector.empty).should('be.visible');
   });

web/src/components/Plugin/PluginPage.tsx

@@ -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 = {
@@ -280,11 +284,10 @@ const PluginPage: React.FC<Props> = ({
         const newPlugins = {
           ...initialData,
           [name]: { ...monacoData, disable: !formData.disable },
+          ...(shouldDelete ? { [name]: null } : {}),
         };
-        if (shouldDelete === true) {
-          newPlugins[name] = null;
-        }
-        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' })}`,
+              });
             });
           }}
         />