Skip to content

Commit

Permalink
[Expamples][Guided onboarding] - added missing EuiProvider to fix err…
Browse files Browse the repository at this point in the history 
…ors (elastic#199070)

## Summary

This PR fixes a missing `EuiProvider` within the guided onboarding
example. Currently the app is barely usable as it throws hundreds or
even thousands of errors which make the page extremely slow.

#### Before fix

https://github.com/user-attachments/assets/87b8252a-82ac-4094-8adf-3cd4c12236ef

#### After fix

https://github.com/user-attachments/assets/0382192b-94b7-4d4b-bada-2d438a750b14

### Notes
**_This PR does NOT fix all the console errors, that's why you see a
couple of errors in the console still on the second video above. It just
fixes the bare minimum to make the app at least usable._**

---------

Co-authored-by: kibanamachine <[email protected]>
(cherry picked from commit 833658f)
  • Loading branch information
@PhilippeOberti
PhilippeOberti committed Nov 6, 2024
1 parent 7c5171e commit 0676fff
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 63 deletions.
16 changes: 10 additions & 6 deletions examples/guided_onboarding_example/public/application.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,24 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { AppMountParameters, CoreStart } from '@kbn/core/public';
import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
import { AppPluginStartDependencies } from './types';
import { GuidedOnboardingExampleApp } from './components/app';

export const renderApp = (
{ notifications }: CoreStart,
coreStart: CoreStart,
{ guidedOnboarding }: AppPluginStartDependencies,
{ element, history }: AppMountParameters
) => {
const { notifications } = coreStart;
ReactDOM.render(
<GuidedOnboardingExampleApp
notifications={notifications}
guidedOnboarding={guidedOnboarding}
history={history}
/>,
<KibanaRenderContextProvider {...coreStart}>
<GuidedOnboardingExampleApp
notifications={notifications}
guidedOnboarding={guidedOnboarding}
history={history}
/>
</KibanaRenderContextProvider>,
element
);

Expand Down
111 changes: 54 additions & 57 deletions examples/guided_onboarding_example/public/components/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@
*/

import React from 'react';
import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
import { FormattedMessage } from '@kbn/i18n-react';
import { Routes, Router, Route } from '@kbn/shared-ux-router';
import { EuiPageTemplate } 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';
Expand All @@ -30,62 +29,60 @@ export const GuidedOnboardingExampleApp = (props: GuidedOnboardingExampleAppDeps
const { notifications, guidedOnboarding, history } = props;

return (
<I18nProvider>
<EuiPageTemplate restrictWidth={true} panelled={true}>
<EuiPageTemplate.Header
pageTitle={
<FormattedMessage
id="guidedOnboardingExample.title"
defaultMessage="Guided onboarding examples"
/>
<EuiPageTemplate restrictWidth={true} panelled={true}>
<EuiPageTemplate.Header
pageTitle={
<FormattedMessage
id="guidedOnboardingExample.title"
defaultMessage="Guided onboarding examples"
/>
}
/>
{guidedOnboarding?.guidedOnboardingApi?.isEnabled ? (
<EuiPageTemplate.Section>
<Router history={history}>
<Routes>
<Route exact path="/">
<Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepOne">
<StepOne guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepTwo">
<StepTwo />
</Route>
<Route exact path="/stepThree">
<StepThree guidedOnboarding={guidedOnboarding} />
</Route>
<Route path="/stepFour/:indexName?">
<StepFour guidedOnboarding={guidedOnboarding} />
</Route>
</Routes>
</Router>
</EuiPageTemplate.Section>
) : (
<EuiPageTemplate.EmptyPrompt
iconType="error"
color="danger"
title={
<h2>
<FormattedMessage
id="guidedOnboardingExample.errorTitle"
defaultMessage="Guided onboarding is disabled"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="guidedOnboardingExample.errorDescription"
defaultMessage="Make sure your Kibana instance runs on Cloud and/or
your user has access to Setup guides feature."
/>
</p>
}
/>
{guidedOnboarding?.guidedOnboardingApi?.isEnabled ? (
<EuiPageTemplate.Section>
<Router history={history}>
<Routes>
<Route exact path="/">
<Main notifications={notifications} guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepOne">
<StepOne guidedOnboarding={guidedOnboarding} />
</Route>
<Route exact path="/stepTwo">
<StepTwo />
</Route>
<Route exact path="/stepThree">
<StepThree guidedOnboarding={guidedOnboarding} />
</Route>
<Route path="/stepFour/:indexName?">
<StepFour guidedOnboarding={guidedOnboarding} />
</Route>
</Routes>
</Router>
</EuiPageTemplate.Section>
) : (
<EuiPageTemplate.EmptyPrompt
iconType="error"
color="danger"
title={
<h2>
<FormattedMessage
id="guidedOnboardingExample.errorTitle"
defaultMessage="Guided onboarding is disabled"
/>
</h2>
}
body={
<p>
<FormattedMessage
id="guidedOnboardingExample.errorDescription"
defaultMessage="Make sure your Kibana instance runs on Cloud and/or
your user has access to Setup guides feature."
/>
</p>
}
/>
)}
</EuiPageTemplate>
</I18nProvider>
)}
</EuiPageTemplate>
);
};
1 change: 1 addition & 0 deletions examples/guided_onboarding_example/tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"@kbn/i18n",
"@kbn/guided-onboarding",
"@kbn/shared-ux-router",
"@kbn/react-kibana-context-render",
],
"exclude": [
"target/**/*",
Expand Down

0 comments on commit 0676fff

Please sign in to comment.