Fix remaining path references where it should actually be pathRelativ…

…eToTheWorkspaceRoot
tiagobento · Dec 26, 2023 · 195af83 · 195af83
1 parent cc8e50a
commit 195af83
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 86 deletions.
diff --git 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<EmbeddedEditorFile> }) {
+export function Base64PngGallery({ setFile }: { setFile: React.Dispatch<EmbeddedEditorFile> }) {
   // 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<EmbeddedEditor
           .then((response) => 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
@@ -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
@@ -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
@@ -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
@@ -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<HTMLAnchorElement>(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<HTMLInputElement>(null);
-  const onOpenFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!inputRef.current!.files) {
-      return;
-    }
+  const onOpenFile = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      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<string | undefined>((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<string | undefined>((resolve) => {
+            const reader = new FileReader();
+            reader.onload = (event: any) => resolve(event.target.result as string);
+            reader.readAsText(currentFile);
+          }),
+      });
+    },
+    [editorEnvelopeLocator, setFile]
+  );
 
   return (
     <div>
@@ -161,7 +164,7 @@ export function Sidebar(props: Props) {
               <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"}>
                 Open File
                 <input
-                  accept={props.accept}
+                  accept={accept}
                   className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-open-file pf-c-button"}
                   type="file"
                   aria-label="File selection"

diff --git a/packages/dashbuilder-editor/dev-webapp/App.tsx b/packages/dashbuilder-editor/dev-webapp/App.tsx
@@ -33,12 +33,13 @@ import "./App.scss";
 
 export type ServerlessWorkflowType = "yml" | "yaml";
 
-const FILE = {
+const FILE: EmbeddedEditorFile = {
   fileName: "test.dash.yaml",
   fileExtension: "dash.yaml",
   getFileContents: function (): Promise<string | undefined> {
     return Promise.resolve("");
   },
+  pathRelativeToTheWorkspaceRoot: "",
   isReadOnly: false,
 };
 

diff --git a/packages/dashbuilder-viewer/dev-webapp/App.tsx b/packages/dashbuilder-viewer/dev-webapp/App.tsx
@@ -39,12 +39,13 @@ pages:
 - components:
     - html: <h1>Welcome to Dashbuilder!</h1>`;
 
-const FILE = {
+const FILE: EmbeddedEditorFile = {
   fileName: "test.dash.yaml",
   fileExtension: "dash.yaml",
   getFileContents: function (): Promise<string | undefined> {
     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
@@ -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
@@ -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
@@ -37,6 +37,7 @@ describe("EmbeddedViewer::ONLINE", () => {
     fileExtension: "dmn",
     getFileContents: () => Promise.resolve(""),
     isReadOnly: false,
+    pathRelativeToTheWorkspaceRoot: "test.dmn",
   };
 
   const editorEnvelopeLocator = new EditorEnvelopeLocator("localhost:8888", [