Added collection menu link to import documents

frontend/components/DropToImport/DropToImport.js

@@ -8,11 +8,7 @@ import Document from 'models/Document';
 import DocumentsStore from 'stores/DocumentsStore';
 import LoadingIndicator from 'components/LoadingIndicator';
 
-class DropToImport extends Component {
-  state: {
-    isImporting: boolean,
-  };
-  props: {
+type Props = {
   children?: React$Element<any>,
   collectionId: string,
   documentId?: string,
@@ -20,8 +16,15 @@ class DropToImport extends Component {
   rejectClassName?: string,
   documents: DocumentsStore,
   disabled: boolean,
+  dropzoneRef: Function,
   history: Object,
+};
+
+class DropToImport extends Component {
+  state: {
+    isImporting: boolean,
   };
+  props: Props;
   state = {
     isImporting: false,
   };
@@ -98,6 +101,7 @@ class DropToImport extends Component {
         disableClick
         disablePreview
         multiple
+        ref={this.props.dropzoneRef}
         {...props}
       >
         {this.state.isImporting && <LoadingIndicator />}

frontend/components/Layout/components/SidebarCollections.js

@@ -53,8 +53,14 @@ type Props = {
 }
 
 @observer class CollectionLink extends React.Component {
+  dropzoneRef;
+
   @observable menuOpen = false;
 
+  handleImport = () => {
+    this.dropzoneRef.open();
+  };
+
   render() {
     const { history, collection, activeDocument, ui } = this.props;
 
@@ -65,6 +71,7 @@ type Props = {
         collectionId={collection.id}
         activeClassName="activeDropZone"
         menuOpen={this.menuOpen}
+        dropzoneRef={ref => (this.dropzoneRef = ref)}
       >
         <SidebarLink key={collection.id} to={collection.url}>
           <Flex justify="space-between">
@@ -76,6 +83,7 @@ type Props = {
                 collection={collection}
                 onShow={() => (this.menuOpen = true)}
                 onClose={() => (this.menuOpen = false)}
+                onImport={this.handleImport}
                 open={this.menuOpen}
               />
             </CollectionAction>

frontend/menus/CollectionMenu.js

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import Collection from 'models/Collection';
 import UiStore from 'stores/UiStore';
 import Icon from 'components/Icon';
+import Flex from 'components/Flex';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 @observer class CollectionMenu extends Component {
@@ -13,6 +14,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
     label?: React$Element<any>,
     onShow?: () => void,
     onClose?: () => void,
+    onImport?: () => void,
     history: Object,
     ui: UiStore,
     collection: Collection,
@@ -34,7 +36,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
   };
 
   render() {
-    const { collection, label, onShow, onClose } = this.props;
+    const { collection, label, onShow, onClose, onImport } = this.props;
     const { allowDelete } = collection;
 
     return (
@@ -44,11 +46,16 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
         onClose={onClose}
       >
         {collection &&
+          <Flex column>
             <DropdownMenuItem onClick={this.onNewDocument}>
               New document
-          </DropdownMenuItem>}
-        {collection &&
-          <DropdownMenuItem onClick={this.onEdit}>Edit</DropdownMenuItem>}
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onImport}>
+              Import document
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={this.onEdit}>Edit</DropdownMenuItem>
+          </Flex>}
+        }
         {allowDelete &&
           <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
       </DropdownMenu>