You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2021/02/04 08:56:31 UTC
[apisix-dashboard] branch master updated: feat: added delete button
in plugin drawer (#1402)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new dbfa426 feat: added delete button in plugin drawer (#1402)
dbfa426 is described below
commit dbfa4262309ba74170a98594d4054d68b7ef0d98
Author: guoqqqi <72...@users.noreply.github.com>
AuthorDate: Thu Feb 4 16:56:20 2021 +0800
feat: added delete button in plugin drawer (#1402)
Co-authored-by: 琚致远 <ju...@apache.org>
---
web/src/components/Plugin/PluginDetail.tsx | 62 +++++++++++++++++++++---------
web/src/components/Plugin/PluginPage.tsx | 12 ++++--
web/src/pages/Plugin/List.tsx | 14 ++++---
web/src/pages/Plugin/locales/en-US.ts | 4 +-
web/src/pages/Plugin/locales/zh-CN.ts | 4 +-
5 files changed, 66 insertions(+), 30 deletions(-)
diff --git a/web/src/components/Plugin/PluginDetail.tsx b/web/src/components/Plugin/PluginDetail.tsx
index 43d49ee..b8bed12 100644
--- a/web/src/components/Plugin/PluginDetail.tsx
+++ b/web/src/components/Plugin/PluginDetail.tsx
@@ -25,6 +25,8 @@ import {
Divider,
Drawer,
Alert,
+ Space,
+ Popconfirm,
} from 'antd';
import { useIntl } from 'umi';
import CodeMirror from '@uiw/react-codemirror';
@@ -174,24 +176,46 @@ const PluginDetail: React.FC<Props> = ({
<Button onClick={onClose} key={1}>
{formatMessage({ id: 'component.global.cancel' })}
</Button>
- <Button
- key={2}
- type="primary"
- onClick={() => {
- try {
- const editorData = JSON.parse(ref.current?.editor.getValue());
- validateData(name, editorData).then((value) => {
- onChange({ formData: form.getFieldsValue(), codemirrorData: value });
- });
- } catch (error) {
- notification.error({
- message: 'Invalid JSON data',
- });
+ <Space>
+ <Popconfirm
+ title={formatMessage({ id: 'page.plugin.drawer.popconfirm.title.delete' })}
+ okText={formatMessage({ id: 'component.global.confirm' })}
+ cancelText={formatMessage({ id: 'component.global.cancel' })}
+ onConfirm={() => {
+ onChange({ formData: form.getFieldsValue(), codemirrorData: {}, shouldDelete: true });
+ }}
+ >
+ {
+ initialData[name]
+ ? <Button
+ key={3}
+ type="primary"
+ danger
+ >
+ {formatMessage({ id: 'component.global.delete' })}
+ </Button>
+ : null
}
- }}
- >
- {formatMessage({ id: 'component.global.submit' })}
- </Button>
+ </Popconfirm>
+ <Button
+ key={2}
+ type="primary"
+ onClick={() => {
+ try {
+ const editorData = JSON.parse(ref.current?.editor.getValue());
+ validateData(name, editorData).then((value) => {
+ onChange({ formData: form.getFieldsValue(), codemirrorData: value });
+ });
+ } catch (error) {
+ notification.error({
+ message: 'Invalid JSON data',
+ });
+ }
+ }}
+ >
+ {formatMessage({ id: 'component.global.submit' })}
+ </Button>
+ </Space>
</div>
}
>
@@ -226,8 +250,8 @@ const PluginDetail: React.FC<Props> = ({
pluginType === 'auth' && schemaType !== 'consumer' ? (
<Alert message={`${name} does not require configuration`} type="warning" />
) : (
- <>Current plugin: {name}</>
- )
+ <>Current plugin: {name}</>
+ )
}
ghost={false}
extra={[
diff --git a/web/src/components/Plugin/PluginPage.tsx b/web/src/components/Plugin/PluginPage.tsx
index 9bd22dc..7a92c6d 100644
--- a/web/src/components/Plugin/PluginPage.tsx
+++ b/web/src/components/Plugin/PluginPage.tsx
@@ -17,7 +17,7 @@
import React, { useEffect, useState } from 'react';
import { Anchor, Layout, Card, Button } from 'antd';
import { PanelSection } from '@api7-dashboard/ui';
-import { orderBy } from 'lodash';
+import { omit, orderBy } from 'lodash';
import PluginDetail from './PluginDetail';
import { fetchList } from './service';
@@ -174,11 +174,15 @@ const PluginPage: React.FC<Props> = ({
onClose={() => {
setName(NEVER_EXIST_PLUGIN_FLAG);
}}
- onChange={({ codemirrorData, formData }) => {
- onChange({
+ onChange={({ codemirrorData, formData, shouldDelete }) => {
+ let plugins = {
...initialData,
[name]: { ...codemirrorData, disable: !formData.disable },
- });
+ };
+ if (shouldDelete === true) {
+ plugins = omit(plugins, name);
+ };
+ onChange(plugins);
setName(NEVER_EXIST_PLUGIN_FLAG);
}}
/>
diff --git a/web/src/pages/Plugin/List.tsx b/web/src/pages/Plugin/List.tsx
index 6bd637f..e7bd4b9 100644
--- a/web/src/pages/Plugin/List.tsx
+++ b/web/src/pages/Plugin/List.tsx
@@ -113,13 +113,17 @@ const Page: React.FC = () => {
onClose={() => {
setVisible(false);
}}
- onChange={({ formData, codemirrorData }) => {
+ onChange={({ formData, codemirrorData, shouldDelete }) => {
const disable = !formData.disable;
+ let plugins = {
+ ...initialData,
+ [name]: { ...codemirrorData, disable },
+ };
+ if (shouldDelete === true) {
+ plugins = omit(plugins, name);
+ };
createOrUpdate({
- plugins: {
- ...initialData,
- [name]: { ...codemirrorData, disable },
- },
+ plugins
}).then(() => {
setVisible(false);
setName('');
diff --git a/web/src/pages/Plugin/locales/en-US.ts b/web/src/pages/Plugin/locales/en-US.ts
index 86e9045..760a5be 100644
--- a/web/src/pages/Plugin/locales/en-US.ts
+++ b/web/src/pages/Plugin/locales/en-US.ts
@@ -14,4 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export default {};
+export default {
+ 'page.plugin.drawer.popconfirm.title.delete': 'Are you sure to delete this item?',
+};
diff --git a/web/src/pages/Plugin/locales/zh-CN.ts b/web/src/pages/Plugin/locales/zh-CN.ts
index 86e9045..17297c3 100644
--- a/web/src/pages/Plugin/locales/zh-CN.ts
+++ b/web/src/pages/Plugin/locales/zh-CN.ts
@@ -14,4 +14,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-export default {};
+export default {
+ 'page.plugin.drawer.popconfirm.title.delete': '确定删除该插件吗？',
+};