feat(client/App): add file drop feature

client/src/app/__tests__/AppSpec.js

@@ -2134,6 +2134,52 @@ describe('<App>', function() {
 
   });
 
+
+  describe('#handleDrop', function() {
+
+    it('should try to open each dropped file', async function() {
+
+      // given
+      const directoryReadError = new Error();
+      directoryReadError.code = 'EISDIR';
+
+      const files = [
+        {
+          path: '/dev/null/'
+        },
+        {
+          path: './CamundaModeler'
+        },
+        {
+          path: './diagram.bpmn'
+        }
+      ];
+
+      const fileSystem = new FileSystem();
+
+      const readFileStub = sinon.stub(fileSystem, 'readFile')
+        .onFirstCall().rejects(directoryReadError)
+        .onSecondCall().rejects(directoryReadError)
+        .onThirdCall().resolves({ contents: '' });
+
+      const {
+        app
+      } = createApp({
+        globals: {
+          fileSystem
+        }
+      });
+
+      // when
+      await app.handleDrop(files);
+
+      // then
+      expect(readFileStub).to.be.calledThrice;
+
+    });
+
+  });
+
 });
 
 

client/src/app/__tests__/mocks/index.js

@@ -88,6 +88,16 @@ class FakeTab extends Component {
 
 }
 
+
+const noopProvider = {
+  getComponent() {
+    return null;
+  },
+  getInitialContents() {
+    return null;
+  }
+};
+
 export class TabsProvider {
 
   constructor(resolveTab) {
@@ -187,7 +197,7 @@ export class TabsProvider {
   }
 
   getProvider(type) {
-    return this.providers[type];
+    return this.providers[type] || noopProvider;
   }
 
   getTabComponent(type) {

client/src/app/drop-zone/DropZone.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import css from './DropZone.less';
+
+
+export class DropZone extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      draggingOver: false
+    };
+  }
+
+  handleDragOver = event => {
+    if (!this.isDragAllowed(event)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+
+    if (this.state.draggingOver) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    this.setState({ draggingOver: true });
+  }
+
+  /**
+   * @param {DragEvent} event
+   */
+  isDragAllowed(event) {
+    const { dataTransfer } = event;
+
+    return Array.from(dataTransfer.items)
+      .some(({ kind, type }) => type === '' && kind === 'file');
+  }
+
+  handleDragLeave = event => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.state.draggingOver && !event.relatedTarget) {
+      this.setState({ draggingOver: false });
+    }
+  }
+
+  handleDrop = async (event) => {
+    if (!this.state.draggingOver) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.setState({ draggingOver: false });
+
+    this.props.onDrop(event.dataTransfer.files);
+  }
+
+  render() {
+    return (
+      <div
+        className={ css.DropZone }
+        onDragOver={ this.handleDragOver }
+        onDragLeave={ this.handleDragLeave }
+        onDrop={ this.handleDrop }
+      >
+        { this.state.draggingOver ? <DropOverlay /> : null }
+        { this.props.children }
+      </div>
+    );
+  }
+}
+
+DropZone.defaultProps = {
+  onDrop: () => {}
+};
+
+function DropOverlay() {
+  return (
+    <div className={ css.DropOverlay }>
+      <div className="box">
+        <div>Drop diagrams here</div>
+      </div>
+    </div>
+  );
+}

client/src/app/drop-zone/DropZone.less

@@ -0,0 +1,36 @@
+:local(.DropZone) {
+  height: 100%;
+  width: 100%;
+}
+
+:local(.DropOverlay) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  padding: 120px 50px;
+
+  background: rgba(255, 255, 255, 0.8);
+
+  pointer-events: none;
+
+  z-index: 1000;
+
+  .box {
+    text-align: center;
+    border: dashed 4px #DDD;
+    height: 100%;
+    vertical-align: middle;
+
+    > div {
+      font-size: 26px;
+      color: #999;
+      margin: auto;
+
+      top: 20%;
+      position: relative;
+    }
+  }
+}