[One Discover] [Logs UX] Show full title tooltips on resources badges and only truncate titles in summary column (#241557)

- Make the truncation configurable so that resource badges are rendered
without truncation when rendered as individual columns (for Summary
column, they'll truncate).
- Show the hover tooltip with full titles, always.

Before


https://github.com/user-attachments/assets/1d296649-9967-4be8-b2e3-fcc738e46244

After


https://github.com/user-attachments/assets/ebca3b16-9cc1-4f71-b9a2-b02902fd1ac9

Co-authored-by: Elastic Machine <[email protected]>

Author: awahab07

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx

@@ -38,7 +38,7 @@ import {
   filterOutText,
   openCellActionPopoverAriaText,
 } from './translations';
-import { truncateAndPreserveHighlightTags } from './utils';
+import { truncateAndPreserveHighlightTags, extractTextAndMarkTags } from './utils';
 
 interface CellActionsPopoverProps {
   onFilter?: DocViewFilterFn;
@@ -178,6 +178,7 @@ export interface FieldBadgeWithActionsProps
   > {
   icon?: EuiBadgeProps['iconType'];
   color?: string;
+  truncateTitle?: boolean;
 }
 
 interface FieldBadgeWithActionsDependencies {
@@ -197,9 +198,13 @@ export function FieldBadgeWithActions({
   value,
   rawValue,
   color = 'hollow',
+  truncateTitle = false,
 }: FieldBadgeWithActionsPropsAndDependencies) {
   const MAX_LENGTH = 20;
 
+  const displayValue = truncateTitle ? truncateAndPreserveHighlightTags(value, MAX_LENGTH) : value;
+  const titleText = extractTextAndMarkTags(value).cleanText;
+
   return (
     <CellActionsPopover
       onFilter={onFilter}
@@ -209,11 +214,17 @@ export function FieldBadgeWithActions({
       rawValue={rawValue}
       renderValue={renderValue}
       renderPopoverTrigger={({ popoverTriggerProps }) => (
-        <EuiBadge {...popoverTriggerProps} color={color} iconType={icon} iconSide="left">
+        <EuiBadge
+          {...popoverTriggerProps}
+          color={color}
+          iconType={icon}
+          iconSide="left"
+          title={titleText}
+        >
           <span
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: truncateAndPreserveHighlightTags(value, MAX_LENGTH),
+              __html: displayValue,
             }}
           />
         </EuiBadge>

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/resource.tsx

@@ -38,6 +38,7 @@ export const Resource = ({ fields, limited = false, onFilter, ...props }: Resour
           value={value}
           icon={Icon}
           onFilter={onFilter}
+          truncateTitle={true}
         />
       ))}
       {extraFieldsCount > 0 && (

src/platform/packages/shared/kbn-discover-contextual-components/src/data_types/logs/components/utils/truncate_preserve_highlight_tags.ts

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-function extractTextAndMarkTags(html: string) {
+export function extractTextAndMarkTags(html: string) {
   const markTags: string[] = [];
   const cleanText = html.replace(/<\/?mark[^>]*>/g, (match) => {
     markTags.push(match);