refactor(core/serverGroup): Extract MinMaxDesiredChanges component (#…

…7171)

app/scripts/modules/amazon/src/serverGroup/details/resize/AmazonResizeServerGroupModal.tsx

@@ -1,30 +1,31 @@
 import * as React from 'react';
 import { Modal } from 'react-bootstrap';
 import { FormikErrors, Form, Formik, FormikProps } from 'formik';
-import { startCase } from 'lodash';
+import { pickBy } from 'lodash';
 
 import {
   Application,
-  HelpField,
-  IServerGroupJob,
-  ReactInjector,
+  CheckboxInput,
   FormikFormField,
-  TaskMonitor,
+  HelpField,
+  ICapacity,
   IModalComponentProps,
-  noop,
-  ReactModal,
+  IServerGroupJob,
+  MinMaxDesiredChanges,
   ModalClose,
+  NgReact,
   NumberInput,
   PlatformHealthOverride,
-  CheckboxInput,
+  ReactInjector,
+  ReactModal,
+  TaskMonitor,
   TaskReason,
   ValidationMessage,
-  NgReact,
-  ICapacity,
+  noop,
 } from '@spinnaker/core';
 
 import { AwsModalFooter } from 'amazon/common';
-import { IAmazonAsg, IAmazonServerGroup } from 'amazon/domain';
+import { IAmazonServerGroup } from 'amazon/domain';
 
 export interface IAmazonResizeServerGroupModalProps extends IModalComponentProps {
   application: Application;
@@ -53,12 +54,6 @@ export interface IResizeJob extends IServerGroupJob {
   interestingHealthProviderNames: string[];
 }
 
-interface IChangedField {
-  field: keyof ICapacity;
-  prevValue: number | string;
-  value: number | string;
-}
-
 export class AmazonResizeServerGroupModal extends React.Component<
   IAmazonResizeServerGroupModalProps,
   IAmazonResizeServerGroupModalState
@@ -100,27 +95,12 @@ export class AmazonResizeServerGroupModal extends React.Component<
     };
   }
 
-  private getChangedFields(capacity: ICapacity, asg: IAmazonAsg): IChangedField[] {
-    const fields: IChangedField[] = [
-      { field: 'min', value: capacity.min, prevValue: asg.minSize },
-      { field: 'max', value: capacity.max, prevValue: asg.maxSize },
-      { field: 'desired', value: capacity.desired, prevValue: asg.desiredCapacity },
-    ];
-
-    return fields.filter(field => field.value !== field.prevValue);
-  }
-
   private validate = (
     values: IAmazonResizeServerGroupValues,
   ): Partial<FormikErrors<IAmazonResizeServerGroupValues>> => {
     const { min, max, desired } = values;
-    const { asg } = this.props.serverGroup;
     const errors: Partial<FormikErrors<IAmazonResizeServerGroupValues>> = {};
 
-    if (this.getChangedFields(values, asg).length === 0) {
-      (errors as any).nochange = 'no changes to capacity';
-    }
-
     if (!this.state.advancedMode) {
       return errors;
     }
@@ -192,10 +172,14 @@ export class AmazonResizeServerGroupModal extends React.Component<
     const { serverGroup, application } = this.props;
     const { asg } = serverGroup;
 
-    const changedFields: IChangedField[] = this.getChangedFields({ min, max, desired }, asg);
-    const capacity = changedFields.reduce((acc: Partial<ICapacity>, change) => {
-      return { ...acc, [change.field]: change.value };
-    }, {});
+    const capacity = pickBy(
+      {
+        min: min !== asg.minSize ? min : undefined,
+        max: max !== asg.maxSize ? max : undefined,
+        desired: desired !== asg.desiredCapacity ? desired : undefined,
+      },
+      x => x !== undefined,
+    );
 
     const command: IResizeJob = {
       capacity,
@@ -419,7 +403,8 @@ export class AmazonResizeServerGroupModal extends React.Component<
           onSubmit={this.submit}
           render={formik => {
             const { asg } = serverGroup;
-            const changedCapacityFields: IChangedField[] = this.getChangedFields(formik.values, asg);
+            const currentCapacity = { min: asg.minSize, max: asg.maxSize, desired: asg.desiredCapacity };
+            const nextCapacity = formik.values;
 
             return (
               <>
@@ -451,13 +436,7 @@ export class AmazonResizeServerGroupModal extends React.Component<
                     <div className="form-group">
                       <div className="col-md-3 sm-label-right">Changes</div>
                       <div className="col-md-9 sm-control-field">
-                        {!changedCapacityFields.length && 'no changes'}
-                        {changedCapacityFields.map(field => (
-                          <div key={field.field}>
-                            {startCase(field.field)}: <b>{field.prevValue}</b>{' '}
-                            <i className="fa fa-long-arrow-alt-right" /> <b>{field.value}</b>
-                          </div>
-                        ))}
+                        <MinMaxDesiredChanges current={currentCapacity} next={nextCapacity} />
                       </div>
                     </div>
                   </Form>

app/scripts/modules/amazon/src/serverGroup/index.ts

@@ -1,4 +1,5 @@
 export * from './configure';
+export * from './details/resize/AmazonResizeServerGroupModal';
 export * from './details/scalingPolicy/ScalingPolicyTypeRegistry';
 export * from './details/scalingPolicy/ScalingPolicyWriter';
 export * from './details/scalingPolicy/upsert/PolicyTypeSelectionModal';

app/scripts/modules/core/src/serverGroup/index.ts

@@ -1,11 +1,12 @@
-export * from './serverGroupReader.service';
-export * from './serverGroupWriter.service';
-export * from './details/serverGroupWarningMessage.service';
+export * from './ServerGroup';
+export * from './ServerGroupHeader';
+export * from './configure/common';
 export * from './details/ServerGroupDetails';
 export * from './details/ServerGroupDetailsWrapper';
 export * from './details/ShowUserData';
+export * from './details/serverGroupWarningMessage.service';
 export * from './metrics/CloudMetricsReader';
-export * from './configure/common';
+export * from './resize/MinMaxDesiredChanges';
+export * from './serverGroupReader.service';
+export * from './serverGroupWriter.service';
 export * from './templates';
-export * from './ServerGroup';
-export * from './ServerGroupHeader';

app/scripts/modules/core/src/serverGroup/resize/MinMaxDesiredChanges.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { startCase } from 'lodash';
+import { ICapacity } from '@spinnaker/core';
+
+export interface IMinMaxDesiredChangesProps {
+  current: ICapacity;
+  next: ICapacity;
+}
+
+export function MinMaxDesiredChanges(props: IMinMaxDesiredChangesProps) {
+  const { current, next } = props;
+  const fields: Array<keyof ICapacity> = ['min', 'max', 'desired'];
+
+  const changedCapacityFields = fields
+    .map(field => {
+      const hasChanged = current[field] !== next[field];
+      return hasChanged ? { field, currentValue: current[field], nextValue: next[field] } : null;
+    })
+    .filter(x => !!x);
+
+  if (!changedCapacityFields.length) {
+    return <span>No changes</span>;
+  }
+
+  return (
+    <>
+      {changedCapacityFields.map(field => (
+        <div key={field.field}>
+          {startCase(field.field)}: <b>{field.currentValue}</b> <i className="fa fa-long-arrow-alt-right" />{' '}
+          <b>{field.nextValue}</b>
+        </div>
+      ))}
+    </>
+  );
+}