[Observability Onboarding] Add customizable header for quickstart flows

x-pack/plugins/observability_solution/observability_onboarding/public/application/header/custom_header.test.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Wrapper } from '../shared/test_wrapper';
+import { CustomHeader } from './custom_header';
+
+describe('CustomHeaderSection', () => {
+  it('should render the section for logo text', () => {
+    const { getByText } = render(
+      <CustomHeader
+        logo="kubernetes"
+        headlineCopy="Setting up Kubernetes with Elastic Agent"
+        captionCopy="This installation is tailored for configuring and collecting metrics and logs by deploying a new Elastic Agent within your host"
+      />,
+      {
+        wrapper: Wrapper({ location: '/kubernetes' }),
+      }
+    );
+    expect(getByText('Return')).toBeInTheDocument();
+    expect(getByText('Setting up Kubernetes with Elastic Agent')).toBeInTheDocument();
+    expect(
+      getByText(
+        'This installation is tailored for configuring and collecting metrics and logs by deploying a new Elastic Agent within your host'
+      )
+    );
+  });
+
+  it('should render the section for euiIconType text', () => {
+    const { getByText, container } = render(
+      <CustomHeader
+        euiIconType="consoleApp"
+        headlineCopy="Auto-detect logs and metrics"
+        captionCopy="This installation scans your host and auto-detects log and metric files."
+      />,
+      {
+        wrapper: Wrapper({ location: '/auto-detect?category=infra' }),
+      }
+    );
+
+    container.querySelector('[data-euiicon-type="consoleApp"]');
+
+    expect(getByText('Return')).toBeInTheDocument();
+    expect(getByText('Auto-detect logs and metrics')).toBeInTheDocument();
+    expect(getByText('This installation scans your host and auto-detects log and metric files.'));
+  });
+});

x-pack/plugins/observability_solution/observability_onboarding/public/application/header/custom_header.tsx

@@ -0,0 +1,86 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageTemplate,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+  useEuiShadow,
+  useEuiTheme,
+} from '@elastic/eui';
+import type { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
+import React from 'react';
+import { BackButton } from '../shared/back_button';
+import { LogoIcon } from '../shared/logo_icon';
+import type { SupportedLogo } from '../shared/logo_icon';
+
+interface Props {
+  logo?: SupportedLogo;
+  euiIconType?: EuiIconType;
+  headlineCopy: string;
+  captionCopy: string;
+}
+
+export function CustomHeader({ euiIconType, logo, headlineCopy, captionCopy }: Props) {
+  const theme = useEuiTheme();
+  const shadow = useEuiShadow('s');
+  return (
+    <EuiPageTemplate.Section
+      css={css`
+        border-bottom: ${theme.euiTheme.border.thin};
+      `}
+      grow={false}
+      paddingSize="l"
+      restrictWidth
+    >
+      <BackButton>
+        {i18n.translate(
+          'xpack.observability_onboarding.experimentalOnboardingFlow.button.returnButtonLabel',
+          {
+            defaultMessage: 'Return',
+          }
+        )}
+      </BackButton>
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          <div
+            css={css`
+              border-radius: ${theme.euiTheme.border.radius.medium};
+              ${shadow}
+            `}
+          >
+            <LogoIcon
+              euiIconType={euiIconType}
+              isAvatar={!!euiIconType}
+              logo={logo}
+              size="xxl"
+              css={css`
+                margin: 12px;
+                width: 56px;
+                height: 56px;
+              `}
+            />
+          </div>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiTitle size="l">
+            <h1>{headlineCopy}</h1>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="m">
+            <p>{captionCopy}</p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPageTemplate.Section>
+  );
+}

x-pack/plugins/observability_solution/observability_onboarding/public/application/header/header.tsx

@@ -4,35 +4,55 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { i18n } from '@kbn/i18n';
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import {
+  EuiPageTemplate,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
 import React from 'react';
+import backgroundImageUrl from './background.svg';
 
-export const Header = () => {
+export function Header() {
   return (
-    <EuiFlexGroup>
-      <EuiFlexItem>
-        <EuiTitle size="l" data-test-subj="obltOnboardingHomeTitle">
-          <h1>
-            {i18n.translate(
-              'xpack.observability_onboarding.experimentalOnboardingFlow.addObservabilityDataTitleLabel',
-              { defaultMessage: 'Add Observability data' }
-            )}
-          </h1>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiText color="subdued">
-          {i18n.translate(
-            'xpack.observability_onboarding.experimentalOnboardingFlow.startIngestingDataIntoTextLabel',
-            {
-              defaultMessage:
-                'Start ingesting Observability data into Elastic. Return to this page at any time by clicking Add data.',
-            }
-          )}
-        </EuiText>
-      </EuiFlexItem>
-      <EuiFlexItem />
-    </EuiFlexGroup>
+    <EuiPageTemplate.Section
+      paddingSize="xl"
+      css={css`
+        & > div {
+          background-image: url(${backgroundImageUrl});
+          background-position: right center;
+          background-repeat: no-repeat;
+        }
+      `}
+      grow={false}
+      restrictWidth
+    >
+      <EuiSpacer size="xl" />
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="l" data-test-subj="obltOnboardingHomeTitle">
+            <h1>
+              <FormattedMessage
+                id="xpack.observability_onboarding.experimentalOnboardingFlow.addObservabilityDataTitleLabel"
+                defaultMessage="Add Observability data"
+              />
+            </h1>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.observability_onboarding.experimentalOnboardingFlow.startIngestingDataIntoTextLabel"
+              defaultMessage="Start ingesting Observability data into Elastic. Return to this page at any time by clicking Add data."
+            />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem />
+      </EuiFlexGroup>
+    </EuiPageTemplate.Section>
   );
-};
+}

x-pack/plugins/observability_solution/observability_onboarding/public/application/header/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { CustomHeader } from './custom_header';
+export { Header } from './header';

x-pack/plugins/observability_solution/observability_onboarding/public/application/observability_onboarding_flow.tsx

@@ -9,18 +9,14 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { useEffect } from 'react';
 import { Route, Routes } from '@kbn/shared-ux-router';
 import { useLocation } from 'react-router-dom-v5-compat';
-import { EuiPageTemplate, EuiPanel, EuiSpacer } from '@elastic/eui';
-import { css } from '@emotion/react';
-import backgroundImageUrl from './header/background.svg';
-import { Footer } from './footer/footer';
-import { OnboardingFlowForm } from './onboarding_flow_form/onboarding_flow_form';
-import { Header } from './header/header';
-import { SystemLogsPanel } from './quickstart_flows/system_logs';
-import { CustomLogsPanel } from './quickstart_flows/custom_logs';
-import { OtelLogsPanel } from './quickstart_flows/otel_logs';
-import { AutoDetectPanel } from './quickstart_flows/auto_detect';
-import { KubernetesPanel } from './quickstart_flows/kubernetes';
-import { BackButton } from './shared/back_button';
+import {
+  AutoDetectPage,
+  CustomLogsPage,
+  KubernetesPage,
+  LandingPage,
+  OtelLogsPage,
+  SystemLogsPage,
+} from './pages';
 
 const queryClient = new QueryClient();
 
@@ -33,74 +29,26 @@ export function ObservabilityOnboardingFlow() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <EuiPageTemplate
-        css={css`
-          padding-top: 0px !important;
-        `}
-      >
-        <EuiPageTemplate.Section
-          paddingSize="xl"
-          css={css`
-            & > div {
-              background-image: url(${backgroundImageUrl});
-              background-position: right center;
-              background-repeat: no-repeat;
-            }
-          `}
-          grow={false}
-          restrictWidth
-        >
-          <EuiSpacer size="xl" />
-          <Header />
-        </EuiPageTemplate.Section>
-        <EuiPageTemplate.Section paddingSize="xl" color="subdued" restrictWidth>
-          <Routes>
-            <Route path="/auto-detect">
-              <BackButton />
-              <AutoDetectPanel />
-            </Route>
-            <Route path="/systemLogs">
-              <BackButton />
-              <SystemLogsPanel />
-            </Route>
-            <Route path="/customLogs">
-              <BackButton />
-              <CustomLogsPanel />
-            </Route>
-            <Route path="/kubernetes">
-              <BackButton />
-              <KubernetesPanel />
-            </Route>
-            <Route path="/otel-logs">
-              <BackButton />
-              <OtelLogsPanel />
-            </Route>
-            <Route>
-              <OnboardingFlowForm />
-            </Route>
-          </Routes>
-          <EuiSpacer size="xl" />
-        </EuiPageTemplate.Section>
-        <EuiPageTemplate.Section
-          contentProps={{ css: { paddingBlock: 0 } }}
-          css={css`
-            padding-inline: 0px;
-          `}
-        >
-          <EuiPanel
-            hasBorder
-            css={css`
-              border-radius: 0px;
-              border-left: none;
-              border-bottom: none;
-              border-right: none;
-            `}
-          >
-            <Footer />
-            <EuiSpacer size="xl" />
-          </EuiPanel>
-        </EuiPageTemplate.Section>
-      </EuiPageTemplate>
+      <Routes>
+        <Route path="/auto-detect">
+          <AutoDetectPage />
+        </Route>
+        <Route path="/systemLogs">
+          <SystemLogsPage />
+        </Route>
+        <Route path="/customLogs">
+          <CustomLogsPage />
+        </Route>
+        <Route path="/kubernetes">
+          <KubernetesPage />
+        </Route>
+        <Route path="/otel-logs">
+          <OtelLogsPage />
+        </Route>
+        <Route>
+          <LandingPage />
+        </Route>
+      </Routes>
     </QueryClientProvider>
   );
 }

x-pack/plugins/observability_solution/observability_onboarding/public/application/pages/auto_detect.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { PageTemplate } from './template';
+import { CustomHeader } from '../header/custom_header';
+import { AutoDetectPanel } from '../quickstart_flows/auto_detect';
+
+export const AutoDetectPage = () => (
+  <PageTemplate
+    customHeader={
+      <CustomHeader
+        euiIconType="consoleApp"
+        headlineCopy={i18n.translate(
+          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.system.text',
+          {
+            defaultMessage: 'Auto-detect logs and metrics',
+          }
+        )}
+        captionCopy={i18n.translate(
+          'xpack.observability_onboarding.experimentalOnboardingFlow.customHeader.system.description',
+          {
+            defaultMessage:
+              'This installation scans your host and auto-detects log and metric files.',
+          }
+        )}
+      />
+    }
+  >
+    <AutoDetectPanel />
+  </PageTemplate>
+);