refactor(provider/cf): make better use of formik library capabilities

- spinnaker/spinnaker#3615
spinnaker · Nov 20, 2018 · 081b48a · 081b48a
1 parent 7a4b0cd
commit 081b48a
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 289 deletions.
diff --git a/...ts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx b/...ts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx
@@ -24,6 +24,7 @@ import {
 } from '../../serverGroupConfigurationModel.cf';
 import { CloudFoundryImageReader } from 'cloudfoundry/image/image.reader.cf';
 import { ICloudFoundryCluster, ICloudFoundryServerGroup } from 'cloudfoundry/domain';
+import { Field } from 'formik';
 
 export interface ICloudFoundryCreateServerGroupArtifactSettingsProps
   extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {
@@ -179,24 +180,6 @@ class ArtifactSettingsImpl extends React.Component<
     }
   };
 
-  private artifactReferenceUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const reference = event.target.value;
-    const { artifact } = this.props.formik.values;
-    if (isArtifactSource(artifact)) {
-      artifact.reference = reference;
-      this.props.formik.setFieldValue('artifact.reference', reference);
-    }
-  };
-
-  private artifactPatternUpdater = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const pattern = event.target.value;
-    const { artifact } = this.props.formik.values;
-    if (isTriggerSource(artifact)) {
-      artifact.pattern = pattern;
-      this.props.formik.setFieldValue('artifact.pattern', pattern);
-    }
-  };
-
   private getArtifactInput = (): JSX.Element => {
     const { artifactAccounts } = this.props;
     const { values, errors: _errors } = this.props.formik;
@@ -225,13 +208,7 @@ class ArtifactSettingsImpl extends React.Component<
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Reference</div>
           <div className="col-md-7">
-            <input
-              type="text"
-              required={true}
-              className="form-control input-sm"
-              value={isArtifactSource(artifact) && artifact.reference}
-              onChange={this.artifactReferenceUpdated}
-            />
+            <Field type="text" required={true} className="form-control input-sm" name="artifact.reference" />
           </div>
         </div>
         {errors.artifact &&
@@ -343,11 +320,7 @@ class ArtifactSettingsImpl extends React.Component<
         <div className="form-group">
           <div className="col-md-3 sm-label-right">Artifact Pattern</div>
           <div className="col-md-7">
-            <input
-              className="form-control input-sm no-spel"
-              value={isTriggerSource(artifact) && artifact.pattern}
-              onChange={this.artifactPatternUpdater}
-            />
+            <Field className="form-control input-sm no-spel" type="text" name="artifact.pattern" />
           </div>
         </div>
         <div className="form-group row">

diff --git a/...ripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx b/...ripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/basicSettings.cf.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
+import { Field, FormikErrors } from 'formik';
 import Select, { Option } from 'react-select';
 
 import {
@@ -91,18 +91,6 @@ class BasicSettingsImpl extends React.Component<
     this.props.formik.setFieldValue('region', region);
   };
 
-  private stackUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const stack = event.target.value;
-    this.props.formik.values.stack = stack;
-    this.props.formik.setFieldValue('stack', stack);
-  };
-
-  private detailUpdated = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const freeFormDetails = event.target.value;
-    this.props.formik.values.freeFormDetails = freeFormDetails;
-    this.props.formik.setFieldValue('freeFormDetails', freeFormDetails);
-  };
-
   private deploymentStrategyUpdated = (option: Option<string>): void => {
     this.props.formik.values.strategy = option.value;
     this.props.formik.setFieldValue('strategy', option.value);
@@ -138,20 +126,15 @@ class BasicSettingsImpl extends React.Component<
             Stack <HelpField id="cf.serverGroup.stack" />
           </div>
           <div className="col-md-7">
-            <input className="form-control input-sm" type="text" value={values.stack} onChange={this.stackUpdated} />
+            <Field className="form-control input-sm" type="text" name="stack" />
           </div>
         </div>
         <div className="form-group">
           <div className="col-md-3 sm-label-right">
             Detail <HelpField id="cf.serverGroup.detail" />
           </div>
           <div className="col-md-7">
-            <input
-              className="form-control input-sm"
-              type="text"
-              value={values.freeFormDetails}
-              onChange={this.detailUpdated}
-            />
+            <Field className="form-control input-sm" type="text" name="freeFormDetails" />
           </div>
         </div>
         <div className="form-group">