Skip to content

Commit

Permalink
[8.x] [Expamples][Guided onboarding] - added missing EuiProvider to f…
Browse files Browse the repository at this point in the history 
…ix errors (#199070) (#199076)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Expamples][Guided onboarding] - added missing EuiProvider to fix
errors (#199070)](#199070)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Philippe
Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-06T02:17:16Z","message":"[Expamples][Guided
onboarding] - added missing EuiProvider to fix errors (#199070)\n\n##
Summary\r\n\r\nThis PR fixes a missing `EuiProvider` within the guided
onboarding\r\nexample. Currently the app is barely usable as it throws
hundreds or\r\neven thousands of errors which make the page extremely
slow.\r\n\r\n#### Before
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/87b8252a-82ac-4094-8adf-3cd4c12236ef\r\n\r\n####
After
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0382192b-94b7-4d4b-bada-2d438a750b14\r\n\r\n\r\n###
Notes\r\n**_This PR does NOT fix all the console errors, that's why you
see a\r\ncouple of errors in the console still on the second video
above. It just\r\nfixes the bare minimum to make the app at least
usable._**\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"833658f094bfec06b1bfdb34c32376cbb5862f53","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","backport:version","v8.17.0"],"title":"[Expamples][Guided
onboarding] - added missing EuiProvider to fix
errors","number":199070,"url":"https://github.com/elastic/kibana/pull/199070","mergeCommit":{"message":"[Expamples][Guided
onboarding] - added missing EuiProvider to fix errors (#199070)\n\n##
Summary\r\n\r\nThis PR fixes a missing `EuiProvider` within the guided
onboarding\r\nexample. Currently the app is barely usable as it throws
hundreds or\r\neven thousands of errors which make the page extremely
slow.\r\n\r\n#### Before
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/87b8252a-82ac-4094-8adf-3cd4c12236ef\r\n\r\n####
After
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0382192b-94b7-4d4b-bada-2d438a750b14\r\n\r\n\r\n###
Notes\r\n**_This PR does NOT fix all the console errors, that's why you
see a\r\ncouple of errors in the console still on the second video
above. It just\r\nfixes the bare minimum to make the app at least
usable._**\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"833658f094bfec06b1bfdb34c32376cbb5862f53"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199070","number":199070,"mergeCommit":{"message":"[Expamples][Guided
onboarding] - added missing EuiProvider to fix errors (#199070)\n\n##
Summary\r\n\r\nThis PR fixes a missing `EuiProvider` within the guided
onboarding\r\nexample. Currently the app is barely usable as it throws
hundreds or\r\neven thousands of errors which make the page extremely
slow.\r\n\r\n#### Before
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/87b8252a-82ac-4094-8adf-3cd4c12236ef\r\n\r\n####
After
fix\r\n\r\n\r\nhttps://github.com/user-attachments/assets/0382192b-94b7-4d4b-bada-2d438a750b14\r\n\r\n\r\n###
Notes\r\n**_This PR does NOT fix all the console errors, that's why you
see a\r\ncouple of errors in the console still on the second video
above. It just\r\nfixes the bare minimum to make the app at least
usable._**\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<[email protected]>","sha":"833658f094bfec06b1bfdb34c32376cbb5862f53"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <[email protected]>
  • Loading branch information
@kibanamachine @PhilippeOberti
kibanamachine and PhilippeOberti authored Nov 6, 2024
1 parent 916f481 commit 7c70868
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 7c70868

Please sign in to comment.