[User Experience App] Fix kibana context usage (#136611)

x-pack/plugins/observability/public/components/app/section/ux/index.tsx

@@ -8,6 +8,8 @@
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { CoreStart } from '@kbn/core/public';
+import { ObservabilityPublicPluginsStart } from '../../../..';
 import type { AppDataType } from '../../../shared/exploratory_view/types';
 import { SectionContainer } from '..';
 import { getDataHandler } from '../../../../data_handler';
@@ -22,7 +24,6 @@ import {
   SERVICE_NAME,
   TRANSACTION_DURATION,
 } from '../../../shared/exploratory_view/configurations/constants/elasticsearch_fieldnames';
-import { ObservabilityAppServices } from '../../../../application/types';
 
 interface Props {
   bucketSize: BucketSize;
@@ -30,16 +31,14 @@ interface Props {
 
 export function UXSection({ bucketSize }: Props) {
   const { forceUpdate, hasDataMap } = useHasData();
-  const { services } = useKibana<ObservabilityAppServices>();
+  const { services } = useKibana<ObservabilityPublicPluginsStart>();
   const { relativeStart, relativeEnd, absoluteStart, absoluteEnd, lastUpdated } =
     useDatePickerContext();
   const uxHasDataResponse = hasDataMap.ux;
   const serviceName = uxHasDataResponse?.serviceName as string;
 
   const ExploratoryViewEmbeddable = getExploratoryViewEmbeddable(
-    services.uiSettings,
-    services.dataViews,
-    services.lens
+    services as ObservabilityPublicPluginsStart & CoreStart
   );
 
   const seriesList: AllSeries = [

x-pack/plugins/observability/public/components/shared/exploratory_view/embeddable/index.tsx

@@ -8,10 +8,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
-import type { IUiSettingsClient } from '@kbn/core/public';
-import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
-import { LensPublicStart } from '@kbn/lens-plugin/public';
-import { useFetcher } from '../../../..';
+import type { CoreStart } from '@kbn/core/public';
+import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
+import { EuiErrorBoundary } from '@elastic/eui';
+import { ObservabilityPublicPluginsStart, useFetcher } from '../../../..';
 import type { ExploratoryEmbeddableProps, ExploratoryEmbeddableComponentProps } from './embeddable';
 import { ObservabilityDataViews } from '../../../../utils/observability_data_views';
 import type { DataViewState } from '../hooks/use_app_data_view';
@@ -28,10 +28,10 @@ function ExploratoryViewEmbeddable(props: ExploratoryEmbeddableComponentProps) {
 }
 
 export function getExploratoryViewEmbeddable(
-  uiSettings?: IUiSettingsClient,
-  dataViews?: DataViewsPublicPluginStart,
-  lens?: LensPublicStart
+  services: CoreStart & ObservabilityPublicPluginsStart
 ) {
+  const { lens, dataViews, uiSettings } = services;
+
   return (props: ExploratoryEmbeddableProps) => {
     if (!dataViews || !lens) {
       return null;
@@ -80,14 +80,18 @@ export function getExploratoryViewEmbeddable(
     }
 
     return (
-      <EuiThemeProvider darkMode={isDarkMode}>
-        <ExploratoryViewEmbeddable
-          {...props}
-          indexPatterns={indexPatterns}
-          lens={lens}
-          lensFormulaHelper={lensHelper.formula}
-        />
-      </EuiThemeProvider>
+      <EuiErrorBoundary>
+        <EuiThemeProvider darkMode={isDarkMode}>
+          <KibanaContextProvider services={services}>
+            <ExploratoryViewEmbeddable
+              {...props}
+              indexPatterns={indexPatterns}
+              lens={lens}
+              lensFormulaHelper={lensHelper.formula}
+            />
+          </KibanaContextProvider>
+        </EuiThemeProvider>
+      </EuiErrorBoundary>
     );
   };
 }

x-pack/plugins/observability/public/plugin.ts

@@ -300,11 +300,7 @@ export class Plugin
       },
       createExploratoryViewUrl,
       getAppDataView: getAppDataView(pluginsStart.dataViews),
-      ExploratoryViewEmbeddable: getExploratoryViewEmbeddable(
-        coreStart.uiSettings,
-        pluginsStart.dataViews,
-        pluginsStart.lens
-      ),
+      ExploratoryViewEmbeddable: getExploratoryViewEmbeddable({ ...coreStart, ...pluginsStart }),
       useRulesLink: createUseRulesLink(),
     };
   }