From 836f1cd3c353e58d595c12cc812377d4f6909f4d Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Tue, 24 Sep 2024 13:55:59 -0700 Subject: [PATCH] Fix various EuiFormControlLayout usages (#192779) ## Summary This is a follow up to EUI's Emotion conversion of **EuiFormControlLayout/Delimited** (see https://github.com/elastic/kibana/pull/190752, https://github.com/elastic/eui/pull/7954, and https://github.com/elastic/eui/pull/7957). > [!note] > Please manually QA your team's affected form control(s) to confirm they still look and behave as expected and are non-broken. The EUI team is not familiar enough with each plugin's setups to pull down and QA this PR ourselves. While QA testing the upgrade, I noticed a few incorrect usages of **EuiFormControlLayout** but wanted to wait until after the upgrade to push out fixes (to prevent delaying the PR further). In general, here is EUI's [recommended usage of the component](https://eui.elastic.co/#/forms/form-controls#form-control-layout): - Where possible, **simply don't use it**. Almost all form controls are **already** automatically wrapped in any EuiFormControlLayout by default, and should accept a large majority of the props that the layout accepts. - If you **must** use it, set the `controlOnly` prop on the child input/control to avoid buggy styling (e.g. duplicate borders). - If you can't do either of the above for any reason (e.g. missing prop support), reach out to the EUI team to ask for your UX as a feature request! ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad) --- .../saved_book/saved_book_editor.tsx | 83 ++++++------ .../annotation_editor_controls/index.scss | 8 +- .../range_annotation_panel.tsx | 56 +++------ .../src/components/token_field.tsx | 41 +++--- .../add_domain/add_domain_form.tsx | 1 + .../__snapshots__/icon_select.test.js.snap | 60 ++++----- .../vector/components/symbol/icon_select.js | 38 +++--- .../service_groups_list/index.tsx | 1 + .../analysis_setup_timerange_form.tsx | 61 ++++----- .../components/annotation_range.tsx | 118 ++++++++---------- .../components/normalization_menu/index.tsx | 64 +++++----- .../fields/key_value_field.tsx | 2 + .../view_code/create_api_key_form.tsx | 27 ++-- .../components/schedule_item_form/index.tsx | 54 +++----- .../components/duration_input/index.tsx | 61 +++------ .../components/actions_log_users_filter.tsx | 67 +++++----- .../custom_recurrence_scheduler.tsx | 29 ++--- .../recurrence_scheduler/index.tsx | 25 ++-- 18 files changed, 321 insertions(+), 475 deletions(-) diff --git a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx index 69fb6053d882d..8a028eeadd49e 100644 --- a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx +++ b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx @@ -17,7 +17,6 @@ import { EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, - EuiFormControlLayout, EuiFormRow, EuiSwitch, EuiTextArea, @@ -128,48 +127,46 @@ export const SavedBookEditor = ({ - - - attributesManager.authorName.next(e.target.value)} - /> - - - attributesManager.bookTitle.next(e.target.value)} - /> - - - attributesManager.numberOfPages.next(+e.target.value)} - /> - - - attributesManager.bookSynopsis.next(e.target.value)} - /> - - + + attributesManager.authorName.next(e.target.value)} + /> + + + attributesManager.bookTitle.next(e.target.value)} + /> + + + attributesManager.numberOfPages.next(+e.target.value)} + /> + + + attributesManager.bookSynopsis.next(e.target.value)} + /> + diff --git a/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss b/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss index 93bf0e2c72662..17e20d3380a0d 100644 --- a/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss +++ b/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss @@ -2,12 +2,8 @@ margin-top: $euiSizeS; } -.lnsConfigPanelNoPadding { - padding: 0; -} - -.lnsConfigPanelDate__label { - min-width: 56px; // makes both labels ("from" and "to") the same width +.lnsConfigPanelAnnotations__date .euiFormControlLayout__prepend { + min-width: $euiSize * 3.25; // makes both labels ("from" and "to") the same width } .lnsConfigPanelAnnotations__addButton { diff --git a/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx b/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx index 69e7985b5796f..d584e330352ff 100644 --- a/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx +++ b/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx @@ -9,14 +9,7 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { - EuiFormRow, - EuiSwitch, - EuiText, - EuiFormControlLayout, - EuiFormLabel, - EuiDatePicker, -} from '@elastic/eui'; +import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker } from '@elastic/eui'; import moment from 'moment'; import type { PointInTimeEventAnnotationConfig, @@ -107,36 +100,23 @@ export const ConfigPanelRangeDatePicker = ({ dataTestSubj?: string; }) => { return ( - - {prependLabel ? ( - {prependLabel} - } - > - - - ) : ( - - )} + + ); }; diff --git a/x-pack/packages/security/api_key_management/src/components/token_field.tsx b/x-pack/packages/security/api_key_management/src/components/token_field.tsx index 4943603dbecf8..ccda03a2315c2 100644 --- a/x-pack/packages/security/api_key_management/src/components/token_field.tsx +++ b/x-pack/packages/security/api_key_management/src/components/token_field.tsx @@ -13,7 +13,6 @@ import { EuiContextMenuPanel, EuiCopy, EuiFieldText, - EuiFormControlLayout, EuiHorizontalRule, EuiPopover, EuiSpacer, @@ -29,12 +28,24 @@ export interface TokenFieldProps extends Omit { value: string; } -export const TokenField: FunctionComponent = (props) => { +export const TokenField: FunctionComponent = ({ value, ...props }) => { return ( - event.currentTarget.select()} + readOnly {...props} append={ - + {(copyText) => ( = (props) => { )} } - style={{ backgroundColor: 'transparent' }} - readOnly - > - event.currentTarget.select()} - readOnly - /> - + /> ); }; @@ -118,7 +111,7 @@ export const SelectableTokenField: FunctionComponent closePopover={closePopover} > ((items, option, i) => { items.push( { fullWidth > setAddDomainFormInputValue(e.target.value)} diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap index 40e698519e848..c2670eb11fffd 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap @@ -5,7 +5,7 @@ exports[`Should render icon select 1`] = ` + } readOnly={true} - > - - } - readOnly={true} - value="symbol1" - /> - + value="symbol1" + /> } closePopover={[Function]} display="block" @@ -97,7 +90,7 @@ exports[`Should render icon select with custom icons 1`] = ` " + symbolId="__kbn__custom_icon_sdf__foobar" + /> + } readOnly={true} - > - " - symbolId="__kbn__custom_icon_sdf__foobar" - /> - } - readOnly={true} - value="My Custom Icon" - /> - + value="My Custom Icon" + /> } closePopover={[Function]} display="block" diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js index 432a36478127f..81bc36109b200 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js @@ -8,7 +8,6 @@ import React, { Component, Fragment } from 'react'; import { EuiButton, - EuiFormControlLayout, EuiFieldText, EuiPopover, EuiPopoverTitle, @@ -109,32 +108,25 @@ export class IconSelect extends Component { _renderPopoverButton() { const { value, svg, label } = this.props.icon; return ( - + } append={this.props.append} - > - - } - /> - + /> ); } diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx index 00197ab761044..4381523417b25 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx @@ -98,6 +98,7 @@ export function ServiceGroupsList() { clear={!isEmpty(filter) ? { onClick: clearFilterCallback } : undefined} > - setStartTime(undefined) } : undefined - } - isDisabled={disabled} - > - setStartTime(selectedDateToParam(date))} - placeholder={startTimeDefaultDescription} - maxDate={now} - /> - + setStartTime(selectedDateToParam(date))} + onClear={() => setStartTime(undefined)} + placeholder={startTimeDefaultDescription} + maxDate={now} + /> - setEndTime(undefined) } : undefined} - isDisabled={disabled} - > - setEndTime(selectedDateToParam(date))} - placeholder={endTimeDefaultDescription} - openToDate={now} - minDate={startTimeValue} - minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)} - maxTime={moment().hour(23).minutes(59)} - /> - + setEndTime(selectedDateToParam(date))} + onClear={() => setEndTime(undefined)} + placeholder={endTimeDefaultDescription} + openToDate={now} + minDate={startTimeValue} + minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)} + maxTime={moment().hour(23).minutes(59)} + /> diff --git a/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx b/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx index 5dada5bde32a2..632e89906be25 100644 --- a/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx +++ b/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFormRow, EuiFormControlLayout, EuiFormLabel, EuiDatePicker } from '@elastic/eui'; +import { EuiFormRow, EuiFormLabel, EuiDatePicker } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { Controller, useFormContext } from 'react-hook-form'; import React from 'react'; @@ -37,70 +37,62 @@ export function AnnotationRange() { display="rowCompressed" fullWidth > - - {i18n.translate('xpack.observability.annotationRange.fromFormLabelLabel', { - defaultMessage: 'From', - })} - - } - > - { - const { value, ref, ...rest } = field; - return ( - - ); - }} - /> - + { + const { value, ref, ...rest } = field; + return ( + + {i18n.translate('xpack.observability.annotationRange.fromFormLabelLabel', { + defaultMessage: 'From', + })} + + } + dateFormat={dateFormat} + {...rest} + /> + ); + }} + /> - - {i18n.translate('xpack.observability.annotationRange.toFormLabelLabel', { - defaultMessage: 'To', - })} - - } - > - { - const { value, ref, ...rest } = field; - return ( - - ); - }} - /> - + { + const { value, ref, ...rest } = field; + return ( + + {i18n.translate('xpack.observability.annotationRange.toFormLabelLabel', { + defaultMessage: 'To', + })} + + } + dateFormat={dateFormat} + {...rest} + /> + ); + }} + /> ); diff --git a/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx b/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx index 778033e89c7e3..4f31857aa8827 100644 --- a/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx +++ b/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx @@ -187,26 +187,22 @@ export function NormalizationMenu(props: Props) { - {SCALE_LABEL}} - > - { - if (mode === NormalizationMode.Scale) { - setOptions((prevOptions) => ({ - ...prevOptions, - baselineScale: e.target.valueAsNumber, - })); - } - }} - disabled={mode === NormalizationMode.Time} - /> - + data-test-subj="profilingNormalizationMenuFieldNumber" + id={baselineScaleFactorInputId} + value={baseline} + onChange={(e) => { + if (mode === NormalizationMode.Scale) { + setOptions((prevOptions) => ({ + ...prevOptions, + baselineScale: e.target.valueAsNumber, + })); + } + }} + disabled={mode === NormalizationMode.Time} + />
@@ -216,26 +212,22 @@ export function NormalizationMenu(props: Props) {
- {SCALE_LABEL}} - > - { - if (mode === NormalizationMode.Scale) { - setOptions((prevOptions) => ({ - ...prevOptions, - comparisonScale: e.target.valueAsNumber, - })); - } - }} - disabled={mode === NormalizationMode.Time} - /> - + data-test-subj="profilingNormalizationMenuFieldNumber" + id={comparisonScaleFactorInputId} + value={comparison} + onChange={(e) => { + if (mode === NormalizationMode.Scale) { + setOptions((prevOptions) => ({ + ...prevOptions, + comparisonScale: e.target.valueAsNumber, + })); + } + }} + disabled={mode === NormalizationMode.Time} + /> { control={control} rules={{ min: 0, required: true }} render={({ field }) => ( - @@ -95,20 +94,16 @@ export const CreateApiKeyForm = () => { } - > - - + type="number" + placeholder={i18n.translate( + 'xpack.searchPlayground.viewCode.apiForm.expire.placeholder', + { + defaultMessage: 'Set expiry in days', + } + )} + value={field.value || ''} + onChange={field.onChange} + /> )} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx index 997930926f26f..293e24f533126 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx @@ -12,7 +12,6 @@ import { EuiFieldNumber, EuiFormRow, EuiSelect, - EuiFormControlLayout, transparentize, } from '@elastic/eui'; import { isEmpty } from 'lodash/fp'; @@ -51,37 +50,21 @@ const StyledLabelAppend = styled(EuiFlexItem)` const StyledEuiFormRow = styled(EuiFormRow)` max-width: none; - .euiFormControlLayout { - max-width: auto; - width: auto; - } - - .euiFormControlLayout__childrenWrapper > *:first-child { - box-shadow: none; - height: 38px; - width: 100%; - } - - .euiFormControlLayout__childrenWrapper > select { - background-color: ${({ theme }) => transparentize(theme.eui.euiColorPrimary, 0.1)}; - color: ${({ theme }) => theme.eui.euiColorPrimary}; - } - - .euiFormControlLayout--group .euiFormControlLayout { - min-width: 100px; + .euiFormControlLayout__append { + padding-inline: 0 !important; } .euiFormControlLayoutIcons { color: ${({ theme }) => theme.eui.euiColorPrimary}; } - - .euiFormControlLayout:not(:first-child) { - border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - } `; const MyEuiSelect = styled(EuiSelect)` - width: auto; + min-width: 106px; // Preserve layout when disabled & dropdown arrow is not rendered + background: ${({ theme }) => + transparentize(theme.eui.euiColorPrimary, 0.1)} !important; // Override focus states etc. + color: ${({ theme }) => theme.eui.euiColorPrimary}; + box-shadow: none; `; const getNumberFromUserInput = (input: string, minimumValue = 0): number => { @@ -173,10 +156,10 @@ export const ScheduleItem = ({ data-test-subj={dataTestSubj} describedByIds={idAria ? [idAria] : undefined} > - timeTypes.includes(type.value))} onChange={onChangeTimeType} value={timeType} @@ -185,17 +168,14 @@ export const ScheduleItem = ({ {...rest} /> } - > - - + fullWidth + min={minimumValue} + max={Number.MAX_SAFE_INTEGER} + onChange={onChangeTimeVal} + value={timeVal} + data-test-subj="interval" + {...rest} + /> ); }; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx index 5163be74eed67..99222756bcf26 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx @@ -5,13 +5,7 @@ * 2.0. */ -import { - EuiFieldNumber, - EuiFormRow, - EuiSelect, - EuiFormControlLayout, - transparentize, -} from '@elastic/eui'; +import { EuiFieldNumber, EuiFormRow, EuiSelect, transparentize } from '@elastic/eui'; import React, { useCallback } from 'react'; import styled from 'styled-components'; @@ -37,39 +31,23 @@ const getNumberFromUserInput = (input: string, minimumValue = 0): number | undef }; const StyledEuiFormRow = styled(EuiFormRow)` - max-width: none; + max-width: 235px; - .euiFormControlLayout { - max-width: 235px; - width: auto; - } - - .euiFormControlLayout__childrenWrapper > *:first-child { - box-shadow: none; - height: 38px; - width: 100%; - } - - .euiFormControlLayout__childrenWrapper > select { - background-color: ${({ theme }) => transparentize(theme.eui.euiColorPrimary, 0.1)}; - color: ${({ theme }) => theme.eui.euiColorPrimary}; - } - - .euiFormControlLayout--group .euiFormControlLayout { - min-width: 100px; + .euiFormControlLayout__append { + padding-inline: 0 !important; } .euiFormControlLayoutIcons { color: ${({ theme }) => theme.eui.euiColorPrimary}; } - - .euiFormControlLayout:not(:first-child) { - border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - } `; const MyEuiSelect = styled(EuiSelect)` - width: auto; + min-width: 106px; // Preserve layout when disabled & dropdown arrow is not rendered + box-shadow: none; + background: ${({ theme }) => + transparentize(theme.eui.euiColorPrimary, 0.1)} !important; // Override focus states etc. + color: ${({ theme }) => theme.eui.euiColorPrimary}; `; // This component is similar to the ScheduleItem component, but instead of combining the value @@ -111,10 +89,9 @@ const DurationInputComponent: React.FC = ({ return ( - = ({ {...rest} /> } - > - - + min={minimumValue} + max={Number.MAX_SAFE_INTEGER} + onChange={onChangeTimeVal} + value={durationValue} + data-test-subj="interval" + {...rest} + /> ); }; diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx index 68cbfbffeb261..c458beb4faefd 100644 --- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx +++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx @@ -6,7 +6,7 @@ */ import React, { memo, useCallback, useState, useEffect } from 'react'; -import { EuiFieldSearch, EuiFormControlLayout } from '@elastic/eui'; +import { EuiFieldSearch } from '@elastic/eui'; import { useTestIdGenerator } from '../../../hooks/use_test_id_generator'; import { FILTER_NAMES } from '../translations'; import { useActionHistoryUrlParams } from './use_action_history_url_params'; @@ -27,31 +27,36 @@ export const ActionsLogUsersFilter = memo( const onChange = useCallback( (e: React.ChangeEvent) => { + const { value } = e.target; setSearchValue(e.target.value); + + if (!value) { + onChangeUsersFilter([]); + if (!isFlyout) { + setUrlUsersFilters(''); + } + } }, - [setSearchValue] + [setSearchValue, isFlyout, setUrlUsersFilters, onChangeUsersFilter] ); - const onSearch = useCallback(() => { - const userIds = searchValue.split(',').reduce((acc, curr) => { - if (curr.trim() !== '') { - acc.push(curr.trim()); - } - return acc; - }, []); - onChangeUsersFilter(userIds); - if (!isFlyout) { - setUrlUsersFilters(userIds.join(',')); - } - }, [isFlyout, onChangeUsersFilter, searchValue, setUrlUsersFilters]); + const onSearch = useCallback( + (onSearchValue: string) => { + if (!onSearchValue) return; - const onClear = useCallback(() => { - setSearchValue(''); - onChangeUsersFilter([]); - if (!isFlyout) { - setUrlUsersFilters(''); - } - }, [isFlyout, onChangeUsersFilter, setUrlUsersFilters, setSearchValue]); + const userIds = searchValue.split(',').reduce((acc, curr) => { + if (curr.trim() !== '') { + acc.push(curr.trim()); + } + return acc; + }, []); + onChangeUsersFilter(userIds); + if (!isFlyout) { + setUrlUsersFilters(userIds.join(',')); + } + }, + [isFlyout, onChangeUsersFilter, searchValue, setUrlUsersFilters] + ); // on load with users in urlParams, set the search value useEffect(() => { @@ -63,17 +68,15 @@ export const ActionsLogUsersFilter = memo( }, []); return ( - - - + ); } ); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx index 2136525c028b6..1138463c713a3 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx @@ -5,14 +5,7 @@ * 2.0. */ -import { - EuiButtonGroup, - EuiFormControlLayout, - EuiFormRow, - EuiSelect, - EuiFlexGroup, - EuiFlexItem, -} from '@elastic/eui'; +import { EuiButtonGroup, EuiFormRow, EuiSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import deepEqual from 'fast-deep-equal'; import { Moment } from 'moment'; @@ -127,11 +120,11 @@ export const CustomRecurrenceScheduler: React.FC display="columnCompressed" data-test-subj="customRecurrenceScheduler" fullWidth - label=" " + hasEmptyLabelSpace > - defaultMessage: 'Every', } )} - > - setInterval(Number(value))} - /> - + data-test-subj="customRecurrenceSchedulerInterval" + min={intervalMin} + value={interval} + onChange={(value) => setInterval(Number(value))} + /> = ({ )} {recurrenceEnds === 'afterx' && ( - - + = ({ values: { occurrences }, } )} - > - setOccurrrences(Number(value))} - /> - + min={1} + value={occurrences} + onChange={(value) => setOccurrrences(Number(value))} + /> )}