improved save file experience

packages/web/src/modals/SaveFileModal.js

@@ -34,11 +34,10 @@ export default function SaveFileModal({
     }
   };
 
-  const handleSaveAs = async filePath => {
+  const handleSaveToDisk = async filePath => {
     const path = window.require('path');
-
     const parsed = path.parse(filePath);
-    if (!parsed.ext) filePath += `.${fileExtension}`;
+    // if (!parsed.ext) filePath += `.${fileExtension}`;
 
     await axios.post('files/save-as', { filePath, data, format });
     modalState.close();
@@ -67,11 +66,15 @@ export default function SaveFileModal({
               value="Save to disk"
               onClick={() => {
                 const file = electron.remote.dialog.showSaveDialogSync(electron.remote.getCurrentWindow(), {
-                  filters: { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
-                  defaultPath: filePath,
+                  filters: [
+                    { name: `${fileExtension.toUpperCase()} files`, extensions: [fileExtension] },
+                    { name: `All files`, extensions: ['*'] },
+                  ],
+                  defaultPath: filePath || `${name}.${fileExtension}`,
+                  properties: ['showOverwriteConfirmation'],
                 });
                 if (file) {
-                  handleSaveAs(file);
+                  handleSaveToDisk(file);
                 }
               }}
             />

packages/web/src/modals/SaveTabModal.js

@@ -1,12 +1,28 @@
 import React from 'react';
+import axios from '../utility/axios';
 import { changeTab } from '../utility/common';
 import { useOpenedTabs, useSetOpenedTabs } from '../utility/globalState';
 import keycodes from '../utility/keycodes';
+import SaveFileToolbarButton from '../utility/SaveFileToolbarButton';
+import ToolbarPortal from '../utility/ToolbarPortal';
+import useHasPermission from '../utility/useHasPermission';
 import SaveFileModal from './SaveFileModal';
+import useModalState from './useModalState';
 
-export default function SaveTabModal({ data, folder, format, modalState, tabid, tabVisible, fileExtension }) {
+export default function SaveTabModal({
+  data,
+  folder,
+  format,
+  tabid,
+  tabVisible,
+  fileExtension,
+  toolbarPortalRef = undefined,
+}) {
   const setOpenedTabs = useSetOpenedTabs();
   const openedTabs = useOpenedTabs();
+  const saveFileModalState = useModalState();
+  const hasPermission = useHasPermission();
+  const canSave = hasPermission(`files/${folder}/write`);
 
   const { savedFile, savedFilePath } = openedTabs.find(x => x.tabid == tabid).props || {};
   const onSave = (title, newProps) => {
@@ -21,35 +37,63 @@ export default function SaveTabModal({ data, folder, format, modalState, tabid,
     }));
   };
 
+  const handleSave = async () => {
+    if (savedFile) {
+      await axios.post('files/save', { folder, file: savedFile, data, format });
+    }
+    if (savedFilePath) {
+      await axios.post('files/save-as', { filePath: savedFilePath, data, format });
+    }
+  };
+  const handleSaveRef = React.useRef(handleSave);
+  handleSaveRef.current = handleSave;
+
   const handleKeyboard = React.useCallback(
     e => {
       if (e.keyCode == keycodes.s && e.ctrlKey) {
         e.preventDefault();
-        modalState.open();
+        if (e.shiftKey) {
+          saveFileModalState.open();
+        } else {
+          if (savedFile || savedFilePath) handleSaveRef.current();
+          else saveFileModalState.open();
+        }
       }
     },
-    [modalState]
+    [saveFileModalState]
   );
 
   React.useEffect(() => {
-    if (tabVisible) {
+    if (tabVisible && canSave) {
       document.addEventListener('keydown', handleKeyboard);
       return () => {
         document.removeEventListener('keydown', handleKeyboard);
       };
     }
-  }, [tabVisible, handleKeyboard]);
+  }, [tabVisible, handleKeyboard, canSave]);
 
   return (
-    <SaveFileModal
-      data={data}
-      folder={folder}
-      format={format}
-      modalState={modalState}
-      name={savedFile || 'newFile'}
-      filePath={savedFilePath}
-      fileExtension={fileExtension}
-      onSave={onSave}
-    />
+    <>
+      <SaveFileModal
+        data={data}
+        folder={folder}
+        format={format}
+        modalState={saveFileModalState}
+        name={savedFile || 'newFile'}
+        filePath={savedFilePath}
+        fileExtension={fileExtension}
+        onSave={onSave}
+      />
+
+      {canSave && (
+        <ToolbarPortal tabVisible={tabVisible} toolbarPortalRef={toolbarPortalRef}>
+          <SaveFileToolbarButton
+            saveAs={saveFileModalState.open}
+            save={savedFile || savedFilePath ? handleSave : null}
+            tabid={tabid}
+          />
+        </ToolbarPortal>
+      )}
+    </>
   );
 }