[SharedUX] use toMountPoint package internally

elastic · Apr 29, 2024 · 0b42eb1 · 0b42eb1
1 parent 2cc5109
commit 0b42eb1
Show file tree

Hide file tree

Showing 16 changed files with 128 additions and 75 deletions.
diff --git a/examples/content_management_examples/public/examples/msearch/msearch_app.tsx b/examples/content_management_examples/public/examples/msearch/msearch_app.tsx
@@ -10,7 +10,6 @@ import React from 'react';
 import { ContentClientProvider, type ContentClient } from '@kbn/content-management-plugin/public';
 import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view-table';
 import type { CoreStart } from '@kbn/core/public';
-import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';
 import { SavedObjectTaggingOssPluginStart } from '@kbn/saved-objects-tagging-oss-plugin/public';
 import { MSearchTable } from './msearch_table';
@@ -25,7 +24,6 @@ export const MSearchApp = (props: {
       <I18nProvider>
         <TableListViewKibanaProvider
           core={props.core}
-          toMountPoint={toMountPoint}
           FormattedRelative={FormattedRelative}
           savedObjectsTagging={props.savedObjectsTagging.getTaggingApi()}
         >

diff --git a/packages/content-management/content_editor/src/services.tsx b/packages/content-management/content_editor/src/services.tsx
@@ -6,12 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React, { useContext, useCallback, useMemo, PropsWithChildren } from 'react';
-import type { FC, ReactNode } from 'react';
-import type { Observable } from 'rxjs';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
+
 import type { EuiComboBoxProps } from '@elastic/eui';
 import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
 import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
+import type { AnalyticsServiceStart, I18nStart, ThemeServiceStart } from '@kbn/core/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 type NotifyFn = (title: JSX.Element, text?: string) => void;
 
@@ -52,12 +54,21 @@ export const ContentEditorProvider: FC<PropsWithChildren<Services>> = ({
   return <ContentEditorContext.Provider value={services}>{children}</ContentEditorContext.Provider>;
 };
 
+/**
+ * Specific services for mounting React
+ */
+interface ContentEditorStartServices {
+  analytics: Pick<AnalyticsServiceStart, 'reportEvent'>;
+  i18n: I18nStart;
+  theme: Pick<ThemeServiceStart, 'theme$'>;
+}
+
 /**
  * Kibana-specific service types.
  */
 export interface ContentEditorKibanaDependencies {
   /** CoreStart contract */
-  core: {
+  core: ContentEditorStartServices & {
     overlays: {
       openFlyout(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;
     };
@@ -66,21 +77,7 @@ export interface ContentEditorKibanaDependencies {
         addDanger: (notifyArgs: { title: MountPoint; text?: string }) => void;
       };
     };
-    theme: {
-      theme$: Observable<Theme>;
-    };
   };
-  /**
-   * Handler from the '@kbn/kibana-react-plugin/public' Plugin
-   *
-   * ```
-   * import { toMountPoint } from '@kbn/kibana-react-plugin/public';
-   * ```
-   */
-  toMountPoint: (
-    node: React.ReactNode,
-    options?: { theme$: Observable<{ readonly darkMode: boolean }> }
-  ) => MountPoint;
   /**
    * The public API from the savedObjectsTaggingOss plugin.
    * It is returned by calling `getTaggingApi()` from the SavedObjectTaggingOssPluginStart
@@ -107,6 +104,10 @@ export interface ContentEditorKibanaDependencies {
       };
     };
   };
+  /**
+   * @deprecated - unused
+   */
+  toMountPoint?: unknown;
 }
 
 /**
@@ -115,9 +116,9 @@ export interface ContentEditorKibanaDependencies {
 export const ContentEditorKibanaProvider: FC<
   PropsWithChildren<ContentEditorKibanaDependencies>
 > = ({ children, ...services }) => {
-  const { core, toMountPoint, savedObjectsTagging } = services;
-  const { openFlyout: coreOpenFlyout } = core.overlays;
-  const { theme$ } = core.theme;
+  const { core, savedObjectsTagging } = services;
+  const { overlays, notifications, ...startServices } = core;
+  const { openFlyout: coreOpenFlyout } = overlays;
 
   const TagList = useMemo(() => {
     const Comp: Services['TagList'] = ({ references }) => {
@@ -133,16 +134,16 @@ export const ContentEditorKibanaProvider: FC<
 
   const openFlyout = useCallback(
     (node: ReactNode, options: OverlayFlyoutOpenOptions) => {
-      return coreOpenFlyout(toMountPoint(node, { theme$ }), options);
+      return coreOpenFlyout(toMountPoint(node, startServices), options);
     },
-    [coreOpenFlyout, toMountPoint, theme$]
+    [coreOpenFlyout, startServices]
   );
 
   return (
     <ContentEditorProvider
       openFlyout={openFlyout}
       notifyError={(title, text) => {
-        core.notifications.toasts.addDanger({ title: toMountPoint(title), text });
+        notifications.toasts.addDanger({ title: toMountPoint(title, startServices), text });
       }}
       TagList={TagList}
       TagSelector={savedObjectsTagging?.ui.components.SavedObjectSaveModalTagSelector}

diff --git a/packages/content-management/table_list_view_table/src/services.tsx b/packages/content-management/table_list_view_table/src/services.tsx
@@ -6,16 +6,20 @@
  * Side Public License, v 1.
  */
 
-import React, { FC, PropsWithChildren, useContext, useMemo, useCallback } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import type { Observable } from 'rxjs';
-import type { FormattedRelative } from '@kbn/i18n-react';
-import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
-import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
-import { RedirectAppLinksKibanaProvider } from '@kbn/shared-ux-link-redirect-app';
+
 import {
   ContentEditorKibanaProvider,
   type SavedObjectsReference,
 } from '@kbn/content-management-content-editor';
+import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
+import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
+import type { AnalyticsServiceStart, I18nStart, ThemeServiceStart } from '@kbn/core/public';
+import type { FormattedRelative } from '@kbn/i18n-react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import { RedirectAppLinksKibanaProvider } from '@kbn/shared-ux-link-redirect-app';
 
 import { TAG_MANAGEMENT_APP_URL } from './constants';
 import type { Tag } from './types';
@@ -72,12 +76,21 @@ export const TableListViewProvider: FC<PropsWithChildren<Services>> = ({
   return <TableListViewContext.Provider value={services}>{children}</TableListViewContext.Provider>;
 };
 
+/**
+ * Specific services for mounting React
+ */
+interface TableListViewStartServices {
+  analytics: Pick<AnalyticsServiceStart, 'reportEvent'>;
+  i18n: I18nStart;
+  theme: Pick<ThemeServiceStart, 'theme$'>;
+}
+
 /**
  * Kibana-specific service types.
  */
 export interface TableListViewKibanaDependencies {
   /** CoreStart contract */
-  core: {
+  core: TableListViewStartServices & {
     application: {
       capabilities: {
         [key: string]: Readonly<Record<string, boolean | Record<string, boolean>>>;
@@ -99,23 +112,7 @@ export interface TableListViewKibanaDependencies {
     overlays: {
       openFlyout(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;
     };
-    theme: {
-      theme$: Observable<{
-        readonly darkMode: boolean;
-      }>;
-    };
   };
-  /**
-   * Handler from the '@kbn/kibana-react-plugin/public' Plugin
-   *
-   * ```
-   * import { toMountPoint } from '@kbn/kibana-react-plugin/public';
-   * ```
-   */
-  toMountPoint: (
-    node: React.ReactNode,
-    options?: { theme$: Observable<{ readonly darkMode: boolean }> }
-  ) => MountPoint;
   /**
    * The public API from the savedObjectsTaggingOss plugin.
    * It is returned by calling `getTaggingApi()` from the SavedObjectTaggingOssPluginStart
@@ -157,6 +154,10 @@ export interface TableListViewKibanaDependencies {
   };
   /** The <FormattedRelative /> component from the @kbn/i18n-react package */
   FormattedRelative: typeof FormattedRelative;
+  /**
+   * @deprecated - unused
+   */
+  toMountPoint?: unknown;
 }
 
 /**
@@ -165,7 +166,8 @@ export interface TableListViewKibanaDependencies {
 export const TableListViewKibanaProvider: FC<
   PropsWithChildren<TableListViewKibanaDependencies>
 > = ({ children, ...services }) => {
-  const { core, toMountPoint, savedObjectsTagging, FormattedRelative } = services;
+  const { core, savedObjectsTagging, FormattedRelative } = services;
+  const { application, http, notifications, ...startServices } = core;
 
   const searchQueryParser = useMemo(() => {
     if (savedObjectsTagging) {
@@ -220,30 +222,26 @@ export const TableListViewKibanaProvider: FC<
 
   return (
     <RedirectAppLinksKibanaProvider coreStart={core}>
-      <ContentEditorKibanaProvider
-        core={core}
-        toMountPoint={toMountPoint}
-        savedObjectsTagging={savedObjectsTagging}
-      >
+      <ContentEditorKibanaProvider core={core} savedObjectsTagging={savedObjectsTagging}>
         <TableListViewProvider
-          canEditAdvancedSettings={Boolean(core.application.capabilities.advancedSettings?.save)}
+          canEditAdvancedSettings={Boolean(application.capabilities.advancedSettings?.save)}
           getListingLimitSettingsUrl={() =>
-            core.application.getUrlForApp('management', {
+            application.getUrlForApp('management', {
               path: `/kibana/settings?query=savedObjects:listingLimit`,
             })
           }
           notifyError={(title, text) => {
-            core.notifications.toasts.addDanger({ title: toMountPoint(title), text });
+            notifications.toasts.addDanger({ title: toMountPoint(title, startServices), text });
           }}
           searchQueryParser={searchQueryParser}
           DateFormatterComp={(props) => <FormattedRelative {...props} />}
-          currentAppId$={core.application.currentAppId$}
-          navigateToUrl={core.application.navigateToUrl}
+          currentAppId$={application.currentAppId$}
+          navigateToUrl={application.navigateToUrl}
           getTagList={getTagList}
           TagList={TagList}
           itemHasTags={itemHasTags}
           getTagIdsFromReferences={getTagIdsFromReferences}
-          getTagManagementUrl={() => core.http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
+          getTagManagementUrl={() => http.basePath.prepend(TAG_MANAGEMENT_APP_URL)}
         >
           {children}
         </TableListViewProvider>

diff --git a/src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx b/src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx
@@ -15,7 +15,7 @@ import {
   TableListViewKibanaProvider,
 } from '@kbn/content-management-table-list-view-table';
 
-import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public';
+import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 
 import { pluginServices } from '../services/plugin_services';
 
@@ -35,10 +35,12 @@ export const DashboardListing = ({
   useSessionStorageIntegration,
 }: DashboardListingProps) => {
   const {
+    analytics,
     application,
     notifications,
     overlays,
     http,
+    i18n,
     chrome: { theme },
     savedObjectsTagging,
     coreContext: { executionContext },
@@ -70,13 +72,14 @@ export const DashboardListing = ({
       <TableListViewKibanaProvider
         {...{
           core: {
+            analytics,
             application: application as TableListViewApplicationService,
             notifications,
             overlays,
             http,
+            i18n,
             theme,
           },
-          toMountPoint,
           savedObjectsTagging: savedObjectsTaggingFakePlugin,
           FormattedRelative,
         }}

diff --git a/src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx b/src/plugins/dashboard/public/dashboard_listing/dashboard_listing_table.tsx
@@ -15,7 +15,7 @@ import {
   TableListViewTable,
 } from '@kbn/content-management-table-list-view-table';
 
-import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public';
+import { useExecutionContext } from '@kbn/kibana-react-plugin/public';
 
 import { pluginServices } from '../services/plugin_services';
 
@@ -37,10 +37,12 @@ export const DashboardListingTable = ({
   showCreateDashboardButton = true,
 }: DashboardListingProps) => {
   const {
+    analytics,
     application,
     notifications,
     overlays,
     http,
+    i18n,
     savedObjectsTagging,
     coreContext: { executionContext },
     chrome: { theme },
@@ -77,20 +79,21 @@ export const DashboardListingTable = ({
 
   const core = useMemo(
     () => ({
+      analytics,
       application: application as TableListViewApplicationService,
       notifications,
       overlays,
       http,
+      i18n,
       theme,
     }),
-    [application, notifications, overlays, http, theme]
+    [application, notifications, overlays, http, analytics, i18n, theme]
   );
 
   return (
     <I18nProvider>
       <TableListViewKibanaProvider
         core={core}
-        toMountPoint={toMountPoint}
         savedObjectsTagging={savedObjectsTaggingFakePlugin}
         FormattedRelative={FormattedRelative}
       >

diff --git a/src/plugins/dashboard/public/services/i18n/i18n.stub.ts b/src/plugins/dashboard/public/services/i18n/i18n.stub.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { coreMock } from '@kbn/core/public/mocks';
+import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
+import { DashboardI18nService } from './types';
+
+type I18nServiceFactory = PluginServiceFactory<DashboardI18nService>;
+
+export const i18nServiceFactory: I18nServiceFactory = () => {
+  const { i18n } = coreMock.createStart();
+
+  return i18n;
+};
diff --git a/src/plugins/dashboard/public/services/i18n/i18n_service.ts b/src/plugins/dashboard/public/services/i18n/i18n_service.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { KibanaPluginServiceFactory } from '@kbn/presentation-util-plugin/public';
+import type { DashboardStartDependencies } from '../../plugin';
+import type { DashboardI18nService } from './types';
+
+export type I18nServiceFactory = KibanaPluginServiceFactory<
+  DashboardI18nService,
+  DashboardStartDependencies
+>;
+export const i18nServiceFactory: I18nServiceFactory = ({ coreStart }) => {
+  const { i18n } = coreStart;
+
+  return i18n;
+};
diff --git a/src/plugins/dashboard/public/services/i18n/types.ts b/src/plugins/dashboard/public/services/i18n/types.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { CoreStart } from '@kbn/core/public';
+
+export type DashboardI18nService = CoreStart['i18n'];