[TableListView] Fix dark mode for content editor (#161570)

examples/content_management_examples/public/examples/msearch/msearch_app.tsx

@@ -24,12 +24,7 @@ export const MSearchApp = (props: {
     <ContentClientProvider contentClient={props.contentClient}>
       <I18nProvider>
         <TableListViewKibanaProvider
-          core={{
-            application: props.core.application,
-            notifications: props.core.notifications,
-            overlays: props.core.overlays,
-            http: props.core.http,
-          }}
+          core={props.core}
           toMountPoint={toMountPoint}
           FormattedRelative={FormattedRelative}
           savedObjectsTagging={props.savedObjectsTagging.getTaggingApi()}

packages/content-management/content_editor/src/__jest__/tests.helpers.tsx

@@ -7,11 +7,14 @@
  */
 import React from 'react';
 import type { ComponentType } from 'react';
+import { of } from 'rxjs';
 
 import { TagSelector, TagList } from '../mocks';
 import { ContentEditorProvider } from '../services';
 import type { Services } from '../services';
 
+const theme$ = of({ darkMode: false });
+
 export const getMockServices = (overrides?: Partial<Services>) => {
   const services = {
     openFlyout: jest.fn(() => ({
@@ -21,6 +24,7 @@ export const getMockServices = (overrides?: Partial<Services>) => {
     TagList,
     TagSelector,
     notifyError: () => undefined,
+    theme$,
     ...overrides,
   };
 

packages/content-management/content_editor/src/components/editor_loader.tsx

@@ -7,12 +7,21 @@
  */
 
 import React, { useState, useCallback, useEffect } from 'react';
-import { EuiFlyoutHeader, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
+import { EuiFlyoutHeader, EuiFlyoutBody, EuiFlyoutFooter, EuiThemeProvider } from '@elastic/eui';
+import useObservable from 'react-use/lib/useObservable';
+import { Observable, of } from 'rxjs';
 
+import { Theme } from '../services';
 import type { Props } from './editor_flyout_content_container';
 
-export const ContentEditorLoader: React.FC<Props> = (props) => {
+const themeDefault = { darkMode: false };
+
+export const ContentEditorLoader: React.FC<Props & { theme$?: Observable<Theme> }> = ({
+  theme$,
+  ...rest
+}) => {
   const [Editor, setEditor] = useState<React.ComponentType<Props> | null>(null);
+  const { darkMode } = useObservable(theme$ ?? of(themeDefault), themeDefault);
 
   const loadEditor = useCallback(async () => {
     const { ContentEditorFlyoutContentContainer } = await import(
@@ -27,7 +36,9 @@ export const ContentEditorLoader: React.FC<Props> = (props) => {
   }, [loadEditor]);
 
   return Editor ? (
-    <Editor {...props} />
+    <EuiThemeProvider colorMode={darkMode ? 'dark' : 'light'}>
+      <Editor {...rest} />
+    </EuiThemeProvider>
   ) : (
     <>
       <EuiFlyoutHeader />

packages/content-management/content_editor/src/open_content_editor.tsx

@@ -20,7 +20,7 @@ export type OpenContentEditorParams = Pick<
 
 export function useOpenContentEditor() {
   const services = useServices();
-  const { openFlyout } = services;
+  const { openFlyout, theme$ } = services;
   const flyout = useRef<OverlayRef | null>(null);
 
   return useCallback(
@@ -35,7 +35,12 @@ export function useOpenContentEditor() {
       };
 
       flyout.current = openFlyout(
-        <ContentEditorLoader {...args} onCancel={closeFlyout} services={services} />,
+        <ContentEditorLoader
+          {...args}
+          onCancel={closeFlyout}
+          services={services}
+          theme$={theme$}
+        />,
         {
           maxWidth: 600,
           size: 'm',
@@ -46,6 +51,6 @@ export function useOpenContentEditor() {
 
       return closeFlyout;
     },
-    [openFlyout, services]
+    [openFlyout, services, theme$]
   );
 }

packages/content-management/content_editor/src/services.tsx

@@ -26,6 +26,10 @@ export interface SavedObjectsReference {
   type: string;
 }
 
+export interface Theme {
+  readonly darkMode: boolean;
+}
+
 /**
  * Abstract external services for this component.
  */
@@ -34,6 +38,7 @@ export interface Services {
   notifyError: NotifyFn;
   TagList?: FC<{ references: SavedObjectsReference[] }>;
   TagSelector?: React.FC<TagSelectorProps>;
+  theme$: Observable<Theme>;
 }
 
 const ContentEditorContext = React.createContext<Services | null>(null);
@@ -59,6 +64,9 @@ export interface ContentEditorKibanaDependencies {
         addDanger: (notifyArgs: { title: MountPoint; text?: string }) => void;
       };
     };
+    theme: {
+      theme$: Observable<Theme>;
+    };
   };
   /**
    * Handler from the '@kbn/kibana-react-plugin/public' Plugin
@@ -131,6 +139,7 @@ export const ContentEditorKibanaProvider: FC<ContentEditorKibanaDependencies> =
       }}
       TagList={TagList}
       TagSelector={savedObjectsTagging?.ui.components.SavedObjectSaveModalTagSelector}
+      theme$={core.theme.theme$}
     >
       {children}
     </ContentEditorProvider>

packages/content-management/table_list_view_table/src/__jest__/tests.helpers.tsx

@@ -7,7 +7,7 @@
  */
 import React from 'react';
 import type { ComponentType } from 'react';
-import { from } from 'rxjs';
+import { from, of } from 'rxjs';
 import { ContentEditorProvider } from '@kbn/content-management-content-editor';
 
 import { TagList } from '../mocks';
@@ -31,11 +31,13 @@ export const getMockServices = (overrides?: Partial<Services>) => {
   return services;
 };
 
+const theme$ = of({ darkMode: false });
+
 export function WithServices<P>(Comp: ComponentType<P>, overrides: Partial<Services> = {}) {
   return (props: P) => {
     const services = getMockServices(overrides);
     return (
-      <ContentEditorProvider openFlyout={jest.fn()} notifyError={() => undefined}>
+      <ContentEditorProvider openFlyout={jest.fn()} notifyError={() => undefined} theme$={theme$}>
         <TableListViewProvider {...services}>
           <Comp {...(props as any)} />
         </TableListViewProvider>

packages/content-management/table_list_view_table/src/services.tsx

@@ -99,6 +99,11 @@ export interface TableListViewKibanaDependencies {
     overlays: {
       openFlyout(mount: MountPoint, options?: OverlayFlyoutOpenOptions): OverlayRef;
     };
+    theme: {
+      theme$: Observable<{
+        readonly darkMode: boolean;
+      }>;
+    };
   };
   /**
    * Handler from the '@kbn/kibana-react-plugin/public' Plugin

src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx

@@ -87,6 +87,7 @@ export const DashboardListing = ({
     notifications,
     overlays,
     http,
+    chrome: { theme },
     savedObjectsTagging,
     dashboardSessionStorage,
     settings: { uiSettings },
@@ -223,6 +224,7 @@ export const DashboardListing = ({
             notifications,
             overlays,
             http,
+            theme,
           },
           toMountPoint,
           savedObjectsTagging: savedObjectsTaggingFakePlugin,

src/plugins/dashboard/public/services/chrome/chrome.stub.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { chromeServiceMock } from '@kbn/core/public/mocks';
+import { coreMock, chromeServiceMock } from '@kbn/core/public/mocks';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { DashboardChromeService } from './types';
 
@@ -23,5 +23,6 @@ export const chromeServiceFactory: ChromeServiceFactory = () => {
     setBreadcrumbs: pluginMock.setBreadcrumbs,
     setHelpExtension: pluginMock.setHelpExtension,
     setIsVisible: pluginMock.setIsVisible,
+    theme: coreMock.createStart().theme,
   };
 };

src/plugins/dashboard/public/services/chrome/chrome_service.ts

@@ -26,6 +26,7 @@ export const chromeServiceFactory: ChromeServiceFactory = ({ coreStart }) => {
       setHelpExtension,
       setIsVisible,
     },
+    theme,
   } = coreStart;
 
   return {
@@ -36,5 +37,6 @@ export const chromeServiceFactory: ChromeServiceFactory = ({ coreStart }) => {
     setBreadcrumbs,
     setHelpExtension,
     setIsVisible,
+    theme,
   };
 };

src/plugins/dashboard/public/services/chrome/types.ts

@@ -16,4 +16,5 @@ export interface DashboardChromeService {
   setBreadcrumbs: CoreStart['chrome']['setBreadcrumbs'];
   setHelpExtension: CoreStart['chrome']['setHelpExtension'];
   setIsVisible: CoreStart['chrome']['setIsVisible'];
+  theme: CoreStart['theme'];
 }