import/export sql files

apps/studio/src/App.vue

@@ -23,8 +23,9 @@
       name="modals"
       multiple
     />
+    <dropzone />
     <data-manager />
     <confirmation-modal :name="$confirmModalName"/>
   </div>
 </template>
 
@@ -42,12 +43,13 @@
 import NotificationManager from './components/NotificationManager.vue'
 import UpgradeRequiredModal from './components/common/UpgradeRequiredModal.vue'
 import ConfirmationModal from '@/components/common/modals/ConfirmationModal.vue'
+import Dropzone from '@/components/Dropzone.vue'
 
 export default Vue.extend({
   name: 'App',
   components: {
     CoreInterface, ConnectionInterface, Titlebar, AutoUpdater, NotificationManager,
-    StateManager, DataManager, UpgradeRequiredModal, ConfirmationModal
+    StateManager, DataManager, UpgradeRequiredModal, ConfirmationModal, Dropzone,
   },
   data() {
     return {

apps/studio/src/assets/styles/app.scss

@@ -10,6 +10,7 @@ body.theme-system {
     @import './components/content-placeholders.scss';
     @import './components/context-menu.scss';
     @import './components/quicksearch.scss';
+    @import './components/dropzone.scss';
     @import './vendor.scss';
     @import './app/_all.scss';
     @import './themes/dark/theme.scss';
@@ -20,6 +21,7 @@ body.theme-system {
     @import './components/content-placeholders.scss';
     @import './components/context-menu.scss';
     @import './components/quicksearch.scss';
+    @import './components/dropzone.scss';
     @import './vendor.scss';
     @import './app/_all.scss';
     @import './themes/light/theme.scss';
@@ -30,6 +32,7 @@ body.theme-dark {
   @import './components/content-placeholders.scss';
   @import './components/context-menu.scss';
   @import './components/quicksearch.scss';
+  @import './components/dropzone.scss';
   @import './vendor.scss';
   @import './app/_all.scss';
   @import './themes/dark/theme.scss';
@@ -40,6 +43,7 @@ body.theme-light {
   @import './components/content-placeholders.scss';
   @import './components/context-menu.scss';
   @import './components/quicksearch.scss';
+  @import './components/dropzone.scss';
   @import './vendor.scss';
   @import './app/_all.scss';
   @import './themes/light/theme.scss';

apps/studio/src/assets/styles/app/sidebar/favorite-list.scss

@@ -3,13 +3,6 @@
   // height: 100%;
   // display: flex;
   // flex-direction: column;
-  &:hover {
-    .list-heading {
-      .actions {
-        display: flex;
-      }
-    }
-  }
   .sidebar-list {
     position: relative;
     flex: 1 1 auto;
@@ -46,7 +39,12 @@
   }
   .list-heading {
     .actions {
-      display: none;
+      display: flex;
+      x-button {
+        height: auto;
+        padding: 0;
+        box-shadow: none;
+      }
     }
   }
   .list-title {

apps/studio/src/assets/styles/components/dropzone.scss

@@ -0,0 +1,24 @@
+.dropzone {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  visibility: hidden;
+
+  &[data-dragging] {
+    visibility: visible;
+  }
+
+  .dropzone-core-tabs {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $theme-bg;
+    color: $theme-base;
+    opacity: 0.5;
+    font-size: 2rem;
+  }
+}
+

apps/studio/src/common/AppEvent.ts

@@ -21,6 +21,8 @@ export enum AppEvent {
   quickSearch = 'quickSearch',
   promptLogin = 'cloud_signin',
   promptQueryImport = 'cloud_q_import',
+  promptQueryImportFromComputer = "q_import_from_computer",
+  promptQueryExport = 'q_export',
   promptConnectionImport = 'cloud_c_import',
   toggleHideEntity = 'toggleHideEntity',
   toggleHideSchema = 'toggleHideSchema',
@@ -30,6 +32,8 @@ export enum AppEvent {
   upgradeModal = 'showUpgradeModal',
   toggleExpandTableList = 'toggleExpandTableList',
   togglePinTableList = 'togglePinTableList',
+  dropzoneEnter = 'dropzoneEnter',
+  dropzoneDrop = 'dropzoneDrop',
 }
 
 export interface RootBinding {

apps/studio/src/common/dropzone.ts

@@ -0,0 +1,11 @@
+export interface DropzoneEnterEvent {
+  event: DragEvent;
+  files: File[];
+  preventDrop: () => void;
+}
+
+export interface DropzoneDropEvent {
+  event: DragEvent;
+  files: File[];
+}
+

apps/studio/src/common/utils.ts

@@ -9,6 +9,7 @@ import _ from 'lodash';
 import platformInfo from './platform_info';
 import { format } from 'sql-formatter';
 import { TableFilter, TableOrView, Routine } from '@/lib/db/models';
+import { SettingsPlugin } from '@/plugins/SettingsPlugin';
 
 export function having<T, U>(item: T | undefined | null, f: (T) => U, errorOnNone?: string): U | null {
   if (item) return f(item)
@@ -87,6 +88,26 @@ export function readJSONFileSync(filename: string): any {
   return JSON.parse(data);
 }
 
+export function readWebFile(file: File) {
+  const reader = new FileReader()
+  const result = new Promise<string>((resolve, reject) => {
+    reader.onload = () => {
+      resolve(reader.result as string)
+    }
+    reader.onerror = () => {
+      reject(reader.error)
+    }
+    reader.onabort = () => {
+      reject(new Error('File reading aborted'))
+    }
+  })
+  reader.readAsText(file)
+  return {
+    result,
+    abort: reader.abort,
+  }
+}
+
 export function createParentDirectory(filename: string): Promise<string> {
   return mkdirp(path.dirname(filename))
 }
@@ -178,3 +199,24 @@ export function entityId(schema: string, entity?: TableOrView | Routine) {
   if (entity) return `${entity.entityType}.${schema}.${entity.name}`;
   return `schema.${schema}`;
 }
+
+export function isFile(e: DragEvent) {
+    const dt = e.dataTransfer;
+    for (let i = 0; i < dt.types.length; i++) {
+        if (dt.types[i] === "Files") {
+            return true;
+        }
+    }
+    return false;
+}
+
+export async function getLastExportPath(filename?: string) {
+  return await SettingsPlugin.get(
+    "lastExportPath",
+    path.join(homedir(), filename)
+  );
+}
+
+export async function setLastExportPath(exportPath: string) {
+  await SettingsPlugin.set('lastExportPath', exportPath)
+}

apps/studio/src/components/ConnectionInterface.vue

@@ -2,8 +2,6 @@
   <div class="interface connection-interface">
     <div
       class="interface-wrap row"
-      @dragover.prevent=""
-      @drop.prevent="maybeLoadSqlite"
     >
       <sidebar
         class="connection-sidebar"
@@ -214,6 +212,7 @@ import { dialectFor } from '@shared/lib/dialects/models'
 import { findClient } from '@/lib/db/clients'
 import OtherDatabaseNotice from './connection/OtherDatabaseNotice.vue'
 import Vue from 'vue'
+import { AppEvent } from '@/common/AppEvent'
 
 const log = rawLog.scope('ConnectionInterface')
 // import ImportUrlForm from './connection/ImportUrlForm';
@@ -253,7 +252,12 @@ export default Vue.extend({
     },
     determineLabelColor() {
       return this.config.labelColor == "default" ? '' : `connection-label-color-${this.config.labelColor}`
-    }
+    },
+    rootBindings() {
+      return [
+        { event: AppEvent.dropzoneDrop, handler: this.maybeLoadSqlite },
+      ]
+    },
   },
   watch: {
     workspaceId() {
@@ -306,16 +310,17 @@ export default Vue.extend({
         expandToMin: true,
       } as Split.Options)
     })
+    this.registerHandlers(this.rootBindings)
   },
   beforeDestroy() {
     if (this.split) {
       this.split.destroy()
     }
+    this.unregisterHandlers(this.rootBindings)
   },
   methods: {
-    maybeLoadSqlite(e) {
+    maybeLoadSqlite({ files }) {
       // cast to an array
-      const files = [...e.dataTransfer.files || []]
       if (!files || !files.length) return
       if (!this.config) return;
       // we only load the first