[Logs onboarding] Add landing page and client-side routing (elastic#1…

…54928)

x-pack/plugins/observability_onboarding/public/application/app.tsx

@@ -17,20 +17,23 @@ import {
   KibanaContextProvider,
   KibanaThemeProvider,
   RedirectAppLinks,
-  useKibana,
   useUiSetting$,
 } from '@kbn/kibana-react-plugin/public';
-import { useBreadcrumbs } from '@kbn/observability-plugin/public';
-import { RouterProvider, createRouter } from '@kbn/typed-react-router-config';
+import { Route } from '@kbn/shared-ux-router';
 import { euiDarkVars, euiLightVars } from '@kbn/ui-theme';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Redirect, RouteComponentProps, RouteProps } from 'react-router-dom';
-import { Home } from '../components/app/home';
+import {
+  Router,
+  Switch,
+  RouteComponentProps,
+  RouteProps,
+} from 'react-router-dom';
 import {
   ObservabilityOnboardingPluginSetupDeps,
   ObservabilityOnboardingPluginStartDeps,
 } from '../plugin';
+import { routes } from '../routes';
 
 export type BreadcrumbTitle<
   T extends { [K in keyof T]?: string | undefined } = {}
@@ -49,33 +52,33 @@ export const onBoardingTitle = i18n.translate(
   }
 );
 
-export const onboardingRoutes: RouteDefinition[] = [
-  {
-    exact: true,
-    path: '/',
-    render: () => <Redirect to="/observabilityOnboarding" />,
-    breadcrumb: onBoardingTitle,
-  },
-];
+export const breadcrumbsApp = {
+  id: 'observabilityOnboarding',
+  label: onBoardingTitle,
+};
+
+function App() {
+  return (
+    <>
+      <Switch>
+        {Object.keys(routes).map((key) => {
+          const path = key as keyof typeof routes;
+          const { handler, exact } = routes[path];
+          const Wrapper = () => {
+            return handler();
+          };
+          return (
+            <Route key={path} path={path} exact={exact} component={Wrapper} />
+          );
+        })}
+      </Switch>
+    </>
+  );
+}
 
 function ObservabilityOnboardingApp() {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
-  const { http } = useKibana<ObservabilityOnboardingPluginStartDeps>().services;
-  const basePath = http.basePath.get();
-
-  useBreadcrumbs([
-    {
-      text: onBoardingTitle,
-      href: basePath + '/app/observabilityOnboarding',
-    },
-    {
-      text: i18n.translate('xpack.observability_onboarding.breadcrumbs.logs', {
-        defaultMessage: 'Logs',
-      }),
-    },
-  ]);
-
   return (
     <ThemeProvider
       theme={(outerTheme?: Theme) => ({
@@ -85,14 +88,12 @@ function ObservabilityOnboardingApp() {
       })}
     >
       <div className={APP_WRAPPER_CLASS} data-test-subj="csmMainContainer">
-        <Home />
+        <App />
       </div>
     </ThemeProvider>
   );
 }
 
-export const observabilityOnboardingRouter = createRouter({});
-
 export function ObservabilityOnboardingAppRoot({
   appMountParameters,
   core,
@@ -131,14 +132,11 @@ export function ObservabilityOnboardingAppRoot({
           }}
         >
           <i18nCore.Context>
-            <RouterProvider
-              history={history}
-              router={observabilityOnboardingRouter}
-            >
+            <Router history={history}>
               <EuiErrorBoundary>
                 <ObservabilityOnboardingApp />
               </EuiErrorBoundary>
-            </RouterProvider>
+            </Router>
           </i18nCore.Context>
         </KibanaThemeProvider>
       </KibanaContextProvider>

x-pack/plugins/observability_onboarding/public/components/app/home/index.tsx

@@ -5,95 +5,96 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import React, { ComponentType, useRef, useState } from 'react';
 import {
-  FilmstripFrame,
-  FilmstripTransition,
-  TransitionState,
-} from '../../shared/filmstrip_transition';
-import {
-  Provider as WizardProvider,
-  Step as WizardStep,
-} from './logs_onboarding_wizard';
-import { HorizontalSteps } from './logs_onboarding_wizard/horizontal_steps';
-import { PageTitle } from './logs_onboarding_wizard/page_title';
-
-export function Home({ animated = true }: { animated?: boolean }) {
-  if (animated) {
-    return <AnimatedTransitionsWizard />;
-  }
-  return <StillTransitionsWizard />;
-}
-
-function StillTransitionsWizard() {
-  return (
-    <WizardProvider>
-      <EuiFlexGroup alignItems="center" justifyContent="spaceAround">
-        <EuiFlexItem grow={false}>
-          <WizardStep />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </WizardProvider>
-  );
-}
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiCard,
+  EuiIcon,
+  EuiHorizontalRule,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+import { useBreadcrumbs } from '@kbn/observability-plugin/public';
+import React from 'react';
+import { useKibanaNavigation } from '../../../hooks/use_kibana_navigation';
+import { breadcrumbsApp } from '../../../application/app';
 
-const TRANSITION_DURATION = 180;
+export function Home() {
+  useBreadcrumbs([], breadcrumbsApp);
 
-function AnimatedTransitionsWizard() {
-  const [transition, setTransition] = useState<TransitionState>('ready');
-  const TransitionComponent = useRef<ComponentType>(() => null);
+  const navigateToKibanaUrl = useKibanaNavigation();
 
-  function onChangeStep({
-    direction,
-    StepComponent,
-  }: {
-    direction: 'back' | 'next';
-    StepComponent: ComponentType;
-  }) {
-    setTransition(direction);
-    TransitionComponent.current = StepComponent;
-    setTimeout(() => {
-      setTransition('ready');
-    }, TRANSITION_DURATION + 10);
-  }
+  const handleClickLogsOnboarding = () => {
+    navigateToKibanaUrl('/app/observabilityOnboarding/logs');
+  };
 
   return (
-    <WizardProvider
-      transitionDuration={TRANSITION_DURATION}
-      onChangeStep={onChangeStep}
+    <EuiFlexGroup
+      direction="column"
+      alignItems="center"
+      style={{ margin: 'auto', maxWidth: 800 }}
     >
-      <EuiFlexGroup direction="column" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiSpacer size="l" />
-          <PageTitle />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} style={{ width: '50%' }}>
-          <HorizontalSteps />
-        </EuiFlexItem>
-        <EuiFlexItem grow={1} style={{ width: '50%' }}>
-          <FilmstripTransition
-            duration={TRANSITION_DURATION}
-            transition={transition}
-          >
-            <FilmstripFrame position="left">
-              {
-                // eslint-disable-next-line react/jsx-pascal-case
-                transition === 'back' ? <TransitionComponent.current /> : null
-              }
-            </FilmstripFrame>
-            <FilmstripFrame position="center">
-              <WizardStep />
-            </FilmstripFrame>
-            <FilmstripFrame position="right">
-              {
-                // eslint-disable-next-line react/jsx-pascal-case
-                transition === 'next' ? <TransitionComponent.current /> : null
-              }
-            </FilmstripFrame>
-          </FilmstripTransition>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </WizardProvider>
+      <EuiFlexItem grow={false}>
+        <EuiSpacer size="l" />
+        <EuiTitle size="l">
+          <h1>Get started with Observability</h1>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText color="subdued" style={{ textAlign: 'center' }}>
+          <p>
+            Monitor and gain insights across your cloud-native and distributed
+            systems, bringing together application, infrastructure, and user
+            telemetry data for end-to-end observability on a single platform.
+          </p>
+        </EuiText>
+        <EuiSpacer size="xl" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false} style={{ width: 400 }}>
+        <EuiCard
+          layout="vertical"
+          icon={<EuiIcon size="xl" type="logoLogging" />}
+          title="Collect and analyse logs"
+          betaBadgeProps={{ label: 'Quick Start' }}
+          description="Choose what logs to collect, and onboard your data in up to 5 minutes to start analysing it straight away."
+          onClick={handleClickLogsOnboarding}
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiHorizontalRule margin="l" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center">
+          <EuiFlexItem>
+            <EuiCard
+              title="Integrations"
+              betaBadgeProps={{ label: 'Integrations' }}
+              description="Explore 300+ ways of ingesting data"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              title="Setup guide"
+              betaBadgeProps={{ label: 'Setup guide' }}
+              description="Monitor kubernetes clusters"
+            />
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiCard
+              title="Sample data"
+              betaBadgeProps={{ label: 'Sample data' }}
+              description="Explore data, visualizations, and dashboards samples"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty href="/app/observability/overview">
+          Skip for now
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   );
 }

x-pack/plugins/observability_onboarding/public/components/app/logs_onboarding/index.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { useBreadcrumbs } from '@kbn/observability-plugin/public';
+import React, { ComponentType, useRef, useState } from 'react';
+import {
+  FilmstripFrame,
+  FilmstripTransition,
+  TransitionState,
+} from '../../shared/filmstrip_transition';
+import { Provider as WizardProvider, Step as WizardStep } from './wizard';
+import { HorizontalSteps } from './wizard/horizontal_steps';
+import { PageTitle } from './wizard/page_title';
+import { breadcrumbsApp } from '../../../application/app';
+
+export function LogsOnboarding() {
+  useBreadcrumbs(
+    [
+      {
+        text: i18n.translate(
+          'xpack.observability_onboarding.breadcrumbs.logs',
+          { defaultMessage: 'Logs' }
+        ),
+      },
+    ],
+    breadcrumbsApp
+  );
+  return <AnimatedTransitionsWizard />;
+}
+
+const TRANSITION_DURATION = 180;
+
+function AnimatedTransitionsWizard() {
+  const [transition, setTransition] = useState<TransitionState>('ready');
+  const TransitionComponent = useRef<ComponentType>(() => null);
+
+  function onChangeStep({
+    direction,
+    StepComponent,
+  }: {
+    direction: 'back' | 'next';
+    StepComponent: ComponentType;
+  }) {
+    setTransition(direction);
+    TransitionComponent.current = StepComponent;
+    setTimeout(() => {
+      setTransition('ready');
+    }, TRANSITION_DURATION + 10);
+  }
+
+  return (
+    <WizardProvider
+      transitionDuration={TRANSITION_DURATION}
+      onChangeStep={onChangeStep}
+    >
+      <EuiFlexGroup direction="column" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiSpacer size="l" />
+          <PageTitle />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ width: '50%' }}>
+          <HorizontalSteps />
+        </EuiFlexItem>
+        <EuiFlexItem grow={1} style={{ width: '50%' }}>
+          <FilmstripTransition
+            duration={TRANSITION_DURATION}
+            transition={transition}
+          >
+            <FilmstripFrame position="left">
+              {
+                // eslint-disable-next-line react/jsx-pascal-case
+                transition === 'back' ? <TransitionComponent.current /> : null
+              }
+            </FilmstripFrame>
+            <FilmstripFrame position="center">
+              <WizardStep />
+            </FilmstripFrame>
+            <FilmstripFrame position="right">
+              {
+                // eslint-disable-next-line react/jsx-pascal-case
+                transition === 'next' ? <TransitionComponent.current /> : null
+              }
+            </FilmstripFrame>
+          </FilmstripTransition>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </WizardProvider>
+  );
+}