[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)
elastic · Oct 23, 2024 · ab021a5 · ab021a5
1 parent 9656621
commit ab021a5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/...ugins/security_solution/public/entity_analytics/components/entity_store/entities_list.tsx b/...ugins/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
@@ -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}