Merge pull request #453 from GraysonNull/kustomize-flow-enhancements

Helm Values step has save/save & continue buttons instead of save toast

Author: GraysonNull

web/src/components/kustomize/HelmValuesEditor.jsx

@@ -4,7 +4,6 @@ import * as linter from "replicated-lint";
 import Linter from "../shared/Linter";
 import AceEditor from "react-ace";
 import ErrorBoundary from "../../ErrorBoundary";
-import Toast from "../shared/Toast";
 import get from "lodash/get";
 import find from "lodash/find";
 
@@ -24,10 +23,8 @@ export default class HelmValuesEditor extends React.Component {
       initialSpecValue: "",
       helmLintErrors: [],
       saving: false,
+      saveFinal: false,
       unsavedChanges: false,
-      toastDetails: {
-        opts: {}
-      }
     }
     autoBind(this);
   }
@@ -76,44 +73,13 @@ export default class HelmValuesEditor extends React.Component {
     });
   }
 
-  cancelToast() {
-    let nextState = {};
-    nextState.toastDetails = {
-      showToast: false,
-      title: "",
-      subText: "",
-      type: "default",
-      opts: {}
-    };
-    this.setState(nextState)
-  }
-
   handleContinue() {
-    const { actions, isNewRouter } = this.props;
+    const { actions } = this.props;
     let submitAction;
-    if (isNewRouter) {
-      submitAction = find(actions, ["buttonType", "popover"]);
-    } else {
-      submitAction = find(actions, ["sort", 1]);
-    }
+    submitAction = find(actions, ["buttonType", "popover"]);
     this.props.handleAction(submitAction, true);
   }
 
-  onValuesSaved() {
-    let nextState = {};
-    nextState.toastDetails = {
-      showToast: true,
-      title: "All changes have been saved.",
-      type: "default",
-      opts: {
-        showCancelButton: true,
-        confirmButtonText: "Continue to next step",
-        confirmAction: () => { this.handleContinue(); }
-      }
-    }
-    this.setState(nextState);
-  }
-
   handleSkip() {
     const { initialSpecValue } = this.state;
     const payload = {
@@ -135,13 +101,13 @@ export default class HelmValuesEditor extends React.Component {
       })
   }
 
-  handleSaveValues() {
+  handleSaveValues(finalize) {
     const { specValue } = this.state;
     const payload = {
       values: specValue
     }
-    if(payload.values !== "") {
-      this.setState({ saving: true, helmLintErrors: [] });
+    if (payload.values !== "") {
+      this.setState({ saving: true, saveFinal: finalize, helmLintErrors: [] });
       this.props.saveValues(payload)
         .then(({ errors }) => {
           if (errors) {
@@ -151,7 +117,13 @@ export default class HelmValuesEditor extends React.Component {
             });
           }
           this.setState({ saving: false, savedYaml: true });
-          this.onValuesSaved();
+          if (finalize) {
+            this.handleContinue();
+            return;
+          }
+          setTimeout(() => {
+            this.setState({ savedYaml: false });
+          }, 3000)
         })
         .catch((err) => {
           // TODO: better handling
@@ -164,8 +136,10 @@ export default class HelmValuesEditor extends React.Component {
     const {
       readOnly,
       specValue,
+      initialSpecValue,
       saving,
-      toastDetails,
+      saveFinal,
+      savedYaml,
       helmLintErrors,
     } = this.state;
     const {
@@ -177,7 +151,6 @@ export default class HelmValuesEditor extends React.Component {
     return (
       <ErrorBoundary>
         <div className="flex-column flex1 HelmValues--wrapper u-paddingTop--30">
-          <Toast toast={toastDetails} onCancel={this.cancelToast} />
           <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}/
@@ -212,19 +185,23 @@ export default class HelmValuesEditor extends React.Component {
             </div>
           </div>
           <div className="actions-wrapper container u-width--full flex flex-auto justifyContent--flexEnd">
-            <p className="u-color--chestnut u-fontSize--small u-fontWeight--medium u-marginRight--30 u-lineHeight--normal">{helmLintErrors.join("\n")}</p>
+            <div className="flex-column flex-verticalCenter">
+              {helmLintErrors.length ?
+                <p className="u-color--chestnut u-fontSize--small u-fontWeight--medium u-marginRight--normal u-lineHeight--normal">{helmLintErrors.join("\n")}</p>
+                : null}
+              {savedYaml ?
+                <p className="u-color--vidaLoca u-fontSize--small u-fontWeight--medium u-marginRight--normal u-lineHeight--normal">Values saved</p>
+                : null}
+            </div>
             <div className="flex flex-auto alignItems--center">
-              <p
-                className="u-color--astral u-fontSize--small u-fontWeight--medium u-marginRight--20 u-textDecoration--underlineOnHover"
-                onClick={() => { this.handleSkip() }}>
-                Skip this step
-              </p>
-              <button
-                className="btn primary"
-                onClick={() => this.handleSaveValues()}
-                disabled={saving}>
-                {saving ? "Saving" : "Save values"}
-              </button>
+              {initialSpecValue === specValue ?
+                <button className="btn primary" onClick={() => { this.handleSkip() }}>Continue</button>
+                :
+                <div className="flex">
+                  <button className="btn primary u-marginRight--normal" onClick={() => this.handleSaveValues(false)} disabled={saving || saveFinal}>{saving ? "Saving" : "Save values"}</button>
+                  <button className="btn secondary" onClick={() => this.handleSaveValues(true)} disabled={saving || saveFinal}>{saveFinal ? "Saving values" : "Save & continue"}</button>
+                </div>
+              }
             </div>
           </div>
 

web/src/components/kustomize/kustomize_overlay/KustomizeOverlay.jsx

@@ -349,7 +349,7 @@ export default class KustomizeOverlay extends React.Component {
                     :
                     <div className="flex">
                       <button type="button" disabled={dataLoading.saveKustomizeLoading || patch === "" || savingFinalize} onClick={() => this.handleKustomizeSave(false)} className="btn primary u-marginRight--normal">{dataLoading.saveKustomizeLoading && !savingFinalize ? "Saving overlay"  : "Save overlay"}</button>
-                      <button type="button" disabled={dataLoading.saveKustomizeLoading || patch === "" || savingFinalize} onClick={() => this.handleKustomizeSave(true)} className="btn primary">{savingFinalize ? "Finalizing overlays"  : "Save & continue"}</button>
+                      <button type="button" disabled={dataLoading.saveKustomizeLoading || patch === "" || savingFinalize} onClick={() => this.handleKustomizeSave(true)} className="btn secondary">{savingFinalize ? "Finalizing overlays"  : "Save & continue"}</button>
                     </div>
                   }
                 </div>

web/src/components/shared/DetermineComponentForRoute.jsx

@@ -154,7 +154,6 @@ class DetermineComponentForRoute extends React.Component {
         <StepHelmValues
           saveValues={this.props.saveHelmChartValues}
           getStep={currentStep.helmValues}
-          isNewRouter={this.props.isNewRouter}
           shipAppMetadata={this.props.shipAppMetadata}
           actions={actions}
           handleAction={this.handleAction}

web/src/containers/DetermineComponentForRoute.js

@@ -13,7 +13,6 @@ const DetermineComponentForRoute = connect(
     actions: state.data.determineSteps.stepsData.actions,
     phase: state.data.determineSteps.stepsData.phase,
     progress: state.data.determineSteps.stepsData.progress,
-    isNewRouter: state.data.appRoutes.routesData.isKustomizeFlow,
     isPolling: state.data.determineSteps.stepsData.isPolling,
   }),
   dispatch => ({