Merge pull request #714 from 10Dimensional/master

Hide helm name behind advanced settings toggle

Author: 10Dimensional

web/init/src/components/kustomize/HelmReleaseNameInput.jsx

@@ -13,7 +13,7 @@ export default class HelmReleaseNameInput extends React.Component {
     const { value } = this.props;
 
     return (
-      <div className={`field field-type-text container u-marginTop--15`}>
+      <div className={`field field-type-text u-marginTop--15`}>
         <ConfigItemTitle
           title="Helm Name"
         />

web/init/src/components/kustomize/HelmValuesEditor.jsx

@@ -26,6 +26,7 @@ export default class HelmValuesEditor extends React.Component {
       unsavedChanges: false,
       initialHelmReleaseName: "",
       helmReleaseName: "",
+      displaySettings: false
     }
   }
 
@@ -150,6 +151,7 @@ export default class HelmValuesEditor extends React.Component {
       helmLintErrors,
       initialHelmReleaseName,
       helmReleaseName,
+      displaySettings
     } = this.state;
     const {
       values,
@@ -159,14 +161,21 @@ export default class HelmValuesEditor extends React.Component {
 
     return (
       <ErrorBoundary>
-        <HelmReleaseNameInput value={helmReleaseName} onChange={this.handleOnChangehelmReleaseName} />
         <div className="flex-column flex1 HelmValues--wrapper u-paddingTop--30">
           <div className="flex-column flex-1-auto u-overflow--auto container">
             <p className="u-color--dutyGray u-fontStize--large u-fontWeight--medium u-marginBottom--small">
             /{name}/
               <span className="u-color--tuna u-fontWeight--bold">values.yaml</span>
             </p>
             <p className="u-color--dustyGray u-fontSize--normal u-marginTop--normal u-marginBottom--20">Here you can edit the values.yaml to specify values for your application. You will be able to apply overlays for your YAML in the next step.</p>
+            <div className="advanced-settings-wrapper u-marginTop--10">
+              <div className={`section-border ${displaySettings ? "open" : "closed"} flex justifyContent--center u-position--relative`}>
+                <p className="flex-auto u-fontSize--small u-color--tundora u-fontWeight--medium u-cursor--pointer" onClick={() => { this.setState({ displaySettings: !this.state.displaySettings }) }}>{displaySettings ? "Close Advanced Settings" : "Show Advanced Settings"}</p>
+              </div>
+              {displaySettings ? <div className="settings u-marginBottom--20">
+                <HelmReleaseNameInput value={helmReleaseName} onChange={this.handleOnChangehelmReleaseName} />
+              </div> : null}
+            </div>
             <div className="AceEditor--wrapper helm-values flex1 flex u-height--full u-width--full">
               <div className="flex1 flex-column u-width--half">
                 <AceEditor

web/init/src/scss/components/kustomize/HelmValuesEditor.scss

@@ -17,4 +17,22 @@
       left: 0;
       right: auto;
     }
+
+  }
+
+  .advanced-settings-wrapper {
+    .section-border {
+      border-bottom: 1px solid #DFDFDF;
+      &.closed {
+        margin-bottom: 35px;
+      }
+      & p {
+        top: -13px;
+        position: absolute;
+        border: solid 1px #DFDFDF;
+        border-radius: 50px;
+        padding: 5px;
+        background: #fff;
+      }
+    }
   }