You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2020/06/02 10:46:59 UTC

[GitHub] [incubator-apisix-dashboard] LiteSun opened a new pull request #234: feat: add form validation

LiteSun opened a new pull request #234:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/234


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [incubator-apisix-dashboard] juzhiyuan commented on pull request #234: feat: add form validation

Posted by GitBox <gi...@apache.org>.
juzhiyuan commented on pull request #234:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/234#issuecomment-637533647


   ![image](https://user-images.githubusercontent.com/2106987/83524120-b9e65e00-a515-11ea-97c2-8c7b2a37637e.png)
   ![image](https://user-images.githubusercontent.com/2106987/83524161-c66ab680-a515-11ea-9b15-7ba44daeac51.png)
   
   ![image](https://user-images.githubusercontent.com/2106987/83524184-cff41e80-a515-11ea-8fd4-91428348d3a5.png)
   
   ![image](https://user-images.githubusercontent.com/2106987/83524203-d97d8680-a515-11ea-9a81-6a7b62c1eea8.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [incubator-apisix-dashboard] juzhiyuan merged pull request #234: feat: add form validation

Posted by GitBox <gi...@apache.org>.
juzhiyuan merged pull request #234:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/234


   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [incubator-apisix-dashboard] juzhiyuan commented on pull request #234: feat: add form validation

Posted by GitBox <gi...@apache.org>.
juzhiyuan commented on pull request #234:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/234#issuecomment-637530748


   ![image](https://user-images.githubusercontent.com/2106987/83523749-33318100-a515-11ea-83e5-18cb4e933a78.png)
   


----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



[GitHub] [incubator-apisix-dashboard] juzhiyuan commented on a change in pull request #234: feat: add form validation

Posted by GitBox <gi...@apache.org>.
juzhiyuan commented on a change in pull request #234:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/234#discussion_r433857687



##########
File path: src/pages/Routes/components/Step2/RequestRewriteView.tsx
##########
@@ -3,7 +3,8 @@ import Form, { FormInstance } from 'antd/es/form';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
 import { Input, Row, Col, InputNumber, Button } from 'antd';
 
-import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';
+import { FORM_ITEM_LAYOUT, FORM_ITEM_WITHOUT_LABEL } from '@/pages/Routes/constants';
+import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';

Review comment:
       ,

##########
File path: src/pages/Routes/components/Step2/RequestRewriteView.tsx
##########
@@ -57,47 +100,44 @@ const RequestRewriteView: React.FC<Props> = ({ data, form, disabled, onChange })
         className={styles.stepForm}
         initialValues={step2Data}
       >
-        <Form.Item label="协议" name="protocol" rules={[{ required: true, message: '请勾选协议' }]}>
-          <Row>
-            <Radio.Group
-              onChange={onProtocolChange}
-              name="backendProtocol"
-              value={backendProtocol}
-              disabled={disabled}
-            >
-              <Radio value="originalRequest">原始请求</Radio>
-              <Radio value="HTTP">HTTP</Radio>
-              <Radio value="HTTPS">HTTPS</Radio>
-            </Radio.Group>
-          </Row>
-        </Form.Item>
-        <Form.Item label="请求地址" rules={[{ required: true, message: '请输入后端地址' }]}>
-          {renderBackendAddress()}
-          {!disabled && (
-            <Button
-              type="primary"
-              onClick={() => {
-                onChange({
-                  backendAddressList: backendAddressList.concat({ host: '', port: 0, weight: 0 }),
-                });
-              }}
-            >
-              增加
-            </Button>
-          )}
+        <Form.Item
+          label="协议"
+          name="backendProtocol"
+          rules={[{ required: true, message: '请勾选协议' }]}
+        >
+          <Radio.Group onChange={onProtocolChange} name="backendProtocol" disabled={disabled}>
+            <Radio value="originalRequest">原始请求</Radio>
+            <Radio value="HTTP">HTTP</Radio>
+            <Radio value="HTTPS">HTTPS</Radio>
+          </Radio.Group>
         </Form.Item>
-        <Form.Item label="请求路径">
-          <Row>
-            <Input disabled={disabled} />
-          </Row>
+        {renderBackendAddress()}
+        <Form.Item
+          label="请求路径"
+          name="backendAddressPath"

Review comment:
       ,

##########
File path: src/pages/Routes/components/Step1/MetaView.tsx
##########
@@ -2,6 +2,7 @@ import React from 'react';
 import Form from 'antd/es/form';
 import { Input } from 'antd';
 
+// import { FORM_ITEM_LAYOUT } from '@/pages/Routes/constants';

Review comment:
       ,

##########
File path: src/pages/Routes/components/Step2/RequestRewriteView.tsx
##########
@@ -13,40 +14,82 @@ interface Props extends RouteModule.Data {
 
 const RequestRewriteView: React.FC<Props> = ({ data, form, disabled, onChange }) => {
   const { step2Data } = data;
-  const { backendAddressList, backendProtocol } = step2Data;
   const onProtocolChange = (e: RadioChangeEvent) => {
     onChange({ backendProtocol: e.target.value });
   };
 
-  const renderBackendAddress = () =>
-    backendAddressList.map((item, index) => (
-      <Row key={`${item.host + index}`} style={{ marginBottom: '10px' }} gutter={16}>
-        <Col span={9}>
-          <Input placeholder="域名" disabled={disabled} />
-        </Col>
-        <Col span={4}>
-          <InputNumber placeholder="端口号" disabled={disabled} min={1} max={65535} />
-        </Col>
-        <Col span={4} offset={1}>
-          <InputNumber placeholder="权重" disabled={disabled} min={0} max={100} />
-        </Col>
-        <Col span={4} offset={1}>
-          {backendAddressList.length > 1 && !disabled && (
-            <Button
-              type="primary"
-              danger
-              onClick={() => {
-                onChange({
-                  backendAddressList: backendAddressList.filter((_, _index) => _index !== index),
-                });
-              }}
-            >
-              删除
-            </Button>
-          )}
-        </Col>
-      </Row>
-    ));
+  const renderBackendAddress = () => (
+    <Form.List name="backendAddressList">
+      {(fields, { add, remove }) => {
+        return (

Review comment:
       , 
   

##########
File path: src/pages/Routes/components/Step2/index.tsx
##########
@@ -1,15 +1,12 @@
 import React from 'react';
-import { Form } from 'antd';
 
 import RequestRewriteView from './RequestRewriteView';
 import HttpHeaderRewriteView from './HttpHeaderRewriteView';
 
 const Step2: React.FC<RouteModule.Data> = (props) => {
-  const [form] = Form.useForm();
-
   return (
     <>
-      <RequestRewriteView form={form} {...props} />
+      <RequestRewriteView form={props.form} {...props} />

Review comment:
       , 
   

##########
File path: src/pages/Routes/components/Step2/RequestRewriteView.tsx
##########
@@ -57,47 +100,44 @@ const RequestRewriteView: React.FC<Props> = ({ data, form, disabled, onChange })
         className={styles.stepForm}
         initialValues={step2Data}
       >
-        <Form.Item label="协议" name="protocol" rules={[{ required: true, message: '请勾选协议' }]}>
-          <Row>
-            <Radio.Group
-              onChange={onProtocolChange}
-              name="backendProtocol"
-              value={backendProtocol}
-              disabled={disabled}
-            >
-              <Radio value="originalRequest">原始请求</Radio>
-              <Radio value="HTTP">HTTP</Radio>
-              <Radio value="HTTPS">HTTPS</Radio>
-            </Radio.Group>
-          </Row>
-        </Form.Item>
-        <Form.Item label="请求地址" rules={[{ required: true, message: '请输入后端地址' }]}>
-          {renderBackendAddress()}
-          {!disabled && (
-            <Button
-              type="primary"
-              onClick={() => {
-                onChange({
-                  backendAddressList: backendAddressList.concat({ host: '', port: 0, weight: 0 }),
-                });
-              }}
-            >
-              增加
-            </Button>
-          )}
+        <Form.Item
+          label="协议"
+          name="backendProtocol"
+          rules={[{ required: true, message: '请勾选协议' }]}
+        >
+          <Radio.Group onChange={onProtocolChange} name="backendProtocol" disabled={disabled}>
+            <Radio value="originalRequest">原始请求</Radio>
+            <Radio value="HTTP">HTTP</Radio>
+            <Radio value="HTTPS">HTTPS</Radio>
+          </Radio.Group>
         </Form.Item>
-        <Form.Item label="请求路径">
-          <Row>
-            <Input disabled={disabled} />
-          </Row>
+        {renderBackendAddress()}
+        <Form.Item
+          label="请求路径"
+          name="backendAddressPath"
+          rules={[{ required: true, message: '请输入请求路径' }]}
+        >
+          <Input disabled={disabled} />
         </Form.Item>
-        <Form.Item label="连接超时">
+        <Form.Item
+          label="连接超时"
+          name={['timeout', 'connect']}
+          rules={[{ required: true, message: '请输入连接超时' }]}
+        >
           <InputNumber disabled={disabled} defaultValue={30000} /> ms
         </Form.Item>
-        <Form.Item label="发送超时">
+        <Form.Item
+          label="发送超时"
+          name={['timeout', 'send']}
+          rules={[{ required: true, message: '请输入发送超时' }]}

Review comment:
       , 
   




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org