[Security solutions][Endpoint] Update event filtering texts (#101563)

* 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
elastic · Jun 9, 2021 · abaac4c · abaac4c
1 parent 12986fb
commit abaac4c
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 34 deletions.
diff --git a/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx b/...olution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.tsx
@@ -111,7 +111,7 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
     setPopover(false);
   }, []);
   const [exceptionModalType, setOpenAddExceptionModal] = useState<ExceptionListType | null>(null);
-  const [isAddEventExceptionModalOpen, setIsAddEventExceptionModalOpen] = useState<boolean>(false);
+  const [isAddEventFilterModalOpen, setIsAddEventFilterModalOpen] = useState<boolean>(false);
   const [{ canUserCRUD, hasIndexWrite, hasIndexMaintenance, hasIndexUpdateDelete }] = useUserData();
 
   const isEndpointAlert = useMemo((): boolean => {
@@ -129,8 +129,8 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
     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<AlertContextMenuProps> = ({
     );
   }, [handleAddExceptionClick, canUserCRUD, hasIndexWrite]);
 
-  const handleAddEventExceptionClick = useCallback((): void => {
+  const handleAddEventFilterClick = useCallback((): void => {
     closePopover();
-    setIsAddEventExceptionModalOpen(true);
+    setIsAddEventFilterModalOpen(true);
   }, [closePopover]);
 
-  const addEventExceptionComponent = useMemo(
+  const addEventFilterComponent = useMemo(
     () => (
       <EuiContextMenuItem
-        key="add-event-exception-menu-item"
-        aria-label="Add Event Exception"
-        data-test-subj="add-event-exception-menu-item"
-        id="addEventException"
-        onClick={handleAddEventExceptionClick}
+        key="add-event-filter-menu-item"
+        aria-label="Add event filter"
+        data-test-subj="add-event-filter-menu-item"
+        id="addEventFilter"
+        onClick={handleAddEventFilterClick}
       >
-        <EuiText data-test-subj="addEventExceptionButton" size="m">
-          {i18n.ACTION_ADD_EVENT_EXCEPTION}
+        <EuiText data-test-subj="addEventFilterButton" size="m">
+          {i18n.ACTION_ADD_EVENT_FILTER}
         </EuiText>
       </EuiContextMenuItem>
     ),
-    [handleAddEventExceptionClick]
+    [handleAddEventFilterClick]
   );
 
   const statusFilters = useMemo(() => {
@@ -412,11 +412,11 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
     () =>
       !isEvent && ruleId
         ? [...statusFilters, addEndpointExceptionComponent, addExceptionComponent]
-        : [addEventExceptionComponent],
+        : [addEventFilterComponent],
     [
       addEndpointExceptionComponent,
       addExceptionComponent,
-      addEventExceptionComponent,
+      addEventFilterComponent,
       statusFilters,
       ruleId,
       isEvent,
@@ -453,8 +453,8 @@ const AlertContextMenuComponent: React.FC<AlertContextMenuProps> = ({
           onRuleChange={onRuleChange}
         />
       )}
-      {isAddEventExceptionModalOpen && ecsRowData != null && (
-        <EventFiltersModal data={ecsRowData} onCancel={closeAddEventExceptionModal} />
+      {isAddEventFilterModalOpen && ecsRowData != null && (
+        <EventFiltersModal data={ecsRowData} onCancel={closeAddEventFilterModal} />
       )}
     </>
   );

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
@@ -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/...rity_solution/public/management/pages/event_filters/view/components/flyout/index.test.tsx b/...rity_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/.../security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx b/.../security_solution/public/management/pages/event_filters/view/components/flyout/index.tsx
@@ -141,7 +141,7 @@ export const EventFiltersFlyout: React.FC<EventFiltersFlyoutProps> = memo(
               <EuiButtonEmpty data-test-subj="cancelExceptionAddButton" onClick={handleOnCancel}>
                 <FormattedMessage
                   id="xpack.securitySolution.eventFilters.eventFiltersFlyout.actions.cancel"
-                  defaultMessage="cancel"
+                  defaultMessage="Cancel"
                 />
               </EuiButtonEmpty>
             </EuiFlexItem>

diff --git a/...curity_solution/public/management/pages/event_filters/view/components/form/index.test.tsx b/...curity_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/...ns/security_solution/public/management/pages/event_filters/view/components/form/index.tsx b/...ns/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<EventFiltersFormProps> = 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,20 +141,26 @@ export const EventFiltersForm: React.FC<EventFiltersFormProps> = memo(
 
     const nameInputMemo = useMemo(
       () => (
-        <EuiFormRow label={NAME_LABEL} fullWidth isInvalid={hasNameError} error={NAME_ERROR}>
+        <EuiFormRow
+          label={NAME_LABEL}
+          fullWidth
+          isInvalid={hasNameError && hasBeenInputNameVisited}
+          error={NAME_ERROR}
+        >
           <EuiFieldText
             id="eventFiltersFormInputName"
             placeholder={NAME_PLACEHOLDER}
             defaultValue={exception?.name ?? ''}
             onChange={handleOnChangeName}
             fullWidth
             aria-label={NAME_PLACEHOLDER}
-            required
+            required={hasBeenInputNameVisited}
             maxLength={256}
+            onBlur={() => !hasBeenInputNameVisited && setHasBeenInputNameVisited(true)}
           />
         </EuiFormRow>
       ),
-      [hasNameError, exception?.name, handleOnChangeName]
+      [hasNameError, exception?.name, handleOnChangeName, hasBeenInputNameVisited]
     );
 
     const osInputMemo = useMemo(

diff --git a/...urity_solution/public/management/pages/event_filters/view/components/form/translations.ts b/...urity_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/...rity_solution/public/management/pages/event_filters/view/components/modal/translations.ts b/...rity_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',
   }
 );