[8.10] [Content Management] Fix content editor flyout footer (#165907) (#166099)

# Backport This will backport the following commits from `main` to `8.10`: - [[Content Management] Fix content editor flyout footer (#165907)](https://github.com/elastic/kibana/pull/165907)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Catherine Liu <catherine.liu@elastic.co>
2025-04-23 09:19:04 -04:00 · 2023-09-08 13:16:41 -04:00 · 2023-09-08 13:16:41 -04:00 · ef87cfe0ee
commit ef87cfe0ee
parent 582629c6ea
5 changed files with 11 additions and 35 deletions
--- a/packages/content-management/content_editor/src/jest/tests.helpers.tsx
+++ b/packages/content-management/content_editor/src/jest/tests.helpers.tsx
@ -7,14 +7,11 @@
 */
 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(() => ({
@ -24,7 +21,6 @@ export const getMockServices = (overrides?: Partial<Services>) => {
    TagList,
    TagSelector,
    notifyError: () => undefined,
-    theme$,
    ...overrides,
  };

--- a/packages/content-management/content_editor/src/components/editor_loader.tsx
+++ b/packages/content-management/content_editor/src/components/editor_loader.tsx
@ -7,21 +7,11 @@
 */

 import React, { useState, useCallback, useEffect } from 'react';
-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 { EuiFlyoutHeader, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
 import type { Props } from './editor_flyout_content_container';

-const themeDefault = { darkMode: false };
-
-export const ContentEditorLoader: React.FC<Props & { theme$?: Observable<Theme> }> = ({
-  theme$,
-  ...rest
-}) => {
+export const ContentEditorLoader: React.FC<Props> = (props) => {
  const [Editor, setEditor] = useState<React.ComponentType<Props> | null>(null);
-  const { darkMode } = useObservable(theme$ ?? of(themeDefault), themeDefault);

  const loadEditor = useCallback(async () => {
    const { ContentEditorFlyoutContentContainer } = await import(
@ -36,9 +26,7 @@ export const ContentEditorLoader: React.FC<Props & { theme$?: Observable<Theme>
  }, [loadEditor]);

  return Editor ? (
-    <EuiThemeProvider colorMode={darkMode ? 'dark' : 'light'}>
-      <Editor {...rest} />
-    </EuiThemeProvider>
+    <Editor {...props} />
  ) : (
    <>
      <EuiFlyoutHeader />
--- a/packages/content-management/content_editor/src/open_content_editor.tsx
+++ b/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, theme$ } = services;
+  const { openFlyout } = services;
  const flyout = useRef<OverlayRef | null>(null);

  return useCallback(
@ -35,12 +35,7 @@ export function useOpenContentEditor() {
      };

      flyout.current = openFlyout(
-        <ContentEditorLoader
-          {...args}
-          onCancel={closeFlyout}
-          services={services}
-          theme$={theme$}
-        />,
+        <ContentEditorLoader {...args} onCancel={closeFlyout} services={services} />,
        {
          maxWidth: 600,
          size: 'm',
@ -51,6 +46,6 @@ export function useOpenContentEditor() {

      return closeFlyout;
    },
-    [openFlyout, services, theme$]
+    [openFlyout, services]
  );
 }
--- a/packages/content-management/content_editor/src/services.tsx
+++ b/packages/content-management/content_editor/src/services.tsx
@ -38,7 +38,6 @@ export interface Services {
  notifyError: NotifyFn;
  TagList?: FC<{ references: SavedObjectsReference[] }>;
  TagSelector?: React.FC<TagSelectorProps>;
-  theme$: Observable<Theme>;
 }

 const ContentEditorContext = React.createContext<Services | null>(null);
@ -111,6 +110,7 @@ export const ContentEditorKibanaProvider: FC<ContentEditorKibanaDependencies> =
 }) => {
  const { core, toMountPoint, savedObjectsTagging } = services;
  const { openFlyout: coreOpenFlyout } = core.overlays;
+  const { theme$ } = core.theme;

  const TagList = useMemo(() => {
    const Comp: Services['TagList'] = ({ references }) => {
@ -126,9 +126,9 @@ export const ContentEditorKibanaProvider: FC<ContentEditorKibanaDependencies> =

  const openFlyout = useCallback(
    (node: ReactNode, options: OverlayFlyoutOpenOptions) => {
-      return coreOpenFlyout(toMountPoint(node), options);
+      return coreOpenFlyout(toMountPoint(node, { theme$ }), options);
    },
-    [toMountPoint, coreOpenFlyout]
+    [coreOpenFlyout, toMountPoint, theme$]
  );

  return (
@ -139,7 +139,6 @@ export const ContentEditorKibanaProvider: FC<ContentEditorKibanaDependencies> =
      }}
      TagList={TagList}
      TagSelector={savedObjectsTagging?.ui.components.SavedObjectSaveModalTagSelector}
-      theme$={core.theme.theme$}
    >
      {children}
    </ContentEditorProvider>
--- a/packages/content-management/table_list_view_table/src/jest/tests.helpers.tsx
+++ b/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, of } from 'rxjs';
+import { from } from 'rxjs';
 import { ContentEditorProvider } from '@kbn/content-management-content-editor';

 import { TagList } from '../mocks';
@ -31,13 +31,11 @@ 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} theme$={theme$}>
+      <ContentEditorProvider openFlyout={jest.fn()} notifyError={() => undefined}>
        <TableListViewProvider {...services}>
          <Comp {...(props as any)} />
        </TableListViewProvider>