From 695f000d45eb05617f0d20fdd24c756465b955cc Mon Sep 17 00:00:00 2001
From: Xiaozhou Li <x.li@ultimaker.com>
Date: Mon, 10 Feb 2020 13:38:16 +0100
Subject: [PATCH] InputField new option: showValidationError

---
 .../__snapshots__/form.test.tsx.snap          |  4 ++
 .../__snapshots__/input_field.test.tsx.snap   |  1 +
 .../__snapshots__/popup_prompt.test.tsx.snap  |  1 +
 src/components/__tests__/input_field.test.tsx |  2 +
 src/components/input_field.tsx                |  1 +
 .../input_field_wrapper.test.tsx.snap         | 43 +++++++++++++++++++
 .../__tests__/input_field_wrapper.test.tsx    |  6 +++
 .../input_fields/input_field_wrapper.tsx      |  6 ++-
 8 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src/components/__tests__/__snapshots__/form.test.tsx.snap b/src/components/__tests__/__snapshots__/form.test.tsx.snap
index aa0ec0da..bd7f1160 100644
--- a/src/components/__tests__/__snapshots__/form.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/form.test.tsx.snap
@@ -42,6 +42,7 @@ exports[`The Form component should render with a form item 1`] = `
         labelLayoutWidth="1/1"
         labelWidthBreakpoint="sm"
         onChangeHandler={[MockFunction]}
+        showValidationError={true}
         staticField={false}
         type="text"
         value={null}
@@ -51,6 +52,7 @@ exports[`The Form component should render with a form item 1`] = `
           labelLayoutWidth="1/1"
           labelWidthBreakpoint="sm"
           onChangeHandler={[MockFunction]}
+          showValidationError={true}
           staticField={false}
           type="text"
           value={null}
@@ -60,6 +62,7 @@ exports[`The Form component should render with a form item 1`] = `
             labelLayoutWidth="1/1"
             labelWidthBreakpoint="sm"
             onChangeHandler={[MockFunction]}
+            showValidationError={true}
             staticField={false}
             type="text"
             value={null}
@@ -69,6 +72,7 @@ exports[`The Form component should render with a form item 1`] = `
               labelLayoutWidth="1/1"
               labelWidthBreakpoint="sm"
               onChangeHandler={[MockFunction]}
+              showValidationError={true}
               staticField={false}
               touched={false}
             >
diff --git a/src/components/__tests__/__snapshots__/input_field.test.tsx.snap b/src/components/__tests__/__snapshots__/input_field.test.tsx.snap
index fa459612..50ada3bc 100644
--- a/src/components/__tests__/__snapshots__/input_field.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/input_field.test.tsx.snap
@@ -6,6 +6,7 @@ exports[`The InputField component should render 1`] = `
   labelLayoutWidth="1/1"
   labelWidthBreakpoint="sm"
   onChangeHandler={[MockFunction]}
+  showValidationError={true}
   staticField={false}
   type="text"
   value="Test input"
diff --git a/src/components/__tests__/__snapshots__/popup_prompt.test.tsx.snap b/src/components/__tests__/__snapshots__/popup_prompt.test.tsx.snap
index 13639f78..d465a761 100644
--- a/src/components/__tests__/__snapshots__/popup_prompt.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/popup_prompt.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`The PopupPrompt component should render a prompt popup 1`] = `
     labelLayoutWidth="1/1"
     labelWidthBreakpoint="sm"
     onChangeHandler={[Function]}
+    showValidationError={true}
     staticField={false}
     type="text"
   />
diff --git a/src/components/__tests__/input_field.test.tsx b/src/components/__tests__/input_field.test.tsx
index f0a3457b..1d844bd5 100644
--- a/src/components/__tests__/input_field.test.tsx
+++ b/src/components/__tests__/input_field.test.tsx
@@ -34,6 +34,7 @@ describe('The InputField component', () => {
             labelLayoutWidth: '1/1',
             labelWidthBreakpoint: 'sm',
             onChangeHandler: props.onChangeHandler,
+            showValidationError: true,
             staticField: true,
             value: 'Test input',
         });
@@ -48,6 +49,7 @@ describe('The InputField component', () => {
             labelLayoutWidth: '1/1',
             labelWidthBreakpoint: 'sm',
             onChangeHandler: props.onChangeHandler,
+            showValidationError: true,
             staticField: false,
             value: 'Test input',
         });
diff --git a/src/components/input_field.tsx b/src/components/input_field.tsx
index 99b59fff..895b8620 100644
--- a/src/components/input_field.tsx
+++ b/src/components/input_field.tsx
@@ -84,6 +84,7 @@ export class InputField extends React.Component<OldInputFieldProps, {}> {
         labelLayoutWidth: '1/1',
         labelWidthBreakpoint: 'sm',
         staticField: false,
+        showValidationError: true,
     };
 
     render() {
diff --git a/src/components/input_fields/__tests__/__snapshots__/input_field_wrapper.test.tsx.snap b/src/components/input_fields/__tests__/__snapshots__/input_field_wrapper.test.tsx.snap
index c7f14ba5..50822b75 100644
--- a/src/components/input_fields/__tests__/__snapshots__/input_field_wrapper.test.tsx.snap
+++ b/src/components/input_fields/__tests__/__snapshots__/input_field_wrapper.test.tsx.snap
@@ -100,3 +100,46 @@ exports[`The input field wrapper component should render a wrapper without any o
   </div>
 </div>
 `;
+
+exports[`The input field wrapper component should render a wrapper without the validation error 1`] = `
+<div
+  className="input-field layout test-input-class"
+>
+  <InputFieldLabel
+    id="testInputId"
+    infoLinkURL="http://info.url"
+    infoText="Click for more info"
+    label="Test Input Label"
+    labelLayoutWidth="1/2"
+    labelWidthBreakpoint="xs"
+    preLabelElement="*"
+  />
+  <div
+    className="layout__item u-fill layout__item--middle test-input-class text-center"
+  >
+    <div
+      className="input-container layout layout--gutter-xs"
+    >
+      <div
+        className="input-wrapper-children layout__item u-fill"
+      >
+        <div>
+          child
+        </div>
+      </div>
+      <div
+        className="layout__item u-fit input-field__field-addition"
+      >
+        <Icon(RequiredIcon) />
+      </div>
+    </div>
+  </div>
+  <div
+    className="layout__item u-fit input-children"
+  >
+    <div>
+      input child
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/input_fields/__tests__/input_field_wrapper.test.tsx b/src/components/input_fields/__tests__/input_field_wrapper.test.tsx
index f237bfe5..c3c6c5de 100644
--- a/src/components/input_fields/__tests__/input_field_wrapper.test.tsx
+++ b/src/components/input_fields/__tests__/input_field_wrapper.test.tsx
@@ -24,6 +24,7 @@ describe('The input field wrapper component', () => {
             required: true,
             submitted: false,
             validationError: 'A validation error!',
+            showValidationError: true,
             touched: true,
             children: <div>child</div>,
             inputChildren: <div>input child</div>,
@@ -50,4 +51,9 @@ describe('The input field wrapper component', () => {
         wrapper = shallow(<InputFieldWrapper {...props} />);
         expect(wrapper).toMatchSnapshot();
     });
+
+    it('should render a wrapper without the validation error', () => {
+        wrapper.setProps({ showValidationError: false });
+        expect(wrapper).toMatchSnapshot();
+    });
 });
diff --git a/src/components/input_fields/input_field_wrapper.tsx b/src/components/input_fields/input_field_wrapper.tsx
index 8a4338a1..a65fe645 100644
--- a/src/components/input_fields/input_field_wrapper.tsx
+++ b/src/components/input_fields/input_field_wrapper.tsx
@@ -42,6 +42,8 @@ export interface InputFieldProps {
      * It should be translated. Can be JSX.Element[] if returned from I18n.interpolateElements
      */
     validationError?: string | JSX.Element[];
+    /** Whether to show the validation error message or not */
+    showValidationError?: boolean;
 }
 
 /**
@@ -80,8 +82,8 @@ export class InputFieldWrapper extends React.Component<InputFieldWrapperProps, {
     }
 
     private _showValidationError(): boolean {
-        const { validationError, submitted, touched } = this.props;
-        return validationError && (touched || submitted);
+        const { validationError, submitted, touched, showValidationError } = this.props;
+        return validationError && (touched || submitted) && showValidationError;
     }
 
     private _renderLabel(): JSX.Element {