From 7861b0f6e6b762df347c5031fbf0c68d8fad851c Mon Sep 17 00:00:00 2001
From: Mahmoud Mortada <mortda.m.11@gmail.com>
Date: Wed, 6 Apr 2022 11:07:49 +0200
Subject: [PATCH] fix: create test modal

---
 web/src/components/CreateTest/CreateTest.css  |  13 ++
 .../components/CreateTest/CreateTestModal.tsx | 172 ++++++++++++++++++
 web/src/components/CreateTest/index.ts        |   2 +
 web/src/components/CreateTestModal.tsx        |  66 -------
 web/src/pages/Home/Home.tsx                   |   2 +-
 web/src/types/index.ts                        |   2 +-
 6 files changed, 189 insertions(+), 68 deletions(-)
 create mode 100644 web/src/components/CreateTest/CreateTest.css
 create mode 100644 web/src/components/CreateTest/CreateTestModal.tsx
 create mode 100644 web/src/components/CreateTest/index.ts
 delete mode 100644 web/src/components/CreateTestModal.tsx

diff --git a/web/src/components/CreateTest/CreateTest.css b/web/src/components/CreateTest/CreateTest.css
new file mode 100644
index 0000000000..16a7832564
--- /dev/null
+++ b/web/src/components/CreateTest/CreateTest.css
@@ -0,0 +1,13 @@
+.method-select {
+}
+
+.method-select .ant-select-selector {
+  background-color: #fafafa !important;
+}
+
+.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
new file mode 100644
index 0000000000..c00871c10f
--- /dev/null
+++ b/web/src/components/CreateTest/CreateTestModal.tsx
@@ -0,0 +1,172 @@
+import {useRef} from 'react';
+import {Modal as AntModal, 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;
+}
+
+const CreateTestModal = ({visible, onClose}: IProps): JSX.Element => {
+  const [createTest, result] = useCreateTestMutation();
+  const [form] = Form.useForm();
+  const touchedHttpHeadersRef = useRef<{[key: string]: Boolean}>({});
+  const onFinish = (values: any) => {
+    const headers = values.headersList
+      .filter((i: {checked: boolean}) => i.checked)
+      .map(({key, value}: {key: string; value: string}) => ({key, value}));
+    createTest({
+      name: values.name,
+      serviceUnderTest: {
+        request: {url: values.url, method: values.method, body: values.body, headers},
+      },
+    });
+    onClose();
+  };
+
+  const onFinishFailed = () => {};
+
+  const renderActionButtons = () => {
+    return (
+      <>
+        <Button type="ghost" htmlType="button" onClick={onClose}>
+          Cancel
+        </Button>
+
+        <Button type="primary" form="newTest" htmlType="submit">
+          Create Test
+        </Button>
+      </>
+    );
+  };
+
+  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>
+
+          <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 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 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>
+                        <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>
+    </Modal>
+  );
+};
+
+export default CreateTestModal;
diff --git a/web/src/components/CreateTest/index.ts b/web/src/components/CreateTest/index.ts
new file mode 100644
index 0000000000..b1f71eb244
--- /dev/null
+++ b/web/src/components/CreateTest/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export {default} from './CreateTestModal';
diff --git a/web/src/components/CreateTestModal.tsx b/web/src/components/CreateTestModal.tsx
deleted file mode 100644
index 22a763aec7..0000000000
--- a/web/src/components/CreateTestModal.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {Modal as AntModal, Form, Input, Button} from 'antd';
-import styled from 'styled-components';
-import {useCreateTestMutation} from 'services/TestService';
-import { HTTP_METHOD } from 'types';
-
-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;
-}
-
-const CreateTestModal = ({visible, onClose}: IProps): JSX.Element => {
-  const [createTest, result] = useCreateTestMutation();
-  const onFinish = (values: {name: string; url: string}) => {
-    createTest({
-      name: values.name,
-      serviceUnderTest: {
-        request:{ url: values.url, method: HTTP_METHOD.GET},
-      },
-    });
-    onClose();
-  };
-
-  const onFinishFailed = () => {};
-
-  return (
-    <Modal title="" visible={visible} footer={null} closable onCancel={onClose}>
-      <h1 style={{height: '100%', width: '100%'}}>Create New Test</h1>
-      <Form
-        name="newTest"
-        labelCol={{span: 8}}
-        wrapperCol={{span: 16}}
-        initialValues={{remember: true}}
-        onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
-        autoComplete="off"
-      >
-        <Form.Item label="Name" name="name" rules={[{required: true, message: 'Please input test name!'}]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item label="Endpoint" name="url" rules={[{required: true, message: 'Please input Endpoint!'}]}>
-          <Input />
-        </Form.Item>
-
-        <Form.Item wrapperCol={{offset: 8, span: 16}}>
-          <Button type="primary" htmlType="submit">
-            Create Test
-          </Button>
-        </Form.Item>
-      </Form>
-    </Modal>
-  );
-};
-
-export default CreateTestModal;
diff --git a/web/src/pages/Home/Home.tsx b/web/src/pages/Home/Home.tsx
index 06ca85ea11..08344f4eed 100644
--- a/web/src/pages/Home/Home.tsx
+++ b/web/src/pages/Home/Home.tsx
@@ -1,5 +1,5 @@
 import {useState} from 'react';
-import CreateTestModal from 'components/CreateTestModal';
+import CreateTestModal from 'components/CreateTest';
 import Layout from 'components/Layout';
 import TestList from './TestList';
 import * as S from './Home.styled';
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 4316085a54..2ed02eaee0 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -1,4 +1,4 @@
-export const enum HTTP_METHOD {
+export enum HTTP_METHOD {
   GET = 'GET',
   PUT = 'PUT',
   POST = 'POST',