refactor(cloudfoundry/modal): Refactor cloudfoundry modals to use Wiz…

…ardPage component
christopherthielen · Feb 1, 2019 · 651b232 · 651b232
1 parent 8ff2bbb
commit 651b232
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 152 deletions.
diff --git a/app/scripts/modules/cloudfoundry/src/common/wizard/sections/cfDisclaimer.cf.tsx b/app/scripts/modules/cloudfoundry/src/common/wizard/sections/cfDisclaimer.cf.tsx
@@ -1,18 +1,6 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
-
-import { wizardPage, IWizardPageProps, IJob } from '@spinnaker/core';
-
-export type IDisclaimerProps = IWizardPageProps<IJob>;
-
-class CfDisclaimerWizardPage extends React.Component<IDisclaimerProps> {
-  public static LABEL = 'Disclaimer';
-
-  public validate(_values: IDisclaimerProps) {
-    return {} as FormikErrors<IDisclaimerProps>;
-  }
-
+export class CfDisclaimerPage extends React.Component {
   public render() {
     return (
       <div className="row">
@@ -33,5 +21,3 @@ class CfDisclaimerWizardPage extends React.Component<IDisclaimerProps> {
     );
   }
 }
-
-export const CfDisclaimerPage = wizardPage(CfDisclaimerWizardPage);
diff --git a/...s/modules/cloudfoundry/src/loadBalancer/configure/cloudFoundryLoadBalancerCreateModal.tsx b/...s/modules/cloudfoundry/src/loadBalancer/configure/cloudFoundryLoadBalancerCreateModal.tsx
@@ -3,13 +3,13 @@ import { IDeferred } from 'angular';
 import * as React from 'react';
 
 import { IModalServiceInstance } from 'angular-ui-bootstrap';
-import { FormikErrors } from 'formik';
 import { cloneDeep } from 'lodash';
 import { $q } from 'ngimport';
 
 import {
   ILoadBalancerModalProps,
   WizardModal,
+  WizardPage,
   TaskMonitor,
   LoadBalancerWriter,
   ReactModal,
@@ -118,14 +118,9 @@ export class CloudFoundryLoadBalancerCreateModal extends React.Component<
     this.setState({ taskMonitor });
   };
 
-  private validate = (): FormikErrors<ICloudFoundryLoadBalancerUpsertCommand> => {
-    return {} as FormikErrors<ICloudFoundryLoadBalancerUpsertCommand>;
-  };
-
   public render() {
     const { app, forPipelineConfig } = this.props;
     const { isNew, loadBalancerCommand, taskMonitor } = this.state;
-    const hideSections = new Set<string>();
 
     return (
       <WizardModal<ICloudFoundryLoadBalancerUpsertCommand>
@@ -135,11 +130,17 @@ export class CloudFoundryLoadBalancerCreateModal extends React.Component<
         dismissModal={this.dismiss}
         closeModal={this.submit}
         submitButtonLabel={forPipelineConfig ? (isNew ? 'Add' : 'Done') : isNew ? 'Create' : 'Update'}
-        validate={this.validate}
-        hideSections={hideSections}
-      >
-        <LoadBalancerDetails app={app} isNew={isNew} />
-      </WizardModal>
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Details"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <LoadBalancerDetails ref={innerRef} formik={formik} app={app} isNew={isNew} />}
+            />
+          </>
+        )}
+      />
     );
   }
 }
diff --git a/...ripts/modules/cloudfoundry/src/loadBalancer/configure/cloudFoundryNoLoadBalancerModal.tsx b/...ripts/modules/cloudfoundry/src/loadBalancer/configure/cloudFoundryNoLoadBalancerModal.tsx
@@ -2,7 +2,7 @@ import { IDeferred } from 'angular';
 
 import * as React from 'react';
 
-import { ILoadBalancerModalProps, WizardModal, ReactModal, noop } from '@spinnaker/core';
+import { ILoadBalancerModalProps, WizardModal, WizardPage, ReactModal, noop } from '@spinnaker/core';
 import { ICloudFoundryLoadBalancerUpsertCommand } from 'cloudfoundry/domain/ICloudFoundryLoadBalancer';
 import { NoLoadBalancerDetails } from 'cloudfoundry/loadBalancer/configure/noLoadBalancer';
 import { CfDisclaimerPage } from 'cloudfoundry/common/wizard/sections/cfDisclaimer.cf';
@@ -69,11 +69,24 @@ export class CloudFoundryNoLoadBalancerModal extends React.Component<
         dismissModal={this.props.dismissModal}
         closeModal={this.submit}
         submitButtonLabel={'Ok'}
-        validate={noop}
-      >
-        <NoLoadBalancerDetails />
-        <CfDisclaimerPage />
-      </WizardModal>
+        render={({ nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Message"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <NoLoadBalancerDetails ref={innerRef} />}
+            />
+
+            <WizardPage
+              label="Disclaimer"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <CfDisclaimerPage ref={innerRef} />}
+            />
+          </>
+        )}
+      />
     );
   }
 }
diff --git a/app/scripts/modules/cloudfoundry/src/loadBalancer/configure/loadBalancerDetails.tsx b/app/scripts/modules/cloudfoundry/src/loadBalancer/configure/loadBalancerDetails.tsx
@@ -2,15 +2,16 @@ import * as React from 'react';
 
 import Select, { Option } from 'react-select';
 
-import { FormikErrors } from 'formik';
+import { FormikErrors, FormikProps } from 'formik';
 
-import { AccountService, Application, IAccount, IWizardPageProps, wizardPage, IRegion } from '@spinnaker/core';
+import { AccountService, Application, IAccount, IRegion, IWizardPageComponent } from '@spinnaker/core';
 
 import { ICloudFoundryAccount, ICloudFoundryDomain, ICloudFoundryLoadBalancerUpsertCommand } from 'cloudfoundry/domain';
 import { RouteDomainSelectField } from 'cloudfoundry/routeDomains';
 
-export interface ILoadBalancerDetailsProps extends IWizardPageProps<ICloudFoundryLoadBalancerUpsertCommand> {
+export interface ILoadBalancerDetailsProps {
   app: Application;
+  formik: FormikProps<ICloudFoundryLoadBalancerUpsertCommand>;
   isNew?: boolean;
 }
 
@@ -22,9 +23,8 @@ export interface ILoadBalancerDetailsState {
   regions: IRegion[];
 }
 
-class LoadBalancerDetailsImpl extends React.Component<ILoadBalancerDetailsProps, ILoadBalancerDetailsState> {
-  public static LABEL = 'Details';
-
+export class LoadBalancerDetails extends React.Component<ILoadBalancerDetailsProps, ILoadBalancerDetailsState>
+  implements IWizardPageComponent<ICloudFoundryLoadBalancerUpsertCommand> {
   public state: ILoadBalancerDetailsState = {
     accounts: undefined,
     availabilityZones: [],
@@ -215,5 +215,3 @@ class LoadBalancerDetailsImpl extends React.Component<ILoadBalancerDetailsProps,
     );
   }
 }
-
-export const LoadBalancerDetails = wizardPage(LoadBalancerDetailsImpl);
diff --git a/app/scripts/modules/cloudfoundry/src/loadBalancer/configure/noLoadBalancer.tsx b/app/scripts/modules/cloudfoundry/src/loadBalancer/configure/noLoadBalancer.tsx
@@ -1,20 +1,6 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
-
-import { wizardPage, IWizardPageProps } from '@spinnaker/core';
-
-import { ICloudFoundryLoadBalancerUpsertCommand } from 'cloudfoundry/domain';
-
-export type INoLoadBalancerDetailsProps = IWizardPageProps<ICloudFoundryLoadBalancerUpsertCommand>;
-
-class NoLoadBalancerDetailsImpl extends React.Component<INoLoadBalancerDetailsProps> {
-  public static LABEL = 'Message';
-
-  public validate(_values: INoLoadBalancerDetailsProps) {
-    return {} as FormikErrors<INoLoadBalancerDetailsProps>;
-  }
-
+export class NoLoadBalancerDetails extends React.Component {
   public render() {
     return (
       <div className="row">
@@ -40,5 +26,3 @@ class NoLoadBalancerDetailsImpl extends React.Component<INoLoadBalancerDetailsPr
     );
   }
 }
-
-export const NoLoadBalancerDetails = wizardPage(NoLoadBalancerDetailsImpl);
diff --git a/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/Services.tsx b/app/scripts/modules/cloudfoundry/src/presentation/forms/serverGroup/Services.tsx
@@ -5,9 +5,7 @@ import { FormikFormField, TextInput } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 
-export interface IServicesProps {}
-
-export class Services extends React.Component<IServicesProps> {
+export class Services extends React.Component {
   public render() {
     return (
       <div>

diff --git a/...ts/modules/cloudfoundry/src/serverGroup/configure/serverGroupCommandBuilder.service.cf.ts b/...ts/modules/cloudfoundry/src/serverGroup/configure/serverGroupCommandBuilder.service.cf.ts
@@ -93,8 +93,8 @@ export class CloudFoundryServerGroupCommandBuilder {
         routes: serverGroup.loadBalancers,
         environment: CloudFoundryServerGroupCommandBuilder.envVarsFromObject(serverGroup.env),
         services: (serverGroup.serviceInstances || []).map(serviceInstance => serviceInstance.name),
-        healthCheckType: '',
         healthCheckHttpEndpoint: '',
+        healthCheckType: '',
       };
       command.region = serverGroup.region;
       command.stack = serverGroup.stack;

diff --git a/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/CreateServerGroupModal.tsx b/app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/CreateServerGroupModal.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
 import { get } from 'lodash';
 
 import {
+  AccountService,
   Application,
-  TaskMonitor,
-  WizardModal,
   IArtifactAccount,
-  AccountService,
   IModalComponentProps,
+  ReactInjector,
   ReactModal,
+  TaskMonitor,
+  WizardModal,
+  WizardPage,
   noop,
-  ReactInjector,
 } from '@spinnaker/core';
 
 import { ICloudFoundryCreateServerGroupCommand } from '../serverGroupConfigurationModel.cf';
@@ -78,10 +78,6 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
     this.setState({ requiresTemplateSelection: false });
   };
 
-  private validate = (): FormikErrors<ICloudFoundryCreateServerGroupCommand> => {
-    return {};
-  };
-
   private onTaskComplete = () => {
     this.props.application.serverGroups.refresh();
   };
@@ -98,7 +94,6 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
   };
 
   public render(): React.ReactElement<CloudFoundryCreateServerGroupModal> {
-    const hideSections = new Set<string>();
     const { artifactAccounts, requiresTemplateSelection, taskMonitor } = this.state;
     const { application, command, dismissModal, isSourceConstant, serverGroup, title } = this.props;
 
@@ -121,15 +116,67 @@ export class CloudFoundryCreateServerGroupModal extends React.Component<
         dismissModal={dismissModal}
         closeModal={this.submit}
         submitButtonLabel={command.viewState.submitButtonLabel}
-        validate={this.validate}
-        hideSections={hideSections}
-      >
-        <CloudFoundryServerGroupBasicSettings />
-        {isSourceConstant && <CloudFoundryServerGroupConstantArtifactSettings serverGroup={serverGroup} />}
-        {!isSourceConstant && <CloudFoundryServerGroupArtifactSettings artifactAccounts={artifactAccounts} />}
-        <CloudFoundryServerGroupConfigurationSettings artifactAccounts={artifactAccounts} />
-        <CfDisclaimerPage />
-      </WizardModal>
+        render={({ formik, nextIdx, wizard }) => (
+          <>
+            <WizardPage
+              label="Basic Settings"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <CloudFoundryServerGroupBasicSettings ref={innerRef} formik={formik} />}
+            />
+
+            {isSourceConstant && (
+              <WizardPage
+                label="Artifact"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <CloudFoundryServerGroupConstantArtifactSettings
+                    ref={innerRef}
+                    formik={formik}
+                    serverGroup={serverGroup}
+                  />
+                )}
+              />
+            )}
+
+            {!isSourceConstant && (
+              <WizardPage
+                label="Artifact"
+                wizard={wizard}
+                order={nextIdx()}
+                render={({ innerRef }) => (
+                  <CloudFoundryServerGroupArtifactSettings
+                    ref={innerRef}
+                    formik={formik}
+                    artifactAccounts={artifactAccounts}
+                  />
+                )}
+              />
+            )}
+
+            <WizardPage
+              label="Configuration"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => (
+                <CloudFoundryServerGroupConfigurationSettings
+                  ref={innerRef}
+                  formik={formik}
+                  artifactAccounts={artifactAccounts}
+                />
+              )}
+            />
+
+            <WizardPage
+              label="Disclaimer"
+              wizard={wizard}
+              order={nextIdx()}
+              render={({ innerRef }) => <CfDisclaimerPage ref={innerRef} />}
+            />
+          </>
+        )}
+      />
     );
   }
 }
diff --git a/...oudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactPackage.tsx b/...oudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactPackage.tsx
@@ -1,14 +1,6 @@
 import * as React from 'react';
 
-import {
-  AccountService,
-  FormikFormField,
-  IAccount,
-  IAccountDetails,
-  IRegion,
-  IWizardPageProps,
-  ReactSelectInput,
-} from '@spinnaker/core';
+import { AccountService, FormikFormField, IAccount, IAccountDetails, IRegion, ReactSelectInput } from '@spinnaker/core';
 
 import {
   ICloudFoundryCreateServerGroupCommand,
@@ -18,8 +10,8 @@ import { ICloudFoundryCluster, ICloudFoundryServerGroup } from 'cloudfoundry/dom
 import { CloudFoundryImageReader } from 'cloudfoundry/image/image.reader.cf';
 import { FormikProps } from 'formik';
 
-export interface IArtifactPackageProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {
-  formik: FormikProps<any>;
+export interface IArtifactPackageProps {
+  formik: FormikProps<ICloudFoundryCreateServerGroupCommand>;
 }
 
 export interface IArtifactPackageState {

diff --git a/...dfoundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactSelection.tsx b/...dfoundry/src/serverGroup/configure/wizard/sections/artifactSettings/ArtifactSelection.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 
-import { FormikFormField, IWizardPageProps, ReactSelectInput, TextInput } from '@spinnaker/core';
+import { FormikFormField, ReactSelectInput, TextInput } from '@spinnaker/core';
 
-import { ICloudFoundryCreateServerGroupCommand } from 'cloudfoundry/serverGroup/configure/serverGroupConfigurationModel.cf';
 import { IArtifactAccount } from 'core/index';
 
-export interface IArtifactSelectionProps extends IWizardPageProps<ICloudFoundryCreateServerGroupCommand> {
+export interface IArtifactSelectionProps {
   artifactAccounts: IArtifactAccount[];
 }