passing readonly prop to config inputs

replicatedhq · Dec 24, 2020 · 79590e7 · 79590e7
1 parent fdc5683
commit 79590e7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/web/init/src/ShipConfigRenderer.jsx b/web/init/src/ShipConfigRenderer.jsx
@@ -23,7 +23,7 @@ export class ShipConfigRenderer extends React.Component {
   }
 
   render() {
-    const { groups } = this.props;
+    const { groups, readonly } = this.props;
     const orderedFields = sortBy(groups, "position");
     const _groups = keyBy(orderedFields, "name");
     const groupsList = map(groups, "name");
@@ -35,6 +35,7 @@ export class ShipConfigRenderer extends React.Component {
           fields={_groups}
           handleChange={this.props.handleChange || (() => { return; })}
           getData={this.props.getData || (() => { return; })}
+          readonly={readonly}
         />
       </div>
     )

diff --git a/web/init/src/components/config_render/ConfigGroup.jsx b/web/init/src/components/config_render/ConfigGroup.jsx
@@ -21,7 +21,7 @@ export default class ConfigGroup extends React.Component {
     }
   }
 
-  renderConfigItems = (items) => {
+  renderConfigItems = (items, readonly) => {
     if (!items) return null;
     return items.map((item, i) => {
       switch (item.type) {
@@ -34,6 +34,7 @@ export default class ConfigGroup extends React.Component {
             hidden={item.hidden}
             when={item.when}
             {...item}
+            readonly={readonly}
           />
         );
       case "textarea":
@@ -44,6 +45,7 @@ export default class ConfigGroup extends React.Component {
             hidden={item.hidden}
             when={item.when}
             {...item}
+            readonly={readonly}
           />
         );
       case "bool":
@@ -54,6 +56,7 @@ export default class ConfigGroup extends React.Component {
             hidden={item.hidden}
             when={item.when}
             {...item}
+            readonly={readonly}
           />
         );
       case "label":
@@ -67,6 +70,7 @@ export default class ConfigGroup extends React.Component {
               when={item.when}
               name={item.name}
               error={item.error}
+              readonly={readonly}
             />
           </div>
         );
@@ -81,6 +85,7 @@ export default class ConfigGroup extends React.Component {
               handleChange={this.handleItemChange}
               hidden={item.hidden}
               when={item.when}
+              readonly={readonly}
             />
           </div>
         );
@@ -92,6 +97,7 @@ export default class ConfigGroup extends React.Component {
             hidden={item.hidden}
             when={item.when}
             {...item}
+            readonly={readonly}
           />
         );
       case "heading":
@@ -109,6 +115,7 @@ export default class ConfigGroup extends React.Component {
             when={item.when}
             inputType="password"
             {...item}
+            readonly={readonly}
           />
         );
       default:
@@ -142,7 +149,7 @@ export default class ConfigGroup extends React.Component {
   }
 
   render() {
-    const { item } = this.props;
+    const { item, readonly } = this.props;
     const hidden = item && (item.when === "false");
     if (hidden || !this.isAtLeastOneItemVisible()) return null;
     return (
@@ -160,7 +167,7 @@ export default class ConfigGroup extends React.Component {
               </Markdown>
               : null}
             <div className="config-item">
-              {this.renderConfigItems(item.items)}
+              {this.renderConfigItems(item.items, readonly)}
             </div>
           </div>
         }

diff --git a/web/init/src/components/config_render/ConfigGroups.jsx b/web/init/src/components/config_render/ConfigGroups.jsx
@@ -10,7 +10,7 @@ export default class ConfigGroups extends React.Component {
   }
 
   render() {
-    const { fieldsList, fields } = this.props;
+    const { fieldsList, fields, readonly } = this.props;
     return (
       <div className="flex-column flex1">
         {fieldsList && fieldsList.map((fieldName, i) => (
@@ -19,6 +19,7 @@ export default class ConfigGroups extends React.Component {
             items={fields}
             item={fields[fieldName]}
             handleChange={(itemName, value, data) => this.handleGroupChange(fieldName, itemName, value, data)}
+            readonly={readonly}
           />
         ))
         }

diff --git a/web/init/src/components/config_render/ConfigRender.jsx b/web/init/src/components/config_render/ConfigRender.jsx
@@ -91,13 +91,14 @@ export default class ConfigRender extends React.Component {
   }
 
   render() {
-    const { fieldsList } = this.props;
+    const { fieldsList, readonly } = this.props;
     return (
       <div className="flex-column flex1">
         <ConfigGroups
           fieldsList={fieldsList}
           fields={this.state.groups}
           handleChange={this.handleGroupsChange}
+          readonly={readonly}
         />
       </div>
     );