[type:improve] support custom rule handle with plugin handler config

src/models/pluginHandle.js

@@ -132,17 +132,8 @@ export default {
         let dataList = [];
         let useJSON = false;
         if (json.data && json.data.length > 0) {
-          const fieldArr = json.data.map((v) => v.field);
           // eslint-disable-next-line no-plusplus
           for (let i = 0; i < length; i++) {
-            if (handleData[i]) {
-              const keys = Object.keys(handleData[i]);
-              let allKeys = [...fieldArr, ...keys];
-              allKeys = new Set(allKeys);
-              if (allKeys.size !== fieldArr.length) {
-                useJSON = true;
-              }
-            }
             let dataItem = json.data.map((data) => {
               let item = { ...data };
               item.key = item.id;

src/routes/Plugin/Common/CommonRuleHandle.js

@@ -16,7 +16,7 @@
  */
 
 import React, { Component } from "react";
-import { Form, Select, Input, Button, Tooltip, Popconfirm } from "antd";
+import { Button, Form, Input, Popconfirm, Select, Tooltip } from "antd";
 import classnames from "classnames";
 import styles from "../index.less";
 import { getIntlContent } from "../../../utils/IntlUtils";

src/routes/Plugin/Common/ComposeRuleHandle.js

@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { Component } from "react";
+import PluginRuleHandle from "../PluginRuleHandle";
+import CommonRuleHandle from "./CommonRuleHandle";
+
+export default class ComposeRuleHandle extends Component {
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  getData = (formValues) => {
+    return this.handleCustomComponentRef.getData(formValues);
+  };
+
+  render() {
+    const { pluginName, form, pluginHandleList, handle, multiRuleHandle } =
+      this.props;
+    const CustomRuleHandle = PluginRuleHandle[pluginName];
+    return (
+      <>
+        <CustomRuleHandle
+          onRef={(handleComponentRef) => {
+            this.handleCustomComponentRef = handleComponentRef;
+            this.props.onRef(this);
+          }}
+          pluginName={pluginName}
+          onAddPluginHandle={this.handleAddHandle}
+          onDeletePluginHandle={this.handleDeleteHandle}
+          form={form}
+          pluginHandleList={pluginHandleList}
+          handle={handle}
+          multiRuleHandle={multiRuleHandle}
+        />
+        <CommonRuleHandle
+          pluginName={pluginName}
+          onAddPluginHandle={this.handleAddHandle}
+          onDeletePluginHandle={this.handleDeleteHandle}
+          form={form}
+          pluginHandleList={pluginHandleList}
+          handle={handle}
+          multiRuleHandle={multiRuleHandle}
+        />
+      </>
+    );
+  }
+}

src/routes/Plugin/Common/Rule.js

@@ -17,28 +17,29 @@
 
 import React, { Component } from "react";
 import {
-  Modal,
+  Button,
+  Col,
+  DatePicker,
   Form,
+  Input,
+  message,
+  Modal,
   Row,
-  Col,
   Select,
-  Input,
   Switch,
-  Button,
-  message,
-  DatePicker,
   TimePicker,
 } from "antd";
 import { connect } from "dva";
 import styles from "../index.less";
 import { getIntlContent } from "../../../utils/IntlUtils";
 import CommonRuleHandle from "./CommonRuleHandle";
+import ComposeRuleHandle from "./ComposeRuleHandle";
 import PluginRuleHandle from "../PluginRuleHandle";
 import RuleCopy from "./RuleCopy";
 import {
   formatDate,
-  formatTime,
   formatDateString,
+  formatTime,
   formatTimeString,
 } from "../../../utils/utils";
 
@@ -177,7 +178,7 @@ class AddModal extends Component {
   handleSubmit = (e) => {
     e.preventDefault();
     const { form, handleOk, multiRuleHandle } = this.props;
-    const { ruleConditions, pluginHandleList, customRulePage } = this.state;
+    const { ruleConditions, pluginHandleList } = this.state;
 
     form.validateFieldsAndScroll((err, values) => {
       const {
@@ -194,31 +195,33 @@ class AddModal extends Component {
         if (submit) {
           let handle;
 
-          if (!customRulePage) {
-            // commonRule
-            switch (handleType) {
-              case "1":
-                handle = [];
-                pluginHandleList.forEach((handleList, index) => {
-                  handle[index] = {};
-                  handleList.forEach((item) => {
-                    handle[index][item.field] = values[item.field + index];
-                  });
+          // commonRule
+          switch (handleType) {
+            case "1":
+              handle = [];
+              pluginHandleList.forEach((handleList, index) => {
+                handle[index] = {};
+                handleList.forEach((item) => {
+                  handle[index][item.field] = values[item.field + index];
                 });
-                handle = multiRuleHandle
-                  ? JSON.stringify(handle)
-                  : JSON.stringify(handle[0]);
-                break;
-              case "2":
-                handle = handleJSON;
-                break;
-              default:
-                break;
-            }
+              });
+              handle = multiRuleHandle
+                ? JSON.stringify(handle)
+                : JSON.stringify(handle[0]);
+              break;
+            case "2":
+              handle = handleJSON;
+              break;
+            default:
+              break;
           }
           if (this.handleComponentRef) {
             // customizationRule
-            handle = this.handleComponentRef.getData(values);
+            const customHandle = this.handleComponentRef.getData(values);
+            handle = JSON.stringify({
+              ...JSON.parse(handle),
+              ...JSON.parse(customHandle),
+            });
           }
 
           handleOk({
@@ -498,7 +501,7 @@ class AddModal extends Component {
 
     let RuleHandleComponent;
     if (customRulePage) {
-      RuleHandleComponent = PluginRuleHandle[pluginName];
+      RuleHandleComponent = ComposeRuleHandle;
     } else if (pluginHandleList) {
       RuleHandleComponent = CommonRuleHandle;
     }
@@ -696,6 +699,7 @@ class AddModal extends Component {
               onRef={(handleComponentRef) => {
                 this.handleComponentRef = handleComponentRef;
               }}
+              pluginName={pluginName}
               onAddPluginHandle={this.handleAddHandle}
               onDeletePluginHandle={this.handleDeleteHandle}
               form={form}

src/routes/Plugin/PluginRuleHandle/index.js

@@ -15,12 +15,14 @@
  * limitations under the License.
  */
 
+import RequestRuleHandle from "./RequestRuleHandle";
 import HystrixRuleHandle from "./HystrixRuleHandle";
 import ParamPluginRuleHandle from "./ParamPluginRuleHandle";
 import ResponseRuleHandle from "./ResponseRuleHandle";
 import GeneralContextRuleHandle from "./GeneralContextRuleHandle";
 
 export default {
+  request: RequestRuleHandle,
   generalContext: GeneralContextRuleHandle,
   modifyResponse: ResponseRuleHandle,
   hystrix: HystrixRuleHandle,