This is an automated email from the ASF dual-hosted git repository.
caponetto pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
The following commit(s) were added to refs/heads/main by this push:
new d3838b619e0 KOGITO-10017: Fix dark theme not being applied on SWF text
editor (#2125)
d3838b619e0 is described below
commit d3838b619e081630a56c325d734ed536b21b4384
Author: Guilherme Caponetto <[email protected]>
AuthorDate: Fri Jan 19 10:28:55 2024 -0300
KOGITO-10017: Fix dark theme not being applied on SWF text editor (#2125)
---
.../dev-webapp/HistoryButtons.tsx | 16 ++++++----------
.../src/editor/ServerlessWorkflowCombinedEditor.tsx | 20 ++++++++++++++++----
.../dev-webapp/App.tsx | 17 ++++++++++++++++-
.../dev-webapp/HistoryButtons.tsx | 20 +++++++++++++++++++-
.../src/editor/textEditor/SwfTextEditor.tsx | 1 +
.../src/editor/textEditor/SwfTextEditorController.ts | 4 ----
6 files changed, 58 insertions(+), 20 deletions(-)
diff --git
a/packages/serverless-workflow-combined-editor/dev-webapp/HistoryButtons.tsx
b/packages/serverless-workflow-combined-editor/dev-webapp/HistoryButtons.tsx
index 331682a4f2d..d7f2ddcdcf6 100644
--- a/packages/serverless-workflow-combined-editor/dev-webapp/HistoryButtons.tsx
+++ b/packages/serverless-workflow-combined-editor/dev-webapp/HistoryButtons.tsx
@@ -25,23 +25,19 @@ import { Text, TextContent } from
"@patternfly/react-core/dist/js/components/Tex
import * as React from "react";
import { useEffect, useRef, useState } from "react";
import "./HistoryButtons.scss";
-
-export enum Theme {
- LIGHT,
- DARK,
-}
+import { EditorTheme } from "@kie-tools-core/editor/dist/api";
interface HistoryButtonsProps {
undo: () => Promise<void>;
redo: () => Promise<void>;
get: () => Promise<string>;
- setTheme: (theme: Theme) => Promise<void>;
+ setTheme: (theme: EditorTheme) => Promise<void>;
validate: () => Promise<void>;
isDirty: boolean;
}
export const HistoryButtons = (props: HistoryButtonsProps) => {
- const [theme, setTheme] = useState<Theme>(Theme.LIGHT);
+ const [theme, setTheme] = useState<EditorTheme>(EditorTheme.LIGHT);
return (
<div className="history-buttons ignore-onclickoutside">
@@ -69,10 +65,10 @@ export const HistoryButtons = (props: HistoryButtonsProps)
=> {
id="theme"
label="Dark"
labelOff="Light"
- checked={theme === Theme.DARK}
+ checked={theme === EditorTheme.DARK}
onChange={(checked) => {
- setTheme(checked ? Theme.DARK : Theme.LIGHT);
- props.setTheme(checked ? Theme.DARK : Theme.LIGHT);
+ setTheme(checked ? EditorTheme.DARK : EditorTheme.LIGHT);
+ props.setTheme(checked ? EditorTheme.DARK : EditorTheme.LIGHT);
}}
/>
</SplitItem>
diff --git
a/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
b/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
index 738f98430ac..3fd2385ca7e 100644
---
a/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
+++
b/packages/serverless-workflow-combined-editor/src/editor/ServerlessWorkflowCombinedEditor.tsx
@@ -116,6 +116,8 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
const { editor: textEditor, editorRef: textEditorRef } = useEditorRef();
const { editor: diagramEditor, editorRef: diagramEditorRef } =
useEditorRef();
+ const [theme] =
useSharedValue(editorEnvelopeCtx.channelApi?.shared.kogitoEditor_theme);
+
const [previewOptions] = useSharedValue<SwfPreviewOptions>(
editorEnvelopeCtx.channelApi?.shared.kogitoSwfPreviewOptions_get
);
@@ -132,6 +134,18 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
const targetOrigin = useMemo(() => (isVscode ? "vscode" :
window.location.origin), [isVscode]);
+ const applyEditorTheme = useCallback(
+ (theme: EditorTheme) => Promise.all([textEditor?.setTheme(theme),
diagramEditor?.setTheme(theme)]),
+ [textEditor, diagramEditor]
+ );
+
+ useEffect(() => {
+ if (theme === undefined) {
+ return;
+ }
+ applyEditorTheme(theme);
+ }, [theme, applyEditorTheme]);
+
const isCombinedEditorReady = useMemo(() => {
if (previewOptions?.editorMode === "diagram") {
return isDiagramEditorReady;
@@ -241,9 +255,7 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
await Promise.all([textEditor?.redo(), diagramEditor?.redo()]);
},
validate: async (): Promise<Notification[]> => textEditor?.validate()
?? [],
- setTheme: async (theme: EditorTheme) => {
- await Promise.all([textEditor?.setTheme(theme),
diagramEditor?.setTheme(theme)]);
- },
+ setTheme: async (theme: EditorTheme) => applyEditorTheme(theme),
colorNodes: (nodeNames: string[], color: string, colorConnectedEnds:
boolean) => {
colorNodes(nodeNames, color, colorConnectedEnds);
},
@@ -252,7 +264,7 @@ const RefForwardingServerlessWorkflowCombinedEditor:
ForwardRefRenderFunction<
},
};
},
- [diagramEditor, file, props.isReadOnly, textEditor, textEditorEnvelopeApi]
+ [diagramEditor, file, props.isReadOnly, textEditor, textEditorEnvelopeApi,
applyEditorTheme]
);
useStateControlSubscription(
diff --git a/packages/serverless-workflow-text-editor/dev-webapp/App.tsx
b/packages/serverless-workflow-text-editor/dev-webapp/App.tsx
index 2d06bb25a2d..c5ebe20933f 100644
--- a/packages/serverless-workflow-text-editor/dev-webapp/App.tsx
+++ b/packages/serverless-workflow-text-editor/dev-webapp/App.tsx
@@ -20,6 +20,7 @@
import {
ChannelType,
EditorEnvelopeLocator,
+ EditorTheme,
EnvelopeContentType,
EnvelopeMapping,
} from "@kie-tools-core/editor/dist/api";
@@ -173,6 +174,13 @@ export const App = () => {
[onSetContent]
);
+ const onSetTheme = useCallback(
+ async (theme: EditorTheme) => {
+ editor?.setTheme(theme);
+ },
+ [editor]
+ );
+
return (
<Page>
{!embeddedEditorFile && (
@@ -184,7 +192,14 @@ export const App = () => {
{embeddedEditorFile && (
<>
<PageSection padding={{ default: "noPadding" }}>
- <HistoryButtons undo={onUndo} redo={onRedo} download={onDownload}
validate={onValidate} isDirty={isDirty} />
+ <HistoryButtons
+ undo={onUndo}
+ redo={onRedo}
+ download={onDownload}
+ validate={onValidate}
+ isDirty={isDirty}
+ setTheme={onSetTheme}
+ />
</PageSection>
<PageSection padding={{ default: "noPadding" }} isFilled={true}
hasOverflowScroll={false}>
<div className="editor-container">
diff --git
a/packages/serverless-workflow-text-editor/dev-webapp/HistoryButtons.tsx
b/packages/serverless-workflow-text-editor/dev-webapp/HistoryButtons.tsx
index 7e5ffecfc8d..c761199259c 100644
--- a/packages/serverless-workflow-text-editor/dev-webapp/HistoryButtons.tsx
+++ b/packages/serverless-workflow-text-editor/dev-webapp/HistoryButtons.tsx
@@ -18,20 +18,26 @@
*/
import { Button } from "@patternfly/react-core/dist/js/components/Button";
-import { Split, SplitItem } from
"@patternfly/react-core/dist/js/layouts/Split";
+import { Switch } from "@patternfly/react-core/dist/js/components/Switch";
import { Text, TextContent } from
"@patternfly/react-core/dist/js/components/Text";
+import { Split, SplitItem } from
"@patternfly/react-core/dist/js/layouts/Split";
import * as React from "react";
+import { useState } from "react";
+import { EditorTheme } from "../../editor/dist/api";
import "./HistoryButtons.scss";
interface HistoryButtonsProps {
undo: () => Promise<void>;
redo: () => Promise<void>;
download: () => Promise<void>;
+ setTheme: (theme: EditorTheme) => Promise<void>;
validate: () => Promise<void>;
isDirty: boolean;
}
export const HistoryButtons = (props: HistoryButtonsProps) => {
+ const [theme, setTheme] = useState<EditorTheme>(EditorTheme.LIGHT);
+
return (
<div className="history-buttons ignore-onclickoutside">
<Split hasGutter={true}>
@@ -55,6 +61,18 @@ export const HistoryButtons = (props: HistoryButtonsProps)
=> {
Download
</Button>
</SplitItem>
+ <SplitItem className="history-buttons__theme-switch">
+ <Switch
+ id="theme"
+ label="Dark"
+ labelOff="Light"
+ checked={theme === EditorTheme.DARK}
+ onChange={(checked) => {
+ setTheme(checked ? EditorTheme.DARK : EditorTheme.LIGHT);
+ props.setTheme(checked ? EditorTheme.DARK : EditorTheme.LIGHT);
+ }}
+ />
+ </SplitItem>
{props.isDirty && (
<SplitItem className="history-buttons__edited-indicator">
<TextContent>
diff --git
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
index 6dd529e97fb..f1c26762c0f 100644
---
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
+++
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditor.tsx
@@ -115,6 +115,7 @@ const RefForwardingSwfTextEditor:
React.ForwardRefRenderFunction<SwfTextEditorAp
theme,
editorEnvelopeCtx.channelApi,
editorEnvelopeCtx.operatingSystem,
+ isReadOnly,
]);
useImperativeHandle(forwardedRef, () => controller, [controller]);
diff --git
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditorController.ts
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditorController.ts
index f7c6e8d8ae0..e095f3619be 100644
---
a/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditorController.ts
+++
b/packages/serverless-workflow-text-editor/src/editor/textEditor/SwfTextEditorController.ts
@@ -110,10 +110,6 @@ export class SwfTextEditorController implements
SwfTextEditorApi {
if (!container) {
throw new Error("We need a container to show the editor!");
}
- if (this.editor !== undefined) {
- this.setTheme(theme);
- return this.editor;
- }
this.editor = editor.create(container, {
model: this.model,
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
