From 6dc1e42e2bc95ccf0076c19705fce1b5bfebfaf9 Mon Sep 17 00:00:00 2001
From: "mergify[bot]" <37929162+mergify[bot]@users.noreply.github.com>
Date: Mon, 13 May 2024 18:14:47 +0000
Subject: [PATCH] fix(redblack): fixing redblack onchange values (#10107)
 (#10110)

* fix(redblack): fixing redblack onchange values

* fix(lint): fixing linting erros

* fix(lint): fixing linting - lodash

* fix(prettier): fixing prettier for AdditionalFields.tsx

---------

Co-authored-by: ovidiupopa07 <105648914+ovidiupopa07@users.noreply.github.com>
(cherry picked from commit 443408e7f6404b10d195b146f2f68fe926c2413a)

Co-authored-by: Shlomo Daari <104773977+shlomodaari@users.noreply.github.com>
---
 .../strategies/redblack/AdditionalFields.tsx  | 165 ++++++++++--------
 1 file changed, 97 insertions(+), 68 deletions(-)

diff --git a/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx b/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
index 1142429eb42..b243a78d22c 100644
--- a/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
+++ b/packages/core/src/deploymentStrategy/strategies/redblack/AdditionalFields.tsx
@@ -8,72 +8,101 @@ export interface IRedBlackStrategyAdditionalFieldsProps extends IDeploymentStrat
   command: IRedBlackCommand;
 }
 
-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
+export class AdditionalFields extends React.Component<IRedBlackStrategyAdditionalFieldsProps> {
+  private rollbackOnFailureChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.rollback.onFailure = e.target.checked;
+    this.forceUpdate();
+  };
+
+  private scaleDownChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.scaleDown = e.target.checked;
+    this.forceUpdate();
+  };
+
+  private maxRemainingAsgsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.maxRemainingAsgs = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  private delayBeforeDisableSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.delayBeforeDisableSec = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  private delayBeforeScaleDownSecChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    this.props.command.delayBeforeScaleDownSec = parseInt(e.target.value, 10);
+    this.forceUpdate();
+  };
+
+  public render() {
+    const { command } = this.props;
+    return (
+      <div className="form-group">
+        <div className="col-md-12 checkbox" style={{ marginTop: 0 }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={command.rollback?.onFailure ?? false}
+              onChange={this.rollbackOnFailureChange}
+            />
+            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={this.scaleDownChange} />
+            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={this.maxRemainingAsgsChange}
+            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={this.delayBeforeDisableSecChange}
+            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={this.delayBeforeScaleDownSecChange}
+              placeholder="0"
+            />
+            seconds
+          </div>
+        )}
       </div>
-    )}
-  </div>
-);
+    );
+  }
+}