Add when param functionality to the config renderer

replicatedhq · Oct 30, 2019 · c33351d · c33351d
1 parent 813a93f
commit c33351d
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 10 deletions.
diff --git a/web/init/package.json b/web/init/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@replicatedhq/ship-init",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "description": "Shared component that contains the Ship Init app",
   "author": "Replicated, Inc.",
   "license": "Apache-2.0",

diff --git a/web/init/src/components/config_render/ConfigCheckbox.jsx b/web/init/src/components/config_render/ConfigCheckbox.jsx
@@ -18,8 +18,10 @@ export default class ConfigCheckbox extends React.Component {
     }
     var checked = val === "1";
 
+    var hidden = this.props.hidden || this.props.when === "false";
+
     return (
-      <div className={`field field-checkbox-wrapper u-marginTop--15 flex ${this.props.hidden ? "hidden" : ""}`}>
+      <div className={`field field-checkbox-wrapper u-marginTop--15 flex ${hidden ? "hidden" : ""}`}>
         <span className="u-marginTop--10 config-errblock" id={`${this.props.name}-errblock`}></span>
         <div className="flex-auto flex u-marginRight--20">
           <input

diff --git a/web/init/src/components/config_render/ConfigFileInput.jsx b/web/init/src/components/config_render/ConfigFileInput.jsx
@@ -29,10 +29,11 @@ export default class ConfigFileInput extends React.Component {
     return this.props.default;
   }
 
-
   render() {
+    var hidden = this.props.hidden || this.props.when === "false";
+
     return (
-      <div className={`field field-type-file u-marginTop--15 ${this.props.hidden ? "hidden" : ""}`}>
+      <div className={`field field-type-file u-marginTop--15 ${hidden ? "hidden" : ""}`}>
         {this.props.title !== "" ?
           <ConfigItemTitle
             title={this.props.title}

diff --git a/web/init/src/components/config_render/ConfigGroup.jsx b/web/init/src/components/config_render/ConfigGroup.jsx
@@ -32,6 +32,7 @@ export default class ConfigGroup extends React.Component {
             handleOnChange={this.handleItemChange}
             inputType="text"
             hidden={item.hidden}
+            when={item.when}
             {...item}
           />
         );
@@ -41,6 +42,7 @@ export default class ConfigGroup extends React.Component {
             key={`${i}-${item.name}`}
             handleOnChange={this.handleItemChange}
             hidden={item.hidden}
+            when={item.when}
             {...item}
           />
         );
@@ -50,6 +52,7 @@ export default class ConfigGroup extends React.Component {
             key={`${i}-${item.name}`}
             handleOnChange={this.handleItemChange}
             hidden={item.hidden}
+            when={item.when}
             {...item}
           />
         );
@@ -61,6 +64,7 @@ export default class ConfigGroup extends React.Component {
               recommended={item.recommended}
               required={item.required}
               hidden={item.hidden}
+              when={item.when}
               name={item.name}
             />
           </div>
@@ -75,6 +79,7 @@ export default class ConfigGroup extends React.Component {
               required={item.required}
               handleChange={this.handleItemChange}
               hidden={item.hidden}
+              when={item.when}
             />
           </div>
         );
@@ -84,12 +89,13 @@ export default class ConfigGroup extends React.Component {
             key={`${i}-${item.name}`}
             handleOnChange={this.handleItemChange}
             hidden={item.hidden}
+            when={item.when}
             {...item}
           />
         );
       case "heading":
         return (
-          <div key={`${i}-${item.name}`} className={`u-marginTop--40 u-marginBottom--15 ${item.hidden ? "hidden" : ""}`}>
+          <div key={`${i}-${item.name}`} className={`u-marginTop--40 u-marginBottom--15 ${item.hidden || item.when === "false" ? "hidden" : ""}`}>
             <h3 className="header-color field-section-header">{item.title}</h3>
           </div>
         );
@@ -99,6 +105,7 @@ export default class ConfigGroup extends React.Component {
             key={`${i}-${item.name}`}
             handleOnChange={this.handleItemChange}
             hidden={item.hidden}
+            when={item.when}
             inputType="password"
             {...item}
           />

diff --git a/web/init/src/components/config_render/ConfigInput.jsx b/web/init/src/components/config_render/ConfigInput.jsx
@@ -36,8 +36,10 @@ export default class ConfigInput extends React.Component {
   // Use title -OR- required prop to render <ConfigItemTitle> to make sure error
   // elements are rendered.
   render() {
+    var hidden = this.props.hidden || this.props.when === "false";
+
     return (
-      <div className={`field field-type-text ${this.props.hidden ? "hidden" : "u-marginTop--15"}`}>
+      <div className={`field field-type-text ${hidden ? "hidden" : "u-marginTop--15"}`}>
         {this.props.title !== "" || this.props.required ?
           <ConfigItemTitle
             title={this.props.title}

diff --git a/web/init/src/components/config_render/ConfigItemTitle.jsx b/web/init/src/components/config_render/ConfigItemTitle.jsx
@@ -6,11 +6,15 @@ export default class ConfigItemTitle extends React.Component {
     const {
       title,
       recommended,
-      required
+      required,
+      hidden,
+      when
     } = this.props;
 
+    var isHidden = hidden || when === "false";
+
     return (
-      <h4 className={`sub-header-color field-section-sub-header ${this.props.hidden ? "hidden" : ""}`}>{title} {
+      <h4 className={`sub-header-color field-section-sub-header ${isHidden ? "hidden" : ""}`}>{title} {
         required ? 
           <span className="field-label required">Required</span> :
           recommended ? 

diff --git a/web/init/src/components/config_render/ConfigSelectOne.jsx b/web/init/src/components/config_render/ConfigSelectOne.jsx
@@ -32,8 +32,10 @@ export default class ConfigSelectOne extends React.Component {
       )
     });
 
+    var hidden = this.props.hidden || this.props.when === "false";
+
     return (
-      <div className={`field field-type-select-one ${this.props.hidden ? "hidden" : "u-marginTop--15"}`}>
+      <div className={`field field-type-select-one ${hidden ? "hidden" : "u-marginTop--15"}`}>
         {this.props.title !== "" ?
           <ConfigItemTitle
             title={this.props.title}

diff --git a/web/init/src/components/config_render/ConfigTextarea.jsx b/web/init/src/components/config_render/ConfigTextarea.jsx
@@ -33,8 +33,10 @@ export default class ConfigTextarea extends React.Component {
   }
 
   render() {
+    var hidden = this.props.hidden || this.props.when === "false";
+
     return (
-      <div className={`field field-type-text u-marginTop--15 ${this.props.hidden ? "hidden" : ""}`}>
+      <div className={`field field-type-text u-marginTop--15 ${hidden ? "hidden" : ""}`}>
         {this.props.title !== "" ?
           <ConfigItemTitle
             title={this.props.title}