From 95eacfb6f5cea460677aa0907b18555dedae4135 Mon Sep 17 00:00:00 2001
From: caseyhebebrand <caseyhebebrand@gmail.com>
Date: Tue, 12 Jan 2021 14:07:11 -0800
Subject: [PATCH] refactor(core/deployment): Update redblack fields without
 force updating (#8840)

* refactor(core/deployment): Update redblack fields without force updating

* refactor(cloudfoundry): Remove duplicate redblack additional fields component
---
 ...CloudFoundryDeploymentStrategySelector.tsx |   4 +-
 .../strategies/redblack/AdditionalFields.tsx  |  68 --------
 .../core/src/deploymentStrategy/index.ts      |   1 +
 .../strategies/redblack/AdditionalFields.tsx  | 152 ++++++++----------
 4 files changed, 71 insertions(+), 154 deletions(-)
 delete mode 100644 app/scripts/modules/cloudfoundry/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx

diff --git a/app/scripts/modules/cloudfoundry/src/deploymentStrategy/CloudFoundryDeploymentStrategySelector.tsx b/app/scripts/modules/cloudfoundry/src/deploymentStrategy/CloudFoundryDeploymentStrategySelector.tsx
index 5fd2a20bafc..487a92f9adb 100644
--- a/app/scripts/modules/cloudfoundry/src/deploymentStrategy/CloudFoundryDeploymentStrategySelector.tsx
+++ b/app/scripts/modules/cloudfoundry/src/deploymentStrategy/CloudFoundryDeploymentStrategySelector.tsx
@@ -3,6 +3,7 @@ import Select, { Option } from 'react-select';
 import { defaultsDeep, unset } from 'lodash';
 
 import {
+  CoreRedBlackAdditionalFields,
   HelpField,
   IDeploymentStrategy,
   IDeploymentStrategyAdditionalFieldsProps,
@@ -11,7 +12,6 @@ import {
 } from '@spinnaker/core';
 
 import { IRedBlackCommand } from './strategies/redblack/redblack.strategy';
-import { AdditionalFields as AdditionalRedBlackFields } from './strategies/redblack/AdditionalFields';
 import {
   AdditionalFields as AdditionalRollingRedBlackFields,
   IRollingRedBlackCommand,
@@ -52,7 +52,7 @@ export class CloudFoundryDeploymentStrategySelector extends React.Component<
           'Disables <i>all</i> previous server groups in the cluster as soon as new server group passes health checks',
         key: 'redblack',
         additionalFields: ['maxRemainingAsgs'],
-        AdditionalFieldsComponent: AdditionalRedBlackFields,
+        AdditionalFieldsComponent: CoreRedBlackAdditionalFields,
         initializationMethod: (command: IRedBlackCommand) => {
           defaultsDeep(command, {
             rollback: {
diff --git a/app/scripts/modules/cloudfoundry/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx b/app/scripts/modules/cloudfoundry/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
deleted file mode 100644
index 486510d08c5..00000000000
--- a/app/scripts/modules/cloudfoundry/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import { set } from 'lodash';
-
-import { HelpField, IDeploymentStrategyAdditionalFieldsProps } from '@spinnaker/core';
-import { IRedBlackCommand } from './redblack.strategy';
-
-export interface IRedBlackStrategyAdditionalFieldsProps extends IDeploymentStrategyAdditionalFieldsProps {
-  command: IRedBlackCommand;
-}
-
-export class AdditionalFields extends React.Component<IRedBlackStrategyAdditionalFieldsProps> {
-  private handleChange = (key: string, value: any) => {
-    set(this.props.command, key, value);
-    this.forceUpdate();
-  };
-
-  public render() {
-    const { command } = this.props;
-    return (
-      <div className="form-group">
-        <div className="col-md-12 checkbox">
-          <label>
-            <input
-              type="checkbox"
-              checked={command.rollback.onFailure}
-              onChange={(e) => this.handleChange('rollback.onFailure', e.target.checked)}
-            />
-            Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
-          </label>
-        </div>
-        <div className="col-md-12 form-inline">
-          <label>
-            Maximum number of server groups to leave &nbsp;
-            <HelpField id="strategy.redblack.maxRemainingAsgs" />
-          </label>
-          <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 &nbsp;
-            <HelpField content="Time to wait before disabling all old server groups in this cluster" />
-          </label>
-          <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>
-    );
-  }
-}
diff --git a/app/scripts/modules/core/src/deploymentStrategy/index.ts b/app/scripts/modules/core/src/deploymentStrategy/index.ts
index 625fc89108e..863c13daa0a 100644
--- a/app/scripts/modules/core/src/deploymentStrategy/index.ts
+++ b/app/scripts/modules/core/src/deploymentStrategy/index.ts
@@ -1,2 +1,3 @@
 export * from './DeploymentStrategySelector';
 export * from './deploymentStrategy.registry';
+export { AdditionalFields as CoreRedBlackAdditionalFields } from './strategies/redblack/AdditionalFields';
diff --git a/app/scripts/modules/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx b/app/scripts/modules/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
index 02979cc4b56..47eda382ad2 100644
--- a/app/scripts/modules/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
+++ b/app/scripts/modules/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
@@ -1,95 +1,79 @@
 import React from 'react';
-import { set } from 'lodash';
 
 import { IDeploymentStrategyAdditionalFieldsProps } from '../../deploymentStrategy.registry';
 import { HelpField } from 'core/help/HelpField';
-
 import { IRedBlackCommand } from './redblack.strategy';
 
 export interface IRedBlackStrategyAdditionalFieldsProps extends IDeploymentStrategyAdditionalFieldsProps {
   command: IRedBlackCommand;
 }
 
-export class AdditionalFields extends React.Component<IRedBlackStrategyAdditionalFieldsProps> {
-  private handleChange = (key: string, value: any) => {
-    set(this.props.command, key, value);
-    this.forceUpdate();
-  };
-
-  public render() {
-    const { command } = this.props;
-    return (
-      <div className="form-group">
-        <div className="col-md-12 checkbox">
-          <label>
-            <input
-              type="checkbox"
-              checked={command.rollback?.onFailure ?? false}
-              onChange={(e) => this.handleChange('rollback.onFailure', e.target.checked)}
-            />
-            Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
-          </label>
-        </div>
-        <div className="col-md-12 checkbox">
-          <label>
-            <input
-              type="checkbox"
-              checked={command.scaleDown}
-              onChange={(e) => this.handleChange('scaleDown', e.target.checked)}
-            />
-            Scale down replaced server groups to zero instances
-            <HelpField id="strategy.redblack.scaleDown" />
-          </label>
-        </div>
-        <div className="col-md-12 form-inline">
-          <label>
-            Maximum number of server groups to leave
-            <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>
-        <div className="col-md-12 form-inline">
-          <label>
-            Wait Before Disable
-            <HelpField content="Time to wait before disabling all old server groups in this cluster" />
-          </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>
-        {command.scaleDown && (
-          <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
-            <label>
-              Wait Before Scale Down
-              <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
-            </label>
-            <input
-              className="form-control input-sm"
-              style={{ width: '60px' }}
-              min="0"
-              type="number"
-              value={command.delayBeforeScaleDownSec}
-              onChange={(e) => this.handleChange('delayBeforeScaleDownSec', e.target.value)}
-              placeholder="0"
-            />
-            seconds
-          </div>
-        )}
+export const AdditionalFields = ({ command, onChange }: IRedBlackStrategyAdditionalFieldsProps) => (
+  <div className="form-group">
+    <div className="col-md-12 checkbox">
+      <label>
+        <input
+          type="checkbox"
+          checked={command.rollback?.onFailure ?? false}
+          onChange={(e) => onChange('rollback.onFailure', e.target.checked)}
+        />
+        Rollback to previous server group if deployment fails <HelpField id="strategy.redblack.rollback" />
+      </label>
+    </div>
+    <div className="col-md-12 checkbox">
+      <label>
+        <input type="checkbox" checked={command.scaleDown} onChange={(e) => onChange('scaleDown', e.target.checked)} />
+        Scale down replaced server groups to zero instances
+        <HelpField id="strategy.redblack.scaleDown" />
+      </label>
+    </div>
+    <div className="col-md-12 form-inline">
+      <label>
+        Maximum number of server groups to leave
+        <HelpField id="strategy.redblack.maxRemainingAsgs" />
+      </label>
+      <input
+        className="form-control input-sm"
+        style={{ width: '50px' }}
+        type="number"
+        value={command.maxRemainingAsgs}
+        onChange={(e) => onChange('maxRemainingAsgs', e.target.value)}
+        min="2"
+      />
+    </div>
+    <div className="col-md-12 form-inline">
+      <label>
+        Wait Before Disable
+        <HelpField content="Time to wait before disabling all old server groups in this cluster" />
+      </label>
+      <input
+        className="form-control input-sm"
+        style={{ width: '60px' }}
+        min="0"
+        type="number"
+        value={command.delayBeforeDisableSec}
+        onChange={(e) => onChange('delayBeforeDisableSec', e.target.value)}
+        placeholder="0"
+      />
+      seconds
+    </div>
+    {command.scaleDown && (
+      <div className="col-md-12 form-inline" style={{ marginTop: '5px' }}>
+        <label>
+          Wait Before Scale Down
+          <HelpField content="Time to wait before scaling down all old server groups in this cluster" />
+        </label>
+        <input
+          className="form-control input-sm"
+          style={{ width: '60px' }}
+          min="0"
+          type="number"
+          value={command.delayBeforeScaleDownSec}
+          onChange={(e) => onChange('delayBeforeScaleDownSec', e.target.value)}
+          placeholder="0"
+        />
+        seconds
       </div>
-    );
-  }
-}
+    )}
+  </div>
+);