From 326481b4d374916d84bd49b17307482749e6acbf Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Sun, 1 Aug 2021 12:17:15 +0800
Subject: [PATCH 1/7] fix(route): add operators

---
 .../components/Step1/MatchingRulesView.tsx    | 116 +++++++++++-------
 web/src/pages/Route/locales/en-US.ts          |  30 +++--
 web/src/pages/Route/locales/zh-CN.ts          |  15 ++-
 web/src/pages/Route/typing.d.ts               |  20 +--
 4 files changed, 117 insertions(+), 64 deletions(-)

diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index 81f4dd2f1b..d09e401867 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -23,14 +23,14 @@ import PanelSection from '@/components/PanelSection';
 const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   advancedMatchingRules,
   disabled,
-  onChange = () => { },
+  onChange = () => {},
 }) => {
   const [visible, setVisible] = useState(false);
   const [mode, setMode] = useState<RouteModule.ModalType>('CREATE');
   const [namePlaceholder, setNamePlaceholder] = useState('');
   const [modalForm] = Form.useForm();
 
-  const [operatorValueSample, setOperatorValueSample] = useState("")
+  const [operatorValueSample, setOperatorValueSample] = useState('');
 
   const { Option } = Select;
 
@@ -38,15 +38,15 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
 
   const onOk = () => {
     modalForm.validateFields().then((value: RouteModule.MatchingRule) => {
-      if (value.operator === "IN") {
+      if (value.operator === 'IN') {
         try {
-          JSON.parse(value.value as string)
+          JSON.parse(value.value as string);
         } catch (error) {
           notification.warning({
             message: formatMessage({ id: 'page.route.fields.vars.invalid' }),
-            description: formatMessage({ id: 'page.route.fields.vars.in.invalid' })
-          })
-          return
+            description: formatMessage({ id: 'page.route.fields.vars.in.invalid' }),
+          });
+          return;
         }
       }
       if (mode === 'EDIT') {
@@ -136,9 +136,18 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
           case '~~':
             renderText = formatMessage({ id: 'page.route.regexMatch' });
             break;
+          case '~*':
+            renderText = formatMessage({ id: 'page.royte.caseInsensitiveRegexMatch' });
+            break;
           case 'IN':
             renderText = formatMessage({ id: 'page.route.in' });
             break;
+          case 'HAS':
+            renderText = formatMessage({ id: 'page.route.has' });
+            break;
+          case '!':
+            renderText = formatMessage({ id: 'page.route.reverse' });
+            break;
           default:
             renderText = '';
         }
@@ -153,27 +162,29 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     disabled
       ? {}
       : {
-        title: formatMessage({ id: 'component.global.operation' }),
-        key: 'action',
-        render: (_: any, record: RouteModule.MatchingRule) => (
-          <Space size="middle">
-            <a onClick={() => handleEdit(record)}>
-              {formatMessage({ id: 'component.global.edit' })}
-            </a>
-            <a onClick={() => handleRemove(record.key)}>
-              {formatMessage({ id: 'component.global.delete' })}
-            </a>
-          </Space>
-        ),
-      },
+          title: formatMessage({ id: 'component.global.operation' }),
+          key: 'action',
+          render: (_: any, record: RouteModule.MatchingRule) => (
+            <Space size="middle">
+              <a onClick={() => handleEdit(record)}>
+                {formatMessage({ id: 'component.global.edit' })}
+              </a>
+              <a onClick={() => handleRemove(record.key)}>
+                {formatMessage({ id: 'component.global.delete' })}
+              </a>
+            </Space>
+          ),
+        },
   ].filter((item) => Object.keys(item).length);
 
   const renderModal = () => {
     return (
       <Modal
-        title={mode === 'EDIT'
-          ? formatMessage({ id: 'page.route.rule.edit' })
-          : formatMessage({ id: 'page.route.rule.create' })}
+        title={
+          mode === 'EDIT'
+            ? formatMessage({ id: 'page.route.rule.edit' })
+            : formatMessage({ id: 'page.route.rule.create' })
+        }
         centered
         visible
         onOk={onOk}
@@ -234,7 +245,9 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
                 message: formatMessage({ id: 'component.global.input.ruleMessage.name' }),
               },
             ]}
-            tooltip={formatMessage({ id: 'page.route.form.itemRulesRequiredMessage.parameterName' })}
+            tooltip={formatMessage({
+              id: 'page.route.form.itemRulesRequiredMessage.parameterName',
+            })}
             extra={namePlaceholder}
           >
             <Input />
@@ -245,30 +258,48 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
             rules={[
               {
                 required: true,
-                message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
-                  id: 'page.route.operationalCharacter',
-                })}`,
+                message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage(
+                  {
+                    id: 'page.route.operationalCharacter',
+                  },
+                )}`,
               },
             ]}
           >
-            <Select onChange={(e: string) => {
-              switch (e) {
-                case "IN":
-                  setOperatorValueSample(formatMessage({ id: 'page.route.advanced-match.operator.sample.IN' }))
-                  break
-                case "~~":
-                  setOperatorValueSample(formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }))
-                  break
-                default:
-                  setOperatorValueSample("")
-              }
-            }}>
+            <Select
+              onChange={(e: string) => {
+                switch (e) {
+                  case 'IN':
+                    setOperatorValueSample(
+                      formatMessage({ id: 'page.route.advanced-match.operator.sample.IN' }),
+                    );
+                    break;
+                  case '~~':
+                    setOperatorValueSample(
+                      formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }),
+                    );
+                    break;
+                  case '~*':
+                    setOperatorValueSample(
+                      formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }),
+                    );
+                    break;
+                  default:
+                    setOperatorValueSample('');
+                }
+              }}
+            >
               <Option value="==">{formatMessage({ id: 'page.route.equal' })}</Option>
               <Option value="~=">{formatMessage({ id: 'page.route.unequal' })}</Option>
               <Option value=">">{formatMessage({ id: 'page.route.greaterThan' })}</Option>
               <Option value="<">{formatMessage({ id: 'page.route.lessThan' })}</Option>
               <Option value="~~">{formatMessage({ id: 'page.route.regexMatch' })}</Option>
+              <Option value="~*">
+                {formatMessage({ id: 'page.route.caseInsensitiveRegexMatch' })}
+              </Option>
               <Option value="IN">{formatMessage({ id: 'page.route.in' })}</Option>
+              <Option value="HAS">{formatMessage({ id: 'page.route.has' })}</Option>
+              <Option value="!">{formatMessage({ id: 'page.route.reverse' })}</Option>
             </Select>
           </Form.Item>
           <Form.Item
@@ -288,11 +319,14 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
           </Form.Item>
         </Form>
       </Modal>
-    )
+    );
   };
 
   return (
-    <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })} tooltip={formatMessage({id: 'page.route.advanced-match.tooltip'})}>
+    <PanelSection
+      title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })}
+      tooltip={formatMessage({ id: 'page.route.advanced-match.tooltip' })}
+    >
       {!disabled && (
         <Button
           onClick={() => {
diff --git a/web/src/pages/Route/locales/en-US.ts b/web/src/pages/Route/locales/en-US.ts
index a5fdf5f4a9..5370584090 100644
--- a/web/src/pages/Route/locales/en-US.ts
+++ b/web/src/pages/Route/locales/en-US.ts
@@ -30,7 +30,10 @@ export default {
   'page.route.greaterThan': 'Greater Than(>)',
   'page.route.lessThan': 'Less Than(<)',
   'page.route.regexMatch': 'Regex Match(~~)',
+  'page.route.caseInsensitiveRegexMatch': 'Case insensitive regular match(~*)',
   'page.route.in': 'IN',
+  'page.route.has': 'HAS',
+  'page.route.reverse': 'Reverse the result(!)',
   'page.route.rule': 'Rule',
   'page.route.httpHeaderName': 'HTTP Request Header Name',
   'page.route.service': 'Service',
@@ -140,23 +143,29 @@ export default {
   'page.route.panelSection.title.requestOverride': 'Request Override',
   'page.route.form.itemLabel.headerRewrite': 'Header Override',
   'page.route.tooltip.pluginOrchOnlySupportChrome': 'Plugin orchestration only supports Chrome.',
-  'page.route.tooltip.pluginOrchWithoutProxyRewrite': 'Plugin orchestration mode cannot be used when request override is configured in Step 1.',
-  'page.route.tooltip.pluginOrchWithoutRedirect': 'Plugin orchestration mode cannot be used when Redirect in Step 1 is selected to enable HTTPS.',
+  'page.route.tooltip.pluginOrchWithoutProxyRewrite':
+    'Plugin orchestration mode cannot be used when request override is configured in Step 1.',
+  'page.route.tooltip.pluginOrchWithoutRedirect':
+    'Plugin orchestration mode cannot be used when Redirect in Step 1 is selected to enable HTTPS.',
 
   'page.route.tabs.normalMode': 'Normal',
   'page.route.tabs.orchestration': 'Orchestration',
 
-  'page.route.list.description': 'Route is the entry point of a request, which defines the matching rules between a client request and a service. A route can be associated with a service (Service), an upstream (Upstream), a service can correspond to a set of routes, and a route can correspond to an upstream object (a set of backend service nodes), so each request matching to a route will be proxied by the gateway to the route-bound upstream service.',
+  'page.route.list.description':
+    'Route is the entry point of a request, which defines the matching rules between a client request and a service. A route can be associated with a service (Service), an upstream (Upstream), a service can correspond to a set of routes, and a route can correspond to an upstream object (a set of backend service nodes), so each request matching to a route will be proxied by the gateway to the route-bound upstream service.',
 
   'page.route.configuration.name.rules.required.description': 'Please enter the route name',
   'page.route.configuration.name.placeholder': 'Please enter the route name',
   'page.route.configuration.desc.tooltip': 'Please enter the description of the route',
-  'page.route.configuration.publish.tooltip': 'Used to control whether a route is published to the gateway immediately after it is created',
+  'page.route.configuration.publish.tooltip':
+    'Used to control whether a route is published to the gateway immediately after it is created',
   'page.route.configuration.version.placeholder': 'Please enter the routing version number',
   'page.route.configuration.version.tooltip': 'Version number of the route, e.g. V1',
-  'page.route.configuration.normal-labels.tooltip': 'Add custom labels to routes that can be used for route grouping.',
+  'page.route.configuration.normal-labels.tooltip':
+    'Add custom labels to routes that can be used for route grouping.',
 
-  'page.route.configuration.path.rules.required.description': 'Please enter a valid HTTP request path',
+  'page.route.configuration.path.rules.required.description':
+    'Please enter a valid HTTP request path',
   'page.route.configuration.path.placeholder': 'Please enter the HTTP request path',
   'page.route.configuration.remote_addrs.placeholder': 'Please enter the client address',
   'page.route.configuration.host.placeholder': 'Please enter the HTTP request hostname',
@@ -169,12 +178,15 @@ export default {
   'page.route.advanced-match.operator.sample.IN': 'Please enter an array, e.g ["1", "2"]',
   'page.route.advanced-match.operator.sample.~~': 'Please enter a regular expression, e.g [a-z]+',
   'page.route.fields.service_id.invalid': 'Please check the configuration of binding service',
-  'page.route.fields.service_id.without-upstream': 'If you do not bind the service, you must set the Upstream (Step 2)',
-  'page.route.advanced-match.tooltip': 'It supports route matching through request headers, request parameters and cookies, and can be applied to scenarios such as grayscale publishing and blue-green testing.',
+  'page.route.fields.service_id.without-upstream':
+    'If you do not bind the service, you must set the Upstream (Step 2)',
+  'page.route.advanced-match.tooltip':
+    'It supports route matching through request headers, request parameters and cookies, and can be applied to scenarios such as grayscale publishing and blue-green testing.',
 
   'page.route.fields.custom.redirectOption.tooltip': 'This is related to redirect plugin',
   'page.route.fields.service_id.tooltip': 'Bind Service object to reuse their configuration.',
 
   'page.route.fields.vars.invalid': 'Please check the advanced match condition configuration',
-  'page.route.fields.vars.in.invalid': 'When using the IN operator, enter the parameter values in array format.',
+  'page.route.fields.vars.in.invalid':
+    'When using the IN operator, enter the parameter values in array format.',
 };
diff --git a/web/src/pages/Route/locales/zh-CN.ts b/web/src/pages/Route/locales/zh-CN.ts
index 529e3738df..b1d7f18f71 100644
--- a/web/src/pages/Route/locales/zh-CN.ts
+++ b/web/src/pages/Route/locales/zh-CN.ts
@@ -26,7 +26,10 @@ export default {
   'page.route.greaterThan': '大于（>）',
   'page.route.lessThan': '小于（<）',
   'page.route.regexMatch': '正则匹配（～～）',
+  'page.route.caseInsensitiveRegexMatch': '不区分大小写的正则匹配(~*)',
   'page.route.in': 'IN',
+  'page.route.has': 'HAS',
+  'page.route.reverse': '非(!)',
   'page.route.rule': '规则',
   'page.route.host': '域名',
   'page.route.path': '路径',
@@ -140,13 +143,16 @@ export default {
   'page.route.button.selectFile': '请选择上传文件',
   'page.route.list': '路由列表',
   'page.route.tooltip.pluginOrchOnlySupportChrome': '插件编排仅支持 Chrome 浏览器。',
-  'page.route.tooltip.pluginOrchWithoutProxyRewrite': '当步骤一中 配置了 请求改写时，不可使用插件编排模式。',
-  'page.route.tooltip.pluginOrchWithoutRedirect': '当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。',
+  'page.route.tooltip.pluginOrchWithoutProxyRewrite':
+    '当步骤一中 配置了 请求改写时，不可使用插件编排模式。',
+  'page.route.tooltip.pluginOrchWithoutRedirect':
+    '当步骤一中 重定向 选择为 启用 HTTPS 时，不可使用插件编排模式。',
 
   'page.route.tabs.normalMode': '普通模式',
   'page.route.tabs.orchestration': '编排模式',
 
-  'page.route.list.description': '路由（Route）是请求的入口点，它定义了客户端请求与服务之间的匹配规则。路由可以与服务（Service）、上游（Upstream）关联，一个服务可对应一组路由，一个路由可以对应一个上游对象（一组后端服务节点），因此，每个匹配到路由的请求将被网关代理到路由绑定的上游服务中。',
+  'page.route.list.description':
+    '路由（Route）是请求的入口点，它定义了客户端请求与服务之间的匹配规则。路由可以与服务（Service）、上游（Upstream）关联，一个服务可对应一组路由，一个路由可以对应一个上游对象（一组后端服务节点），因此，每个匹配到路由的请求将被网关代理到路由绑定的上游服务中。',
 
   'page.route.configuration.name.rules.required.description': '请输入路由名称',
   'page.route.configuration.name.placeholder': '请输入路由名称',
@@ -170,7 +176,8 @@ export default {
   'page.route.advanced-match.operator.sample.~~': '请输入正则表达式，示例：[a-z]+',
   'page.route.fields.service_id.invalid': '请检查路由绑定的服务',
   'page.route.fields.service_id.without-upstream': '如果不绑定服务，则必须设置上游服务（步骤 2）',
-  'page.route.advanced-match.tooltip': '支持通过请求头，请求参数、Cookie 进行路由匹配，可应用于灰度发布，蓝绿测试等场景。',
+  'page.route.advanced-match.tooltip':
+    '支持通过请求头，请求参数、Cookie 进行路由匹配，可应用于灰度发布，蓝绿测试等场景。',
 
   'page.route.fields.custom.redirectOption.tooltip': '在此配置 redirect 插件',
   'page.route.fields.service_id.tooltip': '绑定服务（Service）对象，以便复用其中的配置。',
diff --git a/web/src/pages/Route/typing.d.ts b/web/src/pages/Route/typing.d.ts
index 3245c7aaa7..7ff75c575d 100644
--- a/web/src/pages/Route/typing.d.ts
+++ b/web/src/pages/Route/typing.d.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 declare namespace RouteModule {
-  type Operator = '==' | '~=' | '>' | '<' | '~~' | 'IN';
+  type Operator = '==' | '~=' | '>' | '<' | '~~' | '~*' | 'IN' | 'HAS' | '!';
 
   type VarPosition = 'arg' | 'http' | 'cookie';
 
@@ -36,7 +36,7 @@ declare namespace RouteModule {
     plugins: PluginPage.PluginData;
     //  TEMP
     script: any;
-    plugin_config_id?: string
+    plugin_config_id?: string;
   };
 
   type UpstreamHost = {
@@ -130,7 +130,7 @@ declare namespace RouteModule {
   type Kvobject = {
     key: string;
     value: string;
-  }
+  };
   type ProxyRewrite = {
     scheme?: 'keep' | 'http' | 'https';
     uri?: string;
@@ -138,7 +138,7 @@ declare namespace RouteModule {
     host?: string;
     kvHeaders?: Kvobject[];
     headers?: Record<string, string>;
-  }
+  };
 
   type AdvancedMatchingRules = {
     advancedMatchingRules: MatchingRule[];
@@ -217,12 +217,12 @@ declare namespace RouteModule {
     header_params?: any;
   };
 
-  type debugResponse ={
-    code: number,
-    message: string,
-    data: any,
-    header: Record<string, string[]>
-  }
+  type debugResponse = {
+    code: number;
+    message: string;
+    data: any;
+    header: Record<string, string[]>;
+  };
 
   type authData = {
     authType: string;

From fac0d6ce592a5439e9be221d6496af0252527f8f Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Sun, 1 Aug 2021 23:37:22 -0500
Subject: [PATCH 2/7] Update
 web/src/pages/Route/components/Step1/MatchingRulesView.tsx

Co-authored-by: liuxiran <liuxiran@apache.org>
---
 web/src/pages/Route/components/Step1/MatchingRulesView.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index d09e401867..56e48b18e9 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -275,10 +275,6 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
                     );
                     break;
                   case '~~':
-                    setOperatorValueSample(
-                      formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }),
-                    );
-                    break;
                   case '~*':
                     setOperatorValueSample(
                       formatMessage({ id: 'page.route.advanced-match.operator.sample.~~' }),

From a626a9e001cf14d0234a09edfd7169c422556f80 Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Mon, 2 Aug 2021 15:47:27 +0800
Subject: [PATCH 3/7] create OperatorRenderText

---
 .../components/Step1/MatchingRulesView.tsx    | 65 ++++++-------------
 1 file changed, 19 insertions(+), 46 deletions(-)

diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index 56e48b18e9..b0f9fc4354 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -88,6 +88,18 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     });
   };
 
+  const OperatorRenderText = {
+    '==': 'page.route.equal',
+    '~=': 'page.route.unequal',
+    '>': 'page.route.greaterThan',
+    '<': 'page.route.lessThan',
+    '~~': 'page.route.regexMatch',
+    '~*': 'page.route.caseInsensitiveRegexMatch',
+    IN: 'page.route.in',
+    HAS: 'page.route.has',
+    '!': 'page.route.reverse',
+  };
+
   const columns = [
     {
       title: formatMessage({ id: 'page.route.parameterPosition' }),
@@ -118,41 +130,8 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     {
       title: formatMessage({ id: 'page.route.operationalCharacter' }),
       key: 'operator',
-      render: (text: RouteModule.MatchingRule) => {
-        let renderText;
-        switch (text.operator) {
-          case '==':
-            renderText = formatMessage({ id: 'page.route.equal' });
-            break;
-          case '~=':
-            renderText = formatMessage({ id: 'page.route.unequal' });
-            break;
-          case '>':
-            renderText = formatMessage({ id: 'page.route.greaterThan' });
-            break;
-          case '<':
-            renderText = formatMessage({ id: 'page.route.lessThan' });
-            break;
-          case '~~':
-            renderText = formatMessage({ id: 'page.route.regexMatch' });
-            break;
-          case '~*':
-            renderText = formatMessage({ id: 'page.royte.caseInsensitiveRegexMatch' });
-            break;
-          case 'IN':
-            renderText = formatMessage({ id: 'page.route.in' });
-            break;
-          case 'HAS':
-            renderText = formatMessage({ id: 'page.route.has' });
-            break;
-          case '!':
-            renderText = formatMessage({ id: 'page.route.reverse' });
-            break;
-          default:
-            renderText = '';
-        }
-        return renderText;
-      },
+      render: (text: RouteModule.MatchingRule) =>
+        formatMessage({ id: OperatorRenderText[text.operator] }),
     },
     {
       title: formatMessage({ id: 'page.route.value' }),
@@ -285,17 +264,11 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
                 }
               }}
             >
-              <Option value="==">{formatMessage({ id: 'page.route.equal' })}</Option>
-              <Option value="~=">{formatMessage({ id: 'page.route.unequal' })}</Option>
-              <Option value=">">{formatMessage({ id: 'page.route.greaterThan' })}</Option>
-              <Option value="<">{formatMessage({ id: 'page.route.lessThan' })}</Option>
-              <Option value="~~">{formatMessage({ id: 'page.route.regexMatch' })}</Option>
-              <Option value="~*">
-                {formatMessage({ id: 'page.route.caseInsensitiveRegexMatch' })}
-              </Option>
-              <Option value="IN">{formatMessage({ id: 'page.route.in' })}</Option>
-              <Option value="HAS">{formatMessage({ id: 'page.route.has' })}</Option>
-              <Option value="!">{formatMessage({ id: 'page.route.reverse' })}</Option>
+              {Object.keys(OperatorRenderText).map((item) => (
+                <Option value={item} key={item}>
+                  {formatMessage({ id: OperatorRenderText[item] })}
+                </Option>
+              ))}
             </Select>
           </Form.Item>
           <Form.Item

From ef5387e5e323d4260f0d1c4345fa0b93239aeba1 Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Tue, 3 Aug 2021 22:05:47 +0800
Subject: [PATCH 4/7] feat: add test part

---
 ...create-edit-duplicate-delete-route.spec.js | 56 +++++++++++++------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
index 87e3cbfcb8..c93ea9f87d 100644
--- a/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
+++ b/web/cypress/integration/route/create-edit-duplicate-delete-route.spec.js
@@ -47,14 +47,14 @@ context('Create and Delete Route', () => {
     selectJSON: '.ant-select-dropdown [label=JSON]',
     drawerFooter: '.ant-drawer-footer',
     nameSelector: '[title=Name]',
-    monacoScroll: ".monaco-scrollable-element",
+    monacoScroll: '.monaco-scrollable-element',
     deleteAlert: '.ant-modal-body',
     notificationCloseIcon: '.ant-notification-close-icon',
     notification: '.ant-notification-notice-message',
     addHost: '[data-cy=addHost]',
-    schemaErrorMessage: ".ant-form-item-explain.ant-form-item-explain-error",
-    advancedMatchingTable: ".ant-table-row.ant-table-row-level-0",
-    advancedMatchingTableOperation: ".ant-space"
+    schemaErrorMessage: '.ant-form-item-explain.ant-form-item-explain-error',
+    advancedMatchingTable: '.ant-table-row.ant-table-row-level-0',
+    advancedMatchingTableOperation: '.ant-space',
   };
 
   const data = {
@@ -72,6 +72,13 @@ context('Create and Delete Route', () => {
     deleteRouteSuccess: 'Delete Route Successfully',
   };
 
+  const opreatorList = [
+    'Equal(==)',
+    'Case insensitive regular match(~*)',
+    'HAS',
+    'Reverse the result(!)',
+  ];
+
   beforeEach(() => {
     cy.login();
   });
@@ -92,18 +99,31 @@ context('Create and Delete Route', () => {
     cy.get(selector.remoteHost).type(data.host2);
     cy.get(selector.remoteAddress).click();
     cy.get(selector.address1).type(data.host3);
-    cy.contains('Advanced Routing Matching Conditions').parent().siblings().contains('Add').click();
 
-    // create advanced routing matching conditions
-    cy.get(selector.parameterPosition).click();
-    cy.contains('Cookie').click();
-    cy.get(selector.ruleCard).within(() => {
-      cy.get(selector.name).type('modalName');
+    // All Of Operational Character Should Exist And Can be Created
+    cy.wrap(opreatorList).each((opreator) => {
+      cy.contains('Advanced Routing Matching Conditions')
+        .parent()
+        .siblings()
+        .contains('Add')
+        .click()
+        .then(() => {
+          cy.get(selector.parameterPosition)
+            .click()
+            .then(() => {
+              cy.get('.ant-select-dropdown').within(() => {
+                cy.contains('Cookie').should('be.visible').click();
+              });
+            });
+          cy.get(selector.ruleCard).within(() => {
+            cy.get(selector.name).type('modalName');
+          });
+          cy.get(selector.operator).click();
+          cy.get(`[title="${opreator}"]`).should('be.visible').click();
+          cy.get(selector.value).type('value');
+          cy.contains('Confirm').click();
+        });
     });
-    cy.get(selector.operator).click();
-    cy.get('[title="Equal(==)"]').should('be.visible').click();
-    cy.get(selector.value).type('value');
-    cy.contains('Confirm').click();
 
     cy.contains('Next').click();
     cy.get(selector.nodes_0_host).type(data.host4);
@@ -183,7 +203,7 @@ context('Create and Delete Route', () => {
 
     cy.get(selector.monacoScroll).within(() => {
       cy.contains('upstream').should('exist');
-      cy.contains('vars').should('exist')
+      cy.contains('vars').should('exist');
       cy.contains(name).should('exist');
     });
   });
@@ -201,8 +221,10 @@ context('Create and Delete Route', () => {
     cy.get(selector.name).clear().type(newName);
     cy.get(selector.description).clear().type(data.description2);
     cy.get(selector.advancedMatchingTable).should('exist');
-    cy.get(selector.advancedMatchingTableOperation).within(() => {
-      cy.contains('Delete').click().should('not.exist');
+    cy.wrap(opreatorList).each(() => {
+      cy.get(selector.advancedMatchingTableOperation).within(() => {
+        cy.contains('Delete').click().should('not.exist');
+      });
     });
 
     cy.contains('Next').click();

From 6df0dc908ce37f1e2dd7fb5b6f055b31d7c1ec1b Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Tue, 3 Aug 2021 22:13:45 +0800
Subject: [PATCH 5/7] fix: resolve review

---
 .../components/Step1/MatchingRulesView.tsx    | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
index b0f9fc4354..ad55b39863 100644
--- a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
+++ b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -89,15 +89,15 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   };
 
   const OperatorRenderText = {
-    '==': 'page.route.equal',
-    '~=': 'page.route.unequal',
-    '>': 'page.route.greaterThan',
-    '<': 'page.route.lessThan',
-    '~~': 'page.route.regexMatch',
-    '~*': 'page.route.caseInsensitiveRegexMatch',
-    IN: 'page.route.in',
-    HAS: 'page.route.has',
-    '!': 'page.route.reverse',
+    '==': formatMessage({ id: 'page.route.equal' }),
+    '~=': formatMessage({ id: 'page.route.unequal' }),
+    '>': formatMessage({ id: 'page.route.greaterThan' }),
+    '<': formatMessage({ id: 'page.route.lessThan' }),
+    '~~': formatMessage({ id: 'page.route.regexMatch' }),
+    '~*': formatMessage({ id: 'page.route.caseInsensitiveRegexMatch' }),
+    IN: formatMessage({ id: 'page.route.in' }),
+    HAS: formatMessage({ id: 'page.route.has' }),
+    '!': formatMessage({ id: 'page.route.reverse' }),
   };
 
   const columns = [
@@ -130,8 +130,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     {
       title: formatMessage({ id: 'page.route.operationalCharacter' }),
       key: 'operator',
-      render: (text: RouteModule.MatchingRule) =>
-        formatMessage({ id: OperatorRenderText[text.operator] }),
+      render: (text: RouteModule.MatchingRule) => OperatorRenderText[text.operator],
     },
     {
       title: formatMessage({ id: 'page.route.value' }),
@@ -266,7 +265,7 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
             >
               {Object.keys(OperatorRenderText).map((item) => (
                 <Option value={item} key={item}>
-                  {formatMessage({ id: OperatorRenderText[item] })}
+                  {OperatorRenderText[item]}
                 </Option>
               ))}
             </Select>

From 24b476e013cfb5e1fb0720b52160a7caaa1d48ea Mon Sep 17 00:00:00 2001
From: Baoyuan <baoyuan.top@gmail.com>
Date: Fri, 6 Aug 2021 14:56:27 +0800
Subject: [PATCH 6/7] fix: change test part

---
 .../upstream/create_and_edit_upstream_with_no_nodes.spec.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/cypress/integration/upstream/create_and_edit_upstream_with_no_nodes.spec.js b/web/cypress/integration/upstream/create_and_edit_upstream_with_no_nodes.spec.js
index e65e7fbd42..ce15556790 100644
--- a/web/cypress/integration/upstream/create_and_edit_upstream_with_no_nodes.spec.js
+++ b/web/cypress/integration/upstream/create_and_edit_upstream_with_no_nodes.spec.js
@@ -63,7 +63,7 @@ context('Create and Delete Upstream', () => {
     cy.contains(data.upstreamName).siblings().contains('Configure').click();
 
     cy.get(selector.upstreamNodeMinus0).should('not.exist');
-    cy.contains('Next').click();
+    cy.contains('button', 'Next').should('not.be.disabled').click();
     cy.contains('Submit').click({
       force: true,
     });

From 48591b92f8f8545f26ebf0a28fba904bfadb302e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=90=9A=E8=87=B4=E8=BF=9C?= <juzhiyuan@apache.org>
Date: Fri, 6 Aug 2021 21:24:37 +0800
Subject: [PATCH 7/7] Update web/src/pages/Route/locales/zh-CN.ts

---
 web/src/pages/Route/locales/zh-CN.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Route/locales/zh-CN.ts b/web/src/pages/Route/locales/zh-CN.ts
index b1d7f18f71..0d520be334 100644
--- a/web/src/pages/Route/locales/zh-CN.ts
+++ b/web/src/pages/Route/locales/zh-CN.ts
@@ -26,7 +26,7 @@ export default {
   'page.route.greaterThan': '大于（>）',
   'page.route.lessThan': '小于（<）',
   'page.route.regexMatch': '正则匹配（～～）',
-  'page.route.caseInsensitiveRegexMatch': '不区分大小写的正则匹配(~*)',
+  'page.route.caseInsensitiveRegexMatch': '不区分大小写的正则匹配（~*）',
   'page.route.in': 'IN',
   'page.route.has': 'HAS',
   'page.route.reverse': '非(!)',