Implement basic page layout for new landing page (#179327)

Resolves #178943 ## 📓 Summary The observability onboarding page renders the new onboarding page: ![download](https://github.com/elastic/kibana/assets/190132/41f96946-8266-4ce9-9b38-6d2628a4fce0) ## ✔️ Acceptance criteria - Basic layout is rendered (header, questions, footer) - User can choose between "Collect and analyze my logs", "Monitor my applications performance", "Monitor my infrastructure" - On hover, additional description is shown. --------- Co-authored-by: Kibana Machine <[email protected]>
elastic · Mar 25, 2024 · 3760983 · 3760983
1 parent a3c9ed6
commit 3760983
Show file tree

Hide file tree

Showing 10 changed files with 4,052 additions and 10 deletions.
diff --git a/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx b/x-pack/plugins/observability_solution/observability_onboarding/public/application/app.tsx
@@ -181,10 +181,9 @@ export function ObservabilityOnboardingAppRoot({
                       <ObservabilityOnboardingHeaderActionMenu />
                     </HeaderMenuPortal>
                   )}
-                  {experimentalOnboardingFlowEnabled && (
+                  {experimentalOnboardingFlowEnabled ? (
                     <ExperimentalOnboardingFlow />
-                  )}
-                  {!experimentalOnboardingFlowEnabled && (
+                  ) : (
                     <ObservabilityOnboardingApp />
                   )}
                 </EuiErrorBoundary>

diff --git a/...ity_solution/observability_onboarding/public/application/experimental_onboarding_flow.tsx b/...ity_solution/observability_onboarding/public/application/experimental_onboarding_flow.tsx
@@ -4,17 +4,41 @@
  * 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 { EuiPageTemplate, 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';
 
 export function ExperimentalOnboardingFlow() {
   return (
-    <div>
-      {i18n.translate(
-        'xpack.observability_onboarding.experimentalOnboardingFlow.experimentalOnboardingFlowLabel',
-        { defaultMessage: 'Experimental onboarding flow' }
-      )}
-    </div>
+    <>
+      <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>
+        <OnboardingFlowForm />
+        <EuiSpacer size="xl" />
+      </EuiPageTemplate.Section>
+      <EuiPageTemplate.Section paddingSize="xl" grow={false} restrictWidth>
+        <Footer />
+        <EuiSpacer size="xl" />
+      </EuiPageTemplate.Section>
+    </>
   );
 }
diff --git a/...ility_solution/observability_onboarding/public/application/footer/demo_icon.svg b/...ility_solution/observability_onboarding/public/application/footer/demo_icon.svg
diff --git a/...ility_solution/observability_onboarding/public/application/footer/docs_icon.svg b/...ility_solution/observability_onboarding/public/application/footer/docs_icon.svg
diff --git a/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx b/...gins/observability_solution/observability_onboarding/public/application/footer/footer.tsx
@@ -0,0 +1,101 @@
+/*
+ * 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 type { FunctionComponent } from 'react';
+import {
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiAvatar,
+  EuiText,
+  EuiLink,
+} from '@elastic/eui';
+import integrationsIconUrl from './integrations_icon.svg';
+import demoIconUrl from './demo_icon.svg';
+import docsIconUrl from './docs_icon.svg';
+import forumIconUrl from './forum_icon.svg';
+
+export const Footer: FunctionComponent = () => {
+  const sections = [
+    {
+      iconUrl: integrationsIconUrl,
+      title: i18n.translate(
+        'xpack.observability_onboarding.experimentalOnboardingFlow.dataSourcesFlexItemLabel',
+        { defaultMessage: 'Data sources' }
+      ),
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+    },
+    {
+      iconUrl: demoIconUrl,
+      title: i18n.translate(
+        'xpack.observability_onboarding.experimentalOnboardingFlow.demoEnvironmentFlexItemLabel',
+        { defaultMessage: 'Demo environment' }
+      ),
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+    },
+    {
+      iconUrl: docsIconUrl,
+      title: i18n.translate(
+        'xpack.observability_onboarding.experimentalOnboardingFlow.exploreForumFlexItemLabel',
+        { defaultMessage: 'Explore forum' }
+      ),
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+    },
+    {
+      iconUrl: forumIconUrl,
+      title: i18n.translate(
+        'xpack.observability_onboarding.experimentalOnboardingFlow.browseDocumentationFlexItemLabel',
+        { defaultMessage: 'Browse documentation' }
+      ),
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod',
+    },
+  ];
+
+  return (
+    <EuiFlexGroup>
+      {sections.map((section, index) => (
+        <EuiFlexItem key={index}>
+          <EuiAvatar
+            size="l"
+            name=""
+            imageUrl={section.iconUrl}
+            color="subdued"
+          />
+          <EuiSpacer size="m" />
+          <EuiText size="s">
+            <strong>{section.title}</strong>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText size="xs">
+            <p>{section.description}</p>
+          </EuiText>
+          <EuiSpacer size="s" />
+          <EuiText size="xs">
+            <p>
+              <EuiLink
+                data-test-subj="observabilityOnboardingFooterLearnMoreLink"
+                href="#/navigation/link"
+                external
+              >
+                {i18n.translate(
+                  'xpack.observability_onboarding.footer.learnMoreLinkLabel',
+                  { defaultMessage: 'Learn more' }
+                )}
+              </EuiLink>
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};