From 43f4e55a76129f6a506d3fd4fb184ceee48e6b8c Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Mon, 17 Jul 2023 17:20:25 +0200
Subject: [PATCH] LogRowMessageDisplayedFields: sync implementation with
 LogRowMessage (#71770)

* LogRowMessageDisplayedFields: sync implementation with LogRowMessage

* Add regression test
---
 .../features/logs/components/LogRow.test.tsx  | 13 +++++++++
 .../app/features/logs/components/LogRow.tsx   |  1 +
 .../LogRowMessageDisplayedFields.test.tsx     |  1 +
 .../LogRowMessageDisplayedFields.tsx          | 27 ++++++++++---------
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/public/app/features/logs/components/LogRow.test.tsx b/public/app/features/logs/components/LogRow.test.tsx
index 7956e7a7bea..60be5c483a0 100644
--- a/public/app/features/logs/components/LogRow.test.tsx
+++ b/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();
+  });
 });
diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index c6a1ba86930..7302cf714d8 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/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
diff --git a/public/app/features/logs/components/LogRowMessageDisplayedFields.test.tsx b/public/app/features/logs/components/LogRowMessageDisplayedFields.test.tsx
index 9cf3d94d166..5b30aa3dcdd 100644
--- a/public/app/features/logs/components/LogRowMessageDisplayedFields.test.tsx
+++ b/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,
   };
 
diff --git a/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx b/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
index 6c74cd81445..4872997a453 100644
--- a/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
+++ b/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>
     </>