Listen theme changes and apply theme

apache · Mar 11, 2024 · c2b9aa8 · c2b9aa8
1 parent 59bce7e
commit c2b9aa8
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 2 deletions.
diff --git a/packages/editor/src/envelope/KogitoEditorEnvelopeApiImpl.ts b/packages/editor/src/envelope/KogitoEditorEnvelopeApiImpl.ts
@@ -24,6 +24,7 @@ import {
   EditorContent,
   EditorFactory,
   EditorInitArgs,
+  EditorTheme,
   KogitoEditorChannelApi,
   KogitoEditorEnvelopeApi,
   KogitoEditorEnvelopeContextType,
@@ -94,6 +95,11 @@ export class KogitoEditorEnvelopeApiImpl<
     const editorContent = await this.args.envelopeContext.channelApi.requests.kogitoEditor_contentRequest();
     this.normalizedPosixPathRelativeToTheWorkspaceRoot = editorContent.normalizedPosixPathRelativeToTheWorkspaceRoot;
 
+    // "Permanent" theme subscription, destroyed along editor's iFrame
+    this.args.envelopeContext.channelApi.shared.kogitoEditor_theme.subscribe((theme: EditorTheme) => {
+      this.editor.setTheme(theme);
+    });
+
     await this.editor
       .setContent(editorContent.normalizedPosixPathRelativeToTheWorkspaceRoot, editorContent.content)
       .catch((e) => this.args.envelopeContext.channelApi.notifications.kogitoEditor_setContentError.send(editorContent))

diff --git a/packages/editor/tests/envelope/EditorEnvelopeView.test.tsx b/packages/editor/tests/envelope/EditorEnvelopeView.test.tsx
@@ -21,16 +21,33 @@ import * as React from "react";
 import { cleanup, fireEvent, getByTestId, render, act } from "@testing-library/react";
 import { EditorEnvelopeView, EditorEnvelopeViewApi } from "@kie-tools-core/editor/dist/envelope/EditorEnvelopeView";
 import { DummyEditor } from "./DummyEditor";
-import { usingEditorEnvelopeI18nContext, usingEnvelopeContext } from "./utils";
+import { DEFAULT_TESTING_ENVELOPE_CONTEXT, usingEditorEnvelopeI18nContext, usingEnvelopeContext } from "./utils";
 import { Editor } from "@kie-tools-core/editor/dist/api";
 
 function renderEditorEnvelopeView(): EditorEnvelopeViewApi<Editor> {
   const editorEnvelopeRef = React.createRef<EditorEnvelopeViewApi<Editor>>();
   const setLocale = jest.fn();
+  const kogitoEditor_theme = jest.fn() as any;
+  const subscribe = jest.fn() as any;
+  const unsubscribe = jest.fn() as any;
+
   render(
     usingEditorEnvelopeI18nContext(
       usingEnvelopeContext(
-        <EditorEnvelopeView ref={editorEnvelopeRef} setLocale={setLocale} showKeyBindingsOverlay={true} />
+        <EditorEnvelopeView ref={editorEnvelopeRef} setLocale={setLocale} showKeyBindingsOverlay={true} />,
+        {
+          channelApi: {
+            ...DEFAULT_TESTING_ENVELOPE_CONTEXT.channelApi,
+            shared: {
+              ...DEFAULT_TESTING_ENVELOPE_CONTEXT.channelApi.shared,
+              kogitoEditor_theme: {
+                ...kogitoEditor_theme,
+                subscribe: subscribe,
+                unsubscribe: unsubscribe,
+              },
+            },
+          },
+        }
       ).wrapper
     ).wrapper
   );

diff --git a/packages/editor/tests/envelope/KeyBindingHelpOverlay/KeyBindingsHelpOverlay.test.tsx b/packages/editor/tests/envelope/KeyBindingHelpOverlay/KeyBindingsHelpOverlay.test.tsx
@@ -28,6 +28,9 @@ describe("KeyBindingsHelpOverlay", () => {
   test("minimal setup", async () => {
     const keyboardShortcutsService = new DefaultKeyboardShortcutsService({ os: OperatingSystem.WINDOWS });
     keyboardShortcutsService.registerKeyPress("ctrl+c", "Copy", () => Promise.resolve(), {});
+    const kogitoEditor_theme = jest.fn() as any;
+    const subscribe = jest.fn() as any;
+    const unsubscribe = jest.fn() as any;
 
     const component = render(
       usingEditorEnvelopeI18nContext(
@@ -37,6 +40,17 @@ describe("KeyBindingsHelpOverlay", () => {
             ...DEFAULT_TESTING_ENVELOPE_CONTEXT.services,
             keyboardShortcuts: keyboardShortcutsService,
           },
+          channelApi: {
+            ...DEFAULT_TESTING_ENVELOPE_CONTEXT.channelApi,
+            shared: {
+              ...DEFAULT_TESTING_ENVELOPE_CONTEXT.channelApi.shared,
+              kogitoEditor_theme: {
+                ...kogitoEditor_theme,
+                subscribe: subscribe,
+                unsubscribe: unsubscribe,
+              },
+            },
+          },
         }).wrapper
       ).wrapper
     );

diff --git a/packages/kie-bc-editors/src/bpmn/envelope/BpmnEditor.ts b/packages/kie-bc-editors/src/bpmn/envelope/BpmnEditor.ts
@@ -19,6 +19,7 @@
 
 import { GwtEditorWrapper } from "../../common";
 import { CanvasConsumedInteropApi } from "../../canvas/CanvasConsumedInteropApi";
+import { EditorTheme } from "@kie-tools-core/editor/dist/api";
 
 interface CustomWindow extends Window {
   canvas: CanvasConsumedInteropApi;
@@ -74,4 +75,9 @@ export class BpmnEditorImpl extends GwtEditorWrapper implements BpmnEditor {
   public centerNode(uuid: string) {
     window.canvas.centerNode(uuid);
   }
+
+  public setTheme(theme: EditorTheme) {
+    // Themes are not supported by BPMN Editor
+    return Promise.resolve();
+  }
 }
diff --git a/packages/kie-bc-editors/src/dmn/envelope/DmnEditor.ts b/packages/kie-bc-editors/src/dmn/envelope/DmnEditor.ts
@@ -19,6 +19,7 @@
 
 import { GwtEditorWrapper } from "../../common";
 import { CanvasConsumedInteropApi } from "../../canvas/CanvasConsumedInteropApi";
+import { EditorTheme } from "@kie-tools-core/editor/dist/api";
 
 interface CustomWindow extends Window {
   canvas: CanvasConsumedInteropApi;
@@ -74,4 +75,9 @@ export class DmnEditorImpl extends GwtEditorWrapper implements DmnEditor {
   public centerNode(uuid: string) {
     window.canvas.centerNode(uuid);
   }
+
+  public setTheme(theme: EditorTheme) {
+    // Themes are not supported by DMN Editor
+    return Promise.resolve();
+  }
 }
diff --git a/packages/kie-bc-editors/src/scesim/envelope/SceSimEditor.ts b/packages/kie-bc-editors/src/scesim/envelope/SceSimEditor.ts
@@ -18,6 +18,7 @@
  */
 
 import { GwtEditorWrapper } from "../../common";
+import { EditorTheme } from "@kie-tools-core/editor/dist/api";
 
 export interface SceSimEditor extends GwtEditorWrapper {
   mySceSimMethod(): string;
@@ -27,4 +28,9 @@ export class SceSimEditorImpl extends GwtEditorWrapper implements SceSimEditor {
   public mySceSimMethod() {
     return "scesim-specific--configured";
   }
+
+  public setTheme(theme: EditorTheme) {
+    // Themes are not supported by SceSim Editor
+    return Promise.resolve();
+  }
 }