@nocobase/client-v2 2.1.0-alpha.40 → 2.1.0-alpha.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.0-alpha.40",
+  "version": "2.1.0-alpha.45",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -20,17 +20,18 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@ctrl/tinycolor": "^3.6.0",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^7.0.0",
     "@emotion/css": "^11.7.1",
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.0-alpha.40",
-    "@nocobase/flow-engine": "2.1.0-alpha.40",
-    "@nocobase/sdk": "2.1.0-alpha.40",
-    "@nocobase/shared": "2.1.0-alpha.40",
-    "@nocobase/utils": "2.1.0-alpha.40",
+    "@nocobase/evaluators": "2.1.0-alpha.45",
+    "@nocobase/flow-engine": "2.1.0-alpha.45",
+    "@nocobase/sdk": "2.1.0-alpha.45",
+    "@nocobase/shared": "2.1.0-alpha.45",
+    "@nocobase/utils": "2.1.0-alpha.45",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -44,5 +45,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "e73f99dd0abefe847f2e50ff0fea1f41a82fd048"
+  "gitHead": "e9e24987e12d0ad10a5db8815b1e1b7b447f1938"
 }

package/src/Application.tsx

@@ -42,6 +42,7 @@ export class Application extends BaseApplication<
   PluginSettingsManager
 > {
   public declare dataSourceManager: any;
+  public hasLoadError = false;
 
   protected createApiClient(options: ApplicationOptions) {
     return new APIClient({
@@ -99,9 +100,29 @@ export class Application extends BaseApplication<
   }
 
   async load() {
-    await this.loadWebSocket();
-    await this.pm.load();
-    await this.flowEngine.flowSettings.load();
+    try {
+      this.hasLoadError = false;
+      await this.loadWebSocket();
+      await this.pm.load();
+      await this.flowEngine.flowSettings.load();
+    } catch (error: any) {
+      this.hasLoadError = true;
+
+      if (error?.response?.data?.errors?.[0]?.code === 'BLOCKED_IP') {
+        this.hasLoadError = false;
+      }
+
+      if (this.ws.enabled) {
+        await new Promise((resolve) => {
+          setTimeout(() => resolve(null), 1000);
+        });
+      }
+      this.error = {
+        code: 'LOAD_ERROR',
+        ...this.apiClient.toErrMessages(error)?.[0],
+      };
+      console.error(error, this.error);
+    }
     this.updateFavicon();
   }
 
@@ -130,20 +151,14 @@ export class Application extends BaseApplication<
         return;
       }
 
-      if (this.error && data.payload.code === 'APP_RUNNING') {
-        this.maintained = true;
-        this.setMaintaining(false);
-        this.error = null;
-        globalThis.window.location.reload();
-        return;
-      }
-
       const maintaining = data.type === 'maintaining' && data.payload.code !== 'APP_RUNNING';
-      console.log('ws:message', { maintaining, data });
       if (maintaining) {
         this.setMaintaining(true);
         this.error = data.payload;
       } else {
+        if (this.hasLoadError) {
+          globalThis.window.location.reload();
+        }
         this.setMaintaining(false);
         this.maintained = true;
         this.error = null;
@@ -193,4 +208,28 @@ export class Application extends BaseApplication<
   addFieldInterfaceOperator(name: string, operatorOption: any) {
     return this.dataSourceManager.addFieldInterfaceOperator(name, operatorOption);
   }
+
+  registerFieldFilterOperator(operator: any) {
+    return this.dataSourceManager.registerFieldFilterOperator(operator);
+  }
+
+  registerFieldFilterOperatorGroup(name: string, operators: any[] = []) {
+    return this.dataSourceManager.registerFieldFilterOperatorGroup(name, operators);
+  }
+
+  addFieldFilterOperatorsToGroup(name: string, operators: any[] = []) {
+    return this.dataSourceManager.addFieldFilterOperatorsToGroup(name, operators);
+  }
+
+  registerFieldValidationConfigure(item: any) {
+    return this.dataSourceManager.collectionFieldInterfaceManager?.registerFieldValidationConfigure?.(item);
+  }
+
+  registerFieldValidationConfigureGroup(name: string, items: any[] = []) {
+    return this.dataSourceManager.collectionFieldInterfaceManager?.registerFieldValidationConfigureGroup?.(name, items);
+  }
+
+  addFieldValidationConfiguresToGroup(name: string, items: any[] = []) {
+    return this.dataSourceManager.collectionFieldInterfaceManager?.addFieldValidationConfiguresToGroup?.(name, items);
+  }
 }

package/src/BaseApplication.tsx

@@ -25,11 +25,13 @@ import { I18nextProvider } from 'react-i18next';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Link, NavLink, Navigate } from 'react-router-dom';
 import { isValidElementType } from 'react-is';
+import type { AppListProps } from '@ant-design/pro-layout/es/components/AppsLogoComponents/types';
 import AntdAppProvider from './theme/AntdAppProvider';
 import { GlobalThemeProvider } from './theme';
 import { AIManager } from './ai';
 import { AppError, AppMaintaining, AppMaintainingDialog, AppNotFound, AppSpin, BlankComponent } from './components';
 import { SystemSettingsSource } from './flow/system-settings';
+import { LayoutManager } from './layout-manager/LayoutManager';
 import type { PluginClass, PluginManager, PluginType } from './PluginManager';
 import { RouteRepository } from './RouteRepository';
 import type {
@@ -54,6 +56,7 @@ declare global {
 }
 
 type AnyComponent = RenderableComponentType<any>;
+type AppListLoader = (app: BaseApplication<any>) => Promise<AppListProps> | AppListProps;
 type AuthTokenPayload = {
   token: string;
   authenticator: string | null;
@@ -122,6 +125,7 @@ export abstract class BaseApplication<
   public components: Record<string, AnyComponent> = {};
   public pluginManager: TPluginManager;
   public pluginSettingsManager: TPluginSettingsManager;
+  public layoutManager: LayoutManager<this>;
   public aiManager!: AIManager;
   public devDynamicImport?: DevDynamicImport;
   public requirejs!: RequireJS;
@@ -153,8 +157,10 @@ export abstract class BaseApplication<
   private wsAuthorized = false;
   apps: {
     Component?: AnyComponent | null;
+    loadAppList?: AppListLoader | null;
   } = {
     Component: null,
+    loadAppList: null,
   };
 
   get pm(): TPluginManager {
@@ -169,6 +175,18 @@ export abstract class BaseApplication<
     return this.wsAuthorized;
   }
 
+  public setDocumentLanguage(language?: string | null) {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (language) {
+      document.documentElement.lang = language;
+    } else {
+      document.documentElement.removeAttribute('lang');
+    }
+  }
+
   constructor(protected options: TOptions = {} as TOptions) {
     this.initRequireJs();
     this.defineObservableState();
@@ -180,6 +198,7 @@ export abstract class BaseApplication<
     this.initializeExtendedState();
     this.i18n = this.createI18n(options);
     this.router = this.createRouterManager(options);
+    this.layoutManager = this.createLayoutManager(options);
     this.pluginManager = this.createPluginManager(options);
     this.flowEngine = new FlowEngine();
     this.flowEngine.registerModels({ ApplicationModel });
@@ -205,6 +224,7 @@ export abstract class BaseApplication<
     this.addRoutes();
     this.i18n.on('languageChanged', (lng) => {
       this.apiClient.auth.locale = lng;
+      this.setDocumentLanguage(lng);
     });
     this.initListeners();
     this.afterManagersInitialized();
@@ -218,6 +238,7 @@ export abstract class BaseApplication<
       maintained: observable.ref,
       maintaining: observable.ref,
       error: observable.ref,
+      apps: observable,
     });
   }
 
@@ -517,6 +538,14 @@ export abstract class BaseApplication<
     });
   }
 
+  setAppsComponent({ Component }: { Component: AnyComponent }) {
+    this.apps.Component = Component;
+  }
+
+  setAppsProvider({ loadAppList }: { loadAppList: AppListLoader }) {
+    this.apps.loadAppList = loadAppList;
+  }
+
   protected getRootFallback() {
     return this.renderComponent('AppSpin');
   }
@@ -554,6 +583,9 @@ export abstract class BaseApplication<
   protected abstract createRouterManager(options: TOptions): TRouterManager;
   protected abstract createPluginManager(options: TOptions): TPluginManager;
   protected abstract createPluginSettingsManager(options: TOptions): TPluginSettingsManager;
+  protected createLayoutManager(_options: TOptions) {
+    return new LayoutManager(this);
+  }
   protected createWebSocketClient(options: TOptions) {
     return new WebSocketClient(options.ws ?? false);
   }

package/src/PluginSettingsManager.ts

@@ -524,7 +524,7 @@ export class PluginSettingsManager<TApp extends BaseApplication<any> = BaseAppli
 
     if (page.key === 'index') {
       this.app.router.add(this.getRouteName(page.name), {
-        index: true,
+        path: '',
         Component: fallbackComponent,
         componentLoader: page.componentLoader,
       });

package/src/RouterManager.tsx

@@ -50,10 +50,25 @@ export interface RouteType extends Omit<RouteObject, 'children' | 'Component'> {
   Component?: ComponentTypeAndString;
   componentLoader?: ComponentLoader;
   skipAuthCheck?: boolean;
+  authCheck?: boolean;
 }
 export type RenderComponentType = (Component: ComponentTypeAndString, props?: any) => React.ReactNode;
 export type RouterComponentType = React.FC<{ BaseLayout?: ComponentType }>;
 
+function removeBasename(pathname: string, basename?: string) {
+  if (!basename || basename === '/') {
+    return pathname;
+  }
+  const normalizedBasename = basename.replace(/\/$/, '');
+  if (pathname === normalizedBasename) {
+    return '/';
+  }
+  if (pathname.startsWith(`${normalizedBasename}/`)) {
+    return pathname.slice(normalizedBasename.length) || '/';
+  }
+  return pathname;
+}
+
 export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<any>> {
   protected routes: Record<string, RouteType> = {};
   protected options: RouterOptions;
@@ -186,8 +201,9 @@ export class RouterManager<TApp extends BaseApplication<any> = BaseApplication<a
 
   matchRoutes(pathname: string) {
     const routes = this.getRoutesTree();
+    const basename = this.router?.basename || this.getBasename();
     // @ts-ignore
-    return matchRoutes<RouteType>(routes, pathname, this.basename);
+    return matchRoutes<RouteType>(routes, removeBasename(pathname, basename));
   }
 
   isSkippedAuthCheckRoute(pathname: string) {

package/src/__tests__/PluginSettingsManager.test.ts

@@ -9,6 +9,8 @@
 
 import React from 'react';
 import { createMockClient } from '@nocobase/client-v2';
+import { createMemoryRouter } from 'react-router-dom';
+import type { RouteObject } from 'react-router-dom';
 
 describe('PluginSettingsManager v2', () => {
   it('should return menu -> page two-level structure', () => {
@@ -72,7 +74,7 @@ describe('PluginSettingsManager v2', () => {
     expect(app.pluginSettingsManager.getRoutePath('demo.advanced')).toBe('/admin/settings/demo/advanced');
 
     expect(app.router.get('admin.settings.demo')).toMatchObject({ path: 'demo' });
-    expect(app.router.get('admin.settings.demo.index')).toMatchObject({ index: true });
+    expect(app.router.get('admin.settings.demo.index')).toMatchObject({ path: '' });
     expect(app.router.get('admin.settings.demo.advanced')).toMatchObject({ path: 'advanced' });
   });
 
@@ -110,7 +112,44 @@ describe('PluginSettingsManager v2', () => {
     });
 
     expect(app.pluginSettingsManager.get('demo.index')).toMatchObject({ componentLoader });
-    expect(app.router.get('admin.settings.demo.index')).toMatchObject({ componentLoader, index: true });
+    expect(app.router.get('admin.settings.demo.index')).toMatchObject({ componentLoader, path: '' });
+  });
+
+  it('should allow nested routes under index page route', () => {
+    const app = createMockClient();
+    const findRoute = (routes: RouteObject[], routeId: string): RouteObject | null => {
+      for (const route of routes) {
+        if (route.id === routeId) {
+          return route;
+        }
+        const matched = route.children ? findRoute(route.children, routeId) : null;
+        if (matched) {
+          return matched;
+        }
+      }
+      return null;
+    };
+
+    app.pluginSettingsManager.addMenuItem({ key: 'demo', title: 'Demo' });
+    app.pluginSettingsManager.addPageTabItem({ menuKey: 'demo', key: 'index', title: 'Overview' });
+    app.router.add('admin.settings.demo.index.layout', {
+      path: 'configure',
+      Component: () => React.createElement('div', null, 'configure'),
+    });
+
+    const routes = app.router.getRoutesTree();
+    const indexRoute = findRoute(routes, 'admin.settings.demo.index');
+
+    expect(indexRoute).toMatchObject({
+      id: 'admin.settings.demo.index',
+      path: '',
+    });
+    expect(indexRoute).not.toHaveProperty('index');
+    expect(findRoute(routes, 'admin.settings.demo.index.layout')).toMatchObject({
+      id: 'admin.settings.demo.index.layout',
+      path: 'configure',
+    });
+    expect(() => createMemoryRouter(routes, { initialEntries: ['/demo/configure/form-1'] })).not.toThrow();
   });
 
   it('should merge duplicate registration and refresh route config', () => {

package/src/__tests__/app.test.tsx

@@ -33,6 +33,7 @@ describe('app', () => {
 
     afterEach(() => {
       document.querySelectorAll('link[rel="shortcut icon"]').forEach((node) => node.remove());
+      document.documentElement.removeAttribute('lang');
       vi.restoreAllMocks();
     });
 
@@ -89,6 +90,14 @@ describe('app', () => {
       expect(favicon.getAttribute('href')).toBe('/favicon/favicon.ico');
     });
 
+    it('should sync document language when app language changes', async () => {
+      const app = new Application({ router });
+
+      await app.i18n.changeLanguage('ja-JP');
+
+      expect(document.documentElement.lang).toBe('ja-JP');
+    });
+
     it('should escape app version html placeholder content', () => {
       expect(getAppVersionHTML('<script>alert(1)</script>&"')).toBe(
         '<span class="nb-app-version">v&lt;script&gt;alert(1)&lt;/script&gt;&amp;&quot;</span>',
@@ -234,6 +243,10 @@ describe('app', () => {
     });
     await renderApp(app);
     expect(await screen.findByText('Hello Basename Route')).toBeInTheDocument();
+    expect(app.router.matchRoutes('/v2/demo/app-info')?.some((match) => match.route.path === '/demo/app-info')).toBe(
+      true,
+    );
+    expect(app.router.matchRoutes('/demo/app-info')?.some((match) => match.route.path === '/demo/app-info')).toBe(true);
   });
 
   it('should support plugin settings componentLoader lazy functionality', async () => {
@@ -370,7 +383,10 @@ describe('app', () => {
 
       await waitFor(() => expect(screen.queryByText('maintaining error message')).not.toBeInTheDocument());
       expect(screen.getByText('Hello')).toBeInTheDocument();
-      expect(reloadMock).toHaveBeenCalled();
+      // Aligned with v1: a routine maintaining→APP_RUNNING cycle does not
+      // reload the page. Only `hasLoadError === true` (set when the initial
+      // `app.load()` itself fails) triggers a recovery reload.
+      expect(reloadMock).not.toHaveBeenCalled();
     } finally {
       Object.defineProperty(globalThis.window, 'location', {
         configurable: true,

package/src/__tests__/globalDeps.test.ts

@@ -28,6 +28,7 @@ describe('client-v2 defineGlobalDeps', () => {
     expect(define).toHaveBeenCalledWith('@nocobase/evaluators/client', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@dnd-kit/core', expect.any(Function));
     expect(define).toHaveBeenCalledWith('@dnd-kit/sortable', expect.any(Function));
+    expect(define).toHaveBeenCalledWith('@ctrl/tinycolor', expect.any(Function));
     expect(define).toHaveBeenCalledWith('ahooks', expect.any(Function));
     expect(define).toHaveBeenCalledWith('dayjs', expect.any(Function));
     expect(define).toHaveBeenCalledWith('lodash', expect.any(Function));

package/src/__tests__/nocobase-buildin-plugin-auth.test.tsx

@@ -7,11 +7,21 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { createMockClient } from '@nocobase/client-v2';
-import { render, screen, waitFor } from '@testing-library/react';
+import { createMockClient, Plugin } from '@nocobase/client-v2';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { NocoBaseBuildInPlugin } from '../nocobase-buildin-plugin';
 
+class SkippedPublicRoutePlugin extends Plugin {
+  async load() {
+    this.router.add('public', {
+      path: '/public',
+      skipAuthCheck: true,
+      Component: () => <div>public page</div>,
+    });
+  }
+}
+
 describe('nocobase buildin plugin auth redirect', () => {
   const originalLocation = globalThis.window.location;
 
@@ -107,6 +117,39 @@ describe('nocobase buildin plugin auth redirect', () => {
     });
   });
 
+  it('should check current user after navigating from skipped route to v2 admin', async () => {
+    const app = createMockClient({
+      publicPath: '/v2/',
+      plugins: [NocoBaseBuildInPlugin as any, SkippedPublicRoutePlugin as any],
+      router: { type: 'memory', initialEntries: ['/v2/public'] },
+    });
+    app.apiMock.onGet('app:getLang').reply(200, {
+      data: { lang: 'en-US', resources: { client: {} }, cron: {} },
+    });
+    app.apiMock.onGet('/auth:check').reply(200, { data: {} });
+
+    const Root = app.getRootComponent();
+    render(<Root />);
+
+    expect(await screen.findByText('public page')).toBeInTheDocument();
+    const authCheckRequestsBeforeNavigation = app.apiMock.history.get.filter(
+      (request) => request.url === '/auth:check',
+    ).length;
+    expect(authCheckRequestsBeforeNavigation).toBe(0);
+
+    await act(async () => {
+      await app.router.router.navigate('/v2/admin');
+    });
+
+    await waitFor(() => {
+      expect(app.apiMock.history.get.filter((request) => request.url === '/auth:check').length).toBeGreaterThan(
+        authCheckRequestsBeforeNavigation,
+      );
+      expect(app.router.router.state.location.pathname).toBe('/v2/signin');
+      expect(app.router.router.state.location.search).toBe('?redirect=%2Fv2%2Fadmin');
+    });
+  });
+
   it('should render v2 admin root without redirecting away', async () => {
     const app = createMockClient({
       publicPath: '/v2/',

package/src/__tests__/plugin-manager.test.tsx

@@ -0,0 +1,177 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { ACLRolesCheckProvider, createMockClient, Plugin } from '@nocobase/client-v2';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import React from 'react';
+import { NocoBaseBuildInPlugin } from '../nocobase-buildin-plugin';
+
+class TestAclPlugin extends Plugin {
+  async load() {
+    this.app.use(ACLRolesCheckProvider);
+  }
+}
+
+type MockClientApplication = ReturnType<typeof createMockClient>;
+
+const renderApp = (app: MockClientApplication) => {
+  const Root = app.getRootComponent();
+  render(<Root />);
+};
+
+const waitForGetRequests = async (app: MockClientApplication, urls: string[]) => {
+  await waitFor(
+    () => {
+      const history = app.apiMock.history.get.map((request) => request.url);
+      expect(history).toEqual(expect.arrayContaining(urls));
+    },
+    { timeout: 3000 },
+  );
+};
+
+const setupApp = (pmList: any[]) => {
+  const app = createMockClient({
+    plugins: [NocoBaseBuildInPlugin, TestAclPlugin],
+    router: { type: 'memory', initialEntries: ['/admin/settings/plugin-manager'] },
+  });
+
+  app.apiMock.onGet('/auth:check').reply(200, {
+    data: { id: 1, nickname: 'Super Admin' },
+  });
+  app.apiMock.onGet('app:getLang').reply(200, {
+    data: { lang: 'en-US', resources: { client: {} }, cron: {} },
+  });
+  app.apiMock.onGet('app:getInfo').reply(200, { data: { id: 'mock-app' } });
+  app.apiMock.onGet('roles:check').reply(200, {
+    data: { role: 'root', snippets: ['pm', 'pm.system-settings.system-settings'] },
+  });
+  app.apiMock.onGet('/desktopRoutes:listAccessible').reply(200, { data: [] });
+  app.apiMock.onGet('systemSettings:get').reply(200, {
+    data: {
+      id: 1,
+      title: 'NocoBase',
+      raw_title: 'NocoBase',
+      enabledLanguages: ['en-US'],
+      logo: null,
+    },
+  });
+  app.apiMock.onGet('pm:list').reply(200, { data: pmList });
+  app.apiMock.onGet('pm:listEnabledV2').reply(200, { data: [] });
+
+  // pm:* mutations default to GET in axios when called via api.request without method
+  app.apiMock.onGet('pm:enable').reply(200, { data: {} });
+  app.apiMock.onGet('pm:disable').reply(200, { data: {} });
+  app.apiMock.onGet('pm:remove').reply(200, { data: {} });
+
+  return app;
+};
+
+describe('plugin-manager page', () => {
+  it('fires pm:enable when toggling switch on a disabled plugin', async () => {
+    const app = setupApp([
+      {
+        name: 'demo-plugin',
+        packageName: '@nocobase/demo-plugin',
+        displayName: 'Demo plugin',
+        description: 'A demo',
+        enabled: false,
+        builtIn: false,
+        removable: true,
+        version: '0.1.0',
+        isCompatible: true,
+        keywords: [],
+      },
+    ]);
+
+    renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check', 'pm:list']);
+
+    const card = await screen.findByRole('button', { name: 'Demo plugin' });
+    const switchControl = within(card.closest('.ant-card') as HTMLElement).getByRole('switch');
+    expect(switchControl).toHaveAttribute('aria-checked', 'false');
+
+    fireEvent.click(switchControl);
+
+    await waitFor(() => {
+      const enableCall = app.apiMock.history.get.find((req) => req.url === 'pm:enable');
+      expect(enableCall).toBeDefined();
+      expect(enableCall?.params).toMatchObject({ filterByTk: 'demo-plugin' });
+    });
+  });
+
+  it('fires pm:disable after confirm when toggling switch on an enabled plugin', async () => {
+    const app = setupApp([
+      {
+        name: 'demo-plugin',
+        packageName: '@nocobase/demo-plugin',
+        displayName: 'Demo plugin',
+        description: 'A demo',
+        enabled: true,
+        builtIn: false,
+        removable: true,
+        version: '0.1.0',
+        isCompatible: true,
+        keywords: [],
+      },
+    ]);
+
+    renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check', 'pm:list']);
+
+    const card = await screen.findByRole('button', { name: 'Demo plugin' });
+    const switchControl = within(card.closest('.ant-card') as HTMLElement).getByRole('switch');
+    expect(switchControl).toHaveAttribute('aria-checked', 'true');
+
+    fireEvent.click(switchControl);
+
+    const confirmTitle = await screen.findByText('Are you sure to disable this plugin?');
+    const confirmDialog = confirmTitle.closest('.ant-modal-confirm') as HTMLElement;
+    expect(confirmDialog).not.toBeNull();
+    const okButton = within(confirmDialog).getByText('OK');
+    fireEvent.click(okButton);
+
+    await waitFor(() => {
+      const disableCall = app.apiMock.history.get.find((req) => req.url === 'pm:disable');
+      expect(disableCall).toBeDefined();
+      expect(disableCall?.params).toMatchObject({ filterByTk: 'demo-plugin' });
+    });
+  });
+
+  it('fires pm:remove after Popconfirm on a removable plugin', async () => {
+    const app = setupApp([
+      {
+        name: 'demo-plugin',
+        packageName: '@nocobase/demo-plugin',
+        displayName: 'Demo plugin',
+        description: 'A demo',
+        enabled: false,
+        builtIn: false,
+        removable: true,
+        version: '0.1.0',
+        isCompatible: true,
+        keywords: [],
+      },
+    ]);
+
+    renderApp(app);
+    await waitForGetRequests(app, ['/auth:check', 'roles:check', 'pm:list']);
+
+    const removeLink = await screen.findByText('Remove');
+    fireEvent.click(removeLink);
+
+    const yesButton = await screen.findByRole('button', { name: 'Yes' });
+    fireEvent.click(yesButton);
+
+    await waitFor(() => {
+      const removeCall = app.apiMock.history.get.find((req) => req.url === 'pm:remove');
+      expect(removeCall).toBeDefined();
+      expect(removeCall?.params).toMatchObject({ filterByTk: 'demo-plugin' });
+    });
+  });
+});