[Logs onboarding] Adds UI for System logs flow (#154929) (#162654)

This addresses the UI code required for #154929. The API work can be
accomplished separately. The existing APIs (for custom logs) are used in
their place for this PR.

![Screenshot 2023-07-27 at 13 03
50](https://github.com/elastic/kibana/assets/1967266/f27a2063-822a-4169-bd98-f22985661349)

---------

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

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

@@ -27,13 +27,15 @@ import ReactDOM from 'react-dom';
 import { RouteComponentProps, RouteProps } from 'react-router-dom';
 import { ConfigSchema } from '..';
 import { customLogsRoutes } from '../components/app/custom_logs/wizard';
+import { systemLogsRoutes } from '../components/app/system_logs';
 import { ObservabilityOnboardingHeaderActionMenu } from '../components/app/header_action_menu';
 import {
   ObservabilityOnboardingPluginSetupDeps,
   ObservabilityOnboardingPluginStartDeps,
 } from '../plugin';
 import { baseRoutes, routes } from '../routes';
 import { CustomLogs } from '../routes/templates/custom_logs';
+import { SystemLogs } from '../routes/templates/system_logs';
 
 export type BreadcrumbTitle<
   T extends { [K in keyof T]?: string | undefined } = {}
@@ -59,6 +61,7 @@ export const breadcrumbsApp = {
 
 function App() {
   const customLogRoutesPaths = Object.keys(customLogsRoutes);
+  const systemLogRoutesPaths = Object.keys(systemLogsRoutes);
 
   return (
     <>
@@ -94,6 +97,26 @@ function App() {
             })}
           </CustomLogs>
         </Route>
+        <Route exact path={systemLogRoutesPaths}>
+          <SystemLogs>
+            {systemLogRoutesPaths.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}
+                />
+              );
+            })}
+          </SystemLogs>
+        </Route>
       </Routes>
     </>
   );

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

@@ -56,7 +56,9 @@ export function Home() {
 
   const { navigateToKibanaUrl } = useKibanaNavigation();
 
-  const handleClickSystemLogs = () => {};
+  const handleClickSystemLogs = () => {
+    navigateToKibanaUrl('/app/observabilityOnboarding/systemLogs');
+  };
   const handleClickCustomLogs = () => {
     navigateToKibanaUrl('/app/observabilityOnboarding/customLogs');
   };

x-pack/plugins/observability_onboarding/public/components/app/system_logs/index.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 { i18n } from '@kbn/i18n';
+import {
+  createWizardContext,
+  Step,
+} from '../../../context/create_wizard_context';
+import { InstallElasticAgent } from './install_elastic_agent';
+
+interface WizardState {
+  elasticAgentPlatform: 'linux-tar' | 'macos' | 'windows';
+  autoDownloadConfig: boolean;
+  apiKeyEncoded: string;
+  onboardingId: string;
+}
+
+const initialState: WizardState = {
+  elasticAgentPlatform: 'linux-tar',
+  autoDownloadConfig: false,
+  apiKeyEncoded: '',
+  onboardingId: '',
+};
+
+export type SystemLogsSteps = 'installElasticAgent';
+
+const steps: Record<SystemLogsSteps, Step> = {
+  installElasticAgent: {
+    component: InstallElasticAgent,
+    title: i18n.translate(
+      'xpack.observability_onboarding.systemLogs.installShipper.title',
+      { defaultMessage: 'Install shipper to collect system logs' }
+    ),
+  },
+};
+
+const {
+  Provider,
+  useWizard,
+  routes: systemLogsRoutes,
+} = createWizardContext({
+  initialState,
+  initialStep: 'installElasticAgent',
+  steps,
+  basePath: '/systemLogs',
+});
+
+export { Provider, useWizard, systemLogsRoutes };