fix for broken Embeddable Panel

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}
           />
         </presentationUtil.ContextProvider>
       </KibanaContextProvider>

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,
   ]);

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<string, Action>();
 const triggerRegistry = new Map<string, Trigger>();
@@ -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}
       />
     </I18nProvider>
   );
@@ -191,6 +193,7 @@ const renderInEditModeAndOpenContextMenu = async (
         application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
+        theme={theme}
       />
     </I18nProvider>
   );
@@ -298,6 +301,7 @@ test('HelloWorldContainer in edit mode shows edit mode actions', async () => {
         application={applicationMock}
         inspector={inspector}
         SavedObjectFinder={() => null}
+        theme={theme}
       />
     </I18nProvider>
   );
@@ -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}
       />
     </I18nProvider>
   );
@@ -497,6 +504,7 @@ test('Check when hide header option is false', async () => {
         inspector={inspector}
         SavedObjectFinder={() => null}
         hideHeader={false}
+        theme={theme}
       />
     </I18nProvider>
   );
@@ -535,6 +543,7 @@ test('Check when hide header option is true', async () => {
         inspector={inspector}
         SavedObjectFinder={() => null}
         hideHeader={true}
+        theme={theme}
       />
     </I18nProvider>
   );
@@ -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}
       />
     </I18nProvider>
   );

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<any>;
 }
 
+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}
     />
   );
 };

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 <EuiLoadingChart />;
@@ -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<EmbeddablePanelWrapperProps> = ({
@@ -103,6 +106,7 @@ const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({
   actionPredicate,
   inspector,
   input,
+  theme,
 }) => {
   useEffect(() => {
     embeddable.updateInput(input);
@@ -118,6 +122,7 @@ const EmbeddablePanelWrapper: FC<EmbeddablePanelWrapperProps> = ({
       showShadow={false}
       showBadges={false}
       showNotifications={false}
+      theme={theme}
     />
   );
 };