This is an automated email from the ASF dual-hosted git repository.
likeguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/shenyu-dashboard.git
The following commit(s) were added to refs/heads/master by this push:
new 50155570 Added Switch Btn to adjust plugin screen alignment (#275)
50155570 is described below
commit 50155570c0f5e82cf33c15f9c5736d5916f997d5
Author: dev-ST-IA <[email protected]>
AuthorDate: Fri Apr 14 19:15:30 2023 +0530
Added Switch Btn to adjust plugin screen alignment (#275)
* Added Switch Btn to adjust plugin screen alignment
* added switch btn,edit in plugin config page
* Refactored to pass lint test
* Added OnChange On Switch to toggle status
---------
Co-authored-by: salmanthasleem
<[email protected]>
---
src/routes/Plugin/Common/index.js | 122 ++++++++++++++++++++++++++++++++++++--
1 file changed, 117 insertions(+), 5 deletions(-)
diff --git a/src/routes/Plugin/Common/index.js
b/src/routes/Plugin/Common/index.js
index 9cf929a0..37bd5ef7 100644
--- a/src/routes/Plugin/Common/index.js
+++ b/src/routes/Plugin/Common/index.js
@@ -16,16 +16,17 @@
*/
import React, { Component } from "react";
-import { Table, Row, Col, Button, Input, message, Popconfirm } from "antd";
+import { Table, Row, Col, Button, Input, message, Popconfirm, Switch,
Typography, Tag } from "antd";
import { connect } from "dva";
import styles from "../index.less";
import Selector from "./Selector";
import Rule from "./Rule";
import { getIntlContent, getCurrentLocale } from "../../../utils/IntlUtils";
import AuthButton from "../../../utils/AuthButton";
+import AddModal from "../../System/Plugin/AddModal";
const { Search } = Input;
-
+const { Title } = Typography;
@connect(({ common, global, loading }) => ({
...global,
...common,
@@ -42,7 +43,8 @@ export default class Common extends Component {
popup: "",
localeName: "",
selectorName: undefined,
- ruleName: undefined
+ ruleName: undefined,
+ isPluginEnabled: false
};
}
@@ -99,8 +101,10 @@ export default class Common extends Component {
const { dispatch } = this.props;
const { selectorName } = this.state;
let name = this.props.match.params ? this.props.match.params.id : "";
- const tempPluginId = this.getPluginId(plugins, name);
- this.setState({ pluginId: tempPluginId });
+ const tempPlugin = this.getPlugin(plugins, name);
+ const tempPluginId = tempPlugin?.id
+ const enabled = tempPlugin?.enabled ?? false;
+ this.setState({ pluginId: tempPluginId, isPluginEnabled: enabled });
dispatch({
type: "common/fetchSelector",
payload: {
@@ -247,6 +251,87 @@ export default class Common extends Component {
}
};
+ togglePluginStatus = () => {
+ const { dispatch, plugins } = this.props;
+ const pluginName = this.props.match.params ? this.props.match.params.id :
"";
+ const { name, id, role, config, sort, file} = this.getPlugin(plugins,
pluginName);
+ const enabled = !this.state.isPluginEnabled
+ const enabledStr = enabled ? '1' : '0';
+ dispatch({
+ type: "plugin/update",
+ payload: {
+ config,
+ role,
+ name,
+ enabled,
+ id,
+ sort,
+ file
+ },
+ fetchValue: {
+ name: pluginName,
+ enabled: enabledStr
+ },
+ callback: () => {
+ this.setState({ isPluginEnabled: enabled })
+ this.closeModal();
+ }
+ });
+ }
+
+ editClick = () => {
+ const { dispatch, plugins } = this.props;
+ const pluginName = this.props.match.params ? this.props.match.params.id :
"";
+ const plugin= this.getPlugin(plugins, pluginName);
+ plugin.enabled = this.state.isPluginEnabled;
+ dispatch({
+ type: "plugin/fetchByPluginId",
+ payload: {
+ pluginId: plugin.id,
+ type: "3"
+ },
+ callback: pluginConfigList => {
+ this.setState({
+ popup: (
+ <AddModal
+ disabled={true}
+ {...plugin}
+ {...pluginConfigList}
+ handleOk={values => {
+ const { name, enabled, id, role, config, sort, file } = values;
+ const enabledStr = enabled ? '1' : '0';
+ dispatch({
+ type: "plugin/update",
+ payload: {
+ config,
+ role,
+ name,
+ enabled,
+ id,
+ sort,
+ file
+ },
+ fetchValue: {
+ name: pluginName,
+ enabled: enabledStr
+ },
+ callback: () => {
+ this.setState({ isPluginEnabled: enabled })
+ this.closeModal();
+ }
+ });
+ }}
+ handleCancel={() => {
+ this.closeModal();
+ }}
+ />
+ )
+ });
+ }
+ });
+ };
+
+
editSelector = record => {
const { dispatch, plugins } = this.props;
const { selectorPage, selectorPageSize } = this.state;
@@ -452,6 +537,8 @@ export default class Common extends Component {
currentSelector
} = this.props;
const name = this.props.match.params ? this.props.match.params.id : "";
+ const role = this.props.match.params ? this.props.match.params.index : "";
+
const selectColumns = [
{
align: "center",
@@ -623,8 +710,33 @@ export default class Common extends Component {
}
];
+ const tag = {
+ text: this.state.isPluginEnabled ? getIntlContent("SHENYU.COMMON.OPEN")
: getIntlContent("SHENYU.COMMON.CLOSE"),
+ color: this.state.isPluginEnabled ? 'green' : 'red'
+ }
+
return (
<div className="plug-content-wrap">
+ <Row style={{ marginBottom: '5px', display: 'flex', justifyContent:
'space-between', alignItems: 'center' }}>
+ <div style={{ display: 'flex', alignItems: 'end', flex: 1, margin: 0
}}>
+ <Title level={2} style={{ textTransform: 'capitalize', margin: '0
20px 0 0' }}>
+ {name}
+ </Title>
+ <Title level={3} type="secondary" style={{ margin: '0 20px 0 0'
}}>{role}</Title>
+ <Tag color={tag.color}>{tag.text}</Tag>
+ </div>
+ <div style={{ display: 'flex', alignItems: 'end', gap: 10 }}>
+ <Switch
+ checked={this.state.isPluginEnabled ?? false}
+ onChange={this.togglePluginStatus}
+ />
+ <AuthButton perms="system:plugin:edit">
+ <div className="edit" onClick={this.editClick}>
+ {getIntlContent("SHENYU.SYSTEM.EDITOR")}
+ </div>
+ </AuthButton>
+ </div>
+ </Row>
<Row gutter={20}>
<Col span={8}>
<div className="table-header">
