Drag and drop import files (#562)

app/ui/components/modals/index.js

@@ -13,15 +13,15 @@ export function registerModal (instance) {
 }
 
 export function showPrompt (config) {
-  showModal(PromptModal, config);
+  return showModal(PromptModal, config);
 }
 
 export function showAlert (config) {
-  showModal(AlertModal, config);
+  return showModal(AlertModal, config);
 }
 
 export function showError (config) {
-  showModal(ErrorModal, config);
+  return showModal(ErrorModal, config);
 }
 
 export function showModal (modalCls, ...args) {

app/ui/containers/app.js

@@ -36,8 +36,8 @@ import {getKeys} from '../../templating/utils';
 import {showAlert, showPrompt} from '../components/modals/index';
 import {exportHarRequest} from '../../common/har';
 import * as hotkeys from '../../common/hotkeys';
-import KeydownBinder from '../components/keydown-binder';
 import {executeHotKey} from '../../common/hotkeys';
+import KeydownBinder from '../components/keydown-binder';
 import ErrorBoundary from '../components/error-boundary';
 
 @autobind
@@ -699,6 +699,36 @@ class App extends PureComponent {
       this.props.handleCommand(command, args);
     });
 
+    // NOTE: This is required for "drop" event to trigger.
+    document.addEventListener('dragover', e => {
+      e.preventDefault();
+    }, false);
+
+    document.addEventListener('drop', async e => {
+      e.preventDefault();
+      const {activeWorkspace, handleImportUriToWorkspace} = this.props;
+      if (!activeWorkspace) {
+        return;
+      }
+
+      if (e.dataTransfer.files.length === 0) {
+        console.log('Ignored drop event because no files present');
+        return;
+      }
+
+      const file = e.dataTransfer.files[0];
+      const {path} = file;
+      const uri = `file://${path}`;
+
+      await showAlert({
+        title: 'Confirm Data Import',
+        message: <span>Import <code>{path}</code>?</span>,
+        addCancel: true
+      });
+
+      handleImportUriToWorkspace(activeWorkspace._id, uri);
+    }, false);
+
     ipcRenderer.on('toggle-changelog', () => {
       showModal(ChangelogModal);
     });

app/ui/redux/modules/global.js

@@ -76,22 +76,24 @@ export const reducer = combineReducers({
 
 export function newCommand (command, args) {
   return async dispatch => {
-    // TODO: Make this use reducer when Modals ported to Redux
-    if (command === COMMAND_ALERT) {
-      const {message, title} = args;
-      showModal(AlertModal, {title, message});
-    } else if (command === COMMAND_LOGIN) {
-      const {title, message} = args;
-      showModal(LoginModal, {title, message});
-    } else if (command === COMMAND_TRIAL_END) {
-      showModal(PaymentNotificationModal);
-    } else if (command === COMMAND_IMPORT_URI) {
-      await showModal(AlertModal, {
-        title: 'Confirm Data Import',
-        message: <span>Do you really want to import <code>{args.uri}</code>?</span>,
-        addCancel: true
-      });
-      dispatch(importUri(args.workspaceId, args.uri));
+    switch (command) {
+      case COMMAND_ALERT:
+        showModal(AlertModal, {title: args.title, message: args.message});
+        break;
+      case COMMAND_LOGIN:
+        showModal(LoginModal, {title: args.title, message: args.message});
+        break;
+      case COMMAND_TRIAL_END:
+        showModal(PaymentNotificationModal);
+        break;
+      case COMMAND_IMPORT_URI:
+        await showModal(AlertModal, {
+          title: 'Confirm Data Import',
+          message: <span>Do you really want to import <code>{args.uri}</code>?</span>,
+          addCancel: true
+        });
+        dispatch(importUri(args.workspaceId, args.uri));
+        break;
     }
   };
 }