From 744afcef7d9d5438485640a01588399d15e4b272 Mon Sep 17 00:00:00 2001
From: Yara Tercero <yctercero@users.noreply.github.com>
Date: Thu, 30 Jul 2020 17:22:10 -0400
Subject: [PATCH] [Security Solution][Exceptions] - Update how nested entries
 are displayed in exceptions viewer (#73745)

### Summary

Small PR updating how nested entries are displayed in exception viewer. Doesn't change anything functionally, just cosmetic.
---
 .../viewer/exception_item/exception_entries.tsx  | 16 ++++++++++++----
 .../exceptions/viewer/helpers.test.tsx           |  8 ++++----
 .../components/exceptions/viewer/helpers.tsx     |  5 +----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
index 7069e99943f7b4..bcc4adf54c9d7e 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
@@ -52,6 +52,14 @@ const MyActionButton = styled(EuiFlexItem)`
   align-self: flex-end;
 `;
 
+const MyNestedValueContainer = styled.div`
+  margin-left: ${({ theme }) => theme.eui.euiSizeL};
+`;
+
+const MyNestedValue = styled.span`
+  margin-left: ${({ theme }) => theme.eui.euiSizeS};
+`;
+
 interface ExceptionEntriesComponentProps {
   entries: FormattedEntry[];
   disableDelete: boolean;
@@ -78,10 +86,10 @@ const ExceptionEntriesComponent = ({
         render: (value: string | null, data: FormattedEntry) => {
           if (value != null && data.isNested) {
             return (
-              <>
-                <EuiIconTip type="grabHorizontal" size="m" />
-                {value}
-              </>
+              <MyNestedValueContainer>
+                <EuiIconTip type="nested" size="s" />
+                <MyNestedValue>{value}</MyNestedValue>
+              </MyNestedValueContainer>
             );
           } else {
             return value ?? getEmptyValue();
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.test.tsx
index 5d4340db9a4488..5f6e54b0d3cffd 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.test.tsx
@@ -106,13 +106,13 @@ describe('Exception viewer helpers', () => {
           value: undefined,
         },
         {
-          fieldName: 'host.name.host.name',
+          fieldName: 'host.name',
           isNested: true,
           operator: 'is',
           value: 'some host name',
         },
         {
-          fieldName: 'host.name.host.name',
+          fieldName: 'host.name',
           isNested: true,
           operator: 'is one of',
           value: ['some host name'],
@@ -138,9 +138,9 @@ describe('Exception viewer helpers', () => {
 
     test('it formats as expected when "isNested" is "true"', () => {
       const payload = getEntryMatchMock();
-      const formattedEntry = formatEntry({ isNested: true, parent: 'parent', item: payload });
+      const formattedEntry = formatEntry({ isNested: true, item: payload });
       const expected: FormattedEntry = {
-        fieldName: 'parent.host.name',
+        fieldName: 'host.name',
         isNested: true,
         operator: 'is',
         value: 'some host name',
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.tsx
index 345db5bf1e75ef..86b0512410e6f4 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/helpers.tsx
@@ -20,18 +20,16 @@ import * as i18n from '../translations';
  */
 export const formatEntry = ({
   isNested,
-  parent,
   item,
 }: {
   isNested: boolean;
-  parent?: string;
   item: BuilderEntry;
 }): FormattedEntry => {
   const operator = getExceptionOperatorSelect(item);
   const value = getEntryValue(item);
 
   return {
-    fieldName: isNested ? `${parent}.${item.field}` : item.field ?? '',
+    fieldName: item.field ?? '',
     operator: operator.message,
     value,
     isNested,
@@ -57,7 +55,6 @@ export const getFormattedEntries = (entries: BuilderEntry[]): FormattedEntry[] =
         (acc, nestedEntry) => {
           const formattedEntry = formatEntry({
             isNested: true,
-            parent: item.field,
             item: nestedEntry,
           });
           return [...acc, { ...formattedEntry }];