apache-shenyu插件配置规则处理杂谈

我去旅行，是因为我决定了要去，并不是因为对风景的兴趣。——马尔克斯的《霍乱时期的爱情》

这个issue：

https://github.com/apache/shenyu/issues/5966

其中提到由于没有填写handler导致无法提交，于是先临时添加一个必填标识

https://github.com/apache/shenyu-dashboard/pull/525

这里发现有两个Handler的表单项，一眼看过去好像是个BUG，本来是打算合二为一，发现由于此处的设计是两个FormItem，删掉下面的Handler的label，会导致被删除的表单项往左偏移而对不齐

此处介绍一下两个都称之为Handle的表单项的区别，第一个是组件独特的表单项，例如request插件就是request对应的xxx.js，表单项里包含填写多个params、headers、cookies等，如果是其他组件则是填写其他的东西；第二个是在PluginTemplate动态配置出来的

目前的代码逻辑比较绕，大概介绍一下：

src/routes/Plugin/Common/Rule.js是一个AddModal的组件，也就是我pr里截图的弹窗表单

其中有这样一段代码

let RuleHandleComponent;
if (customRulePage) {
  RuleHandleComponent = ComposeRuleHandle;
} else if (pluginHandleList) {
  RuleHandleComponent = CommonRuleHandle;
}

其中customRulePage

const customPluginNames = Object.keys(PluginRuleHandle);
    this.state = {
      customRulePage: customPluginNames.includes(props.pluginName),
    };

而PluginRuleHandle

/*
 * 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 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,
  paramMapping: ParamPluginRuleHandle,
};

看到上面三个就知道这么一个逻辑：

如果PluginRuleHandle中自定义了一些对应组件的handler，就用ComposeRuleHandle，否则有pluginHandleList就用CommonRuleHandle，此处pluginHandleList是通过pluginId查询网页对应PluginTemlate菜单配置的表单项得到

接下来介绍ComposeRuleHandle，这个组件包含两个组件，一个是PluginRuleHandle中配置的对应组件的Handle，还有一个是刚刚提到的CommonRuleHandle，每一个组件都是一个FormItem，因此才有两个FormItem

总结一下：

Rule.js：弹窗里的表单，包含下面所有组件

PluginRuleHandle.js：配置项，配置预设插件与定制化handle组件

ComposeRuleHandle.js：在PluginRuleHandle.js中配置了定制化handle组件的，使用定制化+CommonRuleHandle.js俩表单项

CommonRuleHandle.js：在网页菜单PluginTemplate动态配置生成的表单项