fix(core/presentation): Do not render the form input even once (rende…

…r the spel input instead) if spel is present and freeform is enabled (spinnaker#8474)

app/scripts/modules/core/src/presentation/forms/fields/FormikFormField.spec.tsx

@@ -138,6 +138,19 @@ describe('<FormikFormField/>', () => {
       expect(component.find(ReactSelectInput).length).toEqual(0);
     });
 
+    it('does not render the input even once if the field value is SpEL and freeform SpEL inputs are enabled', () => {
+      const spy = jasmine.createSpy();
+      const NeverRenderedComponent = () => {
+        spy();
+        return <span />;
+      };
+      const TestField = () => (
+        <FormikFormField name="account" label="Account" input={NeverRenderedComponent} spelAware={true} />
+      );
+      mount(<Test initialValues={{ account: '${spel_account}' }} render={() => <TestField />} />);
+      expect(spy).not.toHaveBeenCalled();
+    });
+
     it('renders the default input if the field value is not SpEL', () => {
       const component = mount(
         <Test initialValues={{ account: 'account' }} render={() => <AccountField propsSpelAware={true} />} />,

app/scripts/modules/core/src/presentation/forms/fields/FormikFormField.tsx

@@ -1,16 +1,15 @@
-import React from 'react';
-import { toPath, isString } from 'lodash';
-import { FastField, Field, FieldProps, FormikConsumer, FormikContext } from 'formik';
-
 import { firstDefined } from 'core/utils';
+import { FastField, Field, FieldProps, FormikConsumer, FormikContext } from 'formik';
+import { isString, toPath } from 'lodash';
+import React from 'react';
+import { useMountStatusRef } from '../../hooks/useMountStatusRef.hook';
+import { FormikSpelContext, SimpleSpelInput, SpelAwareInputMode, SpelService, SpelToggle } from '../../spel';
 
 import { WatchValue } from '../../WatchValue';
-import { composeValidators, IValidator, useValidationData, Validators } from '../validation';
-import { ICommonFormFieldProps, renderContent } from './index';
 import { IFormInputValidation } from '../inputs';
 import { ILayoutProps, LayoutContext } from '../layouts';
-import { FormikSpelContext, SimpleSpelInput, SpelAwareInputMode, SpelService, SpelToggle } from '../../spel';
-import { useMountStatusRef } from '../../hooks/useMountStatusRef.hook';
+import { composeValidators, IValidator, useValidationData, Validators } from '../validation';
+import { ICommonFormFieldProps, renderContent } from './index';
 
 export interface IFormikFieldProps<T> {
   /**
@@ -104,21 +103,17 @@ function FormikFormFieldImpl<T = any>(props: IFormikFormFieldImplProps<T>) {
     messageNode,
   };
 
-  const [inputMode, setInputMode] = React.useState(SpelAwareInputMode.DEFAULT);
+  const freeformInputAllowed = firstDefined(props.spelAware, SpelAwareFromContext, false);
 
-  const freeformInputEnabled = firstDefined(props.spelAware, SpelAwareFromContext, false);
-
-  React.useEffect(() => {
-    if (!freeformInputEnabled) {
-      return;
-    }
+  const initialInputMode = React.useMemo(() => {
     const fieldValue = getIn(props.formik.values, name, '');
-    const isFieldValueSpel = SpelService.includesSpel(fieldValue);
-    if (isFieldValueSpel) {
-      setInputMode(SpelAwareInputMode.FREEFORM);
-    }
+    return freeformInputAllowed && SpelService.includesSpel(fieldValue)
+      ? SpelAwareInputMode.FREEFORM
+      : SpelAwareInputMode.DEFAULT;
   }, []);
 
+  const [inputMode, setInputMode] = React.useState(initialInputMode);
+
   const onSpelToggleClick = () => {
     formik.setFieldValue(name, null);
     setInputMode(inputMode === SpelAwareInputMode.DEFAULT ? SpelAwareInputMode.FREEFORM : SpelAwareInputMode.DEFAULT);
@@ -133,7 +128,7 @@ function FormikFormFieldImpl<T = any>(props: IFormikFormFieldImplProps<T>) {
     const composedActions = (
       <>
         {actions}
-        {freeformInputEnabled && <SpelToggle inputMode={inputMode} onClick={onSpelToggleClick} />}
+        {freeformInputAllowed && <SpelToggle inputMode={inputMode} onClick={onSpelToggleClick} />}
       </>
     );