Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add scrollbar to create test form #168

Merged
merged 1 commit into from
Apr 8, 2022
Merged

fix: add scrollbar to create test form #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions web/src/components/CreateTest/CreateTest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,40 @@
.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 {
}

.method-select .ant-select-selector {
background-color: #fafafa !important;
}

.method-select-item {}

.method-select-item {
}

.method-select-item .ant-select-item-option-selected {
background-color: #fafafa !important;
Expand Down
227 changes: 112 additions & 115 deletions web/src/components/CreateTest/CreateTestModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
);
};
Expand Down