LogRowMessageDisplayedFields: sync implementation with LogRowMessage (#71770)

* LogRowMessageDisplayedFields: sync implementation with LogRowMessage

* Add regression test

public/app/features/logs/components/LogRow.test.tsx

@@ -120,4 +120,17 @@ describe('LogRow', () => {
 
     expect(screen.getByLabelText('Show context')).toBeInTheDocument();
   });
+
+  it('should render the menu cell on mouse over with displayed fields', async () => {
+    setup(
+      { showContextToggle: jest.fn().mockReturnValue(true), displayedFields: ['test'] },
+      { labels: { test: 'field value' } }
+    );
+
+    expect(screen.queryByLabelText('Show context')).not.toBeInTheDocument();
+
+    await userEvent.hover(screen.getByText('test=field value'));
+
+    expect(screen.getByLabelText('Show context')).toBeInTheDocument();
+  });
 });

public/app/features/logs/components/LogRow.tsx

@@ -239,6 +239,7 @@ class UnThemedLogRow extends PureComponent<Props, State> {
               onPinLine={this.props.onPinLine}
               onUnpinLine={this.props.onUnpinLine}
               pinned={this.props.pinned}
+              mouseIsOver={this.state.mouseIsOver}
             />
           ) : (
             <LogRowMessage

public/app/features/logs/components/LogRowMessageDisplayedFields.test.tsx

@@ -20,6 +20,7 @@ const setup = (propOverrides: Partial<Props> = {}, detectedFields = ['place', 'p
     onOpenContext: () => {},
     styles,
     detectedFields,
+    mouseIsOver: true,
     ...propOverrides,
   };
 

public/app/features/logs/components/LogRowMessageDisplayedFields.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import { LogRowModel, Field, LinkModel, DataFrame } from '@grafana/data';
 
@@ -19,11 +19,11 @@ export interface Props {
   onPinLine?: (row: LogRowModel) => void;
   onUnpinLine?: (row: LogRowModel) => void;
   pinned?: boolean;
+  mouseIsOver: boolean;
 }
 
 export const LogRowMessageDisplayedFields = React.memo((props: Props) => {
-  const [hover, setHover] = useState(false);
-  const { row, detectedFields, getFieldLinks, wrapLogMessage, styles, pinned, ...rest } = props;
+  const { row, detectedFields, getFieldLinks, wrapLogMessage, styles, mouseIsOver, pinned, ...rest } = props;
   const fields = getAllFields(row, getFieldLinks);
   const wrapClassName = wrapLogMessage ? '' : displayedFieldsStyles.noWrap;
   // only single key/value rows are filterable, so we only need the first field key for filtering
@@ -51,22 +51,23 @@ export const LogRowMessageDisplayedFields = React.memo((props: Props) => {
     [detectedFields, fields, row.labels]
   );
 
-  const showMenu = useCallback(() => {
-    setHover(true);
-  }, []);
-  const hideMenu = useCallback(() => {
-    setHover(false);
-  }, []);
-  const shouldShowMenu = useMemo(() => hover || pinned, [hover, pinned]);
+  const shouldShowMenu = useMemo(() => mouseIsOver || pinned, [mouseIsOver, pinned]);
 
   return (
     <>
-      <td className={styles.logsRowMessage} onMouseEnter={showMenu} onMouseLeave={hideMenu}>
+      <td className={styles.logsRowMessage}>
         <div className={wrapClassName}>{line}</div>
       </td>
-      <td className={`log-row-menu-cell ${styles.logRowMenuCell}`} onMouseEnter={showMenu} onMouseLeave={hideMenu}>
+      <td className={`log-row-menu-cell ${styles.logRowMenuCell}`}>
         {shouldShowMenu && (
-          <LogRowMenuCell logText={line} row={row} styles={styles} pinned={pinned} {...rest} mouseIsOver={false} />
+          <LogRowMenuCell
+            logText={line}
+            row={row}
+            styles={styles}
+            pinned={pinned}
+            {...rest}
+            mouseIsOver={mouseIsOver}
+          />
         )}
       </td>
     </>