feat: added sample for vars in Route & improve Typings (#1771)

apache · Apr 15, 2021 · 1e2e0b7 · 1e2e0b7
1 parent 068f064
commit 1e2e0b7
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 141 deletions.
diff --git a/web/cypress/fixtures/export-route-dataset.json b/web/cypress/fixtures/export-route-dataset.json
@@ -8,8 +8,8 @@
     "openapi": "3.0.0",
     "paths": {
       "/{params}": {
-        "get": {
-          "operationId": "route_name_0GET",
+        "post": {
+          "operationId": "route_name_0POST",
           "parameters": [
             {
               "description": "params in path",
@@ -60,8 +60,8 @@
     "openapi": "3.0.0",
     "paths": {
       "/{params}": {
-        "get": {
-          "operationId": "route_name_0GET",
+        "post": {
+          "operationId": "route_name_0POST",
           "parameters": [
             {
               "description": "params in path",
@@ -102,8 +102,8 @@
         }
       },
       "/{params}-APISIX-REPEAT-URI-2": {
-        "get": {
-          "operationId": "route_name_1GET",
+        "post": {
+          "operationId": "route_name_1POST",
           "parameters": [
             {
               "description": "params in path",

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
@@ -59,7 +59,7 @@ context('Create and Delete Route', () => {
       cy.get(this.domSelector.name).type('modalName');
     });
     cy.get(this.domSelector.operator).click();
-    cy.get('[title=Equal]').should('be.visible').click();
+    cy.get('[title="Equal(==)"]').should('be.visible').click();
     cy.get(this.domSelector.value).type('value');
     cy.contains('Confirm').click();
 

diff --git a/web/cypress/integration/route/online-debug.spec.js b/web/cypress/integration/route/online-debug.spec.js
@@ -160,7 +160,7 @@ context('Online debug', () => {
 
     // change request method POST
     cy.get(domSelector.deubugMethod).click();
-    cy.contains('POST').click();
+    cy.get('[title=POST]').click();
 
     // change request protocol http
     cy.get(domSelector.debugProtocol).click();
@@ -253,7 +253,7 @@ context('Online debug', () => {
 
     // change request method POST
     cy.get(domSelector.deubugMethod).click();
-    cy.contains('POST').click();
+    cy.get('[title=POST]').click();
 
     // change request protocol http
     cy.get(domSelector.debugProtocol).click();

diff --git a/web/src/pages/Route/components/Step1/MatchingRulesView.tsx b/web/src/pages/Route/components/Step1/MatchingRulesView.tsx
@@ -29,6 +29,8 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
   const [namePlaceholder, setNamePlaceholder] = useState('');
   const [modalForm] = Form.useForm();
 
+  const [operatorValueSample, setOperatorValueSample] = useState("")
+
   const { Option } = Select;
 
   const { formatMessage } = useIntl();
@@ -154,114 +156,128 @@ const MatchingRulesView: React.FC<RouteModule.Step1PassProps> = ({
       },
   ].filter((item) => Object.keys(item).length);
 
-  const renderModal = () => (
-    <Modal
-      title={`${mode === 'EDIT'
-          ? formatMessage({ id: 'component.global.edit' })
-          : formatMessage({ id: 'component.global.create' })
-        } ${formatMessage({ id: 'page.route.rule' })}`}
-      centered
-      visible
-      onOk={onOk}
-      onCancel={() => {
-        setVisible(false);
-        modalForm.resetFields();
-      }}
-      okText={formatMessage({ id: 'component.global.confirm' })}
-      cancelText={formatMessage({ id: 'component.global.cancel' })}
-      maskClosable={false}
-      destroyOnClose
-    >
-      <Form form={modalForm} layout="vertical">
-        <Form.Item
-          label={formatMessage({ id: 'page.route.parameterPosition' })}
-          name="position"
-          rules={[
-            {
-              required: true,
-              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
-                id: 'page.route.parameterPosition',
-              })}`,
-            },
-          ]}
-        >
-          <Select
-            onChange={(value) => {
-              if (value === 'http') {
-                setNamePlaceholder(
-                  formatMessage({ id: 'page.route.input.placeholder.parameterNameHttpHeader' }),
-                );
-              } else {
-                setNamePlaceholder(
-                  formatMessage({
-                    id: 'page.route.input.placeholder.parameterNameRequestParameter',
-                  }),
-                );
+  const renderModal = () => {
+    return (
+      <Modal
+        title={mode === 'EDIT'
+          ? formatMessage({ id: 'page.route.rule.edit' })
+          : formatMessage({ id: 'page.route.rule.create' })}
+        centered
+        visible
+        onOk={onOk}
+        onCancel={() => {
+          setVisible(false);
+          modalForm.resetFields();
+        }}
+        okText={formatMessage({ id: 'component.global.confirm' })}
+        cancelText={formatMessage({ id: 'component.global.cancel' })}
+        maskClosable={false}
+        destroyOnClose
+      >
+        <Form form={modalForm} layout="vertical">
+          <Form.Item
+            label={formatMessage({ id: 'page.route.parameterPosition' })}
+            name="position"
+            rules={[
+              {
+                required: true,
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'page.route.parameterPosition',
+                })}`,
+              },
+            ]}
+          >
+            <Select
+              onChange={(value) => {
+                if (value === 'http') {
+                  setNamePlaceholder(
+                    formatMessage({ id: 'page.route.input.placeholder.parameterNameHttpHeader' }),
+                  );
+                } else {
+                  setNamePlaceholder(
+                    formatMessage({
+                      id: 'page.route.input.placeholder.parameterNameRequestParameter',
+                    }),
+                  );
+                }
+              }}
+            >
+              <Option value="http">{formatMessage({ id: 'page.route.httpRequestHeader' })}</Option>
+              <Option value="arg">{formatMessage({ id: 'page.route.requestParameter' })}</Option>
+              <Option value="cookie">Cookie</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'page.route.parameterName' })}
+            name="name"
+            rules={[
+              {
+                required: true,
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'page.route.parameterName',
+                })}`,
+              },
+              {
+                pattern: new RegExp(/^([a-zA-Z][a-zA-Z0-9_-]*$)/, 'g'),
+                message: formatMessage({ id: 'component.global.input.ruleMessage.name' }),
+              },
+            ]}
+            tooltip={formatMessage({ id: 'page.route.form.itemRulesRequiredMessage.parameterName' })}
+            extra={namePlaceholder}
+          >
+            <Input />
+          </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'page.route.operationalCharacter' })}
+            name="operator"
+            rules={[
+              {
+                required: true,
+                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("")
               }
-            }}
+            }}>
+              <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="IN">{formatMessage({ id: 'page.route.in' })}</Option>
+            </Select>
+          </Form.Item>
+          <Form.Item
+            label={formatMessage({ id: 'page.route.value' })}
+            name="value"
+            rules={[
+              {
+                required: true,
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
+                  id: 'page.route.value',
+                })}`,
+              },
+            ]}
+            extra={operatorValueSample}
           >
-            <Option value="http">{formatMessage({ id: 'page.route.httpRequestHeader' })}</Option>
-            <Option value="arg">{formatMessage({ id: 'page.route.requestParameter' })}</Option>
-            <Option value="cookie">Cookie</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          label={formatMessage({ id: 'page.route.parameterName' })}
-          name="name"
-          rules={[
-            {
-              required: true,
-              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
-                id: 'page.route.parameterName',
-              })}`,
-            },
-            {
-              pattern: new RegExp(/^([a-zA-Z][a-zA-Z0-9_-]*$)/, 'g'),
-              message: formatMessage({ id: 'component.global.input.ruleMessage.name' }),
-            },
-          ]}
-          extra={formatMessage({ id: 'page.route.form.itemRulesRequiredMessage.parameterName' })}
-        >
-          <Input placeholder={namePlaceholder} />
-        </Form.Item>
-        <Form.Item
-          label={formatMessage({ id: 'page.route.operationalCharacter' })}
-          name="operator"
-          rules={[
-            {
-              required: true,
-              message: `${formatMessage({ id: 'component.global.pleaseChoose' })} ${formatMessage({
-                id: 'page.route.operationalCharacter',
-              })}`,
-            },
-          ]}
-        >
-          <Select>
-            <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="IN">{formatMessage({ id: 'page.route.in' })}</Option>
-          </Select>
-        </Form.Item>
-        <Form.Item
-          label={formatMessage({ id: 'page.route.value' })}
-          name="value"
-          rules={[
-            {
-              required: true,
-              message: `${formatMessage({ id: 'component.global.pleaseEnter' })} ${formatMessage({
-                id: 'page.route.value',
-              })}`,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  };
 
   return (
     <PanelSection title={formatMessage({ id: 'page.route.panelSection.title.advancedMatchRule' })}>

diff --git a/web/src/pages/Route/constants.ts b/web/src/pages/Route/constants.ts
@@ -15,13 +15,8 @@
  * limitations under the License.
  */
 export const HTTP_METHOD_OPTION_LIST: HttpMethod[] = [
-  'GET',
-  'HEAD',
-  'POST',
-  'PUT',
-  'DELETE',
-  'OPTIONS',
-  'PATCH',
+  "GET", "POST", "PUT", "DELETE", "PATCH", "HEAD",
+  "OPTIONS", "CONNECT", "TRACE"
 ];
 
 export const FORM_ITEM_LAYOUT = {

diff --git a/web/src/pages/Route/locales/en-US.ts b/web/src/pages/Route/locales/en-US.ts
@@ -25,11 +25,11 @@ export default {
   'page.route.requestParameter': 'Request Parameter',
   'page.route.parameterName': 'Parameter Name',
   'page.route.operationalCharacter': 'Operational Character',
-  'page.route.equal': 'Equal',
-  'page.route.unequal': 'Unequal',
-  'page.route.greaterThan': 'Greater Than',
-  'page.route.lessThan': 'Less Than',
-  'page.route.regexMatch': 'Regex Match',
+  'page.route.equal': 'Equal(==)',
+  'page.route.unequal': 'Unequal(~=)',
+  'page.route.greaterThan': 'Greater Than(>)',
+  'page.route.lessThan': 'Less Than(<)',
+  'page.route.regexMatch': 'Regex Match(~~)',
   'page.route.in': 'IN',
   'page.route.rule': 'Rule',
   'page.route.httpHeaderName': 'HTTP Request Header Name',
@@ -165,4 +165,10 @@ export default {
   'page.route.configuration.host.placeholder': 'Please enter the HTTP request hostname',
 
   'page.route.service.none': 'None',
+
+  'page.route.rule.create': 'Create Rule',
+  'page.route.rule.edit': 'Configure Rule',
+
+  '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]+',
 };
diff --git a/web/src/pages/Route/locales/zh-CN.ts b/web/src/pages/Route/locales/zh-CN.ts
@@ -21,11 +21,11 @@ export default {
   'page.route.requestParameter': '请求参数',
   'page.route.parameterName': '参数名称',
   'page.route.operationalCharacter': '运算符',
-  'page.route.equal': '等于',
-  'page.route.unequal': '不等于',
-  'page.route.greaterThan': '大于',
-  'page.route.lessThan': '小于',
-  'page.route.regexMatch': '正则匹配',
+  'page.route.equal': '等于（==）',
+  'page.route.unequal': '不等于（~=）',
+  'page.route.greaterThan': '大于（>）',
+  'page.route.lessThan': '小于（<）',
+  'page.route.regexMatch': '正则匹配（～～）',
   'page.route.in': 'IN',
   'page.route.rule': '规则',
   'page.route.host': '域名',
@@ -52,7 +52,7 @@ export default {
   'page.route.button.send': '发送请求',
 
   // input
-  'page.route.input.placeholder.parameterNameHttpHeader': '请求头键名，例如：HOST',
+  'page.route.input.placeholder.parameterNameHttpHeader': '请求头名称，例如：HOST',
   'page.route.input.placeholder.parameterNameRequestParameter': '参数名称，例如：id',
   'page.route.input.placeholder.redirectCustom': '例如：/foo/index.html',
   'page.route.input.placeholder.requestUrl': '请输入合法的请求地址',
@@ -164,4 +164,10 @@ export default {
   'page.route.configuration.host.placeholder': '请输入 HTTP 请求域名',
 
   'page.route.service.none': '不绑定服务',
+
+  'page.route.rule.create': '创建规则',
+  'page.route.rule.edit': '编辑规则',
+
+  'page.route.advanced-match.operator.sample.IN': '请输入数组，示例：["1", "2"]',
+  'page.route.advanced-match.operator.sample.~~': '请输入正则表达式，示例：[a-z]+',
 };
diff --git a/web/src/pages/Route/service.ts b/web/src/pages/Route/service.ts
@@ -106,7 +106,7 @@ export const updateRouteStatus = (rid: string, status: RouteModule.RouteStatus)
     data: { status },
   });
 
-export const debugRoute = (headers, data: RouteModule.debugRequest) => {
+export const debugRoute = (headers: any, data: RouteModule.debugRequest) => {
   return request('/debug-request-forwarding', {
     method: 'post',
     data,