From fac1f1204d10e55e8dac7d1f792d3d05a96150fb Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Tue, 8 Dec 2020 08:47:26 +0100 Subject: [PATCH] [ILM] Reposition form toggles (#85143) * merged toggleable field and described form component and moved toggle to left * moved all toggles to left, renamed DescribedFormField -> DescribedFormRow and added new ToggleFieldWithDescribedFormRow component * added new prop fieldNotices to render callouts in correct position on the left --- .../components/described_form_field.tsx | 33 ------- .../described_form_row/described_form_row.tsx | 95 +++++++++++++++++++ .../components/described_form_row/index.ts | 9 ++ .../toggle_field_with_described_form_row.tsx | 39 ++++++++ .../sections/edit_policy/components/index.ts | 2 +- .../phases/cold_phase/cold_phase.tsx | 29 +++--- .../components/phases/hot_phase/hot_phase.tsx | 29 ++---- .../phases/shared_fields/forcemerge_field.tsx | 6 +- .../searchable_snapshot_field.tsx | 8 +- .../phases/warm_phase/warm_phase.tsx | 10 +- .../components/toggleable_field.tsx | 47 --------- 11 files changed, 179 insertions(+), 128 deletions(-) delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_field.tsx create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/described_form_row.tsx create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/index.ts create mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx delete mode 100644 x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_field.tsx deleted file mode 100644 index f5d13a443c88..000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_field.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * 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 { EuiDescribedFormGroup, EuiDescribedFormGroupProps } from '@elastic/eui'; - -import { ToggleableField, Props as ToggleableFieldProps } from './toggleable_field'; - -type Props = EuiDescribedFormGroupProps & { - children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined; - switchProps?: Omit; -}; - -export const DescribedFormField: FunctionComponent = ({ - children, - switchProps, - ...restDescribedFormProps -}) => { - return ( - - {switchProps ? ( - {children} - ) : typeof children === 'function' ? ( - children() - ) : ( - children - )} - - ); -}; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/described_form_row.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/described_form_row.tsx new file mode 100644 index 000000000000..98c63437659f --- /dev/null +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/described_form_row.tsx @@ -0,0 +1,95 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * 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, useState } from 'react'; +import { + EuiDescribedFormGroup, + EuiDescribedFormGroupProps, + EuiSwitchProps, + EuiSwitch, + EuiSpacer, +} from '@elastic/eui'; + +export interface SwitchProps + extends Omit { + /** + * use initialValue to specify an uncontrolled component + */ + initialValue?: boolean; + + /** + * checked and onChange together specify a controlled component + */ + checked?: boolean; + onChange?: (nextValue: boolean) => void; +} + +export type Props = EuiDescribedFormGroupProps & { + children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined; + + switchProps?: SwitchProps; + + /** + * Use this prop to pass down components that should be rendered below the toggle like + * warnings or notices. + */ + fieldNotices?: React.ReactNode; +}; + +export const DescribedFormRow: FunctionComponent = ({ + children, + switchProps, + description, + fieldNotices, + ...restDescribedFormProps +}) => { + if ( + switchProps && + !(typeof switchProps.checked === 'boolean' || typeof switchProps.initialValue === 'boolean') + ) { + throw new Error('Must specify controlled, uncontrolled component. See SwitchProps interface!'); + } + const [uncontrolledIsContentVisible, setUncontrolledIsContentVisible] = useState( + () => switchProps?.initialValue ?? false + ); + const isContentVisible = Boolean(switchProps?.checked ?? uncontrolledIsContentVisible); + + const renderToggle = () => { + if (!switchProps) { + return null; + } + const { onChange, checked, initialValue, ...restSwitchProps } = switchProps; + + return ( + { + const nextValue = e.target.checked; + setUncontrolledIsContentVisible(nextValue); + if (onChange) { + onChange(nextValue); + } + }} + /> + ); + }; + return ( + + {description} + + {renderToggle()} + {fieldNotices} + + } + > + {isContentVisible ? (typeof children === 'function' ? children() : children) : null} + + ); +}; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/index.ts new file mode 100644 index 000000000000..89b77a213215 --- /dev/null +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/index.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +export { DescribedFormRow } from './described_form_row'; + +export { ToggleFieldWithDescribedFormRow } from './toggle_field_with_described_form_row'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx new file mode 100644 index 000000000000..779dbe47914a --- /dev/null +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * 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 { UseField } from '../../../../../shared_imports'; + +import { + DescribedFormRow, + Props as DescribedFormRowProps, + SwitchProps, +} from './described_form_row'; + +type Props = Omit & { + switchProps: Omit & { path: string }; +}; + +export const ToggleFieldWithDescribedFormRow: FunctionComponent = ({ + switchProps, + ...passThroughProps +}) => ( + path={switchProps.path}> + {(field) => { + return ( + + ); + }} + +); diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts index 265996c65002..fa550214db47 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/index.ts @@ -9,7 +9,7 @@ export { ErrableFormRow } from './form_errors'; export { LearnMoreLink } from './learn_more_link'; export { OptionalLabel } from './optional_label'; export { PolicyJsonFlyout } from './policy_json_flyout'; -export { DescribedFormField } from './described_form_field'; +export { DescribedFormRow, ToggleFieldWithDescribedFormRow } from './described_form_row'; export { FieldLoadingError } from './field_loading_error'; export * from './phases'; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx index 2f5be3e45cbe..addad5e572b7 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/cold_phase/cold_phase.tsx @@ -18,7 +18,12 @@ import { useFormData, UseField, ToggleField, NumericField } from '../../../../.. import { useEditPolicyContext } from '../../../edit_policy_context'; import { useConfigurationIssues } from '../../../form'; -import { LearnMoreLink, ActiveBadge, DescribedFormField } from '../../'; +import { + LearnMoreLink, + ActiveBadge, + DescribedFormRow, + ToggleFieldWithDescribedFormRow, +} from '../../'; import { MinAgeInputField, @@ -115,7 +120,7 @@ export const ColdPhase: FunctionComponent = () => { { /* Replicas section */ showReplicasField && ( - {i18n.translate('xpack.indexLifecycleMgmt.coldPhase.replicasTitle', { @@ -153,13 +158,13 @@ export const ColdPhase: FunctionComponent = () => { }, }} /> - + ) } {/* Freeze section */} {!isUsingSearchableSnapshotInHotPhase && ( - { } fullWidth titleSize="xs" + switchProps={{ + 'data-test-subj': 'freezeSwitch', + path: '_meta.cold.freezeEnabled', + }} > - - +
+ )} {/* Data tier allocation section */} { })} paddingSize="m" > - {i18n.translate('xpack.indexLifecycleMgmt.hotPhase.rolloverFieldTitle', { @@ -123,19 +117,12 @@ export const HotPhase: FunctionComponent = () => {

} + switchProps={{ + path: '_meta.hot.useRollover', + 'data-test-subj': 'rolloverSwitch', + }} fullWidth > - - key="_meta.hot.useRollover" - path="_meta.hot.useRollover" - component={ToggleField} - componentProps={{ - fullWidth: false, - euiFieldProps: { - 'data-test-subj': 'rolloverSwitch', - }, - }} - /> {isRolloverEnabled && ( <> @@ -246,7 +233,7 @@ export const HotPhase: FunctionComponent = () => { )} - + {license.canUseSearchableSnapshot() && } {isRolloverEnabled && !isUsingSearchableSnapshotInHotPhase && ( diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx index fb7f93a42e49..dd5cc1fbc8c8 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/forcemerge_field.tsx @@ -14,7 +14,7 @@ import { i18nTexts } from '../../../i18n_texts'; import { useEditPolicyContext } from '../../../edit_policy_context'; -import { LearnMoreLink, DescribedFormField } from '../../'; +import { LearnMoreLink, DescribedFormRow } from '../../'; interface Props { phase: 'hot' | 'warm'; @@ -28,7 +28,7 @@ export const ForcemergeField: React.FunctionComponent = ({ phase }) => { }, [policy, phase]); return ( - = ({ phase }) => { }} />
- + ); }; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx index e5ab5fb6a2c7..38eb74307541 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/searchable_snapshot_field/searchable_snapshot_field.tsx @@ -29,7 +29,7 @@ import { useConfigurationIssues } from '../../../../form'; import { i18nTexts } from '../../../../i18n_texts'; -import { FieldLoadingError, DescribedFormField, LearnMoreLink } from '../../../index'; +import { FieldLoadingError, DescribedFormRow, LearnMoreLink } from '../../../index'; import { SearchableSnapshotDataProvider } from './searchable_snapshot_data_provider'; @@ -297,7 +297,7 @@ export const SearchableSnapshotField: FunctionComponent = ({ phase }) => }; return ( - = ({ phase }) => }} /> - {renderInfoCallout()} } + fieldNotices={renderInfoCallout()} fullWidth > {isDisabled ?
: renderField} - + ); }; diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx index 604a36c2d08e..9ccfcd58f4d8 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx @@ -25,7 +25,7 @@ import { Phases } from '../../../../../../../common/types'; import { useEditPolicyContext } from '../../../edit_policy_context'; import { useConfigurationIssues } from '../../../form'; -import { LearnMoreLink, ActiveBadge, DescribedFormField } from '../../'; +import { LearnMoreLink, ActiveBadge, DescribedFormRow } from '../../'; import { useRolloverPath, @@ -141,7 +141,7 @@ export const WarmPhase: FunctionComponent = () => { )} paddingSize="m" > - {i18n.translate('xpack.indexLifecycleMgmt.warmPhase.replicasTitle', { @@ -177,9 +177,9 @@ export const WarmPhase: FunctionComponent = () => { }, }} /> - + {!isUsingSearchableSnapshotInHotPhase && ( - {
- + )} {!isUsingSearchableSnapshotInHotPhase && } diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx deleted file mode 100644 index fb5e63690278..000000000000 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/toggleable_field.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * 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, useState } from 'react'; -import { EuiSpacer, EuiSwitch, EuiSwitchProps } from '@elastic/eui'; - -export interface Props extends Omit { - children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined; - checked?: boolean; - initialValue?: boolean; - onChange?: (nextValue: boolean) => void; -} - -export const ToggleableField: FunctionComponent = ({ - initialValue, - checked, - onChange, - children, - ...restProps -}) => { - const [uncontrolledIsContentVisible, setUncontrolledIsContentVisible] = useState( - initialValue ?? false - ); - - const isContentVisible = Boolean(checked ?? uncontrolledIsContentVisible); - - return ( - <> - { - const nextValue = e.target.checked; - setUncontrolledIsContentVisible(nextValue); - if (onChange) { - onChange(nextValue); - } - }} - /> - - {isContentVisible ? (typeof children === 'function' ? children() : children) : null} - - ); -};