plugin-ai-api 1.0.20 → 1.0.23

package/src/client/plugin.tsx

@@ -9,10 +9,13 @@
 
 import { Plugin, lazy } from '@nocobase/client';
 import PluginACLClient from '@nocobase/plugin-acl/client';
+import { AI_API_ACL_SNIPPET, AI_API_USER_PERMISSIONS_SNIPPET } from '../constants';
 import React from 'react';
 
 const AiApiConfigPage = React.lazy(() => import('../client-v2/pages/GeneralPage'));
 const AiApiModelPricingPage = React.lazy(() => import('../client-v2/pages/ModelPricingPage'));
+const AiApiModelMetadataPage = React.lazy(() => import('../client-v2/pages/ModelMetadataPage'));
+const AiApiUserPermissionsPage = React.lazy(() => import('../client-v2/pages/UserPermissionsPage'));
 const AiApiUserQuotasPage = React.lazy(() => import('../client-v2/pages/UserQuotasPage'));
 const AiApiUsagePage = React.lazy(() => import('../client-v2/pages/UsagePage'));
 const { AiApiRolePermissions } = lazy(() => import('./components/AiApiRolePermissions'), 'AiApiRolePermissions');
@@ -22,35 +25,52 @@ export class PluginAiApiClient extends Plugin {
     this.app.pluginSettingsManager.add('ai-api', {
       icon: 'ApiOutlined',
       title: this.t('AI API Gateway'),
-      aclSnippet: 'pm.ai-api.configuration',
+      aclSnippet: AI_API_ACL_SNIPPET,
     });
 
     this.app.pluginSettingsManager.add('ai-api.config', {
       title: this.t('Configuration'),
       Component: AiApiConfigPage,
-      aclSnippet: 'pm.ai-api.configuration',
+      aclSnippet: AI_API_ACL_SNIPPET,
       sort: 1,
     });
 
     this.app.pluginSettingsManager.add('ai-api.model-pricing', {
       title: this.t('Model pricing'),
       Component: AiApiModelPricingPage,
-      aclSnippet: 'pm.ai-api.configuration',
+      aclSnippet: AI_API_ACL_SNIPPET,
       sort: 2,
     });
 
+    this.app.pluginSettingsManager.add('ai-api.model-metadata', {
+      title: this.t('Model metadata'),
+      Component: AiApiModelMetadataPage,
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 3,
+    });
+
+    // Keep the legacy settings layout aligned with client-v2. The v1 settings
+    // manager evaluates the parent ACL first, so this tab additionally requires
+    // access to the AI API settings parent even though it keeps its own snippet.
+    this.app.pluginSettingsManager.add('ai-api.user-permissions', {
+      title: this.t('User LLM permissions'),
+      Component: AiApiUserPermissionsPage,
+      aclSnippet: AI_API_USER_PERMISSIONS_SNIPPET,
+      sort: 4,
+    });
+
     this.app.pluginSettingsManager.add('ai-api.user-quotas', {
       title: this.t('User quotas'),
       Component: AiApiUserQuotasPage,
-      aclSnippet: 'pm.ai-api.configuration',
-      sort: 3,
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 5,
     });
 
     this.app.pluginSettingsManager.add('ai-api.usage', {
       title: this.t('Usage'),
       Component: AiApiUsagePage,
-      aclSnippet: 'pm.ai-api.configuration',
-      sort: 4,
+      aclSnippet: AI_API_ACL_SNIPPET,
+      sort: 6,
     });
 
     // Add "AI API" tab in Settings → Users & Permissions → [Role]
@@ -58,7 +78,7 @@ export class PluginAiApiClient extends Plugin {
     if (aclPlugin?.settingsUI) {
       aclPlugin.settingsUI.addPermissionsTab(({ t, TabLayout, activeRole }) => ({
         key: 'aiApi',
-        label: 'AI API',
+        label: t('AI API', { ns: ['plugin-ai-api', 'client'] }),
         sort: 25,
         children: (
           <TabLayout>

package/src/client-v2/__tests__/settings-registration.test.tsx

@@ -0,0 +1,87 @@
+/**
+ * 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 { createMockClient } from '@nocobase/client-v2';
+import { AI_API_ACL_SNIPPET, AI_API_USER_PERMISSIONS_SNIPPET } from '../../constants';
+import { PluginAiApiClient } from '../plugin';
+
+/**
+ * Guards the settings registration itself rather than any page's contents.
+ *
+ * Two regressions are cheap to reintroduce and invisible until a non-admin logs in:
+ * omitting `aclSnippet` makes addPageTabItem default to `pm.ai-api.<key>`, a snippet the
+ * server never registers, and omitting `sort` silently reorders the tabs alphabetically.
+ *
+ * The tabs deliberately span two snippets: everything sits under AI_API_ACL_SNIPPET except
+ * user permissions, which is gated separately so granting it does not also grant gateway
+ * configuration. Each snippet is evaluated independently, so denying one leaves the other's
+ * tabs — and therefore the menu — reachable.
+ */
+describe('AI API v2 settings registration', () => {
+  async function loadPlugin() {
+    const app = createMockClient();
+    await new PluginAiApiClient({}, app).load();
+    return app;
+  }
+
+  it('registers every page under a snippet the server exposes', async () => {
+    const app = await loadPlugin();
+    const menu = app.pluginSettingsManager.get('ai-api', false);
+
+    expect(menu?.aclSnippet).toBe(AI_API_ACL_SNIPPET);
+    for (const child of menu?.children ?? []) {
+      expect(app.pluginSettingsManager.getAclSnippet(child.name), child.name).toBe(
+        child.name === 'ai-api.user-permissions' ? AI_API_USER_PERMISSIONS_SNIPPET : AI_API_ACL_SNIPPET,
+      );
+    }
+  });
+
+  it('leaves only the separately-gated tab when the main snippet is denied', async () => {
+    const app = await loadPlugin();
+    app.pluginSettingsManager.setAclSnippets([`!${AI_API_ACL_SNIPPET}`]);
+
+    // User permissions carries its own snippet, so it survives on its own merit and keeps the
+    // menu reachable. That separation is the point: a role can be allowed to hand out model
+    // access without also being allowed to reconfigure the gateway.
+    expect(app.pluginSettingsManager.get('ai-api')?.children?.map((item) => item.name)).toEqual([
+      'ai-api.user-permissions',
+    ]);
+  });
+
+  it('hides the menu and every tab when both snippets are denied', async () => {
+    const app = await loadPlugin();
+    app.pluginSettingsManager.setAclSnippets([`!${AI_API_ACL_SNIPPET}`, `!${AI_API_USER_PERMISSIONS_SNIPPET}`]);
+
+    expect(app.pluginSettingsManager.get('ai-api')).toBeNull();
+    expect(app.pluginSettingsManager.getList().map((item) => item.name)).not.toContain('ai-api');
+  });
+
+  it('hides only the user permissions tab when its own snippet is denied', async () => {
+    const app = await loadPlugin();
+    app.pluginSettingsManager.setAclSnippets([`!${AI_API_USER_PERMISSIONS_SNIPPET}`]);
+
+    const children = app.pluginSettingsManager.get('ai-api')?.children?.map((item) => item.name) ?? [];
+    expect(children).not.toContain('ai-api.user-permissions');
+    expect(children).toContain('ai-api.user-quotas');
+  });
+
+  it('keeps registration order instead of sorting tabs by name', async () => {
+    const app = await loadPlugin();
+    app.pluginSettingsManager.setAclSnippets([]);
+
+    expect(app.pluginSettingsManager.get('ai-api')?.children?.map((item) => item.name)).toEqual([
+      'ai-api.index',
+      'ai-api.model-pricing',
+      'ai-api.model-metadata',
+      'ai-api.user-permissions',
+      'ai-api.user-quotas',
+      'ai-api.usage',
+    ]);
+  });
+});

package/src/client-v2/components/AiApiRolePermissions.tsx

@@ -0,0 +1,173 @@
+/**
+ * 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 React, { useCallback, useEffect, useState } from 'react';
+import { useApp } from '@nocobase/client-v2';
+import { Card, Switch, Select, Space, Typography, Spin, Divider } from 'antd';
+import { useT } from '../locale';
+
+const { Text } = Typography;
+
+interface AiEmployee {
+  username: string;
+  nickname: string;
+}
+
+interface RolePermRecord {
+  id?: number;
+  roleName: string;
+  enabled: boolean;
+  allowAllEmployees: boolean;
+  allowedEmployees: string[];
+}
+
+/**
+ * Permission tab shown in Settings → Users & Permissions → [Role] → "AI API" tab.
+ * Lets admins control whether a role can use the AI API and which AI Employees it may access.
+ */
+export function AiApiRolePermissions({ role }: { role?: { name?: string } | null }) {
+  const api = useApp().apiClient;
+  const t = useT();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [employees, setEmployees] = useState<AiEmployee[]>([]);
+  const [record, setRecord] = useState<RolePermRecord | null>(null);
+
+  const roleName = role?.name;
+
+  const loadData = useCallback(
+    async (name: string) => {
+      setLoading(true);
+      try {
+        const [permRes, empRes] = await Promise.all([
+          api.request({
+            url: 'aiApiRolePermissions',
+            params: { filter: { roleName: name }, paginate: false },
+          }),
+          api.request({ url: 'aiEmployees:list', params: { paginate: false } }),
+        ]);
+
+        const existing = permRes?.data?.data?.[0];
+        setRecord(
+          existing
+            ? {
+                id: existing.id,
+                roleName: existing.roleName,
+                enabled: !!existing.enabled,
+                allowAllEmployees: existing.allowAllEmployees !== false,
+                allowedEmployees: existing.allowedEmployees || [],
+              }
+            : {
+                roleName: name,
+                enabled: false,
+                allowAllEmployees: true,
+                allowedEmployees: [],
+              },
+        );
+
+        setEmployees(
+          (empRes?.data?.data || []).map((employee: AiEmployee) => ({
+            username: employee.username,
+            nickname: employee.nickname || employee.username,
+          })),
+        );
+      } catch (err) {
+        console.error('Failed to load AI API role permissions:', err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api],
+  );
+
+  useEffect(() => {
+    if (!roleName) return;
+    loadData(roleName);
+  }, [roleName, loadData]);
+
+  const save = async (patch: Partial<RolePermRecord>) => {
+    if (!record) return;
+    const next = { ...record, ...patch };
+    setRecord(next);
+    setSaving(true);
+    try {
+      if (next.id) {
+        await api.request({
+          url: `aiApiRolePermissions/${next.id}`,
+          method: 'PUT',
+          data: next,
+        });
+      } else {
+        const res = await api.request({
+          url: 'aiApiRolePermissions',
+          method: 'POST',
+          data: next,
+        });
+        const created = res?.data?.data;
+        if (created?.id) {
+          setRecord({ ...next, id: created.id });
+        }
+      }
+    } catch (err) {
+      console.error('Failed to save AI API role permissions:', err);
+      // Revert on error
+      setRecord(record);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Spin />;
+
+  return (
+    <Card bordered={false}>
+      <Space direction="vertical" style={{ width: '100%' }} size="middle">
+        <Space>
+          <Switch checked={!!record?.enabled} loading={saving} onChange={(checked) => save({ enabled: checked })} />
+          <Text strong>{t('Allow this role to use the AI API')}</Text>
+        </Space>
+
+        {record?.enabled && (
+          <>
+            <Divider style={{ margin: '8px 0' }} />
+            <Space>
+              <Switch
+                checked={!!record?.allowAllEmployees}
+                loading={saving}
+                onChange={(checked) => save({ allowAllEmployees: checked })}
+              />
+              <Text>{t('Allow all AI Employees')}</Text>
+            </Space>
+
+            {!record?.allowAllEmployees && (
+              <div>
+                <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
+                  {t('Select which AI Employees this role may use:')}
+                </Text>
+                <Select
+                  mode="multiple"
+                  allowClear
+                  style={{ width: '100%', maxWidth: 480 }}
+                  placeholder={t('Select allowed AI Employees')}
+                  value={record?.allowedEmployees || []}
+                  options={employees.map((employee) => ({
+                    label: `${employee.nickname} (${employee.username})`,
+                    value: employee.username,
+                  }))}
+                  onChange={(vals) => save({ allowedEmployees: vals })}
+                  disabled={saving}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </Space>
+    </Card>
+  );
+}

package/src/client-v2/locale.ts

@@ -1 +1,21 @@
-export { tExpr, useT } from '../client/locale';
+/**
+ * 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 { tExpr as _tExpr, useFlowEngine } from '@nocobase/flow-engine';
+// @ts-ignore
+import pkg from './../../package.json';
+
+export function useT() {
+  const engine = useFlowEngine();
+  return (str: string) => engine.context.t(str, { ns: [pkg.name, 'client'] });
+}
+
+export function tExpr(key: string) {
+  return _tExpr(key, { ns: [pkg.name, 'client'] });
+}

package/src/client-v2/pages/GeneralPage.tsx

@@ -10,6 +10,7 @@ interface GeneralSettings {
   defaultLlmService?: string;
   enabledLlmServices: string[];
   rateLimitPerMinute: number;
+  maxRequestBodyMb: number;
   quotaEnabled: boolean;
   defaultReservationOutputTokens: number;
 }
@@ -28,10 +29,14 @@ const defaults: GeneralSettings = {
   mode: 'llm',
   enabledLlmServices: [],
   rateLimitPerMinute: 60,
+  maxRequestBodyMb: 10,
   quotaEnabled: false,
   defaultReservationOutputTokens: 4096,
 };
 
+/** Mirrors MAX_REQUEST_BODY_MB_LIMIT in server/routes/router.ts, which rejects anything higher. */
+const MAX_REQUEST_BODY_MB = 100;
+
 export default function GeneralPage() {
   const ctx = useFlowContext();
   const t = useT();
@@ -121,6 +126,14 @@ export default function GeneralPage() {
         <Form.Item name="rateLimitPerMinute" label={t('Rate Limit')} rules={[{ required: true }]}>
           <InputNumber min={1} style={{ width: '100%' }} />
         </Form.Item>
+        <Form.Item
+          name="maxRequestBodyMb"
+          label={t('Max request body size (MB)')}
+          extra={t('Raise this to accept inline base64 images. Base64 adds about 33% to the original file size.')}
+          rules={[{ required: true }]}
+        >
+          <InputNumber min={1} max={MAX_REQUEST_BODY_MB} precision={0} style={{ width: '100%' }} />
+        </Form.Item>
         <Form.Item name="quotaEnabled" label={t('Enable user quotas')} valuePropName="checked">
           <Switch />
         </Form.Item>

package/src/client-v2/pages/ModelMetadataPage.tsx

@@ -0,0 +1,280 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+  Button,
+  Card,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Popconfirm,
+  Select,
+  Space,
+  Switch,
+  Table,
+  Tag,
+  message,
+} from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+import { useFlowContext } from '@nocobase/flow-engine';
+import { useT } from '../locale';
+import { errorMessage, unwrapData } from './api';
+
+interface ModelMetadata {
+  id: string | number;
+  llmService: string;
+  model: string;
+  contextWindow?: number | null;
+  maxCompletionTokens?: number | null;
+  ownedByOverride?: string | null;
+  displayName?: string | null;
+  description?: string | null;
+  enabled: boolean;
+}
+
+type MetadataFormValues = Omit<ModelMetadata, 'id'>;
+
+interface LlmService {
+  name: string;
+  title?: string;
+  provider: string;
+}
+
+interface LlmModel {
+  id: string;
+}
+
+export default function ModelMetadataPage() {
+  const ctx = useFlowContext();
+  const t = useT();
+  const [form] = Form.useForm<MetadataFormValues>();
+  const selectedService = Form.useWatch('llmService', form);
+  const [rows, setRows] = useState<ModelMetadata[]>([]);
+  const [services, setServices] = useState<LlmService[]>([]);
+  const [models, setModels] = useState<LlmModel[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [editing, setEditing] = useState<ModelMetadata>();
+  const [open, setOpen] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [metadataResponse, servicesResponse] = await Promise.all([
+        ctx.api.request({
+          url: 'aiApiModelMetadata:list',
+          method: 'get',
+          params: { pageSize: 200, sort: 'llmService' },
+        }),
+        ctx.api.request({ url: 'ai:listLLMServices', method: 'get' }),
+      ]);
+      setRows(unwrapData<ModelMetadata[]>(metadataResponse, []));
+      setServices(unwrapData<LlmService[]>(servicesResponse, []));
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setLoading(false);
+    }
+  }, [ctx.api]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const loadModels = useCallback(
+    async (llmService: string, currentModel?: string) => {
+      setModelsLoading(true);
+      try {
+        const response = await ctx.api.request({
+          url: 'ai:listModels',
+          method: 'get',
+          params: { llmService },
+        });
+        const loadedModels = unwrapData<LlmModel[]>(response, []);
+        setModels(
+          currentModel && !loadedModels.some((item) => item.id === currentModel)
+            ? [{ id: currentModel }, ...loadedModels]
+            : loadedModels,
+        );
+      } catch (error) {
+        setModels(currentModel ? [{ id: currentModel }] : []);
+        message.error(`${t('Failed to load models')}: ${errorMessage(error)}`);
+      } finally {
+        setModelsLoading(false);
+      }
+    },
+    [ctx.api, t],
+  );
+
+  const showCreate = () => {
+    setEditing(undefined);
+    setModels([]);
+    form.resetFields();
+    form.setFieldsValue({ enabled: true } as MetadataFormValues);
+    setOpen(true);
+  };
+
+  const showEdit = (record: ModelMetadata) => {
+    setEditing(record);
+    form.setFieldsValue({ ...record });
+    setOpen(true);
+    loadModels(record.llmService, record.model);
+  };
+
+  const changeService = (llmService: string) => {
+    form.setFieldValue('model', undefined);
+    setModels([]);
+    loadModels(llmService);
+  };
+
+  const save = async () => {
+    const values = await form.validateFields();
+    const data = {
+      ...values,
+      contextWindow: values.contextWindow ?? null,
+      maxCompletionTokens: values.maxCompletionTokens ?? null,
+      ownedByOverride: values.ownedByOverride?.trim() || null,
+      displayName: values.displayName?.trim() || null,
+      description: values.description?.trim() || null,
+    };
+    setSaving(true);
+    try {
+      await ctx.api.request({
+        url: editing ? `aiApiModelMetadata:update/${editing.id}` : 'aiApiModelMetadata:create',
+        method: 'post',
+        data,
+      });
+      message.success(t('Saved successfully'));
+      setOpen(false);
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (id: string | number) => {
+    try {
+      await ctx.api.request({ url: `aiApiModelMetadata:destroy/${id}`, method: 'post' });
+      message.success(t('Deleted successfully'));
+      await load();
+    } catch (error) {
+      message.error(errorMessage(error));
+    }
+  };
+
+  const columns: ColumnsType<ModelMetadata> = [
+    { title: t('LLM service'), dataIndex: 'llmService', key: 'llmService', width: 160 },
+    { title: t('Model'), dataIndex: 'model', key: 'model', width: 180 },
+    { title: t('Context window'), dataIndex: 'contextWindow', key: 'contextWindow', width: 140 },
+    { title: t('Max completion tokens'), dataIndex: 'maxCompletionTokens', key: 'maxCompletionTokens', width: 170 },
+    { title: t('Owned by'), dataIndex: 'ownedByOverride', key: 'ownedByOverride', width: 140 },
+    { title: t('Display name'), dataIndex: 'displayName', key: 'displayName', width: 160 },
+    {
+      title: t('Status'),
+      dataIndex: 'enabled',
+      key: 'enabled',
+      width: 100,
+      render: (enabled: boolean) => (
+        <Tag color={enabled ? 'green' : 'default'}>{enabled ? t('Enabled') : t('Disabled')}</Tag>
+      ),
+    },
+    {
+      title: t('Actions'),
+      key: 'actions',
+      fixed: 'right',
+      width: 150,
+      render: (_, record) => (
+        <Space>
+          <Button type="link" onClick={() => showEdit(record)}>
+            {t('Edit')}
+          </Button>
+          <Popconfirm title={t('Delete this override?')} onConfirm={() => remove(record.id)}>
+            <Button type="link" danger>
+              {t('Delete')}
+            </Button>
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Card
+      title={t('Model metadata')}
+      extra={
+        <Button type="primary" onClick={showCreate}>
+          {t('Add override')}
+        </Button>
+      }
+    >
+      <Table rowKey="id" columns={columns} dataSource={rows} loading={loading} scroll={{ x: 1200 }} />
+      <Modal
+        title={editing ? t('Edit override') : t('Add override')}
+        open={open}
+        onCancel={() => setOpen(false)}
+        onOk={save}
+        confirmLoading={saving}
+        destroyOnClose
+      >
+        <Form form={form} layout="vertical" preserve={false}>
+          <Form.Item name="llmService" label={t('LLM service')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              onChange={changeService}
+              options={services.map((service) => ({ label: service.title || service.name, value: service.name }))}
+            />
+          </Form.Item>
+          <Form.Item name="model" label={t('Model')} rules={[{ required: true }]}>
+            <Select
+              showSearch
+              optionFilterProp="label"
+              loading={modelsLoading}
+              disabled={!selectedService}
+              placeholder={t('Select a model')}
+              options={models.map((model) => ({ label: model.id, value: model.id }))}
+            />
+          </Form.Item>
+          <Form.Item
+            name="contextWindow"
+            label={t('Context window')}
+            tooltip={t('Total input + output token capacity reported to clients.')}
+          >
+            <InputNumber
+              min={1}
+              precision={0}
+              style={{ width: '100%' }}
+              placeholder={t('Leave empty to not override')}
+            />
+          </Form.Item>
+          <Form.Item
+            name="maxCompletionTokens"
+            label={t('Max completion tokens')}
+            tooltip={t('Maximum output tokens reported to clients.')}
+          >
+            <InputNumber
+              min={1}
+              precision={0}
+              style={{ width: '100%' }}
+              placeholder={t('Leave empty to not override')}
+            />
+          </Form.Item>
+          <Form.Item name="ownedByOverride" label={t('Owned by')}>
+            <Input placeholder={t('Leave empty to not override')} />
+          </Form.Item>
+          <Form.Item name="displayName" label={t('Display name')}>
+            <Input placeholder={t('Leave empty to not override')} />
+          </Form.Item>
+          <Form.Item name="description" label={t('Description')}>
+            <Input.TextArea rows={3} />
+          </Form.Item>
+          <Form.Item name="enabled" label={t('Enabled')} valuePropName="checked">
+            <Switch />
+          </Form.Item>
+        </Form>
+      </Modal>
+    </Card>
+  );
+}