Config item error field

web/init/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@replicatedhq/ship-init",
-  "version": "1.6.16",
+  "version": "1.6.17",
   "description": "Shared component that contains the Ship Init app",
   "author": "Replicated, Inc.",
   "license": "Apache-2.0",

web/init/src/components/config_render/ConfigFileInput.jsx

@@ -40,6 +40,7 @@ export default class ConfigFileInput extends React.Component {
             recommended={this.props.recommended}
             required={this.props.required}
             name={this.props.name}
+            error={this.props.error}
           />
           : null}
         <div className="input input-type-file clearfix">

web/init/src/components/config_render/ConfigGroup.jsx

@@ -7,7 +7,7 @@ import isEmpty from "lodash/isEmpty";
 import { ConfigService } from "../../services/ConfigService";
 
 import ConfigInput from "./ConfigInput";
-import ConfixTextarea from "./ConfigTextarea";
+import ConfigTextarea from "./ConfigTextarea";
 import ConfigSelectOne from "./ConfigSelectOne";
 import ConfigItemTitle from "./ConfigItemTitle";
 import ConfigCheckbox from "./ConfigCheckbox";
@@ -38,7 +38,7 @@ export default class ConfigGroup extends React.Component {
         );
       case "textarea":
         return (
-          <ConfixTextarea
+          <ConfigTextarea
             key={`${i}-${item.name}`}
             handleOnChange={this.handleItemChange}
             hidden={item.hidden}
@@ -66,6 +66,7 @@ export default class ConfigGroup extends React.Component {
               hidden={item.hidden}
               when={item.when}
               name={item.name}
+              error={item.error}
             />
           </div>
         );

web/init/src/components/config_render/ConfigInput.jsx

@@ -55,6 +55,7 @@ export default class ConfigInput extends React.Component {
             recommended={this.props.recommended}
             required={this.props.required}
             name={this.props.name}
+            error={this.props.error}
           />
           : null}
         {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}

web/init/src/components/config_render/ConfigItemTitle.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Markdown from "react-remarkable";
+import classNames from "classnames";
 
 export default class ConfigItemTitle extends React.Component {
 
@@ -9,7 +10,8 @@ export default class ConfigItemTitle extends React.Component {
       recommended,
       required,
       hidden,
-      when
+      when,
+      error = ""
     } = this.props;
 
     var isHidden = hidden || when === "false" || (!title && !required && !recommended);
@@ -38,7 +40,7 @@ export default class ConfigItemTitle extends React.Component {
               recommended ? 
                 <span className="field-label recommended">Recommended</span> :
                   null}
-          <span className="u-marginLeft--small config-errblock" id={`${this.props.name}-errblock`}></span>
+          <span className={classNames("u-marginLeft--small config-errblock", { "visible": !!error })} id={`${this.props.name}-errblock`}>{error || ""}</span>
         </div>
       </h4>
     );

web/init/src/components/config_render/ConfigSelectOne.jsx

@@ -42,6 +42,7 @@ export default class ConfigSelectOne extends React.Component {
             recommended={this.props.recommended}
             required={this.props.required}
             name={this.props.name}
+            error={this.props.error}
           />
           : null}
         {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}

web/init/src/components/config_render/ConfigTextarea.jsx

@@ -43,6 +43,7 @@ export default class ConfigTextarea extends React.Component {
             recommended={this.props.recommended}
             required={this.props.required}
             name={this.props.name}
+            error={this.props.error}
           />
           : null}
         {this.props.help_text !== "" ? <p className="field-section-help-text u-marginTop--small u-lineHeight--normal">{this.props.help_text}</p> : null}