From a25116dbd539be982bfc919d8187cb1cadf94ce5 Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matias.chomicki@grafana.com>
Date: Wed, 27 Aug 2025 15:37:28 +0200
Subject: [PATCH] New Log Panel: Extend clickable area (#110156)

* LogLine: make the entire line clickable

* New Logs Panel: Extend log line clickable area
---
 .../logs/components/panel/LogLine.test.tsx    | 11 +++++++++++
 .../logs/components/panel/LogLine.tsx         | 19 +++++++++++++------
 .../logs/components/panel/LogLineMenu.tsx     |  1 +
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/public/app/features/logs/components/panel/LogLine.test.tsx b/public/app/features/logs/components/panel/LogLine.test.tsx
index 6ea14b9862c..5b765c49343 100644
--- a/public/app/features/logs/components/panel/LogLine.test.tsx
+++ b/public/app/features/logs/components/panel/LogLine.test.tsx
@@ -216,6 +216,17 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
       await userEvent.click(screen.getByLabelText('Log menu'));
       expect(screen.getByText('Copy log line')).toBeInTheDocument();
     });
+
+    test('The menu can be clicked', async () => {
+      render(
+        <LogListContextProvider {...contextProps}>
+          <LogLine {...defaultProps} />
+        </LogListContextProvider>
+      );
+      expect(screen.queryByText('Copy log line')).not.toBeInTheDocument();
+      await userEvent.click(screen.getByRole('button'));
+      expect(screen.getByText('Copy log line')).toBeInTheDocument();
+    });
   });
 
   describe('Syntax highlighting', () => {
diff --git a/public/app/features/logs/components/panel/LogLine.tsx b/public/app/features/logs/components/panel/LogLine.tsx
index 723f9cd54a5..6ce1de66ba3 100644
--- a/public/app/features/logs/components/panel/LogLine.tsx
+++ b/public/app/features/logs/components/panel/LogLine.tsx
@@ -149,7 +149,9 @@ const LogLineComponent = memo(
 
     const handleClick = useCallback(
       (e: MouseEvent<HTMLElement>) => {
-        onClick(e, log);
+        if (isLogLineClick(e.target)) {
+          onClick(e, log);
+        }
       },
       [log, onClick]
     );
@@ -158,11 +160,14 @@ const LogLineComponent = memo(
 
     return (
       <>
+        {/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu  */}
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
         <div
-          className={`${styles.logLine} ${variant ?? ''} ${pinned ? styles.pinnedLogLine : ''} ${permalinked ? styles.permalinkedLogLine : ''} ${detailsShown ? styles.detailsDisplayed : ''} ${fontSize === 'small' ? styles.fontSizeSmall : ''}`}
+          className={`${styles.logLine} ${variant ?? ''} ${pinned ? styles.pinnedLogLine : ''} ${permalinked ? styles.permalinkedLogLine : ''} ${detailsShown ? styles.detailsDisplayed : ''} ${fontSize === 'small' ? styles.fontSizeSmall : ''} ${enableLogDetails ? styles.clickable : ''}`}
           ref={onOverflow ? logLineRef : undefined}
           onMouseEnter={handleMouseOver}
           onFocus={handleMouseOver}
+          onClick={handleClick}
         >
           <LogLineMenu styles={styles} log={log} />
           {dedupStrategy !== LogsDedupStrategy.none && (
@@ -204,16 +209,13 @@ const LogLineComponent = memo(
               )}
             </div>
           )}
-          {/* A button element could be used but in Safari it prevents text selection. Fallback available for a11y in LogLineMenu  */}
-          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
           <div
-            className={`${styles.fieldsWrapper} ${detailsShown ? styles.detailsDisplayed : ''} ${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''} ${enableLogDetails ? styles.clickable : ''}`}
+            className={`${styles.fieldsWrapper} ${detailsShown ? styles.detailsDisplayed : ''} ${wrapLogMessage ? styles.wrappedLogLine : `${styles.unwrappedLogLine} unwrapped-log-line`} ${collapsed === true ? styles.collapsedLogLine : ''}`}
             style={
               collapsed && virtualization
                 ? { maxHeight: `${virtualization.getTruncationLineCount() * virtualization.getLineHeight()}px` }
                 : undefined
             }
-            onClick={handleClick}
           >
             <Log
               collapsed={collapsed}
@@ -595,3 +597,8 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
     }),
   };
 };
+
+function isLogLineClick(target: EventTarget) {
+  const targetIsButton = target instanceof HTMLButtonElement || (target instanceof Element && target.closest('button'));
+  return !targetIsButton;
+}
diff --git a/public/app/features/logs/components/panel/LogLineMenu.tsx b/public/app/features/logs/components/panel/LogLineMenu.tsx
index a9bba004538..3f660861b9b 100644
--- a/public/app/features/logs/components/panel/LogLineMenu.tsx
+++ b/public/app/features/logs/components/panel/LogLineMenu.tsx
@@ -160,6 +160,7 @@ export const LogLineMenu = ({ log, styles }: Props) => {
         className={styles.menuIcon}
         name="ellipsis-v"
         aria-label={t('logs.log-line-menu.icon-label', 'Log menu')}
+        role="button"
       />
     </Dropdown>
   );