adds validation for resolver detail fields

ui/components/resolvers/ResolverDetail.js

@@ -8,6 +8,8 @@ import {
     EmptyStateIcon,
     EmptyStateTitle
 } from "patternfly-react";
+import some from "lodash.some";
+import { Validate, Validators } from "../../helper/Validators";
 
 import { DataSourcesDropDown } from "./DataSourcesDropDown";
 import { MappingTemplateDropDown } from "./MappingTemplateDropDown";
@@ -29,7 +31,12 @@ const INITIAL_STATE = {
     requestMappingTemplate: "Custom",
     responseMappingTemplate: "Custom",
     isResolverSaved: true,
-    err: ""
+    err: "",
+    validations: {
+        dataSource: null,
+        preHook: null,
+        postHook: null
+    }
 };
 
 class ResolverDetail extends Component {
@@ -55,6 +62,44 @@ class ResolverDetail extends Component {
         this.updateResolver({ responseMapping: template.value });
     }
 
+    onDataSourceSelect(DataSource) {
+        const dsValidation = DataSource !== null ? "success" : "error";
+
+        const { validations } = this.state;
+        const newValidations = { ...validations, dataSource: dsValidation };
+
+        this.setState({ validations: newValidations });
+        this.updateResolver({ DataSource });
+    }
+
+    onPreHookChange(preHook) {
+        const preHookValidation = Validate([
+            Validators.String.minLength(1), preHook,
+            Validators.String.maxLength(255), preHook,
+            Validators.URL.valid, preHook
+        ]);
+
+        const { validations } = this.state;
+        const newValidations = { ...validations, preHook: preHookValidation };
+
+        this.setState({ validations: newValidations });
+        this.updateResolver({ preHook });
+    }
+
+    onPostHookChange(postHook) {
+        const postHookValidation = Validate([
+            Validators.String.minLength(1), postHook,
+            Validators.String.maxLength(255), postHook,
+            Validators.URL.valid, postHook
+        ]);
+
+        const { validations } = this.state;
+        const newValidations = { ...validations, postHook: postHookValidation };
+
+        this.setState({ validations: newValidations });
+        this.updateResolver({ postHook });
+    }
+
     updateResolver(newProps) {
         const { resolver } = this.state;
         const { onResolverEdit } = this.props;
@@ -108,7 +153,7 @@ class ResolverDetail extends Component {
     }
 
     render() {
-        const { resolver, requestMappingTemplate, responseMappingTemplate, isResolverSaved } = this.state;
+        const { resolver, requestMappingTemplate, responseMappingTemplate, isResolverSaved, validations } = this.state;
 
         if (!resolver) {
             return this.renderEmptyScreen();
@@ -117,6 +162,8 @@ class ResolverDetail extends Component {
         const { field, type, DataSource, requestMapping, responseMapping, preHook, postHook } = resolver;
         const { requestMappingTemplates, responseMappingTemplates } = getTemplatesForDataSource(DataSource);
 
+        const isSaveButtonDisabled = isResolverSaved || some(validations, s => !s || s === "error");
+
         return (
             <React.Fragment>
                 <h3 className={detailHeader}>Edit {type}.{field}</h3>
@@ -128,10 +175,10 @@ class ResolverDetail extends Component {
                     </h3>
 
                     <Form horizontal className={formContainer}>
-                        <FormGroup controlId="dataSource" className={detailFormGroup}>
+                        <FormGroup controlId="dataSource" className={detailFormGroup} validationState={validations.dataSource}>
                             <DataSourcesDropDown
                                 selected={DataSource}
-                                onDataSourceSelect={ds => this.updateResolver({ DataSource: ds })}
+                                onDataSourceSelect={ds => this.onDataSourceSelect(ds)}
                             />
                         </FormGroup>
 
@@ -157,19 +204,19 @@ class ResolverDetail extends Component {
                             />
                         </FormGroup>
 
-                        <FormGroup controlId="preHook" className={detailFormGroup}>
+                        <FormGroup controlId="preHook" className={detailFormGroup} validationState={validations.preHook}>
                             <HookFormGroup
                                 label="Pre Hook"
                                 url={preHook}
-                                onChange={h => this.updateResolver({ preHook: h })}
+                                onChange={hook => this.onPreHookChange(hook)}
                             />
                         </FormGroup>
 
-                        <FormGroup controlId="postHook" className={detailFormGroup}>
+                        <FormGroup controlId="postHook" className={detailFormGroup} validationState={validations.postHook}>
                             <HookFormGroup
                                 label="Post Hook"
                                 url={postHook}
-                                onChange={h => this.updateResolver({ postHook: h })}
+                                onChange={hook => this.onPostHookChange(hook)}
                             />
                         </FormGroup>
                     </Form>
@@ -180,7 +227,7 @@ class ResolverDetail extends Component {
                         className={buttonSave}
                         bsStyle="primary"
                         onClick={() => this.save()}
-                        disabled={isResolverSaved}
+                        disabled={isSaveButtonDisabled}
                     >
                         Save
                     </Button>

ui/helper/Validators.js

@@ -15,6 +15,15 @@ const Validators = {
     },
     Boolean: {
         valid: b => typeof b === typeof true
+    },
+    URL: {
+        valid: u => {
+            try {
+                return !!new URL(u);
+            } catch (e) {
+                return false;
+            }
+        }
     }
 };