[AppEx-SharedUX] Remove toMountPoint parameter from TableListViewKiba…

…naProvider (elastic#182030) ## Summary The `toMountPoint` module from `@kbn/kibana-react-plugin/public` is deprecated. Many areas of code need to include it and provide it as a required prop of `TableListViewKibanaProvider`. This PR resolves that: it shouldn't need to be a required prop anywhere, since it is a stateless component and can be included as-needed. This PR also updates the inclusion of `toMountPoint` to use the non-deprecated source, which is `@kbn/react-kibana-mount`. As a side effect of that, some consumers need to update the `core` property being passed, to ensure it includes the `analytics`, `i18n` and `theme` services. ### Checklist Delete any items that are not applicable to this PR. - [ ] [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 --------- Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
yuliacech · May 3, 2024 · 3203cd4 · 3203cd4
1 parent f92ac2f
commit 3203cd4
Show file tree

Hide file tree

Showing 21 changed files with 137 additions and 84 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/examples/content_management_examples/tsconfig.json b/examples/content_management_examples/tsconfig.json
@@ -21,7 +21,6 @@
     "@kbn/shared-ux-link-redirect-app",
     "@kbn/content-management-table-list-view",
     "@kbn/content-management-table-list-view-table",
-    "@kbn/kibana-react-plugin",
     "@kbn/i18n-react",
     "@kbn/saved-objects-tagging-oss-plugin",
     "@kbn/core-saved-objects-api-browser",

diff --git a/packages/content-management/content_editor/src/services.tsx b/packages/content-management/content_editor/src/services.tsx
@@ -6,12 +6,16 @@
  * 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 { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
+import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
 import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
+import type { ThemeServiceStart } from '@kbn/core-theme-browser';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 
 type NotifyFn = (title: JSX.Element, text?: string) => void;
 
@@ -52,12 +56,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 +79,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
@@ -115,9 +114,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 +132,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/content_editor/tsconfig.json b/packages/content-management/content_editor/tsconfig.json
@@ -15,16 +15,20 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
   ],
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
     "@kbn/core-mount-utils-browser",
     "@kbn/core-overlays-browser",
+    "@kbn/core-analytics-browser",
+    "@kbn/core-i18n-browser",
+    "@kbn/core-theme-browser",
     "@kbn/test-jest-helpers",
+    "@kbn/react-kibana-mount"
   ],
   "exclude": [
-    "target/**/*",
+    "target/**/*"
   ]
 }
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,18 +6,24 @@
  * 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 {
+  ContentEditorKibanaProvider,
+  type SavedObjectsReference,
+} from '@kbn/content-management-content-editor';
+import type { AnalyticsServiceStart } from '@kbn/core-analytics-browser';
+import type { I18nStart } from '@kbn/core-i18n-browser';
 import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser';
 import type { OverlayFlyoutOpenOptions } from '@kbn/core-overlays-browser';
+import type { ThemeServiceStart } from '@kbn/core-theme-browser';
 import type { UserProfileServiceStart } from '@kbn/core-user-profile-browser';
 import type { UserProfile } from '@kbn/core-user-profile-common';
+import type { FormattedRelative } from '@kbn/i18n-react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
 import { RedirectAppLinksKibanaProvider } from '@kbn/shared-ux-link-redirect-app';
-import {
-  ContentEditorKibanaProvider,
-  type SavedObjectsReference,
-} from '@kbn/content-management-content-editor';
 
 import { TAG_MANAGEMENT_APP_URL } from './constants';
 import type { Tag } from './types';
@@ -76,12 +82,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>>>;
@@ -103,26 +118,10 @@ export interface TableListViewKibanaDependencies {
     overlays: {
       openFlyout(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;
     };
-    theme: {
-      theme$: Observable<{
-        readonly darkMode: boolean;
-      }>;
-    };
     userProfile: {
       bulkGet: UserProfileServiceStart['bulkGet'];
     };
   };
-  /**
-   * 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
@@ -172,7 +171,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) {
@@ -236,25 +236,21 @@ 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}

diff --git a/packages/content-management/table_list_view_table/tsconfig.json b/packages/content-management/table_list_view_table/tsconfig.json
@@ -15,7 +15,7 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx"
   ],
   "kbn_references": [
     "@kbn/i18n",
@@ -24,15 +24,19 @@
     "@kbn/core-http-browser",
     "@kbn/core-mount-utils-browser",
     "@kbn/core-overlays-browser",
+    "@kbn/core-analytics-browser",
+    "@kbn/core-i18n-browser",
+    "@kbn/core-theme-browser",
     "@kbn/shared-ux-page-kibana-template",
     "@kbn/shared-ux-link-redirect-app",
     "@kbn/test-jest-helpers",
     "@kbn/content-management-table-list-view-common",
     "@kbn/user-profile-components",
     "@kbn/core-user-profile-browser",
     "@kbn/core-user-profile-common",
+    "@kbn/react-kibana-mount"
   ],
   "exclude": [
-    "target/**/*",
+    "target/**/*"
   ]
 }
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 },
@@ -71,14 +73,15 @@ export const DashboardListing = ({
       <TableListViewKibanaProvider
         {...{
           core: {
+            analytics,
             application: application as TableListViewApplicationService,
             notifications,
             overlays,
             http,
+            i18n,
             theme,
             userProfile,
           },
-          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 },
@@ -78,21 +80,22 @@ export const DashboardListingTable = ({
 
   const core = useMemo(
     () => ({
+      analytics,
       application: application as TableListViewApplicationService,
       notifications,
       overlays,
       http,
+      i18n,
       theme,
       userProfile,
     }),
-    [application, notifications, overlays, http, theme, userProfile]
+    [application, notifications, overlays, http, analytics, i18n, theme, userProfile]
   );
 
   return (
     <I18nProvider>
       <TableListViewKibanaProvider
         core={core}
-        toMountPoint={toMountPoint}
         savedObjectsTagging={savedObjectsTaggingFakePlugin}
         FormattedRelative={FormattedRelative}
       >