This is an automated email from the ASF dual-hosted git repository.
tiagobento 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 16cfd05d01d NO-ISSUE: In the jBPM Quarkus Dev UI Form Editor, saving a
new connection code changes the form source code (#2979)
16cfd05d01d is described below
commit 16cfd05d01d865415ad2bfc7258d91ed492324a7
Author: Luiz João Motta <[email protected]>
AuthorDate: Mon Mar 10 19:11:27 2025 -0300
NO-ISSUE: In the jBPM Quarkus Dev UI Form Editor, saving a new connection
code changes the form source code (#2979)
---
.../components/FormDetails/FormDetails.tsx | 60 +++++++++++++++-------
.../envelope/components/FormEditor/FormEditor.tsx | 45 ++++------------
2 files changed, 50 insertions(+), 55 deletions(-)
diff --git
a/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormDetails/FormDetails.tsx
b/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormDetails/FormDetails.tsx
index 5bca756a055..a0f7ffbb7be 100644
---
a/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormDetails/FormDetails.tsx
+++
b/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormDetails/FormDetails.tsx
@@ -35,6 +35,7 @@ import { Form, FormInfo } from
"@kie-tools/runtime-tools-shared-gateway-api/dist
import { FormDetailsDriver } from "../../../api/FormDetailsDriver";
import FormDisplayerContainer from
"../../containers/FormDisplayerContainer/FormDisplayerContainer";
import FormEditor from "../FormEditor/FormEditor";
+import { useFormDetailsContext } from "../contexts/FormDetailsContext";
export interface FormDetailsProps {
isEnvelopeConnectedToChannel: boolean;
@@ -60,6 +61,7 @@ const FormDetails: React.FC<FormDetailsProps & OUIAProps> = ({
const [error, setError] = useState<any>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
const editorResize = useRef<ResizableContent>({} as ResizableContent);
+ const appContext = useFormDetailsContext();
useEffect(() => {
if (isEnvelopeConnectedToChannel) {
@@ -79,19 +81,29 @@ const FormDetails: React.FC<FormDetailsProps & OUIAProps> =
({
}
}, [driver, formData]);
- const saveForm = useCallback(
- (form: Form) => {
+ const saveContent = useCallback(
+ (args: { isSource?: boolean; isConfig?: boolean }) => (content: string) =>
{
try {
- setFormContent(form);
- driver.saveFormContent(formData.name, {
- configuration: form.configuration,
- source: form.source,
+ setFormContent((prev) => {
+ if (args.isSource) {
+ const newForm = { ...prev, source: content };
+ driver.saveFormContent(formData.name, newForm);
+ appContext.updateContent(newForm);
+ return newForm;
+ }
+ if (args.isConfig) {
+ const newForm = { ...prev, configuration: { ...prev.configuration,
resources: JSON.parse(content) } };
+ driver.saveFormContent(formData.name, newForm);
+ appContext.updateContent(newForm);
+ return newForm;
+ }
+ return prev;
});
} catch (error) {
setError(error);
}
},
- [driver, formData.name]
+ [appContext, driver, formData.name]
);
const onTabSelect = useCallback((_event: any, tabIndex: number): void => {
@@ -119,10 +131,25 @@ const FormDetails: React.FC<FormDetailsProps & OUIAProps>
= ({
return "";
}, [formContent]);
+ const getFormLanguage = useCallback((args: { formType?: string; isSource?:
boolean; isConfig?: boolean }) => {
+ if (args.isSource && args.formType) {
+ if (args.formType.toLowerCase() === "tsx") {
+ return "typescript";
+ }
+ if (args.formType.toLowerCase() === "html") {
+ return "html";
+ }
+ }
+ if (args.isConfig) {
+ return "json";
+ }
+ return "txt";
+ }, []);
+
return error ? (
<ServerErrors error={error} variant={"large"} />
) : (
- <div {...componentOuiaProps(ouiaId, "form-details", ouiaSafe)}>
+ <div {...componentOuiaProps(ouiaId, "form-details", ouiaSafe)} style={{
height: "100%" }}>
{!isLoading ? (
<Drawer isStatic>
<DrawerContent
@@ -159,12 +186,9 @@ const FormDetails: React.FC<FormDetailsProps & OUIAProps>
= ({
>
{activeTab === 0 && (
<FormEditor
- code={getSource()}
- formContent={formContent}
- setFormContent={setFormContent}
- saveFormContent={saveForm}
- isSource
- formType={getType()}
+ textContent={getSource()}
+ saveContent={saveContent({ isSource: true })}
+ formLanguage={getFormLanguage({ formType: getType(),
isSource: true })}
ref={editorResize}
/>
)}
@@ -184,11 +208,9 @@ const FormDetails: React.FC<FormDetailsProps & OUIAProps>
= ({
>
{activeTab === 1 && (
<FormEditor
- code={getConfig()}
- formContent={formContent}
- setFormContent={setFormContent}
- saveFormContent={saveForm}
- isConfig
+ textContent={getConfig()}
+ saveContent={saveContent({ isConfig: true })}
+ formLanguage={getFormLanguage({ isConfig: true })}
ref={editorResize}
/>
)}
diff --git
a/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormEditor/FormEditor.tsx
b/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormEditor/FormEditor.tsx
index 97b53f049b7..10e4263c8d1 100644
---
a/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormEditor/FormEditor.tsx
+++
b/packages/runtime-tools-shared-enveloped-components/src/formDetails/envelope/components/FormEditor/FormEditor.tsx
@@ -23,10 +23,7 @@ import { Tooltip } from
"@patternfly/react-core/dist/js/components/Tooltip";
import { UndoIcon } from "@patternfly/react-icons/dist/js/icons/undo-icon";
import { SaveIcon } from "@patternfly/react-icons/dist/js/icons/save-icon";
import { RedoIcon } from "@patternfly/react-icons/dist/js/icons/redo-icon";
-import { PlayIcon } from "@patternfly/react-icons/dist/js/icons/play-icon";
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState,
useCallback } from "react";
-import { Form } from "@kie-tools/runtime-tools-shared-gateway-api/dist/types";
-import { useFormDetailsContext } from "../contexts/FormDetailsContext";
import { ResizableContent } from "../FormDetails/FormDetails";
import "../styles.css";
import { FormEditorEditorApi, FormEditorEditorController } from
"./FormEditorController";
@@ -47,40 +44,19 @@ function FormEditorControl(props: {
}
export interface FormEditorProps {
- formType?: string;
- isSource?: boolean;
- isConfig?: boolean;
- formContent: Form;
- code: string;
- setFormContent: (formContent: Form) => void;
- saveFormContent: (formContent: Form) => void;
+ formLanguage: string;
+ textContent: string;
+ saveContent: (content: string) => void;
}
export const FormEditor = React.forwardRef<ResizableContent, FormEditorProps>(
- (
- { code, formType, formContent, setFormContent, saveFormContent, isSource =
false, isConfig = false },
- forwardedRef
- ) => {
- const [formSourceCode, setFormSourceCode] = useState(formContent.source);
- const appContext = useFormDetailsContext();
+ ({ textContent, formLanguage, saveContent }, forwardedRef) => {
+ const [content, setContent] = useState<string>(textContent);
const container = useRef<HTMLDivElement>(null);
- const formLanguage = useMemo<string | undefined>(() => {
- if (isSource && formType) {
- switch (formType.toLowerCase()) {
- case "tsx":
- return "typescript";
- case "html":
- return "html";
- }
- } else if (isConfig) {
- return "json";
- }
- }, [formType, isSource, isConfig]);
-
const controller: FormEditorEditorApi = useMemo<FormEditorEditorApi>(() =>
{
- return new FormEditorEditorController(code, (args) =>
setFormSourceCode(args.content), formLanguage, false);
- }, [code, formLanguage]);
+ return new FormEditorEditorController(textContent, (args) =>
setContent(args.content), formLanguage, false);
+ }, [textContent, formLanguage]);
useEffect(() => {
if (container.current) {
@@ -95,11 +71,8 @@ export const FormEditor = React.forwardRef<ResizableContent,
FormEditorProps>(
useImperativeHandle(forwardedRef, () => controller, [controller]);
const onSaveFormContent = useCallback(() => {
- const newFormContent = { ...formContent, source: formSourceCode };
- saveFormContent(newFormContent);
- appContext.updateContent(newFormContent);
- setFormContent(newFormContent);
- }, [appContext, formContent, formSourceCode, saveFormContent,
setFormContent]);
+ saveContent(content);
+ }, [content, saveContent]);
const onUndo = useCallback(() => {
controller.undo();
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
