From 858dca7f0287149dac0fe5e59afd630d304a7031 Mon Sep 17 00:00:00 2001 From: Jean-Louis Leysens Date: Mon, 7 Dec 2020 16:04:46 +0100 Subject: [PATCH] added new prop fieldNotices to render callouts in correct position on the left --- .../described_form_row/described_form_row.tsx | 95 +++++++++++++++++++ .../components/described_form_row/index.ts | 9 ++ .../toggle_field_with_described_form_row.tsx | 39 ++++++++ .../components/phases/hot_phase/hot_phase.tsx | 15 +-- .../searchable_snapshot_field.tsx | 2 +- 5 files changed, 146 insertions(+), 14 deletions(-) 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 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 0000000000000..98c63437659fd --- /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 0000000000000..89b77a213215e --- /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 0000000000000..779dbe47914a1 --- /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/phases/hot_phase/hot_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx index 36432aab5efed..3ca592af85a2a 100644 --- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx +++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx @@ -20,13 +20,7 @@ import { import { Phases } from '../../../../../../../common/types'; -import { - useFormData, - UseField, - SelectField, - ToggleField, - NumericField, -} from '../../../../../../shared_imports'; +import { useFormData, UseField, SelectField, NumericField } from '../../../../../../shared_imports'; import { i18nTexts } from '../../../i18n_texts'; @@ -36,12 +30,7 @@ import { useEditPolicyContext } from '../../../edit_policy_context'; import { ROLLOVER_FORM_PATHS } from '../../../constants'; -import { - LearnMoreLink, - ActiveBadge, - DescribedFormRow, - ToggleFieldWithDescribedFormRow, -} from '../../'; +import { LearnMoreLink, ActiveBadge, ToggleFieldWithDescribedFormRow } from '../../'; import { ForcemergeField, 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 4947de8b4fec0..38eb743075411 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 @@ -327,9 +327,9 @@ export const SearchableSnapshotField: FunctionComponent = ({ phase }) => }} /> - {renderInfoCallout()} } + fieldNotices={renderInfoCallout()} fullWidth > {isDisabled ?
: renderField}