From 90ac8fe1de64dbe6472bb4aabbb791b1363d69ae Mon Sep 17 00:00:00 2001 From: Divyanshi Gupta Date: Tue, 28 Jan 2020 17:13:48 +0530 Subject: [PATCH] bump formik to 2.0.3 --- frontend/package.json | 2 +- .../formik-fields/ToggleableFieldBase.tsx | 11 +++++++---- .../src/components/formik-fields/field-types.ts | 1 + .../import/advanced/ResourceLimitSection.tsx | 17 ++++++++++------- .../__tests__/PipelineResourceSection.spec.tsx | 7 ++++++- .../__tests__/ProjectAccessForm.spec.tsx | 1 + frontend/public/components/factory/modal.tsx | 2 +- .../configure-machine-autoscaler-modal.tsx | 2 +- frontend/yarn.lock | 14 +++++++------- 9 files changed, 35 insertions(+), 22 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 3682c5d1705..842251b6471 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -87,7 +87,7 @@ "d3": "^5.9.2", "file-saver": "1.3.x", "focus-trap-react": "^6.0.0", - "formik": "2.0.1-rc.5", + "formik": "2.0.3", "fuzzysearch": "1.0.x", "history": "4.x", "immutable": "3.x", diff --git a/frontend/packages/console-shared/src/components/formik-fields/ToggleableFieldBase.tsx b/frontend/packages/console-shared/src/components/formik-fields/ToggleableFieldBase.tsx index 854b9c21cb0..2d72861c4f4 100644 --- a/frontend/packages/console-shared/src/components/formik-fields/ToggleableFieldBase.tsx +++ b/frontend/packages/console-shared/src/components/formik-fields/ToggleableFieldBase.tsx @@ -14,10 +14,12 @@ const ToggleableFieldBase: React.FC = ({ helpText, required, children, + 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 = getFieldId(name, 'checkbox'); const isValid = !(touched && error); const errorMessage = !isValid ? error : ''; return ( @@ -32,12 +34,13 @@ const ToggleableFieldBase: React.FC = ({ {children({ ...field, ...props, + value: field.value, id: fieldId, label, - isChecked: field.value, + isChecked: field.checked, isValid, 'aria-describedby': `${fieldId}-helper`, - onChange: (value, event) => field.onChange(event), + onChange: (val, event) => field.onChange(event), })} ); diff --git a/frontend/packages/console-shared/src/components/formik-fields/field-types.ts b/frontend/packages/console-shared/src/components/formik-fields/field-types.ts index 7eab0c04844..59de2cd147d 100644 --- a/frontend/packages/console-shared/src/components/formik-fields/field-types.ts +++ b/frontend/packages/console-shared/src/components/formik-fields/field-types.ts @@ -28,6 +28,7 @@ export interface TextAreaProps extends FieldProps { export interface CheckboxFieldProps extends FieldProps { formLabel?: string; + value?: string; } export interface SearchInputFieldProps extends InputFieldProps { diff --git a/frontend/packages/dev-console/src/components/import/advanced/ResourceLimitSection.tsx b/frontend/packages/dev-console/src/components/import/advanced/ResourceLimitSection.tsx index b1620dbf3e9..b1f7a62f5ac 100644 --- a/frontend/packages/dev-console/src/components/import/advanced/ResourceLimitSection.tsx +++ b/frontend/packages/dev-console/src/components/import/advanced/ResourceLimitSection.tsx @@ -1,12 +1,15 @@ import * as React from 'react'; import { ResourceLimitField } from '@console/shared'; -import { useField } from 'formik'; +import { useFormikContext, FormikValues } from 'formik'; import FormSection from '../section/FormSection'; import { MemoryUnits, CPUUnits } from '../import-types'; const ResourceLimitSection: React.FC = () => { - const [cpuLimits] = useField('limits.cpu'); - const [memoryLimits] = useField('limits.memory'); + const { + values: { + limits: { cpu, memory }, + }, + } = useFormikContext(); return (
CPU
@@ -15,7 +18,7 @@ const ResourceLimitSection: React.FC = () => { label="Request" unitName="limits.cpu.requestUnit" unitOptions={CPUUnits} - defaultUnitSize={`${cpuLimits.value.defaultRequestUnit}`} + defaultUnitSize={`${cpu.defaultRequestUnit}`} helpText="The minimum amount of CPU the container is guaranteed." /> @@ -24,7 +27,7 @@ const ResourceLimitSection: React.FC = () => { label="Limit" unitName="limits.cpu.limitUnit" unitOptions={CPUUnits} - defaultUnitSize={`${cpuLimits.value.defaultLimitUnit}`} + defaultUnitSize={`${cpu.defaultLimitUnit}`} helpText="The maximum amount of CPU the container is allowed to use when running." /> @@ -34,7 +37,7 @@ const ResourceLimitSection: React.FC = () => { label="Request" unitName="limits.memory.requestUnit" unitOptions={MemoryUnits} - defaultUnitSize={`${memoryLimits.value.defaultRequestUnit}`} + defaultUnitSize={`${memory.defaultRequestUnit}`} helpText="The minimum amount of Memory the container is guaranteed." /> @@ -43,7 +46,7 @@ const ResourceLimitSection: React.FC = () => { label="Limit" unitName="limits.memory.limitUnit" unitOptions={MemoryUnits} - defaultUnitSize={`${memoryLimits.value.defaultLimitUnit}`} + defaultUnitSize={`${memory.defaultLimitUnit}`} helpText="The maximum amount of Memory the container is allowed to use when running." /> diff --git a/frontend/packages/dev-console/src/components/pipelines/__tests__/PipelineResourceSection.spec.tsx b/frontend/packages/dev-console/src/components/pipelines/__tests__/PipelineResourceSection.spec.tsx index 2492214341e..b32afac9f1d 100644 --- a/frontend/packages/dev-console/src/components/pipelines/__tests__/PipelineResourceSection.spec.tsx +++ b/frontend/packages/dev-console/src/components/pipelines/__tests__/PipelineResourceSection.spec.tsx @@ -4,6 +4,7 @@ import * as Renderer from 'react-test-renderer'; import PipelineResourceSection, { ResourceSectionProps, } from '../pipeline-form/PipelineResourceSection'; +import { Formik } from 'formik'; jest.mock('react-dom', () => ({ findDOMNode: () => ({}), @@ -34,7 +35,11 @@ describe('PipelineResourceSection component', () => { }); it('It should match the previous pipeline snapshot', () => { - const tree = Renderer.create().toJSON(); + const tree = Renderer.create( + {}} initialValues={{}}> + {() => } + , + ).toJSON(); expect(tree).toMatchSnapshot(); }); }); diff --git a/frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx b/frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx index b946677aa45..d1d5e4f1b24 100644 --- a/frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx +++ b/frontend/packages/dev-console/src/components/project-access/__tests__/ProjectAccessForm.spec.tsx @@ -69,6 +69,7 @@ describe('Project Access Form', () => { unregisterField: jest.fn(), validateField: jest.fn(), validateForm: jest.fn(), + getFieldMeta: jest.fn(), validateOnBlur: true, validateOnChange: true, }; diff --git a/frontend/public/components/factory/modal.tsx b/frontend/public/components/factory/modal.tsx index 0218582248e..541390e682c 100644 --- a/frontend/public/components/factory/modal.tsx +++ b/frontend/public/components/factory/modal.tsx @@ -171,7 +171,7 @@ export type ModalSubmitFooterProps = { message?: string; errorMessage?: string; inProgress: boolean; - cancel: (e: Event) => void; + cancel: (e: React.SyntheticEvent) => void; cancelText?: React.ReactNode; submitText: React.ReactNode; submitDisabled?: boolean; diff --git a/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx b/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx index 8ef9301ccde..79d58f3f345 100644 --- a/frontend/public/components/modals/configure-machine-autoscaler-modal.tsx +++ b/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) => void; close: () => void; }; diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 63e3f605d51..c0f0a28b8c5 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -7857,15 +7857,15 @@ 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.5: - version "2.0.1-rc.5" - resolved "https://registry.yarnpkg.com/formik/-/formik-2.0.1-rc.5.tgz#856a36036fa27d707aa6879476623b4a7753e158" - integrity sha512-EEz+CLL5RYh95di4gdnlfrfCJrsC48Eis+kZhcqhanxlkA2ZMBmMLo7XxUZjMx+8aTZjEBOR3GQZstQ2/44chg== +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" @@ -10509,7 +10509,7 @@ 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: +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==