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

package/src/nocobase-buildin-plugin/index.tsx

@@ -15,7 +15,7 @@ import type { Application } from '../Application';
 import { getCurrentV2RedirectPath, getDefaultV2AdminRedirectPath } from '../authRedirect';
 import { AppNotFound } from '../components';
 import { PluginFlowEngine } from '../flow';
-import { AdminLayoutMenuItemModel, AdminLayoutModel } from '../flow/admin-shell/admin-layout';
+import { ADMIN_LAYOUT_MODEL_UID, AdminLayoutMenuItemModel, AdminLayoutModel } from '../flow/admin-shell/admin-layout';
 import { useApp } from '../hooks/useApp';
 import { Plugin } from '../Plugin';
 import { AdminSettingsLayoutModel } from '../settings-center';
@@ -56,6 +56,30 @@ function isAdminRuntimeRoute(pathname: string, basename?: string) {
   return normalizedPathname === '/admin' || normalizedPathname.startsWith('/admin/');
 }
 
+function hasAuthCheckRoute(app: Application, pathname: string) {
+  const matchedRoutes = app.router.matchRoutes(pathname) || [];
+  return matchedRoutes.some((match) => match?.route?.authCheck === true);
+}
+
+function shouldCheckRuntimeRoute(app: Application, pathname: string) {
+  return isAdminRuntimeRoute(pathname, app.router.getBasename()) || hasAuthCheckRoute(app, pathname);
+}
+
+type CurrentUserAuthCheckRouteState = 'skipped' | 'unchecked' | 'required';
+
+function getCurrentUserAuthCheckRouteState(app: Application, pathname: string): CurrentUserAuthCheckRouteState {
+  const basename = app.router.getBasename();
+  if (isBuiltinAuthRoute(pathname, basename) || app.router.isSkippedAuthCheckRoute(pathname)) {
+    return 'skipped';
+  }
+
+  if (!shouldCheckRuntimeRoute(app, pathname)) {
+    return 'unchecked';
+  }
+
+  return 'required';
+}
+
 export const CurrentUserContext = createContext<CurrentUserState | null>(null);
 CurrentUserContext.displayName = 'CurrentUserContext';
 
@@ -64,15 +88,9 @@ export function useCurrentUserContext() {
 }
 
 /**
- * 返回当前用户在 v2 应用上下文中可选的角色列表，等价于 v1 `useCurrentRoles`：
- * 从 FlowEngine 全局上下文 `engine.context.user.roles` 派生（CurrentUserProvider 在
- * `/auth:check` 成功后通过 `defineProperty('user', { value })` 写入），按需追加匿名角色，
- * 并去掉合并角色 `__union__`。v2 中角色 title 可能含有 `{{t('...')}}` 模板，因此用
- * flowEngine.context.t 解析。
+ * 返回当前用户在 v2 应用上下文中可选的角色列表，等价于 v1 `useCurrentRoles`：从 FlowEngine 全局上下文 `engine.context.user.roles` 派生（CurrentUserProvider 在 `/auth:check` 成功后通过 `defineProperty('user', { value })` 写入），按需追加匿名角色，并去掉合并角色 `__union__`。v2 中角色 title 可能含有 `{{t('...')}}` 模板，因此用 flowEngine.context.t 解析。
  *
- * 不读 React `CurrentUserContext`：FlowEngine 的 dialog/drawer/popover 内容通过 `ctx.viewer`
- * 渲染到独立的 ElementsHolder，部分场景会脱离原 Provider 树；FlowEngine 全局上下文是同一份
- * 数据但不受 React 树位置影响。
+ * 不读 React `CurrentUserContext`：FlowEngine 的 dialog/drawer/popover 内容通过 `ctx.viewer` 渲染到独立的 ElementsHolder，部分场景会脱离原 Provider 树；FlowEngine 全局上下文是同一份数据但不受 React 树位置影响。
  */
 export function useCurrentRoles(): CurrentRoleOption[] {
   const { allowAnonymous } = useACLRoleContext();
@@ -93,7 +111,7 @@ export function useCurrentRoles(): CurrentRoleOption[] {
 }
 
 const DataSourceBootstrapProvider: FC = ({ children }) => {
-  const app = useApp();
+  const app = useApp<Application>();
   const location = useLocation();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
@@ -104,7 +122,7 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
     const basename = app.router.getBasename();
     const isSkippedAuthCheckRoute =
       isBuiltinAuthRoute(location.pathname, basename) || app.router.isSkippedAuthCheckRoute(location.pathname);
-    const shouldBootstrap = isAdminRuntimeRoute(location.pathname, basename);
+    const shouldBootstrap = shouldCheckRuntimeRoute(app, location.pathname);
 
     if (isSkippedAuthCheckRoute || !shouldBootstrap) {
       setLoading(false);
@@ -152,28 +170,25 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
 };
 
 const CurrentUserProvider: FC = ({ children }) => {
-  const app = useApp();
+  const app = useApp<Application>();
   const location = useLocation();
   const navigate = useNavigate();
   const [state, setState] = useState<CurrentUserState>({ loading: true });
-  const pathnameRef = useRef(location.pathname);
-  pathnameRef.current = location.pathname;
   const locationRef = useRef(location);
   locationRef.current = location;
+  const authCheckRouteState = getCurrentUserAuthCheckRouteState(app, location.pathname);
 
   useEffect(() => {
     let mounted = true;
-    const isSkippedAuthCheckRoute =
-      isBuiltinAuthRoute(pathnameRef.current, app.router.getBasename()) ||
-      app.router.isSkippedAuthCheckRoute(pathnameRef.current);
-    const shouldCheckCurrentUser = isAdminRuntimeRoute(pathnameRef.current, app.router.getBasename());
 
-    if (isSkippedAuthCheckRoute || !shouldCheckCurrentUser) {
+    if (authCheckRouteState !== 'required') {
       // 认证页等免鉴权路由不应再执行 `/auth:check`，否则未登录时会重复鉴权并触发重定向抖动。
       setState({ loading: false });
       return;
     }
 
+    setState((previous) => (previous.loading ? previous : { ...previous, loading: true }));
+
     const run = async () => {
       try {
         const res = await app.apiClient.request({
@@ -182,21 +197,18 @@ const CurrentUserProvider: FC = ({ children }) => {
           skipAuth: true,
         });
 
+        if (!mounted) {
+          return;
+        }
+
         const user = res?.data?.data;
-        // 服务端通过 `{ code: 302, redirect }` 通知客户端先去某个中间页(例如 2FA 验证页)。
-        // 这类响应没有 user.id,但也不能视为未登录——否则会和处理 302 的全局响应拦截器
-        // (例如 plugin-two-factor-authentication 注册的那一个)竞态,而 `window.location.replace`
-        // 会覆盖更早发出的 `window.location.href`,把用户错误地弹回登录页。让响应拦截器接管跳转。
+        // 服务端通过 `{ code: 302, redirect }` 通知客户端先去某个中间页(例如 2FA 验证页)。这类响应没有 user.id,但也不能视为未登录——否则会和处理 302 的全局响应拦截器 (例如 plugin-two-factor-authentication 注册的那一个)竞态,而 `window.location.replace` 会覆盖更早发出的 `window.location.href`,把用户错误地弹回登录页。让响应拦截器接管跳转。
         if (user?.code === 302) {
-          if (mounted) {
-            setState({ loading: false });
-          }
+          setState({ loading: false });
           return;
         }
         if (user?.id == null) {
-          // 用 react-router navigate (虚拟跳转)而不是 location.replace, 这样如果有其他响应拦截器
-          // 已经发起了 window.location.href 整页跳转(例如 2FA 插件接收到服务端 302 重定向),
-          // 真实跳转可以胜出 navigate, 不会被这里的 signin 重定向覆盖。
+          // 用 react-router navigate (虚拟跳转)而不是 location.replace, 这样如果有其他响应拦截器已经发起了 window.location.href 整页跳转(例如 2FA 插件接收到服务端 302 重定向), 真实跳转可以胜出 navigate, 不会被这里的 signin 重定向覆盖。
           navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
             replace: true,
           });
@@ -215,13 +227,15 @@ const CurrentUserProvider: FC = ({ children }) => {
           meta: userMeta,
         });
 
-        if (mounted) {
-          setState({
-            data: res?.data,
-            loading: false,
-          });
-        }
+        setState({
+          data: res?.data,
+          loading: false,
+        });
       } catch (error: any) {
+        if (!mounted) {
+          return;
+        }
+
         const isAuthError = error?.response?.status === 401 || error?.status === 401;
         if (isAuthError) {
           navigate(`/signin?redirect=${encodeURIComponent(getCurrentV2RedirectPath(app, locationRef.current))}`, {
@@ -229,19 +243,17 @@ const CurrentUserProvider: FC = ({ children }) => {
           });
           return;
         }
-        if (mounted) {
-          setState({ loading: false });
-        }
+        setState({ loading: false });
         throw error;
       }
     };
 
-    void run();
+    run();
 
     return () => {
       mounted = false;
     };
-  }, [app, navigate]);
+  }, [app, authCheckRouteState, navigate]);
 
   if (state.loading) {
     return app.renderComponent('AppSpin');
@@ -251,13 +263,12 @@ const CurrentUserProvider: FC = ({ children }) => {
 };
 
 const RootRedirect: FC = () => {
-  const app = useApp();
+  const app = useApp<Application>();
   const hasToken = !!app?.apiClient?.auth?.token;
   const targetPath = getDefaultV2AdminRedirectPath(app);
 
   if (!hasToken) {
-    // 用 react-router <Navigate /> 而非 location.replace, 避免覆盖同时段其它响应拦截器
-    // 触发的 window.location.href (例如 2FA 接收到服务端 302 时设置的整页跳转)。
+    // 用 react-router <Navigate /> 而非 location.replace, 避免覆盖同时段其它响应拦截器触发的 window.location.href (例如 2FA 接收到服务端 302 时设置的整页跳转)。
     return <Navigate replace to={`/signin?redirect=${encodeURIComponent(targetPath)}`} />;
   }
 
@@ -267,8 +278,7 @@ const RootRedirect: FC = () => {
 /**
  * client-v2 使用的内建插件集合。
  *
- * 只迁移当前 v2 运行时仍然需要的部分，显式跳过 schemaInitializerManager
- * 以及用户标注暂不迁移的旧插件注册逻辑。
+ * 只迁移当前 v2 运行时仍然需要的部分，显式跳过 schemaInitializerManager 以及用户标注暂不迁移的旧插件注册逻辑。
  */
 export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
   async afterAdd() {
@@ -286,6 +296,12 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       AdminLayoutMenuItemModel,
       AdminSettingsLayoutModel,
     });
+    this.app.layoutManager.registerLayout({
+      routeName: 'admin',
+      routePath: '/admin',
+      uid: ADMIN_LAYOUT_MODEL_UID,
+      layoutModelClass: 'AdminLayoutModel',
+    });
 
     this.app.pluginSettingsManager.addMenuItem({
       key: 'plugin-manager',
@@ -298,7 +314,7 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       menuKey: 'plugin-manager',
       key: 'index',
       title: this.app.i18n.t('Plugin manager'),
-      componentLoader: () => import('../settings-center/PluginManagerPage'),
+      componentLoader: () => import('../settings-center/plugin-manager'),
       aclSnippet: 'pm',
       sort: -200,
     });
@@ -317,6 +333,13 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       aclSnippet: 'pm.system-settings.system-settings',
       sort: -100,
     });
+    // Parent menu for security-related plugin settings (password policy, locked users, etc.). Registered here in the buildin plugin so any pro plugin can attach page tabs to `menuKey: 'security'` without each one re-registering the same parent.
+    this.app.pluginSettingsManager.addMenuItem({
+      key: 'security',
+      title: this.app.i18n.t('Security'),
+      icon: 'SafetyOutlined',
+      aclSnippet: 'pm.security',
+    });
   }
 
   addRoutes() {
@@ -330,10 +353,6 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       Component: AppNotFound,
     });
 
-    this.router.add('admin', {
-      path: '/admin',
-      componentLoader: () => import('../flow/components/AdminLayout'),
-    });
     this.router.add('admin.settings', {
       path: '/admin/settings',
       componentLoader: () => import('../settings-center/AdminSettingsLayout'),
@@ -342,23 +361,6 @@ export class NocoBaseBuildInPlugin extends Plugin<any, Application> {
       path: '*',
       Component: Outlet,
     });
-    this.router.add('admin.page', {
-      path: '/admin/:name',
-      componentLoader: () => import('../flow/components/FlowRoute'),
-    });
-
-    this.router.add('admin.page.tab', {
-      path: '/admin/:name/tab/:tabUid',
-      componentLoader: () => import('../flow/components/FlowRoute'),
-    });
-    this.router.add('admin.page.view', {
-      path: '/admin/:name/view/*',
-      componentLoader: () => import('../flow/components/FlowRoute'),
-    });
-    this.router.add('admin.page.tab.view', {
-      path: '/admin/:name/tab/:tabUid/view/*',
-      componentLoader: () => import('../flow/components/FlowRoute'),
-    });
   }
 
   addComponents() {}

package/src/nocobase-buildin-plugin/plugins/LocalePlugin.ts

@@ -39,6 +39,7 @@ export class LocalePlugin extends Plugin {
 
       if (data.lang) {
         api.auth.setLocale(data.lang);
+        this.app.setDocumentLanguage(data.lang);
         this.app.i18n.changeLanguage(data.lang);
       }
 

package/src/settings-center/index.ts

@@ -9,6 +9,6 @@
 
 export * from './AdminSettingsLayout';
 export * from './AdminSettingsLayoutModel';
-export * from './PluginManagerPage';
+export * from './plugin-manager';
 export * from './SystemSettingsPage';
 export * from './utils';

package/src/settings-center/plugin-manager/BulkEnableButton.tsx

@@ -0,0 +1,111 @@
+/**
+ * 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 { useMemoizedFn } from 'ahooks';
+import { Button, Input, Modal, Table } from 'antd';
+import type { TableProps } from 'antd';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useApp } from '../../hooks/useApp';
+import type { IPluginData } from './types';
+
+interface BulkEnableButtonProps {
+  plugins: IPluginData[];
+}
+
+export const BulkEnableButton: React.FC<BulkEnableButtonProps> = ({ plugins }) => {
+  const { t } = useTranslation();
+  const app = useApp();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+
+  const disabledPlugins = useMemo(() => plugins.filter((plugin) => !plugin.enabled), [plugins]);
+
+  const items = useMemo(() => {
+    const value = searchValue.toLowerCase().trim();
+    if (!value) return disabledPlugins;
+    return disabledPlugins.filter(
+      (plugin) =>
+        (plugin.displayName || '').toLowerCase().includes(value) ||
+        (plugin.description || '').toLowerCase().includes(value),
+    );
+  }, [disabledPlugins, searchValue]);
+
+  const handleOpen = useMemoizedFn(() => setIsModalOpen(true));
+
+  const handleCancel = useMemoizedFn(() => {
+    setSelectedRowKeys([]);
+    setIsModalOpen(false);
+  });
+
+  const handleOk = useMemoizedFn(async () => {
+    await app.apiClient.request({
+      url: 'pm:enable',
+      params: { filterByTk: selectedRowKeys },
+    });
+    setIsModalOpen(false);
+  });
+
+  const columns: TableProps<IPluginData>['columns'] = useMemo(
+    () => [
+      { title: t('Plugin'), dataIndex: 'displayName', ellipsis: true },
+      { title: t('Description'), dataIndex: 'description', ellipsis: true, width: 300 },
+      { title: t('Package name'), dataIndex: 'packageName', width: 300, ellipsis: true },
+    ],
+    [t],
+  );
+
+  return (
+    <>
+      <Button onClick={handleOpen}>{t('Bulk enable')}</Button>
+      <Modal width={1000} title={t('Bulk enable')} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+        <Input
+          style={{ marginBottom: '1em' }}
+          placeholder={t('Search plugin...')}
+          allowClear
+          onChange={(e) => setSearchValue(e.target.value)}
+        />
+        <Table<IPluginData>
+          rowSelection={{
+            type: 'checkbox',
+            selectedRowKeys,
+            onChange(selectedKeys) {
+              const names = items.map((item) => item.name);
+              setSelectedRowKeys((preSelectedRowKeys) => {
+                if (selectedKeys.length === 0) {
+                  return preSelectedRowKeys.filter((key) => !names.includes(String(key)));
+                }
+                if (selectedKeys.length === names.length) {
+                  return _.uniq([...preSelectedRowKeys, ...selectedKeys]);
+                }
+                return preSelectedRowKeys;
+              });
+            },
+            onSelect(record) {
+              setSelectedRowKeys((preSelectedRowKeys) => {
+                if (preSelectedRowKeys.includes(record.name)) {
+                  return preSelectedRowKeys.filter((key) => key !== record.name);
+                }
+                return preSelectedRowKeys.concat(record.name);
+              });
+            },
+          }}
+          rowKey="name"
+          scroll={{ y: '60vh' }}
+          size="small"
+          pagination={false}
+          columns={columns}
+          dataSource={items}
+        />
+      </Modal>
+    </>
+  );
+};

package/src/settings-center/plugin-manager/PluginCard.tsx

@@ -0,0 +1,270 @@
+/**
+ * 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 {
+  CloseCircleFilled,
+  DeleteOutlined,
+  LoadingOutlined,
+  ReadOutlined,
+  SettingOutlined,
+  WarningFilled,
+} from '@ant-design/icons';
+import { css } from '@emotion/css';
+import { useMemoizedFn } from 'ahooks';
+import { App, Card, Divider, Modal, Popconfirm, Result, Space, Switch, Tooltip, Typography, theme } from 'antd';
+import React, { FC, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { useApp } from '../../hooks/useApp';
+import { PluginDetail } from './PluginDetail';
+import type { IPluginData } from './types';
+
+interface PluginCardProps {
+  data: IPluginData;
+}
+
+export const PluginCard: FC<PluginCardProps> = ({ data }) => {
+  const { token } = theme.useToken();
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const app = useApp();
+  const { modal } = App.useApp();
+  const [detailOpen, setDetailOpen] = useState(false);
+
+  const { name, displayName, isCompatible, packageName, builtIn, enabled, removable, description, error, homepage } =
+    data;
+
+  const title = displayName || name || packageName;
+
+  const openDetail = useMemoizedFn(() => {
+    if (!error) {
+      setDetailOpen(true);
+    }
+  });
+
+  const handleEnable = useMemoizedFn(async () => {
+    await app.apiClient.request({
+      url: 'pm:enable',
+      params: { filterByTk: name },
+    });
+  });
+
+  const handleDisable = useMemoizedFn(async () => {
+    await app.apiClient.request({
+      url: 'pm:disable',
+      params: { filterByTk: name },
+    });
+  });
+
+  const handleRemove = useMemoizedFn(async () => {
+    await app.apiClient.request({
+      url: 'pm:remove',
+      params: { filterByTk: name },
+    });
+    modal.info({
+      icon: null,
+      width: 520,
+      content: (
+        <Result
+          icon={<LoadingOutlined />}
+          title={t('Plugin removing')}
+          subTitle={t('Plugin is removing, please wait...')}
+        />
+      ),
+      footer: null,
+    });
+    const checkHealth = () => {
+      app.apiClient
+        .request({ url: '__health_check', method: 'get', skipNotify: true })
+        .then((response) => {
+          if (response?.data === 'ok') {
+            window.location.reload();
+          }
+        })
+        .catch(() => {
+          // health check still failing, keep polling
+        });
+    };
+    setInterval(checkHealth, 1000);
+  });
+
+  const handleSwitchChange = useMemoizedFn(async (checked: boolean) => {
+    if (!isCompatible && checked) {
+      modal.confirm({
+        title: t('Plugin dependency version mismatch'),
+        content: t(
+          'The current dependency version of the plugin does not match the version of the application and may not work properly. Are you sure you want to continue enabling the plugin?',
+        ),
+        onOk: handleEnable,
+      });
+      return;
+    }
+    if (!checked) {
+      modal.confirm({
+        title: t('Are you sure to disable this plugin?'),
+        onOk: handleDisable,
+      });
+      return;
+    }
+    await handleEnable();
+  });
+
+  const openSettings = useMemoizedFn(() => {
+    navigate(app.pluginSettingsManager.getRoutePath(name));
+  });
+
+  const cardClassName = useMemo(
+    () => css`
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      .ant-card-body {
+        flex-grow: 1;
+      }
+
+      .ant-card-actions {
+        li .ant-space {
+          gap: ${token.marginXXS}px !important;
+        }
+        li:first-child {
+          width: 80% !important;
+          border-inline-end: 0;
+          text-align: left;
+          padding-inline-start: ${token.padding}px;
+        }
+        li:last-child {
+          width: 20% !important;
+        }
+      }
+    `,
+    [token.marginXXS, token.padding],
+  );
+
+  const cardTitle = (
+    <Space>
+      {error ? (
+        <Tooltip title={t('Plugin loading failed. Please check the server logs.')}>
+          <Typography.Text type="danger">
+            <CloseCircleFilled />
+          </Typography.Text>
+        </Tooltip>
+      ) : null}
+      {!isCompatible ? (
+        <Tooltip title={t('Plugin dependencies check failed')}>
+          <Typography.Text type="warning">
+            <WarningFilled />
+          </Typography.Text>
+        </Tooltip>
+      ) : null}
+      <span>{title}</span>
+    </Space>
+  );
+
+  const linksAction = (
+    <Space split={<Divider type="vertical" />} key="links" size={token.marginXXS}>
+      {homepage && (
+        <a
+          href={homepage}
+          target="_blank"
+          rel="noreferrer"
+          onClick={(event) => event.stopPropagation()}
+          aria-label={t('Docs')}
+        >
+          <ReadOutlined /> {t('Docs')}
+        </a>
+      )}
+      {enabled && app.pluginSettingsManager.has(name) && (
+        <a
+          onClick={(e) => {
+            e.stopPropagation();
+            openSettings();
+          }}
+          aria-label={t('Settings')}
+        >
+          <SettingOutlined /> {t('Settings')}
+        </a>
+      )}
+      {removable && (
+        <Popconfirm
+          key="delete"
+          disabled={builtIn}
+          title={t('Are you sure to delete this plugin?')}
+          onConfirm={(e) => {
+            e?.stopPropagation();
+            handleRemove();
+          }}
+          onCancel={(e) => e?.stopPropagation()}
+          okText={t('Yes')}
+          cancelText={t('No')}
+        >
+          <a
+            onClick={(e) => e.stopPropagation()}
+            aria-label={t('Remove')}
+            style={builtIn ? { color: token.colorTextDisabled, cursor: 'not-allowed' } : undefined}
+          >
+            <DeleteOutlined /> {t('Remove')}
+          </a>
+        </Popconfirm>
+      )}
+    </Space>
+  );
+
+  const switchAction = (
+    <Switch
+      aria-label={t('Enable')}
+      key="enable"
+      size="small"
+      disabled={builtIn || error}
+      onChange={(checked, e) => {
+        e.stopPropagation();
+        handleSwitchChange(checked);
+      }}
+      checked={!!enabled}
+    />
+  );
+
+  return (
+    <>
+      {detailOpen && <PluginDetail plugin={data} onCancel={() => setDetailOpen(false)} />}
+      <Card
+        role="button"
+        aria-label={title}
+        size="small"
+        variant="borderless"
+        hoverable
+        onClick={openDetail}
+        styles={{
+          body: { paddingTop: token.paddingSM },
+          header: { border: 'none', minHeight: 'inherit', paddingTop: token.padding },
+        }}
+        className={cardClassName}
+        title={cardTitle}
+        actions={[linksAction, switchAction]}
+      >
+        <Card.Meta
+          description={
+            <Typography.Paragraph
+              type="secondary"
+              className={css`
+                display: -webkit-box;
+                -webkit-box-orient: vertical;
+                -webkit-line-clamp: 2;
+                overflow: hidden;
+                margin-bottom: 0;
+              `}
+            >
+              {description}
+            </Typography.Paragraph>
+          }
+        />
+      </Card>
+    </>
+  );
+};