Even less history passing, fix global styles warning in dev

app/components/DropToImport.js

@@ -2,8 +2,8 @@
 import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
+import { Redirect } from 'react-router-dom';
 import { createGlobalStyle } from 'styled-components';
-import { omit } from 'lodash';
 import invariant from 'invariant';
 import importFile from 'utils/importFile';
 import Dropzone from 'react-dropzone';
@@ -18,11 +18,11 @@ type Props = {
   rejectClassName?: string,
   documents: DocumentsStore,
   disabled: boolean,
-  history: Object,
 };
 
-const GlobalStyles = createGlobalStyle`
+export const GlobalStyles = createGlobalStyle`
   .activeDropZone {
+    border-radius: 4px;
     background: ${props => props.theme.slateDark};
     svg { fill: ${props => props.theme.white}; }
   }
@@ -35,6 +35,7 @@ const GlobalStyles = createGlobalStyle`
 @observer
 class DropToImport extends React.Component<Props> {
   @observable isImporting: boolean = false;
+  @observable redirectTo: ?string;
 
   onDropAccepted = async (files = []) => {
     this.isImporting = true;
@@ -59,7 +60,7 @@ class DropToImport extends React.Component<Props> {
         });
 
         if (redirect) {
-          this.props.history.push(doc.url);
+          this.redirectTo = doc.url;
         }
       }
     } finally {
@@ -68,16 +69,15 @@ class DropToImport extends React.Component<Props> {
   };
 
   render() {
-    const props = omit(
+    const {
-      this.props,
+      documentId,
-      'history',
+      collectionId,
-      'documentId',
+      documents,
-      'collectionId',
+      disabled,
-      'documents',
+      ...rest
-      'disabled',
+    } = this.props;
-      'menuOpen'
-    );
 
+    if (this.redirectTo) return <Redirect to={this.redirectTo} />;
     if (this.props.disabled) return this.props.children;
 
     return (
@@ -88,9 +88,8 @@ class DropToImport extends React.Component<Props> {
         disableClick
         disablePreview
         multiple
-        {...props}
+        {...rest}
       >
-        <GlobalStyles />
         {this.isImporting && <LoadingIndicator />}
         {this.props.children}
       </Dropzone>

app/components/Layout.js

@@ -12,6 +12,7 @@ import Flex from 'shared/components/Flex';
 import { documentEditUrl, homeUrl, searchUrl } from 'utils/routeHelpers';
 
 import { LoadingIndicatorBar } from 'components/LoadingIndicator';
+import { GlobalStyles } from 'components/DropToImport';
 import Sidebar from 'components/Sidebar';
 import SettingsSidebar from 'components/Sidebar/Settings';
 import Modals from 'components/Modals';
@@ -103,6 +104,7 @@ class Layout extends React.Component<Props> {
           </Content>
         </Flex>
         <Modals ui={ui} />
+        <GlobalStyles />
       </Container>
     );
   }

app/components/Sidebar/components/CollectionLink.js

@@ -13,7 +13,6 @@ import DropToImport from 'components/DropToImport';
 import Flex from 'shared/components/Flex';
 
 type Props = {
-  history: Object,
   collection: Collection,
   ui: UiStore,
   activeDocument: ?Document,
@@ -25,19 +24,12 @@ class CollectionLink extends React.Component<Props> {
   @observable menuOpen = false;
 
   render() {
-    const {
+    const { collection, activeDocument, prefetchDocument, ui } = this.props;
-      history,
-      collection,
-      activeDocument,
-      prefetchDocument,
-      ui,
-    } = this.props;
     const expanded = collection.id === ui.activeCollectionId;
 
     return (
       <DropToImport
         key={collection.id}
-        history={history}
         collectionId={collection.id}
         activeClassName="activeDropZone"
       >
@@ -72,7 +64,6 @@ class CollectionLink extends React.Component<Props> {
             {collection.documents.map(document => (
               <DocumentLink
                 key={document.id}
-                history={history}
                 document={document}
                 activeDocument={activeDocument}
                 prefetchDocument={prefetchDocument}

app/components/Sidebar/components/DocumentLink.js

@@ -10,7 +10,6 @@ import { type NavigationNode } from 'types';
 
 type Props = {
   document: NavigationNode,
-  history: Object,
   activeDocument: ?Document,
   activeDocumentRef?: (?HTMLElement) => *,
   prefetchDocument: (documentId: string) => Promise<void>,
@@ -34,7 +33,6 @@ class DocumentLink extends React.Component<Props> {
       activeDocumentRef,
       prefetchDocument,
       depth,
-      history,
     } = this.props;
 
     const isActiveDocument =
@@ -55,11 +53,7 @@ class DocumentLink extends React.Component<Props> {
         ref={isActiveDocument ? activeDocumentRef : undefined}
         onMouseEnter={this.handleMouseEnter}
       >
-        <DropToImport
+        <DropToImport documentId={document.id} activeClassName="activeDropZone">
-          history={history}
-          documentId={document.id}
-          activeClassName="activeDropZone"
-        >
           <SidebarLink
             to={{
               pathname: document.url,
@@ -74,7 +68,6 @@ class DocumentLink extends React.Component<Props> {
                 {document.children.map(childDocument => (
                   <DocumentLink
                     key={childDocument.id}
-                    history={history}
                     document={childDocument}
                     activeDocument={activeDocument}
                     prefetchDocument={prefetchDocument}

app/scenes/Document/Document.js

@@ -357,7 +357,6 @@ class DocumentScene extends React.Component<Props> {
                 isSaving={this.isSaving}
                 isPublishing={this.isPublishing}
                 savingIsDisabled={!document.allowSave}
-                history={this.props.history}
                 onDiscard={this.onDiscard}
                 onSave={this.onSave}
               />

app/scenes/Document/components/Header.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { throttle } from 'lodash';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
+import { Redirect } from 'react-router-dom';
 import styled from 'styled-components';
 import breakpoint from 'styled-components-breakpoint';
 import { NewDocumentIcon } from 'outline-icons';
@@ -33,7 +34,6 @@ type Props = {
     publish?: boolean,
     autosave?: boolean,
   }) => *,
-  history: Object,
   auth: AuthStore,
 };
 
@@ -41,6 +41,7 @@ type Props = {
 class Header extends React.Component<Props> {
   @observable isScrolled = false;
   @observable showShareModal = false;
+  @observable redirectTo: ?string;
 
   componentDidMount() {
     window.addEventListener('scroll', this.handleScroll);
@@ -57,7 +58,7 @@ class Header extends React.Component<Props> {
   handleScroll = throttle(this.updateIsScrolled, 50);
 
   handleEdit = () => {
-    this.props.history.push(documentEditUrl(this.props.document));
+    this.redirectTo = documentEditUrl(this.props.document);
   };
 
   handleSave = () => {
@@ -86,6 +87,8 @@ class Header extends React.Component<Props> {
   };
 
   render() {
+    if (this.redirectTo) return <Redirect to={this.redirectTo} />;
+
     const {
       document,
       isEditing,