Merge branch 'master' into errorCheckIds

docs/USER_GUIDE.md

@@ -47,6 +47,34 @@ The Route module aims to control routes by UI instead of calling APIs.
 
 ![route-create-done-list-en](./images/route-create-done-list-en.png)
 
+### Online debug
+
+We can debug a route both published or offline with the online debug function, which is located in the routes list page.
+
+1. Debug a published route
+
+![route-debug-published](./images/route-debug-published.png)
+
+2. Debug a offline route
+
+![route-debug-offline](./images/route-debug-offline.png)
+
+3. Debug a published route with query params
+
+![route-debug-query-params](./images/route-debug-query-params.png)
+
+4. Debug a published route with header params
+
+![route-debug-header-params](./images/route-debug-header-params.png)
+
+5. Debug a published route with body params
+
+![route-debug-body-params](./images/route-debug-body-params.png)
+
+6. Debug a published route with basic auth
+
+![route-debug-basic-auth](./images/route-debug-basic-auth.png)
+
 ## Setting
 
 ![setting](./images/setting-en.png)

web/cypress/integration/consumer/create_and_delete_consumer.spec.js

@@ -0,0 +1,99 @@
+/*
+ * 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.
+ */
+/* eslint-disable no-undef */
+
+context('Create and Delete Consumer', () => {
+  const name = `consumerName${new Date().valueOf()}`;
+  const sleepTime = 100;
+  const domSelectors = {
+    notification: '.ant-notification-notice-message',
+    pluginsCard: '.ant-card'
+  };
+
+  beforeEach(() => {
+    // init login 
+    cy.login();
+  })
+
+  it('creates consumer with key-auth', () => {
+    // go to consumer create page
+    cy.visit('/');
+    cy.contains('Consumer').click();
+    cy.wait(sleepTime * 5);
+    cy.contains('Create').click();
+
+    // Basic Information
+    cy.get('#username').type(name);
+    cy.get('#desc').type('desc_by_autotest');
+    cy.contains('Next').click();
+    cy.wait(sleepTime * 3);
+
+    // Plugin Config
+    cy.contains(domSelectors.pluginsCard, 'key-auth').within(() => {
+      cy.get('button').first().click();
+    })
+    // edit CodeMirror
+    cy.get('.CodeMirror')
+      .first()
+      .then((editor) => {
+        editor[0].CodeMirror.setValue(JSON.stringify({
+          "key": "test"
+        }));
+        cy.contains('button', 'Submit').click();
+      });
+    cy.contains('button', 'Next').click();
+    cy.contains('button', 'Submit').click();
+  });
+
+  it('delete the consumer', () => {
+    cy.visit('/');
+    cy.contains('Consumer').click();
+    cy.wait(sleepTime * 5)
+    cy.contains(name).siblings().contains('Delete').click();
+    cy.contains('button', 'Confirm').click();
+    cy.get(domSelectors.notification).should('contain', 'Delete Consumer Successfully');
+  });
+
+  it('creates consumer with wrong json', () => {
+    // go to consumer create page
+    cy.visit('/');
+    cy.contains('Consumer').click();
+    cy.wait(sleepTime * 5);
+    cy.contains('Create').click();
+
+    // Basic Information
+    cy.get('#username').type(name);
+    cy.get('#desc').type('desc_by_autotest');
+    cy.contains('Next').click();
+    cy.wait(sleepTime * 3);
+
+    // Plugin Config
+    cy.contains(domSelectors.pluginsCard, 'key-auth').within(() => {
+      cy.get('button').first().click();
+    })
+    // edit CodeMirror
+    cy.get('.CodeMirror')
+      .first()
+      .then((editor) => {
+        editor[0].CodeMirror.setValue(JSON.stringify({
+          "key_not_exst": "test"
+        }));
+        cy.contains('button', 'Submit').click();
+      });
+    cy.get(domSelectors.notification).should('contain', 'Invalid plugin data');
+  });
+})

web/src/pages/Route/components/DebugViews/DebugDrawView.tsx

@@ -26,6 +26,7 @@ import {
   HTTP_METHOD_OPTION_LIST,
   DEFAULT_DEBUG_PARAM_FORM_DATA,
   DEFAULT_DEBUG_AUTH_FORM_DATA,
+  PROTOCOL_SUPPORTED,
 } from '../../constants';
 import { DebugParamsView, AuthenticationView } from '.';
 import { debugRoute } from '../../service';
@@ -37,7 +38,8 @@ const { TabPane } = Tabs;
 
 const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
   const { formatMessage } = useIntl();
-  const [httpMethod, setHttpMethod] = useState('GET');
+  const [httpMethod, setHttpMethod] = useState(HTTP_METHOD_OPTION_LIST[0]);
+  const [requestProtocol, setRequestProtocol] = useState(PROTOCOL_SUPPORTED[0])
   const [showBodyTab, setShowBodyTab] = useState(false);
   const [queryForm] = Form.useForm();
   const [bodyForm] = Form.useForm();
@@ -79,7 +81,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
   ) => {
     let transformData = {};
     (formData || [])
-      .filter((data) => data.check)
+      .filter((data) => data && data.check)
       .forEach((data) => {
         transformData = {
           ...transformData,
@@ -134,8 +136,8 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
     setLoading(true);
     // TODO: grpc and websocket
     debugRoute({
-      url: `${url}${urlQueryString && `?${urlQueryString}`}`,
-      request_protocol: 'http',
+      url: `${requestProtocol}://${url}${urlQueryString && `?${urlQueryString}`}`,
+      request_protocol: requestProtocol,
       method: httpMethod,
       body_params: bodyFormData,
       header_params: headerFormData,
@@ -155,7 +157,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
       mask={false}
       maskClosable={false}
       visible={props.visible}
-      width={600}
+      width={650}
       onClose={() => {
         props.onClose();
       }}
@@ -180,12 +182,28 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
               );
             })}
           </Select>
+          <Select
+            defaultValue={requestProtocol}
+            style={{ width: '18%' }}
+            onChange={(value) => {
+              setRequestProtocol(value);
+            }}
+            size="large"
+          >
+            {PROTOCOL_SUPPORTED.map((protocol) => {
+              return (
+                <Option key={protocol} value={protocol}>
+                  {`${protocol}://`}
+                </Option>
+              );
+            })}
+          </Select>
           <Search
             placeholder={formatMessage({ id: 'page.route.input.placeholder.requestUrl' })}
             allowClear
             enterButton={formatMessage({ id: 'page.route.button.send' })}
             size="large"
-            style={{ width: '80%' }}
+            style={{ width: '62%' }}
             onSearch={handleDebug}
             onPressEnter={(e) => {
               handleDebug(e.currentTarget.value);

web/src/pages/Route/constants.ts

@@ -86,6 +86,8 @@ export const HASH_ON_LIST = ['vars', 'header', 'cookie', 'consumer'];
 
 export const AUTH_LIST = ['basic-auth', 'jwt-auth', 'key-auth'];
 
+export const PROTOCOL_SUPPORTED = ['http', 'https'];
+
 export const DEFAULT_DEBUG_PARAM_FORM_DATA = {
   params: [
     {