From e4a32f8f3c508b74c77d103637c8e3dfcd3d9d70 Mon Sep 17 00:00:00 2001 From: Tim Sullivan Date: Wed, 17 Apr 2024 07:52:41 -0700 Subject: [PATCH] [SharedUX] Remove usage of deprecated React rendering utilities (#180516) ## Summary Partially addresses https://github.com/elastic/kibana-team/issues/805 Follows https://github.com/elastic/kibana/pull/180003 These changes come up from searching in the code and finding where certain kinds of deprecated AppEx-SharedUX modules are imported. **Reviewers: Please interact with critical paths through the UI components touched in this PR, ESPECIALLY in terms of testing dark mode and i18n.** This focuses on code within AppEx-SharedUX. [Reporting changes are separate](https://github.com/elastic/kibana/pull/). image ### Checklist Delete any items that are not applicable to this PR. - [x] [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 - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --- examples/ui_action_examples/kibana.jsonc | 4 +-- .../public/hello_world_action.tsx | 15 ++++----- examples/ui_action_examples/public/plugin.ts | 8 ++--- examples/ui_action_examples/tsconfig.json | 2 +- examples/ui_actions_explorer/kibana.jsonc | 4 +-- .../public/actions/actions.tsx | 14 +++++--- examples/ui_actions_explorer/public/app.tsx | 11 +++---- .../public/hello_world_example.tsx | 13 ++++---- .../ui_actions_explorer/public/plugin.tsx | 7 ++-- examples/ui_actions_explorer/tsconfig.json | 2 +- src/plugins/files_management/tsconfig.json | 2 +- .../home/public/application/application.tsx | 25 +++++++------- src/plugins/home/public/plugin.ts | 2 +- src/plugins/home/tsconfig.json | 1 + .../kibana_overview/public/application.tsx | 24 +++++++------- src/plugins/kibana_overview/tsconfig.json | 1 + .../url_service/redirect/components/page.tsx | 4 +-- src/plugins/ui_actions/kibana.jsonc | 3 +- .../public/context_menu/open_context_menu.tsx | 8 ++--- src/plugins/ui_actions/public/plugin.ts | 10 +++--- .../public/service/ui_actions_service.test.ts | 8 +++-- src/plugins/ui_actions/public/services.ts | 4 ++- .../get_trigger_compatible_actions.test.ts | 7 ++-- .../tests/test_samples/hello_world_action.tsx | 12 +++++-- src/plugins/ui_actions/tsconfig.json | 3 +- .../kbn_sample_panel_action/kibana.jsonc | 4 +-- .../public/sample_panel_action.tsx | 9 +++-- .../kbn_sample_panel_action/tsconfig.json | 2 +- .../ui_actions_enhanced_examples/kibana.jsonc | 3 +- .../public/plugin.ts | 10 +++--- .../tsconfig.json | 2 +- x-pack/plugins/banners/kibana.jsonc | 4 +-- x-pack/plugins/banners/public/plugin.tsx | 8 ++--- x-pack/plugins/banners/tsconfig.json | 2 +- .../saved_objects_tagging/kibana.jsonc | 4 +-- .../assign_flyout/open_assign_flyout.tsx | 14 ++++---- .../components/edition_modal/open_modal.tsx | 28 ++++++++-------- .../public/management/actions/assign.ts | 20 ++++------- .../public/management/actions/edit.ts | 19 +++++------ .../public/management/actions/index.test.ts | 2 +- .../public/management/actions/index.ts | 14 ++++---- .../management/bulk_actions/bulk_assign.ts | 15 +++------ .../management/bulk_actions/index.test.ts | 2 +- .../public/management/bulk_actions/index.ts | 12 +++---- .../public/management/mount_section.tsx | 33 +++++++++---------- .../public/management/tag_management_page.tsx | 16 +++++---- .../saved_objects_tagging/public/plugin.ts | 7 ++-- .../saved_objects_tagging/public/types.ts | 6 ++++ .../public/ui_api/components.ts | 13 +++----- .../public/ui_api/index.ts | 15 +++------ .../saved_objects_tagging/tsconfig.json | 4 ++- x-pack/plugins/serverless/kibana.jsonc | 4 +-- x-pack/plugins/serverless/public/plugin.tsx | 15 ++++----- x-pack/plugins/serverless/tsconfig.json | 3 +- 54 files changed, 226 insertions(+), 258 deletions(-) diff --git a/examples/ui_action_examples/kibana.jsonc b/examples/ui_action_examples/kibana.jsonc index 3de8e301bae2..2d7efc3de9ce 100644 --- a/examples/ui_action_examples/kibana.jsonc +++ b/examples/ui_action_examples/kibana.jsonc @@ -10,8 +10,6 @@ "requiredPlugins": [ "uiActions" ], - "requiredBundles": [ - "kibanaReact" - ] + "requiredBundles": [] } } diff --git a/examples/ui_action_examples/public/hello_world_action.tsx b/examples/ui_action_examples/public/hello_world_action.tsx index cb82f8f58a66..46d306f80b5e 100644 --- a/examples/ui_action_examples/public/hello_world_action.tsx +++ b/examples/ui_action_examples/public/hello_world_action.tsx @@ -8,14 +8,12 @@ import React from 'react'; import { EuiText, EuiModalBody, EuiButton } from '@elastic/eui'; -import { OverlayStart } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { CoreStart } from '@kbn/core/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; export const ACTION_HELLO_WORLD = 'ACTION_HELLO_WORLD'; -interface StartServices { - openModal: OverlayStart['openModal']; -} +type StartServices = Pick; export const createHelloWorldActionDefinition = ( getStartServices: () => Promise @@ -24,15 +22,16 @@ export const createHelloWorldActionDefinition = ( type: ACTION_HELLO_WORLD, getDisplayName: () => 'Hello World!', execute: async () => { - const { openModal } = await getStartServices(); - const overlay = openModal( + const { overlays, ...startServices } = await getStartServices(); + const overlay = overlays.openModal( toMountPoint( Hello world! overlay.close()}> Close - + , + startServices ) ); }, diff --git a/examples/ui_action_examples/public/plugin.ts b/examples/ui_action_examples/public/plugin.ts index 8b740b556cac..286882ddde94 100644 --- a/examples/ui_action_examples/public/plugin.ts +++ b/examples/ui_action_examples/public/plugin.ts @@ -29,14 +29,14 @@ export class UiActionExamplesPlugin ) { uiActions.registerTrigger(helloWorldTrigger); - const helloWorldAction = createHelloWorldActionDefinition(async () => ({ - openModal: (await core.getStartServices())[0].overlays.openModal, - })); + const helloWorldAction = createHelloWorldActionDefinition( + async () => (await core.getStartServices())[0] + ); uiActions.addTriggerAction(helloWorldTrigger.id, helloWorldAction); } - public start(core: CoreStart, plugins: UiActionExamplesStartDependencies) {} + public start(_core: CoreStart, _plugins: UiActionExamplesStartDependencies) {} public stop() {} } diff --git a/examples/ui_action_examples/tsconfig.json b/examples/ui_action_examples/tsconfig.json index b87f7cdf0d86..807e2eace4bc 100644 --- a/examples/ui_action_examples/tsconfig.json +++ b/examples/ui_action_examples/tsconfig.json @@ -14,8 +14,8 @@ "target/**/*", ], "kbn_references": [ - "@kbn/kibana-react-plugin", "@kbn/ui-actions-plugin", "@kbn/core", + "@kbn/react-kibana-mount", ] } diff --git a/examples/ui_actions_explorer/kibana.jsonc b/examples/ui_actions_explorer/kibana.jsonc index e6c2c188c2f9..350a132a16cf 100644 --- a/examples/ui_actions_explorer/kibana.jsonc +++ b/examples/ui_actions_explorer/kibana.jsonc @@ -12,8 +12,6 @@ "uiActionsExamples", "developerExamples" ], - "requiredBundles": [ - "kibanaReact" - ] + "requiredBundles": [] } } diff --git a/examples/ui_actions_explorer/public/actions/actions.tsx b/examples/ui_actions_explorer/public/actions/actions.tsx index 573778a504df..63c50b1aec03 100644 --- a/examples/ui_actions_explorer/public/actions/actions.tsx +++ b/examples/ui_actions_explorer/public/actions/actions.tsx @@ -7,10 +7,10 @@ */ import React from 'react'; -import { OverlayStart } from '@kbn/core/public'; +import { CoreStart } from '@kbn/core/public'; import { EuiFieldText, EuiModalBody, EuiButton } from '@elastic/eui'; import { useState } from 'react'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { ActionExecutionContext, createAction, @@ -102,15 +102,19 @@ function EditUserModal({ ); } -export const createEditUserAction = (getOpenModal: () => Promise) => +export const createEditUserAction = (getStartServices: () => Promise) => createAction({ id: ACTION_EDIT_USER, type: ACTION_EDIT_USER, getIconType: () => 'pencil', getDisplayName: () => 'Edit user', execute: async ({ user, update }) => { - const overlay = (await getOpenModal())( - toMountPoint( overlay.close()} />) + const { overlays, ...startServices } = await getStartServices(); + const overlay = overlays.openModal( + toMountPoint( + overlay.close()} />, + startServices + ) ); }, }); diff --git a/examples/ui_actions_explorer/public/app.tsx b/examples/ui_actions_explorer/public/app.tsx index 31ac9c3c29ed..3b5d3a99274f 100644 --- a/examples/ui_actions_explorer/public/app.tsx +++ b/examples/ui_actions_explorer/public/app.tsx @@ -17,8 +17,8 @@ import { EuiSpacer, EuiPageHeader, } from '@elastic/eui'; +import { AppMountParameters, CoreStart } from '@kbn/core/public'; import { UiActionsStart } from '@kbn/ui-actions-plugin/public'; -import { AppMountParameters, OverlayStart } from '@kbn/core/public'; import { TriggerContextExample } from './trigger_context_example'; import { ContextMenuExamples } from './context_menu_examples'; import { Overview } from './overview'; @@ -26,10 +26,10 @@ import { HelloWorldExample } from './hello_world_example'; interface Props { uiActionsStartService: UiActionsStart; - openModal: OverlayStart['openModal']; + core: CoreStart; } -const ActionsExplorer = ({ uiActionsStartService, openModal }: Props) => { +const ActionsExplorer = ({ uiActionsStartService, core }: Props) => { return ( @@ -42,10 +42,7 @@ const ActionsExplorer = ({ uiActionsStartService, openModal }: Props) => { - + diff --git a/examples/ui_actions_explorer/public/hello_world_example.tsx b/examples/ui_actions_explorer/public/hello_world_example.tsx index 14fa8cae3260..89f5c23d0094 100644 --- a/examples/ui_actions_explorer/public/hello_world_example.tsx +++ b/examples/ui_actions_explorer/public/hello_world_example.tsx @@ -9,19 +9,19 @@ import React, { useState } from 'react'; import { EuiButton, EuiSpacer, EuiText, EuiModalBody, EuiLink, EuiSwitch } from '@elastic/eui'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { UiActionsStart, createAction } from '@kbn/ui-actions-plugin/public'; -import { OverlayStart } from '@kbn/core/public'; +import { CoreStart } from '@kbn/core/public'; import { HELLO_WORLD_TRIGGER_ID, ACTION_HELLO_WORLD } from '@kbn/ui-actions-examples-plugin/public'; const DYNAMIC_ACTION_ID = `${ACTION_HELLO_WORLD}-Waldo`; interface Props { uiActionsStartService: UiActionsStart; - openModal: OverlayStart['openModal']; + startServices: Pick; } -export const HelloWorldExample = ({ uiActionsStartService, openModal }: Props) => { +export const HelloWorldExample = ({ uiActionsStartService, startServices }: Props) => { const [isChecked, setIsChecked] = useState(false); const actionsMessage = isChecked ? '2 actions attached' : '1 action attached'; @@ -70,14 +70,15 @@ export const HelloWorldExample = ({ uiActionsStartService, openModal }: Props) = type: ACTION_HELLO_WORLD, getDisplayName: () => 'Say hello to Waldo', execute: async () => { - const overlay = openModal( + const overlay = startServices.overlays.openModal( toMountPoint( Hello Waldo{' '} overlay.close()}> Close - + , + startServices ) ); }, diff --git a/examples/ui_actions_explorer/public/plugin.tsx b/examples/ui_actions_explorer/public/plugin.tsx index fdb2357f40cd..fc95dad91615 100644 --- a/examples/ui_actions_explorer/public/plugin.tsx +++ b/examples/ui_actions_explorer/public/plugin.tsx @@ -51,7 +51,7 @@ export class UiActionsExplorerPlugin implements Plugin (await startServices)[0].overlays.openModal) + createEditUserAction(async () => (await startServices)[0]) ); deps.uiActions.addTriggerAction(COUNTRY_TRIGGER, viewInMapsAction); @@ -68,10 +68,7 @@ export class UiActionsExplorerPlugin implements Plugin, coreStart: CoreStart, history: ScopedHistory ) => { @@ -44,19 +43,19 @@ export const renderApp = async ( ); render( - - + + - - , + + , element ); }); @@ -64,7 +63,7 @@ export const renderApp = async ( // dispatch synthetic hash change event to update hash history objects // this is necessary because hash updates triggered by using popState won't trigger this event naturally. // This must be called before the app is mounted to avoid call this after the redirect to default app logic kicks in - const unlisten = history.listen((location) => { + const unlisten = history.listen((_location) => { window.dispatchEvent(new HashChangeEvent('hashchange')); }); diff --git a/src/plugins/home/public/plugin.ts b/src/plugins/home/public/plugin.ts index 8c895d9b491b..84c383eb8a74 100644 --- a/src/plugins/home/public/plugin.ts +++ b/src/plugins/home/public/plugin.ts @@ -116,7 +116,7 @@ export class HomePublicPlugin i18n.translate('home.pageTitle', { defaultMessage: 'Home' }) ); const { renderApp } = await import('./application'); - return await renderApp(params.element, params.theme$, coreStart, params.history); + return await renderApp(params.element, coreStart, params.history); }, }); urlForwarding.forwardApp('home', 'home'); diff --git a/src/plugins/home/tsconfig.json b/src/plugins/home/tsconfig.json index 87137d6c7166..01caa2a2c16c 100644 --- a/src/plugins/home/tsconfig.json +++ b/src/plugins/home/tsconfig.json @@ -33,6 +33,7 @@ "@kbn/shared-ux-router", "@kbn/core-http-common", "@kbn/shared-ux-link-redirect-app", + "@kbn/react-kibana-context-render", ], "exclude": [ "target/**/*", diff --git a/src/plugins/kibana_overview/public/application.tsx b/src/plugins/kibana_overview/public/application.tsx index dce7573f63f5..8b94a09ba981 100644 --- a/src/plugins/kibana_overview/public/application.tsx +++ b/src/plugins/kibana_overview/public/application.tsx @@ -9,8 +9,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { i18n } from '@kbn/i18n'; -import { I18nProvider } from '@kbn/i18n-react'; -import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { NewsfeedApiEndpoint } from '@kbn/newsfeed-plugin/public'; import { AppMountParameters, CoreStart } from '@kbn/core/public'; import { AppPluginStartDependencies } from './types'; @@ -19,7 +19,7 @@ import { KibanaOverviewApp } from './components/app'; export const renderApp = ( core: CoreStart, deps: AppPluginStartDependencies, - { appBasePath, element, theme$ }: AppMountParameters + { appBasePath, element }: AppMountParameters ) => { const { notifications, http } = core; const { newsfeed, home, navigation } = deps; @@ -41,16 +41,14 @@ export const renderApp = ( ); ReactDOM.render( - - - - - - - , + + + + + , element ); }); diff --git a/src/plugins/kibana_overview/tsconfig.json b/src/plugins/kibana_overview/tsconfig.json index 09e9d232901c..ad6a946b432b 100644 --- a/src/plugins/kibana_overview/tsconfig.json +++ b/src/plugins/kibana_overview/tsconfig.json @@ -27,6 +27,7 @@ "@kbn/shared-ux-router", "@kbn/shared-ux-avatar-solution", "@kbn/shared-ux-utility", + "@kbn/react-kibana-context-render", ], "exclude": [ "target/**/*", diff --git a/src/plugins/share/public/url_service/redirect/components/page.tsx b/src/plugins/share/public/url_service/redirect/components/page.tsx index e06461a91b64..1e6293691fb4 100644 --- a/src/plugins/share/public/url_service/redirect/components/page.tsx +++ b/src/plugins/share/public/url_service/redirect/components/page.tsx @@ -38,7 +38,7 @@ export const Page: React.FC = ({ if (error) { return ( - + @@ -47,7 +47,7 @@ export const Page: React.FC = ({ } return ( - + diff --git a/src/plugins/ui_actions/kibana.jsonc b/src/plugins/ui_actions/kibana.jsonc index 66ccaa6917d0..e63c80190c07 100644 --- a/src/plugins/ui_actions/kibana.jsonc +++ b/src/plugins/ui_actions/kibana.jsonc @@ -9,8 +9,7 @@ "browser": true, "requiredPlugins": [], "requiredBundles": [ - "kibanaUtils", - "kibanaReact" + "kibanaUtils" ] } } diff --git a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx index 8c7cf620d4a8..bac4e57aa562 100644 --- a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx +++ b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx @@ -11,8 +11,8 @@ import React from 'react'; import { EuiContextMenu, EuiContextMenuPanelDescriptor, EuiPopover } from '@elastic/eui'; import { EventEmitter } from 'events'; import ReactDOM from 'react-dom'; -import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; -import { getTheme } from '../services'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; +import { getAnalytics, getI18n, getTheme } from '../services'; let activeSession: ContextMenuSession | null = null; @@ -170,7 +170,7 @@ export function openContextMenu( }; ReactDOM.render( - + - , + , container ); diff --git a/src/plugins/ui_actions/public/plugin.ts b/src/plugins/ui_actions/public/plugin.ts index 1a0e45612c83..1dbff5b9729a 100644 --- a/src/plugins/ui_actions/public/plugin.ts +++ b/src/plugins/ui_actions/public/plugin.ts @@ -14,7 +14,7 @@ import { visualizeGeoFieldTrigger, } from '@kbn/ui-actions-browser/src/triggers'; import { UiActionsService } from './service'; -import { setTheme } from './services'; +import { setAnalytics, setI18n, setTheme } from './services'; export type UiActionsPublicSetup = Pick< UiActionsService, @@ -47,15 +47,17 @@ export class UiActionsPlugin constructor(_initializerContext: PluginInitializerContext) {} - public setup(core: CoreSetup): UiActionsPublicSetup { - setTheme(core.theme); + public setup(_core: CoreSetup): UiActionsPublicSetup { this.service.registerTrigger(rowClickTrigger); this.service.registerTrigger(visualizeFieldTrigger); this.service.registerTrigger(visualizeGeoFieldTrigger); return this.service; } - public start(_core: CoreStart): UiActionsPublicStart { + public start(core: CoreStart): UiActionsPublicStart { + setAnalytics(core.analytics); + setI18n(core.i18n); + setTheme(core.theme); return this.service; } diff --git a/src/plugins/ui_actions/public/service/ui_actions_service.test.ts b/src/plugins/ui_actions/public/service/ui_actions_service.test.ts index 42e3c4ea593f..b317b343b3ad 100644 --- a/src/plugins/ui_actions/public/service/ui_actions_service.test.ts +++ b/src/plugins/ui_actions/public/service/ui_actions_service.test.ts @@ -10,8 +10,8 @@ import { UiActionsService } from './ui_actions_service'; import { ActionDefinition, ActionInternal } from '../actions'; import { createHelloWorldAction } from '../tests/test_samples'; import { TriggerRegistry, ActionRegistry } from '../types'; +import { coreMock } from '@kbn/core/public/mocks'; import type { Trigger } from '@kbn/ui-actions-browser/src/triggers'; -import { OverlayStart } from '@kbn/core/public'; const FOO_TRIGGER = 'FOO_TRIGGER'; const BAR_TRIGGER = 'BAR_TRIGGER'; @@ -159,10 +159,12 @@ describe('UiActionsService', () => { }); describe('.getTriggerCompatibleActions()', () => { + const coreStart = coreMock.createStart(); + test('can register and get actions', async () => { const actions: ActionRegistry = new Map(); const service = new UiActionsService({ actions }); - const helloWorldAction = createHelloWorldAction({} as unknown as OverlayStart); + const helloWorldAction = createHelloWorldAction(coreStart); const length = actions.size; service.registerAction(helloWorldAction); @@ -173,7 +175,7 @@ describe('UiActionsService', () => { test('getTriggerCompatibleActions returns attached actions', async () => { const service = new UiActionsService(); - const helloWorldAction = createHelloWorldAction({} as unknown as OverlayStart); + const helloWorldAction = createHelloWorldAction(coreStart); service.registerAction(helloWorldAction); diff --git a/src/plugins/ui_actions/public/services.ts b/src/plugins/ui_actions/public/services.ts index 60c4b8131196..427d0f2ec20d 100644 --- a/src/plugins/ui_actions/public/services.ts +++ b/src/plugins/ui_actions/public/services.ts @@ -6,7 +6,9 @@ * Side Public License, v 1. */ -import { ThemeServiceSetup } from '@kbn/core/public'; +import { AnalyticsServiceStart, I18nStart, ThemeServiceSetup } from '@kbn/core/public'; import { createGetterSetter } from '@kbn/kibana-utils-plugin/public'; +export const [getAnalytics, setAnalytics] = createGetterSetter('Analytics'); +export const [getI18n, setI18n] = createGetterSetter('I18n'); export const [getTheme, setTheme] = createGetterSetter('Theme'); diff --git a/src/plugins/ui_actions/public/tests/get_trigger_compatible_actions.test.ts b/src/plugins/ui_actions/public/tests/get_trigger_compatible_actions.test.ts index 6599d66d2081..4fa2ef752aa9 100644 --- a/src/plugins/ui_actions/public/tests/get_trigger_compatible_actions.test.ts +++ b/src/plugins/ui_actions/public/tests/get_trigger_compatible_actions.test.ts @@ -9,9 +9,10 @@ import { uiActionsPluginMock } from '../mocks'; import { createHelloWorldAction } from './test_samples'; import { ActionDefinition } from '../actions'; +import { coreMock } from '@kbn/core/public/mocks'; import type { Trigger } from '@kbn/ui-actions-browser'; -import { OverlayStart } from '@kbn/core/public'; +const coreStart = coreMock.createStart(); let action: ActionDefinition<{ name: string }>; let uiActions: ReturnType; beforeEach(() => { @@ -32,14 +33,14 @@ beforeEach(() => { test('can register action', async () => { const { setup } = uiActions; - const helloWorldAction = createHelloWorldAction({} as unknown as OverlayStart); + const helloWorldAction = createHelloWorldAction(coreStart); setup.registerAction(helloWorldAction); }); test('getTriggerCompatibleActions returns attached actions', async () => { const { setup, doStart } = uiActions; - const helloWorldAction = createHelloWorldAction({} as unknown as OverlayStart); + const helloWorldAction = createHelloWorldAction(coreStart); setup.registerAction(helloWorldAction); diff --git a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx index 66f8544b093e..8df43b51a020 100644 --- a/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx +++ b/src/plugins/ui_actions/public/tests/test_samples/hello_world_action.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiBadge, EuiFlyoutBody } from '@elastic/eui'; import { CoreStart } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { ActionDefinition } from '../../actions'; const MenuItem: React.FC = () => { @@ -25,7 +25,10 @@ const MenuItem: React.FC = () => { export const ACTION_HELLO_WORLD = 'ACTION_HELLO_WORLD'; -export function createHelloWorldAction(overlays: CoreStart['overlays']): ActionDefinition { +export function createHelloWorldAction( + coreStart: Pick +): ActionDefinition { + const { overlays, ...startServices } = coreStart; return { id: ACTION_HELLO_WORLD, type: ACTION_HELLO_WORLD, @@ -33,7 +36,10 @@ export function createHelloWorldAction(overlays: CoreStart['overlays']): ActionD MenuItem, execute: async () => { overlays.openFlyout( - toMountPoint(Hello World, I am a hello world action!), + toMountPoint( + Hello World, I am a hello world action!, + startServices + ), { 'data-test-subj': 'helloWorldAction', ownFocus: true, diff --git a/src/plugins/ui_actions/tsconfig.json b/src/plugins/ui_actions/tsconfig.json index bac1778817bb..4601d4b2732e 100644 --- a/src/plugins/ui_actions/tsconfig.json +++ b/src/plugins/ui_actions/tsconfig.json @@ -7,13 +7,14 @@ "kbn_references": [ "@kbn/core", "@kbn/kibana-utils-plugin", - "@kbn/kibana-react-plugin", "@kbn/data-views-plugin", "@kbn/utility-types", "@kbn/i18n", "@kbn/es-query", "@kbn/ui-actions-browser", "@kbn/expressions-plugin", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-mount", ], "exclude": [ "target/**/*", diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/kibana.jsonc b/test/plugin_functional/plugins/kbn_sample_panel_action/kibana.jsonc index 8c52ce4f7e2b..94944389f81e 100644 --- a/test/plugin_functional/plugins/kbn_sample_panel_action/kibana.jsonc +++ b/test/plugin_functional/plugins/kbn_sample_panel_action/kibana.jsonc @@ -13,8 +13,6 @@ "uiActions", "embeddable" ], - "requiredBundles": [ - "kibanaReact" - ] + "requiredBundles": [] } } diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx b/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx index e35e10b4808b..aa92d75fc0c1 100644 --- a/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx +++ b/test/plugin_functional/plugins/kbn_sample_panel_action/public/sample_panel_action.tsx @@ -12,7 +12,7 @@ import React from 'react'; import { IEmbeddable } from '@kbn/embeddable-plugin/public'; import { createAction } from '@kbn/ui-actions-plugin/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; export const SAMPLE_PANEL_ACTION = 'samplePanelAction'; @@ -29,7 +29,9 @@ export function createSamplePanelAction(getStartServices: CoreSetup['getStartSer if (!embeddable) { return; } - const openFlyout = (await getStartServices())[0].overlays.openFlyout; + const coreStart = (await getStartServices())[0]; + const { overlays, ...startServices } = coreStart; + const openFlyout = overlays.openFlyout; openFlyout( toMountPoint( @@ -41,7 +43,8 @@ export function createSamplePanelAction(getStartServices: CoreSetup['getStartSer

This is a sample action

 - + , + startServices ), { 'data-test-subj': 'samplePanelActionFlyout', diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/tsconfig.json b/test/plugin_functional/plugins/kbn_sample_panel_action/tsconfig.json index a3fe79437f30..506a7dba6fd1 100644 --- a/test/plugin_functional/plugins/kbn_sample_panel_action/tsconfig.json +++ b/test/plugin_functional/plugins/kbn_sample_panel_action/tsconfig.json @@ -16,6 +16,6 @@ "@kbn/core", "@kbn/ui-actions-plugin", "@kbn/embeddable-plugin", - "@kbn/kibana-react-plugin", + "@kbn/react-kibana-mount", ] } diff --git a/x-pack/examples/ui_actions_enhanced_examples/kibana.jsonc b/x-pack/examples/ui_actions_enhanced_examples/kibana.jsonc index 33412d3529b4..1da3e4f18287 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/kibana.jsonc +++ b/x-pack/examples/ui_actions_enhanced_examples/kibana.jsonc @@ -22,8 +22,7 @@ "requiredBundles": [ "dashboardEnhanced", "embeddable", - "kibanaUtils", - "kibanaReact" + "kibanaUtils" ] } } diff --git a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts index 2cac8f3bac93..fbd74fc58101 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts +++ b/x-pack/examples/ui_actions_enhanced_examples/public/plugin.ts @@ -6,7 +6,7 @@ */ import { createElement as h } from 'react'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { Plugin, CoreSetup, CoreStart } from '@kbn/core/public'; import { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public'; import { @@ -93,7 +93,8 @@ export class UiActionsEnhancedExamplesPlugin dynamicActionManager: self.managerWithoutEmbeddableSingleButton, triggers: [SAMPLE_APP2_CLICK_TRIGGER], placeContext: {}, - }) + }), + coreStart ), { ownFocus: true, @@ -118,7 +119,8 @@ export class UiActionsEnhancedExamplesPlugin dynamicActionManager: self.managerWithoutEmbeddableSingleButton, triggers: [SAMPLE_APP2_CLICK_TRIGGER], placeContext: { sampleApp2ClickContext }, - }) + }), + coreStart ), { ownFocus: true, @@ -150,7 +152,7 @@ export class UiActionsEnhancedExamplesPlugin }); } - public start(core: CoreStart, plugins: StartDependencies): UiActionsEnhancedExamplesStart { + public start(_core: CoreStart, plugins: StartDependencies): UiActionsEnhancedExamplesStart { const managerWithoutEmbeddable = new UiActionsEnhancedDynamicActionManager({ storage: new UiActionsEnhancedMemoryActionStorage(), isCompatible: async () => true, diff --git a/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json b/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json index ef56838b5deb..6010bece3bd1 100644 --- a/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json +++ b/x-pack/examples/ui_actions_enhanced_examples/tsconfig.json @@ -16,7 +16,6 @@ "kbn_references": [ "@kbn/core", "@kbn/kibana-utils-plugin", - "@kbn/kibana-react-plugin", "@kbn/share-plugin", "@kbn/discover-plugin", "@kbn/dashboard-plugin", @@ -30,5 +29,6 @@ "@kbn/unified-search-plugin", "@kbn/utility-types", "@kbn/presentation-publishing", + "@kbn/react-kibana-mount", ] } diff --git a/x-pack/plugins/banners/kibana.jsonc b/x-pack/plugins/banners/kibana.jsonc index ffd3ced82996..75d275a6bde4 100644 --- a/x-pack/plugins/banners/kibana.jsonc +++ b/x-pack/plugins/banners/kibana.jsonc @@ -17,8 +17,6 @@ "optionalPlugins": [ "screenshotMode" ], - "requiredBundles": [ - "kibanaReact" - ] + "requiredBundles": [] } } diff --git a/x-pack/plugins/banners/public/plugin.tsx b/x-pack/plugins/banners/public/plugin.tsx index 8d6d90e088a9..94c7d6c07437 100644 --- a/x-pack/plugins/banners/public/plugin.tsx +++ b/x-pack/plugins/banners/public/plugin.tsx @@ -7,20 +7,20 @@ import React from 'react'; import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { Banner } from './components'; import { getBannerInfo } from './get_banner_info'; import { BannerPluginStartDependencies } from './types'; export class BannersPlugin implements Plugin<{}, {}, {}, BannerPluginStartDependencies> { - constructor(context: PluginInitializerContext) {} + constructor(_context: PluginInitializerContext) {} setup({}: CoreSetup<{}, {}>) { return {}; } start( - { chrome, uiSettings, http }: CoreStart, + { chrome, http, ...startServices }: CoreStart, { screenshotMode }: BannerPluginStartDependencies ) { if (!(screenshotMode?.isScreenshotMode() ?? false)) { @@ -28,7 +28,7 @@ export class BannersPlugin implements Plugin<{}, {}, {}, BannerPluginStartDepend ({ allowed, banner }) => { if (allowed && banner.placement === 'top') { chrome.setHeaderBanner({ - content: toMountPoint(), + content: toMountPoint(, startServices), }); } }, diff --git a/x-pack/plugins/banners/tsconfig.json b/x-pack/plugins/banners/tsconfig.json index 019a4ebd7da8..978c977d0fe2 100644 --- a/x-pack/plugins/banners/tsconfig.json +++ b/x-pack/plugins/banners/tsconfig.json @@ -6,12 +6,12 @@ "include": ["public/**/*", "server/**/*", "common/**/*", "../../../typings/**/*"], "kbn_references": [ "@kbn/core", - "@kbn/kibana-react-plugin", "@kbn/screenshot-mode-plugin", "@kbn/licensing-plugin", "@kbn/config-schema", "@kbn/i18n", "@kbn/shared-ux-markdown", + "@kbn/react-kibana-mount", ], "exclude": [ "target/**/*", diff --git a/x-pack/plugins/saved_objects_tagging/kibana.jsonc b/x-pack/plugins/saved_objects_tagging/kibana.jsonc index 7daa89f63ba3..a3c5609148d9 100644 --- a/x-pack/plugins/saved_objects_tagging/kibana.jsonc +++ b/x-pack/plugins/saved_objects_tagging/kibana.jsonc @@ -19,8 +19,6 @@ "usageCollection", "security" ], - "requiredBundles": [ - "kibanaReact" - ] + "requiredBundles": [] } } diff --git a/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx b/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx index 175c20322607..92c5159378cf 100644 --- a/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx @@ -7,14 +7,12 @@ import React from 'react'; import { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui'; -import { NotificationsStart, OverlayStart, ThemeServiceStart, OverlayRef } from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import { OverlayRef } from '@kbn/core/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { ITagAssignmentService, ITagsCache } from '../../services'; +import { StartServices } from '../../types'; -export interface GetAssignFlyoutOpenerOptions { - overlays: OverlayStart; - notifications: NotificationsStart; - theme: ThemeServiceStart; +export interface GetAssignFlyoutOpenerOptions extends StartServices { tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -43,10 +41,10 @@ export const getAssignFlyoutOpener = ({ overlays, notifications, - theme, tagCache, assignmentService, assignableTypes, + ...startServices }: GetAssignFlyoutOpenerOptions): AssignFlyoutOpener => async ({ tagIds }) => { const flyout = overlays.openFlyout( @@ -61,7 +59,7 @@ export const getAssignFlyoutOpener = onClose={() => flyout.close()} /> , - { theme$: theme.theme$ } + startServices ), { size: 'm', maxWidth: 600 } ); diff --git a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx b/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx index 9fb8dc28c466..63a784aa09c4 100644 --- a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx @@ -7,20 +7,13 @@ import React from 'react'; import { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui'; -import type { - OverlayStart, - OverlayRef, - ThemeServiceStart, - NotificationsStart, -} from '@kbn/core/public'; -import { toMountPoint } from '@kbn/kibana-react-plugin/public'; +import type { OverlayRef } from '@kbn/core/public'; +import { toMountPoint } from '@kbn/react-kibana-mount'; import { Tag, TagAttributes } from '../../../common/types'; import { ITagInternalClient } from '../../services'; +import { StartServices } from '../../types'; -interface GetModalOpenerOptions { - overlays: OverlayStart; - notifications: NotificationsStart; - theme: ThemeServiceStart; +interface GetModalOpenerOptions extends StartServices { tagClient: ITagInternalClient; } @@ -46,7 +39,12 @@ const LazyEditTagModal = React.lazy(() => ); export const getCreateModalOpener = - ({ overlays, theme, tagClient, notifications }: GetModalOpenerOptions): CreateModalOpener => + ({ + overlays, + tagClient, + notifications, + ...startServices + }: GetModalOpenerOptions): CreateModalOpener => async ({ onCreate, defaultValues }: OpenCreateModalOptions) => { const modal = overlays.openModal( toMountPoint( @@ -64,7 +62,7 @@ export const getCreateModalOpener = notifications={notifications} /> , - { theme$: theme.theme$ } + startServices ) ); return modal; @@ -76,7 +74,7 @@ interface OpenEditModalOptions { } export const getEditModalOpener = - ({ overlays, theme, tagClient, notifications }: GetModalOpenerOptions) => + ({ overlays, tagClient, notifications, ...startServices }: GetModalOpenerOptions) => async ({ tagId, onUpdate }: OpenEditModalOptions) => { const tag = await tagClient.get(tagId); @@ -96,7 +94,7 @@ export const getEditModalOpener = notifications={notifications} /> , - { theme$: theme.theme$ } + startServices ) ); diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts index 22ab4dc95a2f..7513b9d89c14 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts @@ -5,20 +5,16 @@ * 2.0. */ -import { Observable, from } from 'rxjs'; -import { takeUntil } from 'rxjs'; import { i18n } from '@kbn/i18n'; -import { NotificationsStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; +import { Observable, from, takeUntil } from 'rxjs'; import { TagWithRelations } from '../../../common'; -import { ITagsCache } from '../../services/tags'; import { getAssignFlyoutOpener } from '../../components/assign_flyout'; import { ITagAssignmentService } from '../../services/assignments'; +import { ITagsCache } from '../../services/tags'; +import { StartServices } from '../../types'; import { TagAction } from './types'; -interface GetAssignActionOptions { - overlays: OverlayStart; - notifications: NotificationsStart; - theme: ThemeServiceStart; +interface GetAssignActionOptions extends StartServices { tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -27,19 +23,15 @@ interface GetAssignActionOptions { } export const getAssignAction = ({ - notifications, - overlays, - theme, assignableTypes, assignmentService, tagCache, fetchTags, canceled$, + ...startServices }: GetAssignActionOptions): TagAction => { const openFlyout = getAssignFlyoutOpener({ - overlays, - notifications, - theme, + ...startServices, tagCache, assignmentService, assignableTypes, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts index 8d419e5d8aab..87b1d4ff32fd 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts @@ -6,28 +6,26 @@ */ import { i18n } from '@kbn/i18n'; -import { NotificationsStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { TagWithRelations } from '../../../common'; -import { ITagInternalClient } from '../../services/tags'; import { getEditModalOpener } from '../../components/edition_modal'; +import { ITagInternalClient } from '../../services/tags'; +import { StartServices } from '../../types'; import { TagAction } from './types'; -interface GetEditActionOptions { - overlays: OverlayStart; - theme: ThemeServiceStart; - notifications: NotificationsStart; +interface GetEditActionOptions extends StartServices { tagClient: ITagInternalClient; fetchTags: () => Promise; } export const getEditAction = ({ - notifications, - theme, - overlays, tagClient, fetchTags, + ...startServices }: GetEditActionOptions): TagAction => { - const editModalOpener = getEditModalOpener({ overlays, theme, tagClient, notifications }); + const editModalOpener = getEditModalOpener({ + ...startServices, + tagClient, + }); return { id: 'edit', name: ({ name }) => @@ -46,6 +44,7 @@ export const getEditAction = ({ icon: 'pencil', available: (tag) => !tag.managed, onClick: (tag: TagWithRelations) => { + const { notifications } = startServices; editModalOpener({ tagId: tag.id, onUpdate: (updatedTag) => { diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.test.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.test.ts index 8aa7b160b0c2..bffc8c35bcc4 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.test.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.test.ts @@ -36,7 +36,7 @@ describe('getTableActions', () => { { assignableTypes = ['foo', 'bar'] }: { assignableTypes?: string[] } = {} ) => getTableActions({ - core, + startServices: core, tagClient, tagCache, assignmentService, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts index 2d143faa8fa7..6feffde001f8 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts @@ -6,9 +6,9 @@ */ import { Observable } from 'rxjs'; -import { CoreStart } from '@kbn/core/public'; import { TagsCapabilities } from '../../../common'; import { ITagInternalClient, ITagAssignmentService, ITagsCache } from '../../services'; +import { StartServices } from '../../types'; import { TagAction } from './types'; import { getDeleteAction } from './delete'; import { getEditAction } from './edit'; @@ -17,7 +17,7 @@ import { getAssignAction } from './assign'; export type { TagAction } from './types'; interface GetActionsOptions { - core: CoreStart; + startServices: StartServices; capabilities: TagsCapabilities; tagClient: ITagInternalClient; tagCache: ITagsCache; @@ -29,7 +29,7 @@ interface GetActionsOptions { } export const getTableActions = ({ - core: { notifications, overlays, theme }, + startServices, capabilities, tagClient, tagCache, @@ -41,26 +41,24 @@ export const getTableActions = ({ const actions: TagAction[] = []; if (capabilities.edit) { - actions.push(getEditAction({ notifications, overlays, theme, tagClient, fetchTags })); + actions.push(getEditAction({ ...startServices, tagClient, fetchTags })); } if (capabilities.assign && assignableTypes.length > 0) { actions.push( getAssignAction({ + ...startServices, tagCache, assignmentService, assignableTypes, fetchTags, - notifications, - overlays, - theme, canceled$, }) ); } if (capabilities.delete) { - actions.push(getDeleteAction({ overlays, notifications, tagClient, fetchTags })); + actions.push(getDeleteAction({ ...startServices, tagClient, fetchTags })); } return actions; diff --git a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts index bbb2081b198c..cd02adad32b9 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts @@ -7,16 +7,13 @@ import { from } from 'rxjs'; import { takeUntil } from 'rxjs'; -import { OverlayStart, NotificationsStart, ThemeServiceStart } from '@kbn/core/public'; import { i18n } from '@kbn/i18n'; import { ITagsCache, ITagAssignmentService } from '../../services'; +import { StartServices } from '../../types'; import { TagBulkAction } from '../types'; import { getAssignFlyoutOpener } from '../../components/assign_flyout'; -interface GetBulkAssignActionOptions { - overlays: OverlayStart; - notifications: NotificationsStart; - theme: ThemeServiceStart; +interface GetBulkAssignActionOptions extends StartServices { tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -24,17 +21,13 @@ interface GetBulkAssignActionOptions { } export const getBulkAssignAction = ({ - overlays, - notifications, - theme, tagCache, assignmentService, assignableTypes, + ...startServices }: GetBulkAssignActionOptions): TagBulkAction => { const openFlyout = getAssignFlyoutOpener({ - overlays, - notifications, - theme, + ...startServices, tagCache, assignmentService, assignableTypes, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.test.ts b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.test.ts index 43935c9ab441..dd3e446dad1e 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.test.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.test.ts @@ -37,7 +37,7 @@ describe('getBulkActions', () => { { assignableTypes = ['foo', 'bar'] }: { assignableTypes?: string[] } = {} ) => getBulkActions({ - core, + startServices: core, tagClient, tagCache, assignmentService, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts index c7fba9824791..ea0b8cfb42eb 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts @@ -5,16 +5,16 @@ * 2.0. */ -import { CoreStart } from '@kbn/core/public'; import { TagsCapabilities } from '../../../common'; import { ITagInternalClient, ITagAssignmentService, ITagsCache } from '../../services'; +import { StartServices } from '../../types'; import { TagBulkAction } from '../types'; import { getBulkDeleteAction } from './bulk_delete'; import { getBulkAssignAction } from './bulk_assign'; import { getClearSelectionAction } from './clear_selection'; interface GetBulkActionOptions { - core: CoreStart; + startServices: StartServices; capabilities: TagsCapabilities; tagClient: ITagInternalClient; tagCache: ITagsCache; @@ -25,7 +25,7 @@ interface GetBulkActionOptions { } export const getBulkActions = ({ - core: { notifications, overlays, theme }, + startServices, capabilities, tagClient, tagCache, @@ -39,9 +39,7 @@ export const getBulkActions = ({ if (capabilities.assign && assignableTypes.length > 0) { actions.push( getBulkAssignAction({ - notifications, - overlays, - theme, + ...startServices, tagCache, assignmentService, assignableTypes, @@ -50,7 +48,7 @@ export const getBulkActions = ({ ); } if (capabilities.delete) { - actions.push(getBulkDeleteAction({ notifications, overlays, tagClient, setLoading })); + actions.push(getBulkDeleteAction({ ...startServices, tagClient, setLoading })); } // only add clear selection if user has permission to perform any other action diff --git a/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx b/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx index 72ac1863075f..7c55d95a0763 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx @@ -7,9 +7,8 @@ import React, { FC } from 'react'; import ReactDOM from 'react-dom'; -import { I18nProvider } from '@kbn/i18n-react'; import { CoreSetup, ApplicationStart } from '@kbn/core/public'; -import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { ManagementAppMountParams } from '@kbn/management-plugin/public'; import { getTagsCapabilities } from '../../common'; import { SavedObjectTaggingPluginStart } from '../types'; @@ -45,27 +44,25 @@ export const mountSection = async ({ title, }: MountSectionParams) => { const [coreStart] = await core.getStartServices(); - const { element, setBreadcrumbs, theme$ } = mountParams; + const { element, setBreadcrumbs } = mountParams; const capabilities = getTagsCapabilities(coreStart.application.capabilities); const assignableTypes = await assignmentService.getAssignableTypes(); coreStart.chrome.docTitle.change(title); ReactDOM.render( - - - - - - - , + + + + + , element ); diff --git a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx index 8093d59a29bd..659861a2a0ea 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx @@ -40,7 +40,7 @@ export const TagManagementPage: FC = ({ capabilities, assignableTypes, }) => { - const { overlays, notifications, application, http, theme } = core; + const { application, http, ...startServices } = core; const [loading, setLoading] = useState(false); const [allTags, setAllTags] = useState([]); const [selectedTags, setSelectedTags] = useState([]); @@ -75,13 +75,13 @@ export const TagManagementPage: FC = ({ }); const createModalOpener = useMemo( - () => getCreateModalOpener({ overlays, theme, tagClient, notifications }), - [overlays, theme, tagClient, notifications] + () => getCreateModalOpener({ ...startServices, tagClient }), + [startServices, tagClient] ); const tableActions = useMemo(() => { return getTableActions({ - core, + startServices, capabilities, tagClient, tagCache, @@ -92,7 +92,7 @@ export const TagManagementPage: FC = ({ canceled$: unmount$, }); }, [ - core, + startServices, capabilities, tagClient, tagCache, @@ -105,7 +105,7 @@ export const TagManagementPage: FC = ({ const bulkActions = useMemo(() => { return getBulkActions({ - core, + startServices, capabilities, tagClient, tagCache, @@ -114,7 +114,7 @@ export const TagManagementPage: FC = ({ assignableTypes, clearSelection: () => setSelectedTags([]), }); - }, [core, capabilities, tagClient, tagCache, assignmentService, assignableTypes]); + }, [startServices, capabilities, tagClient, tagCache, assignmentService, assignableTypes]); useEffect(() => { setBreadcrumbs([ @@ -126,6 +126,8 @@ export const TagManagementPage: FC = ({ ]); }, [setBreadcrumbs]); + const { notifications } = startServices; + const openCreateModal = useCallback(() => { createModalOpener({ onCreate: (createdTag) => { diff --git a/x-pack/plugins/saved_objects_tagging/public/plugin.ts b/x-pack/plugins/saved_objects_tagging/public/plugin.ts index e5ad1dfa5095..c86841765f6e 100644 --- a/x-pack/plugins/saved_objects_tagging/public/plugin.ts +++ b/x-pack/plugins/saved_objects_tagging/public/plugin.ts @@ -67,7 +67,7 @@ export class SavedObjectTaggingPlugin return {}; } - public start({ http, application, overlays, theme, analytics, notifications }: CoreStart) { + public start({ http, application, analytics, ...startServices }: CoreStart) { this.tagCache = new TagsCache({ refreshHandler: () => this.tagClient!.getAll({ asSystemRequest: true }), refreshInterval: this.config.cacheRefreshInterval, @@ -87,12 +87,11 @@ export class SavedObjectTaggingPlugin client: this.tagClient, cache: this.tagCache, ui: getUiApi({ + ...startServices, + analytics, cache: this.tagCache, client: this.tagClient, capabilities: getTagsCapabilities(application.capabilities), - overlays, - theme, - notifications, }), }; } diff --git a/x-pack/plugins/saved_objects_tagging/public/types.ts b/x-pack/plugins/saved_objects_tagging/public/types.ts index 9ceaa6c72b9f..ed29542e4d41 100644 --- a/x-pack/plugins/saved_objects_tagging/public/types.ts +++ b/x-pack/plugins/saved_objects_tagging/public/types.ts @@ -5,6 +5,12 @@ * 2.0. */ +import { CoreStart } from '@kbn/core-lifecycle-browser'; import type { SavedObjectsTaggingApi } from '@kbn/saved-objects-tagging-oss-plugin/public'; export type SavedObjectTaggingPluginStart = SavedObjectsTaggingApi; + +export type StartServices = Pick< + CoreStart, + 'overlays' | 'notifications' | 'analytics' | 'i18n' | 'theme' +>; diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts b/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts index e6a504c49e87..18bc70c9966d 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts @@ -5,7 +5,6 @@ * 2.0. */ -import { NotificationsStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { SavedObjectsTaggingApiUiComponent } from '@kbn/saved-objects-tagging-oss-plugin/public'; import { TagsCapabilities } from '../../common'; import { ITagInternalClient, ITagsCache } from '../services'; @@ -15,25 +14,21 @@ import { getConnectedSavedObjectModalTagSelectorComponent, } from '../components/connected'; import { getCreateModalOpener } from '../components/edition_modal'; +import { StartServices } from '../types'; -export interface GetComponentsOptions { +export interface GetComponentsOptions extends StartServices { capabilities: TagsCapabilities; cache: ITagsCache; - overlays: OverlayStart; - theme: ThemeServiceStart; tagClient: ITagInternalClient; - notifications: NotificationsStart; } export const getComponents = ({ capabilities, cache, - overlays, - theme, tagClient, - notifications, + ...startServices }: GetComponentsOptions): SavedObjectsTaggingApiUiComponent => { - const openCreateModal = getCreateModalOpener({ overlays, theme, tagClient, notifications }); + const openCreateModal = getCreateModalOpener({ ...startServices, tagClient }); return { TagList: getConnectedTagListComponent({ cache }), TagSelector: getConnectedTagSelectorComponent({ cache, capabilities, openCreateModal }), diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts b/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts index b2dca68d5cc9..d25b04dd1002 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts @@ -5,10 +5,10 @@ * 2.0. */ -import type { NotificationsStart, OverlayStart, ThemeServiceStart } from '@kbn/core/public'; import { SavedObjectsTaggingApiUi } from '@kbn/saved-objects-tagging-oss-plugin/public'; import { TagsCapabilities } from '../../common'; import { ITagsCache, ITagInternalClient } from '../services'; +import { StartServices } from '../types'; import { getTagIdsFromReferences, updateTagsReferences, @@ -23,30 +23,23 @@ import { buildConvertNameToReference } from './convert_name_to_reference'; import { buildGetTagList } from './get_tag_list'; import { hasTagDecoration } from './has_tag_decoration'; -interface GetUiApiOptions { - overlays: OverlayStart; - theme: ThemeServiceStart; +interface GetUiApiOptions extends StartServices { capabilities: TagsCapabilities; cache: ITagsCache; client: ITagInternalClient; - notifications: NotificationsStart; } export const getUiApi = ({ cache, capabilities, client, - overlays, - theme, - notifications, + ...startServices }: GetUiApiOptions): SavedObjectsTaggingApiUi => { const components = getComponents({ + ...startServices, cache, capabilities, - overlays, - theme, tagClient: client, - notifications, }); const getTagList = buildGetTagList(cache); diff --git a/x-pack/plugins/saved_objects_tagging/tsconfig.json b/x-pack/plugins/saved_objects_tagging/tsconfig.json index 5efcb5533e3b..b5202917aa4e 100644 --- a/x-pack/plugins/saved_objects_tagging/tsconfig.json +++ b/x-pack/plugins/saved_objects_tagging/tsconfig.json @@ -13,7 +13,6 @@ "@kbn/usage-collection-plugin", "@kbn/management-plugin", "@kbn/saved-objects-tagging-oss-plugin", - "@kbn/kibana-react-plugin", "@kbn/usage-collection-plugin", "@kbn/features-plugin", "@kbn/security-plugin", @@ -24,6 +23,9 @@ "@kbn/ebt-tools", "@kbn/core-notifications-browser", "@kbn/ui-theme", + "@kbn/react-kibana-context-render", + "@kbn/react-kibana-mount", + "@kbn/core-lifecycle-browser", ], "exclude": [ "target/**/*", diff --git a/x-pack/plugins/serverless/kibana.jsonc b/x-pack/plugins/serverless/kibana.jsonc index a0adba7f60df..1c3d5cef4f7b 100644 --- a/x-pack/plugins/serverless/kibana.jsonc +++ b/x-pack/plugins/serverless/kibana.jsonc @@ -16,8 +16,6 @@ "cloud" ], "optionalPlugins": [], - "requiredBundles": [ - "kibanaReact", - ] + "requiredBundles": [] } } diff --git a/x-pack/plugins/serverless/public/plugin.tsx b/x-pack/plugins/serverless/public/plugin.tsx index 95a9ff43c427..451752b28168 100644 --- a/x-pack/plugins/serverless/public/plugin.tsx +++ b/x-pack/plugins/serverless/public/plugin.tsx @@ -7,8 +7,7 @@ import { InternalChromeStart } from '@kbn/core-chrome-browser-internal'; import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public'; -import { I18nProvider } from '@kbn/i18n-react'; -import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public'; +import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { ProjectSwitcher, ProjectSwitcherKibanaProvider } from '@kbn/serverless-project-switcher'; import { ProjectType } from '@kbn/serverless-types'; import React from 'react'; @@ -120,13 +119,11 @@ export class ServerlessPlugin currentProjectType: ProjectType ) { ReactDOM.render( - - - - - - - , + + + + + , targetDomElement ); diff --git a/x-pack/plugins/serverless/tsconfig.json b/x-pack/plugins/serverless/tsconfig.json index c48775845185..48931f2a3793 100644 --- a/x-pack/plugins/serverless/tsconfig.json +++ b/x-pack/plugins/serverless/tsconfig.json @@ -16,17 +16,16 @@ "kbn_references": [ "@kbn/config-schema", "@kbn/core", - "@kbn/kibana-react-plugin", "@kbn/serverless-project-switcher", "@kbn/serverless-types", "@kbn/utils", "@kbn/core-chrome-browser", "@kbn/core-chrome-browser-internal", - "@kbn/i18n-react", "@kbn/cloud-plugin", "@kbn/serverless-common-settings", "@kbn/shared-ux-chrome-navigation", "@kbn/i18n", "@kbn/management-cards-navigation", + "@kbn/react-kibana-context-render", ] }