From 0f956866716421c93738102fa050bf47fac9472c Mon Sep 17 00:00:00 2001
From: Mahmoud Mortada <mortda.m.11@gmail.com>
Date: Fri, 8 Apr 2022 09:35:49 +0200
Subject: [PATCH] fix: add scrollbar to creat test form

---
 web/src/components/CreateTest/CreateTest.css  |  32 ++-
 .../components/CreateTest/CreateTestModal.tsx | 227 +++++++++---------
 2 files changed, 142 insertions(+), 117 deletions(-)

diff --git a/web/src/components/CreateTest/CreateTest.css b/web/src/components/CreateTest/CreateTest.css
index 16a7832564..e3c96e04ed 100644
--- a/web/src/components/CreateTest/CreateTest.css
+++ b/web/src/components/CreateTest/CreateTest.css
@@ -1,3 +1,31 @@
+.test-modal {
+  overflow: hidden !important;
+  display: flex;
+}
+
+.test-modal .ant-modal {
+  top: 50px;
+}
+
+.test-modal .ant-modal-content {
+  height: min(calc(100vh - 16%), 620px);
+}
+
+.test-modal .ant-modal-body {
+  position: absolute;
+  min-height: fit-content;
+  height: calc(100% - 110px);
+  width: 100%;
+  overflow-y: auto;
+}
+
+.test-modal .ant-modal-footer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .method-select {
 }
 
@@ -5,8 +33,8 @@
   background-color: #fafafa !important;
 }
 
-.method-select-item {}
-
+.method-select-item {
+}
 
 .method-select-item .ant-select-item-option-selected {
   background-color: #fafafa !important;
diff --git a/web/src/components/CreateTest/CreateTestModal.tsx b/web/src/components/CreateTest/CreateTestModal.tsx
index c00871c10f..8a545d2636 100644
--- a/web/src/components/CreateTest/CreateTestModal.tsx
+++ b/web/src/components/CreateTest/CreateTestModal.tsx
@@ -1,22 +1,10 @@
 import {useRef} from 'react';
-import {Modal as AntModal, Form, Input, Button, Select, Checkbox} from 'antd';
+import {Modal, Form, Input, Button, Select, Checkbox} from 'antd';
 import {DeleteOutlined} from '@ant-design/icons';
-import styled from 'styled-components';
 import {useCreateTestMutation} from 'services/TestService';
 import {HTTP_METHOD} from 'types';
 import './CreateTest.css';
 
-const Modal = styled(AntModal)`
-  .ant-modal {
-    width: 100%;
-    max-width: unset;
-    margin: unset;
-  }
-  .ant-modal-centered::before {
-    content: unset;
-  }
-`;
-
 interface IProps {
   visible: boolean;
   onClose: () => void;
@@ -56,115 +44,124 @@ const CreateTestModal = ({visible, onClose}: IProps): JSX.Element => {
   };
 
   return (
-    <Modal title="Create New Test" visible={visible} footer={renderActionButtons()} closable onCancel={onClose}>
-      <Form
-        name="newTest"
-        form={form}
-        initialValues={{remember: true}}
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        autoComplete="off"
-        layout="vertical"
-      >
-        <div style={{display: 'flex', marginBottom: 24}}>
-          <Form.Item name="method" initialValue="GET" valuePropName="value" noStyle>
-            <Select style={{minWidth: 120}} className="method-select" dropdownClassName="method-select-item">
-              {Object.keys(HTTP_METHOD).map(el => {
-                return (
-                  <Select.Option key={el} value={el}>
-                    {el}
-                  </Select.Option>
-                );
-              })}
-            </Select>
-          </Form.Item>
+    <Modal
+      closable
+      title="Create New Test"
+      visible={visible}
+      footer={renderActionButtons()}
+      onCancel={onClose}
+      wrapClassName="test-modal"
+    >
+      <div style={{display: 'flex'}}>
+        <Form
+          name="newTest"
+          form={form}
+          initialValues={{remember: true}}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+          layout="vertical"
+        >
+          <div style={{display: 'flex', marginBottom: 24}}>
+            <Form.Item name="method" initialValue="GET" valuePropName="value" noStyle>
+              <Select style={{minWidth: 120}} className="method-select" dropdownClassName="method-select-item">
+                {Object.keys(HTTP_METHOD).map(el => {
+                  return (
+                    <Select.Option key={el} value={el}>
+                      {el}
+                    </Select.Option>
+                  );
+                })}
+              </Select>
+            </Form.Item>
 
-          <Form.Item name="url" rules={[{required: true, message: 'Please input Endpoint!'}]} noStyle>
-            <Input placeholder="Enter request url" />
-          </Form.Item>
-        </div>
+            <Form.Item name="url" rules={[{required: true, message: 'Please input Endpoint!'}]} noStyle>
+              <Input placeholder="Enter request url" />
+            </Form.Item>
+          </div>
 
-        <Form.Item
-          name="name"
-          label="Name"
-          colon={false}
-          wrapperCol={{span: 24, offset: 0}}
-          rules={[{required: true, message: 'Please input test name!'}]}
-        >
-          <Input />
-        </Form.Item>
+          <Form.Item
+            name="name"
+            label="Name"
+            colon={false}
+            wrapperCol={{span: 24, offset: 0}}
+            rules={[{required: true, message: 'Please input test name!'}]}
+          >
+            <Input />
+          </Form.Item>
 
-        <Form.Item label="Headers List" wrapperCol={{span: 24, offset: 0}}>
-          <div style={{maxHeight: 100, height: 100, overflowY: 'auto'}}>
-            <Form.List name="headersList" initialValue={[{}, {}, {}]}>
-              {(fields, {add, remove}) => (
-                <>
-                  {fields.map((field, index) => (
-                    <div key={field.name} style={{display: 'flex', alignItems: 'center'}}>
-                      <Form.Item name={[field.name, 'checked']} valuePropName="checked" noStyle>
-                        <Checkbox style={{marginRight: 8}} />
-                      </Form.Item>
+          <Form.Item label="Headers List" wrapperCol={{span: 24, offset: 0}}>
+            <div style={{minHeight: 80}}>
+              <Form.List name="headersList" initialValue={[{}, {}, {}]}>
+                {(fields, {add, remove}) => (
+                  <>
+                    {fields.map((field, index) => (
+                      <div key={field.name} style={{display: 'flex', alignItems: 'center'}}>
+                        <Form.Item name={[field.name, 'checked']} valuePropName="checked" noStyle>
+                          <Checkbox style={{marginRight: 8}} />
+                        </Form.Item>
 
-                      <Form.Item name={[field.name, 'key']} noStyle>
-                        <Input
-                          placeholder={`Header${index + 1}`}
-                          onChangeCapture={() => {
-                            if (!touchedHttpHeadersRef.current[field.name]) {
-                              touchedHttpHeadersRef.current[field.name] = true;
-                              const headers = form.getFieldsValue().headersList;
-                              headers[field.name].checked = true;
-                              form.setFieldsValue({headersList: headers});
-                            }
+                        <Form.Item name={[field.name, 'key']} noStyle>
+                          <Input
+                            placeholder={`Header${index + 1}`}
+                            onChangeCapture={() => {
+                              if (!touchedHttpHeadersRef.current[field.name]) {
+                                touchedHttpHeadersRef.current[field.name] = true;
+                                const headers = form.getFieldsValue().headersList;
+                                headers[field.name].checked = true;
+                                form.setFieldsValue({headersList: headers});
+                              }
 
-                            if (fields.length - 1 === index) {
-                              add({checked: false});
-                            }
-                          }}
-                        />
-                      </Form.Item>
-                      <Form.Item noStyle name={[field.name, 'value']}>
-                        <Input
-                          placeholder={`Value${index + 1}`}
-                          onChangeCapture={() => {
-                            if (!touchedHttpHeadersRef.current[field.name]) {
-                              touchedHttpHeadersRef.current[field.name] = true;
-                              const headers = form.getFieldsValue().headersList;
-                              headers[field.name].checked = true;
-                              form.setFieldsValue({headersList: headers});
-                            }
+                              if (fields.length - 1 === index) {
+                                add({checked: false});
+                              }
+                            }}
+                          />
+                        </Form.Item>
+                        <Form.Item noStyle name={[field.name, 'value']}>
+                          <Input
+                            placeholder={`Value${index + 1}`}
+                            onChangeCapture={() => {
+                              if (!touchedHttpHeadersRef.current[field.name]) {
+                                touchedHttpHeadersRef.current[field.name] = true;
+                                const headers = form.getFieldsValue().headersList;
+                                headers[field.name].checked = true;
+                                form.setFieldsValue({headersList: headers});
+                              }
 
-                            if (fields.length - 1 === index) {
-                              add({checked: false});
-                            }
-                          }}
-                        />
-                      </Form.Item>
+                              if (fields.length - 1 === index) {
+                                add({checked: false});
+                              }
+                            }}
+                          />
+                        </Form.Item>
 
-                      <Form.Item noStyle>
-                        <Button
-                          style={{marginLeft: 8}}
-                          type="text"
-                          icon={<DeleteOutlined style={{fontSize: 24, color: '#D9D9D9'}} />}
-                          onClick={() => {
-                            touchedHttpHeadersRef.current[field.name] = false;
-                            remove(index);
-                            if (fields.length === 1 || fields.length - 1 === index) {
-                              add();
-                            }
-                          }}
-                        />
-                      </Form.Item>
-                    </div>
-                  ))}
-                </>
-              )}
-            </Form.List>
-          </div>
-        </Form.Item>
-        <Form.Item label="Request body" name="body" colon={false} wrapperCol={{span: 24, offset: 0}}>
-          <Input.TextArea style={{maxHeight: 150, height: 150}} />
-        </Form.Item>
-      </Form>
+                        <Form.Item noStyle>
+                          <Button
+                            style={{marginLeft: 8}}
+                            type="text"
+                            icon={<DeleteOutlined style={{fontSize: 24, color: '#D9D9D9'}} />}
+                            onClick={() => {
+                              touchedHttpHeadersRef.current[field.name] = false;
+                              remove(index);
+                              if (fields.length === 1 || fields.length - 1 === index) {
+                                add();
+                              }
+                            }}
+                          />
+                        </Form.Item>
+                      </div>
+                    ))}
+                  </>
+                )}
+              </Form.List>
+            </div>
+          </Form.Item>
+          <Form.Item label="Request body" name="body" colon={false} wrapperCol={{span: 24, offset: 0}}>
+            <Input.TextArea style={{maxHeight: 150, height: 120}} />
+          </Form.Item>
+        </Form>
+      </div>
     </Modal>
   );
 };