Fixed issue where validation was not showing up for source/target connection in project settings (#571)

src/index.scss

@@ -13,7 +13,7 @@ input[type=file] {
 ::-webkit-scrollbar {
     width: 6px;
 }
- 
+
 /* Track */
 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px $darker-3;
@@ -21,19 +21,25 @@ input[type=file] {
     border-radius: 10px;
     border-radius: 10px;
 }
- 
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     border-radius: 10px;
-	background: $lighter-4; 
-    box-shadow:  0 0 6px $darker-3; 
+	background: $lighter-4;
+    box-shadow:  0 0 6px $darker-3;
 }
 ::-webkit-scrollbar-thumb:window-inactive {
-	background: $lighter-4; 
+	background: $lighter-4;
 }
 
-.form-group {
+.form-group, .object-wrapper {
+    margin-bottom: 1rem;
+
+    .field-description {
+        margin-bottom: 0.25rem;
+    }
+
     &.is-invalid {
         .invalid-feedback {
             display: block;
@@ -53,4 +59,4 @@ input[type=file] {
             border: solid 1px #62c462;
         }
     }
-}
+}

src/react/components/common/common.scss

@@ -10,6 +10,7 @@
         display: flex;
         flex-direction: row;
         flex-grow: 1;
+        margin-bottom: 0;
     }
 
     .form-group {

src/react/components/common/customField/customFieldTemplate.test.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { FieldTemplateProps, Field } from "react-jsonschema-form";
+import { ReactWrapper, mount } from "enzyme";
+import CustomFieldTemplate from "./customFieldTemplate";
+
+describe("Custom Field Template Component", () => {
+    const defaultProps: any = {
+        id: "dom-id",
+        label: "I am the label",
+        rawDescription: "I am the description",
+        description: null,
+        required: true,
+        rawErrors: [],
+        schema: {
+            type: "field",
+        },
+        uiSchema: {},
+    };
+
+    function createProps(props: any = {}): FieldTemplateProps {
+        return {
+            ...defaultProps,
+            ...props,
+        };
+    }
+
+    function createComponent(props: FieldTemplateProps): ReactWrapper {
+        return mount(<CustomFieldTemplate {...props} />);
+    }
+
+    it("renders with 'object-wrapper' when schema is an object", () => {
+        const props = createProps({
+            schema: {
+                type: "object",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find(".object-wrapper").exists()).toBe(true);
+    });
+
+    it("renders with 'form-group' when schema is a field", () => {
+        const props = createProps({
+            label: "Custom label",
+            description: "Custom description",
+            required: true,
+            schema: {
+                type: "field",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find(".form-group").exists()).toBe(true);
+        expect(wrapper.find("label").exists()).toBe(true);
+        expect(wrapper.find("label").text()).toEqual(`${props.label}*`);
+        expect(wrapper.find(".text-muted").exists()).toBe(true);
+        expect(wrapper.find(".text-muted").text()).toEqual(props.description);
+    });
+
+    it("renders with 'is-invalid' when form contains errors", () => {
+        const props = createProps({
+            rawErrors: ["Error 1"],
+            schema: {
+                type: "field",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find(".is-invalid").exists()).toBe(true);
+    });
+
+    it("renders with 'is-valid' when form does not contain errors", () => {
+        const props = createProps({
+            rawErrors: [],
+            schema: {
+                type: "field",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find(".is-valid").exists()).toBe(true);
+    });
+
+    it("renders error messages when an error exists", () => {
+        const props = createProps({
+            rawErrors: ["Error 1"],
+            schema: {
+                type: "field",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find(".invalid-feedback").text()).toContain(props.rawErrors[0]);
+    });
+
+    it("renders an array template correctly", () => {
+        const props = createProps({
+            label: "Array Label",
+            description: "Array Description",
+            schema: {
+                type: "array",
+            },
+        });
+        const wrapper = createComponent(props);
+
+        expect(wrapper.find("h4").exists()).toBe(true);
+        expect(wrapper.find("h4").text()).toEqual(props.label);
+        expect(wrapper.find("small").exists()).toBe(true);
+        expect(wrapper.find("small").text()).toEqual(props.description);
+    });
+});

src/react/components/common/customField/customFieldTemplate.tsx

@@ -2,34 +2,35 @@ import React, { Fragment } from "react";
 import { FieldTemplateProps } from "react-jsonschema-form";
 
 export default function CustomFieldTemplate(props: FieldTemplateProps) {
-    const { id, label, required, description, help, rawErrors, children } = props;
+    const { id, label, required, description, rawErrors, schema, uiSchema, children } = props;
     const classNames = [];
     if (props.schema.type === "object") {
         classNames.push("object-wrapper");
     } else {
         classNames.push("form-group");
-        if (rawErrors && rawErrors.length > 0) {
-            classNames.push("is-invalid");
-        } else {
-            classNames.push("is-valid");
-        }
+    }
+
+    if (rawErrors && rawErrors.length > 0) {
+        classNames.push("is-invalid");
+    } else {
+        classNames.push("is-valid");
     }
 
     return (
         <div className={classNames.join(" ")}>
             { /* Render label for non-objects except for when an object has defined a ui:field template */}
-            {props.schema.type !== "array" &&
-                (props.schema.type !== "object" || (props.schema.type === "object" && props.uiSchema["ui:field"])) &&
+            {schema.type !== "array" &&
+                (schema.type !== "object" || (schema.type === "object" && uiSchema["ui:field"])) &&
                 <label htmlFor={id}>{label}{required ? "*" : null}</label>
             }
-            {props.schema.type === "array" &&
+            {schema.type === "array" &&
                 <Fragment>
                     <h4>{label}</h4>
                     {description && <small>{description}</small>}
                 </Fragment>
             }
             {children}
-            {props.schema.type !== "array" && description && <small className="text-muted">{description}</small>}
+            {schema.type !== "array" && description && <small className="text-muted">{description}</small>}
             {rawErrors && rawErrors.length > 0 &&
                 <div className="invalid-feedback">
                     {rawErrors.map((errorMessage, idx) => <div key={idx}>{label} {errorMessage}</div>)}