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>
+          <InfoWrapper>Supported file types: {fileTypeNames.join(', ')}</InfoWrapper>
-            Supported file types:{' '}
-            {fileFormats
-              .filter(x => x.readerFunc)
-              .map(x => x.name)
-              .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={save} keyText="Ctrl+S">
-        <DropDownMenuItem onClick={saveAs}>Save As</DropDownMenuItem>
+          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,18 +1,15 @@
 import useNewQuery from '../query/useNewQuery';
 import getElectron from './getElectron';
 
-export default function useOpenElectronFile() {
+export function canOpenByElectron(file) {
-  const electron = getElectron();
+  return file && file.toLowerCase().endsWith('.sql');
+}
 
+export function useOpenElectronFileCore() {
   const newQuery = useNewQuery();
 
-  return () => {
+  return filePath => {
-    const filePaths = electron.remote.dialog.showOpenDialogSync(electron.remote.getCurrentWindow(), {
+    if (filePath.toLowerCase().endsWith('.sql')) {
-      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);
@@ -26,6 +23,20 @@ export default function useOpenElectronFile() {
         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);
     }
   };
 }