[Security Solution] [Endpoint] Splits event filters flyout content in…

… sections (#119022) * Splits event filters flyout content in sections. Also adds unit test * Update section descriptions Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 22, 2021 · 3f83f7a · 3f83f7a
1 parent 124a3d9
commit 3f83f7a
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 17 deletions.
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
@@ -76,6 +76,14 @@ describe('Event filter form', () => {
     expect(component.getByTestId('exceptionsBuilderWrapper')).not.toBeNull();
   });
 
+  it('should display sections', async () => {
+    component = await renderWithData();
+
+    expect(component.queryByText('Details')).not.toBeNull();
+    expect(component.queryByText('Conditions')).not.toBeNull();
+    expect(component.queryByText('Comments')).not.toBeNull();
+  });
+
   it('should display name error only when on blur and empty name', async () => {
     component = await renderWithData();
     expect(component.queryByText(NAME_ERROR)).toBeNull();

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
@@ -16,7 +16,9 @@ import {
   EuiSuperSelect,
   EuiSuperSelectOption,
   EuiText,
+  EuiHorizontalRule,
 } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 import type { ExceptionListItemSchema } from '@kbn/securitysolution-io-ts-list-types';
 import { EVENT_FILTERS_OPERATORS } from '@kbn/securitysolution-list-utils';
@@ -205,25 +207,95 @@ export const EventFiltersForm: React.FC<EventFiltersFormProps> = memo(
       [exception, handleOnChangeComment, newComment]
     );
 
+    const detailsSection = useMemo(
+      () => (
+        <>
+          <EuiText size="xs">
+            <h3>
+              <FormattedMessage
+                id="xpack.securitySolution.eventFilters.detailsSectionTitle"
+                defaultMessage="Details"
+              />
+            </h3>
+          </EuiText>
+          <EuiSpacer size="xs" />
+          <EuiText size="s">
+            <p>{ABOUT_EVENT_FILTERS}</p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          {nameInputMemo}
+        </>
+      ),
+      [nameInputMemo]
+    );
+
+    const criteriaSection = useMemo(
+      () => (
+        <>
+          <EuiText size="xs">
+            <h3>
+              <FormattedMessage
+                id="xpack.securitySolution.eventFilters.criteriaSectionTitle"
+                defaultMessage="Conditions"
+              />
+            </h3>
+          </EuiText>
+          <EuiSpacer size="xs" />
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="xpack.securitySolution.eventFilters.criteriaSectionDescription"
+                defaultMessage="Select an operating system and add conditions."
+              />
+            </p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          {allowSelectOs ? (
+            <>
+              {osInputMemo}
+              <EuiSpacer />
+            </>
+          ) : null}
+          {exceptionBuilderComponentMemo}
+        </>
+      ),
+      [allowSelectOs, exceptionBuilderComponentMemo, osInputMemo]
+    );
+
+    const commentsSection = useMemo(
+      () => (
+        <>
+          <EuiText size="xs">
+            <h3>
+              <FormattedMessage
+                id="xpack.securitySolution.eventFilters.commentsSectionTitle"
+                defaultMessage="Comments"
+              />
+            </h3>
+          </EuiText>
+          <EuiSpacer size="xs" />
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="xpack.securitySolution.eventFilters.commentsSectionDescription"
+                defaultMessage="Add a comment to your event filter."
+              />
+            </p>
+          </EuiText>
+          <EuiSpacer size="m" />
+          {commentsInputMemo}
+        </>
+      ),
+      [commentsInputMemo]
+    );
+
     return !isIndexPatternLoading && exception ? (
       <EuiForm component="div">
-        {!exception || !exception.item_id ? (
-          <EuiText color="subdued" size="xs">
-            {ABOUT_EVENT_FILTERS}
-            <EuiSpacer size="m" />
-          </EuiText>
-        ) : null}
-        {nameInputMemo}
-        <EuiSpacer size="m" />
-        {allowSelectOs ? (
-          <>
-            {osInputMemo}
-            <EuiSpacer />
-          </>
-        ) : null}
-        {exceptionBuilderComponentMemo}
-        <EuiSpacer size="xl" />
-        {commentsInputMemo}
+        {detailsSection}
+        <EuiHorizontalRule />
+        {criteriaSection}
+        <EuiHorizontalRule />
+        {commentsSection}
       </EuiForm>
     ) : (
       <Loader size="xl" />