[Onboarding] Create guided_onboarding plugin (elastic#138611)

* [Guided onboarding] Smashed commit of all POC work for guided onboarding and guided onboarding example plugins

* [Guided onboarding] Fixed type errors

* [Guided onboarding] Removed guidedOnboardingExample limit

* [Guided onboarding] Fixed a functonal test for exposed configs

* [Guided onboarding] Fixed plugin limit

* [Guided onboarding] Added more information to the example plugin

* [Guided onboarding] Fixed no-console error

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* [Guided onboarding] Fixed snake case errors

* move guided_onboarding out of x-pack

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Alison Goryachev <[email protected]>

.i18nrc.json

@@ -40,6 +40,7 @@
     "eventAnnotation": "src/plugins/event_annotation",
     "fieldFormats": "src/plugins/field_formats",
     "flot": "packages/kbn-flot-charts/lib",
+    "guidedOnboarding": "src/plugins/guided_onboarding",
     "home": "src/plugins/home",
     "homePackages": "packages/home",
     "indexPatternEditor": "src/plugins/data_view_editor",

docs/developer/plugin-list.asciidoc

@@ -176,6 +176,10 @@ for use in their own application.
 |Index pattern fields formatters
 
 
+|{kib-repo}blob/{branch}/src/plugins/guided_onboarding/README.md[guidedOnboarding]
+|A Kibana plugin
+
+
 |{kib-repo}blob/{branch}/src/plugins/home/README.md[home]
 |Moves the legacy ui/registry/feature_catalogue module for registering "features" that should be shown in the home page's feature catalogue to a service within a "home" plugin. The feature catalogue refered to here should not be confused with the "feature" plugin for registering features used to derive UI capabilities for feature controls.
 

examples/guided_onboarding_example/.i18nrc.json

@@ -0,0 +1,7 @@
+{
+  "prefix": "guidedOnboardingExample",
+  "paths": {
+    "guidedOnboardingExample": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}

examples/guided_onboarding_example/README.md

@@ -0,0 +1,9 @@
+# guidedOnboardingExample
+
+A Kibana plugin
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md) for instructions setting up your development environment.

examples/guided_onboarding_example/common/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const PLUGIN_ID = 'guidedOnboardingExample';
+export const PLUGIN_NAME = 'guidedOnboardingExample';

examples/guided_onboarding_example/kibana.json

@@ -0,0 +1,14 @@
+{
+  "id": "guidedOnboardingExample",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "platform-onboarding",
+    "githubTeam": "platform-onboarding"
+  },
+  "description": "Example plugin to consume guidedOnboarding",
+  "server": false,
+  "ui": true,
+  "requiredPlugins": ["navigation", "guidedOnboarding"],
+  "optionalPlugins": []
+}

examples/guided_onboarding_example/public/application.tsx

@@ -0,0 +1,30 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { AppPluginStartDependencies } from './types';
+import { GuidedOnboardingExampleApp } from './components/app';
+
+export const renderApp = (
+  { notifications }: CoreStart,
+  { guidedOnboarding }: AppPluginStartDependencies,
+  { element, history }: AppMountParameters
+) => {
+  ReactDOM.render(
+    <GuidedOnboardingExampleApp
+      notifications={notifications}
+      guidedOnboarding={guidedOnboarding}
+      history={history}
+    />,
+    element
+  );
+
+  return () => ReactDOM.unmountComponentAtNode(element);
+};

examples/guided_onboarding_example/public/components/app.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
+import { Router, Switch, Route } from 'react-router-dom';
+
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageHeader,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { CoreStart, ScopedHistory } from '@kbn/core/public';
+
+import { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public/types';
+import { StepTwo } from './step_two';
+import { StepOne } from './step_one';
+import { Main } from './main';
+
+interface GuidedOnboardingExampleAppDeps {
+  notifications: CoreStart['notifications'];
+  guidedOnboarding: GuidedOnboardingPluginStart;
+  history: ScopedHistory;
+}
+
+export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps) => {
+  const { notifications, guidedOnboarding, history } = props;
+
+  return (
+    <I18nProvider>
+      <EuiPage restrictWidth="1000px">
+        <EuiPageBody>
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>
+                <FormattedMessage
+                  id="guidedOnboardingExample.title"
+                  defaultMessage="Guided onboarding examples"
+                />
+              </h1>
+            </EuiTitle>
+          </EuiPageHeader>
+          <EuiPageContent>
+            <Router history={history}>
+              <Switch>
+                <Route exact path="/">
+                  <Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
+                </Route>
+                <Route exact path="/stepOne">
+                  <StepOne guidedOnboarding={guidedOnboarding} />
+                </Route>
+                <Route exact path="/stepTwo">
+                  <StepTwo guidedOnboarding={guidedOnboarding} />
+                </Route>
+              </Switch>
+            </Router>
+          </EuiPageContent>
+        </EuiPageBody>
+      </EuiPage>
+    </I18nProvider>
+  );
+};