Changes more multilangs and display name error only when needed

x-pack/plugins/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>

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 () => {

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<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(

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', {

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',
   }
 );