Refactor online debug fe

web/package.json

@@ -56,6 +56,7 @@
     "@uiw/react-codemirror": "^3.0.1",
     "ajv": "^7.0.0-rc.2",
     "antd": "^4.4.0",
+    "base-64": "^1.0.0",
     "classnames": "^2.2.6",
     "dayjs": "1.8.28",
     "js-beautify": "^1.13.0",
@@ -65,12 +66,12 @@
     "omit.js": "^2.0.2",
     "path-to-regexp": "2.4.0",
     "qs": "^6.9.0",
+    "query-string": "^6.13.7",
     "react": "^16.8.6",
     "react-device-detect": "^1.12.1",
     "react-dom": "^16.8.6",
     "react-helmet-async": "^1.0.4",
     "start-server-and-test": "^1.11.5",
-    "swagger-ui-react": "^3.33.0",
     "umi": "^3.1.2",
     "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1",
@@ -89,8 +90,8 @@
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^5.0.13",
-    "@types/swagger-ui-react": "^3.23.3",
     "@types/uuid": "7.0.4",
+    "@types/base-64": "^0.1.3",
     "@umijs/fabric": "^2.2.0",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.0-beta.2",

web/src/pages/Consumer/List.tsx

@@ -22,7 +22,6 @@ import { history, useIntl } from 'umi';
 import { PlusOutlined } from '@ant-design/icons';
 
 import { timestampToLocaleString } from '@/helpers';
-
 import { fetchList, remove } from './service';
 
 const Page: React.FC = () => {

web/src/pages/Route/List.tsx

@@ -14,20 +14,21 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
 import { Button, Popconfirm, notification, Tag, Space } from 'antd';
 import { history, useIntl } from 'umi';
-import { PlusOutlined } from '@ant-design/icons';
-
+import { PlusOutlined, BugOutlined } from '@ant-design/icons';
 import { timestampToLocaleString } from '@/helpers';
 
 import { fetchList, remove } from './service';
+import { DebugDrawView } from './components/DebugViews';
 
 const Page: React.FC = () => {
   const ref = useRef<ActionType>();
   const { formatMessage } = useIntl();
+  const [debugDrawVisible, setDebugDrawVisible] = useState(false);
 
   const columns: ProColumns<RouteModule.ResponseBody>[] = [
     {
@@ -126,8 +127,18 @@ const Page: React.FC = () => {
             <PlusOutlined />
             {formatMessage({ id: 'component.global.create' })}
           </Button>,
+          <Button type="primary" onClick={() => setDebugDrawVisible(true)}>
+            <BugOutlined />
+            {formatMessage({ id: 'page.route.onlineDebug' })}
+          </Button>,
         ]}
       />
+      <DebugDrawView
+        visible={debugDrawVisible}
+        onClose={() => {
+          setDebugDrawVisible(false);
+        }}
+      />
     </PageHeaderWrapper>
   );
 };

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

@@ -0,0 +1,129 @@
+/*
+ * 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 React, { useState } from 'react';
+import { Form, Input, Radio, Card } from 'antd';
+import { useIntl } from 'umi';
+import { AUTH_LIST } from '../../constants';
+import styles from './index.less';
+
+const AuthenticationView: React.FC<RouteModule.DebugViewProps> = (props) => {
+  const { formatMessage } = useIntl();
+  const [authType, setAuthType] = useState('none');
+
+  const getAuthFormItems = () => {
+    switch (props.form.getFieldValue('authType')) {
+      case 'basic-auth':
+        return (
+          <>
+            <Form.Item
+              label={formatMessage({ id: 'page.route.form.itemLabel.username' })}
+              name="username"
+              rules={[
+                {
+                  required: true,
+                  message: `${formatMessage({
+                    id: 'component.global.pleaseEnter',
+                  })}${formatMessage({ id: 'page.route.form.itemLabel.username' })}`,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={formatMessage({ id: 'page.route.form.itemLabel.password' })}
+              name="password"
+              rules={[
+                {
+                  required: true,
+                  message: `${formatMessage({
+                    id: 'component.global.pleaseEnter',
+                  })}${formatMessage({ id: 'page.route.form.itemLabel.password' })}`,
+                },
+              ]}
+            >
+              <Input.Password />
+            </Form.Item>
+          </>
+        );
+      case 'jwt-auth':
+        return (
+          <Form.Item
+            label={formatMessage({ id: 'page.route.form.itemLabel.token' })}
+            name="Authorization"
+            rules={[
+              {
+                required: true,
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })}${formatMessage({
+                  id: 'page.route.form.itemLabel.token',
+                })}`,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        );
+      case 'key-auth':
+        return (
+          <Form.Item
+            label={formatMessage({ id: 'page.route.form.itemLabel.apikey' })}
+            name="apikey"
+            rules={[
+              {
+                required: true,
+                message: `${formatMessage({ id: 'component.global.pleaseEnter' })}${formatMessage({
+                  id: 'page.route.form.itemLabel.apikey',
+                })}`,
+              },
+            ]}
+          >
+            <Input />
+          </Form.Item>
+        );
+      default:
+        return <div>{formatMessage({ id: 'page.route.debugWithoutAuth' })}</div>;
+    }
+  };
+
+  return (
+    <Card>
+      <Form name="authForm" form={props.form}>
+        <div className={styles.authForm}>
+          <Form.Item name="authType">
+            <Radio.Group
+              defaultValue={authType}
+              onChange={(event) => {
+                const currentValue = event.target.value;
+                setAuthType(currentValue);
+                props.form.setFieldsValue({ autyType: currentValue });
+              }}
+            >
+              <Radio value="none">None</Radio>
+              {AUTH_LIST.map((type) => (
+                <Radio key={type} value={type}>
+                  {type}
+                </Radio>
+              ))}
+            </Radio.Group>
+          </Form.Item>
+          <div>{getAuthFormItems()}</div>
+        </div>
+      </Form>
+    </Card>
+  );
+};
+
+export default AuthenticationView;