[Discover][Traces] Update errors and span links Overview links to open in new Discover tabs

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/section/section.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { render, screen, fireEvent, createEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { ContentFrameworkSection, type ContentFrameworkSectionProps } from './section';
@@ -72,83 +72,6 @@ describe('ContentFrameworkSection', () => {
     expect(defaultProps.actions?.[1].onClick).toHaveBeenCalled();
   });
 
-  it('prefers onClick over href on plain left click', () => {
-    const onClick = jest.fn();
-    render(
-      <ContentFrameworkSection
-        {...defaultProps}
-        actions={[
-          {
-            icon: 'discoverApp',
-            ariaLabel: 'Open in Discover',
-            dataTestSubj: 'unifiedDocViewerSectionActionButton-openInDiscover',
-            label: 'Open in Discover',
-            href: '/app/discover',
-            onClick,
-          },
-        ]}
-      />
-    );
-
-    const button = screen.getByTestId('unifiedDocViewerSectionActionButton-openInDiscover');
-    const clickEvent = createEvent.click(button, { button: 0 });
-    fireEvent(button, clickEvent);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(clickEvent.defaultPrevented).toBe(true);
-  });
-
-  it('does not intercept modifier click when href is present', () => {
-    const onClick = jest.fn();
-    render(
-      <ContentFrameworkSection
-        {...defaultProps}
-        actions={[
-          {
-            icon: 'discoverApp',
-            ariaLabel: 'Open in Discover',
-            dataTestSubj: 'unifiedDocViewerSectionActionButton-openInDiscover',
-            label: 'Open in Discover',
-            href: '/app/discover',
-            onClick,
-          },
-        ]}
-      />
-    );
-
-    const button = screen.getByTestId('unifiedDocViewerSectionActionButton-openInDiscover');
-    const ctrlClickEvent = createEvent.click(button, { button: 0, ctrlKey: true });
-    fireEvent(button, ctrlClickEvent);
-
-    expect(onClick).not.toHaveBeenCalled();
-    expect(ctrlClickEvent.defaultPrevented).toBe(false);
-  });
-
-  it('does not intercept middle click when href is present', () => {
-    const onClick = jest.fn();
-    render(
-      <ContentFrameworkSection
-        {...defaultProps}
-        actions={[
-          {
-            icon: 'discoverApp',
-            ariaLabel: 'Open in Discover',
-            dataTestSubj: 'unifiedDocViewerSectionActionButton-openInDiscoverIcon',
-            href: '/app/discover',
-            onClick,
-          },
-        ]}
-      />
-    );
-
-    const button = screen.getByTestId('unifiedDocViewerSectionActionButton-openInDiscoverIcon');
-    const middleClickEvent = createEvent.click(button, { button: 1 });
-    fireEvent(button, middleClickEvent);
-
-    expect(onClick).not.toHaveBeenCalled();
-    expect(middleClickEvent.defaultPrevented).toBe(false);
-  });
-
   it('renders children inside the panel', () => {
     render(<ContentFrameworkSection {...defaultProps} />);
     expect(screen.getByText('Section children')).toBeInTheDocument();

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/section/section_actions.tsx

@@ -10,6 +10,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui';
 import type { IconType } from '@elastic/eui';
+import { getLinkActionProps } from '../utils/link_action';
 
 interface BaseAction {
   icon: IconType;
@@ -27,10 +28,6 @@ export interface SectionActionsProps {
   actions: Action[];
 }
 
-function isPlainLeftClick(e: React.MouseEvent) {
-  return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
-}
-
 export const SectionActions = ({ actions }: SectionActionsProps) => {
   if (!actions.length) return null;
   const size = 'xs';
@@ -39,20 +36,7 @@ export const SectionActions = ({ actions }: SectionActionsProps) => {
     <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center">
       {actions.map((action, idx) => {
         const { icon, ariaLabel, dataTestSubj, label, onClick, href } = action;
-        const handleClick = onClick
-          ? (e: React.MouseEvent) => {
-              // If we have an href, keep native link behaviour for right clicks and modifier clicks.
-              // Plain left click should run the provided handler instead.
-              if (href && !isPlainLeftClick(e)) return;
-              if (href) e.preventDefault();
-              onClick();
-            }
-          : undefined;
-
-        const buttonProps = {
-          href,
-          onClick: handleClick,
-        };
+        const buttonProps = getLinkActionProps({ href, onClick });
 
         return (
           <EuiFlexItem grow={false} key={action.id ?? idx} id={action.id}>

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/utils/link_action/index.ts

@@ -0,0 +1,44 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { MouseEvent, MouseEventHandler } from 'react';
+
+interface LinkActionProps {
+  href?: string;
+  onClick?: () => void;
+}
+
+function isPlainLeftClick(e: MouseEvent) {
+  return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+}
+
+/**
+ * Creates `href` and `onClick` props that preserve native link behavior for
+ * right-clicks and modifier-clicks, while allowing a handler to run on plain
+ * left-click (preventing navigation when `href` is present).
+ */
+export function getLinkActionProps({ href, onClick }: LinkActionProps): {
+  href?: string;
+  onClick?: MouseEventHandler;
+} {
+  const handleClick: MouseEventHandler | undefined = onClick
+    ? (e) => {
+        // If we have an href, keep native link behaviour for right clicks and modifier clicks.
+        // Plain left click should run the provided handler instead.
+        if (href && !isPlainLeftClick(e)) return;
+        if (href) e.preventDefault();
+        onClick();
+      }
+    : undefined;
+
+  return {
+    href,
+    onClick: handleClick,
+  };
+}

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/utils/link_action/link_action.test.ts

@@ -0,0 +1,86 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { getLinkActionProps } from '.';
+
+describe('link_action_utils', () => {
+  describe('getLinkActionProps', () => {
+    it('returns empty props when neither href nor onClick are provided', () => {
+      expect(getLinkActionProps({})).toEqual({});
+    });
+
+    it('returns only href when href is provided without onClick', () => {
+      expect(getLinkActionProps({ href: '/app/discover' })).toEqual({ href: '/app/discover' });
+    });
+
+    it('returns only onClick when onClick is provided without href', () => {
+      const onClick = jest.fn();
+      const props = getLinkActionProps({ onClick });
+      expect(props.href).toBeUndefined();
+      expect(typeof props.onClick).toBe('function');
+
+      props.onClick?.({} as any);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('prefers onClick over href on plain left click', () => {
+      const onClick = jest.fn();
+      const props = getLinkActionProps({ href: '/app/discover', onClick });
+
+      const preventDefault = jest.fn();
+      props.onClick?.({
+        button: 0,
+        metaKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        altKey: false,
+        preventDefault,
+      } as any);
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(preventDefault).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not intercept modifier click when href is present', () => {
+      const onClick = jest.fn();
+      const props = getLinkActionProps({ href: '/app/discover', onClick });
+
+      const preventDefault = jest.fn();
+      props.onClick?.({
+        button: 0,
+        ctrlKey: true,
+        metaKey: false,
+        shiftKey: false,
+        altKey: false,
+        preventDefault,
+      } as any);
+
+      expect(onClick).not.toHaveBeenCalled();
+      expect(preventDefault).not.toHaveBeenCalled();
+    });
+
+    it('does not intercept middle click when href is present', () => {
+      const onClick = jest.fn();
+      const props = getLinkActionProps({ href: '/app/discover', onClick });
+
+      const preventDefault = jest.fn();
+      props.onClick?.({
+        button: 1,
+        metaKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        altKey: false,
+        preventDefault,
+      } as any);
+
+      expect(onClick).not.toHaveBeenCalled();
+      expect(preventDefault).not.toHaveBeenCalled();
+    });
+  });
+});

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/components/discover_esql_link/discover_esql_link.test.tsx

@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { createEvent, fireEvent, render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { DiscoverEsqlLink } from '.';
+import { useDiscoverLinkAndEsqlQuery } from '../../../../../hooks/use_discover_link_and_esql_query';
+import { useDocViewerExtensionActionsContext } from '../../../../../hooks/use_doc_viewer_extension_actions';
+
+jest.mock('../../../../../hooks/use_discover_link_and_esql_query', () => ({
+  useDiscoverLinkAndEsqlQuery: jest.fn(),
+}));
+
+jest.mock('../../../../../hooks/use_doc_viewer_extension_actions', () => ({
+  useDocViewerExtensionActionsContext: jest.fn(),
+}));
+
+describe('DiscoverEsqlLink', () => {
+  const indexPattern = 'apm-*';
+  const whereClause = undefined;
+  const tabLabel = 'Tab label';
+  const dataTestSubj = 'discoverEsqlLink';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useDocViewerExtensionActionsContext as jest.Mock).mockReturnValue(undefined);
+    (useDiscoverLinkAndEsqlQuery as jest.Mock).mockReturnValue({
+      discoverUrl: undefined,
+      esqlQueryString: undefined,
+    });
+  });
+
+  it('renders children without a link when href and openInNewTab are unavailable', () => {
+    const { getByText, queryByTestId } = render(
+      <DiscoverEsqlLink
+        indexPattern={indexPattern}
+        whereClause={whereClause}
+        tabLabel={tabLabel}
+        dataTestSubj={dataTestSubj}
+      >
+        Child
+      </DiscoverEsqlLink>
+    );
+
+    expect(getByText('Child')).toBeInTheDocument();
+    expect(queryByTestId(dataTestSubj)).not.toBeInTheDocument();
+  });
+
+  it('renders a link when discoverUrl is available', () => {
+    (useDiscoverLinkAndEsqlQuery as jest.Mock).mockReturnValue({
+      discoverUrl: '/app/discover#/?_a=1',
+      esqlQueryString: undefined,
+    });
+
+    const { getByTestId } = render(
+      <DiscoverEsqlLink
+        indexPattern={indexPattern}
+        whereClause={whereClause}
+        tabLabel={tabLabel}
+        dataTestSubj={dataTestSubj}
+      >
+        Child
+      </DiscoverEsqlLink>
+    );
+
+    expect(getByTestId(dataTestSubj)).toHaveAttribute('href', '/app/discover#/?_a=1');
+  });
+
+  it('calls openInNewTab on plain left click when esqlQueryString is available', () => {
+    const openInNewTab = jest.fn();
+    (useDocViewerExtensionActionsContext as jest.Mock).mockReturnValue({ openInNewTab });
+    (useDiscoverLinkAndEsqlQuery as jest.Mock).mockReturnValue({
+      discoverUrl: '/app/discover#/?_a=1',
+      esqlQueryString: 'FROM apm-* | WHERE true',
+    });
+
+    const { getByTestId } = render(
+      <DiscoverEsqlLink
+        indexPattern={indexPattern}
+        whereClause={whereClause}
+        tabLabel={tabLabel}
+        dataTestSubj={dataTestSubj}
+      >
+        Child
+      </DiscoverEsqlLink>
+    );
+
+    const link = getByTestId(dataTestSubj);
+    const clickEvent = createEvent.click(link, { button: 0 });
+    fireEvent(link, clickEvent);
+
+    expect(clickEvent.defaultPrevented).toBe(true);
+    expect(openInNewTab).toHaveBeenCalledWith({
+      query: { esql: 'FROM apm-* | WHERE true' },
+      tabLabel,
+    });
+  });
+
+  it('does not intercept modifier clicks when href is present', () => {
+    const openInNewTab = jest.fn();
+    (useDocViewerExtensionActionsContext as jest.Mock).mockReturnValue({ openInNewTab });
+    (useDiscoverLinkAndEsqlQuery as jest.Mock).mockReturnValue({
+      discoverUrl: '/app/discover#/?_a=1',
+      esqlQueryString: 'FROM apm-* | WHERE true',
+    });
+
+    const { getByTestId } = render(
+      <DiscoverEsqlLink
+        indexPattern={indexPattern}
+        whereClause={whereClause}
+        tabLabel={tabLabel}
+        dataTestSubj={dataTestSubj}
+      >
+        Child
+      </DiscoverEsqlLink>
+    );
+
+    const link = getByTestId(dataTestSubj);
+    const ctrlClickEvent = createEvent.click(link, { button: 0, ctrlKey: true });
+    fireEvent(link, ctrlClickEvent);
+
+    expect(openInNewTab).not.toHaveBeenCalled();
+    expect(ctrlClickEvent.defaultPrevented).toBe(false);
+  });
+});