[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/lazy_content_framework_section.tsx

@@ -0,0 +1,18 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { withSuspense } from '@kbn/shared-ux-utility';
+import type { ContentFrameworkSectionProps } from './section/section';
+
+const LazyContentFrameworkSection = React.lazy(() => import('./section'));
+export const ContentFrameworkSection = withSuspense<ContentFrameworkSectionProps>(
+  LazyContentFrameworkSection,
+  <></>
+);

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

@@ -7,127 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useState } from 'react';
-import type { IconType } from '@elastic/eui';
-import {
-  EuiAccordion,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiIconTip,
-  EuiPanel,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
+import { ContentFrameworkSection } from './section';
 
-interface BaseAction {
-  icon: IconType;
-  ariaLabel: string;
-  dataTestSubj?: string;
-  label?: string;
-}
-
-type Action =
-  | (BaseAction & { onClick: () => void; href?: never })
-  | (BaseAction & { href: string; onClick?: never });
-
-export interface ContentFrameworkSectionProps {
-  id: string;
-  title: string;
-  description?: string;
-  actions?: Action[];
-  children: React.ReactNode;
-  'data-test-subj'?: string;
-  initialIsOpen?: boolean;
-}
-
-export function ContentFrameworkSection({
-  id,
-  title,
-  description,
-  actions,
-  children,
-  'data-test-subj': accordionDataTestSubj,
-  initialIsOpen = true,
-}: ContentFrameworkSectionProps) {
-  const [isAccordionExpanded, setIsAccordionExpanded] = useState(initialIsOpen);
-  const renderActions = () => (
-    <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center">
-      {actions?.map((action, idx) => {
-        const { icon, onClick, ariaLabel, label, dataTestSubj, href } = action;
-        const size = 'xs';
-        const buttonProps = onClick ? { onClick } : { href };
-        return (
-          <EuiFlexItem grow={false} key={idx}>
-            {label ? (
-              <EuiButtonEmpty
-                size={size}
-                iconType={icon}
-                aria-label={ariaLabel}
-                data-test-subj={dataTestSubj}
-                {...buttonProps}
-              >
-                {label}
-              </EuiButtonEmpty>
-            ) : (
-              <EuiButtonIcon
-                size={size}
-                iconType={icon}
-                aria-label={ariaLabel}
-                data-test-subj={dataTestSubj}
-                {...buttonProps}
-              />
-            )}
-          </EuiFlexItem>
-        );
-      })}
-    </EuiFlexGroup>
-  );
-
-  return (
-    <>
-      <EuiAccordion
-        data-test-subj={accordionDataTestSubj}
-        id={`sectionAccordion-${id}`}
-        initialIsOpen={isAccordionExpanded}
-        onToggle={setIsAccordionExpanded}
-        buttonContent={
-          <EuiFlexGroup alignItems="center" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="xs">
-                <h3>{title}</h3>
-              </EuiTitle>
-            </EuiFlexItem>
-            {description && (
-              <EuiFlexItem grow={false}>
-                <EuiIconTip
-                  content={description}
-                  size="s"
-                  color="subdued"
-                  aria-label={description}
-                />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        }
-        extraAction={
-          actions?.length ? (
-            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-              <EuiFlexItem grow={false}>{renderActions()}</EuiFlexItem>
-            </EuiFlexGroup>
-          ) : null
-        }
-      >
-        <>
-          <EuiSpacer size="s" />
-          <EuiPanel hasBorder={true} hasShadow={false} paddingSize="s">
-            {children}
-          </EuiPanel>
-        </>
-      </EuiAccordion>
-      {!isAccordionExpanded ? <EuiHorizontalRule margin="xs" /> : <EuiSpacer size="m" />}
-    </>
-  );
-}
+// Required for usage in React.lazy
+// eslint-disable-next-line import/no-default-export
+export default ContentFrameworkSection;

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

@@ -10,8 +10,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import type { UnifiedDocViewerStorybookArgs } from '../../../../.storybook/preview';
-import { ContentFrameworkSection, type ContentFrameworkSectionProps } from '.';
 import APMSpanFixture from '../../../__fixtures__/span_apm_minimal.json';
+import ContentFrameworkSection from '.';
+import type { ContentFrameworkSectionProps } from './section';
 
 type Args = UnifiedDocViewerStorybookArgs<ContentFrameworkSectionProps>;
 const meta = {

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

@@ -9,8 +9,8 @@
 
 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';
+import { ContentFrameworkSection, type ContentFrameworkSectionProps } from './section';
 
 const defaultProps: ContentFrameworkSectionProps = {
   title: 'Test Section',
@@ -32,6 +32,7 @@ const defaultProps: ContentFrameworkSectionProps = {
   ],
   children: <div>Section children</div>,
   id: 'testSection',
+  'data-test-subj': 'testSection',
 };
 
 describe('ContentFrameworkSection', () => {
@@ -40,13 +41,20 @@ describe('ContentFrameworkSection', () => {
     expect(screen.getByText('Test Section')).toBeInTheDocument();
   });
 
+  it('renders EuiBetaBadge when isTechPreview is true', () => {
+    const props = { ...defaultProps, isTechPreview: true };
+    render(<ContentFrameworkSection {...props} />);
+    expect(screen.getByTestId('ContentFrameworkSectionEuiBetaBadge')).toBeInTheDocument();
+  });
+
   it('renders the description as EuiIconTip', () => {
     render(<ContentFrameworkSection {...defaultProps} />);
     expect(screen.getByText('Section description')).toBeInTheDocument();
   });
 
   it('renders actions as buttons', () => {
     render(<ContentFrameworkSection {...defaultProps} />);
+
     expect(screen.getByTestId('unifiedDocViewerSectionActionButton-expand')).toBeInTheDocument();
     expect(
       screen.getByTestId('unifiedDocViewerSectionActionButton-fullScreen')
@@ -84,4 +92,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/section/section.tsx

@@ -0,0 +1,165 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useEffect, useState } from 'react';
+import type { EuiAccordionProps, IconType } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiBetaBadge,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIconTip,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+} from '@elastic/eui';
+
+interface BaseAction {
+  icon: IconType;
+  ariaLabel: string;
+  dataTestSubj?: string;
+  label?: string;
+}
+
+type Action =
+  | (BaseAction & { onClick: () => void; href?: never })
+  | (BaseAction & { href: string; onClick?: never });
+
+export interface ContentFrameworkSectionProps {
+  id: string;
+  title: string;
+  description?: string;
+  actions?: Action[];
+  children: React.ReactNode;
+  'data-test-subj'?: string;
+  onToggle?: (isOpen: boolean) => void;
+  forceState?: EuiAccordionProps['forceState'];
+  isTechPreview?: boolean;
+  hasBorder?: boolean;
+  hasPadding?: boolean;
+}
+
+export function ContentFrameworkSection({
+  id,
+  title,
+  description,
+  actions,
+  children,
+  onToggle,
+  forceState = 'open',
+  'data-test-subj': accordionDataTestSubj,
+  isTechPreview = false,
+  hasBorder = true,
+  hasPadding = true,
+}: ContentFrameworkSectionProps) {
+  const [accordionState, setAccordionState] = useState<EuiAccordionProps['forceState']>(forceState);
+
+  const renderActions = () => (
+    <EuiFlexGroup gutterSize="s" justifyContent="flexEnd" alignItems="center">
+      {actions?.map((action, idx) => {
+        const { icon, onClick, ariaLabel, label, dataTestSubj, href } = action;
+        const size = 'xs';
+        const buttonProps = onClick ? { onClick } : { href };
+        return (
+          <EuiFlexItem grow={false} key={idx}>
+            {label ? (
+              <EuiButtonEmpty
+                size={size}
+                iconType={icon}
+                aria-label={ariaLabel}
+                data-test-subj={dataTestSubj}
+                {...buttonProps}
+              >
+                {label}
+              </EuiButtonEmpty>
+            ) : (
+              <EuiButtonIcon
+                size={size}
+                iconType={icon}
+                aria-label={ariaLabel}
+                data-test-subj={dataTestSubj}
+                {...buttonProps}
+              />
+            )}
+          </EuiFlexItem>
+        );
+      })}
+    </EuiFlexGroup>
+  );
+
+  useEffect(() => {
+    setAccordionState(forceState);
+  }, [forceState]);
+
+  const handleToggle = (isOpen: boolean) => {
+    setAccordionState(isOpen ? 'open' : 'closed');
+    onToggle?.(isOpen);
+  };
+
+  return (
+    <>
+      <EuiAccordion
+        data-test-subj={accordionDataTestSubj}
+        id={`sectionAccordion-${id}`}
+        initialIsOpen={forceState === 'open'}
+        onToggle={handleToggle}
+        forceState={accordionState}
+        buttonContent={
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="xs">
+                <h3>{title}</h3>
+              </EuiTitle>
+            </EuiFlexItem>
+            {description ? (
+              <EuiFlexItem grow={false}>
+                {isTechPreview ? (
+                  <EuiBetaBadge
+                    size="s"
+                    label={description}
+                    alignment="middle"
+                    color="hollow"
+                    iconType="beaker"
+                    title={title}
+                    data-test-subj="ContentFrameworkSectionEuiBetaBadge"
+                  />
+                ) : (
+                  <EuiIconTip
+                    content={description}
+                    size="s"
+                    color="subdued"
+                    aria-label={description}
+                  />
+                )}
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+        }
+        extraAction={
+          actions?.length && (
+            <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+              <EuiFlexItem grow={false}>{renderActions()}</EuiFlexItem>
+            </EuiFlexGroup>
+          )
+        }
+      >
+        <>
+          <EuiSpacer size="s" />
+          <EuiPanel hasBorder={hasBorder} hasShadow={false} paddingSize={hasPadding ? 's' : 'none'}>
+            {children}
+          </EuiPanel>
+        </>
+      </EuiAccordion>
+      {accordionState === 'closed' ? <EuiHorizontalRule margin="xs" /> : <EuiSpacer size="m" />}
+    </>
+  );
+}