github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Expamples][Guided onboarding] - added missing EuiProvider to fix errors (#199070)

Browse source 
## 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 <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Philippe Oberti 2024-11-05 20:17:16 -06:00 • committed by GitHub
parent 73f31549cd
commit 833658f094
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 65 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

16
examples/guided_onboarding_example/public/application.tsx
View file

@ -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
);

111
examples/guided_onboarding_example/public/components/app.tsx
View file

@ -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';
@ -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
examples/guided_onboarding_example/tsconfig.json
View file

@ -17,6 +17,7 @@
"@kbn/i18n",
"@kbn/guided-onboarding",
"@kbn/shared-ux-router",
"@kbn/react-kibana-context-render",
],
"exclude": [
"target/**/*",