[ObservabilitySolution] Remove usage of deprecated modules, Part II (#…

…182195) ## Summary Partially addresses elastic/kibana-team#805 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This is the **2nd** PR to focus on code within **Observability**, following #180844. <img width="1196" alt="image" src="https://github.com/elastic/kibana/assets/908371/7f8d3707-94f0-4746-8dd5-dd858ce027f9"> Note: this also makes inclusion of `i18n` and `analytics` dependencies consistent. Analytics is an optional dependency for the SharedUX modules, which wrap `KibanaErrorBoundaryProvider` and is designed to capture telemetry about errors that are caught in the error boundary. ### Checklist Delete any items that are not applicable to this PR. - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · May 15, 2024 · 90e466a · 90e466a
1 parent d982bae
commit 90e466a
Show file tree

Hide file tree

Showing 33 changed files with 217 additions and 198 deletions.
diff --git a/x-pack/plugins/observability_solution/apm/public/application/index.tsx b/x-pack/plugins/observability_solution/apm/public/application/index.tsx
@@ -9,7 +9,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import type { ObservabilityRuleTypeRegistry } from '@kbn/observability-plugin/public';
 import { AppMountParameters, CoreStart, APP_WRAPPER_CLASS } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { ConfigSchema } from '..';
 import { ApmPluginSetupDeps, ApmPluginStartDeps, ApmServices } from '../plugin';
 import { createCallApmApi } from '../services/rest/create_call_apm_api';
@@ -69,21 +70,23 @@ export const renderApp = ({
   element.classList.add(APP_WRAPPER_CLASS);
 
   ReactDOM.render(
-    <KibanaThemeProvider
-      theme$={theme$}
-      modify={{
-        breakpoint: {
-          xxl: 1600,
-          xxxl: 2000,
-        },
-      }}
-    >
-      <ApmAppRoot
-        apmPluginContextValue={apmPluginContextValue}
-        pluginsStart={pluginsStart}
-        apmServices={apmServices}
-      />
-    </KibanaThemeProvider>,
+    <KibanaRenderContextProvider {...coreStart}>
+      <KibanaThemeProvider
+        theme={{ theme$ }}
+        modify={{
+          breakpoint: {
+            xxl: 1600,
+            xxxl: 2000,
+          },
+        }}
+      >
+        <ApmAppRoot
+          apmPluginContextValue={apmPluginContextValue}
+          pluginsStart={pluginsStart}
+          apmServices={apmServices}
+        />
+      </KibanaThemeProvider>
+    </KibanaRenderContextProvider>,
     element
   );
   return () => {

diff --git a/x-pack/plugins/observability_solution/apm/tsconfig.json b/x-pack/plugins/observability_solution/apm/tsconfig.json
@@ -118,7 +118,9 @@
     "@kbn/search-types",
     "@kbn/logs-data-access-plugin",
     "@kbn/ebt-tools",
-    "@kbn/presentation-publishing"
+    "@kbn/presentation-publishing",
+    "@kbn/react-kibana-context-render",
+    "@kbn/react-kibana-context-theme"
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx b/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx
@@ -8,7 +8,8 @@
 import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import React, { FC, PropsWithChildren } from 'react';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { NavigationWarningPromptProvider } from '@kbn/observability-shared-plugin/public';
 import { TriggersAndActionsUIPublicPluginStart } from '@kbn/triggers-actions-ui-plugin/public';
@@ -60,7 +61,6 @@ export const CoreProviders: FC<PropsWithChildren<CoreProvidersProps>> = ({
   core,
   pluginStart,
   plugins,
-  theme$,
   kibanaEnvironment,
 }) => {
   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(
@@ -72,19 +72,19 @@ export const CoreProviders: FC<PropsWithChildren<CoreProvidersProps>> = ({
   const KibanaEnvContextForPluginProvider = useKibanaEnvironmentContextProvider(kibanaEnvironment);
 
   return (
-    <RedirectAppLinks
-      coreStart={{
-        application: core.application,
-      }}
-    >
-      <KibanaContextProviderForPlugin services={{ ...core, ...plugins, ...pluginStart }}>
-        <KibanaEnvContextForPluginProvider kibanaEnv={kibanaEnvironment}>
-          <core.i18n.Context>
-            <KibanaThemeProvider theme$={theme$}>{children}</KibanaThemeProvider>
-          </core.i18n.Context>
-        </KibanaEnvContextForPluginProvider>
-      </KibanaContextProviderForPlugin>
-    </RedirectAppLinks>
+    <KibanaRenderContextProvider {...core}>
+      <RedirectAppLinks
+        coreStart={{
+          application: core.application,
+        }}
+      >
+        <KibanaContextProviderForPlugin services={{ ...core, ...plugins, ...pluginStart }}>
+          <KibanaEnvContextForPluginProvider kibanaEnv={kibanaEnvironment}>
+            {children}
+          </KibanaEnvContextForPluginProvider>
+        </KibanaContextProviderForPlugin>
+      </RedirectAppLinks>
+    </KibanaRenderContextProvider>
   );
 };
 

diff --git a/x-pack/plugins/observability_solution/infra/public/apps/legacy_app.tsx b/x-pack/plugins/observability_solution/infra/public/apps/legacy_app.tsx
@@ -5,20 +5,25 @@
  * 2.0.
  */
 
-import { EuiErrorBoundary } from '@elastic/eui';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { createBrowserHistory, History } from 'history';
-import { AppMountParameters } from '@kbn/core/public';
+import { AppMountParameters, CoreStart } from '@kbn/core/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { RouteProps } from 'react-router-dom';
 import { Router, Routes, Route } from '@kbn/shared-ux-router';
 
 // This exists purely to facilitate legacy app/infra URL redirects.
 // It will be removed in 8.0.0.
-export async function renderApp({ element }: AppMountParameters) {
+export async function renderApp(core: CoreStart, { element }: AppMountParameters) {
   const history = createBrowserHistory();
 
-  ReactDOM.render(<LegacyApp history={history} />, element);
+  ReactDOM.render(
+    <KibanaRenderContextProvider {...core}>
+      <LegacyApp history={history} />
+    </KibanaRenderContextProvider>,
+    element
+  );
 
   return () => {
     ReactDOM.unmountComponentAtNode(element);
@@ -27,72 +32,67 @@ export async function renderApp({ element }: AppMountParameters) {
 
 const LegacyApp: React.FunctionComponent<{ history: History<unknown> }> = ({ history }) => {
   return (
-    <EuiErrorBoundary>
-      <Router history={history}>
-        <Routes>
-          <Route
-            path={'/'}
-            render={({ location }: RouteProps) => {
-              if (!location) {
-                return null;
-              }
+    <Router history={history}>
+      <Routes>
+        <Route
+          path={'/'}
+          render={({ location }: RouteProps) => {
+            if (!location) {
+              return null;
+            }
 
-              let nextPath = '';
-              let nextBasePath = '';
-              let nextSearch;
+            let nextPath = '';
+            let nextBasePath = '';
+            let nextSearch;
 
-              if (
-                location.hash.indexOf('#infrastructure') > -1 ||
-                location.hash.indexOf('#/infrastructure') > -1
-              ) {
-                nextPath = location.hash.replace(
-                  new RegExp(
-                    '#infrastructure/|#/infrastructure/|#/infrastructure|#infrastructure',
-                    'g'
-                  ),
-                  ''
-                );
-                nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
-              } else if (
-                location.hash.indexOf('#logs') > -1 ||
-                location.hash.indexOf('#/logs') > -1
-              ) {
-                nextPath = location.hash.replace(
-                  new RegExp('#logs/|#/logs/|#/logs|#logs', 'g'),
-                  ''
-                );
-                nextBasePath = location.pathname.replace('app/infra', 'app/logs');
-              } else {
-                // This covers /app/infra and /app/infra/home (both of which used to render
-                // the metrics inventory page)
-                nextPath = 'inventory';
-                nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
-                nextSearch = undefined;
-              }
+            if (
+              location.hash.indexOf('#infrastructure') > -1 ||
+              location.hash.indexOf('#/infrastructure') > -1
+            ) {
+              nextPath = location.hash.replace(
+                new RegExp(
+                  '#infrastructure/|#/infrastructure/|#/infrastructure|#infrastructure',
+                  'g'
+                ),
+                ''
+              );
+              nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
+            } else if (
+              location.hash.indexOf('#logs') > -1 ||
+              location.hash.indexOf('#/logs') > -1
+            ) {
+              nextPath = location.hash.replace(new RegExp('#logs/|#/logs/|#/logs|#logs', 'g'), '');
+              nextBasePath = location.pathname.replace('app/infra', 'app/logs');
+            } else {
+              // This covers /app/infra and /app/infra/home (both of which used to render
+              // the metrics inventory page)
+              nextPath = 'inventory';
+              nextBasePath = location.pathname.replace('app/infra', 'app/metrics');
+              nextSearch = undefined;
+            }
 
-              // app/infra#infrastructure/metrics/:type/:node was changed to app/metrics/detail/:type/:node, this
-              // accounts for that edge case
-              nextPath = nextPath.replace('metrics/', 'detail/');
+            // app/infra#infrastructure/metrics/:type/:node was changed to app/metrics/detail/:type/:node, this
+            // accounts for that edge case
+            nextPath = nextPath.replace('metrics/', 'detail/');
 
-              // Query parameters (location.search) will arrive as part of location.hash and not location.search
-              const nextPathParts = nextPath.split('?');
-              nextPath = nextPathParts[0];
-              nextSearch = nextPathParts[1] ? nextPathParts[1] : undefined;
+            // Query parameters (location.search) will arrive as part of location.hash and not location.search
+            const nextPathParts = nextPath.split('?');
+            nextPath = nextPathParts[0];
+            nextSearch = nextPathParts[1] ? nextPathParts[1] : undefined;
 
-              const builtPathname = `${nextBasePath}/${nextPath}`;
-              const builtSearch = nextSearch ? `?${nextSearch}` : '';
+            const builtPathname = `${nextBasePath}/${nextPath}`;
+            const builtSearch = nextSearch ? `?${nextSearch}` : '';
 
-              let nextUrl = `${builtPathname}${builtSearch}`;
+            let nextUrl = `${builtPathname}${builtSearch}`;
 
-              nextUrl = nextUrl.replace('//', '/');
+            nextUrl = nextUrl.replace('//', '/');
 
-              window.location.href = nextUrl;
+            window.location.href = nextUrl;
 
-              return null;
-            }}
-          />
-        </Routes>
-      </Router>
-    </EuiErrorBoundary>
+            return null;
+          }}
+        />
+      </Routes>
+    </Router>
   );
 };
diff --git a/x-pack/plugins/observability_solution/infra/public/plugin.ts b/x-pack/plugins/observability_solution/infra/public/plugin.ts
@@ -343,9 +343,10 @@ export class Plugin implements InfraClientPluginClass {
       title: 'infra',
       visibleIn: [],
       mount: async (params: AppMountParameters) => {
+        const [coreStart] = await core.getStartServices();
         const { renderApp } = await import('./apps/legacy_app');
 
-        return renderApp(params);
+        return renderApp(coreStart, params);
       },
     });
 

diff --git a/x-pack/plugins/observability_solution/infra/public/test_utils/use_global_storybook_theme.tsx b/x-pack/plugins/observability_solution/infra/public/test_utils/use_global_storybook_theme.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useMemo, useState, FC, PropsWithChildren } from 'reac
 import { BehaviorSubject } from 'rxjs';
 import type { CoreTheme } from '@kbn/core/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 
 type StoryContext = Parameters<DecoratorFn>[1];
 
@@ -35,7 +35,7 @@ export const GlobalStorybookThemeProviders: FC<
 > = ({ children, storyContext }) => {
   const { theme, theme$ } = useGlobalStorybookTheme(storyContext);
   return (
-    <KibanaThemeProvider theme$={theme$}>
+    <KibanaThemeProvider theme={{ theme$ }}>
       <EuiThemeProvider darkMode={theme.darkMode}>{children}</EuiThemeProvider>
     </KibanaThemeProvider>
   );

diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json
@@ -99,7 +99,9 @@
     "@kbn/aiops-log-rate-analysis",
     "@kbn/react-hooks",
     "@kbn/search-types",
-    "@kbn/router-utils"
+    "@kbn/router-utils",
+    "@kbn/react-kibana-context-render",
+    "@kbn/react-kibana-context-theme"
   ],
   "exclude": [
     "target/**/*"

diff --git a/...ugins/observability_solution/logs_shared/public/test_utils/use_global_storybook_theme.tsx b/...ugins/observability_solution/logs_shared/public/test_utils/use_global_storybook_theme.tsx
@@ -10,7 +10,7 @@ import React, { useEffect, useMemo, useState, FC, PropsWithChildren } from 'reac
 import { BehaviorSubject } from 'rxjs';
 import type { CoreTheme } from '@kbn/core/public';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 
 type StoryContext = Parameters<DecoratorFn>[1];
 
@@ -35,7 +35,7 @@ export const GlobalStorybookThemeProviders: FC<
 > = ({ children, storyContext }) => {
   const { theme, theme$ } = useGlobalStorybookTheme(storyContext);
   return (
-    <KibanaThemeProvider theme$={theme$}>
+    <KibanaThemeProvider theme={{ theme$ }}>
       <EuiThemeProvider darkMode={theme.darkMode}>{children}</EuiThemeProvider>
     </KibanaThemeProvider>
   );

diff --git a/x-pack/plugins/observability_solution/logs_shared/tsconfig.json b/x-pack/plugins/observability_solution/logs_shared/tsconfig.json
@@ -37,6 +37,7 @@
     "@kbn/share-plugin",
     "@kbn/shared-ux-utility",
     "@kbn/search-types",
-    "@kbn/discover-shared-plugin"
+    "@kbn/discover-shared-plugin",
+    "@kbn/react-kibana-context-theme"
   ]
 }
diff --git a/x-pack/plugins/observability_solution/metrics_data_access/public/apps/common_providers.tsx b/x-pack/plugins/observability_solution/metrics_data_access/public/apps/common_providers.tsx
@@ -5,25 +5,24 @@
  * 2.0.
  */
 
-import { AppMountParameters, CoreStart } from '@kbn/core/public';
+import { CoreStart } from '@kbn/core/public';
 import React from 'react';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { useKibanaContextForPluginProvider } from '../hooks/use_kibana';
 
 export interface CoreProvidersProps {
   children?: React.ReactNode;
   core: CoreStart;
-  theme$: AppMountParameters['theme$'];
 }
 
-export const CoreProviders: React.FC<CoreProvidersProps> = ({ children, core, theme$ }) => {
+export const CoreProviders: React.FC<CoreProvidersProps> = ({ children, core }) => {
   const KibanaContextProviderForPlugin = useKibanaContextForPluginProvider(core);
 
   return (
-    <KibanaContextProviderForPlugin services={{ ...core }}>
-      <core.i18n.Context>
-        <KibanaThemeProvider theme$={theme$}>{children}</KibanaThemeProvider>
-      </core.i18n.Context>
-    </KibanaContextProviderForPlugin>
+    <KibanaRenderContextProvider {...core}>
+      <KibanaContextProviderForPlugin services={{ ...core }}>
+        {children}
+      </KibanaContextProviderForPlugin>
+    </KibanaRenderContextProvider>
   );
 };
diff --git a/...ents/infrastructure_node_metrics_tables/container/create_lazy_container_metrics_table.tsx b/...ents/infrastructure_node_metrics_tables/container/create_lazy_container_metrics_table.tsx
@@ -21,7 +21,6 @@ export function createLazyContainerMetricsTable(core: CoreStart, metricsClient:
         <LazyIntegratedContainerMetricsTable
           core={core}
           metricsClient={metricsClient}
-          theme$={core.theme.theme$}
           sourceId={sourceId || 'default'}
           timerange={timerange}
           filterClauseDsl={filterClauseDsl}

diff --git a/...lic/components/infrastructure_node_metrics_tables/host/create_lazy_host_metrics_table.tsx b/...lic/components/infrastructure_node_metrics_tables/host/create_lazy_host_metrics_table.tsx
@@ -19,7 +19,6 @@ export function createLazyHostMetricsTable(core: CoreStart, metricsClient: Metri
         <LazyIntegratedHostMetricsTable
           core={core}
           metricsClient={metricsClient}
-          theme$={core.theme.theme$}
           sourceId={sourceId || 'default'}
           timerange={timerange}
           filterClauseDsl={filterClauseDsl}

diff --git a/...ublic/components/infrastructure_node_metrics_tables/pod/create_lazy_pod_metrics_table.tsx b/...ublic/components/infrastructure_node_metrics_tables/pod/create_lazy_pod_metrics_table.tsx
@@ -19,7 +19,6 @@ export function createLazyPodMetricsTable(core: CoreStart, metricsClient: Metric
         <LazyIntegratedPodMetricsTable
           core={core}
           metricsClient={metricsClient}
-          theme$={core.theme.theme$}
           sourceId={sourceId || 'default'}
           timerange={timerange}
           filterClauseDsl={filterClauseDsl}