KOGITO-10018: SWF Editor - Integrate SWF diagram editor theme API with VsCode and Combined Editor

packages/editor/src/api/KogitoEditorEnvelopeContext.ts

@@ -24,6 +24,7 @@ import { KogitoEditorChannelApi } from "./KogitoEditorChannelApi";
 import { I18nService } from "@kie-tools-core/i18n/dist/envelope";
 import { OperatingSystem } from "@kie-tools-core/operating-system";
 import { KeyboardShortcutsService } from "@kie-tools-core/keyboard-shortcuts/dist/envelope/KeyboardShortcutsService";
+import { EditorTheme } from "./EditorTheme";
 
 export interface KogitoEditorEnvelopeContextType<
   ChannelApi extends KogitoEditorChannelApi & ApiDefinition<ChannelApi>
@@ -34,6 +35,7 @@ export interface KogitoEditorEnvelopeContextType<
     keyboardShortcuts: KeyboardShortcutsService;
     i18n: I18nService;
   };
+  supportedThemes: EditorTheme[];
 }
 
 export const KogitoEditorEnvelopeContext = React.createContext<KogitoEditorEnvelopeContextType<any>>({} as any);

packages/editor/src/envelope/KeyBindingsHelpOverlay/KeyBindingsHelpOverlay.tsx

@@ -31,13 +31,15 @@
 import { Modal } from "@patternfly/react-core/dist/js/components/Modal";
 import { KeyboardIcon } from "@patternfly/react-icons/dist/js/icons/keyboard-icon";
 import { OperatingSystem } from "@kie-tools-core/operating-system";
-import { useKogitoEditorEnvelopeContext } from "../../api";
+import { EditorTheme, useKogitoEditorEnvelopeContext } from "../../api";
 import { useEditorEnvelopeI18nContext } from "../i18n";
+import { useSharedValue } from "@kie-tools-core/envelope-bus/dist/hooks";
 
 export function KeyBindingsHelpOverlay() {
   const [showing, setShowing] = useState(false);
   const envelopeContext = useKogitoEditorEnvelopeContext();
   const { i18n } = useEditorEnvelopeI18nContext();
+  const [theme] = useSharedValue(envelopeContext.channelApi?.shared.kogitoEditor_theme);
 
   const toggle = useCallback(() => {
     setShowing(!showing);
@@ -61,7 +63,7 @@
         }
         return lhs;
       }, new Map<string, Set<{ label: string; combination: string }>>());
   }, [envelopeContext.services.keyboardShortcuts.registered()]);
 
   useEffect(() => {
     const id = envelopeContext.services.keyboardShortcuts.registerKeyPress(
@@ -71,7 +73,7 @@
       { element: window }
     );
     return () => envelopeContext.services.keyboardShortcuts.deregister(id);
   }, [i18n]);
 
   useEffect(() => {
     if (showing) {
@@ -80,13 +82,15 @@
       });
       return () => envelopeContext.services.keyboardShortcuts.deregister(id);
     }
   }, [showing]);
 
+  const themeCss = getCssThemeModifier(envelopeContext.supportedThemes, theme!);
+
   return (
     <>
       <div
         onClick={() => setShowing(!showing)}
-        className={"kie-tools--keyboard-shortcuts kie-tools--keyboard-shortcuts-icon"}
+        className={"kie-tools--keyboard-shortcuts kie-tools--keyboard-shortcuts-icon" + themeCss}
         data-ouia-component-id="keyboard-shortcuts-icon"
         data-testid={"keyboard-shortcuts-help-overlay-icon"}
       >
@@ -100,7 +104,7 @@
         width={"60%"}
         onClose={toggle}
         data-testid={"keyboard-shortcuts-help-overlay"}
-        className={"kie-tools--keyboard-shortcuts"}
+        className={"kie-tools--keyboard-shortcuts" + themeCss}
       >
         <TextContent>
           <TextList component={TextListVariants.dl}>
@@ -124,6 +128,21 @@
   );
 }
 
+function getCssThemeModifier(supportedThemes: EditorTheme[], theme: EditorTheme) {
+  if (supportedThemes.includes(theme)) {
+    switch (theme) {
+      case EditorTheme.DARK: {
+        return " dark";
+      }
+      default: {
+        return "";
+      }
+    }
+  }
+
+  return "";
+}
+
 function handleMacOsCombination(combination: string, os?: OperatingSystem) {
   if (os === OperatingSystem.MACOS) {
     return combination.replace("ctrl", "cmd");

packages/editor/src/envelope/KogitoEditorEnvelope.tsx

@@ -62,6 +62,7 @@ export class KogitoEditorEnvelope<
         keyboardShortcuts: keyboardShortcutsService,
         i18n: i18nService,
       },
+      supportedThemes: [],
     }
   ) {}
 

packages/editor/src/envelope/KogitoEditorEnvelopeApiImpl.ts

@@ -24,6 +24,7 @@ import {
   EditorContent,
   EditorFactory,
   EditorInitArgs,
+  EditorTheme,
   KogitoEditorChannelApi,
   KogitoEditorEnvelopeApi,
   KogitoEditorEnvelopeContextType,
@@ -84,6 +85,13 @@ export class KogitoEditorEnvelopeApiImpl<
 
     this.editor = await this.editorFactory.createEditor(this.args.envelopeContext, initArgs);
 
+    // "Permanent" theme subscription, destroyed along editor's iFrame
+    if (this.args.envelopeContext.supportedThemes.length > 1) {
+      this.args.envelopeContext.channelApi.shared.kogitoEditor_theme.subscribe((theme: EditorTheme) => {
+        this.editor.setTheme(theme);
+      });
+    }
+
     await this.view().setEditor(this.editor);
 
     this.editor.af_onStartup?.();

packages/editor/src/envelope/styles.scss

@@ -80,6 +80,38 @@
   color: var(--pf-global--Color--dark-100);
 }
 
+.kie-tools--keyboard-shortcuts.kie-tools--keyboard-shortcuts-icon.dark {
+  color: #979797;
+}
+
+.pf-c-modal-box.kie-tools--keyboard-shortcuts.dark {
+  background-color: #313131;
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6,
+  .dt,
+  .dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  dt,
+  dd {
+    color: #cccccc;
+  }
+  .pf-c-button.pf-m-plain {
+    color: #cccccc;
+  }
+  .pf-c-button.pf-m-plain:hover {
+    color: #000;
+  }
+}
+
 body {
   color: var(--pf-global--Color-dark--100);
 }

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

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

packages/editor/tests/envelope/utils.tsx

@@ -40,6 +40,7 @@ export const DEFAULT_TESTING_ENVELOPE_CONTEXT: KogitoEditorEnvelopeContextType<K
     keyboardShortcuts: new DefaultKeyboardShortcutsService({} as any),
     i18n: new I18nService(),
   },
+  supportedThemes: [],
 };
 
 export function usingEnvelopeContext(

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

packages/kie-bc-editors/src/common/GwtEditorWrapper.tsx

@@ -106,8 +106,18 @@ export class GwtEditorWrapper implements Editor {
   }
 
   public setTheme(theme: EditorTheme): Promise<void> {
-    // Only default theme is supported
-    return Promise.resolve();
+    if (!theme) {
+      Promise.resolve();
+    }
+
+    switch (theme) {
+      case EditorTheme.DARK: {
+        return Promise.resolve(this.gwtEditor.applyTheme("dark"));
+      }
+      default: {
+        return Promise.resolve(this.gwtEditor.applyTheme("light"));
+      }
+    }
   }
 
   private removeBusinessCentralHeaderPanel() {

packages/kie-bc-editors/src/common/consumedInteropApi/GwtAppFormerConsumedInteropApi.ts

@@ -35,6 +35,7 @@ export interface GwtEditor {
   getPreview(): Promise<string | undefined>;
   validate(): Promise<Notification[]>;
   selectStateByName(name: string | null): Promise<void>;
+  applyTheme(name: string | null): Promise<void>;
 }
 
 export class GwtAppFormerConsumedInteropApi {

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

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

packages/kie-bc-editors/tests/DummyEditor.tsx

@@ -56,7 +56,11 @@ export class DummyEditor implements Editor, GwtEditor {
     return Promise.resolve([]);
   }
 
-  public setTheme(theme: EditorTheme): Promise<void> {
+  public setTheme(_theme: EditorTheme): Promise<void> {
+    return Promise.resolve();
+  }
+
+  public applyTheme(_name: string | null): Promise<void> {
     return Promise.resolve();
   }
 

packages/kie-bc-editors/tests/GwtEditorWrapper.test.ts

@@ -19,7 +19,7 @@
 
 import { GwtEditorWrapper } from "@kie-tools/kie-bc-editors/dist/common/GwtEditorWrapper";
 import { GwtStateControlService } from "@kie-tools/kie-bc-editors/dist/common/gwtStateControl";
-import { KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
+import { EditorTheme, KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
 import { messageBusClientApiMock } from "@kie-tools-core/envelope-bus/dist-tests/common";
 import { I18n } from "@kie-tools-core/i18n/dist/core";
 import { kieBcEditorsI18nDefaults, kieBcEditorsI18nDictionaries } from "@kie-tools/kie-bc-editors/dist/common/i18n";
@@ -33,6 +33,7 @@ const MockEditor = jest.fn(() => ({
   getPreview: jest.fn(),
   validate: jest.fn(),
   selectStateByName: jest.fn(() => Promise.resolve()),
+  applyTheme: jest.fn(() => Promise.resolve()),
 }));
 
 const mockEditor = new MockEditor();
@@ -66,6 +67,16 @@ describe("GwtEditorWrapper", () => {
     expect(mockEditor.selectStateByName).toHaveBeenCalledWith("stateName");
   });
 
+  test("setTheme", async () => {
+    await wrapper.setTheme(EditorTheme.DARK);
+    expect(mockEditor.applyTheme).toHaveBeenCalledWith("dark");
+  });
+
+  test("setTheme", async () => {
+    await wrapper.setTheme(EditorTheme.LIGHT);
+    expect(mockEditor.applyTheme).toHaveBeenCalledWith("light");
+  });
+
   test("af_onOpen removes header", () => {
     const parent = document.createElement("div");
     const workbenchHeaderPanel = document.createElement("div");

packages/kie-bc-editors/tests/GwtEditorWrapperFactory.test.ts

@@ -112,6 +112,7 @@ describe("GwtEditorWrapperFactory", () => {
           keyboardShortcuts: {} as any,
           i18n: new I18nService(),
         },
+        supportedThemes: [],
       },
       {
         resourcesPathPrefix: "",

packages/pmml-editor/tests/editor/PMMLEditorFactory.test.ts

@@ -39,6 +39,7 @@ const envelopeContext: KogitoEditorEnvelopeContextType<KogitoEditorChannelApi> =
     keyboardShortcuts: new DefaultKeyboardShortcutsService({ os: OperatingSystem.LINUX }),
     i18n: new I18nService(),
   },
+  supportedThemes: [],
 };
 
 describe("PMMLEditorFactory", () => {

packages/pmml-editor/tests/editor/PMMLEditorInterface.test.ts

@@ -35,6 +35,7 @@ const envelopeContext: KogitoEditorEnvelopeContextType<KogitoEditorChannelApi> =
     keyboardShortcuts: new DefaultKeyboardShortcutsService({ os: OperatingSystem.LINUX }),
     i18n: new I18nService(),
   },
+  supportedThemes: [],
 };
 
 const editorInterface: PMMLEditorInterface = new PMMLEditorInterface(envelopeContext);

packages/serverless-workflow-diagram-editor-envelope/src/envelope/ServerlessWorkflowDiagramEditorFactory.ts

@@ -17,7 +17,12 @@
  * under the License.
  */
 
-import { EditorFactory, EditorInitArgs, KogitoEditorEnvelopeContextType } from "@kie-tools-core/editor/dist/api";
+import {
+  EditorFactory,
+  EditorInitArgs,
+  KogitoEditorEnvelopeContextType,
+  EditorTheme,
+} from "@kie-tools-core/editor/dist/api";
 import { GwtEditorWrapperFactory } from "@kie-tools/kie-bc-editors/dist/common";
 import { getServerlessWorkflowLanguageData, ServerlessWorkflowDiagramEditorChannelApi } from "../api";
 import { DiagramExposedInteropApi } from "../api/DiagramExposedInteropApi";
@@ -63,6 +68,9 @@ export class ServerlessWorkflowDiagramEditorFactory
       this.gwtEditorEnvelopeConfig
     );
 
+    // Initialize swf supported themes
+    ctx.supportedThemes = [EditorTheme.LIGHT, EditorTheme.DARK];
+
     return factory.createEditor(ctx, initArgs);
   }
 }