[Reporting] Remove usage of deprecated React rendering utilities

elastic · Apr 24, 2024 · 64ba840 · 64ba840
1 parent 2b2fe39
commit 64ba840
Show file tree

Hide file tree

Showing 26 changed files with 314 additions and 371 deletions.
diff --git a/packages/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.tsx b/packages/kbn-reporting/get_csv_panel_actions/panel_actions/get_csv_panel_action.tsx
@@ -48,11 +48,26 @@ export interface PanelActionDependencies {
   licensing: LicensingPluginStart;
 }
 
+type StartServices = [
+  Pick<
+    CoreStart,
+    // required for modules that render React
+    | 'analytics'
+    | 'i18n'
+    | 'theme'
+    // used extensively in Reporting share panel action
+    | 'application'
+    | 'uiSettings'
+  >,
+  PanelActionDependencies,
+  unknown
+];
+
 interface Params {
   apiClient: ReportingAPIClient;
   csvConfig: ClientConfigType['csv'];
   core: CoreSetup;
-  startServices$: Observable<[CoreStart, PanelActionDependencies, unknown]>;
+  startServices$: Observable<StartServices>;
   usesUiCapabilities: boolean;
 }
 

diff --git a/packages/kbn-reporting/public/share/index.ts b/packages/kbn-reporting/public/share/index.ts
@@ -12,4 +12,4 @@ export { reportingScreenshotShareProvider } from './share_context_menu/register_
 export { reportingCsvShareProvider } from './share_context_menu/register_csv_reporting';
 export { reportingCsvShareProvider as reportingCsvShareModalProvider } from './share_context_menu/register_csv_modal_reporting';
 export type { ReportingPublicComponents } from './shared/get_shared_components';
-export type { JobParamsProviderOptions } from './share_context_menu';
+export type { JobParamsProviderOptions, StartServices } from './share_context_menu';
diff --git a/packages/kbn-reporting/public/share/share_context_menu/index.ts b/packages/kbn-reporting/public/share/share_context_menu/index.ts
@@ -6,35 +6,42 @@
  * Side Public License, v 1.
  */
 
-import type {
-  ApplicationStart,
-  I18nStart,
-  IUiSettingsClient,
-  ThemeServiceSetup,
-  ToastsSetup,
-} from '@kbn/core/public';
+import * as Rx from 'rxjs';
+
+import type { ApplicationStart, CoreStart } from '@kbn/core/public';
 import { ILicense } from '@kbn/licensing-plugin/public';
 import type { LayoutParams } from '@kbn/screenshotting-plugin/common';
+
 import type { ReportingAPIClient } from '../../reporting_api_client';
 
+export type StartServices = [
+  Pick<
+    CoreStart,
+    // required for modules that render React
+    | 'analytics'
+    | 'i18n'
+    | 'theme'
+    // used extensively in Reporting share context menus and modal
+    | 'notifications'
+  >,
+  unknown,
+  unknown
+];
+
 export interface ExportModalShareOpts {
+  startServices$: Rx.Observable<StartServices>;
   apiClient: ReportingAPIClient;
-  uiSettings: IUiSettingsClient;
   usesUiCapabilities: boolean;
   license: ILicense;
   application: ApplicationStart;
-  theme: ThemeServiceSetup;
-  i18n: I18nStart;
 }
 
 export interface ExportPanelShareOpts {
+  startServices$: Rx.Observable<StartServices>;
   apiClient: ReportingAPIClient;
-  toasts: ToastsSetup;
-  uiSettings: IUiSettingsClient;
   usesUiCapabilities: boolean;
   license: ILicense;
   application: ApplicationStart;
-  theme: ThemeServiceSetup;
 }
 
 export interface ReportingSharingData {

diff --git a/packages/kbn-reporting/public/share/share_context_menu/register_csv_modal_reporting.tsx b/packages/kbn-reporting/public/share/share_context_menu/register_csv_modal_reporting.tsx
@@ -7,14 +7,15 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React from 'react';
 import { toMountPoint } from '@kbn/react-kibana-mount';
+import React from 'react';
+import { firstValueFrom } from 'rxjs';
 
 import { CSV_JOB_TYPE, CSV_JOB_TYPE_V2 } from '@kbn/reporting-export-types-csv-common';
 
 import type { SearchSourceFields } from '@kbn/data-plugin/common';
-import { ShareContext, ShareMenuItem } from '@kbn/share-plugin/public';
 import { FormattedMessage, InjectedIntl } from '@kbn/i18n-react';
+import { ShareContext, ShareMenuItem } from '@kbn/share-plugin/public';
 import type { ExportModalShareOpts } from '.';
 import { checkLicense } from '../..';
 
@@ -23,8 +24,7 @@ export const reportingCsvShareProvider = ({
   application,
   license,
   usesUiCapabilities,
-  i18n: i18nStart,
-  theme,
+  startServices$,
 }: ExportModalShareOpts) => {
   const getShareMenuItems = ({ objectType, sharingData, toasts }: ShareContext) => {
     if ('search' !== objectType) {
@@ -86,7 +86,8 @@ export const reportingCsvShareProvider = ({
       const decoratedJobParams = apiClient.getDecoratedJobParams(getJobParams());
       return apiClient
         .createReportingJob(reportType, decoratedJobParams)
-        .then(() => {
+        .then(() => firstValueFrom(startServices$))
+        .then(([startServices]) => {
           toasts.addSuccess({
             title: intl.formatMessage(
               {
@@ -110,7 +111,7 @@ export const reportingCsvShareProvider = ({
                   ),
                 }}
               />,
-              { theme, i18n: i18nStart }
+              startServices
             ),
             'data-test-subj': 'queueReportSuccess',
           });

diff --git a/packages/kbn-reporting/public/share/share_context_menu/register_csv_reporting.tsx b/packages/kbn-reporting/public/share/share_context_menu/register_csv_reporting.tsx
@@ -19,12 +19,10 @@ import { ReportingPanelContent } from './reporting_panel_content_lazy';
 
 export const reportingCsvShareProvider = ({
   apiClient,
-  toasts,
-  uiSettings,
   application,
   license,
   usesUiCapabilities,
-  theme,
+  startServices$,
 }: ExportPanelShareOpts): ShareMenuProvider => {
   const getShareMenuItems = ({ objectType, objectId, sharingData, onClose }: ShareContext) => {
     if ('search' !== objectType) {
@@ -104,14 +102,12 @@ export const reportingCsvShareProvider = ({
             <ReportingPanelContent
               requiresSavedState={false}
               apiClient={apiClient}
-              toasts={toasts}
-              uiSettings={uiSettings}
               reportType={reportType}
               layoutId={undefined}
               objectId={objectId}
               getJobParams={getJobParams}
               onClose={onClose}
-              theme={theme}
+              startServices$={startServices$}
             />
           ),
         },

diff --git a/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx b/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_modal_reporting.tsx
@@ -7,17 +7,18 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React from 'react';
-import { ShareContext, ShareMenuItem, ShareMenuProvider } from '@kbn/share-plugin/public';
 import { FormattedMessage, InjectedIntl } from '@kbn/i18n-react';
 import { toMountPoint } from '@kbn/react-kibana-mount';
-import { checkLicense } from '../../license_check';
+import { ShareContext, ShareMenuItem, ShareMenuProvider } from '@kbn/share-plugin/public';
+import React from 'react';
+import { firstValueFrom } from 'rxjs';
 import {
   ExportModalShareOpts,
   ExportPanelShareOpts,
   JobParamsProviderOptions,
   ReportingSharingData,
 } from '.';
+import { checkLicense } from '../../license_check';
 import { ScreenCapturePanelContent } from './screen_capture_panel_content_lazy';
 
 const getJobParams = (opts: JobParamsProviderOptions, type: 'pngV2' | 'printablePdfV2') => () => {
@@ -45,12 +46,10 @@ const getJobParams = (opts: JobParamsProviderOptions, type: 'pngV2' | 'printable
  */
 export const reportingScreenshotShareProvider = ({
   apiClient,
-  toasts,
-  uiSettings,
   license,
   application,
   usesUiCapabilities,
-  theme,
+  startServices$,
 }: ExportPanelShareOpts): ShareMenuProvider => {
   const getShareMenuItems = ({
     objectType,
@@ -136,15 +135,13 @@ export const reportingScreenshotShareProvider = ({
         content: (
           <ScreenCapturePanelContent
             apiClient={apiClient}
-            toasts={toasts}
-            uiSettings={uiSettings}
+            startServices$={startServices$}
             reportType={'pngV2'}
             objectId={objectId}
             requiresSavedState={requiresSavedState}
             getJobParams={getJobParams(jobProviderOptions, 'pngV2')}
             isDirty={isDirty}
             onClose={onClose}
-            theme={theme}
           />
         ),
       },
@@ -169,16 +166,14 @@ export const reportingScreenshotShareProvider = ({
         content: (
           <ScreenCapturePanelContent
             apiClient={apiClient}
-            toasts={toasts}
-            uiSettings={uiSettings}
+            startServices$={startServices$}
             reportType={'printablePdfV2'}
             objectId={objectId}
             requiresSavedState={requiresSavedState}
             layoutOption={objectType === 'dashboard' ? 'print' : undefined}
             getJobParams={getJobParams(jobProviderOptions, 'printablePdfV2')}
             isDirty={isDirty}
             onClose={onClose}
-            theme={theme}
           />
         ),
       },
@@ -200,8 +195,7 @@ export const reportingExportModalProvider = ({
   license,
   application,
   usesUiCapabilities,
-  theme,
-  i18n: i18nStart,
+  startServices$,
 }: ExportModalShareOpts): ShareMenuProvider => {
   const getShareMenuItems = ({
     objectType,
@@ -294,7 +288,8 @@ export const reportingExportModalProvider = ({
 
       return apiClient
         .createReportingJob('printablePdfV2', decoratedJobParams)
-        .then(() => {
+        .then(() => firstValueFrom(startServices$))
+        .then(([startServices]) => {
           toasts.addSuccess({
             title: intl.formatMessage(
               {
@@ -318,7 +313,7 @@ export const reportingExportModalProvider = ({
                   ),
                 }}
               />,
-              { theme, i18n: i18nStart }
+              startServices
             ),
             'data-test-subj': 'queueReportSuccess',
           });
@@ -347,7 +342,8 @@ export const reportingExportModalProvider = ({
       });
       return apiClient
         .createReportingJob('pngV2', decoratedJobParams)
-        .then(() => {
+        .then(() => firstValueFrom(startServices$))
+        .then(([startServices]) => {
           toasts.addSuccess({
             title: intl.formatMessage(
               {
@@ -371,7 +367,7 @@ export const reportingExportModalProvider = ({
                   ),
                 }}
               />,
-              { theme, i18n: i18nStart }
+              startServices
             ),
             'data-test-subj': 'queueReportSuccess',
           });
@@ -414,7 +410,6 @@ export const reportingExportModalProvider = ({
         />
       ),
       layoutOption: objectType === 'dashboard' ? ('print' as const) : undefined,
-      theme,
       renderLayoutOptionSwitch: objectType === 'dashboard',
       renderCopyURLButton: true,
       absoluteUrl: new URL(relativePathPDF, window.location.href).toString(),

diff --git a/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_reporting.tsx b/packages/kbn-reporting/public/share/share_context_menu/register_pdf_png_reporting.tsx
@@ -57,12 +57,10 @@ const getJobParams =
 
 export const reportingScreenshotShareProvider = ({
   apiClient,
-  toasts,
-  uiSettings,
   license,
   application,
+  startServices$,
   usesUiCapabilities,
-  theme,
 }: ExportPanelShareOpts): ShareMenuProvider => {
   const getShareMenuItems = ({
     objectType,
@@ -150,15 +148,13 @@ export const reportingScreenshotShareProvider = ({
         content: (
           <ScreenCapturePanelContent
             apiClient={apiClient}
-            toasts={toasts}
-            uiSettings={uiSettings}
             reportType={pngReportType}
             objectId={objectId}
             requiresSavedState={requiresSavedState}
             getJobParams={getJobParams(apiClient, jobProviderOptions, pngReportType)}
             isDirty={isDirty}
             onClose={onClose}
-            theme={theme}
+            startServices$={startServices$}
           />
         ),
       },
@@ -184,17 +180,15 @@ export const reportingScreenshotShareProvider = ({
         title: pdfPanelTitle,
         content: (
           <ScreenCapturePanelContent
+            startServices$={startServices$}
             apiClient={apiClient}
-            toasts={toasts}
-            uiSettings={uiSettings}
             reportType={pdfReportType}
             objectId={objectId}
             requiresSavedState={requiresSavedState}
             layoutOption={objectType === 'dashboard' ? 'print' : undefined}
             getJobParams={getJobParams(apiClient, jobProviderOptions, pdfReportType)}
             isDirty={isDirty}
             onClose={onClose}
-            theme={theme}
           />
         ),
       },

diff --git a/.../public/share/share_context_menu/reporting_panel_content/reporting_panel_content.test.tsx b/.../public/share/share_context_menu/reporting_panel_content/reporting_panel_content.test.tsx
@@ -6,14 +6,10 @@
  * Side Public License, v 1.
  */
 
-import {
-  httpServiceMock,
-  notificationServiceMock,
-  themeServiceMock,
-  uiSettingsServiceMock,
-} from '@kbn/core/public/mocks';
+import { coreMock, httpServiceMock, uiSettingsServiceMock } from '@kbn/core/public/mocks';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import React from 'react';
+import * as Rx from 'rxjs';
 import { ReportingPanelProps as Props, ReportingPanelContent } from '.';
 import { ReportingAPIClient } from '../../..';
 import { ErrorUnsavedWorkPanel } from './components';
@@ -23,8 +19,6 @@ jest.mock('./constants', () => ({
   getMaxUrlLength: jest.fn(() => 9999999),
 }));
 
-const theme = themeServiceMock.createSetupContract();
-
 describe('ReportingPanelContent', () => {
   const props: Partial<Props> = {
     layoutId: 'super_cool_layout_id_X',
@@ -34,7 +28,6 @@ describe('ReportingPanelContent', () => {
     objectType: 'noice_object',
     title: 'ultimate_title',
   };
-  const toasts = notificationServiceMock.createSetupContract().toasts;
   const http = httpServiceMock.createSetupContract();
   const uiSettings = uiSettingsServiceMock.createSetupContract();
   let apiClient: ReportingAPIClient;
@@ -50,6 +43,7 @@ describe('ReportingPanelContent', () => {
     apiClient = new ReportingAPIClient(http, uiSettings, '7.15.0-test');
   });
 
+  const { getStartServices } = coreMock.createSetup();
   const mountComponent = (newProps: Partial<Props>) =>
     mountWithIntl(
       <ReportingPanelContent
@@ -60,9 +54,7 @@ describe('ReportingPanelContent', () => {
         layoutId={props.layoutId}
         getJobParams={() => jobParams}
         apiClient={apiClient}
-        toasts={toasts}
-        uiSettings={uiSettings}
-        theme={theme}
+        startServices$={Rx.from(getStartServices())}
         {...props}
         {...newProps}
       />