fixed search highlighting. was only showing highlighted text w/o cont…

…ext (elastic#132650)

Co-authored-by: mitodrummer <[email protected]>

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

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]);

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