chore(core/presentation): Update formik from 0.11.11 to 1.3.1 (#5917)

- Temporarily type `errors` as `any` when it doesn't match the shape of the form

app/scripts/modules/amazon/src/loadBalancer/configure/application/ALBListeners.tsx

@@ -108,7 +108,7 @@ class ALBListenersImpl extends React.Component<IALBListenersProps, IALBListeners
   public validate(
     values: IAmazonApplicationLoadBalancerUpsertCommand,
   ): FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand> {
-    const errors = {} as FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand>;
+    const errors = {} as any;
 
     // Check to make sure all target groups have an associated listener
     const targetGroupNames = values.targetGroups.map(tg => tg.name);

app/scripts/modules/amazon/src/loadBalancer/configure/application/ConfigureOidcConfigModal.tsx

@@ -89,7 +89,7 @@ export class ConfigureOidcConfigModal extends React.Component<
 
     return (
       <div>
-        <Formik<{}, IAuthenticateOidcActionConfig>
+        <Formik<IAuthenticateOidcActionConfig>
           initialValues={initialValues}
           onSubmit={this.submit}
           validate={this.validate}

app/scripts/modules/amazon/src/loadBalancer/configure/application/CreateApplicationLoadBalancer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cloneDeep, get } from 'lodash';
-import { FormikErrors, FormikValues } from 'formik';
+import { FormikErrors } from 'formik';
 import { IPromise } from 'angular';
 
 import {
@@ -241,10 +241,11 @@ export class CreateApplicationLoadBalancer extends React.Component<
     }
   };
 
-  private validate = (values: FormikValues): FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand> => {
+  private validate = (
+    values: IAmazonApplicationLoadBalancerUpsertCommand,
+  ): FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand> => {
     this.setState({ includeSecurityGroups: !!values.vpcId });
-    const errors = {} as FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand>;
-    return errors;
+    return {};
   };
 
   public render() {

app/scripts/modules/amazon/src/loadBalancer/configure/application/TargetGroups.tsx

@@ -46,7 +46,7 @@ class TargetGroupsImpl extends React.Component<ITargetGroupsProps, ITargetGroups
   public validate(
     values: IAmazonApplicationLoadBalancerUpsertCommand,
   ): FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand> {
-    const errors = {} as FormikErrors<IAmazonApplicationLoadBalancerUpsertCommand>;
+    const errors = {} as any;
 
     let hasErrors = false;
     const duplicateTargetGroups = uniq(

app/scripts/modules/amazon/src/loadBalancer/configure/network/NLBListeners.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { difference, flatten, get, uniq } from 'lodash';
-import { FormikErrors } from 'formik';
 
 import { IWizardPageProps, ValidationMessage, wizardPage } from '@spinnaker/core';
 
@@ -32,7 +31,7 @@ class NLBListenersImpl extends React.Component<INLBListenersProps, INLBListeners
   }
 
   public validate(values: IAmazonNetworkLoadBalancerUpsertCommand) {
-    const errors = {} as FormikErrors<IAmazonNetworkLoadBalancerUpsertCommand>;
+    const errors = {} as any;
 
     // Check to make sure all target groups have an associated listener
     const targetGroupNames = values.targetGroups.map(tg => tg.name);

app/scripts/modules/amazon/src/loadBalancer/configure/network/TargetGroups.tsx

@@ -47,7 +47,7 @@ class TargetGroupsImpl extends React.Component<ITargetGroupsProps, ITargetGroups
   public validate(
     values: IAmazonNetworkLoadBalancerUpsertCommand,
   ): FormikErrors<IAmazonNetworkLoadBalancerUpsertCommand> {
-    const errors = {} as FormikErrors<IAmazonNetworkLoadBalancerUpsertCommand>;
+    const errors = {} as any;
 
     let hasErrors = false;
     const duplicateTargetGroups = uniq(

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Option } from 'react-select';
-import { FormikErrors } from 'formik';
 
 import { IWizardPageProps, wizardPage, HelpField, TetheredSelect, ReactInjector } from '@spinnaker/core';
 
@@ -34,7 +33,7 @@ class ServerGroupLoadBalancersImpl extends React.Component<
   };
 
   public validate(_values: IAmazonServerGroupCommand) {
-    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+    const errors = {} as any;
     // TODO: check if this is correct, or if we should use the 'values' argument
     const { values } = this.props.formik;
 

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FormikErrors } from 'formik';
 
 import { IWizardPageProps, wizardPage, FirewallLabels } from '@spinnaker/core';
 
@@ -15,7 +14,7 @@ class ServerGroupSecurityGroupsImpl extends React.Component<IServerGroupSecurity
   }
 
   public validate(values: IAmazonServerGroupCommand) {
-    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+    const errors = {} as any;
 
     if (values.viewState.dirty.securityGroups) {
       errors.securityGroups = 'You must acknowledge removed security groups.';

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FormikErrors } from 'formik';
 
 import { IWizardPageProps, wizardPage } from '@spinnaker/core';
 
@@ -12,7 +11,7 @@ class ServerGroupZonesImpl extends React.Component<IServerGroupZonesProps> {
   public static LABEL = 'Availability Zones';
 
   public validate(values: IAmazonServerGroupCommand) {
-    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+    const errors = {} as any;
 
     if (!values.availabilityZones || values.availabilityZones.length === 0) {
       errors.availabilityZones = 'You must select at least one availability zone.';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Field, FormikErrors } from 'formik';
+import { Field } from 'formik';
 import Select, { Option } from 'react-select';
 
 import { HelpField, MapEditor, PlatformHealthOverride } from '@spinnaker/core';
@@ -13,7 +13,7 @@ export class ServerGroupAdvancedSettingsCommon extends React.Component<IServerGr
   private duplicateKeys = false;
 
   public validate = (values: IAmazonServerGroupCommand) => {
-    const errors: FormikErrors<IAmazonServerGroupCommand> = {};
+    const errors = {} as any;
 
     if (!values.keyPair) {
       errors.keyPair = 'Key Name is required';

app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/artifactSettings.cf.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 
-import { FormikErrors } from 'formik';
 import Select, { Option } from 'react-select';
 
 import {
@@ -200,8 +199,9 @@ class ArtifactSettingsImpl extends React.Component<
 
   private getArtifactInput = (): JSX.Element => {
     const { artifactAccounts } = this.props;
-    const { values, errors } = this.props.formik;
+    const { values, errors: _errors } = this.props.formik;
     const { artifact } = values;
+    const errors = _errors as any;
 
     return (
       <div>
@@ -251,9 +251,10 @@ class ArtifactSettingsImpl extends React.Component<
   };
 
   private getPackageInput = (): JSX.Element => {
-    const { values, errors } = this.props.formik;
+    const { values, errors: _errors } = this.props.formik;
     const { artifact } = values;
     const { regions, filteredClusters, serverGroups, allCloudFoundryCredentials } = this.state;
+    const errors = _errors as any;
 
     return (
       <div>
@@ -333,8 +334,9 @@ class ArtifactSettingsImpl extends React.Component<
 
   private getTriggerInput = (): JSX.Element => {
     const { artifactAccounts } = this.props;
-    const { errors, values } = this.props.formik;
+    const { errors: _errors, values } = this.props.formik;
     const { artifact } = values;
+    const errors = _errors as any;
 
     return (
       <div>
@@ -445,7 +447,7 @@ class ArtifactSettingsImpl extends React.Component<
   }
 
   public validate(values: ICloudFoundryCreateServerGroupArtifactSettingsProps) {
-    const errors = {} as FormikErrors<ICloudFoundryCreateServerGroupCommand>;
+    const errors = {} as any;
     if (values.artifact.type === 'trigger') {
       if (!values.artifact.account) {
         errors.artifact = errors.artifact || {};

app/scripts/modules/cloudfoundry/src/serverGroup/configure/wizard/sections/configurationSettings.cf.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import Select, { Option } from 'react-select';
-import { FormikErrors } from 'formik';
 
 import { IArtifactAccount, IWizardPageProps, wizardPage, ValidationMessage, HelpField } from '@spinnaker/core';
 
@@ -233,7 +232,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
       addServicesVariable,
       removeServicesVariable,
     } = this;
-    const { errors } = this.props.formik;
+    const { errors } = this.props.formik as any;
     if (isManifestDirectSource(manifest)) {
       return (
         <div>
@@ -442,7 +441,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
 
   private triggerConfiguration = (manifest: ICloudFoundryManifestSource): JSX.Element => {
     const { artifactAccounts } = this.props;
-    const { errors } = this.props.formik;
+    const { errors } = this.props.formik as any;
 
     return (
       <div>
@@ -493,7 +492,7 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
 
   private artifactConfiguration = (manifest: ICloudFoundryManifestSource): JSX.Element => {
     const { artifactAccounts } = this.props;
-    const { errors } = this.props.formik;
+    const { errors } = this.props.formik as any;
 
     if (isManifestArtifactSource(manifest)) {
       return (
@@ -609,10 +608,8 @@ class ConfigurationSettingsImpl extends React.Component<ICloudFoundryServerGroup
     );
   }
 
-  public validate(
-    values: ICloudFoundryServerGroupConfigurationSettingsProps,
-  ): FormikErrors<ICloudFoundryCreateServerGroupCommand> {
-    const errors = {} as FormikErrors<ICloudFoundryCreateServerGroupCommand>;
+  public validate(values: ICloudFoundryServerGroupConfigurationSettingsProps) {
+    const errors = {} as any;
     const isStorageSize = (value: string) => /\d+[MG]/.test(value);
     if (isManifestDirectSource(values.manifest)) {
       if (!isStorageSize(values.manifest.memory)) {

app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx

@@ -153,7 +153,7 @@ export class EntityTagEditor extends React.Component<IEntityTagEditorProps, IEnt
       <div>
         <TaskMonitorWrapper monitor={this.state.taskMonitor} />
 
-        <Formik<{}, IEntityTagEditorValues>
+        <Formik<IEntityTagEditorValues>
           initialValues={initialValues}
           onSubmit={this.upsertTag}
           validate={this.validate}

app/scripts/modules/core/src/modal/wizard/WizardModal.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
-import { Formik, Form, FormikValues } from 'formik';
+import { Formik, Form } from 'formik';
 import { Modal } from 'react-bootstrap';
 import { merge, isArray, isObject, isString } from 'lodash';
 
@@ -18,7 +18,7 @@ export interface IWizardPageData<T> {
   element: HTMLElement;
   label: string;
   props: IWizardPageProps<T>;
-  validate: IWizardPageValidate;
+  validate: IWizardPageValidate<T>;
 }
 
 export interface IWizardModalProps<T> extends IModalComponentProps {
@@ -29,7 +29,7 @@ export interface IWizardModalProps<T> extends IModalComponentProps {
   loading?: boolean;
   submitButtonLabel: string;
   taskMonitor: TaskMonitor;
-  validate: IWizardPageValidate;
+  validate: IWizardPageValidate<T>;
   closeModal?(result?: any): void; // provided by ReactModal
   dismissModal?(rejection?: any): void; // provided by ReactModal
 }
@@ -46,7 +46,7 @@ export interface IWizardModalState<T> {
 export class WizardModal<T = {}> extends React.Component<IWizardModalProps<T>, IWizardModalState<T>> {
   private pages: { [label: string]: IWizardPageData<T> } = {};
   private stepsElement: HTMLDivElement;
-  private formikRef = React.createRef<Formik<{}, any>>();
+  private formikRef = React.createRef<Formik<any>>();
 
   constructor(props: IWizardModalProps<T>) {
     super(props);
@@ -136,7 +136,7 @@ export class WizardModal<T = {}> extends React.Component<IWizardModalProps<T>, I
     return this.getFilteredChildren().map((child: any) => child.type.label);
   }
 
-  private validate = (values: FormikValues): any => {
+  private validate = (values: T): any => {
     const errors: Array<{ [key: string]: string }> = [];
     const newPageErrors: { [pageName: string]: { [key: string]: string } } = {};
 
@@ -175,7 +175,7 @@ export class WizardModal<T = {}> extends React.Component<IWizardModalProps<T>, I
     return (
       <>
         {taskMonitor && <TaskMonitorWrapper monitor={taskMonitor} />}
-        <Formik<{}, T>
+        <Formik<T>
           ref={this.formikRef}
           initialValues={initialValues}
           onSubmit={this.props.closeModal}

app/scripts/modules/core/src/modal/wizard/WizardPage.tsx

@@ -32,7 +32,7 @@ export interface IWizardPageWrapper<P> extends React.ComponentClass<P> {
   label: string;
 }
 
-export type IWizardPageValidate = (values: { [key: string]: any }) => { [key: string]: string };
+export type IWizardPageValidate<T> = (values: T) => any;
 
 export function wizardPage<P extends IWizardPageProps<T>, T>(WrappedComponent: IWizardPage<P>): IWizardPageWrapper<P> {
   class WizardPage extends React.Component<P, IWizardPageState> {
@@ -42,7 +42,7 @@ export function wizardPage<P extends IWizardPageProps<T>, T>(WrappedComponent: I
     public static label = WrappedComponent.LABEL;
 
     public element: any;
-    public validate: IWizardPageValidate;
+    public validate: IWizardPageValidate<T>;
 
     constructor(props: P) {
       super(props);

app/scripts/modules/core/src/presentation/HoverablePopover.tsx

@@ -219,7 +219,8 @@ class PopoverOffset extends React.Component<IPopoverOffsetProps, IPopoverOffsetS
 
     if (offset) {
       const { style } = this.props;
-      const offsetStyle = { ...style, left: style.left + offset };
+      const left = parseInt(`${style.left}`, 10) + offset;
+      const offsetStyle = { ...style, left };
       return <Popover {...rest} style={offsetStyle} arrowOffsetLeft={offsetPercent} />;
     } else {
       return <Popover {...rest} />;

app/scripts/modules/core/src/projects/configure/Applications.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { FormikErrors, getIn } from 'formik';
-import { Effect } from 'formik-effect';
 import { isEqual } from 'lodash';
 
 import { IProject } from 'core/domain';
@@ -29,31 +28,32 @@ class ApplicationsImpl extends React.Component<IApplicationsProps> {
       config: {
         applications: applicationErrors,
       },
-    };
+    } as any;
+  }
+
+  public componentDidMount() {
+    const apps = getIn(this.props.formik.values, 'config.applications', []);
+    this.props.onApplicationsChanged && this.props.onApplicationsChanged(apps);
+  }
+
+  public componentDidUpdate(prevProps: IApplicationsProps) {
+    const prevApps = getIn(prevProps.formik.values, 'config.applications', []);
+    const nextApps = getIn(this.props.formik.values, 'config.applications', []);
+
+    if (!isEqual(prevApps, nextApps)) {
+      this.props.onApplicationsChanged && this.props.onApplicationsChanged(nextApps);
+    }
   }
 
   public render() {
     const { allApplications } = this.props;
 
     return (
-      <>
-        <Effect<IProject>
-          onChange={(prev, next) => {
-            const prevApps = getIn(prev.values, 'config.applications', []);
-            const nextApps = getIn(next.values, 'config.applications', []);
-
-            if (!isEqual(prevApps, nextApps)) {
-              this.props.onApplicationsChanged && this.props.onApplicationsChanged(nextApps);
-            }
-          }}
-        />
-
-        <FormikApplicationsPicker
-          className="ConfigureProject-Applications"
-          applications={allApplications}
-          name="config.applications"
-        />
-      </>
+      <FormikApplicationsPicker
+        className="ConfigureProject-Applications"
+        name="config.applications"
+        applications={allApplications}
+      />
     );
   }
 }

app/scripts/modules/core/src/projects/configure/Clusters.tsx

@@ -40,7 +40,7 @@ class ClustersImpl extends React.Component<IClustersProps> {
           config: {
             clusters: clusterErrors,
           },
-        };
+        } as any;
       }
     }