feat(amazon/serverGroupDetails): Make server group's details field ov…

…erridable (#8029)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

app/scripts/modules/amazon/src/serverGroup/configure/wizard/pages/ServerGroupBasicSettings.tsx

@@ -21,6 +21,7 @@ import { SubnetSelectField } from 'amazon/subnet';
 
 import { AmazonImageSelectInput } from '../../AmazonImageSelectInput';
 import { IAmazonServerGroupCommand } from '../../serverGroupConfiguration.service';
+import ServerGroupDetailsField from './fields/ServerGroupDetailsField';
 
 const isExpressionLanguage = (field: string) => field && field.includes('${');
 const isStackPattern = (stack: string) =>
@@ -170,13 +171,6 @@ export class ServerGroupBasicSettings
     values.clusterChanged(values);
   };
 
-  private freeFormDetailsChanged = (freeFormDetails: string) => {
-    const { setFieldValue, values } = this.props.formik;
-    values.freeFormDetails = freeFormDetails; // have to do it here to make sure it's done before calling values.clusterChanged
-    setFieldValue('freeFormDetails', freeFormDetails);
-    values.clusterChanged(values);
-  };
-
   public componentWillReceiveProps(nextProps: IServerGroupBasicSettingsProps) {
     this.setState(this.getStateFromProps(nextProps));
   }
@@ -266,26 +260,7 @@ export class ServerGroupBasicSettings
             </div>
           </div>
         )}
-        <div className="form-group">
-          <div className="col-md-3 sm-label-right">
-            Detail <HelpField id="aws.serverGroup.detail" />
-          </div>
-          <div className="col-md-7">
-            <input
-              type="text"
-              className="form-control input-sm no-spel"
-              value={values.freeFormDetails}
-              onChange={e => this.freeFormDetailsChanged(e.target.value)}
-            />
-          </div>
-        </div>
-        {errors.freeFormDetails && (
-          <div className="form-group row slide-in">
-            <div className="col-sm-9 col-sm-offset-2 error-message">
-              <span>{errors.freeFormDetails}</span>
-            </div>
-          </div>
-        )}
+        <ServerGroupDetailsField formik={formik} />
         {values.viewState.imageSourceText && (
           <div className="form-group">
             <div className="col-md-3 sm-label-right">Image Source</div>

app/scripts/modules/amazon/src/serverGroup/configure/wizard/pages/fields/ServerGroupDetailsField.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { FormikProps } from 'formik';
+
+import { HelpField, Overridable } from '@spinnaker/core';
+import { IAmazonServerGroupCommand } from '../../../serverGroupConfiguration.service';
+
+export interface DetailsFieldProps {
+  formik: FormikProps<IAmazonServerGroupCommand>;
+}
+
+@Overridable('aws.serverGroup.configure.detailsField')
+export default class ServerGroupDetailsField extends React.Component<DetailsFieldProps> {
+  private freeFormDetailsChanged = (freeFormDetails: string) => {
+    const { setFieldValue, values } = this.props.formik;
+    values.freeFormDetails = freeFormDetails; // have to do it here to make sure it's done before calling values.clusterChanged
+    setFieldValue('freeFormDetails', freeFormDetails);
+    values.clusterChanged(values);
+  };
+
+  render() {
+    const { errors, values } = this.props.formik;
+    return (
+      <>
+        <div className="form-group">
+          <div className="col-md-3 sm-label-right">
+            Detail <HelpField id="aws.serverGroup.detail" />
+          </div>
+          <div className="col-md-7">
+            <input
+              type="text"
+              className="form-control input-sm no-spel"
+              value={values.freeFormDetails}
+              onChange={e => this.freeFormDetailsChanged(e.target.value)}
+            />
+          </div>
+        </div>
+        {errors.freeFormDetails && (
+          <div className="form-group row slide-in">
+            <div className="col-sm-9 col-sm-offset-2 error-message">
+              <span>{errors.freeFormDetails}</span>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+}