diff --git a/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx b/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx index b8dfafdfc66..b3ec5342785 100644 --- a/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx +++ b/examples/webapp/src/Pages/Base64Png/Base64PngGallery.tsx @@ -37,17 +37,20 @@ const samplePaths = [ * @param props * @constructor */ -export function Base64PngGallery(props: { setFile: React.Dispatch }) { +export function Base64PngGallery({ setFile }: { setFile: React.Dispatch }) { // Set the chosen file - const openSample = useCallback((fileName: string, filePath: string) => { - props.setFile({ - isReadOnly: false, - fileExtension: "base64png", - fileName: fileName, - getFileContents: () => fetch(filePath).then((response) => response.text()), - path: filePath, - }); - }, []); + const openSample = useCallback( + (fileName: string, filePath: string) => { + setFile({ + isReadOnly: false, + fileExtension: "base64png", + fileName: fileName, + getFileContents: () => fetch(filePath).then((response) => response.text()), + pathRelativeToTheWorkspaceRoot: filePath, + }); + }, + [setFile] + ); const [images, setImages] = useState<{ name: string; content: string; path: string }[]>([]); useEffect(() => { @@ -57,7 +60,7 @@ export function Base64PngGallery(props: { setFile: React.Dispatch response.text()) .then((content) => ({ name: fileName, content: content, path })) ) - ).then((samples) => setImages([...images, ...samples])); + ).then((samples) => setImages((prev) => [...prev, ...samples])); }, []); return ( diff --git a/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx b/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx index eaad45767ba..b4ac2be6e4c 100644 --- a/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx +++ b/examples/webapp/src/Pages/Base64Png/Base64PngPage.tsx @@ -40,7 +40,7 @@ export function Base64PngPage() { fileExtension: "base64png", getFileContents: () => Promise.resolve(""), isReadOnly: false, - path: "new-file.base64png", + pathRelativeToTheWorkspaceRoot: "new-file.base64png", }); /** @@ -56,7 +56,7 @@ export function Base64PngPage() { envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/base64-editor.html" }, }), ]), - [file] + [] ); return ( diff --git a/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx b/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx index 13586dd5b06..fd63ace50b9 100644 --- a/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx +++ b/examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx @@ -44,7 +44,7 @@ export function BpmnPage() { fileExtension: "bpmn", getFileContents: () => Promise.resolve(""), isReadOnly: false, - path: "new-file.bpmn", + pathRelativeToTheWorkspaceRoot: "new-file.bpmn", }); /** diff --git a/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx b/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx index 09faffdb98e..fc9a064d1be 100644 --- a/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx +++ b/examples/webapp/src/Pages/KogitoEditors/DmnPage.tsx @@ -41,7 +41,7 @@ export function DmnPage() { fileExtension: "dmn", getFileContents: () => Promise.resolve(""), isReadOnly: false, - path: "new-file.dmn", + pathRelativeToTheWorkspaceRoot: "new-file.dmn", }); /** diff --git a/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx b/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx index d46703f1d87..5935c88be6e 100644 --- a/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx +++ b/examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx @@ -58,80 +58,83 @@ interface Props { * @param props * @constructor */ -export function Sidebar(props: Props) { +export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExtension, accept }: Props) { /** * A state which indicates the Editor dirty state */ - const isDirty = useDirtyState(props.editor!); + const isDirty = useDirtyState(editor!); const downloadRef = useRef(null); const onDownload = useCallback(() => { - props.editor?.getStateControl().setSavedCommand(); - props.editor?.getContent().then((content) => { + editor?.getStateControl().setSavedCommand(); + editor?.getContent().then((content) => { if (downloadRef.current) { const fileBlob = new Blob([content], { type: "text/plain" }); downloadRef.current.href = URL.createObjectURL(fileBlob)!; - downloadRef.current.download = `${props.file.fileName}.${props.fileExtension}`; + downloadRef.current.download = `${file.fileName}.${fileExtension}`; downloadRef.current.click(); } }); - }, [props.editor]); + }, [editor, file.fileName, fileExtension]); - const [fileName, setFileName] = useState(props.file.fileName); + const [fileName, setFileName] = useState(file.fileName); const onChangeName = useCallback(() => { - props.setFile({ - ...props.file, + setFile({ + ...file, fileName, }); - }, [props.file, fileName]); + }, [file, fileName, setFile]); const onNewFile = useCallback(() => { setFileName("new-file"); - props.setFile({ + setFile({ isReadOnly: false, - fileExtension: props.fileExtension, + fileExtension: fileExtension, fileName: "new-file", getFileContents: () => Promise.resolve(""), - path: `new-file.${props.fileExtension}`, + pathRelativeToTheWorkspaceRoot: `new-file.${fileExtension}`, }); - }, []); + }, [fileExtension, setFile]); const onOpenSample = useCallback(() => { setFileName("sample"); - props.setFile({ + setFile({ isReadOnly: false, - fileExtension: props.fileExtension, + fileExtension: fileExtension, fileName: "sample", - getFileContents: () => fetch(`examples/sample.${props.fileExtension}`).then((response) => response.text()), - path: `sample.${props.fileExtension}`, + getFileContents: () => fetch(`examples/sample.${fileExtension}`).then((response) => response.text()), + pathRelativeToTheWorkspaceRoot: `sample.${fileExtension}`, }); - }, []); + }, [fileExtension, setFile]); const inputRef = useRef(null); - const onOpenFile = useCallback((e: React.ChangeEvent) => { - if (!inputRef.current!.files) { - return; - } + const onOpenFile = useCallback( + (e: React.ChangeEvent) => { + if (!inputRef.current!.files) { + return; + } - const currentFile = inputRef.current!.files![0]; - if (!props.editorEnvelopeLocator.hasMappingFor(currentFile.name)) { - return; - } + const currentFile = inputRef.current!.files![0]; + if (!editorEnvelopeLocator.hasMappingFor(currentFile.name)) { + return; + } - setFileName(removeFileExtension(currentFile.name)); - props.setFile({ - isReadOnly: false, - fileExtension: extractFileExtension(currentFile.name)!, - fileName: removeFileExtension(currentFile.name), - path: currentFile.name, - getFileContents: () => - new Promise((resolve) => { - const reader = new FileReader(); - reader.onload = (event: any) => resolve(event.target.result as string); - reader.readAsText(currentFile); - }), - }); - }, []); + setFileName(removeFileExtension(currentFile.name)); + setFile({ + isReadOnly: false, + fileExtension: extractFileExtension(currentFile.name)!, + fileName: removeFileExtension(currentFile.name), + pathRelativeToTheWorkspaceRoot: currentFile.name, + getFileContents: () => + new Promise((resolve) => { + const reader = new FileReader(); + reader.onload = (event: any) => resolve(event.target.result as string); + reader.readAsText(currentFile); + }), + }); + }, + [editorEnvelopeLocator, setFile] + ); return (
@@ -161,7 +164,7 @@ export function Sidebar(props: Props) { Open File { return Promise.resolve(""); }, + pathRelativeToTheWorkspaceRoot: "", isReadOnly: false, }; diff --git a/packages/dashbuilder-viewer/dev-webapp/App.tsx b/packages/dashbuilder-viewer/dev-webapp/App.tsx index 565a65db367..c8492700b3d 100644 --- a/packages/dashbuilder-viewer/dev-webapp/App.tsx +++ b/packages/dashbuilder-viewer/dev-webapp/App.tsx @@ -39,12 +39,13 @@ pages: - components: - html:

Welcome to Dashbuilder!

`; -const FILE = { +const FILE: EmbeddedEditorFile = { fileName: "test.dash.yaml", fileExtension: "dash.yaml", getFileContents: function (): Promise { return Promise.resolve(TEST_CONTENT); }, + pathRelativeToTheWorkspaceRoot: "", isReadOnly: false, }; diff --git a/packages/editor/tests/embedded/common/EmbeddedEditorFile.test.ts b/packages/editor/tests/embedded/common/EmbeddedEditorFile.test.ts index d60d0c46f8d..b874a956efb 100644 --- a/packages/editor/tests/embedded/common/EmbeddedEditorFile.test.ts +++ b/packages/editor/tests/embedded/common/EmbeddedEditorFile.test.ts @@ -16,7 +16,6 @@ * specific language governing permissions and limitations * under the License. */ - import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel"; describe("EmbeddedEditorFile", () => { @@ -26,6 +25,7 @@ describe("EmbeddedEditorFile", () => { fileName: "new-file", isReadOnly: true, getFileContents: () => Promise.resolve("content"), + pathRelativeToTheWorkspaceRoot: "new-file.dmn", }; expect(file.fileName).toEqual("new-file"); diff --git a/packages/editor/tests/embedded/embedded/EmbeddedEditor.test.tsx b/packages/editor/tests/embedded/embedded/EmbeddedEditor.test.tsx index 03f13419c3b..3f7f5b3da7f 100644 --- a/packages/editor/tests/embedded/embedded/EmbeddedEditor.test.tsx +++ b/packages/editor/tests/embedded/embedded/EmbeddedEditor.test.tsx @@ -23,7 +23,7 @@ import { EnvelopeContentType, EnvelopeMapping, } from "@kie-tools-core/editor/dist/api"; -import { WorkspaceEdit } from "@kie-tools-core/workspace/dist/api"; +import { ResourceContent, ResourcesList, WorkspaceEdit } from "@kie-tools-core/workspace/dist/api"; import * as React from "react"; import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel"; import { EmbeddedEditor, EmbeddedEditorRef } from "@kie-tools-core/editor/dist/embedded"; @@ -37,6 +37,7 @@ describe("EmbeddedEditor::ONLINE", () => { fileExtension: "dmn", getFileContents: () => Promise.resolve(""), isReadOnly: false, + pathRelativeToTheWorkspaceRoot: "test.dmn", }; const editorEnvelopeLocator = new EditorEnvelopeLocator("localhost:8888", [ @@ -89,10 +90,10 @@ describe("EmbeddedEditor::ONLINE", () => { "kogitoEditor_contentChanged" ); - editorRef.current?.setContent("path", "content"); + editorRef.current?.setContent("test-path-relative-to-the-workspace-root", "content"); expect(spyOnContentChangedNotification).toBeCalledWith( - { content: "content", path: "path" }, + { content: "content", pathRelativeToTheWorkspaceRoot: "test-path-relative-to-the-workspace-root" }, { showLoadingOverlay: false } ); }); @@ -206,7 +207,7 @@ describe("EmbeddedEditor::ONLINE", () => { requestId: "1", purpose: EnvelopeBusMessagePurpose.REQUEST, type: "kogitoWorkspace_resourceContentRequest", - data: [{ path: "" }], + data: [{ pathRelativeToTheWorkspaceRoot: "" } as ResourceContent], }); expect(onResourceContentRequest).toBeCalled(); @@ -232,7 +233,7 @@ describe("EmbeddedEditor::ONLINE", () => { requestId: "1", purpose: EnvelopeBusMessagePurpose.REQUEST, type: "kogitoWorkspace_resourceListRequest", - data: [{ pattern: "", paths: [] }], + data: [{ pattern: "", pathsRelativeToTheWorkspaceRoot: [] } as ResourcesList], }); expect(onResourceListRequest).toBeCalled(); diff --git a/packages/editor/tests/embedded/embedded/EmbeddedViewer.test.tsx b/packages/editor/tests/embedded/embedded/EmbeddedViewer.test.tsx index b88c5ad7cab..b18350783e1 100644 --- a/packages/editor/tests/embedded/embedded/EmbeddedViewer.test.tsx +++ b/packages/editor/tests/embedded/embedded/EmbeddedViewer.test.tsx @@ -37,6 +37,7 @@ describe("EmbeddedViewer::ONLINE", () => { fileExtension: "dmn", getFileContents: () => Promise.resolve(""), isReadOnly: false, + pathRelativeToTheWorkspaceRoot: "test.dmn", }; const editorEnvelopeLocator = new EditorEnvelopeLocator("localhost:8888", [ diff --git a/packages/kie-editors-standalone/e2e-tests/src/components/EditorComponent.tsx b/packages/kie-editors-standalone/e2e-tests/src/components/EditorComponent.tsx index 65e08f2938e..8da45ffdb4b 100644 --- a/packages/kie-editors-standalone/e2e-tests/src/components/EditorComponent.tsx +++ b/packages/kie-editors-standalone/e2e-tests/src/components/EditorComponent.tsx @@ -36,21 +36,29 @@ export type InternalProps = Props & { defaultModelName?: string; }; -export const EditorComponent = (props: InternalProps) => { +export const EditorComponent = ({ + id, + initialContent, + openEditor, + origin, + readOnly, + defaultModelName, + resources, +}: InternalProps) => { const [isDirty, setDirty] = useState(false); const editorRef = useRef(null); - const [modelName, setModelName] = useState(props.defaultModelName ?? "Untitled"); + const [modelName, setModelName] = useState(defaultModelName ?? "Untitled"); const [files, setFiles] = useState([]); const editorContainerDivRef = useRef(null); useEffect(() => { - const e = props.openEditor({ + const e = openEditor({ container: editorContainerDivRef.current!, - initialContent: props.initialContent, - readOnly: props.readOnly, - origin: props.origin, - resources: props.resources, + initialContent: initialContent, + readOnly: readOnly, + origin: origin, + resources: resources, }); e.subscribeToContentChanges(setDirty); @@ -59,10 +67,10 @@ export const EditorComponent = (props: InternalProps) => { return () => { e.close(); }; - }, [props.id, props.readOnly, props.origin, props.resources, props.initialContent]); + }, [id, readOnly, origin, resources, initialContent, openEditor]); const setEditorContents = useCallback((resource: UploadedFile) => { - editorRef.current?.setContent(resource.value.path, resource.value.content ?? ""); + editorRef.current?.setContent(resource.value.pathRelativeToTheWorkspaceRoot, resource.value.content ?? ""); setModelName(resource.name); }, []); @@ -76,7 +84,17 @@ export const EditorComponent = (props: InternalProps) => { const editorSave = async () => { const content = await editorRef.current?.getContent(); - setFiles([...files, { name: modelName, value: { path: modelName, type: ContentType.TEXT, content } }]); + setFiles([ + ...files, + { + name: modelName, + value: { + pathRelativeToTheWorkspaceRoot: modelName, + type: ContentType.TEXT, + content, + }, + }, + ]); editorRef.current?.markAsSaved(); }; @@ -130,7 +148,7 @@ export const EditorComponent = (props: InternalProps) => { onView={setEditorContents} files={files} setFiles={setFiles} - ouiaId={props.id} + ouiaId={id} /> {isDirty && (
@@ -139,9 +157,9 @@ export const EditorComponent = (props: InternalProps) => { )} {buttons}
diff --git a/packages/kie-editors-standalone/e2e-tests/src/components/FileLoader.tsx b/packages/kie-editors-standalone/e2e-tests/src/components/FileLoader.tsx index 19bad76f958..d7386798de0 100644 --- a/packages/kie-editors-standalone/e2e-tests/src/components/FileLoader.tsx +++ b/packages/kie-editors-standalone/e2e-tests/src/components/FileLoader.tsx @@ -46,7 +46,14 @@ export const FileLoader: React.FC = (props: Props) => { readUploadedFileAsText(file).then((fileContent) => props.setFiles((files) => [ ...files, - { name: file.name, value: { path: file.name, type: ContentType.TEXT, content: fileContent } }, + { + name: file.name, + value: { + pathRelativeToTheWorkspaceRoot: file.name, + type: ContentType.TEXT, + content: fileContent, + }, + }, ]) ); }); diff --git a/packages/serverless-workflow-combined-editor/dev-webapp/App.tsx b/packages/serverless-workflow-combined-editor/dev-webapp/App.tsx index 6421ff8a86d..41029affe5e 100644 --- a/packages/serverless-workflow-combined-editor/dev-webapp/App.tsx +++ b/packages/serverless-workflow-combined-editor/dev-webapp/App.tsx @@ -89,7 +89,7 @@ export const App = () => { const fileName = basename(pathRelativeToTheWorkspaceRoot); setEmbeddedEditorFile({ - path: pathRelativeToTheWorkspaceRoot, + pathRelativeToTheWorkspaceRoot, getFileContents: async () => content, isReadOnly: false, fileExtension: extension, diff --git a/packages/serverless-workflow-text-editor/dev-webapp/App.tsx b/packages/serverless-workflow-text-editor/dev-webapp/App.tsx index 2b90b468913..752eff420ef 100644 --- a/packages/serverless-workflow-text-editor/dev-webapp/App.tsx +++ b/packages/serverless-workflow-text-editor/dev-webapp/App.tsx @@ -81,7 +81,7 @@ export const App = () => { } const devWebAppSwfLanguageService = new DevWebAppSwfLanguageService(); - return devWebAppSwfLanguageService.getLs(embeddedEditorFile.path!); + return devWebAppSwfLanguageService.getLs(embeddedEditorFile.pathRelativeToTheWorkspaceRoot!); }, [embeddedEditorFile]); const apiImpl = useMemo(() => { @@ -129,13 +129,13 @@ export const App = () => { const content = await editor.getContent(); const lsDiagnostics = await swfLanguageService.getDiagnostics({ content: content, - uriPath: embeddedEditorFile.path!, + uriPath: embeddedEditorFile.pathRelativeToTheWorkspaceRoot!, }); const notifications = lsDiagnostics.map( (lsDiagnostic) => ({ - path: "", // empty to not group them by path, as we're only validating one file. + pathRelativeToTheWorkspaceRoot: "", // empty to not group them by path, as we're only validating one file. severity: lsDiagnostic.severity === DiagnosticSeverity.Error ? "ERROR" : "WARNING", message: `${lsDiagnostic.message} [Line ${lsDiagnostic.range.start.line + 1}]`, type: "PROBLEM", @@ -158,7 +158,7 @@ export const App = () => { const fileName = basename(pathRelativeToTheWorkspaceRoot); setEmbeddedEditorFile({ - path: pathRelativeToTheWorkspaceRoot, + pathRelativeToTheWorkspaceRoot, getFileContents: async () => content, isReadOnly: false, fileExtension: extension, diff --git a/packages/yard-editor/dev-webapp/App.tsx b/packages/yard-editor/dev-webapp/App.tsx index 32ccec138ca..723522dd514 100644 --- a/packages/yard-editor/dev-webapp/App.tsx +++ b/packages/yard-editor/dev-webapp/App.tsx @@ -85,7 +85,7 @@ export const App = () => { const fileName = basename(pathRelativeToTheWorkspaceRoot); setEmbeddedEditorFile({ - path: pathRelativeToTheWorkspaceRoot, + pathRelativeToTheWorkspaceRoot, getFileContents: async () => content, isReadOnly: false, fileExtension: extension, @@ -94,7 +94,7 @@ export const App = () => { }, []); const onNewContent = useCallback( - (type: YardFileType) => { + (type: string) => { onSetContent(`new-document.yard.${type}`, ""); }, [onSetContent]