[8.x] [A11y][APM] Use nameTooltip api for dependencies tables (#215940)

x-pack/solutions/observability/plugins/apm/public/components/app/dependency_detail_operations/dependency_detail_operations_list/index.tsx

@@ -18,8 +18,7 @@ import { useTimeRange } from '../../../../hooks/use_time_range';
 import type { SpanMetricGroup } from '../../../shared/dependencies_table/get_span_metric_columns';
 import { getSpanMetricColumns } from '../../../shared/dependencies_table/get_span_metric_columns';
 import { EmptyMessage } from '../../../shared/empty_message';
-import type { ITableColumn } from '../../../shared/managed_table';
-import { ManagedTable } from '../../../shared/managed_table';
+import { type ITableColumn, ManagedTable } from '../../../shared/managed_table';
 import { getComparisonEnabled } from '../../../shared/time_comparison/get_comparison_enabled';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { DependencyOperationDetailLink } from '../../dependency_operation_detail_view/dependency_operation_detail_link';

x-pack/solutions/observability/plugins/apm/public/components/shared/dependencies_table/get_span_metric_columns.tsx

@@ -5,11 +5,10 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, RIGHT_ALIGNMENT } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, RIGHT_ALIGNMENT } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ChartType, getTimeSeriesColor } from '../charts/helper/get_timeseries_color';
 import { ListMetric } from '../list_metric';
-import type { ITableColumn } from '../managed_table';
 import type { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { isPending } from '../../../hooks/use_fetcher';
 import {
@@ -20,6 +19,7 @@ import {
 import type { Coordinate } from '../../../../typings/timeseries';
 import { ImpactBar } from '../impact_bar';
 import { isFiniteNumber } from '../../../../common/utils/is_finite_number';
+import type { ITableColumn } from '../managed_table';
 
 export interface SpanMetricGroup {
   latency: number | null;
@@ -107,24 +107,15 @@ export function getSpanMetricColumns({
     },
     {
       field: 'failureRate',
-      name: (
-        <>
-          {i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', {
-            defaultMessage: 'Failed transaction rate',
-          })}
-          &nbsp;
-          <EuiIconTip
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            content={i18n.translate('xpack.apm.dependenciesTable.columnErrorRateTip', {
-              defaultMessage:
-                "The percentage of failed transactions for the selected service. HTTP server transactions with a 4xx status code (client error) aren't considered failures because the caller, not the server, caused the failure.",
-            })}
-            className="eui-alignCenter"
-          />
-        </>
-      ),
+      name: i18n.translate('xpack.apm.dependenciesTable.columnErrorRate', {
+        defaultMessage: 'Failed transaction rate',
+      }),
+      nameTooltip: {
+        content: i18n.translate('xpack.apm.dependenciesTable.columnErrorRateTip', {
+          defaultMessage:
+            "The percentage of failed transactions for the selected service. HTTP server transactions with a 4xx status code (client error) aren't considered failures because the caller, not the server, caused the failure.",
+        }),
+      },
       align: RIGHT_ALIGNMENT,
       render: (_, { failureRate, currentStats, previousStats }) => {
         const { currentPeriodColor, previousPeriodColor } = getTimeSeriesColor(
@@ -148,24 +139,15 @@ export function getSpanMetricColumns({
     },
     {
       field: 'impact',
-      name: (
-        <>
-          {i18n.translate('xpack.apm.dependenciesTable.columnImpact', {
-            defaultMessage: 'Impact',
-          })}
-          &nbsp;
-          <EuiIconTip
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignCenter"
-            content={i18n.translate('xpack.apm.dependenciesTable.columnImpactTip', {
-              defaultMessage:
-                'The most used and slowest endpoints in your service. Calculated by multiplying latency by throughput.',
-            })}
-          />
-        </>
-      ),
+      name: i18n.translate('xpack.apm.dependenciesTable.columnImpact', {
+        defaultMessage: 'Impact',
+      }),
+      nameTooltip: {
+        content: i18n.translate('xpack.apm.dependenciesTable.columnImpactTip', {
+          defaultMessage:
+            'The most used and slowest endpoints in your service. Calculated by multiplying latency by throughput.',
+        }),
+      },
       align: RIGHT_ALIGNMENT,
       render: (_, { impact, previousStats }) => {
         return (

x-pack/solutions/observability/plugins/apm/public/components/shared/dependencies_table/index.tsx

@@ -12,8 +12,7 @@ import type { ConnectionStatsItemWithComparisonData } from '../../../../common/c
 import { useBreakpoints } from '../../../hooks/use_breakpoints';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { EmptyMessage } from '../empty_message';
-import type { ITableColumn } from '../managed_table';
-import { ManagedTable } from '../managed_table';
+import { type ITableColumn, ManagedTable } from '../managed_table';
 import { OverviewTableContainer } from '../overview_table_container';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
 import type { SpanMetricGroup } from './get_span_metric_columns';

x-pack/solutions/observability/plugins/apm/public/components/shared/managed_table/index.tsx

@@ -36,6 +36,7 @@ export interface ITableColumn<T extends object> {
   width?: string;
   sortable?: boolean;
   truncateText?: boolean;
+  nameTooltip?: EuiBasicTableColumn<T>['nameTooltip'];
   render?: (value: any, item: T) => unknown;
 }