From ab021a52668203d19fb2651fcada0720da9c5120 Mon Sep 17 00:00:00 2001
From: Pablo Machado <pablo.nevesmachado@elastic.co>
Date: Wed, 23 Oct 2024 16:52:16 +0200
Subject: [PATCH] [SecuritySolution] Add tooltip to entities table (#197430)

## Summary

Add a tooltip to the entities table.

![Screenshot 2024-10-23 at 14 58
52](https://github.com/user-attachments/assets/4766e3bd-9e88-4c9a-9d8f-653c56de6fdd)
---
 .../components/entity_store/entities_list.tsx | 26 ++++++++++---------
 .../components/paginated_table/index.tsx      |  4 +++
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/entities_list.tsx b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/entities_list.tsx
index fc821bead61f0..1b7c77ceda123 100644
--- a/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/entities_list.tsx
+++ b/x-pack/plugins/security_solution/public/entity_analytics/components/entity_store/entities_list.tsx
@@ -6,9 +6,8 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
+import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { noop } from 'lodash/fp';
-import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { useErrorToast } from '../../../common/hooks/use_error_toast';
 import type { CriticalityLevels } from '../../../../common/constants';
@@ -116,16 +115,19 @@ export const EntitiesList: React.FC = () => {
       activePage={(data?.page ?? 1) - 1}
       columns={columns}
       headerCount={data?.total ?? 0}
-      headerTitle={
-        <EuiTitle size="s">
-          <h2>
-            <FormattedMessage
-              id="xpack.securitySolution.entityAnalytics.entityStore.entitiesList.tableTitle"
-              defaultMessage="Entities"
-            />
-          </h2>
-        </EuiTitle>
-      }
+      titleSize="s"
+      headerTitle={i18n.translate(
+        'xpack.securitySolution.entityAnalytics.entityStore.entitiesList.tableTitle',
+        {
+          defaultMessage: 'Entities',
+        }
+      )}
+      headerTooltip={i18n.translate(
+        'xpack.securitySolution.entityAnalytics.entityStore.entitiesList.tableTooltip',
+        {
+          defaultMessage: 'Entity data can take a couple of minutes to appear',
+        }
+      )}
       limit={limit}
       loading={isLoading || isRefetching}
       isInspect={false}
diff --git a/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx b/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
index 82cde8a24f153..7fe4f0c0110b0 100644
--- a/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
@@ -9,6 +9,7 @@ import type {
   EuiBasicTableProps,
   EuiGlobalToastListToast as Toast,
   EuiTableRowCellProps,
+  EuiTitleSize,
 } from '@elastic/eui';
 import {
   EuiBasicTable,
@@ -107,6 +108,7 @@ export interface BasicTableProps<T> {
   dataTestSubj?: string;
   headerCount: number;
   headerFilters?: string | React.ReactNode;
+  titleSize?: EuiTitleSize;
   headerSupplement?: React.ReactElement;
   headerTitle: string | React.ReactElement;
   headerTooltip?: string;
@@ -148,6 +150,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
   dataTestSubj = DEFAULT_DATA_TEST_SUBJ,
   headerCount,
   headerFilters,
+  titleSize,
   headerSupplement,
   headerTitle,
   headerTooltip,
@@ -277,6 +280,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
     <InspectButtonContainer show={!loadingInitial}>
       <Panel data-test-subj={`${dataTestSubj}-loading-${loading}`} loading={loading}>
         <HeaderSection
+          titleSize={titleSize}
           toggleStatus={toggleStatus}
           toggleQuery={toggleQuery}
           headerFilters={headerFilters}