From 2ed016f87804a46dab32b3ee15cc289acd555f5d Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Wed, 21 Oct 2020 18:05:00 +0200 Subject: [PATCH] Fix use of useFormData after update - also minor refactor to use useCallback in policy flyout now that getFormData changes when the form data changes. --- .../components/data_tier_allocation.tsx | 7 +++- .../components/node_allocation.tsx | 5 ++- .../data_tier_allocation_field.tsx | 6 ++- .../min_age_input_field.tsx | 5 ++- .../components/policy_json_flyout.tsx | 41 ++++++++++--------- 5 files changed, 37 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx index 99fa2abac3abe..2aa7e75a48b1b 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/data_tier_allocation.tsx @@ -5,6 +5,7 @@ */ import React, { FunctionComponent } from 'react'; +import { get } from 'lodash'; import { i18n } from '@kbn/i18n'; import { EuiText, EuiSpacer, EuiSuperSelectOption } from '@elastic/eui'; @@ -93,10 +94,12 @@ export const DataTierAllocation: FunctionComponent = (props) => { const dataTierAllocationTypePath = `_meta.${phase}.dataTierAllocationType`; - const [{ [dataTierAllocationTypePath]: dataTierAllocationType }] = useFormData({ - watch: [dataTierAllocationTypePath], + const [formData] = useFormData({ + watch: dataTierAllocationTypePath, }); + const dataTierAllocationType = get(formData, dataTierAllocationTypePath); + return (
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx index d866fcd417671..407bb9ea92e85 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/components/node_allocation.tsx @@ -5,6 +5,7 @@ */ import React, { useState, FunctionComponent } from 'react'; +import { get } from 'lodash'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; import { EuiButtonEmpty, EuiText, EuiSpacer } from '@elastic/eui'; @@ -43,10 +44,12 @@ const i18nTexts = { export const NodeAllocation: FunctionComponent = ({ phase, nodes }) => { const allocationNodeAttributePath = `_meta.${phase}.allocationNodeAttribute`; - const [{ [allocationNodeAttributePath]: selectedAllocationNodeAttribute }] = useFormData({ + const [formData] = useFormData({ watch: [allocationNodeAttributePath], }); + const selectedAllocationNodeAttribute = get(formData, allocationNodeAttributePath); + const [selectedNodeAttrsForDetails, setSelectedNodeAttrsForDetails] = useState( null ); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx index b7b9a1e9f3dad..bafc48e6e4eee 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/data_tier_allocation_field/data_tier_allocation_field.tsx @@ -4,6 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ +import { get } from 'lodash'; import React, { FunctionComponent } from 'react'; import { i18n } from '@kbn/i18n'; @@ -44,8 +45,9 @@ export const DataTierAllocationField: FunctionComponent = ({ phase, descr services: { cloud }, } = useKibana(); - const allocationTypePath = `_meta.${phase}.dataTierAllocationType`; - const [{ [allocationTypePath]: allocationType }] = useFormData({ watch: [allocationTypePath] }); + const dataTierAllocationTypePath = `_meta.${phase}.dataTierAllocationType`; + const [formData] = useFormData({ watch: dataTierAllocationTypePath }); + const allocationType = get(formData, dataTierAllocationTypePath); return ( diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx index 181f2e6c2a29e..f37c387354418 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared/min_age_input_field/min_age_input_field.tsx @@ -3,8 +3,8 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ - import React, { FunctionComponent } from 'react'; +import { get } from 'lodash'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; @@ -29,7 +29,8 @@ interface Props { } export const MinAgeInputField: FunctionComponent = ({ phase }): React.ReactElement => { - const [{ [useRolloverPath]: rolloverEnabled }] = useFormData({ watch: useRolloverPath }); + const [formData] = useFormData({ watch: useRolloverPath }); + const rolloverEnabled = get(formData, useRolloverPath); let daysOptionLabel; let hoursOptionLabel; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx index 9693733eb6150..4852aecf621f7 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/policy_json_flyout.tsx @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -46,27 +46,28 @@ export const PolicyJsonFlyout: React.FunctionComponent = ({ const [policy, setPolicy] = useState(undefined); const form = useFormContext(); - const [formData, getFormData] = useFormData(); + const [, getFormData] = useFormData(); + + const getPolicy = useCallback(async () => { + setPolicy(undefined); + if (await form.validate()) { + const p = getFormData() as SerializedPolicy; + setPolicy({ + ...legacyPolicy, + phases: { + ...legacyPolicy.phases, + hot: p.phases.hot, + warm: p.phases.warm, + }, + }); + } else { + setPolicy(null); + } + }, [setPolicy, getFormData, legacyPolicy, form]); useEffect(() => { - (async function checkPolicy() { - setPolicy(undefined); - if (await form.validate()) { - const p = getFormData() as SerializedPolicy; - setPolicy({ - ...legacyPolicy, - phases: { - ...legacyPolicy.phases, - hot: p.phases.hot, - warm: p.phases.warm, - }, - }); - } else { - setPolicy(null); - } - })(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [form, legacyPolicy, formData]); + getPolicy(); + }, [getPolicy]); let content: React.ReactNode; switch (policy) {