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,57 @@ 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.contains(data.basicAuthPlugin)
+      .parents(selector.pluginCardBordered)
+      .within(() => {
+        cy.get('button').then(($el) => {
+          const text = $el.text();
+          expect(text).to.eq('Enable');
+        });
+      });
+    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, omit } 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,
+    plugin_config_id?: string,
+    handleType?: 'edit' | 'delete',
+  ) => void;
 };
 
 const PanelSectionStyle = {
@@ -281,10 +285,12 @@ const PluginPage: React.FC<Props> = ({
           ...initialData,
           [name]: { ...monacoData, disable: !formData.disable },
         };
+        let handleType = 'edit';
         if (shouldDelete === true) {
-          newPlugins = omit(newPlugins, name);
+          newPlugins = omit(plugins, name);
+          handleType = 'delete';
         }
-        onChange(newPlugins, form.getFieldValue('plugin_config_id'));
+        onChange(newPlugins, form.getFieldValue('plugin_config_id'), handleType);
         setPlugins(newPlugins);
         setName(NEVER_EXIST_PLUGIN_FLAG);
       }}

web/src/pages/Plugin/List.tsx

@@ -81,9 +81,7 @@ const Page: React.FC = () => {
                 const plugins = omit(initialData, [`${record.name}`]);
                 createOrUpdate({ plugins }).then(() => {
                   notification.success({
-                    message: `${formatMessage({ id: 'component.global.delete' })} ${formatMessage({
-                      id: 'menu.plugin',
-                    })} ${formatMessage({ id: 'component.status.success' })}`,
+                    message: formatMessage({ id: 'page.plugin.delete' }),
                   });
                   checkPageList(ref);
                   setInitialData(plugins);
@@ -131,6 +129,11 @@ const Page: React.FC = () => {
           setVisible(false);
           setName('');
           ref.current?.reload();
+          notification.success({
+            message: formatMessage({
+              id: `page.plugin.${shouldDelete ? 'delete' : 'edit'}`,
+            }),
+          });
         });
       }}
     />

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,16 @@ const PluginMarket: React.FC = () => {
           initialData={initialData}
           type="global"
           schemaType="route"
-          onChange={(pluginsData) => {
+          onChange={(pluginsData, pluginId, handleType) => {
             createOrUpdate({
-              plugins: {
-                ...initialData,
-                ...pluginsData,
-              },
+              plugins: pluginsData,
             }).then(() => {
               initPageData();
+              notification.success({
+                message: formatMessage({
+                  id: `page.plugin.${handleType}`,
+                }),
+              });
             });
           }}
         />

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

@@ -19,4 +19,6 @@ export default {
   'page.plugin.list': 'Plugin List',
   'page.plugin.list.enabled': 'List of enabled plugins',
   'page.plugin.market.config': 'Global Plugin List',
+  'page.plugin.edit': 'Configure Plugin Successfully',
+  'page.plugin.delete': 'Delete Plugin Successfully',
 };

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

@@ -19,4 +19,6 @@ export default {
   'page.plugin.list': 'Eklenti Listesi',
   'page.plugin.list.enabled': 'Aktif eklentilerin listesi',
   'page.plugin.market.config': 'Genel Eklenti Listesi',
+  'page.plugin.edit': 'Eklenti başarıyla yapılandırma',
+  'page.plugin.delete': 'Eklentiyi başarıyla kaldırın',
 };

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

@@ -19,4 +19,6 @@ export default {
   'page.plugin.list': '插件列表',
   'page.plugin.list.enabled': '已启用插件的列表',
   'page.plugin.market.config': '全局插件列表',
+  'page.plugin.edit': '配置插件成功',
+  'page.plugin.delete': '删除插件成功',
 };