[Security Solution] expandable flyout - add tooltip to correlations t…

…able cells (#166913)

x-pack/plugins/security_solution/public/flyout/left/components/correlations_details_alerts_table.tsx

@@ -6,14 +6,15 @@
  */
 
 import type { ReactElement, ReactNode } from 'react';
-import React, { type FC, useMemo, useCallback } from 'react';
+import React, { type VFC, useMemo, useCallback } from 'react';
 import { type Criteria, EuiBasicTable, formatDate } from '@elastic/eui';
 import { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
 import type { Filter } from '@kbn/es-query';
 import { isRight } from 'fp-ts/lib/Either';
 import { ALERT_REASON, ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
+import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
 import type { DataProvider } from '../../../../common/types';
 import { SeverityBadge } from '../../../detections/components/rules/severity_badge';
 import { usePaginatedAlerts } from '../hooks/use_paginated_alerts';
@@ -36,7 +37,14 @@ export const columns = [
     ),
     truncateText: true,
     dataType: 'date' as const,
-    render: (value: string) => formatDate(value, TIMESTAMP_DATE_FORMAT),
+    render: (value: string) => {
+      const date = formatDate(value, TIMESTAMP_DATE_FORMAT);
+      return (
+        <CellTooltipWrapper tooltip={date}>
+          <span>{date}</span>
+        </CellTooltipWrapper>
+      );
+    },
   },
   {
     field: ALERT_RULE_NAME,
@@ -47,6 +55,11 @@ export const columns = [
       />
     ),
     truncateText: true,
+    render: (value: string) => (
+      <CellTooltipWrapper tooltip={value}>
+        <span>{value}</span>
+      </CellTooltipWrapper>
+    ),
   },
   {
     field: ALERT_REASON,
@@ -57,6 +70,11 @@ export const columns = [
       />
     ),
     truncateText: true,
+    render: (value: string) => (
+      <CellTooltipWrapper tooltip={value} anchorPosition="left">
+        <span>{value}</span>
+      </CellTooltipWrapper>
+    ),
   },
   {
     field: 'kibana.alert.severity',
@@ -69,7 +87,12 @@ export const columns = [
     truncateText: true,
     render: (value: string) => {
       const decodedSeverity = Severity.decode(value);
-      return isRight(decodedSeverity) ? <SeverityBadge value={decodedSeverity.right} /> : value;
+      const renderValue = isRight(decodedSeverity) ? (
+        <SeverityBadge value={decodedSeverity.right} />
+      ) : (
+        <p>{value}</p>
+      );
+      return <CellTooltipWrapper tooltip={value}>{renderValue}</CellTooltipWrapper>;
     },
   },
 ];
@@ -108,7 +131,7 @@ export interface CorrelationsDetailsAlertsTableProps {
 /**
  * Renders paginated alert array based on the provided alertIds
  */
-export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTableProps> = ({
+export const CorrelationsDetailsAlertsTable: VFC<CorrelationsDetailsAlertsTableProps> = ({
   title,
   loading,
   alertIds,

x-pack/plugins/security_solution/public/flyout/left/components/related_cases.tsx

@@ -10,6 +10,7 @@ import type { EuiBasicTableColumn } from '@elastic/eui';
 import { EuiInMemoryTable, EuiSkeletonText } from '@elastic/eui';
 import type { RelatedCase } from '@kbn/cases-plugin/common';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { CellTooltipWrapper } from '../../shared/components/cell_tooltip_wrapper';
 import { CaseDetailsLink } from '../../../common/components/links';
 import {
   CORRELATIONS_DETAILS_CASES_SECTION_TABLE_TEST_ID,
@@ -29,11 +30,12 @@ const columns: Array<EuiBasicTableColumn<RelatedCase>> = [
         defaultMessage="Name"
       />
     ),
-    truncateText: true,
     render: (value: string, caseData: RelatedCase) => (
-      <CaseDetailsLink detailName={caseData.id} title={caseData.title}>
-        {caseData.title}
-      </CaseDetailsLink>
+      <CellTooltipWrapper tooltip={caseData.title}>
+        <CaseDetailsLink detailName={caseData.id} title={caseData.title}>
+          {caseData.title}
+        </CaseDetailsLink>
+      </CellTooltipWrapper>
     ),
   },
   {
@@ -45,6 +47,7 @@ const columns: Array<EuiBasicTableColumn<RelatedCase>> = [
       />
     ),
     truncateText: true,
+    width: '25%',
   },
 ];
 

x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.test.tsx

@@ -0,0 +1,22 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { CellTooltipWrapper } from './cell_tooltip_wrapper';
+
+const TEST_ID = 'test-id';
+const children = <p data-test-subj={TEST_ID}>{'test content'}</p>;
+
+describe('<CellTooltipWrapper />', () => {
+  it('should render non-expandable panel by default', () => {
+    const { getByTestId } = render(
+      <CellTooltipWrapper tooltip="test tooltip">{children}</CellTooltipWrapper>
+    );
+    expect(getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+});

x-pack/plugins/security_solution/public/flyout/shared/components/cell_tooltip_wrapper.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { VFC, ReactElement } from 'react';
+import React from 'react';
+import { EuiToolTip } from '@elastic/eui';
+
+export interface CellTooltipWrapperProps {
+  /**
+   * Value displayed in the tooltip and in the cell itself
+   */
+  tooltip: string | ReactElement;
+  /**
+   * Tooltip anchor position
+   */
+  anchorPosition?: 'left' | 'right' | 'top' | 'bottom';
+  /**
+   * React components to render
+   */
+  children: React.ReactElement;
+}
+
+export const CellTooltipWrapper: VFC<CellTooltipWrapperProps> = ({
+  tooltip,
+  anchorPosition = 'top',
+  children,
+}) => (
+  <EuiToolTip content={tooltip} position={anchorPosition}>
+    {children}
+  </EuiToolTip>
+);