From 41635e288f790a8e79e8294f65d43212fa479366 Mon Sep 17 00:00:00 2001
From: Karl Godard <karl.godard@elastic.co>
Date: Fri, 20 May 2022 13:35:30 -0700
Subject: [PATCH] fixed search highlighting. was only showing highlighted text
 w/o context (#132650)

Co-authored-by: mitodrummer <karlgodard@elastic.co>
---
 .../public/components/process_tree_node/index.test.tsx | 10 ++++++++--
 .../public/components/process_tree_node/index.tsx      |  2 +-
 .../public/components/process_tree_node/styles.ts      |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/index.test.tsx b/x-pack/plugins/session_view/public/components/process_tree_node/index.test.tsx
index 1316313427c5e7..cff05c5c1003b3 100644
--- a/x-pack/plugins/session_view/public/components/process_tree_node/index.test.tsx
+++ b/x-pack/plugins/session_view/public/components/process_tree_node/index.test.tsx
@@ -295,13 +295,19 @@ describe('ProcessTreeNode component', () => {
     describe('Search', () => {
       it('highlights text within the process node line item if it matches the searchQuery', () => {
         // set a mock search matched indicator for the process (typically done by ProcessTree/helpers.ts)
-        processMock.searchMatched = '/vagrant';
+        processMock.searchMatched = '/vagr';
 
         renderResult = mockedContext.render(<ProcessTreeNode {...props} />);
 
         expect(
           renderResult.getByTestId('sessionView:processNodeSearchHighlight').textContent
-        ).toEqual('/vagrant');
+        ).toEqual('/vagr');
+
+        // ensures we are showing the rest of the info, and not replacing it with just the match.
+        const { process } = props.process.getDetails();
+        expect(renderResult.container.textContent).toContain(
+          process?.working_directory + '\xA0' + (process?.args && process.args.join(' '))
+        );
       });
     });
   });
diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx
index 4d6074497af5ab..f65cb0f25530a0 100644
--- a/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx
+++ b/x-pack/plugins/session_view/public/components/process_tree_node/index.tsx
@@ -146,7 +146,7 @@ export function ProcessTreeNode({
         });
 
         // eslint-disable-next-line no-unsanitized/property
-        textRef.current.innerHTML = html;
+        textRef.current.innerHTML = '<span>' + html + '</span>';
       }
     }
   }, [searchMatched, styles.searchHighlight]);
diff --git a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts
index b68df480064b35..54dbdb1bc4565f 100644
--- a/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts
+++ b/x-pack/plugins/session_view/public/components/process_tree_node/styles.ts
@@ -117,7 +117,6 @@ export const useStyles = ({
         fontSize: FONT_SIZE,
         lineHeight: LINE_HEIGHT,
         verticalAlign: 'middle',
-        display: 'inline-block',
       },
     };
 
@@ -165,6 +164,7 @@ export const useStyles = ({
       paddingLeft: size.xxl,
       position: 'relative',
       lineHeight: LINE_HEIGHT,
+      marginTop: '1px',
     };
 
     const alertDetails: CSSObject = {