[SharedUX] use toMountPoint package internally

elastic · Apr 29, 2024 · 3b592ad · 3b592ad
1 parent 2cc5109
commit 3b592ad
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 51 deletions.
diff --git a/packages/content-management/content_editor/src/services.tsx b/packages/content-management/content_editor/src/services.tsx
@@ -8,10 +8,11 @@
 
 import React, { useContext, useCallback, useMemo, PropsWithChildren } from 'react';
 import type { FC, ReactNode } from 'react';
-import type { Observable } from 'rxjs';
 import type { EuiComboBoxProps } from '@elastic/eui';
+import type { AnalyticsServiceStart, I18nStart, ThemeServiceStart } from '@kbn/core/public';
 import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
 import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 type NotifyFn = (title: JSX.Element, text?: string) => void;
 
@@ -52,12 +53,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 +76,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 +103,10 @@ export interface ContentEditorKibanaDependencies {
       };
     };
   };
+  /**
+   * @deprecated - unused
+   */
+  toMountPoint?: unknown;
 }
 
 /**
@@ -115,9 +115,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 +133,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
@@ -9,6 +9,8 @@
 import React, { FC, PropsWithChildren, useContext, useMemo, useCallback } from 'react';
 import type { Observable } from 'rxjs';
 import type { FormattedRelative } from '@kbn/i18n-react';
+import type { AnalyticsServiceStart, I18nStart, ThemeServiceStart } from '@kbn/core/public';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 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';
@@ -72,12 +74,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 +110,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 +152,10 @@ export interface TableListViewKibanaDependencies {
   };
   /** The <FormattedRelative /> component from the @kbn/i18n-react package */
   FormattedRelative: typeof FormattedRelative;
+  /**
+   * @deprecated - unused
+   */
+  toMountPoint?: unknown;
 }
 
 /**
@@ -165,7 +164,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 +220,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>