refactor(provider/cf): refactor create SG to use FormikFormField (spi…

…nnaker#6212)

Co-Authored-By: Stu Pollock <spollock@pivotal.io>

app/scripts/modules/cloudfoundry/src/common/cloudFoundry.less

@@ -0,0 +1,16 @@
+.cloud-foundry-radio-button {
+  margin-left: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.cloud-foundry-input {
+  margin-left: 15px;
+}
+
+.cloud-foundry-checkbox {
+  input[type='checkbox'] {
+    margin-left: -5px;
+    margin-top: 9px;
+  }
+}

app/scripts/modules/cloudfoundry/src/deploymentStrategy/CloudFoundryDeploymentStrategySelector.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react';
+import * as DOMPurify from 'dompurify';
+import Select, { Option } from 'react-select';
+import { defaultsDeep, unset } from 'lodash';
+
+import {
+  HelpField,
+  IDeploymentStrategy,
+  IDeploymentStrategyAdditionalFieldsProps,
+  IServerGroupCommand,
+} from '@spinnaker/core';
+
+import { IRedBlackCommand } from 'cloudfoundry/deploymentStrategy/strategies/redblack/redblack.strategy';
+import { AdditionalFields } from 'cloudfoundry/deploymentStrategy/strategies/redblack/AdditionalFields';
+
+export interface ICloudFoundryDeploymentStrategySelectorProps {
+  command: IServerGroupCommand;
+  onFieldChange: (key: string, value: any) => void;
+  onStrategyChange: (command: IServerGroupCommand, strategy: IDeploymentStrategy) => void;
+}
+
+export interface ICloudFoundryDeploymentStrategySelectorState {
+  strategies: IDeploymentStrategy[];
+  currentStrategy: string;
+  AdditionalFieldsComponent: React.ComponentType<IDeploymentStrategyAdditionalFieldsProps>;
+}
+
+export class CloudFoundryDeploymentStrategySelector extends React.Component<
+  ICloudFoundryDeploymentStrategySelectorProps,
+  ICloudFoundryDeploymentStrategySelectorState
+> {
+  public state: ICloudFoundryDeploymentStrategySelectorState = {
+    strategies: [
+      {
+        label: 'None',
+        description: 'Creates the next server group with no impact on existing server groups',
+        key: '',
+      },
+      {
+        label: 'Highlander',
+        description:
+          'Destroys <i>all</i> previous server groups in the cluster as soon as new server group passes health checks',
+        key: 'highlander',
+      },
+      {
+        label: 'Red/Black',
+        description:
+          'Disables <i>all</i> previous server groups in the cluster as soon as new server group passes health checks',
+        key: 'redblack',
+        additionalFields: ['maxRemainingAsgs'],
+        AdditionalFieldsComponent: AdditionalFields,
+        initializationMethod: (command: IRedBlackCommand) => {
+          defaultsDeep(command, {
+            rollback: {
+              onFailure: false,
+            },
+            maxRemainingAsgs: 2,
+            delayBeforeDisableSec: 0,
+            delayBeforeScaleDownSec: 0,
+            scaleDown: false,
+          });
+        },
+      },
+    ],
+    currentStrategy: null,
+    AdditionalFieldsComponent: undefined,
+  };
+
+  public selectStrategy(strategy: string): void {
+    const { command, onStrategyChange } = this.props;
+    const oldStrategy = this.state.strategies.find(s => s.key === this.state.currentStrategy);
+    const newStrategy = this.state.strategies.find(s => s.key === strategy);
+
+    if (oldStrategy && oldStrategy.additionalFields) {
+      oldStrategy.additionalFields.forEach(field => {
+        if (!newStrategy || !newStrategy.additionalFields || !newStrategy.additionalFields.includes(field)) {
+          unset(command, field);
+        }
+      });
+    }
+
+    let AdditionalFieldsComponent;
+    if (newStrategy) {
+      AdditionalFieldsComponent = newStrategy.AdditionalFieldsComponent;
+      if (newStrategy.initializationMethod) {
+        newStrategy.initializationMethod(command);
+      }
+    }
+    command.strategy = strategy;
+    if (onStrategyChange && newStrategy) {
+      onStrategyChange(command, newStrategy);
+    }
+    this.setState({ currentStrategy: strategy, AdditionalFieldsComponent });
+  }
+
+  public strategyChanged = (option: Option<IDeploymentStrategy>) => {
+    this.selectStrategy(option.key);
+  };
+
+  public componentDidMount() {
+    this.selectStrategy(this.props.command.strategy);
+  }
+
+  public render() {
+    const { command, onFieldChange } = this.props;
+    const { AdditionalFieldsComponent, currentStrategy, strategies } = this.state;
+    const hasAdditionalFields = Boolean(AdditionalFieldsComponent);
+    if (strategies && strategies.length) {
+      return (
+        <div>
+          <div className="StandardFieldLayout flex-container-h baseline margin-between-lg">
+            <div className={`sm-label-right`} style={{ paddingLeft: '13px' }}>
+              Strategy &nbsp;
+              <HelpField id="core.serverGroup.strategy" />
+            </div>
+            <div className="flex-grow">
+              <Select
+                clearable={false}
+                required={true}
+                options={strategies}
+                placeholder="None"
+                valueKey="key"
+                value={currentStrategy}
+                optionRenderer={this.strategyOptionRenderer}
+                valueRenderer={o => <>{o.label}</>}
+                onChange={this.strategyChanged}
+              />
+            </div>
+          </div>
+          {hasAdditionalFields && (
+            <div className="form-group col-md-9 col-md-offset-3" style={{ marginTop: '5px', float: 'right' }}>
+              <AdditionalFieldsComponent command={command} onChange={onFieldChange} />
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return null;
+  }
+
+  private strategyOptionRenderer = (option: IDeploymentStrategy) => {
+    return (
+      <div className="body-regular">
+        <strong>
+          <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(option.label) }} />
+        </strong>
+        <div>
+          <span dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(option.description) }} />
+        </div>
+      </div>
+    );
+  };
+}

app/scripts/modules/cloudfoundry/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx

@@ -30,33 +30,37 @@ export class AdditionalFields extends React.Component<IRedBlackStrategyAdditiona
         </div>
         <div className="col-md-12 form-inline">
           <label>
-            Maximum number of server groups to leave
+            Maximum number of server groups to leave &nbsp;
             <HelpField id="strategy.redblack.maxRemainingAsgs" />
           </label>
-          <input
-            className="form-control input-sm"
-            style={{ width: '50px' }}
-            type="number"
-            value={command.maxRemainingAsgs}
-            onChange={e => this.handleChange('maxRemainingAsgs', e.target.value)}
-            min="2"
-          />
+          <div>
+            <input
+              className="form-control input-sm"
+              style={{ width: '50px' }}
+              type="number"
+              value={command.maxRemainingAsgs}
+              onChange={e => this.handleChange('maxRemainingAsgs', e.target.value)}
+              min="2"
+            />
+          </div>
         </div>
         <div className="col-md-12 form-inline">
           <label>
-            Wait Before Disable
+            Wait Before Disable &nbsp;
             <HelpField content="Time to wait before disabling old server group" />
           </label>
-          <input
-            className="form-control input-sm"
-            style={{ width: '60px' }}
-            min="0"
-            type="number"
-            value={command.delayBeforeDisableSec}
-            onChange={e => this.handleChange('delayBeforeDisableSec', e.target.value)}
-            placeholder="0"
-          />
-          seconds
+          <div>
+            <input
+              className="form-control input-sm"
+              style={{ width: '60px' }}
+              min="0"
+              type="number"
+              value={command.delayBeforeDisableSec}
+              onChange={e => this.handleChange('delayBeforeDisableSec', e.target.value)}
+              placeholder="0"
+            />
+            &nbsp; seconds
+          </div>
         </div>
       </div>
     );