From 4152284335a8535f482a3b5217ffd090f4ed5351 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 9 Jun 2021 06:20:47 -0400 Subject: [PATCH] [Security solutions][Endpoint] Update event filtering texts (#101563) (#101713) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Changes multilang for add endpoint event filter action on events tab * Changes more multilangs and display name error only when needed * Changes variable names and aria labels to be consistent with namings * Fixes unit test due multilang changes Co-authored-by: David Sánchez --- .../timeline_actions/alert_context_menu.tsx | 36 +++++++++---------- .../components/alerts_table/translations.ts | 6 ++-- .../view/components/flyout/index.test.tsx | 8 ++--- .../view/components/flyout/index.tsx | 2 +- .../view/components/form/index.test.tsx | 11 +++++- .../view/components/form/index.tsx | 15 +++++--- .../view/components/form/translations.ts | 4 +-- .../view/components/modal/translations.ts | 2 +- 8 files changed, 50 insertions(+), 34 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx index 3152c08fab32..9f59e3763ffb 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx @@ -111,7 +111,7 @@ const AlertContextMenuComponent: React.FC = ({ setPopover(false); }, []); const [exceptionModalType, setOpenAddExceptionModal] = useState(null); - const [isAddEventExceptionModalOpen, setIsAddEventExceptionModalOpen] = useState(false); + const [isAddEventFilterModalOpen, setIsAddEventFilterModalOpen] = useState(false); const [{ canUserCRUD, hasIndexWrite, hasIndexMaintenance, hasIndexUpdateDelete }] = useUserData(); const isEndpointAlert = useMemo((): boolean => { @@ -129,8 +129,8 @@ const AlertContextMenuComponent: React.FC = ({ setOpenAddExceptionModal(null); }, []); - const closeAddEventExceptionModal = useCallback((): void => { - setIsAddEventExceptionModalOpen(false); + const closeAddEventFilterModal = useCallback((): void => { + setIsAddEventFilterModalOpen(false); }, []); const onAddExceptionCancel = useCallback(() => { @@ -364,26 +364,26 @@ const AlertContextMenuComponent: React.FC = ({ ); }, [handleAddExceptionClick, canUserCRUD, hasIndexWrite]); - const handleAddEventExceptionClick = useCallback((): void => { + const handleAddEventFilterClick = useCallback((): void => { closePopover(); - setIsAddEventExceptionModalOpen(true); + setIsAddEventFilterModalOpen(true); }, [closePopover]); - const addEventExceptionComponent = useMemo( + const addEventFilterComponent = useMemo( () => ( - - {i18n.ACTION_ADD_EVENT_EXCEPTION} + + {i18n.ACTION_ADD_EVENT_FILTER} ), - [handleAddEventExceptionClick] + [handleAddEventFilterClick] ); const statusFilters = useMemo(() => { @@ -412,11 +412,11 @@ const AlertContextMenuComponent: React.FC = ({ () => !isEvent && ruleId ? [...statusFilters, addEndpointExceptionComponent, addExceptionComponent] - : [addEventExceptionComponent], + : [addEventFilterComponent], [ addEndpointExceptionComponent, addExceptionComponent, - addEventExceptionComponent, + addEventFilterComponent, statusFilters, ruleId, isEvent, @@ -453,8 +453,8 @@ const AlertContextMenuComponent: React.FC = ({ onRuleChange={onRuleChange} /> )} - {isAddEventExceptionModalOpen && ecsRowData != null && ( - + {isAddEventFilterModalOpen && ecsRowData != null && ( + )} ); diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts b/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts index 2d9f947dcea6..c43c4547a17e 100644 --- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts +++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/translations.ts @@ -165,10 +165,10 @@ export const ACTION_ADD_EXCEPTION = i18n.translate( } ); -export const ACTION_ADD_EVENT_EXCEPTION = i18n.translate( - 'xpack.securitySolution.detectionEngine.alerts.actions.addEventException', +export const ACTION_ADD_EVENT_FILTER = i18n.translate( + 'xpack.securitySolution.detectionEngine.alerts.actions.addEventFilter', { - defaultMessage: 'Add Endpoint event exception', + defaultMessage: 'Add Endpoint event filter', } ); diff --git a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.test.tsx index 5ee4c4eb0aac..6a106b148867 100644 --- a/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/flyout/index.test.tsx @@ -70,7 +70,7 @@ describe('Event filter flyout', () => { it('should renders correctly', () => { const component = render(); expect(component.getAllByText('Add Endpoint Event Filter')).not.toBeNull(); - expect(component.getByText('cancel')).not.toBeNull(); + expect(component.getByText('Cancel')).not.toBeNull(); expect(component.getByText('Endpoint Security')).not.toBeNull(); }); @@ -136,7 +136,7 @@ describe('Event filter flyout', () => { it('should close when click on cancel button', () => { const component = render(); - const cancelButton = component.getByText('cancel'); + const cancelButton = component.getByText('Cancel'); expect(onCancelMock).toHaveBeenCalledTimes(0); act(() => { @@ -170,7 +170,7 @@ describe('Event filter flyout', () => { }); }); - const cancelButton = component.getByText('cancel'); + const cancelButton = component.getByText('Cancel'); expect(onCancelMock).toHaveBeenCalledTimes(0); act(() => { @@ -184,7 +184,7 @@ describe('Event filter flyout', () => { const component = render({ id: 'fakeId', type: 'edit' }); expect(component.getAllByText('Update Endpoint Event Filter')).not.toBeNull(); - expect(component.getByText('cancel')).not.toBeNull(); + expect(component.getByText('Cancel')).not.toBeNull(); expect(component.getByText('Endpoint Security')).not.toBeNull(); }); 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 c36e711879b8..1217488a75ea 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 0867d0542e4c..048bd97664f2 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 83fd6ff1a366..93658d4efa73 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 086f2298d2c1..7391251a936e 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 982d9b3bb12b..66e0dfde298b 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', } );