From 7c70868efea45f890608f148dff5cabd4a407dd2 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 6 Nov 2024 15:00:12 +1100
Subject: [PATCH] [8.x] [Expamples][Guided onboarding] - added missing
 EuiProvider to fix 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)](https://github.com/elastic/kibana/pull/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":"philippe.oberti@elastic.co"},"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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","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
<42973632+kibanamachine@users.noreply.github.com>","sha":"833658f094bfec06b1bfdb34c32376cbb5862f53"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Philippe Oberti <philippe.oberti@elastic.co>
---
 .../public/application.tsx                    |  16 ++-
 .../public/components/app.tsx                 | 111 +++++++++---------
 .../guided_onboarding_example/tsconfig.json   |   1 +
 3 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/examples/guided_onboarding_example/public/application.tsx b/examples/guided_onboarding_example/public/application.tsx
index 1227b8e7271df..b3d67e9de630a 100755
--- a/examples/guided_onboarding_example/public/application.tsx
+++ b/examples/guided_onboarding_example/public/application.tsx
@@ -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
   );
 
diff --git a/examples/guided_onboarding_example/public/components/app.tsx b/examples/guided_onboarding_example/public/components/app.tsx
index 20430534a54e3..650f683e82bbb 100755
--- a/examples/guided_onboarding_example/public/components/app.tsx
+++ b/examples/guided_onboarding_example/public/components/app.tsx
@@ -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>
   );
 };
diff --git a/examples/guided_onboarding_example/tsconfig.json b/examples/guided_onboarding_example/tsconfig.json
index 0707df0a33308..6dca87ec7eb23 100644
--- a/examples/guided_onboarding_example/tsconfig.json
+++ b/examples/guided_onboarding_example/tsconfig.json
@@ -17,6 +17,7 @@
     "@kbn/i18n",
     "@kbn/guided-onboarding",
     "@kbn/shared-ux-router",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",