feat: support show all enable plugin list tab (#2585)
diff --git a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
index af73c26..9e7a7a4 100644
--- a/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
+++ b/web/cypress/integration/plugin/create-delete-in-drawer-plugin.spec.js
@@ -30,6 +30,8 @@
checkedSwitcher: '.ant-switch-checked',
refresh: '.anticon-reload',
empty: '.ant-empty-normal',
+ tab: '.ant-tabs-tab',
+ tabBtn: '.ant-tabs-tab-btn',
notification: '.ant-notification-notice',
notificationCloseIcon: '.ant-notification-notice-close',
};
@@ -162,4 +164,54 @@
cy.visit('/plugin/list');
cy.get(selector.empty).should('be.visible');
});
+
+ it('should be switched tabs to distinguish enable ', function () {
+ cy.visit('/plugin/list');
+ cy.get(selector.refresh).click();
+ cy.contains('button', '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.get(selector.tab).within(() => {
+ cy.contains(selector.tabBtn, 'Enable').click({
+ force: true,
+ });
+ });
+
+ 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.tab).within(() => {
+ cy.contains(selector.tabBtn, 'All').click({
+ force: true,
+ });
+ });
+ cy.contains(data.basicAuthPlugin).should('exist');
+ cy.visit('/plugin/list');
+ cy.get(selector.empty).should('be.visible');
+ });
});
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index d530122..0a27784 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
import React, { useEffect, useState } from 'react';
-import { Anchor, Layout, Card, Button, Form, Select, Alert } from 'antd';
+import { Anchor, Layout, Card, Button, Form, Select, Alert, Tabs } from 'antd';
import { orderBy, omit } from 'lodash';
import { useIntl } from 'umi';
@@ -66,6 +66,8 @@
const { formatMessage } = useIntl();
const [form] = Form.useForm();
const [pluginList, setPluginList] = useState<PluginComponent.Meta[]>([]);
+ const [enablePluginsList, setEnablePluginsList] = useState<PluginComponent.Meta[]>([]);
+ const [showEnablePlugin, setShowEnablePlugin] = useState<boolean>(false);
const [pluginTemplateList, setPluginTemplateList] = useState<PluginTemplateModule.ResEntity[]>(
[],
);
@@ -96,14 +98,43 @@
form.setFieldsValue({ plugin_config_id });
});
}, []);
- const openPluginList = pluginList.filter(
- (item) => initialData[item.name] && !initialData[item.name].disable,
- );
- const openPluginType = openPluginList.map((item) => item.type);
+
+ useEffect(() => {
+ const openPluginList = pluginList.filter(
+ (item) => initialData[item.name] && !initialData[item.name].disable,
+ );
+ setEnablePluginsList(openPluginList);
+ }, [initialData, pluginList]);
+
+ const openPluginType = enablePluginsList.map((item) => item.type);
const newOpenPluginType = openPluginType.filter((elem, index, self) => {
return index === self.indexOf(elem);
});
+ const tabsList = [
+ {
+ title: formatMessage({ id: 'component.plugin.all' }),
+ key: 'allPlugins',
+ },
+ {
+ title: formatMessage({ id: 'component.plugin.enable' }),
+ key: 'enablePlugins',
+ },
+ ];
+
+ const SwitchTab = () => (
+ <Tabs
+ defaultActiveKey={showEnablePlugin ? 'enablePlugins' : 'allPlugins'}
+ onChange={(val: string) => {
+ setShowEnablePlugin(val === 'enablePlugins');
+ }}
+ >
+ {tabsList.map((tab) => (
+ <Tabs.TabPane tab={tab.title} key={tab.key} />
+ ))}
+ </Tabs>
+ );
+
const PluginList = () => (
<>
<style>
@@ -199,7 +230,7 @@
id={`plugin-category-${typeItem}`}
>
{orderBy(
- pluginList.filter(
+ (showEnablePlugin ? enablePluginsList : pluginList).filter(
readonly
? (item) => item.type === typeItem && !item.hidden && initialData[item.name]
: (item) => item.type === typeItem && !item.hidden,
@@ -303,6 +334,7 @@
background-color: transparent;
}
`}</style>
+ {!readonly && <SwitchTab />}
<Layout>
<PluginList />
<Plugin />
diff --git a/web/src/components/Plugin/locales/en-US.ts b/web/src/components/Plugin/locales/en-US.ts
index 1447091..9bdf011 100644
--- a/web/src/components/Plugin/locales/en-US.ts
+++ b/web/src/components/Plugin/locales/en-US.ts
@@ -31,7 +31,7 @@
'component.plugin.serverless': 'Serverless',
'component.plugin.observability': 'Observability',
'component.plugin.other': 'Other',
-
+ 'component.plugin.all': 'All',
// cors
'component.pluginForm.cors.allow_origins.tooltip':
'Which Origins is allowed to enable CORS, format as：scheme://host:port, for example: https://somehost.com:8081. Multiple origin use , to split. When allow_credential is false, you can use * to indicate allow any origin. you also can allow all any origins forcefully using ** even already enable allow_credential, but it will bring some security risks.',
diff --git a/web/src/components/Plugin/locales/tr-TR.ts b/web/src/components/Plugin/locales/tr-TR.ts
index 64a925d..88b9674 100644
--- a/web/src/components/Plugin/locales/tr-TR.ts
+++ b/web/src/components/Plugin/locales/tr-TR.ts
@@ -32,6 +32,7 @@
'component.plugin.serverless': 'Sunucusuz Mimari',
'component.plugin.observability': 'Gözlemlenebilirlik',
'component.plugin.other': 'Diğer',
+ 'component.plugin.all': 'Tümü',
// cors
'component.pluginForm.cors.allow_origins.tooltip':
'Originler CORSları aktif ettiğinde örn : ：scheme://host:port, örn https://somehost.com:8081.Kullanılacak birden çok kaynak allow_credential false olduğunda, herhangi bir kaynağa izin verildiğini belirtmek için * işaretini kullanabilirsiniz. Ayrıca, ** kullanarak tüm kökenlere izin verebilirsiniz, allow_credentialı etkinleştirirseniz bazı güvenlik riskleri getirecektir.',
diff --git a/web/src/components/Plugin/locales/zh-CN.ts b/web/src/components/Plugin/locales/zh-CN.ts
index 07b677d..34e0ae8 100644
--- a/web/src/components/Plugin/locales/zh-CN.ts
+++ b/web/src/components/Plugin/locales/zh-CN.ts
@@ -30,7 +30,7 @@
'component.plugin.serverless': '无服务器架构',
'component.plugin.observability': '可观测性',
'component.plugin.other': '其它',
-
+ 'component.plugin.all': '所有',
// cors
'component.pluginForm.cors.allow_origins.tooltip':
'允许跨域访问的 Origin，格式如：scheme://host:port，比如: https://somehost.com:8081 。多个值使用 , 分割，allow_credential 为 false 时可以使用 * 来表示所有 Origin 均允许通过。你也可以在启用了 allow_credential 后使用 ** 强制允许所有 Origin 都通过，但请注意这样存在安全隐患。',
