Formik upgrade

frontend/package.json

@@ -81,8 +81,8 @@
     "core-js": "2.x",
     "d3": "^5.9.2",
     "file-saver": "1.3.x",
-    "formik": "2.0.1-rc.1",
     "focus-trap-react": "^6.0.0",
+    "formik": "2.0.3",
     "fuzzysearch": "1.0.x",
     "history": "4.x",
     "immutable": "3.x",

frontend/packages/dev-console/src/components/formik-fields/CheckboxField.tsx

@@ -3,19 +3,22 @@ import * as React from 'react';
 import { useField } from 'formik';
 import { FormGroup, Checkbox } from '@patternfly/react-core';
 import { CheckboxFieldProps } from './field-types';
-import { getFieldId } from './field-utils';
+import { getCheckboxFieldId } from './field-utils';
 
 const CheckboxField: React.FC<CheckboxFieldProps> = ({
   label,
   formLabel,
   helpText,
   required,
+  value,
+  name,
   ...props
 }) => {
-  const [field, { touched, error }] = useField(props.name);
-  const fieldId = getFieldId(props.name, 'checkbox');
+  const [field, { touched, error }] = useField({ value, name, type: 'checkbox' });
+  const fieldId = getCheckboxFieldId(name, value);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
+  const { checked, ...restField } = field;
   return (
     <FormGroup
       fieldId={fieldId}
@@ -26,14 +29,17 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
       isRequired={required}
     >
       <Checkbox
-        {...field}
+        {...restField}
         {...props}
+        // TODO(jtomasek): value shoule be used from restField once the type is fixed on Formik side
+        // https://github.com/jaredpalmer/formik/issues/1961#issuecomment-555186737
+        value={(restField.value as unknown) as string}
         id={fieldId}
         label={label}
-        isChecked={field.value}
+        isChecked={checked}
         isValid={isValid}
         aria-describedby={`${fieldId}-helper`}
-        onChange={(value, event) => field.onChange(event)}
+        onChange={(val, event) => field.onChange(event)}
       />
     </FormGroup>
   );

frontend/packages/dev-console/src/components/formik-fields/field-types.ts

@@ -27,6 +27,7 @@ export interface TextAreaProps extends FieldProps {
 
 export interface CheckboxFieldProps extends FieldProps {
   formLabel?: string;
+  value?: string;
 }
 
 export interface SearchInputFieldProps extends InputFieldProps {

frontend/packages/dev-console/src/components/formik-fields/field-utils.ts

@@ -1,3 +1,8 @@
 export const getFieldId = (fieldName: string, fieldType: string) => {
   return `form-${fieldType}-${fieldName.replace(/\./g, '-')}-field`;
 };
+
+export const getCheckboxFieldId = (fieldName: string, fieldValue?: string) => {
+  const name = fieldValue ? `${fieldName}-${fieldValue}` : fieldName;
+  return getFieldId(name, 'checkbox');
+};

frontend/packages/dev-console/src/components/import/app/ApplicationSelector.tsx

@@ -85,10 +85,10 @@ const ApplicationSelector: React.FC<ApplicationSelectorProps> = ({
           />
         </FormGroup>
       )}
-      {(!applicationsAvailable || selectedKey.value === CREATE_APPLICATION_KEY) && (
+      {(!applicationsAvailable || (selectedKey.value as string) === CREATE_APPLICATION_KEY) && (
         <InputField
           type={TextInputTypes.text}
-          required={selectedKey.value === CREATE_APPLICATION_KEY}
+          required={(selectedKey.value as string) === CREATE_APPLICATION_KEY}
           name="application.name"
           label="Application Name"
           data-test-id="application-form-app-input"

frontend/packages/dev-console/src/components/pipelines/__tests__/PipelineResourceSection.spec.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import * as Renderer from 'react-test-renderer';
+import { Formik } from 'formik';
 import PipelineResourceSection, {
   ResourceSectionProps,
 } from '../pipeline-form/PipelineResourceSection';
@@ -34,7 +35,11 @@ describe('PipelineResourceSection component', () => {
   });
 
   it('It should match the previous pipeline snapshot', () => {
-    const tree = Renderer.create(<PipelineResourceSection resources={resources} />).toJSON();
+    const tree = Renderer.create(
+      <Formik onSubmit={() => {}} initialValues={{}}>
+        {() => <PipelineResourceSection resources={resources} />}
+      </Formik>,
+    ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/SwitchField.tsx

@@ -2,20 +2,23 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import { FormGroup, Switch } from '@patternfly/react-core';
-import { getFieldId } from '@console/dev-console/src/components/formik-fields/field-utils';
+import { getCheckboxFieldId } from '@console/dev-console/src/components/formik-fields/field-utils';
 import { CheckboxFieldProps } from '@console/dev-console/src/components/formik-fields/field-types';
 
 const SwitchField: React.FC<CheckboxFieldProps> = ({
   label,
   formLabel,
   helpText,
   required,
+  value,
+  name,
   ...props
 }) => {
-  const [field, { touched, error }] = useField(props.name);
-  const fieldId = getFieldId(props.name, 'checkbox');
+  const [field, { touched, error }] = useField({ value, name, type: 'checkbox' });
+  const fieldId = getCheckboxFieldId(name, value);
   const isValid = !(touched && error);
   const errorMessage = !isValid ? error : '';
+  const { checked, ...restField } = field;
   return (
     <FormGroup
       fieldId={fieldId}
@@ -26,13 +29,16 @@ const SwitchField: React.FC<CheckboxFieldProps> = ({
       isRequired={required}
     >
       <Switch
-        {...field}
+        {...restField}
         {...props}
+        // TODO(jtomasek): value shoule be used from restField once the type is fixed on Formik side
+        // https://github.com/jaredpalmer/formik/issues/1961#issuecomment-555186737
+        value={(restField.value as unknown) as string}
         id={fieldId}
         label={label}
-        isChecked={field.value}
+        isChecked={checked}
         aria-describedby={`${fieldId}-helper`}
-        onChange={(value, event) => field.onChange(event)}
+        onChange={(val, event) => field.onChange(event)}
       />
     </FormGroup>
   );

frontend/public/components/factory/modal.tsx

@@ -169,7 +169,7 @@ export type ModalSubmitFooterProps = {
   message?: string;
   errorMessage?: string;
   inProgress: boolean;
-  cancel: (e: Event) => void;
+  cancel: (e?: React.SyntheticEvent<any, Event>) => void;
   cancelText?: React.ReactNode;
   submitText: React.ReactNode;
   submitDisabled?: boolean;

frontend/public/components/modals/configure-machine-autoscaler-modal.tsx

@@ -129,7 +129,7 @@ export const configureMachineAutoscalerModal = createModalLauncher(ConfigureMach
 
 export type ConfigureMachineAutoscalerModalProps = {
   machineSet: K8sResourceKind;
-  cancel: (e: Event) => void;
+  cancel: (e?: React.SyntheticEvent<any, Event>) => void;
   close: () => void;
 };
 

frontend/yarn.lock

@@ -7677,16 +7677,17 @@ format@^0.2.2:
   resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha1-1hcBB+nv3E7TDJ3DkBbflCtctYs=
 
-formik@2.0.1-rc.1:
-  version "2.0.1-rc.1"
-  resolved "https://registry.yarnpkg.com/formik/-/formik-2.0.1-rc.1.tgz#5025b1731378db1c9f0560f9ba748e744854e086"
-  integrity sha512-mFIjzOtvyCPE37xWA9XSwMtMxXiieBNnQARtZpdbP2DMIzbSMcwuup9WIzeO16nNROMBqKzb+Swd47t/HOSeyA==
+formik@2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.0.3.tgz#7cf088b1a6e0ba21782b73a90453a78426959168"
+  integrity sha512-kYBvcxlsYSncY8OiJHD49C0UmoWXbgmIc9V1g3N1WwBJ7SMLk34QpcJDgroYd42K1cH+mSJlXhB7PlgTXTzlWg==
   dependencies:
     deepmerge "^2.1.1"
     hoist-non-react-statics "^3.3.0"
-    lodash "^4.17.11"
-    lodash-es "^4.17.11"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
     react-fast-compare "^2.0.1"
+    scheduler "^0.14.0"
     tiny-warning "^1.0.2"
     tslib "^1.9.3"
 
@@ -10284,10 +10285,10 @@ lodash-es@4.x, lodash-es@^4.2.1:
   version "4.17.7"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.7.tgz#db240a3252c3dd8360201ac9feef91ac977ea856"
 
-lodash-es@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
-  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
+lodash-es@^4.17.14:
+  version "4.17.15"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
+  integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
 
 lodash._baseassign@^3.0.0:
   version "3.2.0"
@@ -10483,7 +10484,7 @@ lodash@^4.17.11, lodash@^4.17.2, lodash@^4.17.4:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
-lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.5:
+lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -14492,6 +14493,14 @@ scheduler@^0.13.6:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.14.0.tgz#b392c23c9c14bfa2933d4740ad5603cc0d59ea5b"
+  integrity sha512-9CgbS06Kki2f4R9FjLSITjZo5BZxPsryiRNyL3LpvrM9WxcVmhlqAOc9E+KQbeI2nqej4JIIbOsfdL51cNb4Iw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.15.0:
   version "0.15.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e"