[Guided onboarding] Added plugin's README (#141219)

* [Guided onboarding] Documentation

* [Guided onboarding] Examples readme link

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

* Update src/plugins/guided_onboarding/README.md

Co-authored-by: Alison Goryachev <alisonmllr20@gmail.com>

* [CI] Auto-commit changed files from 'node scripts/build_plugin_list_docs'

* [Guided onboarding] Short info about config files

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Alison Goryachev <alisonmllr20@gmail.com>
This commit is contained in:
Yulia Čech 2022-09-21 16:44:06 +02:00 committed by GitHub
parent ee4b451ed4
commit c713550e17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 74 additions and 6 deletions

View file

@ -177,7 +177,7 @@ for use in their own application.
|{kib-repo}blob/{branch}/src/plugins/guided_onboarding/README.md[guidedOnboarding]
|A Kibana plugin
|This plugin contains the code for the Guided Onboarding project. Guided onboarding consists of guides for Solutions (Enterprise Search, Observability, Security) that can be completed as a checklist of steps. The guides help users to ingest their data and to navigate to the correct Solutions pages.
|{kib-repo}blob/{branch}/src/plugins/home/README.md[home]

View file

@ -1,6 +1,6 @@
# guidedOnboardingExample
A Kibana plugin
This plugin contains code examples for the Guided Onboarding plugin. More information can be found in `KIBANA_FOLDER/src/plugins/guided_onboarding/README.md`
---

View file

@ -1,9 +1,77 @@
# guidedOnboarding
# Guided Onboarding
A Kibana plugin
This plugin contains the code for the Guided Onboarding project. Guided onboarding consists of guides for Solutions (Enterprise Search, Observability, Security) that can be completed as a checklist of steps. The guides help users to ingest their data and to navigate to the correct Solutions pages.
The guided onboarding plugin includes a client-side code for the UI and the server side code for the internal API. The server-side code is not intended for external use.
The client-side code registers a button in the Kibana header that controls the guided onboarding panel (checklist) depending on the current state. There is also an API service exposed from the client-side start contract. The API service is intended for external use by other plugins.
---
## Development
See the [kibana contributing guide](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md) for instructions setting up your development environment.
1. To enable the UI, add `guidedOnboarding.ui: true` to the file `KIBANA_FOLDER/config/kibana.dev.yml`.
2. Start Kibana with examples `yarn start --run-examples` to be able to see the guidedOnboardingExample plugin.
3. Navigate to `/app/guidedOnboardingExample` to start a guide and check the button in the header.
## API service
*Also see `KIBANA_FOLDER/examples/guided_onboarding_example` for code examples.*
The guided onboarding plugin exposes an API service from its start contract that is intended to be used by other plugins. The API service allows consumers to access the current state of the guided onboarding process and manipulate it.
To use the API service in your plugin, declare the guided onboarding plugin as a dependency in the file `kibana.json` of your plugin. Add the API service to your plugin's start dependencies to rely on the provided TypeScript interface:
```
export interface AppPluginStartDependencies {
guidedOnboarding: GuidedOnboardingPluginStart;
}
```
The API service is now available to your plugin in the setup lifecycle function of your plugin
```
// startDependencies is of type AppPluginStartDependencies
const [coreStart, startDependencies] = await core.getStartServices();
```
or in the start lifecycle function of your plugin.
```
public start(core: CoreStart, startDependencies: AppPluginStartDependencies) {
...
}
```
### isGuideStepActive$(guideID: string, stepID: string): Observable\<boolean\>
*Also see `KIBANA_FOLDER/examples/guided_onboarding_example/public/components/step_one.tsx`.*
The API service exposes an Observable that contains a boolean value for the state of a specific guide step. For example, if your plugin needs to check if the "Add data" step of the Security guide is currently active, you could use the following code snippet.
```
const { guidedOnboardingApi } = guidedOnboarding;
const isDataStepActive = useObservable(guidedOnboardingApi!.isGuideStepActive$('security', 'add_data'));
useEffect(() => {
// do some logic depending on the step state
}, [isDataStepActive]);
```
Alternatively, you can subscribe to the Observable directly.
```
useEffect(() => {
const subscription = guidedOnboardingApi?.isGuideStepActive$('security', 'add_data').subscribe((isDataStepACtive) => {
// do some logic depending on the step state
});
return () => subscription?.unsubscribe();
}, [guidedOnboardingApi]);
```
### completeGuideStep(guideID: string, stepID: string): Promise\<{ state: GuidedOnboardingState } | undefined\>
The API service exposes an async function to mark a guide step as completed.
If the specified guide step is not currently active, the function is a noop. The return value is `undefined` in that case,
otherwise an updated `GuidedOnboardingState` is returned *(This is WIP and will likely change in the 8.6 dev cycle)*.
```
await guidedOnboardingApi?.completeGuideStep('security', 'add_data');
```
## Guides config
To use the API service, you need to know a guide ID (one of `search`, `observability`, `security`) and a step ID (for example, `add_data`, `search_experience`, `rules` etc). Refer to guides config files in the folder `./public/constants` for more information.

View file

@ -9,7 +9,7 @@
import { guidesConfig } from '../constants/guides_config';
import { GuideConfig, StepConfig, UseCase } from '../types';
const getGuideConfig = (guideID?: string): GuideConfig | undefined => {
export const getGuideConfig = (guideID?: string): GuideConfig | undefined => {
if (guideID && Object.keys(guidesConfig).includes(guideID)) {
return guidesConfig[guideID as UseCase];
}