Merge pull request #214 from jorilallo/split-collection-actions

Split collection modals

frontend/components/DropdownMenu/DropdownMenu.js

@@ -2,22 +2,11 @@
 import React from 'react';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
+import keydown from 'react-keydown';
 import styled from 'styled-components';
 import Flex from 'components/Flex';
 import { color } from 'styles/constants';
-
+import { fadeAndScaleIn } from 'styles/animations';
-type MenuItemProps = {
-  onClick?: Function,
-  children?: React.Element<any>,
-};
-
-const DropdownMenuItem = ({ onClick, children }: MenuItemProps) => {
-  return (
-    <MenuItem onClick={onClick}>
-      {children}
-    </MenuItem>
-  );
-};
 
 type DropdownMenuProps = {
   label: React.Element<any>,
@@ -27,22 +16,30 @@ type DropdownMenuProps = {
 
 @observer class DropdownMenu extends React.Component {
   props: DropdownMenuProps;
-  @observable menuOpen: boolean = false;
+  @observable open: boolean = false;
 
   handleClick = () => {
-    this.menuOpen = !this.menuOpen;
+    this.open = !this.open;
+  };
+
+  @keydown('esc')
+  handleEscape() {
+    this.open = false;
+  }
+
+  handleClickOutside = (ev: SyntheticEvent) => {
+    ev.stopPropagation();
+    this.open = false;
   };
 
   render() {
     return (
       <MenuContainer onClick={this.handleClick}>
-        {this.menuOpen && <Backdrop />}
+        {this.open && <Backdrop onClick={this.handleClickOutside} />}
-
         <Label>
           {this.props.label}
         </Label>
-
+        {this.open &&
-        {this.menuOpen &&
           <Menu style={this.props.style}>
             {this.props.children}
           </Menu>}
@@ -73,40 +70,18 @@ const MenuContainer = styled.div`
 `;
 
 const Menu = styled.div`
+  animation: ${fadeAndScaleIn} 250ms ease;
+  transform-origin: 75% 0;
+
   position: absolute;
   right: 0;
   z-index: 1000;
-  border: 1px solid #eee;
+  border: ${color.slateLight};
-  background-color: #fff;
+  background: ${color.white};
+  border-radius: 2px;
   min-width: 160px;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.08);
 `;
 
-const MenuItem = styled.div`
+export default DropdownMenu;
-  margin: 0;
-  padding: 5px 10px;
-  height: 32px;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: pointer;
-  border-left: 2px solid transparent;
-
-  color: ${color.text};
-
-  span {
-    margin-top: 2px;
-  }
-
-  a {
-    text-decoration: none;
-    color: ${color.text};
-    width: 100%;
-  }
-
-  &:hover {
-    border-left: 2px solid ${color.primary};
-  }
-`;
-
-export { DropdownMenu, DropdownMenuItem };

frontend/components/DropdownMenu/DropdownMenuItem.js

@@ -0,0 +1,43 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { color } from 'styles/constants';
+
+const DropdownMenuItem = ({
+  onClick,
+  children,
+}: {
+  onClick?: Function,
+  children?: React.Element<any>,
+}) => {
+  return (
+    <MenuItem onClick={onClick}>
+      {children}
+    </MenuItem>
+  );
+};
+
+const MenuItem = styled.div`
+  margin: 0;
+  padding: 5px 10px;
+  height: 32px;
+
+  color: ${color.slateDark};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-size: 15px;
+
+  a {
+    text-decoration: none;
+    width: 100%;
+  }
+
+  &:hover {
+    color: ${color.white};
+    background: ${color.primary};
+  }
+`;
+
+export default DropdownMenuItem;

frontend/components/DropdownMenu/index.js

@@ -1,2 +1,3 @@
 // @flow
-export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
+export { default as DropdownMenu } from './DropdownMenu';
+export { default as DropdownMenuItem } from './DropdownMenuItem';

frontend/components/Layout/Layout.js

@@ -1,31 +1,26 @@
 // @flow
 import React from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import Helmet from 'react-helmet';
 import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
-import { observable } from 'mobx';
-import _ from 'lodash';
 import keydown from 'react-keydown';
 import Flex from 'components/Flex';
 import { color, layout } from 'styles/constants';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
-import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 
 import Avatar from 'components/Avatar';
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
 import Scrollable from 'components/Scrollable';
-import Modal from 'components/Modal';
 import Icon from 'components/Icon';
-import CollectionNew from 'scenes/CollectionNew';
+import CollectionMenu from 'menus/CollectionMenu';
-import CollectionEdit from 'scenes/CollectionEdit';
+import AccountMenu from 'menus/AccountMenu';
-import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
-import Settings from 'scenes/Settings';
 
 import SidebarCollection from './components/SidebarCollection';
 import SidebarCollectionList from './components/SidebarCollectionList';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
+import Modals from './components/Modals';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
@@ -52,8 +47,6 @@ type Props = {
     search: true,
   };
 
-  @observable modal = null;
-
   @keydown(['/', 't'])
   goToSearch(ev) {
     ev.preventDefault();
@@ -76,37 +69,21 @@ type Props = {
     this.props.history.push(documentEditUrl(activeDocument));
   }
 
-  handleLogout = () => {
-    this.props.auth.logout(() => this.props.history.push('/'));
-  };
-
   @keydown('shift+/')
   goToOpenKeyboardShortcuts() {
-    this.modal = 'keyboard-shortcuts';
+    this.props.ui.setActiveModal('keyboard-shortcuts');
   }
 
-  handleOpenKeyboardShortcuts = () => {
-    this.goToOpenKeyboardShortcuts();
-  };
-
-  handleOpenSettings = () => {
-    this.modal = 'settings';
-  };
-
   handleCreateCollection = () => {
-    this.modal = 'create-collection';
+    this.props.ui.setActiveModal('collection-new');
   };
 
   handleEditCollection = () => {
-    this.modal = 'edit-collection';
+    this.props.ui.setActiveModal('collection-edit');
-  };
-
-  handleCloseModal = () => {
-    this.modal = null;
   };
 
   render() {
-    const { auth, documents, collections, history, ui } = this.props;
+    const { auth, documents, collections, ui } = this.props;
     const { user, team } = auth;
 
     return (
@@ -130,29 +107,15 @@ type Props = {
             user &&
             team &&
             <Sidebar column editMode={ui.editMode}>
-              <DropdownMenu
+              <AccountMenu
-                style={{ marginRight: 10, marginTop: -10 }}
                 label={
                   <HeaderBlock user={user} team={team}>
                     <Avatar src={user.avatarUrl} />
                   </HeaderBlock>
                 }
-              >
+              />
-                <DropdownMenuItem onClick={this.handleOpenSettings}>
-                  Settings
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
-                  Keyboard shortcuts
-                </DropdownMenuItem>
-                <MenuLink to="/developers">
-                  <DropdownMenuItem>API</DropdownMenuItem>
-                </MenuLink>
-                <DropdownMenuItem onClick={this.handleLogout}>
-                  Logout
-                </DropdownMenuItem>
-              </DropdownMenu>
 
-              <Flex column>
+              <Flex auto column>
                 <Scrollable>
                   <LinkSection>
                     <SidebarLink to="/dashboard">
@@ -167,8 +130,8 @@ type Props = {
                   </LinkSection>
                   <LinkSection>
                     {collections.active
-                      ? <CollectionAction onClick={this.handleEditCollection}>
+                      ? <CollectionAction>
-                          <Icon type="MoreHorizontal" />
+                          <CollectionMenu collection={collections.active} />
                         </CollectionAction>
                       : <CollectionAction onClick={this.handleCreateCollection}>
                           <Icon type="PlusCircle" />
@@ -189,44 +152,7 @@ type Props = {
             {this.props.children}
           </Content>
         </Flex>
-        <Modal
+        <Modals ui={ui} />
-          isOpen={this.modal === 'create-collection'}
-          onRequestClose={this.handleCloseModal}
-          title="Create a collection"
-        >
-          <CollectionNew
-            collections={collections}
-            history={history}
-            onSubmit={this.handleCloseModal}
-          />
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'edit-collection'}
-          onRequestClose={this.handleCloseModal}
-          title="Edit collection"
-        >
-          {collections.active &&
-            <CollectionEdit
-              collection={collections.active}
-              collections={collections}
-              history={history}
-              onSubmit={this.handleCloseModal}
-            />}
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'keyboard-shortcuts'}
-          onRequestClose={this.handleCloseModal}
-          title="Keyboard shortcuts"
-        >
-          <KeyboardShortcuts />
-        </Modal>
-        <Modal
-          isOpen={this.modal === 'settings'}
-          onRequestClose={this.handleCloseModal}
-          title="Settings"
-        >
-          <Settings />
-        </Modal>
       </Container>
     );
   }
@@ -255,10 +181,6 @@ const Content = styled(Flex)`
   transition: margin-left 200ms ease-in-out;
 `;
 
-const MenuLink = styled(Link)`
-  color: ${color.text};
-`;
-
 const Sidebar = styled(Flex)`
   position: fixed;
   top: 0;

frontend/components/Layout/components/Modals.js

@@ -0,0 +1,62 @@
+// @flow
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import BaseModal from 'components/Modal';
+import UiStore from 'stores/UiStore';
+import CollectionNew from 'scenes/CollectionNew';
+import CollectionEdit from 'scenes/CollectionEdit';
+import CollectionDelete from 'scenes/CollectionDelete';
+import DocumentDelete from 'scenes/DocumentDelete';
+import KeyboardShortcuts from 'scenes/KeyboardShortcuts';
+import Settings from 'scenes/Settings';
+
+@observer class Modals extends Component {
+  props: {
+    ui: UiStore,
+  };
+
+  handleClose = () => {
+    this.props.ui.clearActiveModal();
+  };
+
+  render() {
+    const { activeModalName, activeModalProps } = this.props.ui;
+
+    const Modal = ({ name, children, ...rest }) => {
+      return (
+        <BaseModal
+          isOpen={activeModalName === name}
+          onRequestClose={this.handleClose}
+          {...rest}
+        >
+          {React.cloneElement(children, activeModalProps)}
+        </BaseModal>
+      );
+    };
+
+    return (
+      <span>
+        <Modal name="collection-new" title="Create a collection">
+          <CollectionNew onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="collection-edit" title="Edit collection">
+          <CollectionEdit onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="collection-delete" title="Delete collection">
+          <CollectionDelete onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="document-delete" title="Delete document">
+          <DocumentDelete onSubmit={this.handleClose} />
+        </Modal>
+        <Modal name="keyboard-shortcuts" title="Keyboard shortcuts">
+          <KeyboardShortcuts />
+        </Modal>
+        <Modal name="settings" title="Settings">
+          <Settings />
+        </Modal>
+      </span>
+    );
+  }
+}
+
+export default Modals;

frontend/components/Scrollable/Scrollable.js

@@ -6,7 +6,6 @@ const Scroll = styled.div`
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  transform: translateZ(0);
   -webkit-overflow-scrolling: touch;
 `;
 

frontend/menus/AccountMenu.js

@@ -0,0 +1,53 @@
+// @flow
+import React, { Component } from 'react';
+import { Link, withRouter } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import UiStore from 'stores/UiStore';
+import AuthStore from 'stores/AuthStore';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class AccountMenu extends Component {
+  props: {
+    label?: React$Element<any>,
+    history: Object,
+    ui: UiStore,
+    auth: AuthStore,
+  };
+
+  handleOpenKeyboardShortcuts = () => {
+    this.props.ui.setActiveModal('keyboard-shortcuts');
+  };
+
+  handleOpenSettings = () => {
+    this.props.ui.setActiveModal('settings');
+  };
+
+  handleLogout = () => {
+    this.props.auth.logout();
+    this.props.history.push('/');
+  };
+
+  render() {
+    return (
+      <DropdownMenu
+        style={{ marginRight: 10, marginTop: -10 }}
+        label={this.props.label}
+      >
+        <DropdownMenuItem onClick={this.handleOpenSettings}>
+          Settings
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleOpenKeyboardShortcuts}>
+          Keyboard shortcuts
+        </DropdownMenuItem>
+        <Link to="/developers">
+          <DropdownMenuItem>API documentation</DropdownMenuItem>
+        </Link>
+        <DropdownMenuItem onClick={this.handleLogout}>
+          Logout
+        </DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('ui', 'auth')(AccountMenu));

frontend/menus/CollectionMenu.js

@@ -0,0 +1,43 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import Collection from 'models/Collection';
+import UiStore from 'stores/UiStore';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class CollectionMenu extends Component {
+  props: {
+    label?: React$Element<any>,
+    history: Object,
+    ui: UiStore,
+    collection: Collection,
+  };
+
+  onEdit = () => {
+    const { collection } = this.props;
+    this.props.ui.setActiveModal('collection-edit', { collection });
+  };
+
+  onDelete = () => {
+    const { collection } = this.props;
+    this.props.ui.setActiveModal('collection-delete', { collection });
+  };
+
+  render() {
+    const { collection, label } = this.props;
+    const { allowDelete } = collection;
+
+    return (
+      <DropdownMenu label={label || <Icon type="MoreHorizontal" />}>
+        {collection &&
+          <DropdownMenuItem onClick={this.onEdit}>Edit</DropdownMenuItem>}
+        {allowDelete &&
+          <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('ui')(CollectionMenu));

frontend/menus/DocumentMenu.js

@@ -0,0 +1,53 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { inject, observer } from 'mobx-react';
+import Document from 'models/Document';
+import UiStore from 'stores/UiStore';
+import Icon from 'components/Icon';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class DocumentMenu extends Component {
+  props: {
+    ui: UiStore,
+    label?: React$Element<any>,
+    history: Object,
+    document: Document,
+  };
+
+  onCreateDocument = () => {
+    this.props.history.push(`${this.props.document.collection.url}/new`);
+  };
+
+  onCreateChild = () => {
+    this.props.history.push(`${this.props.document.url}/new`);
+  };
+
+  onDelete = () => {
+    const { document } = this.props;
+    this.props.ui.setActiveModal('document-delete', { document });
+  };
+
+  onExport = () => {
+    this.props.document.download();
+  };
+
+  render() {
+    const { document, label } = this.props;
+    const { collection, allowDelete } = document;
+
+    return (
+      <DropdownMenu label={label || <Icon type="MoreHorizontal" />}>
+        {collection &&
+          <DropdownMenuItem onClick={this.onCreateDocument}>
+            New document
+          </DropdownMenuItem>}
+        <DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
+        {allowDelete &&
+          <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('ui')(DocumentMenu));

frontend/models/Collection.js

@@ -32,6 +32,10 @@ class Collection extends BaseModel {
       : this.url;
   }
 
+  @computed get allowDelete(): boolean {
+    return true;
+  }
+
   /* Actions */
 
   @action fetch = async () => {
@@ -84,13 +88,15 @@ class Collection extends BaseModel {
 
   @action delete = async () => {
     try {
-      const res = await client.post('/collections.delete', { id: this.id });
+      await client.post('/collections.delete', { id: this.id });
-      invariant(res && res.data, 'Data should be available');
+      this.emit('collections.delete', {
-      const { data } = res;
+        id: this.id,
-      return data.success;
+      });
+      return true;
     } catch (e) {
       this.errors.add('Collection failed to delete');
     }
+    return false;
   };
 
   @action updateData(data: Object = {}) {

frontend/models/Document.js

@@ -85,6 +85,16 @@ class Document extends BaseModel {
     return !this.isEmpty && !this.isSaving;
   }
 
+  @computed get allowDelete(): boolean {
+    const collection = this.collection;
+    return (
+      collection &&
+      collection.type === 'atlas' &&
+      collection.documents &&
+      collection.documents.length > 1
+    );
+  }
+
   /* Actions */
 
   @action star = async () => {
@@ -205,12 +215,21 @@ class Document extends BaseModel {
         id: this.id,
         collectionId: this.collection.id,
       });
+      return true;
     } catch (e) {
       this.errors.add('Error while deleting the document');
     }
-    return;
+    return false;
   };
 
+  download() {
+    const a = window.document.createElement('a');
+    a.textContent = 'download';
+    a.download = `${this.title}.md`;
+    a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(this.text)}`;
+    a.click();
+  }
+
   updateData(data: Object = {}, dirty: boolean = false) {
     if (data.text) {
       const { title, emoji } = parseTitle(data.text);

frontend/scenes/CollectionDelete/CollectionDelete.js

@@ -0,0 +1,61 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { observable } from 'mobx';
+import { inject, observer } from 'mobx-react';
+import { homeUrl } from 'utils/routeHelpers';
+import Button from 'components/Button';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+import Collection from 'models/Collection';
+import CollectionsStore from 'stores/CollectionsStore';
+
+type Props = {
+  history: Object,
+  collection: Collection,
+  collections: CollectionsStore,
+  onSubmit: () => void,
+};
+
+@observer class CollectionDelete extends Component {
+  props: Props;
+  @observable isDeleting: boolean;
+
+  handleSubmit = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    this.isDeleting = true;
+    const success = await this.props.collection.delete();
+
+    if (success) {
+      this.props.collections.remove(this.props.collection.id);
+      this.props.history.push(homeUrl());
+      this.props.onSubmit();
+    }
+
+    this.isDeleting = false;
+  };
+
+  render() {
+    const { collection } = this.props;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Are you sure? Deleting the
+            {' '}
+            <strong>{collection.name}</strong>
+            {' '}
+            collection is permanant and will also delete all of the documents within
+            it, so be careful with that.
+          </HelpText>
+          <Button type="submit" danger>
+            {this.isDeleting ? 'Deleting…' : 'Delete'}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
+}
+
+export default inject('collections')(withRouter(CollectionDelete));

frontend/scenes/CollectionDelete/index.js

@@ -0,0 +1,3 @@
+// @flow
+import CollectionDelete from './CollectionDelete';
+export default CollectionDelete;

frontend/scenes/CollectionEdit/CollectionEdit.js

@@ -1,27 +1,23 @@
 // @flow
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
 import { observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
-import { homeUrl } from 'utils/routeHelpers';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import Flex from 'components/Flex';
 import HelpText from 'components/HelpText';
 import Collection from 'models/Collection';
-import CollectionsStore from 'stores/CollectionsStore';
 
 type Props = {
   history: Object,
   collection: Collection,
-  collections: CollectionsStore,
   onSubmit: () => void,
 };
 
 @observer class CollectionEdit extends Component {
   props: Props;
   @observable name: string;
-  @observable isConfirming: boolean;
-  @observable isDeleting: boolean;
   @observable isSaving: boolean;
 
   componentWillMount() {
@@ -46,34 +42,12 @@ type Props = {
     this.name = ev.target.value;
   };
 
-  confirmDelete = () => {
-    this.isConfirming = true;
-  };
-
-  cancelDelete = () => {
-    this.isConfirming = false;
-  };
-
-  confirmedDelete = async (ev: SyntheticEvent) => {
-    ev.preventDefault();
-    this.isDeleting = true;
-    const success = await this.props.collection.delete();
-
-    if (success) {
-      this.props.collections.remove(this.props.collection.id);
-      this.props.history.push(homeUrl());
-      this.props.onSubmit();
-    }
-
-    this.isDeleting = false;
-  };
-
   render() {
     return (
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit a collection name at any time, but doing so might
+            You can edit a collection's name at any time, however doing so might
             confuse your team mates.
           </HelpText>
           <Input
@@ -91,29 +65,9 @@ type Props = {
             {this.isSaving ? 'Saving…' : 'Save'}
           </Button>
         </form>
-        <hr />
-        <form>
-          <HelpText>
-            Deleting a collection will also delete all of the documents within
-            it, so be careful with that.
-          </HelpText>
-          {!this.isConfirming &&
-            <Button type="submit" onClick={this.confirmDelete} neutral>
-              Delete…
-            </Button>}
-          {this.isConfirming &&
-            <span>
-              <Button type="submit" onClick={this.cancelDelete} neutral>
-                Cancel
-              </Button>
-              <Button type="submit" onClick={this.confirmedDelete} danger>
-                {this.isDeleting ? 'Deleting…' : 'Confirm Delete'}
-              </Button>
-            </span>}
-        </form>
       </Flex>
     );
   }
 }
 
-export default CollectionEdit;
+export default inject('collections')(withRouter(CollectionEdit));

frontend/scenes/CollectionNew/CollectionNew.js

@@ -1,7 +1,8 @@
 // @flow
 import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
 import { observable } from 'mobx';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import Button from 'components/Button';
 import Input from 'components/Input';
 import HelpText from 'components/HelpText';
@@ -69,4 +70,4 @@ type Props = {
   }
 }
 
-export default CollectionNew;
+export default inject('collections')(withRouter(CollectionNew));

frontend/scenes/Document/Document.js

@@ -19,7 +19,7 @@ import Document from 'models/Document';
 import DocumentMove from './components/DocumentMove';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
-import Menu from './components/Menu';
+import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
@@ -251,8 +251,7 @@ type Props = {
               />
               <Meta align="center" justify="flex-end" readOnly={!isEditing}>
                 <Flex align="center">
-                  {document &&
+                  {!isNew &&
-                    !isNew &&
                     !isEditing &&
                     <Collaborators document={document} />}
                   <HeaderAction>
@@ -270,10 +269,12 @@ type Props = {
                           Edit
                         </a>}
                   </HeaderAction>
+                  {isEditing &&
+                    <HeaderAction>
+                      <a onClick={this.onCancel}>Cancel</a>
+                    </HeaderAction>}
                   <HeaderAction>
-                    {isEditing
+                    <DocumentMenu document={document} />
-                      ? <a onClick={this.onCancel}>Cancel</a>
-                      : <Menu document={document} />}
                   </HeaderAction>
                   {!isEditing && <Separator />}
                   <HeaderAction>

frontend/scenes/Document/components/Menu.js

@@ -1,87 +0,0 @@
-// @flow
-import React, { Component } from 'react';
-import invariant from 'invariant';
-import get from 'lodash/get';
-import { withRouter } from 'react-router-dom';
-import { observer } from 'mobx-react';
-import Document from 'models/Document';
-import Icon from 'components/Icon';
-import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
-
-type Props = {
-  history: Object,
-  document: Document,
-};
-
-@observer class Menu extends Component {
-  props: Props;
-
-  onCreateDocument = () => {
-    this.props.history.push(`${this.props.document.collection.url}/new`);
-  };
-
-  onCreateChild = () => {
-    invariant(this.props.document, 'Document is not available');
-    this.props.history.push(`${this.props.document.url}/new`);
-  };
-
-  onDelete = async () => {
-    let msg;
-    if (get(this.props, 'document.collection.type') === 'atlas') {
-      msg =
-        "Are you sure you want to delete this document and all it's child documents (if any)?";
-    } else {
-      msg = 'Are you sure you want to delete this document?';
-    }
-
-    if (confirm(msg)) {
-      await this.props.document.delete();
-      this.props.history.push(this.props.document.collection.url);
-    }
-  };
-
-  onExport = () => {
-    const doc = this.props.document;
-    if (doc) {
-      const a = document.createElement('a');
-      a.textContent = 'download';
-      a.download = `${doc.title}.md`;
-      a.href = `data:text/markdown;charset=UTF-8,${encodeURIComponent(doc.text)}`;
-      a.click();
-    }
-  };
-
-  onMove = () => {
-    this.props.history.push(`${this.props.document.url}/move`);
-  };
-
-  render() {
-    const document = get(this.props, 'document');
-    if (document) {
-      const collection = document.collection;
-      const allowDelete =
-        collection &&
-        collection.type === 'atlas' &&
-        collection.documents &&
-        collection.documents.length > 1;
-
-      return (
-        <DropdownMenu label={<Icon type="MoreHorizontal" />}>
-          {collection &&
-            <div>
-              <DropdownMenuItem onClick={this.onCreateDocument}>
-                New document
-              </DropdownMenuItem>
-            </div>}
-          <DropdownMenuItem onClick={this.onMove}>Move</DropdownMenuItem>
-          <DropdownMenuItem onClick={this.onExport}>Export</DropdownMenuItem>
-          {allowDelete &&
-            <DropdownMenuItem onClick={this.onDelete}>Delete</DropdownMenuItem>}
-        </DropdownMenu>
-      );
-    }
-    return null;
-  }
-}
-
-export default withRouter(Menu);

frontend/scenes/DocumentDelete/DocumentDelete.js

@@ -0,0 +1,60 @@
+// @flow
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { observable } from 'mobx';
+import { inject, observer } from 'mobx-react';
+import { homeUrl } from 'utils/routeHelpers';
+import Button from 'components/Button';
+import Flex from 'components/Flex';
+import HelpText from 'components/HelpText';
+import Document from 'models/Document';
+import DocumentsStore from 'stores/DocumentsStore';
+
+type Props = {
+  history: Object,
+  document: Document,
+  documents: DocumentsStore,
+  onSubmit: () => void,
+};
+
+@observer class DocumentDelete extends Component {
+  props: Props;
+  @observable isDeleting: boolean;
+
+  handleSubmit = async (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    this.isDeleting = true;
+    const success = await this.props.document.delete();
+
+    if (success) {
+      this.props.documents.remove(this.props.document.id);
+      this.props.history.push(homeUrl());
+      this.props.onSubmit();
+    }
+
+    this.isDeleting = false;
+  };
+
+  render() {
+    const { document } = this.props;
+
+    return (
+      <Flex column>
+        <form onSubmit={this.handleSubmit}>
+          <HelpText>
+            Are you sure? Deleting the
+            {' '}
+            <strong>{document.title}</strong>
+            {' '}
+            document is permanant and will also delete all of its history.
+          </HelpText>
+          <Button type="submit" danger>
+            {this.isDeleting ? 'Deleting…' : 'Delete'}
+          </Button>
+        </form>
+      </Flex>
+    );
+  }
+}
+
+export default inject('documents')(withRouter(DocumentDelete));

frontend/scenes/DocumentDelete/index.js

@@ -0,0 +1,3 @@
+// @flow
+import DocumentDelete from './DocumentDelete';
+export default DocumentDelete;

frontend/stores/AuthStore.js

@@ -30,10 +30,9 @@ class AuthStore {
 
   /* Actions */
 
-  @action logout = (cb: Function) => {
+  @action logout = () => {
     this.user = null;
     this.token = null;
-    cb();
   };
 
   @action getOauthState = () => {

frontend/stores/UiStore.js

@@ -3,12 +3,23 @@ import { observable, action } from 'mobx';
 import Document from 'models/Document';
 
 class UiStore {
+  @observable activeModalName: ?string;
+  @observable activeModalProps: ?Object;
   @observable activeDocumentId: ?string;
   @observable activeCollectionId: ?string;
   @observable progressBarVisible: boolean = false;
   @observable editMode: boolean = false;
 
   /* Actions */
+  @action setActiveModal = (name: string, props: ?Object): void => {
+    this.activeModalName = name;
+    this.activeModalProps = props;
+  };
+
+  @action clearActiveModal = (): void => {
+    this.activeModalName = undefined;
+    this.activeModalProps = undefined;
+  };
 
   @action setActiveDocument = (document: Document): void => {
     this.activeDocumentId = document.id;

frontend/utils/ApiClient.js

@@ -65,7 +65,9 @@ class ApiClient {
 
           // Handle 401, log out user
           if (response.status === 401) {
-            return stores.auth.logout(() => (window.location = '/'));
+            stores.auth.logout();
+            window.location = '/';
+            return;
           }
 
           // Handle failed responses

yarn.lock

@@ -2476,11 +2476,7 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.2.7:
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.18:
-  version "1.3.21"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
-
-electron-to-chromium@^1.3.18:
   version "1.3.20"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.20.tgz#2eedd5ccbae7ddc557f68ad1fce9c172e915e4e5"