Add +/- button for changing desired replicas, and its test cases

Signed-off-by: Hung-Han (Henry) Chen <chenhungh@gmail.com>
Signed-off-by: Hung-Han (Henry) Chen <1474479+chenhunghan@users.noreply.github.com>

src/renderer/components/+workloads-deployments/deployment-scale-dialog.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect'
 
 import { DeploymentScaleDialog } from "./deployment-scale-dialog";
@@ -120,5 +120,36 @@ describe('<DeploymentScaleDialog />', () => {
     expect(desiredScale).toHaveTextContent(`${initReplicas}`);
   });
 
+  it('changes the desired scale when clicking the icon buttons +/-', async () => {
+    const initReplicas = 1
+    deploymentApi.getReplicas = jest.fn().mockImplementationOnce(async () => initReplicas);
+    const { getByTestId } = render(<DeploymentScaleDialog />);
+    DeploymentScaleDialog.open(dummyDeployment);
+    let desiredScale, up, down
+    await waitFor(async () => 
+      [desiredScale, up, down] = await Promise.all([
+        getByTestId('desired-scale'),
+        getByTestId('desired-replicas-up'),
+        getByTestId('desired-replicas-down'),
+      ])
+    );
+    // initially, the desired scale should equals to initReplicas
+    expect(desiredScale).toHaveTextContent(`${initReplicas}`);
+    fireEvent.click(up);
+    expect(desiredScale).toHaveTextContent('2');
+    fireEvent.click(down);
+    expect(desiredScale).toHaveTextContent('1');
+    // edge case, desiredScale must > 0
+    fireEvent.click(down);
+    fireEvent.click(down);
+    expect(desiredScale).toHaveTextContent('1');
+    const times = 120;
+    // edge case, desiredScale must < scaleMax (100)
+    for (let i = 0; i < times; i++) {
+      fireEvent.click(up);
+    }
+    expect(desiredScale).toHaveTextContent('100');
+  });
+
 });
 

src/renderer/components/+workloads-deployments/deployment-scale-dialog.tsx

@@ -83,6 +83,14 @@ export class DeploymentScaleDialog extends Component<Props> {
     }
   }
 
+  desiredReplicasUp = () => {
+    this.desiredReplicas < this.scaleMax && this.desiredReplicas++
+  }
+  
+  desiredReplicasDown = () => {
+    this.desiredReplicas > 1 && this.desiredReplicas--
+  };
+
   renderContents() {
     const { currentReplicas, desiredReplicas, onChange, scaleMax } = this;
     const warning = currentReplicas < 10 && desiredReplicas > 90;
@@ -98,6 +106,22 @@ export class DeploymentScaleDialog extends Component<Props> {
           <div className="slider-container">
             <Slider value={desiredReplicas} max={scaleMax} onChange={onChange as any /** see: https://github.com/mui-org/material-ui/issues/20191 */}/>
           </div>
+          <div className="plus-minus-container">
+            <i
+              className="Icon material"
+              onClick={this.desiredReplicasUp}
+              data-testid="desired-replicas-up"
+            >
+              <span className="icon">add_circle_outline</span>
+            </i>
+            <i
+              className="Icon material"
+              onClick={this.desiredReplicasDown}
+              data-testid="desired-replicas-down"
+            >
+              <span className="icon">remove_circle_outline</span>
+            </i>
+          </div>
         </div>
         {warning &&
         <div className="warning">