Moved Layout to be a wrapper for routes

frontend/components/Layout/Layout.js

@@ -154,8 +154,12 @@ const MenuLink = styled(Link)`
 `;
 
 const Content = styled(Flex)`
-  height: 100%;
   overflow: scroll;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 250px;
 `;
 
 const Sidebar = styled(Flex)`

frontend/index.js

@@ -31,6 +31,8 @@ import Flatpage from 'scenes/Flatpage';
 import ErrorAuth from 'scenes/ErrorAuth';
 import Error404 from 'scenes/Error404';
 
+import Layout from 'components/Layout';
+
 import flatpages from 'static/flatpages';
 
 let DevTools;
@@ -94,33 +96,35 @@ render(
           <Route exact path="/auth/error" component={ErrorAuth} />
 
           <Auth>
-            <Switch>
-              <Route exact path="/dashboard" component={Dashboard} />
-              <Route exact path="/collections/:id" component={Collection} />
-              <Route exact path="/d/:id" component={Document} />
+            <Layout>
+              <Switch>
+                <Route exact path="/dashboard" component={Dashboard} />
+                <Route exact path="/collections/:id" component={Collection} />
+                <Route exact path="/d/:id" component={Document} />
 
-              <Route exact path="/d/:id/:edit" component={Document} />
-              <Route
-                exact
-                path="/collections/:id/new"
-                component={DocumentNew}
-              />
-              <Route exact path="/d/:id/new" component={DocumentNewChild} />
+                <Route exact path="/d/:id/:edit" component={Document} />
+                <Route
+                  exact
+                  path="/collections/:id/new"
+                  component={DocumentNew}
+                />
+                <Route exact path="/d/:id/new" component={DocumentNewChild} />
 
-              <Route exact path="/search" component={Search} />
-              <Route exact path="/search/:query" component={Search} />
-              <Route exact path="/settings" component={Settings} />
+                <Route exact path="/search" component={Search} />
+                <Route exact path="/search/:query" component={Search} />
+                <Route exact path="/settings" component={Settings} />
 
-              <Route
-                exact
-                path="/keyboard-shortcuts"
-                component={KeyboardShortcuts}
-              />
-              <Route exact path="/developers" component={Api} />
+                <Route
+                  exact
+                  path="/keyboard-shortcuts"
+                  component={KeyboardShortcuts}
+                />
+                <Route exact path="/developers" component={Api} />
 
-              <Route path="/404" component={Error404} />
-              <Route component={notFoundSearch} />
-            </Switch>
+                <Route path="/404" component={Error404} />
+                <Route component={notFoundSearch} />
+              </Switch>
+            </Layout>
           </Auth>
         </Switch>
       </Router>

frontend/scenes/Collection/Collection.js

@@ -7,7 +7,6 @@ import _ from 'lodash';
 import CollectionsStore from 'stores/CollectionsStore';
 import CollectionStore from './CollectionStore';
 
-import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import PreviewLoading from 'components/PreviewLoading';
 
@@ -31,15 +30,11 @@ type Props = {
   };
 
   render() {
-    return (
-      <Layout>
-        {this.store.redirectUrl
-          ? <Redirect to={this.store.redirectUrl} />
-          : <CenteredContent>
-              <PreviewLoading />
-            </CenteredContent>}
-      </Layout>
-    );
+    return this.store.redirectUrl
+      ? <Redirect to={this.store.redirectUrl} />
+      : <CenteredContent>
+          <PreviewLoading />
+        </CenteredContent>;
   }
 }
 export default inject('collections')(Collection);

frontend/scenes/Dashboard/Dashboard.js

@@ -5,7 +5,6 @@ import { Flex } from 'reflexbox';
 
 import CollectionsStore from 'stores/CollectionsStore';
 
-import Layout from 'components/Layout';
 import Collection from 'components/Collection';
 import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
@@ -21,17 +20,15 @@ type Props = {
     const { collections } = this.props;
 
     return (
-      <Layout>
-        <CenteredContent>
-          <Flex column auto>
-            {!collections.isLoaded
-              ? <PreviewLoading />
-              : collections.data.map(collection => (
-                  <Collection key={collection.id} data={collection} />
-                ))}
-          </Flex>
-        </CenteredContent>
-      </Layout>
+      <CenteredContent>
+        <Flex column auto>
+          {!collections.isLoaded
+            ? <PreviewLoading />
+            : collections.data.map(collection => (
+                <Collection key={collection.id} data={collection} />
+              ))}
+        </Flex>
+      </CenteredContent>
     );
   }
 }

frontend/scenes/Document/Document.js

@@ -9,10 +9,9 @@ import { Flex } from 'reflexbox';
 import UiStore from 'stores/UiStore';
 
 import DocumentStore from './DocumentStore';
-import Breadcrumbs from './components/Breadcrumbs';
-import Menu from './components/Menu';
+// import Menu from './components/Menu';
 import Editor from 'components/Editor';
-import Layout, { HeaderAction, SaveAction } from 'components/Layout';
+// import { HeaderAction, SaveAction } from 'components/Layout';
 import PublishingInfo from 'components/PublishingInfo';
 import PreviewLoading from 'components/PreviewLoading';
 import CenteredContent from 'components/CenteredContent';
@@ -47,9 +46,11 @@ type Props = {
     if (this.props.newDocument) {
       this.store.collectionId = this.props.match.params.id;
       this.store.newDocument = true;
+      this.props.ui.enableEditMode();
     } else if (this.props.match.params.edit) {
       this.store.documentId = this.props.match.params.id;
       this.store.fetchDocument();
+      this.props.ui.enableEditMode();
     } else if (this.props.newChildDocument) {
       this.store.documentId = this.props.match.params.id;
       this.store.newChildDocument = true;
@@ -76,6 +77,7 @@ type Props = {
     } else {
       this.store.updateDocument(options);
     }
+    this.props.ui.disableEditMode();
   };
 
   onImageUploadStart = () => {
@@ -91,18 +93,18 @@ type Props = {
   };
 
   render() {
-    const isNew = this.props.newDocument || this.props.newChildDocument;
+    // const isNew = this.props.newDocument || this.props.newChildDocument;
     const isEditing = this.props.match.params.edit;
-    const title = (
+    /*const title = (
       <Breadcrumbs
         document={this.store.document}
         pathToDocument={this.store.pathToDocument}
       />
-    );
+    );*/
 
     const titleText = this.store.document && get(this.store, 'document.title');
 
-    const actions = (
+    /*const actions = (
       <Flex>
         <HeaderAction>
           {isEditing
@@ -115,48 +117,43 @@ type Props = {
         </HeaderAction>
         <Menu store={this.store} document={this.store.document} />
       </Flex>
-    );
+    );*/
+
+    // actions={actions}
+    // title={title}
+    // loading={this.store.isSaving || this.store.isUploading}
+    // search={false}
+    // fixed
 
     return (
-      <Layout
-        actions={actions}
-        title={title}
-        loading={this.store.isSaving || this.store.isUploading}
-        search={false}
-        fixed
-      >
-        <PagePadding>
-          <PageTitle title={titleText} />
-          <Prompt
-            when={this.store.hasPendingChanges}
-            message={DISCARD_CHANGES}
-          />
-          {this.store.isFetching &&
-            <CenteredContent>
-              <PreviewLoading />
-            </CenteredContent>}
-          {this.store.document &&
-            <Container>
-              {!isEditing &&
-                <PublishingInfo
-                  collaborators={this.store.document.collaborators}
-                  createdAt={this.store.document.createdAt}
-                  createdBy={this.store.document.createdBy}
-                  updatedAt={this.store.document.updatedAt}
-                  updatedBy={this.store.document.updatedBy}
-                />}
-              <Editor
-                text={this.store.document.text}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.store.updateText}
-                onSave={this.onSave}
-                onCancel={this.onCancel}
-                readOnly={!isEditing}
-              />
-            </Container>}
-        </PagePadding>
-      </Layout>
+      <PagePadding>
+        <PageTitle title={titleText} />
+        <Prompt when={this.store.hasPendingChanges} message={DISCARD_CHANGES} />
+        {this.store.isFetching &&
+          <CenteredContent>
+            <PreviewLoading />
+          </CenteredContent>}
+        {this.store.document &&
+          <Container>
+            {!isEditing &&
+              <PublishingInfo
+                collaborators={this.store.document.collaborators}
+                createdAt={this.store.document.createdAt}
+                createdBy={this.store.document.createdBy}
+                updatedAt={this.store.document.updatedAt}
+                updatedBy={this.store.document.updatedBy}
+              />}
+            <Editor
+              text={this.store.document.text}
+              onImageUploadStart={this.onImageUploadStart}
+              onImageUploadStop={this.onImageUploadStop}
+              onChange={this.store.updateText}
+              onSave={this.onSave}
+              onCancel={this.onCancel}
+              readOnly={!isEditing}
+            />
+          </Container>}
+      </PagePadding>
     );
   }
 }

frontend/scenes/Error404/Error404.js

@@ -2,23 +2,20 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
 class Error404 extends React.Component {
   render() {
     return (
-      <Layout>
+      <CenteredContent>
         <PageTitle title="Not found" />
-        <CenteredContent>
-          <h1>Not Found</h1>
+        <h1>Not Found</h1>
 
-          <p>We're unable to find the page you're accessing.</p>
+        <p>We're unable to find the page you're accessing.</p>
 
-          <p>Maybe you want to try <Link to="/search">search</Link> instead?</p>
-        </CenteredContent>
-      </Layout>
+        <p>Maybe you want to try <Link to="/search">search</Link> instead?</p>
+      </CenteredContent>
     );
   }
 }

frontend/scenes/ErrorAuth/ErrorAuth.js

@@ -2,23 +2,20 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
 class ErrorAuth extends React.Component {
   render() {
     return (
-      <Layout>
+      <CenteredContent>
         <PageTitle title="Authentication error" />
-        <CenteredContent>
-          <h1>Authentication failed</h1>
+        <h1>Authentication failed</h1>
 
-          <p>
-            We were unable to log you in. <Link to="/">Please try again.</Link>
-          </p>
-        </CenteredContent>
-      </Layout>
+        <p>
+          We were unable to log you in. <Link to="/">Please try again.</Link>
+        </p>
+      </CenteredContent>
     );
   }
 }

frontend/scenes/Home/Home.js

@@ -7,7 +7,6 @@ import styled from 'styled-components';
 
 import AuthStore from 'stores/AuthStore';
 
-import Layout from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
 import Alert from 'components/Alert';
@@ -40,30 +39,28 @@ type Props = {
 
     return (
       <Flex auto>
-        <Layout notifications={this.notifications}>
-          {this.props.auth.authenticated && <Redirect to="/dashboard" />}
+        {this.props.auth.authenticated && <Redirect to="/dashboard" />}
 
-          <CenteredContent>
-            {showLandingPageCopy &&
-              <div>
-                <Title>Simple, fast, markdown.</Title>
-                <Copy>
-                  We're building a modern wiki for engineering teams.
-                </Copy>
-              </div>}
+        <CenteredContent>
+          {showLandingPageCopy &&
             <div>
-              <SlackAuthLink redirectUri={`${BASE_URL}/auth/slack`}>
-                <img
-                  alt="Sign in with Slack"
-                  height="40"
-                  width="172"
-                  src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
-                  srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
-                />
-              </SlackAuthLink>
-            </div>
-          </CenteredContent>
-        </Layout>
+              <Title>Simple, fast, markdown.</Title>
+              <Copy>
+                We're building a modern wiki for engineering teams.
+              </Copy>
+            </div>}
+          <div>
+            <SlackAuthLink redirectUri={`${BASE_URL}/auth/slack`}>
+              <img
+                alt="Sign in with Slack"
+                height="40"
+                width="172"
+                src="https://platform.slack-edge.com/img/sign_in_with_slack.png"
+                srcSet="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"
+              />
+            </SlackAuthLink>
+          </div>
+        </CenteredContent>
       </Flex>
     );
   }

frontend/scenes/Search/Search.js

@@ -12,7 +12,6 @@ import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
 import SearchField from './components/SearchField';
 import SearchStore from './SearchStore';
 
-import Layout, { Title } from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import DocumentPreview from 'components/DocumentPreview';
 import PageTitle from 'components/PageTitle';
@@ -83,41 +82,38 @@ const ResultsWrapper = styled(Flex)`
 
   render() {
     const query = this.props.match.params.query;
-    const title = <Title content="Search" />;
     const hasResults = this.store.documents.length > 0;
 
     return (
-      <Layout title={title} search={false} loading={this.store.isFetching}>
+      <Container auto>
         <PageTitle title="Search" />
-        <Container auto>
-          {this.props.notFound &&
-            <div>
-              <h1>Not Found</h1>
-              <p>We're unable to find the page you're accessing.</p>
-              <hr />
-            </div>}
-          <ResultsWrapper pinToTop={hasResults} column auto>
-            <SearchField
-              searchTerm={this.store.searchTerm}
-              onKeyDown={this.handleKeyDown}
-              onChange={this.updateQuery}
-              value={query || ''}
-            />
-            <ArrowKeyNavigation
-              mode={ArrowKeyNavigation.mode.VERTICAL}
-              defaultActiveChildIndex={0}
-            >
-              {this.store.documents.map((document, index) => (
-                <DocumentPreview
-                  innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
-                  key={document.id}
-                  document={document}
-                />
-              ))}
-            </ArrowKeyNavigation>
-          </ResultsWrapper>
-        </Container>
-      </Layout>
+        {this.props.notFound &&
+          <div>
+            <h1>Not Found</h1>
+            <p>We're unable to find the page you're accessing.</p>
+            <hr />
+          </div>}
+        <ResultsWrapper pinToTop={hasResults} column auto>
+          <SearchField
+            searchTerm={this.store.searchTerm}
+            onKeyDown={this.handleKeyDown}
+            onChange={this.updateQuery}
+            value={query || ''}
+          />
+          <ArrowKeyNavigation
+            mode={ArrowKeyNavigation.mode.VERTICAL}
+            defaultActiveChildIndex={0}
+          >
+            {this.store.documents.map((document, index) => (
+              <DocumentPreview
+                innerRef={ref => index === 0 && this.setFirstDocumentRef(ref)}
+                key={document.id}
+                document={document}
+              />
+            ))}
+          </ArrowKeyNavigation>
+        </ResultsWrapper>
+      </Container>
     );
   }
 }

frontend/scenes/Settings/Settings.js

@@ -8,7 +8,6 @@ import ApiKeyRow from './components/ApiKeyRow';
 import styles from './Settings.scss';
 import SettingsStore from './SettingsStore';
 
-import Layout, { Title } from 'components/Layout';
 import CenteredContent from 'components/CenteredContent';
 import SlackAuthLink from 'components/SlackAuthLink';
 import PageTitle from 'components/PageTitle';
@@ -22,72 +21,69 @@ import PageTitle from 'components/PageTitle';
   }
 
   render() {
-    const title = <Title content="Settings" />;
     const showSlackSettings = DEPLOYMENT === 'hosted';
 
     return (
-      <Layout title={title} search={false} loading={this.store.isFetching}>
+      <CenteredContent>
         <PageTitle title="Settings" />
-        <CenteredContent>
-          {showSlackSettings &&
-            <div className={styles.section}>
-              <h2 className={styles.sectionHeader}>Slack</h2>
-              <p>
-                Connect Atlas to your Slack to instantly search for your documents
-                using <code>/atlas</code> command.
-              </p>
-
-              <SlackAuthLink
-                scopes={['commands']}
-                redirectUri={`${BASE_URL}/auth/slack/commands`}
-              >
-                <img
-                  alt="Add to Slack"
-                  height="40"
-                  width="139"
-                  src="https://platform.slack-edge.com/img/add_to_slack.png"
-                  srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"
-                />
-              </SlackAuthLink>
-            </div>}
-
+        {showSlackSettings &&
           <div className={styles.section}>
-            <h2 className={styles.sectionHeader}>API access</h2>
+            <h2 className={styles.sectionHeader}>Slack</h2>
             <p>
-              Create API tokens to hack on your Atlas.
-              Learn more in <a href>API documentation</a>.
+              Connect Atlas to your Slack to instantly search for your documents
+              using <code>/atlas</code> command.
             </p>
 
-            {this.store.apiKeys &&
-              <table className={styles.apiKeyTable}>
-                <tbody>
-                  {this.store.apiKeys &&
-                    this.store.apiKeys.map(key => (
-                      <ApiKeyRow
-                        id={key.id}
-                        key={key.id}
-                        name={key.name}
-                        secret={key.secret}
-                        onDelete={this.store.deleteApiKey}
-                      />
-                    ))}
-                </tbody>
-              </table>}
-
-            <div>
-              <InlineForm
-                placeholder="Token name"
-                buttonLabel="Create token"
-                name="inline_form"
-                value={this.store.keyName}
-                onChange={this.store.setKeyName}
-                onSubmit={this.store.createApiKey}
-                disabled={this.store.isFetching}
+            <SlackAuthLink
+              scopes={['commands']}
+              redirectUri={`${BASE_URL}/auth/slack/commands`}
+            >
+              <img
+                alt="Add to Slack"
+                height="40"
+                width="139"
+                src="https://platform.slack-edge.com/img/add_to_slack.png"
+                srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"
               />
-            </div>
+            </SlackAuthLink>
+          </div>}
+
+        <div className={styles.section}>
+          <h2 className={styles.sectionHeader}>API access</h2>
+          <p>
+            Create API tokens to hack on your Atlas.
+            Learn more in <a href>API documentation</a>.
+          </p>
+
+          {this.store.apiKeys &&
+            <table className={styles.apiKeyTable}>
+              <tbody>
+                {this.store.apiKeys &&
+                  this.store.apiKeys.map(key => (
+                    <ApiKeyRow
+                      id={key.id}
+                      key={key.id}
+                      name={key.name}
+                      secret={key.secret}
+                      onDelete={this.store.deleteApiKey}
+                    />
+                  ))}
+              </tbody>
+            </table>}
+
+          <div>
+            <InlineForm
+              placeholder="Token name"
+              buttonLabel="Create token"
+              name="inline_form"
+              value={this.store.keyName}
+              onChange={this.store.setKeyName}
+              onSubmit={this.store.createApiKey}
+              disabled={this.store.isFetching}
+            />
           </div>
-        </CenteredContent>
-      </Layout>
+        </div>
+      </CenteredContent>
     );
   }
 }

frontend/stores/UiStore.js

@@ -3,6 +3,7 @@ import { observable, action } from 'mobx';
 
 class UiStore {
   @observable activeCollection: ?string;
+  @observable editMode: boolean = false;
 
   /* Actions */
 
@@ -13,6 +14,14 @@ class UiStore {
   @action clearActiveCollection = (): void => {
     this.activeCollection = null;
   };
+
+  @action enableEditMode() {
+    this.editMode = true;
+  }
+
+  @action disableEditMode() {
+    this.editMode = false;
+  }
 }
 
 export default UiStore;