From c7813ca340a939f8347e6bc680fbad8a5a42c086 Mon Sep 17 00:00:00 2001
From: manorlh <44364426+manorlh@users.noreply.github.com>
Date: Tue, 1 Sep 2020 16:26:06 +0300
Subject: [PATCH] Big create test (#362)

* fix(graphs): disable connected dots in status code graph
* feat(ui): utilize better the screen for creating or editing a test
---
 ui/src/components/TitleInput/index.js         | 12 +--
 ui/src/features/components/Modal/index.js     |  4 +-
 ui/src/features/components/Report/Charts.js   |  8 +-
 .../components/Report/compareReports.js       |  1 +
 ui/src/features/components/Report/index.js    |  1 +
 .../features/components/TestForm/StepForm.js  | 97 ++++++++++++-------
 .../TestForm/collapsibleScenarioConfig.js     |  2 +-
 .../components/TestForm/collapsibleStep.js    |  2 +-
 ui/src/features/components/TestForm/index.js  |  3 +-
 .../components/TestForm/stepform.scss         |  4 +-
 .../features/components/TestForm/style.scss   |  3 +-
 11 files changed, 84 insertions(+), 53 deletions(-)

diff --git a/ui/src/components/TitleInput/index.js b/ui/src/components/TitleInput/index.js
index 7b5b71c04..6b2b17af4 100644
--- a/ui/src/components/TitleInput/index.js
+++ b/ui/src/components/TitleInput/index.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import css from './TitleInput.scss'
 
-const ParentWrap = ({wrap, children}) => {
+const ParentWrap = ({wrap,style, children}) => {
     if (wrap) {
         return (
-            <div className={css.title_wrapper}>
+            <div style={style} className={css.title_wrapper}>
                 {children}
             </div>
         )
@@ -19,11 +19,11 @@ const ParentWrap = ({wrap, children}) => {
     }
 }
 
-const TitleInput = ({title, disabled, className, children, prefix, suffix, alert,rightComponent, ...rest}) => {
+const TitleInput = ({title, style,width, disabled, className, children, prefix, suffix, alert, rightComponent, ...rest}) => {
     const childrenExist = Boolean(children)
     return (
-        <ParentWrap wrap={childrenExist}>
-            <div style={{display: 'flex', flexDirection: 'row', justifyContent: !title ? 'flex-end' : 'space-between'}}>
+        <ParentWrap style={style} wrap={childrenExist}>
+            <div style={{display: 'flex', flexDirection: 'row', justifyContent: !title ? 'flex-end' : 'space-between',width}}>
                 <label {...rest} className={classnames(className, css.title, {
                     [css['title--disabled']]: disabled,
                     [css['title--alert']]: alert
@@ -34,7 +34,7 @@ const TitleInput = ({title, disabled, className, children, prefix, suffix, alert
                 </label>
                 {rightComponent}
             </div>
-            {children ? <div>{children}</div> : undefined}
+            {children ? <div style={{width}}>{children}</div> : undefined}
         </ParentWrap>
     )
 }
diff --git a/ui/src/features/components/Modal/index.js b/ui/src/features/components/Modal/index.js
index 3e405941f..41df1b415 100644
--- a/ui/src/features/components/Modal/index.js
+++ b/ui/src/features/components/Modal/index.js
@@ -27,10 +27,10 @@ class Modal extends React.Component {
 
 
     render() {
-        const {children, width, height, style: customStyle} = this.props;
+        const {children, width, height, style: customStyle, maxWidth} = this.props;
         return (
             <div style={customStyle} className={style['modal']}>
-                <div className={style['modal-content']} style={{width: width, height}}>
+                <div className={style['modal-content']} style={{width: width, maxWidth, height}}>
                     <div className={style['icon-wrapper']}>
                         <FontAwesomeIcon className={style["exit-icon"]} onClick={this.onEscape} icon={faTimes}/>
                     </div>
diff --git a/ui/src/features/components/Report/Charts.js b/ui/src/features/components/Report/Charts.js
index ceb708c85..ac98412c9 100644
--- a/ui/src/features/components/Report/Charts.js
+++ b/ui/src/features/components/Report/Charts.js
@@ -65,7 +65,7 @@ const filterKeysFromArrayOfObject = (data, graphType, filteredKeys) => {
     return filteredData;
 };
 
-export const BarChartPredator = ({data = [], keys=[], graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
+export const BarChartPredator = ({data = [], keys = [], graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
     const filteredData = filterKeysFromArrayOfObject(data, graphType, filteredKeys);
 
     return (
@@ -98,7 +98,7 @@ export const BarChartPredator = ({data = [], keys=[], graphType, onSelectedGraph
     )
 };
 
-export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSelectedGraphPropertyFilter, filteredKeys}) => {
+export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSelectedGraphPropertyFilter, filteredKeys, connectNulls = true}) => {
     const filteredData = filterKeysFromArrayOfObject(data, graphType, filteredKeys);
     return (
         <ResponsiveContainer width="100%" height={300}>
@@ -123,7 +123,7 @@ export const LineChartPredator = ({data = [], keys = [], labelY, graphType, onSe
                 {
                     keys.map((key, index) => {
                         const color = getColor(key, index);
-                        return (<Line connectNulls key={index} type="monotone" dataKey={key} dot={null}
+                        return (<Line connectNulls={connectNulls} key={index} type="monotone" dataKey={key} dot={null}
                                       stroke={color.stroke}/>)
                     })
                 }
@@ -153,7 +153,7 @@ const renderLegend = (props) => {
                          style={{margin: '5px', display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
                         <Checkbox
                             indeterminate={false}
-                            checked={_.get(filteredKeys,`${graphType}.${entry.value}`) === undefined || _.get(filteredKeys,`${graphType}.${entry.value}`) === false}
+                            checked={_.get(filteredKeys, `${graphType}.${entry.value}`) === undefined || _.get(filteredKeys, `${graphType}.${entry.value}`) === false}
                             // disabled={}
                             onChange={(value) => {
                                 onSelectedGraphPropertyFilter(graphType, entry.value, value)
diff --git a/ui/src/features/components/Report/compareReports.js b/ui/src/features/components/Report/compareReports.js
index a9e9f31d1..65bd1cc8b 100644
--- a/ui/src/features/components/Report/compareReports.js
+++ b/ui/src/features/components/Report/compareReports.js
@@ -130,6 +130,7 @@ class CompareReports extends React.Component {
                         <h3>Status Codes</h3>
                         <LineChartPredator data={mergedReports.errorsCodeGraph} keys={mergedReports.errorsCodeGraphKeys}
                                            graphType={'status_codes'}
+                                           connectNulls={false}
                                            onSelectedGraphPropertyFilter={this.onSelectedGraphPropertyFilter}
                                            filteredKeys={filteredKeys}/>
                         <h3>RPS</h3>
diff --git a/ui/src/features/components/Report/index.js b/ui/src/features/components/Report/index.js
index 0cdec7344..252129ef2 100644
--- a/ui/src/features/components/Report/index.js
+++ b/ui/src/features/components/Report/index.js
@@ -116,6 +116,7 @@ class Report extends React.Component {
                     <h3>Status Codes</h3>
                     <LineChartPredator data={aggregateReport.errorsCodeGraph} keys={aggregateReport.errorsCodeGraphKeys}
                                        graphType={'status_codes'}
+                                       connectNulls={false}
                                        onSelectedGraphPropertyFilter={this.onSelectedGraphPropertyFilter}
                                        filteredKeys={filteredKeys}/>
                     <h3>RPS</h3>
diff --git a/ui/src/features/components/TestForm/StepForm.js b/ui/src/features/components/TestForm/StepForm.js
index a95e37a91..362f23251 100644
--- a/ui/src/features/components/TestForm/StepForm.js
+++ b/ui/src/features/components/TestForm/StepForm.js
@@ -10,8 +10,12 @@ import ProcessorsDropDown from './ProcessorsDropDown';
 import style from './stepform.scss';
 import Input from "../../../components/Input";
 import TitleInput from "../../../components/TitleInput";
-import Button from "../../../components/Button";
 import Dropdown from "../../../components/Dropdown/Dropdown.export";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {
+    faPlus,
+    faMinus
+} from '@fortawesome/free-solid-svg-icons'
 
 export default (props) => {
     const sampleObject = {};
@@ -29,12 +33,24 @@ export default (props) => {
         step.headers.push({});
         onChangeValue(step, props.index);
     };
+    const onDeleteHeader = (index) => {
+        const {onChangeValue} = props;
+        const step = cloneDeep(props.step);
+        step.headers.splice(index, 1);
+        onChangeValue(step, props.index);
+    };
     const onAddCapture = () => {
         const {onChangeValue} = props;
         const step = cloneDeep(props.step);
         step.captures.push({});
         onChangeValue(step, props.index);
     };
+    const onDeleteCapture = (index) => {
+        const {onChangeValue} = props;
+        const step = cloneDeep(props.step);
+        step.captures.splice(index, 1);
+        onChangeValue(step, props.index);
+    };
     const onCaptureChange = (key, value, index) => {
         const {onChangeValue} = props;
         const step = cloneDeep(props.step);
@@ -69,18 +85,28 @@ export default (props) => {
     return (
         <div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
             <div className={style['http-methods-request-options-wrapper']}>
-                <RectangleAlignChildrenLeft className={style['rectangle-http-methods']}>
-                    <TitleInput title={'Method'}>
+                <RectangleAlignChildrenLeft className={style['rectangle-url-row']}>
+                    <TitleInput style={{flex: 0, marginRight: '10px'}} width={'120px'} title={'Method'}>
                         <HttpMethodDropdown
                             value={step.method}
                             onChange={(value) => onInputChange('method', value)}
                         />
                     </TitleInput>
-                    <TitleInput style={{width: '100%'}} title={'Enter Url'}>
+                    <TitleInput style={{marginRight: '10px', flexGrow: 2}} title={'Url'}>
                         <Input value={step.url} onChange={(evt) => {
                             onInputChange('url', evt.target.value)
                         }}/>
                     </TitleInput>
+                    <TitleInput style={{marginRight: '10px'}} title={'Before Request'}>
+                        <ProcessorsDropDown options={processorsExportedFunctions}
+                                            onChange={(value) => onInputChange('beforeRequest', value)}
+                                            value={step.beforeRequest}/>
+                    </TitleInput>
+                    <TitleInput title={'After Response'}>
+                        <ProcessorsDropDown options={processorsExportedFunctions}
+                                            onChange={(value) => onInputChange('afterResponse', value)}
+                                            value={step.afterResponse}/>
+                    </TitleInput>
                     <RequestOptions
                         onGzipToggleChanged={(value) => onInputChange('gzip', value)}
                         onForeverToggleChanged={(value) => onInputChange('forever', value)}
@@ -92,36 +118,25 @@ export default (props) => {
 
             </div>
             <RectangleAlignChildrenLeft/>
-            <Header text={'Headers'}/>
-            <DynamicKeyValueInput value={step.headers} onChange={onHeaderChange}/>
-            <Button style={{width: '100px', minWidth: '0', marginBottom: '40px'}} inverted
-                    onClick={onAddHeader}>+Add</Button>
-            <Header text={'Captures'}/>
-            <DynamicKeyValueInput value={step.captures} onChange={onCaptureChange}
-                                  keyHintText={'$.id'} valueHintText={'id'}/>
-            <Button style={{width: '100px', minWidth: '0', marginBottom: '40px'}} inverted
-                    onClick={onAddCapture}>+Add</Button>
-            <Header text={'Processors'}/>
-            <div style={{
-                display: 'flex',
-                flexDirection: 'row',
-                width: '100%',
-                alignItems: 'center',
-                marginBottom: '40px'
-            }}>
-                <TitleInput title={'Before Request'}>
-                    <ProcessorsDropDown options={processorsExportedFunctions}
-                                        onChange={(value) => onInputChange('beforeRequest', value)}
-                                        value={step.beforeRequest}/>
-                </TitleInput>
-                <TitleInput title={'After Response'}>
-                    <ProcessorsDropDown options={processorsExportedFunctions}
-                                        onChange={(value) => onInputChange('afterResponse', value)}
-                                        value={step.afterResponse}/>
-                </TitleInput>
+            <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly'}}>
+                <div>
+                    <Header text={'Headers'}/>
+                    <DynamicKeyValueInput value={step.headers} onAdd={onAddHeader} onDelete={onDeleteHeader}
+                                          onChange={onHeaderChange}/>
+                </div>
+                <div>
+                    <Header text={'Captures'}/>
+                    <DynamicKeyValueInput value={step.captures} onChange={onCaptureChange} onAdd={onAddCapture}
+                                          onDelete={onDeleteCapture} keyHintText={'$.id'} valueHintText={'id'}/>
+
+                </div>
             </div>
             <Header text={'Body'}/>
             <JSONInput
+                style={{
+                    outerBox: {height: null, 'min-height': '200px'},
+                    container: {height: null, border: '1px solid #557EFF', 'min-height': '200px'}
+                }}
                 key={jsonObjectKey}
                 id='a_unique_id'
                 placeholder={step.body || (disableSampleBody ? undefined : sampleObject)}
@@ -132,7 +147,6 @@ export default (props) => {
                     keys: 'blue'
                 }}
                 locale={locale}
-                height={'200px'}
                 width={'100%'}
                 onChange={onBodyChange}
             />
@@ -141,7 +155,7 @@ export default (props) => {
     )
 }
 
-const DynamicKeyValueInput = ({value, onChange, keyHintText, valueHintText}) => {
+const DynamicKeyValueInput = ({value, onChange, onAdd, onDelete, keyHintText, valueHintText}) => {
     const headersList = value
         .map((header, index) => {
             return (
@@ -150,7 +164,7 @@ const DynamicKeyValueInput = ({value, onChange, keyHintText, valueHintText}) =>
                     flexDirection: 'row',
                     width: '100%',
                     marginBottom: index !== headersList - 1 ? '5px' : undefined
-                }} key={index}>
+                }} key={`${index}.${header.key}.${header.value}`}>
                     <Input style={{marginRight: '10px'}} value={header.key} onChange={(evt) => {
                         onChange('key', evt.target.value, index)
                     }} placeholder={keyHintText || 'key'}/>
@@ -158,12 +172,25 @@ const DynamicKeyValueInput = ({value, onChange, keyHintText, valueHintText}) =>
                     <Input value={header.value} onChange={(evt) => {
                         onChange('value', evt.target.value, index)
                     }} placeholder={valueHintText || 'value'}/>
+
+                    {
+                        value.length - 1 === index &&
+                        <FontAwesomeIcon
+                            style={{alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
+                            onClick={() => onAdd(index)}
+                            icon={faPlus}/>
+                        ||
+                        (index < value.length - 1 && <FontAwesomeIcon
+                            style={{alignSelf: 'center', color: '#557EFF', cursor: 'pointer', marginLeft: '10px'}}
+                            onClick={() => onDelete(index)}
+                            icon={faMinus}/>)
+                    }
                 </div>
             )
         });
 
     return (
-        <div style={{display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '22px'}}>
+        <div style={{display: 'flex', flexDirection: 'column', width: '100%', marginBottom: '10px'}}>
             {headersList}
         </div>
     )
diff --git a/ui/src/features/components/TestForm/collapsibleScenarioConfig.js b/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
index 93cb70ef1..7c8f21eab 100644
--- a/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
+++ b/ui/src/features/components/TestForm/collapsibleScenarioConfig.js
@@ -22,7 +22,7 @@ export default class CollapsibleScenarioConfig extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            expanded: true
+            expanded: false
         }
     }
 
diff --git a/ui/src/features/components/TestForm/collapsibleStep.js b/ui/src/features/components/TestForm/collapsibleStep.js
index d65cacbae..3e4461f6a 100644
--- a/ui/src/features/components/TestForm/collapsibleStep.js
+++ b/ui/src/features/components/TestForm/collapsibleStep.js
@@ -9,7 +9,7 @@ export default class CollapsibleStep extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            expanded: false
+            expanded: true
         }
     }
 
diff --git a/ui/src/features/components/TestForm/index.js b/ui/src/features/components/TestForm/index.js
index 60f491b65..e63784218 100644
--- a/ui/src/features/components/TestForm/index.js
+++ b/ui/src/features/components/TestForm/index.js
@@ -114,7 +114,8 @@ export class TestForm extends React.Component {
         const {name, description, baseUrl, processorId, editMode, maxSupportedScenariosUi} = this.state;
         const error = createTestError || processorsError || maxSupportedScenariosUi;
         return (
-            <Modal style={{paddingTop: '65px'}} height={'93%'} onExit={closeDialog}>
+            <Modal style={{paddingTop: '12px', paddingBottom: '12px', paddingLeft: '40px', paddingRight: '40px'}}
+                   height={'100%'} width={'100%'} maxWidth={'1440px'} onExit={closeDialog}>
                 <FormWrapper title={`${editMode && 'Edit' || 'Create'} Test`}>
                     <div className={style['top']}>
                         <div className={style['top-inputs']}>
diff --git a/ui/src/features/components/TestForm/stepform.scss b/ui/src/features/components/TestForm/stepform.scss
index c93f09f33..2ebd484ed 100644
--- a/ui/src/features/components/TestForm/stepform.scss
+++ b/ui/src/features/components/TestForm/stepform.scss
@@ -5,7 +5,7 @@
   flex-direction: row;
   justify-content: space-between;
 }
-.rectangle-http-methods {
+.rectangle-url-row {
   width:100%;
-  margin-bottom: 22px;
+  margin-bottom: 10px;
 }
diff --git a/ui/src/features/components/TestForm/style.scss b/ui/src/features/components/TestForm/style.scss
index 469f445b5..ba97be490 100644
--- a/ui/src/features/components/TestForm/style.scss
+++ b/ui/src/features/components/TestForm/style.scss
@@ -7,7 +7,8 @@
 }
 
 .top {
-  padding: 10px 12px;
+  padding-right: 12px;
+  padding-left: 12px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;