From bbaf9909bf13dcec3cdacfafae6d995e30345324 Mon Sep 17 00:00:00 2001 From: shivindera Date: Mon, 10 Jan 2022 13:33:15 +0100 Subject: [PATCH] fix for broken Embeddable Panel --- .../embeddable/dashboard_container.test.tsx | 4 +++- .../public/application/top_nav/dashboard_top_nav.tsx | 2 ++ .../public/lib/panel/embeddable_panel.test.tsx | 12 +++++++++++- src/plugins/embeddable/public/mocks.tsx | 5 ++++- .../lens/public/embeddable/embeddable_component.tsx | 7 ++++++- 5 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx index d5eef0c05129d..5f50cfd842b67 100644 --- a/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx +++ b/src/plugins/dashboard/public/application/embeddable/dashboard_container.test.tsx @@ -41,6 +41,7 @@ import { uiActionsPluginMock } from '../../../../ui_actions/public/mocks'; import { getStubPluginServices } from '../../../../presentation_util/public'; const presentationUtil = getStubPluginServices(); +const theme = coreMock.createStart().theme; const options: DashboardContainerServices = { // TODO: clean up use of any @@ -55,7 +56,7 @@ const options: DashboardContainerServices = { uiActions: {} as any, uiSettings: uiSettingsServiceMock.createStartContract(), http: coreMock.createStart().http, - theme: coreMock.createStart().theme, + theme, presentationUtil, }; @@ -251,6 +252,7 @@ test('DashboardContainer in edit mode shows edit mode actions', async () => { overlays={{} as any} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> diff --git a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx index bc5bb3aa4a566..005d40a90f38f 100644 --- a/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx +++ b/src/plugins/dashboard/public/application/top_nav/dashboard_top_nav.tsx @@ -161,6 +161,7 @@ export function DashboardTopNav({ overlays: core.overlays, SavedObjectFinder: getSavedObjectFinder(core.savedObjects, uiSettings), reportUiCounter: usageCollection?.reportUiCounter, + theme: core.theme, }), })); } @@ -171,6 +172,7 @@ export function DashboardTopNav({ core.notifications, core.savedObjects, core.overlays, + core.theme, uiSettings, usageCollection, ]); diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx index 78bd337b21e52..8d313030556c6 100644 --- a/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx +++ b/src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx @@ -31,7 +31,7 @@ import { import { inspectorPluginMock } from '../../../../inspector/public/mocks'; import { EuiBadge } from '@elastic/eui'; import { embeddablePluginMock } from '../../mocks'; -import { applicationServiceMock } from '../../../../../core/public/mocks'; +import { applicationServiceMock, themeServiceMock } from '../../../../../core/public/mocks'; const actionRegistry = new Map(); const triggerRegistry = new Map(); @@ -44,6 +44,7 @@ const trigger: Trigger = { }; const embeddableFactory = new ContactCardEmbeddableFactory((() => null) as any, {} as any); const applicationMock = applicationServiceMock.createStartContract(); +const theme = themeServiceMock.createStartContract(); actionRegistry.set(editModeAction.id, editModeAction); triggerRegistry.set(trigger.id, trigger); @@ -152,6 +153,7 @@ test('HelloWorldContainer in view mode hides edit mode actions', async () => { overlays={{} as any} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -191,6 +193,7 @@ const renderInEditModeAndOpenContextMenu = async ( application={applicationMock} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -298,6 +301,7 @@ test('HelloWorldContainer in edit mode shows edit mode actions', async () => { application={applicationMock} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -360,6 +364,7 @@ test('Panel title customize link does not exist in view mode', async () => { application={applicationMock} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -395,6 +400,7 @@ test('Runs customize panel action on title click when in edit mode', async () => application={applicationMock} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -443,6 +449,7 @@ test('Updates when hidePanelTitles is toggled', async () => { application={applicationMock} inspector={inspector} SavedObjectFinder={() => null} + theme={theme} /> ); @@ -497,6 +504,7 @@ test('Check when hide header option is false', async () => { inspector={inspector} SavedObjectFinder={() => null} hideHeader={false} + theme={theme} /> ); @@ -535,6 +543,7 @@ test('Check when hide header option is true', async () => { inspector={inspector} SavedObjectFinder={() => null} hideHeader={true} + theme={theme} /> ); @@ -567,6 +576,7 @@ test('Should work in minimal way rendering only the inspector action', async () getActions={() => Promise.resolve([])} inspector={inspector} hideHeader={false} + theme={theme} /> ); diff --git a/src/plugins/embeddable/public/mocks.tsx b/src/plugins/embeddable/public/mocks.tsx index 94eb5e5cc6a02..44d2b395a48c3 100644 --- a/src/plugins/embeddable/public/mocks.tsx +++ b/src/plugins/embeddable/public/mocks.tsx @@ -20,7 +20,7 @@ import { ReferenceOrValueEmbeddable, } from '.'; import { EmbeddablePublicPlugin } from './plugin'; -import { coreMock } from '../../../core/public/mocks'; +import { coreMock, themeServiceMock } from '../../../core/public/mocks'; import { UiActionsService } from './lib/ui_actions'; import { CoreStart } from '../../../core/public'; import { Start as InspectorStart } from '../../inspector/public'; @@ -43,6 +43,8 @@ interface CreateEmbeddablePanelMockArgs { SavedObjectFinder: React.ComponentType; } +const theme = themeServiceMock.createStartContract(); + export const createEmbeddablePanelMock = ({ getActions, getEmbeddableFactory, @@ -64,6 +66,7 @@ export const createEmbeddablePanelMock = ({ overlays={overlays || ({} as any)} inspector={inspector || ({} as any)} SavedObjectFinder={SavedObjectFinder || (() => null)} + theme={theme} /> ); }; diff --git a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx index 7f65e50bf4429..e501138648b14 100644 --- a/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx +++ b/x-pack/plugins/lens/public/embeddable/embeddable_component.tsx @@ -6,7 +6,7 @@ */ import React, { FC, useEffect } from 'react'; -import type { CoreStart } from 'kibana/public'; +import type { CoreStart, ThemeServiceStart } from 'kibana/public'; import type { UiActionsStart } from 'src/plugins/ui_actions/public'; import type { Start as InspectorStartContract } from 'src/plugins/inspector/public'; import { EuiLoadingChart } from '@elastic/eui'; @@ -68,6 +68,7 @@ export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDep const input = { ...props }; const [embeddable, loading, error] = useEmbeddableFactory({ factory, input }); const hasActions = props.withActions === true; + const theme = core.theme; if (loading) { return ; @@ -81,6 +82,7 @@ export function getEmbeddableComponent(core: CoreStart, plugins: PluginsStartDep inspector={inspector} actionPredicate={() => hasActions} input={input} + theme={theme} /> ); } @@ -95,6 +97,7 @@ interface EmbeddablePanelWrapperProps { inspector: PluginsStartDependencies['inspector']; actionPredicate: (id: string) => boolean; input: EmbeddableComponentProps; + theme: ThemeServiceStart; } const EmbeddablePanelWrapper: FC = ({ @@ -103,6 +106,7 @@ const EmbeddablePanelWrapper: FC = ({ actionPredicate, inspector, input, + theme, }) => { useEffect(() => { embeddable.updateInput(input); @@ -118,6 +122,7 @@ const EmbeddablePanelWrapper: FC = ({ showShadow={false} showBadges={false} showNotifications={false} + theme={theme} /> ); };