diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx index c36e711879b8e..1217488a75ea6 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx @@ -141,7 +141,7 @@ export const EventFiltersFlyout: React.FC = memo( diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.test.tsx index 0867d0542e4c1..048bd97664f2e 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.test.tsx @@ -82,7 +82,16 @@ describe('Event filter form', () => { component = renderComponentWithdata(); expect(component.getByTestId('alert-exception-builder')).not.toBeNull(); - expect(component.getByText(NAME_ERROR)).not.toBeNull(); + }); + + it('should display name error only when on blur and empty name', () => { + component = renderComponentWithdata(); + expect(component.queryByText(NAME_ERROR)).toBeNull(); + const nameInput = component.getByPlaceholderText(NAME_PLACEHOLDER); + act(() => { + fireEvent.blur(nameInput); + }); + expect(component.queryByText(NAME_ERROR)).not.toBeNull(); }); it('should change name', async () => { diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.tsx index 83fd6ff1a366d..93658d4efa737 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { memo, useMemo, useCallback } from 'react'; +import React, { memo, useMemo, useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; import { Dispatch } from 'redux'; import { @@ -58,6 +58,7 @@ export const EventFiltersForm: React.FC = memo( const exception = useEventFiltersSelector(getFormEntryStateMutable); const hasNameError = useEventFiltersSelector(getHasNameError); const newComment = useEventFiltersSelector(getNewComment); + const [hasBeenInputNameVisited, setHasBeenInputNameVisited] = useState(false); // This value has to be memoized to avoid infinite useEffect loop on useFetchIndex const indexNames = useMemo(() => ['logs-endpoint.events.*'], []); @@ -140,7 +141,12 @@ export const EventFiltersForm: React.FC = memo( const nameInputMemo = useMemo( () => ( - + = memo( onChange={handleOnChangeName} fullWidth aria-label={NAME_PLACEHOLDER} - required + required={hasBeenInputNameVisited} maxLength={256} + onBlur={() => !hasBeenInputNameVisited && setHasBeenInputNameVisited(true)} /> ), - [hasNameError, exception?.name, handleOnChangeName] + [hasNameError, exception?.name, handleOnChangeName, hasBeenInputNameVisited] ); const osInputMemo = useMemo( diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/translations.ts b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/translations.ts index 086f2298d2c1a..7391251a936e6 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/translations.ts +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/form/translations.ts @@ -17,12 +17,12 @@ export const FORM_DESCRIPTION = i18n.translate( export const NAME_PLACEHOLDER = i18n.translate( 'xpack.securitySolution.eventFilter.form.name.placeholder', { - defaultMessage: 'Event exception name', + defaultMessage: 'Event filter name', } ); export const NAME_LABEL = i18n.translate('xpack.securitySolution.eventFilter.form.name.label', { - defaultMessage: 'Name your event exception', + defaultMessage: 'Name your event filter', }); export const NAME_ERROR = i18n.translate('xpack.securitySolution.eventFilter.form.name.error', { diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/modal/translations.ts b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/modal/translations.ts index 982d9b3bb12b3..66e0dfde298b8 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/modal/translations.ts +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/modal/translations.ts @@ -25,6 +25,6 @@ export const ACTIONS_CONFIRM = i18n.translate( export const ACTIONS_CANCEL = i18n.translate( 'xpack.securitySolution.eventFilter.modal.actions.cancel', { - defaultMessage: 'cancel', + defaultMessage: 'Cancel', } );