[SharedUX/React render] prevent double-nested EuiProvider (elastic#18…

…2005) ## Summary Addresses extraneous errors discovered in elastic#180819 --------- Co-authored-by: Clint Andrew Hall <clint@clintandrewhall.com> Co-authored-by: Tiago Costa <tiago.costa@elastic.co>
yuliacech · May 3, 2024 · a9e55d7 · a9e55d7
1 parent 3381afe
commit a9e55d7
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 11 deletions.
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
@@ -31,7 +31,7 @@ pageLoadAssetSize:
   datasetQuality: 50624
   dataViewEditor: 28082
   dataViewFieldEditor: 27000
-  dataViewManagement: 5176
+  dataViewManagement: 5300
   dataViews: 65000
   dataVisualizer: 27530
   devTools: 38637
@@ -51,7 +51,7 @@ pageLoadAssetSize:
   expressionLegacyMetricVis: 23121
   expressionMetric: 22238
   expressionMetricVis: 23121
-  expressionPartitionVis: 29000
+  expressionPartitionVis: 29700
   expressionRepeatImage: 22341
   expressionRevealImage: 25675
   expressions: 140958

diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js
@@ -60,6 +60,7 @@ module.exports = (_, argv) => {
         // modules from npm
         '@elastic/charts',
         '@elastic/eui',
+        '@elastic/eui/optimize/es/components/provider/nested',
         '@elastic/eui/optimize/es/services',
         '@elastic/eui/optimize/es/services/format',
         '@elastic/eui/dist/eui_charts_theme',

diff --git a/packages/kbn-ui-shared-deps-src/src/definitions.js b/packages/kbn-ui-shared-deps-src/src/definitions.js
@@ -71,6 +71,8 @@ const externals = {
   '@elastic/charts': '__kbnSharedDeps__.ElasticCharts',
   '@kbn/datemath': '__kbnSharedDeps__.KbnDatemath',
   '@elastic/eui': '__kbnSharedDeps__.ElasticEui',
+  '@elastic/eui/lib/components/provider/nested':
+    '__kbnSharedDeps__.ElasticEuiLibComponentsUseIsNestedEuiProvider',
   '@elastic/eui/lib/services': '__kbnSharedDeps__.ElasticEuiLibServices',
   '@elastic/eui/lib/services/format': '__kbnSharedDeps__.ElasticEuiLibServicesFormat',
   '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme',

diff --git a/packages/kbn-ui-shared-deps-src/src/entry.js b/packages/kbn-ui-shared-deps-src/src/entry.js
@@ -39,6 +39,7 @@ export const Rxjs = require('rxjs');
 export const ElasticNumeral = require('@elastic/numeral');
 export const ElasticCharts = require('@elastic/charts');
 export const ElasticEui = require('@elastic/eui');
+export const ElasticEuiLibComponentsUseIsNestedEuiProvider = require('@elastic/eui/optimize/es/components/provider/nested');
 export const ElasticEuiLibServices = require('@elastic/eui/optimize/es/services');
 export const ElasticEuiLibServicesFormat = require('@elastic/eui/optimize/es/services/format');
 export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme');

diff --git a/packages/react/kibana_context/root/root_provider.tsx b/packages/react/kibana_context/root/root_provider.tsx
@@ -6,10 +6,16 @@
  * Side Public License, v 1.
  */
 
-import type { I18nStart } from '@kbn/core-i18n-browser';
-import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
 import React, { FC, PropsWithChildren } from 'react';
 
+import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
+import type { I18nStart } from '@kbn/core-i18n-browser';
+
+// @ts-expect-error EUI exports this component internally, but Kibana isn't picking it up its types
+import { useIsNestedEuiProvider } from '@elastic/eui/lib/components/provider/nested';
+// @ts-expect-error EUI exports this component internally, but Kibana isn't picking it up its types
+import { emitEuiProviderWarning } from '@elastic/eui/lib/services/theme/warning';
+
 import { KibanaEuiProvider, type KibanaEuiProviderProps } from './eui_provider';
 
 /** Props for the KibanaRootContextProvider */
@@ -38,8 +44,19 @@ export const KibanaRootContextProvider: FC<PropsWithChildren<KibanaRootContextPr
   children,
   i18n,
   ...props
-}) => (
-  <KibanaEuiProvider {...props}>
-    <i18n.Context>{children}</i18n.Context>
-  </KibanaEuiProvider>
-);
+}) => {
+  const hasEuiProvider = useIsNestedEuiProvider();
+
+  if (hasEuiProvider) {
+    emitEuiProviderWarning(
+      'KibanaRootContextProvider has likely been nested in this React tree, either by direct reference or by KibanaRenderContextProvider.  The result of this nesting is a nesting of EuiProvider, which has negative effects.  Check your React tree for nested Kibana context providers.'
+    );
+    return <i18n.Context>{children}</i18n.Context>;
+  } else {
+    return (
+      <KibanaEuiProvider {...props}>
+        <i18n.Context>{children}</i18n.Context>
+      </KibanaEuiProvider>
+    );
+  }
+};
diff --git a/packages/react/kibana_context/theme/theme_provider.tsx b/packages/react/kibana_context/theme/theme_provider.tsx
@@ -11,9 +11,9 @@ import useObservable from 'react-use/lib/useObservable';
 
 import { EuiThemeProvider, EuiThemeProviderProps } from '@elastic/eui';
 
-// @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types
+// @ts-expect-error EUI exports this component internally, but Kibana isn't picking it up its types
 import { useIsNestedEuiProvider } from '@elastic/eui/lib/components/provider/nested';
-// @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types
+// @ts-expect-error EUI exports this component internally, but Kibana isn't picking it up its types
 import { emitEuiProviderWarning } from '@elastic/eui/lib/services/theme/warning';
 
 import { KibanaEuiProvider } from '@kbn/react-kibana-context-root';