feat: autocomplete when people input http header

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

@@ -314,7 +314,7 @@ const DebugDrawView: React.FC<RouteModule.DebugDrawProps> = (props) => {
               <AuthenticationView form={authForm} />
             </TabPane>
             <TabPane data-cy='header' tab={formatMessage({ id: 'page.route.TabPane.headerParams' })} key="header">
-              <DebugParamsView form={headerForm} name='headerForm'/>
+              <DebugParamsView form={headerForm} name='headerForm' inputType="header"/>
             </TabPane>
             {showBodyTab && (
               <TabPane data-cy='body' tab={formatMessage({ id: 'page.route.TabPane.bodyParams' })} key="body">

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

@@ -14,16 +14,26 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
-import { Form, Input, Row, Col, Checkbox } from 'antd';
+import React, { useState } from 'react';
+import { Form, Input, Row, Col, Checkbox, AutoComplete } from 'antd';
 import { useIntl } from 'umi';
 import { MinusCircleOutlined } from '@ant-design/icons';
+import { HEADER_LIST } from '@/pages/Route/constants';
 
 import styles from './index.less';
 
+const { Option } = AutoComplete;
+
 const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
   const { formatMessage } = useIntl();
 
+  const allSelectOptions = props.inputType === "header" ? HEADER_LIST : []
+  const [result, setResult] = useState<string[]>(allSelectOptions);
+
+  const onSearch = (value: string) => {
+    setResult(allSelectOptions.filter((option) => option.toLowerCase().startsWith(value.toLowerCase())))
+  }
+
   return (
     <Form name={props.name} className={styles.routeDebugDraw} form={props.form}>
       <Form.List name="params">
@@ -34,16 +44,22 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                 <Row gutter={16} key={field.name}>
                   <Col span={1}>
                     <Form.Item
+                      {...field}
                       name={[field.name, 'check']}
+                      fieldKey={[field.fieldKey, 'check']}
                       style={{ textAlign: 'right' }}
                       valuePropName="checked"
                     >
                       {fields.length > 1 && index !== fields.length - 1 && <Checkbox />}
                     </Form.Item>
                   </Col>
                   <Col span={8}>
-                    <Form.Item name={[field.name, 'key']}>
-                      <Input
+                    <Form.Item
+                      {...field}
+                      name={[field.name, 'key']}
+                      fieldKey={[field.fieldKey, 'key']}>
+                      <AutoComplete
+                        onSearch={onSearch}
                         placeholder={formatMessage({ id: 'page.route.input.placeholder.paramKey' })}
                         onChange={() => {
                           // only last line key field input can trigger add new line event
@@ -54,12 +70,20 @@ const DebugParamsView: React.FC<RouteModule.DebugViewProps> = (props) => {
                             prevData.params[index].check = true;
                             props.form.setFieldsValue(prevData);
                           }
-                        }}
-                      />
+                        }}>
+                        {result.map((value) => (
+                          <Option key={value} value={value}>
+                            {value}
+                          </Option>
+                        ))}
+                      </AutoComplete>
                     </Form.Item>
                   </Col>
                   <Col span={8}>
-                    <Form.Item name={[field.name, 'value']}>
+                    <Form.Item
+                      {...field}
+                      name={[field.name, 'value']}
+                      fieldKey={[field.fieldKey, 'value']}>
                       <Input
                         placeholder={formatMessage({
                           id: 'page.route.input.placeholder.paramValue',

web/src/pages/Route/constants.ts

@@ -90,23 +90,87 @@ export const INIT_CHART = {
   hovered: {},
 };
 
-export const HASH_KEY_LIST = [
-  'remote_addr',
-  'host',
-  'uri',
-  'server_name',
-  'server_addr',
-  'request_uri',
-  'query_string',
-  'remote_port',
-  'hostname',
-  'arg_id',
-];
-
-export const HASH_ON_LIST = ['vars', 'header', 'cookie', 'consumer'];
-
 export const AUTH_LIST = ['basic-auth', 'jwt-auth', 'key-auth'];
 
+export const HEADER_LIST = [
+  "Accept",
+  "Accept-Charset",
+  "Accept-Encoding",
+  "Accept-Language",
+  "Accept-Ranges",
+  "Access-Control-Allow-Credentials",
+  "Access-Control-Allow-Origin",
+  "Access-Control-Allow-Methods",
+  "Access-Control-Allow-Headers",
+  "Access-Control-Max-Age",
+  "Access-Control-Expose-Headers",
+  "Access-Control-Request-Method",
+  "Access-Control-Request-Headers",
+  "Age",
+  "Allow",
+  "Authorization",
+  "Cache-Control",
+  "Connection",
+  "Content-Encoding",
+  "Content-Language",
+  "Content-Length",
+  "Content-Location",
+  "Content-Range",
+  "Content-Security-Policy",
+  "Content-Type",
+  "Cookie",
+  "DNT",
+  "Date",
+  "ETag",
+  "Expect",
+  "Expires",
+  "From",
+  "Host",
+  "If-Match",
+  "If-Modified-Since",
+  "If-None-Match",
+  "If-Range",
+  "If-Unmodified-Since",
+  "Last-Event-ID",
+  "Last-Modified",
+  "Link",
+  "Location",
+  "Max-Forwards",
+  "Negotiate",
+  "Origin",
+  "Pragma",
+  "Proxy-Authenticate",
+  "Proxy-Authorization",
+  "Range",
+  "Referer",
+  "Retry-After",
+  "Sec-Websocket-Extensions",
+  "Sec-Websocket-Key",
+  "Sec-Websocket-Origin",
+  "Sec-Websocket-Protocol",
+  "Sec-Websocket-Version",
+  "Server",
+  "Set-Cookie",
+  "Set-Cookie2",
+  "Strict-Transport-Security",
+  "TCN",
+  "TE",
+  "Trailer",
+  "Transfer-Encoding",
+  "Upgrade",
+  "User-Agent",
+  "Variant-Vary",
+  "Vary",
+  "Via",
+  "Warning",
+  "WWW-Authenticate",
+  "X-Content-Duration",
+  "X-Content-Security-Policy",
+  "X-DNSPrefetch-Control",
+  "X-Frame-Options",
+  "X-Requested-With"
+];
+
 export const PROTOCOL_SUPPORTED: RouteModule.debugRequest['request_protocol'][] = ['http', 'https'];
 
 export const DEFAULT_DEBUG_PARAM_FORM_DATA = {

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

@@ -257,6 +257,7 @@ declare namespace RouteModule {
   type DebugViewProps = {
     form: FormInstance;
     name?: string;
+    inputType?: 'param' | 'header';
   };
   type DebugBodyType = 'none' | 'x-www-form-urlencoded' | 'raw input' | 'form-data';
   type DebugDrawProps = {