open sql file with drag & drop

packages/web/src/DragAndDropFileTarget.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from './icons';
 import useTheme from './theme/useTheme';
+import getElectron from './utility/getElectron';
 import useExtensions from './utility/useExtensions';
 
 const TargetStyled = styled.div`
@@ -41,6 +42,9 @@ const TitleWrapper = styled.div`
 export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
   const theme = useTheme();
   const { fileFormats } = useExtensions();
+  const electron = getElectron();
+  const fileTypeNames = fileFormats.filter(x => x.readerFunc).map(x => x.name);
+  if (electron) fileTypeNames.push('SQL');
   return (
     !!isDragActive && (
       <TargetStyled theme={theme}>
@@ -49,13 +53,7 @@ export default function DragAndDropFileTarget({ isDragActive, inputProps }) {
             <FontIcon icon="icon cloud-upload" />
           </IconWrapper>
           <TitleWrapper>Drop the files to upload to DbGate</TitleWrapper>
-          <InfoWrapper>
-            Supported file types:{' '}
-            {fileFormats
-              .filter(x => x.readerFunc)
-              .map(x => x.name)
-              .join(', ')}
-          </InfoWrapper>
+          <InfoWrapper>Supported file types: {fileTypeNames.join(', ')}</InfoWrapper>
         </InfoBox>
         <input {...inputProps} />
       </TargetStyled>

packages/web/src/utility/SaveFileToolbarButton.js

@@ -8,8 +8,12 @@ export default function SaveFileToolbarButton({ tabid, save, saveAs }) {
   if (save) {
     return (
       <ToolbarDropDownButton icon="icon save" text="Save">
-        <DropDownMenuItem onClick={save}>Save</DropDownMenuItem>
-        <DropDownMenuItem onClick={saveAs}>Save As</DropDownMenuItem>
+        <DropDownMenuItem onClick={save} keyText="Ctrl+S">
+          Save
+        </DropDownMenuItem>
+        <DropDownMenuItem onClick={saveAs} keyText="Ctrl+Shift+S">
+          Save As
+        </DropDownMenuItem>
       </ToolbarDropDownButton>
     );
   }

packages/web/src/utility/UploadsProvider.js

@@ -3,8 +3,10 @@ import { useDropzone } from 'react-dropzone';
 import ImportExportModal from '../modals/ImportExportModal';
 import useShowModal from '../modals/showModal';
 import { findFileFormat } from './fileformats';
+import getElectron from './getElectron';
 import resolveApi from './resolveApi';
 import useExtensions from './useExtensions';
+import { useOpenElectronFileCore, canOpenByElectron } from './useOpenElectronFile';
 
 const UploadsContext = React.createContext(null);
 
@@ -21,6 +23,8 @@ export function useUploadFiles() {
   const { uploadListener } = useUploadsProvider();
   const showModal = useShowModal();
   const extensions = useExtensions();
+  const electron = getElectron();
+  const openElectronFileCore = useOpenElectronFileCore();
 
   const handleUploadFiles = React.useCallback(
     files => {
@@ -31,6 +35,12 @@ export function useUploadFiles() {
         }
 
         console.log('FILE', file);
+
+        if (electron && canOpenByElectron(file.path)) {
+          openElectronFileCore(file.path);
+          return;
+        }
+
         const formData = new FormData();
         formData.append('data', file);
 

packages/web/src/utility/useOpenElectronFile.js

@@ -1,31 +1,42 @@
 import useNewQuery from '../query/useNewQuery';
 import getElectron from './getElectron';
 
-export default function useOpenElectronFile() {
-  const electron = getElectron();
+export function canOpenByElectron(file) {
+  return file && file.toLowerCase().endsWith('.sql');
+}
 
+export function useOpenElectronFileCore() {
   const newQuery = useNewQuery();
 
-  return () => {
-    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
-      filters: { name: `SQL files`, extensions: ['sql'] },
-    });
-    const filePath = filePaths && filePaths[0];
-    if (filePath) {
-      if (filePath.match(/.sql$/i)) {
-        const path = window.require('path');
-        const fs = window.require('fs');
-        const parsed = path.parse(filePath);
-        const data = fs.readFileSync(filePath, { encoding: 'utf-8' });
+  return filePath => {
+    if (filePath.toLowerCase().endsWith('.sql')) {
+      const path = window.require('path');
+      const fs = window.require('fs');
+      const parsed = path.parse(filePath);
+      const data = fs.readFileSync(filePath, { encoding: 'utf-8' });
 
-        newQuery({
-          title: parsed.name,
-          initialData: data,
-          // @ts-ignore
-          savedFilePath: filePath,
-          savedFormat: 'text',
-        });
-      }
+      newQuery({
+        title: parsed.name,
+        initialData: data,
+        // @ts-ignore
+        savedFilePath: filePath,
+        savedFormat: 'text',
+      });
+    }
+  };
+}
+
+export default function useOpenElectronFile() {
+  const electron = getElectron();
+  const openElectronFileCore = useOpenElectronFileCore();
+
+  return () => {
+    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+      filters: [{ name: `SQL files`, extensions: ['sql'] }],
+    });
+    const filePath = filePaths && filePaths[0];
+    if (canOpenByElectron(filePath)) {
+      openElectronFileCore(filePath);
     }
   };
 }