KOGITO-3069: Downloading a sample or new file will have the wrong fil…

…e extension on Online Editor (#253)

* KOGITO-3069 Fix save as txt

* KOGITO-3069 Remove file extension from the file name

* KOGITO-3069 Add fileExtension as dependency of saveNewName callback

packages/online-editor/src/App.tsx

@@ -25,7 +25,6 @@ import { HashRouter } from "react-router-dom";
 import { GithubService } from "./common/GithubService";
 import { GlobalContext } from "./common/GlobalContext";
 import { Routes } from "./common/Routes";
-import { extractFileExtension } from "./common/utils";
 import { EditorPage } from "./editor/EditorPage";
 import { DownloadHubModal } from "./home/DownloadHubModal";
 import { HomePage } from "./home/HomePage";
@@ -53,11 +52,11 @@ export function App(props: Props) {
   }, []);
 
   const onFileNameChanged = useCallback(
-    (fileName: string) => {
+    (fileName: string, fileExtension: string) => {
       setFile({
         isReadOnly: false,
-        fileExtension: extractFileExtension(fileName)!,
-        fileName: fileName,
+        fileExtension,
+        fileName,
         getFileContents: file.getFileContents
       });
     },

packages/online-editor/src/editor/EditorPage.tsx

@@ -22,14 +22,13 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 import { useLocation } from "react-router";
 import { GithubTokenModal } from "../common/GithubTokenModal";
 import { GlobalContext } from "../common/GlobalContext";
-import { removeFileExtension } from "../common/utils";
 import { FullScreenToolbar } from "./EditorFullScreenToolbar";
 import { EditorToolbar } from "./EditorToolbar";
 import { useDmnTour } from "../tour";
 import { useOnlineI18n } from "../common/i18n";
 
 interface Props {
-  onFileNameChanged: (fileName: string) => void;
+  onFileNameChanged: (fileName: string, fileExtension: string) => void;
 }
 
 const ALERT_AUTO_CLOSE_TIMEOUT = 3000;
@@ -67,7 +66,7 @@ export function EditorPage(props: Props) {
       window.dispatchEvent(
         new CustomEvent("saveOnlineEditor", {
           detail: {
-            fileName: context.file.fileName,
+            fileName: `${context.file.fileName}.${context.file.fileExtension}`,
             fileContent: content,
             senderTabId: context.senderTabId!
           }
@@ -107,9 +106,9 @@ export function EditorPage(props: Props) {
 
       context.githubService
         .createGist({
-          filename: context.file.fileName,
+          filename: `${context.file.fileName}.${context.file.fileExtension}`,
           content: content,
-          description: context.file.fileName,
+          description: `${context.file.fileName}.${context.file.fileExtension}`,
           isPublic: true
         })
         .then(gistUrl => {
@@ -175,10 +174,10 @@ export function EditorPage(props: Props) {
 
   useEffect(() => {
     if (downloadRef.current) {
-      downloadRef.current.download = context.file.fileName;
+      downloadRef.current.download = `${context.file.fileName}.${context.file.fileExtension}`;
     }
     if (downloadPreviewRef.current) {
-      const fileName = removeFileExtension(context.file.fileName);
+      const fileName = context.file.fileName;
       downloadPreviewRef.current.download = `${fileName}-svg.svg`;
     }
   }, [context.file.fileName]);

packages/online-editor/src/editor/EditorToolbar.tsx

@@ -34,10 +34,9 @@ import { useCallback, useContext, useMemo, useState } from "react";
 import { GlobalContext } from "../common/GlobalContext";
 import { useLocation } from "react-router";
 import { useOnlineI18n } from "../common/i18n";
-import { removeFileExtension } from "../common/utils";
 
 interface Props {
-  onFileNameChanged: (fileName: string) => void;
+  onFileNameChanged: (fileName: string, fileExtension: string) => void;
   onFullScreen: () => void;
   onSave: () => void;
   onDownload: () => void;
@@ -52,7 +51,7 @@ interface Props {
 export function EditorToolbar(props: Props) {
   const context = useContext(GlobalContext);
   const location = useLocation();
-  const [name, setName] = useState(removeFileExtension(context.file.fileName));
+  const [fileName, setFileName] = useState(context.file.fileName);
   const [isMenuOpen, setMenuOpen] = useState(false);
   const [isKebabOpen, setKebabOpen] = useState(false);
   const { i18n } = useOnlineI18n();
@@ -66,21 +65,21 @@ export function EditorToolbar(props: Props) {
   }, [location]);
 
   const saveNewName = useCallback(() => {
-    props.onFileNameChanged(`${name}.${fileExtension}`);
-  }, [props.onFileNameChanged, name]);
+    props.onFileNameChanged(fileName, fileExtension);
+  }, [props.onFileNameChanged, fileName, fileExtension]);
 
   const cancelNewName = useCallback(() => {
-    setName(removeFileExtension(context.file.fileName));
+    setFileName(context.file.fileName);
   }, [context.file.fileName]);
 
   const onNameInputKeyUp = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.keyCode === 13 /* Enter */) {
         saveNewName();
-        e.currentTarget.blur()
+        e.currentTarget.blur();
       } else if (e.keyCode === 27 /* ESC */) {
         cancelNewName();
-        e.currentTarget.blur()
+        e.currentTarget.blur();
       }
     },
     [saveNewName, cancelNewName]
@@ -144,14 +143,14 @@ export function EditorToolbar(props: Props) {
     <>
       <div data-testid={"toolbar-title"} className={"kogito--editor__toolbar-name-container"}>
         <Title aria-label={"File name"} headingLevel={"h3"} size={"2xl"}>
-          {name}
+          {fileName}
         </Title>
         <TextInput
-          value={name}
+          value={fileName}
           type={"text"}
           aria-label={"Edit file name"}
           className={"kogito--editor__toolbar-title"}
-          onChange={setName}
+          onChange={setFileName}
           onKeyUp={onNameInputKeyUp}
           onBlur={saveNewName}
         />