fix(url): show error if urls dont have protocol and disable test run …

ui/constants/constants.js

@@ -0,0 +1,9 @@
+const EMPTY_STRING = "";
+const INVALID_URL_MESSAGE = "URL should begin with a protocol";
+const URL_WITH_PROTOCOL_REGEX = /^((http)|(https))(:\/\/)(.*)$/;
+
+export {
+  EMPTY_STRING,
+  INVALID_URL_MESSAGE,
+  URL_WITH_PROTOCOL_REGEX,
+}

ui/src/components/ErrorWrapper/ErrorWrapper.scss

@@ -8,7 +8,6 @@
 }
 
 .error-text {
-  position: absolute;
   top: 100%;
   font-size: 11px;
   line-height: 11px;

ui/src/features/components/TestForm/StepForm.js

@@ -20,9 +20,17 @@ import TitleInput from "../../../components/TitleInput";
 import DynamicKeyValueInput from './DynamicKeyValueInput';
 import CustomDropdown from './CustomDropdown';
 import Expectations from './Expectations';
+import ErrorWrapper from '../../../components/ErrorWrapper'
+import { isUrlValid, URL_FIELDS } from "../../../validators/validate-urls";
+import { INVALID_URL_MESSAGE } from "../../../../constants/constants";
 
 export default (props) => {
 
+    const validateUrl = ({ name, value }) => {
+        props.validateUrl({ name, value })
+        onInputChange({ url: value });
+    };
+
     const onHeaderChange = (key, value, index) => {
         const {onChangeValue} = props;
         const step = cloneDeep(props.step);
@@ -108,7 +116,9 @@ export default (props) => {
     };
 
     const {
-        step, processorsExportedFunctions
+        step,
+        processorsExportedFunctions,
+        validationError,
     } = props;
     const jsonObjectKey = step.method === 'GET' ? 'get' : 'not-get';
 
@@ -126,10 +136,12 @@ export default (props) => {
                             placeHolder={'Method'}
                         />
                     </TitleInput>
-                    <TitleInput style={{marginRight: '10px', flexGrow: 2}} title={'Url'}>
-                        <Input value={step.url} onChange={(evt) => {
-                            onInputChange({url: evt.target.value})
-                        }}/>
+                    <TitleInput style={{marginRight: '10px', flexGrow: 2 }} title={'Url'}>
+                        <ErrorWrapper errorText={validationError}>
+                            <Input value={step.url} onChange={(evt) => {
+                                validateUrl({ name: URL_FIELDS.STEP, value: evt.target.value });
+                            }} />
+                        </ErrorWrapper>
                     </TitleInput>
                     <TitleInput style={{marginRight: '10px'}} title={'Before Request'}>
                         <ProcessorsDropDown options={processorsExportedFunctions}

ui/src/features/components/TestForm/collapsibleStep.js

@@ -6,6 +6,7 @@ import Input from '../../../components/Input';
 
 const Section = CollapsibleItem.Section;
 const SLEEP = 'sleep';
+
 export default class CollapsibleStep extends React.Component {
   constructor (props) {
     super(props);
@@ -75,7 +76,14 @@ export default class CollapsibleStep extends React.Component {
     };
 
     generateBody = () => {
-      const { index, onChangeValueOfStep, processorsExportedFunctions, step } = this.props;
+      const {
+        index,
+        onChangeValueOfStep,
+        processorsExportedFunctions,
+        step,
+        validationError,
+        validateUrl,
+      } = this.props;
       return (
         <div style={{ padding: '10px' }}>
           {
@@ -84,7 +92,10 @@ export default class CollapsibleStep extends React.Component {
               index={index}
               onChangeValue={onChangeValueOfStep}
             /> ||
-            <StepForm step={step}
+            <StepForm
+              step={step}
+              validationError={validationError}
+              validateUrl={validateUrl}
               index={index}
               onChangeValue={onChangeValueOfStep}
               processorsExportedFunctions={processorsExportedFunctions}

ui/src/features/components/TestForm/index.js

@@ -15,6 +15,7 @@ import TitleInput from '../../../components/TitleInput';
 import TextArea from '../../../components/TextArea';
 import StepsList from './stepsList';
 import FormWrapper from '../../../components/FormWrapper';
+import ErrorWrapper from '../../../components/ErrorWrapper'
 import CollapsibleScenarioConfig from './collapsibleScenarioConfig';
 import { FileDrop } from 'react-file-drop';
 import env from '../../../App/common/env';
@@ -25,10 +26,12 @@ import {
   EXPECTATIONS_TYPE,
   EXPECTATIONS_SPEC_BY_PROP
 } from './constants'
+import { isUrlValid, URL_FIELDS } from "../../../validators/validate-urls";
 import IconButton from '../../../components/IconButton';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { faSave, faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { EMPTY_STRING, INVALID_URL_MESSAGE } from '../../../../constants/constants';
 
 const SLEEP = 'sleep';
 
@@ -43,19 +46,64 @@ export class TestForm extends React.Component {
         before: null,
         type: 'basic',
         name: '',
-        baseUrl: '',
         description: '',
         currentScenarioIndex: 0,
         currentStepIndex: null,
         processorId: undefined,
         processorsExportedFunctions: [],
         csvMode: false,
         csvFile: null,
-        csvFileId: undefined
+        csvFileId: undefined,
+        urls: {
+          [URL_FIELDS.BASE]: {
+            value: EMPTY_STRING,
+            error: null,
+          },
+          [URL_FIELDS.STEP]: {
+            value: EMPTY_STRING,
+            error: null,
+          },
+        }
       }
     }
   }
 
+    hasValidationErrors = () => {
+      let urlTypes = Object.values(this.state.urls);
+      return !urlTypes.some((url) => isUrlValid(url.value));
+    };
+
+    isButtonDisabled = () => {
+      return !this.state.name || this.hasValidationErrors();
+    }
+
+    updatevalidationError = ({ error }) => {
+      const newState = Object.assign({}, this.state);
+      newState.urls[URL_FIELDS.BASE].error = error;
+      newState.urls[URL_FIELDS.STEP].error = error;
+      this.setState(newState);
+    };
+
+    setValidationError = ({ error }) => {
+      this.updatevalidationError({ error });
+    };
+
+    resetValidationError = () => {
+      this.updatevalidationError({ error: null });
+    };
+
+    validateUrl = ({ name, value }) => {
+      const newState = Object.assign({}, this.state);
+      newState.urls[name].value = value;
+      this.setState(newState);
+      if (this.hasValidationErrors()) {
+        this.setValidationError({ error: INVALID_URL_MESSAGE  });
+      }
+      else {
+        this.resetValidationError();
+      }
+    };
+
     postTest = (goToRunJob) => {
       const { editMode, id } = this.state;
       const { createTest, editTest } = this.props;
@@ -120,9 +168,8 @@ export class TestForm extends React.Component {
 
     render () {
       const { createTestError, processorsError, closeDialog, processorsLoading, processorsList, csvMetadata } = this.props;
-      const { name, description, baseUrl, processorId, editMode, maxSupportedScenariosUi } = this.state;
+      const { name, description, urls, processorId, editMode, maxSupportedScenariosUi, validationErrors } = this.state;
       const error = createTestError || processorsError || maxSupportedScenariosUi;
-
       return (
         <Modal style={{ paddingTop: '12px', paddingBottom: '12px', paddingLeft: '40px', paddingRight: '40px' }}
           height={'100%'} width={'100%'} maxWidth={'1440px'} onExit={closeDialog}>
@@ -148,13 +195,14 @@ export class TestForm extends React.Component {
                   </div>
                   <div className={style['input-container']}>
                     <TitleInput style={{ flex: '1', marginTop: '2px' }} title={'Base url'}>
-                      <TextArea maxRows={5} value={baseUrl} placeholder={'http://my.api.com/'}
-                        onChange={(evt, value) => {
-                          this.setState({ baseUrl: evt.target.value })
-                        }} />
-                    </TitleInput>
+                      <ErrorWrapper errorText={this.state.urls[URL_FIELDS.BASE].error}>
+                        <TextArea maxRows={5} value={this.state.urls[URL_FIELDS.BASE].value} placeholder={'http://my.api.com/'}
+                          onChange={(evt, value) => {
+                            this.validateUrl({ name: URL_FIELDS.BASE, value: evt.target.value });
+                          }} />
+                       </ErrorWrapper>
+                      </TitleInput>
                   </div>
-
                   <div className={style['input-container']}>
                     <TitleInput style={{ flex: '1', marginTop: '2px' }} title={'Processor'}>
                       <ProcessorsDropDown
@@ -199,7 +247,7 @@ export class TestForm extends React.Component {
         <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '5px 32px 5px 0' }}>
           <IconButton style={{ marginRight: '5px' }}
             spinner={isLoading}
-            disabled={!this.state.name}
+            disabled={this.isButtonDisabled()}
             onClick={() => this.postTest(false)}
             inverted
             width='28px'
@@ -209,7 +257,7 @@ export class TestForm extends React.Component {
           </IconButton>
           <IconButton
             spinner={isLoading}
-            disabled={!this.state.name}
+            disabled={this.isButtonDisabled()}
             onClick={() => this.postTest(true)}
             inverted
             width='28px'
@@ -449,13 +497,16 @@ export class TestForm extends React.Component {
 
                     }
                     <div style={{ width: '70%' }}>
-                      <StepsList steps={tabData.steps}
+                      <StepsList
+                        steps={tabData.steps}
                         editMode={editMode}
                         onChangeValueOfStep={this.onChangeValueOfStep}
                         processorsExportedFunctions={processorsExportedFunctions}
                         onDeleteStep={this.onDeleteStep}
                         onDuplicateStep={this.onDuplicateStep}
                         updateStepOrder={this.updateStepOrder}
+                        validationError={this.state.urls[URL_FIELDS.STEP].error}
+                        validateUrl={this.validateUrl}
                       />
                     </div>
 

ui/src/features/components/TestForm/stepsList.js

@@ -17,7 +17,9 @@ export default class StepsList extends React.Component {
       onDeleteStep,
       onDuplicateStep,
       updateStepOrder,
-      editMode
+      editMode,
+      validationError,
+      validateUrl,
     } = this.props;
     return (<div style={{
       width: '100%',
@@ -48,6 +50,8 @@ export default class StepsList extends React.Component {
                 afterStepProcessorValue={afterStepProcessorValue}
                 onDeleteStep={onDeleteStep}
                 onDuplicateStep={onDuplicateStep}
+                validationError={validationError}
+                validateUrl={validateUrl}
               />
             </DragableWrapper>
           )

ui/src/validators/validate-urls.js

@@ -0,0 +1,18 @@
+import { URL_WITH_PROTOCOL_REGEX } from "../../constants/constants";
+
+const URL_FIELDS = {
+  BASE: "base",
+  STEP: "step",
+};
+
+const isUrlValid = (url) => {
+  if (URL_WITH_PROTOCOL_REGEX.test(url)) {
+    return true;
+  }
+  return false;
+};
+
+export {
+  isUrlValid,
+  URL_FIELDS,
+}