[Unified Observability] Add "Technical preview" for alerts section (#127271)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/observability/public/components/app/section/index.test.tsx

@@ -42,4 +42,13 @@ describe('SectionContainer', () => {
       component.getByText('An error happened when trying to fetch data. Please try again')
     ).toBeInTheDocument();
   });
+
+  it('renders section with experimental badge', () => {
+    const component = render(
+      <SectionContainer title="Foo" hasError={false} showExperimentalBadge={true}>
+        <div>I am a very nice component</div>
+      </SectionContainer>
+    );
+    expect(component.getByText('Technical preview')).toBeInTheDocument();
+  });
 });

x-pack/plugins/observability/public/components/app/section/index.tsx

@@ -5,10 +5,19 @@
  * 2.0.
  */
 
-import { EuiAccordion, EuiPanel, EuiSpacer, EuiTitle, EuiButtonEmpty } from '@elastic/eui';
+import {
+  EuiAccordion,
+  EuiPanel,
+  EuiSpacer,
+  EuiTitle,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '@elastic/eui';
 import React from 'react';
 import { ErrorPanel } from './error_panel';
 import { usePluginContext } from '../../../hooks/use_plugin_context';
+import { ExperimentalBadge } from '../../shared/experimental_badge';
 
 interface AppLink {
   label: string;
@@ -20,9 +29,16 @@ interface Props {
   hasError: boolean;
   children: React.ReactNode;
   appLink?: AppLink;
+  showExperimentalBadge?: boolean;
 }
 
-export function SectionContainer({ title, appLink, children, hasError }: Props) {
+export function SectionContainer({
+  title,
+  appLink,
+  children,
+  hasError,
+  showExperimentalBadge = false,
+}: Props) {
   const { core } = usePluginContext();
   return (
     <EuiPanel hasShadow={true} color="subdued">
@@ -31,9 +47,21 @@ export function SectionContainer({ title, appLink, children, hasError }: Props)
         id={title}
         buttonContentClassName="accordion-button"
         buttonContent={
-          <EuiTitle size="xs">
-            <h5>{title}</h5>
-          </EuiTitle>
+          <>
+            <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+              <EuiFlexItem grow={false}>
+                <EuiTitle size="xs">
+                  <h5>{title}</h5>
+                </EuiTitle>
+              </EuiFlexItem>
+
+              {showExperimentalBadge && (
+                <EuiFlexItem grow={false}>
+                  <ExperimentalBadge />
+                </EuiFlexItem>
+              )}
+            </EuiFlexGroup>
+          </>
         }
         extraAction={
           appLink?.href && (

x-pack/plugins/observability/public/pages/overview/old_overview_page.tsx

@@ -137,6 +137,7 @@ export function OverviewPage({ routeParams }: Props) {
                   defaultMessage: 'Alerts',
                 })}
                 hasError={false}
+                showExperimentalBadge={true}
               >
                 <CasesContext
                   owner={[observabilityFeatureId]}