rename saved file

packages/api/src/controllers/files.js

@@ -31,6 +31,12 @@ module.exports = {
     socket.emitChanged(`files-changed-${folder}`);
   },
 
+  rename_meta: 'post',
+  async rename({ folder, file, newFile }) {
+    await fs.rename(path.join(filesdir(), folder, file), path.join(filesdir(), folder, newFile));
+    socket.emitChanged(`files-changed-${folder}`);
+  },
+
   load_meta: 'post',
   async load({ folder, file, format }) {
     const text = await fs.readFile(path.join(filesdir(), folder, file), { encoding: 'utf-8' });

packages/web/src/appobj/SavedFileAppObject.js

@@ -8,14 +8,31 @@ import { openNewTab } from '../utility/common';
 import { useCurrentDatabase, useSetOpenedTabs } from '../utility/globalState';
 import ScriptWriter from '../impexp/ScriptWriter';
 import { extractPackageName } from 'dbgate-tools';
+import useShowModal from '../modals/showModal';
+import InputTextModal from '../modals/InputTextModal';
 
 function Menu({ data, menuExt = null }) {
+  const showModal = useShowModal();
   const handleDelete = () => {
     axios.post('files/delete', data);
   };
+  const handleRename = () => {
+    showModal((modalState) => (
+      <InputTextModal
+        modalState={modalState}
+        value={data.file}
+        label="New file name"
+        header="Rename file"
+        onConfirm={(newFile) => {
+          axios.post('files/rename', { ...data, newFile });
+        }}
+      />
+    ));
+  };
   return (
     <>
       <DropDownMenuItem onClick={handleDelete}>Delete</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleRename}>Rename</DropDownMenuItem>
       {menuExt}
     </>
   );

packages/web/src/modals/InputTextModal.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ModalBase from './ModalBase';
+import { FormTextField, FormSubmit, FormButton } from '../utility/forms';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
+import { FormProvider } from '../utility/FormProvider';
+
+export default function InputTextModal({ header, label, value, modalState, onConfirm }) {
+  const handleSubmit = async (values) => {
+    const { value } = values;
+    modalState.close();
+    onConfirm(value);
+  };
+  return (
+    <ModalBase modalState={modalState}>
+      <ModalHeader modalState={modalState}>{header}</ModalHeader>
+      <FormProvider initialValues={{ value }}>
+        <ModalContent>
+          <FormTextField label={label} name="value" focused />
+        </ModalContent>
+        <ModalFooter>
+          <FormButton value="Cancel" onClick={() => modalState.close()} />
+          <FormSubmit value="OK" onClick={handleSubmit} />
+        </ModalFooter>
+      </FormProvider>
+    </ModalBase>
+  );
+}