[9.2] [Dataset Quality] Fix link to discover in error type being truncated out for smaller screens (#240400) (#241449)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[Dataset Quality] Fix link to discover in error type being truncated
out for smaller screens
(#240400)](#240400)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Alex
Fernandez","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-31T12:16:30Z","message":"[Dataset
Quality] Fix link to discover in error type being truncated out for
smaller screens (#240400)\n\nCloses #239139\n\n## Summary\nFixes a
couple of issues with the link to discover in the error type\ncolumn of
data quality issues. Namely:\n\n### Anchor tag being truncated out\nThe
error type component was previously made of a composition of\nEuiBadge
and EuiLink. This meant that the anchor tag was scoped only on\nthe
external link icon inside the badge, which depending on the length\nof
the error description as well as screen size, could have the
icon\ntruncated out making users unable to make use of the direct link
to\ndiscover.\n\nThis PR updates the component to use a single EuiButton
instead, which\nis being supplied an href value and being rendered as an
anchor. This\nprovides the following advantages:\n- The whole button is
now an anchor tag. This make the clickable surface\narea of the link
bigger, which can provide better UX given that the icon\ncould be
somewhat small previously\n- Even if the contents of the button get
truncated, the link itself will\nalways be accesible given that it's the
button as a whole that acts as\nan anchor tag\n- Instead of relaying on
a component in the contents of the button to\nrender the external link
icon, it is now being rendered via button\nprops. This ensures that,
even when the content of the button is\ntruncated, the icon remains
visible keeping users aware that they're\nabout to click a link that
will open in a new tab\n\n### External link handling\nThe way
`useRedirectLink` was decorating onClick events was preventing\nexternal
links to work properly. The event propagation chain was being\nstopped
(`event.preventDefault`), which for regular links is required in\norder
to prevent the page reload that browsers do by default on
link\nredirections as we're in a SPA. But, for external links, we do
want the\nanchor tag to handle the event so that a new tab can be
opened.\n\nA simple fix would be to remove the onClick handler from the
link\ncompletely. Sadly, that couldn't be done because the link click
has a\ntelemetry event linked to it which we're sending via the
onClick\nhandler. So, the solution proposed in this PR adds an extra
new\nparameter `external` to the hook. The way this parameter work
is:\n- If false, the hook works as before and the prevent default will
be\nadded as always\n- If true, the onClick event will add the telemetry
event but it will\navoid modifying the propagation chain. This allows
external link\nbehaviour to work as expected while keeping the telemetry
as it was\n\n## UI\nThe UI changed slightly because we're now using a
button. Everything\nlooks mostly the same but the error type \"badge\"
now as an onHover\nbackground
color\n\n\n\nhttps://github.com/user-attachments/assets/44a4daa3-df4e-4cea-b1b4-20271eb0cdd5","sha":"1b41310c2c683ffd86000d664e3dedba7afe3d3a","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-logs","backport:version","Feature:Streams","v9.2.0","v9.3.0"],"title":"[Dataset
Quality] Fix link to discover in error type being truncated out for
smaller
screens","number":240400,"url":"https://github.com/elastic/kibana/pull/240400","mergeCommit":{"message":"[Dataset
Quality] Fix link to discover in error type being truncated out for
smaller screens (#240400)\n\nCloses #239139\n\n## Summary\nFixes a
couple of issues with the link to discover in the error type\ncolumn of
data quality issues. Namely:\n\n### Anchor tag being truncated out\nThe
error type component was previously made of a composition of\nEuiBadge
and EuiLink. This meant that the anchor tag was scoped only on\nthe
external link icon inside the badge, which depending on the length\nof
the error description as well as screen size, could have the
icon\ntruncated out making users unable to make use of the direct link
to\ndiscover.\n\nThis PR updates the component to use a single EuiButton
instead, which\nis being supplied an href value and being rendered as an
anchor. This\nprovides the following advantages:\n- The whole button is
now an anchor tag. This make the clickable surface\narea of the link
bigger, which can provide better UX given that the icon\ncould be
somewhat small previously\n- Even if the contents of the button get
truncated, the link itself will\nalways be accesible given that it's the
button as a whole that acts as\nan anchor tag\n- Instead of relaying on
a component in the contents of the button to\nrender the external link
icon, it is now being rendered via button\nprops. This ensures that,
even when the content of the button is\ntruncated, the icon remains
visible keeping users aware that they're\nabout to click a link that
will open in a new tab\n\n### External link handling\nThe way
`useRedirectLink` was decorating onClick events was preventing\nexternal
links to work properly. The event propagation chain was being\nstopped
(`event.preventDefault`), which for regular links is required in\norder
to prevent the page reload that browsers do by default on
link\nredirections as we're in a SPA. But, for external links, we do
want the\nanchor tag to handle the event so that a new tab can be
opened.\n\nA simple fix would be to remove the onClick handler from the
link\ncompletely. Sadly, that couldn't be done because the link click
has a\ntelemetry event linked to it which we're sending via the
onClick\nhandler. So, the solution proposed in this PR adds an extra
new\nparameter `external` to the hook. The way this parameter work
is:\n- If false, the hook works as before and the prevent default will
be\nadded as always\n- If true, the onClick event will add the telemetry
event but it will\navoid modifying the propagation chain. This allows
external link\nbehaviour to work as expected while keeping the telemetry
as it was\n\n## UI\nThe UI changed slightly because we're now using a
button. Everything\nlooks mostly the same but the error type \"badge\"
now as an onHover\nbackground
color\n\n\n\nhttps://github.com/user-attachments/assets/44a4daa3-df4e-4cea-b1b4-20271eb0cdd5","sha":"1b41310c2c683ffd86000d664e3dedba7afe3d3a"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/240400","number":240400,"mergeCommit":{"message":"[Dataset
Quality] Fix link to discover in error type being truncated out for
smaller screens (#240400)\n\nCloses #239139\n\n## Summary\nFixes a
couple of issues with the link to discover in the error type\ncolumn of
data quality issues. Namely:\n\n### Anchor tag being truncated out\nThe
error type component was previously made of a composition of\nEuiBadge
and EuiLink. This meant that the anchor tag was scoped only on\nthe
external link icon inside the badge, which depending on the length\nof
the error description as well as screen size, could have the
icon\ntruncated out making users unable to make use of the direct link
to\ndiscover.\n\nThis PR updates the component to use a single EuiButton
instead, which\nis being supplied an href value and being rendered as an
anchor. This\nprovides the following advantages:\n- The whole button is
now an anchor tag. This make the clickable surface\narea of the link
bigger, which can provide better UX given that the icon\ncould be
somewhat small previously\n- Even if the contents of the button get
truncated, the link itself will\nalways be accesible given that it's the
button as a whole that acts as\nan anchor tag\n- Instead of relaying on
a component in the contents of the button to\nrender the external link
icon, it is now being rendered via button\nprops. This ensures that,
even when the content of the button is\ntruncated, the icon remains
visible keeping users aware that they're\nabout to click a link that
will open in a new tab\n\n### External link handling\nThe way
`useRedirectLink` was decorating onClick events was preventing\nexternal
links to work properly. The event propagation chain was being\nstopped
(`event.preventDefault`), which for regular links is required in\norder
to prevent the page reload that browsers do by default on
link\nredirections as we're in a SPA. But, for external links, we do
want the\nanchor tag to handle the event so that a new tab can be
opened.\n\nA simple fix would be to remove the onClick handler from the
link\ncompletely. Sadly, that couldn't be done because the link click
has a\ntelemetry event linked to it which we're sending via the
onClick\nhandler. So, the solution proposed in this PR adds an extra
new\nparameter `external` to the hook. The way this parameter work
is:\n- If false, the hook works as before and the prevent default will
be\nadded as always\n- If true, the onClick event will add the telemetry
event but it will\navoid modifying the propagation chain. This allows
external link\nbehaviour to work as expected while keeping the telemetry
as it was\n\n## UI\nThe UI changed slightly because we're now using a
button. Everything\nlooks mostly the same but the error type \"badge\"
now as an onHover\nbackground
color\n\n\n\nhttps://github.com/user-attachments/assets/44a4daa3-df4e-4cea-b1b4-20271eb0cdd5","sha":"1b41310c2c683ffd86000d664e3dedba7afe3d3a"}}]}]
BACKPORT-->

Co-authored-by: Alex Fernandez <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/quality_issue_flyout/failed_docs/columns.tsx

@@ -41,6 +41,9 @@ export const getFailedDocsErrorsColumns = (): Array<EuiBasicTableColumn<FailedDo
     render: (_, { message }) => {
       return <ErrorMessage errorMessage={message} />;
     },
+    mobileOptions: {
+      width: '100%',
+    },
   },
   {
     name: (

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/quality_issue_flyout/failed_docs/error_stacktrace_link.tsx

@@ -5,7 +5,8 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiLink } from '@elastic/eui';
+import { EuiButton } from '@elastic/eui';
+import type { UseEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { NavigationSource } from '../../../../services/telemetry';
 import { FAILURE_STORE_SELECTOR } from '../../../../../common/constants';
@@ -15,13 +16,11 @@ import {
   useRedirectLink,
 } from '../../../../hooks';
 
-export const ErrorStacktraceLink = ({
-  errorType,
-  children,
-}: {
-  errorType: string;
-  children?: React.ReactNode;
-}) => {
+const ButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
+  fontWeight: euiTheme.font.weight.bold,
+});
+
+export const ErrorStacktraceLink = ({ errorType }: { errorType: string }) => {
   const { datasetDetails, timeRange } = useDatasetQualityDetailsState();
   const query = { language: 'kuery', query: `error.type: "${errorType}"` };
   const { sendTelemetry } = useDatasetDetailsRedirectLinkTelemetry({
@@ -35,20 +34,25 @@ export const ErrorStacktraceLink = ({
     sendTelemetry,
     timeRangeConfig: timeRange,
     selector: FAILURE_STORE_SELECTOR,
+    external: true,
   });
 
   return (
-    <EuiBadge color="hollow">
-      <strong>{errorType}</strong>
-      <EuiLink
-        external
-        {...linkProps}
-        color="primary"
-        data-test-subj={`datasetQualityTableDetailsLink-${datasetDetails.name}`}
-        target="_blank"
-      >
-        {children}
-      </EuiLink>
-    </EuiBadge>
+    <EuiButton
+      color="text"
+      iconType="popout"
+      iconSide="right"
+      target="_blank"
+      size="s"
+      role="link"
+      element="a"
+      data-test-subj={`datasetQualityTableDetailsLink-${datasetDetails.name}`}
+      textProps={{
+        css: ButtonStyles,
+      }}
+      {...linkProps}
+    >
+      {errorType}
+    </EuiButton>
   );
 };

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality_details/quality_issue_flyout/failed_docs/filed_info.tsx

@@ -71,6 +71,7 @@ export const FailedFieldInfo = () => {
           <EuiHorizontalRule margin="xs" />
           <EuiBasicTable
             tableLayout="fixed"
+            responsiveBreakpoint={true}
             columns={failedDocsErrorsColumns}
             items={renderedFailedDocsErrorsItems ?? []}
             loading={isFailedDocsErrorsLoading}

x-pack/platform/plugins/shared/dataset_quality/public/hooks/use_redirect_link.ts

@@ -24,13 +24,15 @@ export const useRedirectLink = <T extends BasicDataStream | string>({
   breakdownField,
   sendTelemetry,
   selector,
+  external = false,
 }: {
   dataStreamStat: T;
   query?: Query | AggregateQuery;
   timeRangeConfig: TimeRangeConfig;
   breakdownField?: string;
   sendTelemetry: SendTelemetryFn;
   selector?: DataStreamSelector;
+  external?: boolean;
 }) => {
   const {
     services: { share },
@@ -55,7 +57,8 @@ export const useRedirectLink = <T extends BasicDataStream | string>({
 
     const onClickWithTelemetry = (event: Parameters<RouterLinkProps['onClick']>[0]) => {
       sendTelemetry();
-      if (config.routerLinkProps.onClick) {
+      // If the link is external, we don't want to use router link props handler because it would prevent the default behavior of the event and a new tab wouldn't be opened.
+      if (config.routerLinkProps.onClick && !external) {
         config.routerLinkProps.onClick(event);
       }
     };
@@ -82,6 +85,7 @@ export const useRedirectLink = <T extends BasicDataStream | string>({
     breakdownField,
     selector,
     sendTelemetry,
+    external,
   ]);
 };