From 8cd52a847d3955ec3558a80f95926499896ad494 Mon Sep 17 00:00:00 2001 From: Pierre Gayvallet Date: Thu, 18 Nov 2021 09:36:24 +0100 Subject: [PATCH] add `theme$` to `ManagementAppMountParams` (#118852) * add `theme$` to `ManagementAppMountParams` * fix tests * fix more test usages Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- src/plugins/management/public/application.tsx | 9 +++++++-- .../components/management_app/management_app.tsx | 4 +++- .../components/management_app/management_router.tsx | 11 ++++++++++- .../management_app_wrapper/management_app_wrapper.tsx | 4 +++- src/plugins/management/public/types.ts | 4 +++- .../api_keys/api_keys_management_app.test.tsx | 3 ++- .../role_mappings_management_app.test.tsx | 3 ++- .../management/roles/roles_management_app.test.tsx | 3 ++- .../management/users/users_management_app.test.tsx | 3 ++- .../public/management/spaces_management_app.test.tsx | 3 ++- 10 files changed, 36 insertions(+), 11 deletions(-) diff --git a/src/plugins/management/public/application.tsx b/src/plugins/management/public/application.tsx index 8e3e7da41c394..3e2c4f7c04e40 100644 --- a/src/plugins/management/public/application.tsx +++ b/src/plugins/management/public/application.tsx @@ -13,11 +13,16 @@ import { AppMountParameters } from 'kibana/public'; import { ManagementApp, ManagementAppDependencies } from './components/management_app'; export const renderApp = async ( - { history, appBasePath, element }: AppMountParameters, + { history, appBasePath, element, theme$ }: AppMountParameters, dependencies: ManagementAppDependencies ) => { ReactDOM.render( - , + , element ); diff --git a/src/plugins/management/public/components/management_app/management_app.tsx b/src/plugins/management/public/components/management_app/management_app.tsx index 23d0a29083747..ac9739cc54578 100644 --- a/src/plugins/management/public/components/management_app/management_app.tsx +++ b/src/plugins/management/public/components/management_app/management_app.tsx @@ -25,6 +25,7 @@ import { SectionsServiceStart } from '../../types'; interface ManagementAppProps { appBasePath: string; history: AppMountParameters['history']; + theme$: AppMountParameters['theme$']; dependencies: ManagementAppDependencies; } @@ -34,7 +35,7 @@ export interface ManagementAppDependencies { setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void; } -export const ManagementApp = ({ dependencies, history }: ManagementAppProps) => { +export const ManagementApp = ({ dependencies, history, theme$ }: ManagementAppProps) => { const { setBreadcrumbs } = dependencies; const [selectedId, setSelectedId] = useState(''); const [sections, setSections] = useState(); @@ -93,6 +94,7 @@ export const ManagementApp = ({ dependencies, history }: ManagementAppProps) => > void; onAppMounted: (id: string) => void; @@ -23,7 +24,14 @@ interface ManagementRouterProps { } export const ManagementRouter = memo( - ({ dependencies, history, setBreadcrumbs, onAppMounted, sections }: ManagementRouterProps) => ( + ({ + dependencies, + history, + setBreadcrumbs, + onAppMounted, + sections, + theme$, + }: ManagementRouterProps) => ( {sections.map((section) => @@ -38,6 +46,7 @@ export const ManagementRouter = memo( setBreadcrumbs={setBreadcrumbs} onAppMounted={onAppMounted} history={history} + theme$={theme$} /> )} /> diff --git a/src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx b/src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx index 72bfe609c141a..57de84ec5aec6 100644 --- a/src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx +++ b/src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx @@ -19,6 +19,7 @@ interface ManagementSectionWrapperProps { setBreadcrumbs: (crumbs?: ChromeBreadcrumb[], history?: ScopedHistory) => void; onAppMounted: (id: string) => void; history: AppMountParameters['history']; + theme$: AppMountParameters['theme$']; } export class ManagementAppWrapper extends Component { @@ -26,7 +27,7 @@ export class ManagementAppWrapper extends Component(); componentDidMount() { - const { setBreadcrumbs, app, onAppMounted, history } = this.props; + const { setBreadcrumbs, app, onAppMounted, history, theme$ } = this.props; const { mount, basePath } = app; const appHistory = history.createSubHistory(app.basePath); @@ -35,6 +36,7 @@ export class ManagementAppWrapper extends Component setBreadcrumbs(crumbs, appHistory), element: this.mountElementRef.current!, history: appHistory, + theme$, }); onAppMounted(app.id); diff --git a/src/plugins/management/public/types.ts b/src/plugins/management/public/types.ts index 6a165c812b474..87b336928db91 100644 --- a/src/plugins/management/public/types.ts +++ b/src/plugins/management/public/types.ts @@ -6,10 +6,11 @@ * Side Public License, v 1. */ +import { Observable } from 'rxjs'; import { ScopedHistory, Capabilities } from 'kibana/public'; import type { LocatorPublic } from 'src/plugins/share/common'; import { ManagementSection, RegisterManagementSectionArgs } from './utils'; -import { ChromeBreadcrumb } from '../../../core/public/'; +import { ChromeBreadcrumb, CoreTheme } from '../../../core/public/'; import type { ManagementAppLocatorParams } from '../common/locator'; export interface ManagementSetup { @@ -63,6 +64,7 @@ export interface ManagementAppMountParams { element: HTMLElement; // element the section should render into setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void; history: ScopedHistory; + theme$: Observable; } export interface CreateManagementItemArgs { diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx index 922fd59c56d1b..83fe807f9a3c6 100644 --- a/x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx +++ b/x-pack/plugins/security/public/management/api_keys/api_keys_management_app.test.tsx @@ -11,7 +11,7 @@ jest.mock('./api_keys_grid', () => ({ import { act } from '@testing-library/react'; -import { coreMock, scopedHistoryMock } from 'src/core/public/mocks'; +import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks'; import type { Unmount } from 'src/plugins/management/public/types'; import { securityMock } from '../../mocks'; @@ -52,6 +52,7 @@ describe('apiKeysManagementApp', () => { element: container, setBreadcrumbs, history: scopedHistoryMock.create(), + theme$: themeServiceMock.createTheme$(), }); }); diff --git a/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx b/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx index 892c7940675d3..3b7e96ffabd1e 100644 --- a/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx +++ b/x-pack/plugins/security/public/management/role_mappings/role_mappings_management_app.test.tsx @@ -8,7 +8,7 @@ import { act } from '@testing-library/react'; import { noop } from 'lodash'; -import { coreMock, scopedHistoryMock } from 'src/core/public/mocks'; +import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks'; import type { Unmount } from 'src/plugins/management/public/types'; import { roleMappingsManagementApp } from './role_mappings_management_app'; @@ -46,6 +46,7 @@ async function mountApp(basePath: string, pathname: string) { element: container, setBreadcrumbs, history: scopedHistoryMock.create({ pathname }), + theme$: themeServiceMock.createTheme$(), }); }); diff --git a/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx b/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx index faab47a858d67..007c3e306372e 100644 --- a/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx +++ b/x-pack/plugins/security/public/management/roles/roles_management_app.test.tsx @@ -8,7 +8,7 @@ import { act } from '@testing-library/react'; import { noop } from 'lodash'; -import { coreMock, scopedHistoryMock } from 'src/core/public/mocks'; +import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks'; import type { Unmount } from 'src/plugins/management/public/types'; import { featuresPluginMock } from '../../../../features/public/mocks'; @@ -48,6 +48,7 @@ async function mountApp(basePath: string, pathname: string) { element: container, setBreadcrumbs, history: scopedHistoryMock.create({ pathname }), + theme$: themeServiceMock.createTheme$(), }); }); diff --git a/x-pack/plugins/security/public/management/users/users_management_app.test.tsx b/x-pack/plugins/security/public/management/users/users_management_app.test.tsx index f25fb211cb9de..84a6e82bf12ae 100644 --- a/x-pack/plugins/security/public/management/users/users_management_app.test.tsx +++ b/x-pack/plugins/security/public/management/users/users_management_app.test.tsx @@ -8,7 +8,7 @@ import { act } from '@testing-library/react'; import { noop } from 'lodash'; -import { coreMock, scopedHistoryMock } from 'src/core/public/mocks'; +import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks'; import type { Unmount } from 'src/plugins/management/public/types'; import { securityMock } from '../../mocks'; @@ -33,6 +33,7 @@ describe('usersManagementApp', () => { element, setBreadcrumbs, history, + theme$: themeServiceMock.createTheme$(), }); }); diff --git a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx index aefff7fb3c76a..2c64f559602cc 100644 --- a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx +++ b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx @@ -18,7 +18,7 @@ jest.mock('./edit_space', () => ({ }, })); -import { coreMock, scopedHistoryMock } from 'src/core/public/mocks'; +import { coreMock, scopedHistoryMock, themeServiceMock } from 'src/core/public/mocks'; import { featuresPluginMock } from '../../../features/public/mocks'; import type { PluginsStart } from '../plugin'; @@ -51,6 +51,7 @@ async function mountApp(basePath: string, pathname: string, spaceId?: string) { element: container, setBreadcrumbs, history: scopedHistoryMock.create({ pathname }), + theme$: themeServiceMock.createTheme$(), }); return { unmount, container, setBreadcrumbs, docTitle: coreStart.chrome.docTitle };