chore(kubernetes): refactor BasicSettings component to be usable in s…

…tages (spinnaker#6820)
maggieneterval · Apr 5, 2019 · 33ad914 · 33ad914
1 parent d7e860c
commit 33ad914
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 31 deletions.
diff --git a/app/scripts/modules/kubernetes/src/v2/manifest/wizard/BasicSettings.tsx b/app/scripts/modules/kubernetes/src/v2/manifest/wizard/BasicSettings.tsx
@@ -1,16 +1,57 @@
 import * as React from 'react';
 import { FormikProps } from 'formik';
 
-import { AccountSelectInput, HelpField, Application } from '@spinnaker/core';
+import { AccountSelectInput, Application, HelpField, IAccount } from '@spinnaker/core';
 
 import { IKubernetesManifestCommandData } from 'kubernetes/v2/manifest/manifestCommandBuilder.service';
 
 export interface IManifestBasicSettingsProps {
+  app: Application;
+  accounts: IAccount[];
+  onAccountSelect: (account: string) => void;
+  selectedAccount: string;
+}
+
+export function ManifestBasicSettings({
+  app,
+  accounts,
+  onAccountSelect,
+  selectedAccount,
+}: IManifestBasicSettingsProps) {
+  return (
+    <div className="container-fluid form-horizontal">
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Account <HelpField id="kubernetes.manifest.account" />
+        </div>
+        <div className="col-md-7">
+          <AccountSelectInput
+            value={selectedAccount}
+            onChange={(evt: any) => onAccountSelect(evt.target.value)}
+            readOnly={false}
+            accounts={accounts}
+            provider="kubernetes"
+          />
+        </div>
+      </div>
+      <div className="form-group">
+        <div className="col-md-3 sm-label-right">
+          Application <HelpField id="kubernetes.manifest.application" />
+        </div>
+        <div className="col-md-7">
+          <input type="text" className="form-control input-sm no-spel" readOnly={true} value={app.name} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface IWizardManifestBasicSettingsProps {
   app: Application;
   formik: FormikProps<IKubernetesManifestCommandData>;
 }
 
-export class ManifestBasicSettings extends React.Component<IManifestBasicSettingsProps> {
+export class WizardManifestBasicSettings extends React.Component<IWizardManifestBasicSettingsProps> {
   private accountUpdated = (account: string): void => {
     const { formik } = this.props;
     formik.values.command.account = account;
@@ -19,34 +60,13 @@ export class ManifestBasicSettings extends React.Component<IManifestBasicSetting
 
   public render() {
     const { formik, app } = this.props;
-
-    const accounts = formik.values.metadata.backingData.accounts;
-
     return (
-      <div className="container-fluid form-horizontal">
-        <div className="form-group">
-          <div className="col-md-3 sm-label-right">
-            Account <HelpField id="kubernetes.manifest.account" />
-          </div>
-          <div className="col-md-7">
-            <AccountSelectInput
-              value={formik.values.command.account}
-              onChange={(evt: any) => this.accountUpdated(evt.target.value)}
-              readOnly={false}
-              accounts={accounts}
-              provider="kubernetes"
-            />
-          </div>
-        </div>
-        <div className="form-group">
-          <div className="col-md-3 sm-label-right">
-            Application <HelpField id="kubernetes.manifest.application" />
-          </div>
-          <div className="col-md-7">
-            <input type="text" className="form-control input-sm no-spel" readOnly={true} value={app.name} />
-          </div>
-        </div>
-      </div>
+      <ManifestBasicSettings
+        app={app}
+        accounts={formik.values.metadata.backingData.accounts}
+        onAccountSelect={this.accountUpdated}
+        selectedAccount={formik.values.command.account}
+      />
     );
   }
 }
diff --git a/app/scripts/modules/kubernetes/src/v2/manifest/wizard/ManifestWizard.tsx b/app/scripts/modules/kubernetes/src/v2/manifest/wizard/ManifestWizard.tsx
@@ -15,7 +15,7 @@ import {
   KubernetesManifestCommandBuilder,
   IKubernetesManifestCommandData,
 } from 'kubernetes/v2/manifest/manifestCommandBuilder.service';
-import { ManifestBasicSettings } from 'kubernetes/v2/manifest/wizard/BasicSettings';
+import { WizardManifestBasicSettings } from 'kubernetes/v2/manifest/wizard/BasicSettings';
 import { ManifestEntry } from 'kubernetes/v2/manifest/wizard/ManifestEntry';
 
 export interface IKubernetesManifestModalProps extends IModalComponentProps {
@@ -87,7 +87,9 @@ export class ManifestWizard extends React.Component<IKubernetesManifestModalProp
               label="Basic Settings"
               wizard={wizard}
               order={nextIdx()}
-              render={({ innerRef }) => <ManifestBasicSettings ref={innerRef} formik={formik} app={application} />}
+              render={({ innerRef }) => (
+                <WizardManifestBasicSettings ref={innerRef} formik={formik} app={application} />
+              )}
             />
 
             <WizardPage