[Visualizations] Remove usage of deprecated React rendering utilities (…

…elastic#181491) ## 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 focuses on code within **Visualization team**. <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)
davismcphee · Apr 26, 2024 · f21d6e4 · f21d6e4
1 parent 9203342
commit f21d6e4
Show file tree

Hide file tree

Showing 45 changed files with 263 additions and 262 deletions.
diff --git a/src/plugins/chart_expressions/expression_gauge/kibana.jsonc b/src/plugins/chart_expressions/expression_gauge/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ],
     "extraPublicDirs": [
       "common"

diff --git a/...plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx b/...plugins/chart_expressions/expression_gauge/public/expression_renderers/gauge_renderer.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { PersistedState } from '@kbn/visualizations-plugin/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers';
 import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -90,7 +90,7 @@ export const gaugeRenderer: (
 
     const { GaugeComponent } = await import('../components/gauge_component');
     render(
-      <KibanaThemeProvider theme$={core.theme.theme$}>
+      <KibanaRenderContextProvider {...core}>
         <div className="gauge-container" data-test-subj="gaugeChart">
           <GaugeComponent
             {...config}
@@ -102,7 +102,7 @@ export const gaugeRenderer: (
             uiState={handlers.uiState as PersistedState}
           />
         </div>
-      </KibanaThemeProvider>,
+      </KibanaRenderContextProvider>,
       domNode
     );
   },

diff --git a/src/plugins/chart_expressions/expression_gauge/tsconfig.json b/src/plugins/chart_expressions/expression_gauge/tsconfig.json
@@ -23,10 +23,10 @@
     "@kbn/test-jest-helpers",
     "@kbn/i18n-react",
     "@kbn/kibana-utils-plugin",
-    "@kbn/kibana-react-plugin",
     "@kbn/analytics",
     "@kbn/chart-icons",
     "@kbn/chart-expressions-common",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/chart_expressions/expression_heatmap/kibana.jsonc b/src/plugins/chart_expressions/expression_heatmap/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ],
     "extraPublicDirs": [
       "common"

diff --git a/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx b/...ins/chart_expressions/expression_heatmap/public/expression_renderers/heatmap_renderer.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { getTimeZone } from '@kbn/visualization-utils';
 import type { PersistedState } from '@kbn/visualizations-plugin/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers';
 import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
 import { METRIC_TYPE } from '@kbn/analytics';
@@ -19,7 +19,6 @@ import {
   extractContainerType,
   extractVisualizationType,
 } from '@kbn/chart-expressions-common';
-import { I18nProvider } from '@kbn/i18n-react';
 import { MultiFilterEvent } from '../../common/types';
 import { ExpressionHeatmapPluginStart } from '../plugin';
 import {
@@ -99,29 +98,27 @@ export const heatmapRenderer: (
     const { isInteractive } = handlers;
 
     render(
-      <KibanaThemeProvider theme$={core.theme.theme$}>
-        <I18nProvider>
-          <div className="heatmap-container" data-test-subj="heatmapChart">
-            <HeatmapComponent
-              {...config}
-              onClickValue={onClickValue}
-              onSelectRange={onSelectRange}
-              timeZone={timeZone}
-              datatableUtilities={getDatatableUtilities()}
-              formatFactory={getFormatService().deserialize}
-              chartsThemeService={plugins.charts.theme}
-              paletteService={getPaletteService()}
-              renderComplete={renderComplete}
-              uiState={handlers.uiState as PersistedState}
-              interactive={isInteractive()}
-              chartsActiveCursorService={plugins.charts.activeCursor}
-              syncTooltips={config.syncTooltips}
-              syncCursor={config.syncCursor}
-              onClickMultiValue={onClickMultiValue}
-            />
-          </div>
-        </I18nProvider>
-      </KibanaThemeProvider>,
+      <KibanaRenderContextProvider {...core}>
+        <div className="heatmap-container" data-test-subj="heatmapChart">
+          <HeatmapComponent
+            {...config}
+            onClickValue={onClickValue}
+            onSelectRange={onSelectRange}
+            timeZone={timeZone}
+            datatableUtilities={getDatatableUtilities()}
+            formatFactory={getFormatService().deserialize}
+            chartsThemeService={plugins.charts.theme}
+            paletteService={getPaletteService()}
+            renderComplete={renderComplete}
+            uiState={handlers.uiState as PersistedState}
+            interactive={isInteractive()}
+            chartsActiveCursorService={plugins.charts.activeCursor}
+            syncTooltips={config.syncTooltips}
+            syncCursor={config.syncCursor}
+            onClickMultiValue={onClickMultiValue}
+          />
+        </div>
+      </KibanaRenderContextProvider>,
       domNode
     );
   },

diff --git a/src/plugins/chart_expressions/expression_heatmap/tsconfig.json b/src/plugins/chart_expressions/expression_heatmap/tsconfig.json
@@ -24,11 +24,10 @@
     "@kbn/kibana-utils-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/chart-icons",
-    "@kbn/kibana-react-plugin",
     "@kbn/analytics",
     "@kbn/chart-expressions-common",
-    "@kbn/i18n-react",
     "@kbn/visualization-utils",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/chart_expressions/expression_legacy_metric/kibana.jsonc b/src/plugins/chart_expressions/expression_legacy_metric/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ]
   }
 }
diff --git a/..._expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx b/..._expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx
@@ -9,7 +9,7 @@
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { METRIC_TYPE } from '@kbn/analytics';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import {
   ExpressionValueVisDimension,
   VisualizationContainer,
@@ -109,7 +109,7 @@ export const getMetricVisRenderer: (
     handlers.event(chartSizeEvent);
 
     render(
-      <KibanaThemeProvider theme$={core.theme.theme$}>
+      <KibanaRenderContextProvider {...core}>
         <VisualizationContainer
           data-test-subj="legacyMtrVis"
           className="legacyMtrVis"
@@ -125,7 +125,7 @@ export const getMetricVisRenderer: (
             filterable={filterable}
           />
         </VisualizationContainer>
-      </KibanaThemeProvider>,
+      </KibanaRenderContextProvider>,
       domNode
     );
   },

diff --git a/src/plugins/chart_expressions/expression_legacy_metric/tsconfig.json b/src/plugins/chart_expressions/expression_legacy_metric/tsconfig.json
@@ -23,9 +23,9 @@
     "@kbn/utility-types",
     "@kbn/kibana-utils-plugin",
     "@kbn/analytics",
-    "@kbn/kibana-react-plugin",
     "@kbn/ui-theme",
     "@kbn/chart-expressions-common",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/chart_expressions/expression_metric/kibana.jsonc b/src/plugins/chart_expressions/expression_metric/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ]
   }
 }
diff --git a/...s/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx b/...s/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers';
 import { css } from '@emotion/react';
 import { StartServicesGetter } from '@kbn/kibana-utils-plugin/public';
@@ -85,7 +85,7 @@ export const getMetricVisRenderer = (
 
       const { MetricVis } = await import('../components/metric_vis');
       render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>
+        <KibanaRenderContextProvider {...core}>
           <div
             data-test-subj="mtrVis"
             css={css`
@@ -105,7 +105,7 @@ export const getMetricVisRenderer = (
               overrides={overrides}
             />
           </div>
-        </KibanaThemeProvider>,
+        </KibanaRenderContextProvider>,
         domNode
       );
     },

diff --git a/src/plugins/chart_expressions/expression_metric/tsconfig.json b/src/plugins/chart_expressions/expression_metric/tsconfig.json
@@ -23,9 +23,9 @@
     "@kbn/coloring",
     "@kbn/kibana-utils-plugin",
     "@kbn/ui-theme",
-    "@kbn/kibana-react-plugin",
     "@kbn/analytics",
     "@kbn/chart-expressions-common",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/chart_expressions/expression_partition_vis/kibana.jsonc b/src/plugins/chart_expressions/expression_partition_vis/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ],
     "extraPublicDirs": [
       "common"

diff --git a/...pressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx b/...pressions/expression_partition_vis/public/expression_renderers/partition_vis_renderer.tsx
@@ -8,7 +8,6 @@
 
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { I18nProvider } from '@kbn/i18n-react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 import type {
@@ -18,7 +17,7 @@ import type {
 } from '@kbn/expressions-plugin/public';
 import type { PersistedState } from '@kbn/visualizations-plugin/public';
 import { withSuspense } from '@kbn/presentation-util-plugin/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
 import {
@@ -130,28 +129,26 @@ export const getPartitionVisRenderer: (
     handlers.event(chartSizeEvent);
 
     render(
-      <I18nProvider>
-        <KibanaThemeProvider theme$={core.theme.theme$}>
-          <div css={partitionVisRenderer}>
-            <PartitionVisComponent
-              chartsThemeService={plugins.charts.theme}
-              palettesRegistry={palettesRegistry}
-              visParams={visConfig}
-              visData={visData}
-              visType={visConfig.isDonut ? ChartTypes.DONUT : visType}
-              renderComplete={renderComplete}
-              fireEvent={handlers.event}
-              interactive={handlers.isInteractive()}
-              uiState={handlers.uiState as PersistedState}
-              services={{ data: plugins.data, fieldFormats: plugins.fieldFormats }}
-              syncColors={syncColors}
-              columnCellValueActions={columnCellValueActions}
-              overrides={overrides}
-              hasOpenedOnAggBasedEditor={hasOpenedOnAggBasedEditor}
-            />
-          </div>
-        </KibanaThemeProvider>
-      </I18nProvider>,
+      <KibanaRenderContextProvider {...core}>
+        <div css={partitionVisRenderer}>
+          <PartitionVisComponent
+            chartsThemeService={plugins.charts.theme}
+            palettesRegistry={palettesRegistry}
+            visParams={visConfig}
+            visData={visData}
+            visType={visConfig.isDonut ? ChartTypes.DONUT : visType}
+            renderComplete={renderComplete}
+            fireEvent={handlers.event}
+            interactive={handlers.isInteractive()}
+            uiState={handlers.uiState as PersistedState}
+            services={{ data: plugins.data, fieldFormats: plugins.fieldFormats }}
+            syncColors={syncColors}
+            columnCellValueActions={columnCellValueActions}
+            overrides={overrides}
+            hasOpenedOnAggBasedEditor={hasOpenedOnAggBasedEditor}
+          />
+        </div>
+      </KibanaRenderContextProvider>,
       domNode
     );
   },

diff --git a/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json b/src/plugins/chart_expressions/expression_partition_vis/tsconfig.json
@@ -25,11 +25,11 @@
     "@kbn/kibana-utils-plugin",
     "@kbn/test-jest-helpers",
     "@kbn/i18n-react",
-    "@kbn/kibana-react-plugin",
     "@kbn/analytics",
     "@kbn/chart-icons",
     "@kbn/chart-expressions-common",
     "@kbn/cell-actions",
+    "@kbn/react-kibana-context-render",
   ],
   "exclude": [
     "target/**/*",

diff --git a/src/plugins/chart_expressions/expression_tagcloud/kibana.jsonc b/src/plugins/chart_expressions/expression_tagcloud/kibana.jsonc
@@ -19,8 +19,7 @@
       "usageCollection"
     ],
     "requiredBundles": [
-      "kibanaUtils",
-      "kibanaReact"
+      "kibanaUtils"
     ],
     "extraPublicDirs": [
       "common"