[EuiProvider] Fix Kibana-Core code (elastic#183873)

Fixes needed for elastic#180819
rshen91 · May 29, 2024 · 07593e1 · 07593e1
1 parent d28729c
commit 07593e1
Show file tree

Hide file tree

Showing 31 changed files with 291 additions and 118 deletions.
diff --git a/examples/routing_example/public/app.tsx b/examples/routing_example/public/app.tsx
@@ -16,6 +16,7 @@ import {
   EuiHorizontalRule,
   EuiListGroup,
 } from '@elastic/eui';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { RandomNumberRouteExample } from './random_number_example';
 import { RandomNumberBetweenRouteExample } from './random_number_between_example';
 import { Services } from './services';
@@ -30,56 +31,59 @@ function RoutingExplorer({
   addSuccessToast,
   postMessage,
   getMessageById,
+  startServices,
 }: Props) {
   return (
-    <EuiPageTemplate>
-      <EuiPageTemplate.Header>
-        <EuiText>
-          <h1>Routing examples</h1>
-        </EuiText>
-      </EuiPageTemplate.Header>
-      <EuiPageTemplate.Section>
-        <EuiPageSection>
+    <KibanaRenderContextProvider {...startServices}>
+      <EuiPageTemplate>
+        <EuiPageTemplate.Header>
           <EuiText>
-            <EuiListGroup
-              listItems={[
-                {
-                  label: 'IRouter API docs',
-                  href: 'https://github.com/elastic/kibana/blob/main/docs/development/core/server/kibana-plugin-core-server.irouter.md',
-                  iconType: 'logoGithub',
-                  target: '_blank',
-                  size: 's',
-                },
-                {
-                  label: 'HttpHandler (core.http.fetch) API docs',
-                  href: 'https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.httphandler.md',
-                  iconType: 'logoGithub',
-                  target: '_blank',
-                  size: 's',
-                },
-                {
-                  label: 'Conventions',
-                  href: 'https://github.com/elastic/kibana/tree/main/STYLEGUIDE.mdx#api-endpoints',
-                  iconType: 'logoGithub',
-                  target: '_blank',
-                  size: 's',
-                },
-              ]}
-            />
+            <h1>Routing examples</h1>
           </EuiText>
-          <EuiHorizontalRule />
-          <RandomNumberRouteExample fetchRandomNumber={fetchRandomNumber} />
-          <EuiHorizontalRule />
-          <RandomNumberBetweenRouteExample fetchRandomNumberBetween={fetchRandomNumberBetween} />
+        </EuiPageTemplate.Header>
+        <EuiPageTemplate.Section>
+          <EuiPageSection>
+            <EuiText>
+              <EuiListGroup
+                listItems={[
+                  {
+                    label: 'IRouter API docs',
+                    href: 'https://github.com/elastic/kibana/blob/main/docs/development/core/server/kibana-plugin-core-server.irouter.md',
+                    iconType: 'logoGithub',
+                    target: '_blank',
+                    size: 's',
+                  },
+                  {
+                    label: 'HttpHandler (core.http.fetch) API docs',
+                    href: 'https://github.com/elastic/kibana/blob/main/docs/development/core/public/kibana-plugin-core-public.httphandler.md',
+                    iconType: 'logoGithub',
+                    target: '_blank',
+                    size: 's',
+                  },
+                  {
+                    label: 'Conventions',
+                    href: 'https://github.com/elastic/kibana/tree/main/STYLEGUIDE.mdx#api-endpoints',
+                    iconType: 'logoGithub',
+                    target: '_blank',
+                    size: 's',
+                  },
+                ]}
+              />
+            </EuiText>
+            <EuiHorizontalRule />
+            <RandomNumberRouteExample fetchRandomNumber={fetchRandomNumber} />
+            <EuiHorizontalRule />
+            <RandomNumberBetweenRouteExample fetchRandomNumberBetween={fetchRandomNumberBetween} />
 
-          <EuiHorizontalRule />
-          <PostMessageRouteExample addSuccessToast={addSuccessToast} postMessage={postMessage} />
+            <EuiHorizontalRule />
+            <PostMessageRouteExample addSuccessToast={addSuccessToast} postMessage={postMessage} />
 
-          <EuiHorizontalRule />
-          <GetMessageRouteExample getMessageById={getMessageById} />
-        </EuiPageSection>
-      </EuiPageTemplate.Section>
-    </EuiPageTemplate>
+            <EuiHorizontalRule />
+            <GetMessageRouteExample getMessageById={getMessageById} />
+          </EuiPageSection>
+        </EuiPageTemplate.Section>
+      </EuiPageTemplate>
+    </KibanaRenderContextProvider>
   );
 }
 

diff --git a/examples/routing_example/public/services.ts b/examples/routing_example/public/services.ts
@@ -6,7 +6,12 @@
  * Side Public License, v 1.
  */
 
-import type { CoreStart } from '@kbn/core/public';
+import type {
+  AnalyticsServiceStart,
+  CoreStart,
+  I18nStart,
+  ThemeServiceStart,
+} from '@kbn/core/public';
 import type { IHttpFetchError } from '@kbn/core-http-browser';
 import {
   RANDOM_NUMBER_ROUTE_PATH,
@@ -15,7 +20,14 @@ import {
   INTERNAL_GET_MESSAGE_BY_ID_ROUTE,
 } from '../common';
 
+interface StartServices {
+  analytics: Pick<AnalyticsServiceStart, 'reportEvent'>;
+  i18n: I18nStart;
+  theme: Pick<ThemeServiceStart, 'theme$'>;
+}
+
 export interface Services {
+  startServices: StartServices;
   fetchRandomNumber: () => Promise<number | IHttpFetchError>;
   fetchRandomNumberBetween: (max: number) => Promise<number | IHttpFetchError>;
   postMessage: (message: string, id: string) => Promise<undefined | IHttpFetchError>;
@@ -24,7 +36,11 @@ export interface Services {
 }
 
 export function getServices(core: CoreStart): Services {
+  const { analytics, i18n, theme } = core;
+  const startServices = { analytics, i18n, theme };
+
   return {
+    startServices,
     addSuccessToast: (message: string) => core.notifications.toasts.addSuccess(message),
     fetchRandomNumber: async () => {
       try {

diff --git a/examples/routing_example/tsconfig.json b/examples/routing_example/tsconfig.json
@@ -19,5 +19,6 @@
     "@kbn/developer-examples-plugin",
     "@kbn/core-http-browser",
     "@kbn/config-schema",
+    "@kbn/react-kibana-context-render",
   ]
 }
diff --git a/packages/cloud/connection_details/kibana/global.ts b/packages/cloud/connection_details/kibana/global.ts
@@ -13,13 +13,13 @@ import type { SharePluginStart } from '@kbn/share-plugin/public';
 export interface ConnectionDetailsGlobalDependencies {
   start: {
     core: {
+      analytics: CoreStart['analytics'];
       i18n: CoreStart['i18n'];
       docLinks: CoreStart['docLinks'];
       theme: CoreStart['theme'];
       http: CoreStart['http'];
       application: CoreStart['application'];
       overlays: CoreStart['overlays'];
-      analytics?: CoreStart['analytics'];
     };
     plugins: {
       cloud?: CloudStart;

diff --git a/packages/cloud/connection_details/kibana/open_connection_details.tsx b/packages/cloud/connection_details/kibana/open_connection_details.tsx
@@ -8,6 +8,7 @@
 
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import * as conn from '..';
 
@@ -16,21 +17,26 @@ export interface OpenConnectionDetailsParams {
   start: {
     core: {
       overlays: CoreStart['overlays'];
+      i18n: CoreStart['i18n'];
+      analytics?: CoreStart['analytics'];
+      theme: CoreStart['theme'];
     };
   };
 }
 
 export const openConnectionDetails = async ({ props, start }: OpenConnectionDetailsParams) => {
   const mount = (element: HTMLElement) => {
     const reactElement = (
-      <conn.KibanaConnectionDetailsProvider
-        {...props}
-        onNavigation={() => {
-          flyoutRef?.close();
-        }}
-      >
-        <conn.ConnectionDetailsFlyoutContent />
-      </conn.KibanaConnectionDetailsProvider>
+      <KibanaRenderContextProvider {...start.core}>
+        <conn.KibanaConnectionDetailsProvider
+          {...props}
+          onNavigation={() => {
+            flyoutRef?.close();
+          }}
+        >
+          <conn.ConnectionDetailsFlyoutContent />
+        </conn.KibanaConnectionDetailsProvider>
+      </KibanaRenderContextProvider>
     );
     ReactDOM.render(reactElement, element);
 

diff --git a/packages/cloud/tsconfig.json b/packages/cloud/tsconfig.json
@@ -22,5 +22,6 @@
     "@kbn/cloud-plugin",
     "@kbn/share-plugin",
     "@kbn/security-plugin-types-server",
+    "@kbn/react-kibana-context-render",
   ]
 }
diff --git a/packages/core/apps/core-apps-browser-internal/src/core_app.ts b/packages/core/apps/core-apps-browser-internal/src/core_app.ts
@@ -18,12 +18,15 @@ import type {
   InternalApplicationSetup,
   InternalApplicationStart,
 } from '@kbn/core-application-browser-internal';
+import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
+import type { I18nStart } from '@kbn/core-i18n-browser';
+import type { ThemeServiceStart } from '@kbn/core-theme-browser';
+import { renderApp as renderStatusApp } from './status';
 import {
   renderApp as renderErrorApp,
   setupPublicBaseUrlConfigWarning,
   setupUrlOverflowDetection,
 } from './errors';
-import { renderApp as renderStatusApp } from './status';
 
 export interface CoreAppsServiceSetupDeps {
   application: InternalApplicationSetup;
@@ -38,6 +41,9 @@ export interface CoreAppsServiceStartDeps {
   http: InternalHttpStart;
   notifications: NotificationsStart;
   uiSettings: IUiSettingsClient;
+  analytics: AnalyticsServiceStart;
+  i18n: I18nStart;
+  theme: ThemeServiceStart;
 }
 
 export class CoreAppsService {
@@ -79,6 +85,9 @@ export class CoreAppsService {
     http,
     notifications,
     uiSettings,
+    analytics,
+    i18n,
+    theme,
   }: CoreAppsServiceStartDeps) {
     if (!application.history) {
       return;
@@ -91,7 +100,7 @@ export class CoreAppsService {
       uiSettings,
     });
 
-    setupPublicBaseUrlConfigWarning({ docLinks, http, notifications });
+    setupPublicBaseUrlConfigWarning({ docLinks, http, notifications, analytics, i18n, theme });
   }
 
   public stop() {

diff --git a/packages/core/apps/core-apps-browser-internal/src/errors/public_base_url.test.tsx b/packages/core/apps/core-apps-browser-internal/src/errors/public_base_url.test.tsx
@@ -6,15 +6,28 @@
  * Side Public License, v 1.
  */
 
+import { analyticsServiceMock } from '@kbn/core-analytics-browser-mocks';
 import { docLinksServiceMock } from '@kbn/core-doc-links-browser-mocks';
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
-
+import { i18nServiceMock } from '@kbn/core-i18n-browser-mocks';
 import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks';
+import { themeServiceMock } from '@kbn/core-theme-browser-mocks';
+
 import { setupPublicBaseUrlConfigWarning } from './public_base_url';
 
 describe('publicBaseUrl warning', () => {
   const docLinks = docLinksServiceMock.createStartContract();
   const notifications = notificationServiceMock.createStartContract();
+  const i18nStart = i18nServiceMock.createStartContract();
+  const analytics = analyticsServiceMock.createAnalyticsServiceStart();
+  const theme = themeServiceMock.createStartContract();
+  const startServices = {
+    notifications,
+    analytics,
+    i18n: i18nStart,
+    theme,
+  };
+  const addWarningToastSpy = jest.spyOn(notifications.toasts, 'addWarning');
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -24,38 +37,38 @@ describe('publicBaseUrl warning', () => {
     const http = httpServiceMock.createStartContract();
 
     setupPublicBaseUrlConfigWarning({
+      ...startServices,
       docLinks,
-      notifications,
       http,
       location: {
         hostname: 'localhost',
       } as Location,
     });
 
-    expect(notifications.toasts.addWarning).not.toHaveBeenCalled();
+    expect(addWarningToastSpy).not.toHaveBeenCalled();
   });
 
   it('does not show any toast on 127.0.0.1', () => {
     const http = httpServiceMock.createStartContract();
 
     setupPublicBaseUrlConfigWarning({
+      ...startServices,
       docLinks,
-      notifications,
       http,
       location: {
         hostname: '127.0.0.1',
       } as Location,
     });
 
-    expect(notifications.toasts.addWarning).not.toHaveBeenCalled();
+    expect(addWarningToastSpy).not.toHaveBeenCalled();
   });
 
   it('does not show toast if configured correctly', () => {
     const http = httpServiceMock.createStartContract({ publicBaseUrl: 'http://myhost.com' });
 
     setupPublicBaseUrlConfigWarning({
+      ...startServices,
       docLinks,
-      notifications,
       http,
       location: {
         hostname: 'myhost.com',
@@ -65,16 +78,16 @@ describe('publicBaseUrl warning', () => {
       } as Location,
     });
 
-    expect(notifications.toasts.addWarning).not.toHaveBeenCalled();
+    expect(addWarningToastSpy).not.toHaveBeenCalled();
   });
 
   describe('config missing toast', () => {
     it('adds toast if publicBaseUrl is missing', () => {
       const http = httpServiceMock.createStartContract({ publicBaseUrl: undefined });
 
       setupPublicBaseUrlConfigWarning({
+        ...startServices,
         docLinks,
-        notifications,
         http,
         location: {
           hostname: 'myhost.com',
@@ -84,7 +97,7 @@ describe('publicBaseUrl warning', () => {
         } as Location,
       });
 
-      expect(notifications.toasts.addWarning).toHaveBeenCalledWith({
+      expect(addWarningToastSpy).toHaveBeenCalledWith({
         title: 'Configuration recommended',
         text: expect.any(Function),
       });
@@ -94,8 +107,8 @@ describe('publicBaseUrl warning', () => {
       const http = httpServiceMock.createStartContract({ publicBaseUrl: undefined });
 
       setupPublicBaseUrlConfigWarning({
+        ...startServices,
         docLinks,
-        notifications,
         http,
         location: {
           hostname: 'myhost.com',
@@ -104,11 +117,11 @@ describe('publicBaseUrl warning', () => {
           },
         } as Location,
         storage: {
-          getItem: (id: string) => 'true',
+          getItem: (_id: string) => 'true',
         } as Storage,
       });
 
-      expect(notifications.toasts.addWarning).not.toHaveBeenCalled();
+      expect(addWarningToastSpy).not.toHaveBeenCalled();
     });
   });
 });