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

Closes #239139

## Summary
Fixes a couple of issues with the link to discover in the error type
column of data quality issues. Namely:

### Anchor tag being truncated out
The error type component was previously made of a composition of
EuiBadge and EuiLink. This meant that the anchor tag was scoped only on
the external link icon inside the badge, which depending on the length
of the error description as well as screen size, could have the icon
truncated out making users unable to make use of the direct link to
discover.

This PR updates the component to use a single EuiButton instead, which
is being supplied an href value and being rendered as an anchor. This
provides the following advantages:
- The whole button is now an anchor tag. This make the clickable surface
area of the link bigger, which can provide better UX given that the icon
could be somewhat small previously
- Even if the contents of the button get truncated, the link itself will
always be accesible given that it's the button as a whole that acts as
an anchor tag
- Instead of relaying on a component in the contents of the button to
render the external link icon, it is now being rendered via button
props. This ensures that, even when the content of the button is
truncated, the icon remains visible keeping users aware that they're
about to click a link that will open in a new tab

### External link handling
The way `useRedirectLink` was decorating onClick events was preventing
external links to work properly. The event propagation chain was being
stopped (`event.preventDefault`), which for regular links is required in
order to prevent the page reload that browsers do by default on link
redirections as we're in a SPA. But, for external links, we do want the
anchor tag to handle the event so that a new tab can be opened.

A simple fix would be to remove the onClick handler from the link
completely. Sadly, that couldn't be done because the link click has a
telemetry event linked to it which we're sending via the onClick
handler. So, the solution proposed in this PR adds an extra new
parameter `external` to the hook. The way this parameter work is:
- If false, the hook works as before and the prevent default will be
added as always
- If true, the onClick event will add the telemetry event but it will
avoid modifying the propagation chain. This allows external link
behaviour to work as expected while keeping the telemetry as it was

## UI
The UI changed slightly because we're now using a button. Everything
looks mostly the same but the error type "badge" now as an onHover
background color



https://github.com/user-attachments/assets/44a4daa3-df4e-4cea-b1b4-20271eb0cdd5

Author: AlejandroFrndz

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,
   ]);
 };