From 738dce8c0604e4582d7aec10736acac3c5c802c6 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 7 Aug 2018 22:08:44 -0700
Subject: [PATCH] Clarify where new document will be created from document
 header

---
 app/menus/NewChildDocumentMenu.js        | 48 ++++++++++++++++++++++++
 app/scenes/Document/components/Header.js | 14 +++----
 2 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 app/menus/NewChildDocumentMenu.js

diff --git a/app/menus/NewChildDocumentMenu.js b/app/menus/NewChildDocumentMenu.js
new file mode 100644
index 000000000..1a98c1152
--- /dev/null
+++ b/app/menus/NewChildDocumentMenu.js
@@ -0,0 +1,48 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { MoreIcon } from 'outline-icons';
+
+import { newDocumentUrl } from 'utils/routeHelpers';
+import Document from 'models/Document';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+type Props = {
+  label?: React.Node,
+  history: Object,
+  document: Document,
+};
+
+class NewChildDocumentMenu extends React.Component<Props> {
+  handleNewDocument = () => {
+    const { history, document } = this.props;
+    history.push(newDocumentUrl(document.collection));
+  };
+
+  handleNewChild = () => {
+    const { history, document } = this.props;
+    history.push(
+      `${document.collection.url}/new?parentDocument=${document.id}`
+    );
+  };
+
+  render() {
+    const { label, document, history, ...rest } = this.props;
+    const { collection } = document;
+
+    return (
+      <DropdownMenu label={label || <MoreIcon />} {...rest}>
+        <DropdownMenuItem onClick={this.handleNewChild}>
+          New child document
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={this.handleNewDocument}>
+          <span>
+            New document in <strong>{collection.name}</strong>
+          </span>
+        </DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(NewChildDocumentMenu);
diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js
index 9652512ca..9ac29d043 100644
--- a/app/scenes/Document/components/Header.js
+++ b/app/scenes/Document/components/Header.js
@@ -7,11 +7,12 @@ import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { NewDocumentIcon } from 'outline-icons';
 import Document from 'models/Document';
-import { documentEditUrl, documentNewUrl } from 'utils/routeHelpers';
+import { documentEditUrl } from 'utils/routeHelpers';
 
 import Flex from 'shared/components/Flex';
 import Breadcrumb from './Breadcrumb';
 import DocumentMenu from 'menus/DocumentMenu';
+import NewChildDocumentMenu from 'menus/NewChildDocumentMenu';
 import DocumentShare from 'scenes/DocumentShare';
 import Modal from 'components/Modal';
 import Collaborators from 'components/Collaborators';
@@ -52,10 +53,6 @@ class Header extends React.Component<Props> {
 
   handleScroll = throttle(this.updateIsScrolled, 50);
 
-  handleNewDocument = () => {
-    this.props.history.push(documentNewUrl(this.props.document));
-  };
-
   handleEdit = () => {
     this.props.history.push(documentEditUrl(this.props.document));
   };
@@ -181,9 +178,10 @@ class Header extends React.Component<Props> {
               <React.Fragment>
                 <Separator />
                 <Action>
-                  <a onClick={this.handleNewDocument}>
-                    <NewDocumentIcon />
-                  </a>
+                  <NewChildDocumentMenu
+                    document={document}
+                    label={<NewDocumentIcon />}
+                  />
                 </Action>
               </React.Fragment>
             )}