github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-06-27 18:51:07 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Guided onboarding] Updated the examples to only use the Observable for the active step check (#141265)

Browse source
This commit is contained in:
Yulia Čech 2022-09-26 15:22:35 +02:00 • committed by GitHub
parent 6dd0555074
commit 85c8d37925
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
examples/guided_onboarding_example/public/components/step_one.tsx
View file

@ -55,9 +55,8 @@ export const StepOne = ({ guidedOnboarding }: GuidedOnboardingExampleAppDeps) =>
<p>
<FormattedMessage
id="guidedOnboardingExample.guidesSelection.stepOne.explanation"
defaultMessage="The code on this page is listening to the guided setup state. If the state is set to
Search guide, step Add data, a EUI tour will be displayed, pointing to the button below. Alternatively,
the tour can be displayed via a localStorage value or a url param (see step 2)."
defaultMessage="The code on this page is listening to the guided setup state with a useObservable hook. If the state is set to
Search guide, step Add data, a EUI tour will be displayed, pointing to the button below."
/>
</p>
</EuiText>

26
examples/guided_onboarding_example/public/components/step_two.tsx
View file

@ -11,7 +11,6 @@ import React, { useEffect, useState } from 'react';
import { EuiButton, EuiSpacer, EuiText, EuiTitle, EuiTourStep } from '@elastic/eui';
import { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public/types';
import { useHistory, useLocation } from 'react-router-dom';
import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
@ -26,18 +25,18 @@ export const StepTwo = (props: StepTwoProps) => {
const {
guidedOnboarding: { guidedOnboardingApi },
} = props;
const { search } = useLocation();
const history = useHistory();
const query = React.useMemo(() => new URLSearchParams(search), [search]);
useEffect(() => {
if (query.get('showTour') === 'true') {
setIsTourStepOpen(true);
}
}, [query]);
const [isTourStepOpen, setIsTourStepOpen] = useState<boolean>(false);
useEffect(() => {
const subscription = guidedOnboardingApi
?.isGuideStepActive$('search', 'browse_docs')
.subscribe((isStepActive) => {
setIsTourStepOpen(isStepActive);
});
return () => subscription?.unsubscribe();
}, [guidedOnboardingApi]);
return (
<>
<EuiPageContentHeader>
@ -55,7 +54,8 @@ export const StepTwo = (props: StepTwoProps) => {
<p>
<FormattedMessage
id="guidedOnboardingExample.guidesSelection.stepTwo.explanation"
defaultMessage="The EUI tour on this page is displayed, when a url param 'showTour' is set to 'true'."
defaultMessage="The code on this page is listening to the guided setup state using an Observable subscription. If the state is set to
Search guide, step Search experience, a EUI tour will be displayed, pointing to the button below."
/>
</p>
</EuiText>
@ -69,13 +69,11 @@ export const StepTwo = (props: StepTwoProps) => {
isStepOpen={isTourStepOpen}
minWidth={300}
onFinish={() => {
history.push('/stepTwo');
query.set('showTour', 'false');
setIsTourStepOpen(false);
}}
step={1}
stepsTotal={1}
title="Step Add data"
title="Step Search experience"
anchorPosition="rightUp"
>
<EuiButton