feat: support bulk enabling of plugins in the interface (#5730)

* feat: support bulk enabling of plugins in the interface

* fix: improve code

* fix: error message

* fix: enable error

* fix: filter error
This commit is contained in:
chenos 2024-11-26 14:54:30 +08:00 committed by GitHub
parent acdd8f6b6e
commit d90d9dbc88
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 103 additions and 6 deletions

View File

@ -120,7 +120,9 @@ export class APIClient extends APIClientSDK {
toErrMessages(error) {
if (typeof error?.response?.data === 'string') {
return [{ message: error?.response?.data }];
const tempElement = document.createElement('div');
tempElement.innerHTML = error?.response?.data;
return [{ message: tempElement.textContent || tempElement.innerText }];
}
return (
error?.response?.data?.errors ||

View File

@ -284,7 +284,9 @@ export class Application {
loadFailed = true;
const toError = (error) => {
if (typeof error?.response?.data === 'string') {
return { message: error?.response?.data };
const tempElement = document.createElement('div');
tempElement.innerHTML = error?.response?.data;
return { message: tempElement.textContent || tempElement.innerText };
}
if (error?.response?.data?.error) {
return error?.response?.data?.error;

View File

@ -1027,5 +1027,9 @@
"Add & Update": "添加 & 更新",
"Table size":"表格大小",
"Hide column": "隐藏列",
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下,整个列会变为透明色。在非配置模式下,整个列将被隐藏。即使整个列被隐藏了,其配置的默认值和其他设置仍然有效。"
"In configuration mode, the entire column becomes transparent. In non-configuration mode, the entire column will be hidden. Even if the entire column is hidden, its configured default values and other settings will still take effect.": "在配置模式下,整个列会变为透明色。在非配置模式下,整个列将被隐藏。即使整个列被隐藏了,其配置的默认值和其他设置仍然有效。",
"Plugin": "插件",
"Bulk enable": "批量激活",
"Search plugin...": "搜索插件...",
"Package name": "包名"
}

View File

@ -10,7 +10,7 @@
export * from './PluginManagerLink';
import { PageHeader } from '@ant-design/pro-layout';
import { useDebounce } from 'ahooks';
import { Button, Col, Divider, Input, List, Result, Row, Space, Spin, Tabs } from 'antd';
import { Button, Col, Divider, Input, List, Modal, Result, Row, Space, Spin, Table, Tabs } from 'antd';
import _ from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -18,7 +18,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import { css } from '@emotion/css';
import { useACLRoleContext } from '../acl/ACLProvider';
import { useRequest } from '../api-client';
import { useAPIClient, useRequest } from '../api-client';
import { useToken } from '../style';
import { PluginCard } from './PluginCard';
import { PluginAddModal } from './PluginForm/modal/PluginAddModal';
@ -51,6 +51,90 @@ function hasIntersection(arr1: any[], arr2: any[]) {
return arr1.some((item) => arr2.includes(item));
}
function BulkEnableButton({ plugins = [] }) {
const { t } = useTranslation();
const api = useAPIClient();
const [items, setItems] = useState(plugins.filter((plugin) => !plugin.enabled));
const [isModalOpen, setIsModalOpen] = useState(false);
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
return (
<>
<Button onClick={() => setIsModalOpen(true)}>{t('Bulk enable')}</Button>
<Modal
width={800}
title={t('Bulk enable')}
open={isModalOpen}
onOk={async () => {
console.log(selectedRowKeys);
await api.request({
url: 'pm:enable',
params: {
filterByTk: selectedRowKeys,
},
});
setIsModalOpen(false);
}}
onCancel={() => {
setSelectedRowKeys([]);
setIsModalOpen(false);
}}
>
<Input
style={{ marginBottom: '1em' }}
placeholder={t('Search plugin...')}
onChange={(e) => {
setItems(
plugins.filter((plugin: { enabled: boolean; displayName: string; description: string }) => {
const value = e.target.value;
return (
!plugin.enabled &&
(plugin.displayName.toLowerCase().includes(value.toLowerCase()) ||
plugin.description?.toLowerCase().includes(value.toLowerCase()))
);
}),
);
}}
/>
<Table
rowSelection={{
type: 'checkbox',
onChange(selectedRowKeys) {
setSelectedRowKeys(selectedRowKeys);
},
}}
rowKey={'name'}
scroll={{
y: '60vh',
}}
size={'small'}
pagination={false}
columns={[
{
title: t('Plugin'),
dataIndex: 'displayName',
ellipsis: true,
width: 200,
},
{
title: t('Description'),
dataIndex: 'description',
ellipsis: true,
},
{
title: t('Package name'),
dataIndex: 'packageName',
width: 260,
ellipsis: true,
},
]}
dataSource={items}
/>
</Modal>
</>
);
}
const LocalPlugins = () => {
const { t } = useTranslation();
const { theme } = useStyles();
@ -197,6 +281,7 @@ const LocalPlugins = () => {
</div>
<div>
<Space>
<BulkEnableButton plugins={data?.data || []} />
<Button onClick={() => setShowAddForm(true)} type="primary">
{t('Add & Update')}
</Button>

View File

@ -78,6 +78,9 @@ export default (app: Application) => {
try {
await app.pm.enable(plugins);
} catch (error) {
await app.tryReloadOrRestart({
recover: true,
});
throw new PluginCommandError(`Failed to enable plugin`, { cause: error });
}
});

View File

@ -96,7 +96,8 @@ export default {
if (!filterByTk) {
ctx.throw(400, 'plugin name invalid');
}
app.runAsCLI(['pm', 'enable', filterByTk], { from: 'user' });
const keys = Array.isArray(filterByTk) ? filterByTk : [filterByTk];
app.runAsCLI(['pm', 'enable', ...keys], { from: 'user' });
ctx.body = filterByTk;
await next();
},