fix: ! (reverse) operator not handled correctly (#2364)

Author: SkyeYoung

web/cypress/integration/route/create-route-with-advanced-matching-conditions.spec.js

@@ -26,6 +26,7 @@ context('Create Route with advanced matching conditions', () => {
     notification: '.ant-notification-notice-message',
     parameterPosition: '#position',
     ruleCard: '.ant-modal',
+    reverse: '#reverse',
     operator: '#operator',
     value: '#value',
     advancedMatchingTable: '.ant-table-row.ant-table-row-level-0',
@@ -84,6 +85,14 @@ context('Create Route with advanced matching conditions', () => {
           cy.get(selector.ruleCard).within(() => {
             cy.get(selector.name).type(data.matchingParamName);
           });
+          // reverse switch should exist
+          cy.get(selector.reverse)
+            .should('exist')
+            .and('be.visible')
+            .should('have.class', 'ant-switch')
+            .and('not.have.class', 'ant-switch-checked')
+            .click()
+            .and('have.class', 'ant-switch-checked');
           cy.get(selector.operator).click();
           cy.get(`[title="${opreator}"]`).should('be.visible').click();
           cy.get(selector.value).type(matchingValueList1[index]);
@@ -93,6 +102,7 @@ context('Create Route with advanced matching conditions', () => {
     cy.get(selector.advancedMatchingTable).should('exist');
     cy.wrap(opreatorList).each((operator, index) => {
       cy.get(selector.advancedMatchingTableCell).within(() => {
+        cy.contains('th', 'Reverse the result(!)').should('be.visible');
         cy.contains('td', 'Built-in Parameter').should('be.visible');
         cy.contains('td', data.matchingParamName).should('be.visible');
         cy.contains('td', matchingValueList1[index]).should('be.visible');
@@ -129,11 +139,13 @@ context('Create Route with advanced matching conditions', () => {
       cy.get(selector.ruleCard).within(() => {
         cy.get(`[title="Built-in Parameter"]`).should('have.class', 'ant-select-selection-item');
         cy.get(selector.name).clear().type(data.matchingParamName);
+        cy.get(selector.reverse).should('have.class', 'ant-switch-checked');
         cy.get(`[title="${opreator}"]`).should('have.class', 'ant-select-selection-item');
         cy.get(selector.value).clear().type(matchingValueList2[index]);
         cy.contains('Confirm').click();
       });
       cy.get(selector.advancedMatchingTableCell).within(() => {
+        cy.contains('th', 'Reverse the result(!)').should('be.visible');
         cy.contains('td', 'Built-in Parameter').should('be.visible');
         cy.contains('td', data.matchingParamName).should('be.visible');
         cy.contains('td', matchingValueList2[index]).should('be.visible');

web/src/pages/Route/components/Step1/MatchingRulesView.tsx

@@ -15,7 +15,18 @@
  * limitations under the License.
  */
 import React, { useState } from 'react';
-import { Button, Table, Modal, Form, Select, Input, Space, notification, Typography } from 'antd';
+import {
+  Button,
+  Table,
+  Modal,
+  Form,
+  Select,
+  Input,
+  Space,
+  notification,
+  Typography,
+  Switch,
+} from 'antd';
 import { useIntl } from 'umi';
 
 import PanelSection from '@/components/PanelSection';
@@ -99,7 +110,6 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
     '~*': formatMessage({ id: 'page.route.caseInsensitiveRegexMatch' }),
     IN: formatMessage({ id: 'page.route.in' }),
     HAS: formatMessage({ id: 'page.route.has' }),
-    '!': formatMessage({ id: 'page.route.reverse' }),
   };
 
   const columns = [
@@ -135,6 +145,11 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
       dataIndex: 'name',
       key: 'name',
     },
+    {
+      title: formatMessage({ id: 'page.route.reverse' }),
+      key: 'reverse',
+      render: (text: RouteModule.MatchingRule) => text.reverse.toString(),
+    },
     {
       title: formatMessage({ id: 'page.route.operationalCharacter' }),
       key: 'operator',
@@ -244,6 +259,14 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
           >
             <Input />
           </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'page.route.reverse' })}
+            name={'reverse'}
+            valuePropName={'checked'}
+            required
+          >
+            <Switch />
+          </Form.Item>
           <Form.Item
             label={formatMessage({ id: 'page.route.operationalCharacter' })}
             name="operator"

web/src/pages/Route/transform.ts

@@ -153,8 +153,8 @@ export const transformStepData = ({
     labels,
     ...step3DataCloned,
     vars: advancedMatchingRules.map((rule) => {
-      const { operator, position, name, value } = rule;
-      let key = '';
+      const { reverse, operator, position, name, value } = rule;
+      let key: string;
       switch (position) {
         case 'cookie':
           key = `cookie_${name}`;
@@ -175,7 +175,7 @@ export const transformStepData = ({
       if (operator === 'IN') {
         finalValue = JSON.parse(value as string);
       }
-      return [key, operator, finalValue];
+      return reverse ? [key, '!', operator, finalValue] : [key, operator, finalValue];
     }),
     // @ts-ignore
     methods: form1Data.methods.includes('ALL') ? [] : form1Data.methods,
@@ -274,12 +274,15 @@ export const transformStepData = ({
   ]);
 };
 
-const transformVarsToRules = (
-  data: [string, RouteModule.Operator, string | any[]][] = [],
-): RouteModule.MatchingRule[] =>
-  data.map(([key, operator, value]) => {
-    let position = '';
-    let name = '';
+const transformVarsToRules = (data: RouteModule.VarTuple[] = []): RouteModule.MatchingRule[] =>
+  data.map((varTuple) => {
+    const key = varTuple[0];
+    const reverse = varTuple[1] === '!';
+    const operator = varTuple[1] === '!' ? varTuple[2] : varTuple[1];
+    const value = varTuple[varTuple.length - 1];
+
+    let position: string;
+    let name: string;
     const regex = new RegExp('^(cookie|http|arg|post_arg)_.+');
     if (regex.test(key)) {
       [, position, name] = key.split(/^(cookie|http|arg|post_arg)_/);
@@ -291,6 +294,7 @@ const transformVarsToRules = (
       position: position as RouteModule.VarPosition,
       name,
       value: typeof value === 'object' ? JSON.stringify(value) : value,
+      reverse,
       operator,
       key: Math.random().toString(36).slice(2),
     };

web/src/pages/Route/typing.d.ts

@@ -15,7 +15,13 @@
  * limitations under the License.
  */
 declare namespace RouteModule {
-  type Operator = '==' | '~=' | '>' | '<' | '~~' | '~*' | 'IN' | 'HAS' | '!';
+  type OperatorNot = '!';
+
+  type Operator = '==' | '~=' | '>' | '<' | '~~' | '~*' | 'IN' | 'HAS';
+
+  type VarTuple =
+    | [string, RouteModule.Operator, string | any[]]
+    | [string, RouteModule.OperatorNot, RouteModule.Operator, string | any[]];
 
   type VarPosition = 'arg' | 'post_arg' | 'http' | 'cookie' | 'buildin';
 
@@ -75,7 +81,7 @@ declare namespace RouteModule {
     remote_addr?: string;
     remote_addrs?: string[];
     upstream: UpstreamComponent.ResponseData;
-    vars: [string, Operator, string | any[]][];
+    vars: VarTuple[];
     upstream_path?: {
       type?: string;
       from?: string;
@@ -93,6 +99,7 @@ declare namespace RouteModule {
   type MatchingRule = {
     position: VarPosition;
     name: string;
+    reverse: boolean;
     operator: Operator;
     value: string | any[];
     key: string;