[Discover] Adapt logs flyout to use the new content framework UI

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/index.ts

@@ -8,3 +8,5 @@
  */
 
 export * from './table';
+export * from './section';
+export * from './chart';

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/section/index.tsx

@@ -7,10 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useState } from 'react';
-import type { IconType } from '@elastic/eui';
+import React, { useEffect, useState } from 'react';
+import type { EuiAccordionProps, IconType } from '@elastic/eui';
 import {
   EuiAccordion,
+  EuiBetaBadge,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiFlexGroup,
@@ -40,6 +41,9 @@ export interface ContentFrameworkSectionProps {
   actions?: Action[];
   children: React.ReactNode;
   'data-test-subj'?: string;
+  onToggle?: (isOpen: boolean) => void;
+  forceState?: EuiAccordionProps['forceState'];
+  isTechPreview?: boolean;
 }
 
 export function ContentFrameworkSection({
@@ -48,9 +52,15 @@ export function ContentFrameworkSection({
   description,
   actions,
   children,
+  onToggle,
+  forceState = 'open',
   'data-test-subj': accordionDataTestSubj,
+  isTechPreview = false,
 }: ContentFrameworkSectionProps) {
-  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(
+    forceState ? forceState === 'open' : true
+  );
+
   const renderActions = () => (
     <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center">
       {actions?.map((action, idx) => {
@@ -84,38 +94,63 @@ export function ContentFrameworkSection({
     </EuiFlexGroup>
   );
 
+  useEffect(() => {
+    if (forceState !== undefined) {
+      setIsAccordionExpanded(forceState === 'open');
+    }
+  }, [forceState]);
+
+  const handleToggle = (isOpen: boolean) => {
+    setIsAccordionExpanded(isOpen);
+    if (onToggle) {
+      onToggle(isOpen);
+    }
+  };
+
   return (
     <>
       <EuiAccordion
         data-test-subj={accordionDataTestSubj}
         id={`sectionAccordion-${id}`}
-        initialIsOpen
-        onToggle={setIsAccordionExpanded}
+        initialIsOpen={forceState !== 'closed'}
+        onToggle={handleToggle}
+        forceState={isAccordionExpanded ? 'open' : 'closed'}
         buttonContent={
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>
               <EuiTitle size="xs">
                 <h3>{title}</h3>
               </EuiTitle>
             </EuiFlexItem>
-            {description && (
+            {description ? (
               <EuiFlexItem grow={false}>
-                <EuiIconTip
-                  content={description}
-                  size="s"
-                  color="subdued"
-                  aria-label={description}
-                />
+                {isTechPreview ? (
+                  <EuiBetaBadge
+                    size="s"
+                    label={description}
+                    alignment="middle"
+                    color="hollow"
+                    iconType="beaker"
+                    title={title}
+                  />
+                ) : (
+                  <EuiIconTip
+                    content={description}
+                    size="s"
+                    color="subdued"
+                    aria-label={description}
+                  />
+                )}
               </EuiFlexItem>
-            )}
+            ) : null}
           </EuiFlexGroup>
         }
         extraAction={
-          actions?.length ? (
+          actions?.length && (
             <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>{renderActions()}</EuiFlexItem>
             </EuiFlexGroup>
-          ) : null
+          )
         }
       >
         <>

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/section/section.test.tsx

@@ -11,6 +11,7 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import type { ContentFrameworkSectionProps } from '.';
 import { ContentFrameworkSection } from '.';
+import userEvent from '@testing-library/user-event';
 
 const defaultProps: ContentFrameworkSectionProps = {
   title: 'Test Section',
@@ -32,6 +33,7 @@ const defaultProps: ContentFrameworkSectionProps = {
   ],
   children: <div>Section children</div>,
   id: 'testSection',
+  'data-test-subj': 'testSection',
 };
 
 describe('ContentFrameworkSection', () => {
@@ -84,4 +86,12 @@ describe('ContentFrameworkSection', () => {
       screen.queryByTestId('unifiedDocViewerSectionActionButton-fullScreen')
     ).not.toBeInTheDocument();
   });
+
+  it('calls onToggle when the accordion is toggled', async () => {
+    const onToggle = jest.fn();
+    render(<ContentFrameworkSection {...defaultProps} onToggle={onToggle} forceState="open" />);
+    const toggleBtn = screen.getByText('Test Section');
+    await userEvent.click(toggleBtn);
+    expect(onToggle).toHaveBeenCalled();
+  });
 });

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/components/formatted_value.tsx

@@ -12,12 +12,13 @@ import React from 'react';
 
 interface FormattedValueProps {
   value: string;
+  truncate?: boolean;
 }
 
-export function FormattedValue({ value }: FormattedValueProps) {
+export function FormattedValue({ value, truncate }: FormattedValueProps) {
   return (
     <EuiText
-      className="eui-textTruncate"
+      className={truncate ? 'eui-textTruncate' : 'eui-textBreakWord'}
       data-test-subj="ContentFrameworkTableFormattedValue"
       size="xs"
       // Value returned from formatFieldValue is always sanitized

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/components/name_popover_content.test.tsx

@@ -11,6 +11,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NamePopoverContent } from './name_popover_content';
 
+jest.mock('@kbn/field-utils/src/components/field_icon', () => ({
+  FieldIcon: ({}: { type: string; size: string }) => <span data-test-subj="fieldIcon" />,
+}));
+
 describe('NamePopoverContent', () => {
   it('renders the field name', () => {
     render(
@@ -55,4 +59,27 @@ describe('NamePopoverContent', () => {
     );
     expect(screen.getByText('ActionBtn')).toBeInTheDocument();
   });
+
+  it('renders FieldIcon when fieldConfig.type is provided', () => {
+    render(
+      <NamePopoverContent
+        fieldName="myField"
+        fieldConfig={{ name: 'name', value: 'value', type: 'keyword', description: 'desc' }}
+        cellActions={null}
+      />
+    );
+    const icon = screen.getByTestId('fieldIcon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('does not render FieldIcon when fieldConfig.type is not provided', () => {
+    render(
+      <NamePopoverContent
+        fieldName="myField"
+        fieldConfig={{ name: 'name', value: 'value', description: 'desc' }}
+        cellActions={null}
+      />
+    );
+    expect(screen.queryByTestId('fieldIcon')).toBeNull();
+  });
 });

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/components/name_popover_content.tsx

@@ -7,8 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiText, EuiSpacer } from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
+import { FieldIcon } from '@kbn/field-utils/src/components/field_icon';
 import type { TableFieldConfiguration } from '..';
 
 interface NamePopoverContentProps {
@@ -24,13 +25,16 @@ export function NamePopoverContent({
 }: NamePopoverContentProps) {
   return (
     <>
-      <EuiText size="s" className="eui-textTruncate">
-        {fieldName}
-      </EuiText>
+      <EuiFlexGroup alignItems="center" gutterSize="s">
+        {fieldConfig.type && <FieldIcon type={fieldConfig.type} size="s" />}
+        <EuiText size="s" className="eui-textBreakWord">
+          {fieldName}
+        </EuiText>
+      </EuiFlexGroup>
       {fieldConfig?.description && (
         <>
           <EuiSpacer size="s" />
-          <EuiText size="xs" className="eui-textTruncate">
+          <EuiText size="xs" className="eui-textBreakWord">
             {fieldConfig.description}
           </EuiText>
         </>

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/components/value_popover_content.test.tsx

@@ -21,7 +21,7 @@ describe('ValuePopoverContent', () => {
   it('renders the valueCellContent', () => {
     render(
       <ValuePopoverContent
-        fieldConfig={{ ...defaultFieldConfig, valueCellContent: <span>Cell Value</span> }}
+        fieldConfig={{ ...defaultFieldConfig, valueCellContent: () => <span>Cell Value</span> }}
         cellActions={null}
       />
     );
@@ -31,7 +31,7 @@ describe('ValuePopoverContent', () => {
   it('renders cellActions if provided', () => {
     render(
       <ValuePopoverContent
-        fieldConfig={{ ...defaultFieldConfig, valueCellContent: <span>With Action</span> }}
+        fieldConfig={{ ...defaultFieldConfig, valueCellContent: () => <span>With Action</span> }}
         cellActions={<button>ActionBtn</button>}
       />
     );

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/components/value_popover_content.tsx

@@ -33,7 +33,7 @@ export function ValuePopoverContent({ fieldConfig, cellActions }: ValuePopoveCon
             : undefined
         }
       >
-        {fieldConfig?.valueCellContent}
+        {fieldConfig?.valueCellContent ? fieldConfig.valueCellContent({ truncate: false }) : null}
       </EuiText>
       {cellActions}
     </>

src/platform/plugins/shared/unified_doc_viewer/public/components/content_framework/table/index.tsx

@@ -36,7 +36,8 @@ export interface TableFieldConfiguration {
   name: string;
   value: unknown;
   description?: string;
-  valueCellContent?: React.ReactNode;
+  type?: string;
+  valueCellContent?: (params?: { truncate?: boolean }) => React.ReactNode;
 }
 
 export interface ContentFrameworkTableProps
@@ -54,6 +55,7 @@ export interface ContentFrameworkTableProps
   fieldNames: string[];
   fieldConfigurations?: Record<string, FieldConfiguration>;
   id: string;
+  'data-test-subj'?: string;
 }
 
 export function ContentFrameworkTable({
@@ -64,6 +66,7 @@ export function ContentFrameworkTable({
   columns,
   id,
   textBasedHits,
+  'data-test-subj': dataTestSubj,
   filter,
   onAddColumn,
   onRemoveColumn,
@@ -74,7 +77,7 @@ export function ContentFrameworkTable({
     fieldFormats,
   } = getUnifiedDocViewerServices();
   const { fieldsMetadata = {} } = useFieldsMetadata({
-    attributes: ['short'],
+    attributes: ['short', 'type'],
     fieldNames,
   });
 
@@ -108,11 +111,14 @@ export function ContentFrameworkTable({
             name: fieldConfiguration?.title || fieldName,
             value,
             description: fieldDescription,
-            valueCellContent: fieldConfiguration?.formatter ? (
-              <>{fieldConfiguration.formatter(value, formattedValue)}</>
-            ) : (
-              <FormattedValue value={formattedValue} />
-            ),
+            type: fieldsMetadata[fieldName]?.type,
+            valueCellContent: ({ truncate }: { truncate?: boolean } = { truncate: true }) => {
+              return fieldConfiguration?.formatter ? (
+                <>{fieldConfiguration.formatter(value, formattedValue)}</>
+              ) : (
+                <FormattedValue value={formattedValue} truncate={truncate} />
+              );
+            },
           };
 
           acc.rows.push(
@@ -151,18 +157,26 @@ export function ContentFrameworkTable({
 
       if (!fieldConfig) return null;
       if (columnId === 'name') {
+        const rowDataTestSubj = `${dataTestSubj}${fieldConfig.name
+          .replace(/ (\w)/g, (_, c) => c.toUpperCase())
+          .replace(/^\w/, (c) => c.toUpperCase())}`;
+
         return (
           <>
             <EuiSpacer size="s" />
-            <EuiText size="xs" css={{ fontWeight: euiTheme.font.weight.bold }}>
+            <EuiText
+              size="xs"
+              css={{ fontWeight: euiTheme.font.weight.bold }}
+              data-test-subj={rowDataTestSubj}
+            >
               {fieldConfig.name}
             </EuiText>
           </>
         );
       }
-      return fieldConfig.valueCellContent;
+      return fieldConfig.valueCellContent ? fieldConfig.valueCellContent() : null;
     },
-    [rows, fields, euiTheme.font.weight]
+    [rows, fields, dataTestSubj, euiTheme.font.weight.bold]
   );
 
   const cellPopoverRenderer = useCallback(
@@ -198,6 +212,7 @@ export function ContentFrameworkTable({
           height: auto !important;
         }
       `}
+      data-test-subj={dataTestSubj}
     >
       <TableGrid
         data-test-subj="ContentFrameworkTableTableGrid"