chore: Move to prettier standard double quotes (#1309)

2020-06-20 13:59:15 -07:00
parent 2a3b9e2104
commit f43deb7940
444 changed files with 5988 additions and 5977 deletions
--- a/app/scenes/Settings/Details.js
+++ b/app/scenes/Settings/Details.js
@@ -1,18 +1,18 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import styled from 'styled-components';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import styled from "styled-components";

-import AuthStore from 'stores/AuthStore';
-import UiStore from 'stores/UiStore';
-import ImageUpload from './components/ImageUpload';
-import Input, { LabelText } from 'components/Input';
-import Button from 'components/Button';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import Flex from 'shared/components/Flex';
+import AuthStore from "stores/AuthStore";
+import UiStore from "stores/UiStore";
+import ImageUpload from "./components/ImageUpload";
+import Input, { LabelText } from "components/Input";
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import Flex from "shared/components/Flex";

 type Props = {
  auth: AuthStore,
@@ -49,7 +49,7 @@ class Details extends React.Component<Props> {
        avatarUrl: this.avatarUrl,
        subdomain: this.subdomain,
      });
-      this.props.ui.showToast('Settings saved');
+      this.props.ui.showToast("Settings saved");
    } catch (err) {
      this.props.ui.showToast(err.message);
    }
@@ -68,7 +68,7 @@ class Details extends React.Component<Props> {
  };

  handleAvatarError = (error: ?string) => {
-    this.props.ui.showToast(error || 'Unable to upload new logo');
+    this.props.ui.showToast(error || "Unable to upload new logo");
  };

  get isValid() {
@@ -120,7 +120,7 @@ class Details extends React.Component<Props> {
              <Input
                label="Subdomain"
                name="subdomain"
-                value={this.subdomain || ''}
+                value={this.subdomain || ""}
                onChange={this.handleSubdomainChange}
                autoComplete="off"
                minLength={4}
@@ -129,14 +129,14 @@ class Details extends React.Component<Props> {
              />
              {this.subdomain && (
                <HelpText small>
-                  Your knowledgebase will be accessible at{' '}
+                  Your knowledgebase will be accessible at{" "}
                  <strong>{this.subdomain}.getoutline.com</strong>
                </HelpText>
              )}
            </React.Fragment>
          )}
          <Button type="submit" disabled={isSaving || !this.isValid}>
-            {isSaving ? 'Saving…' : 'Save'}
+            {isSaving ? "Saving…" : "Save"}
          </Button>
        </form>
      </CenteredContent>
@@ -183,4 +183,4 @@ const Avatar = styled.img`
  ${avatarStyles};
 `;

-export default inject('auth', 'ui')(Details);
+export default inject("auth", "ui")(Details);
--- a/app/scenes/Settings/Events.js
+++ b/app/scenes/Settings/Events.js
@@ -1,19 +1,19 @@
 // @flow
-import * as React from 'react';
-import { observable, action } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { Waypoint } from 'react-waypoint';
+import * as React from "react";
+import { observable, action } from "mobx";
+import { observer, inject } from "mobx-react";
+import { Waypoint } from "react-waypoint";

-import { DEFAULT_PAGINATION_LIMIT } from 'stores/BaseStore';
-import EventsStore from 'stores/EventsStore';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import List from 'components/List';
-import Tabs from 'components/Tabs';
-import Tab from 'components/Tab';
-import { ListPlaceholder } from 'components/LoadingPlaceholder';
-import EventListItem from './components/EventListItem';
+import { DEFAULT_PAGINATION_LIMIT } from "stores/BaseStore";
+import EventsStore from "stores/EventsStore";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import List from "components/List";
+import Tabs from "components/Tabs";
+import Tab from "components/Tab";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
+import EventListItem from "./components/EventListItem";

 type Props = {
  events: EventsStore,
@@ -96,4 +96,4 @@ class Events extends React.Component<Props> {
  }
 }

-export default inject('events')(Events);
+export default inject("events")(Events);
--- a/app/scenes/Settings/Export.js
+++ b/app/scenes/Settings/Export.js
@@ -1,15 +1,15 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import AuthStore from 'stores/AuthStore';
-import CollectionsStore from 'stores/CollectionsStore';
-import UiStore from 'stores/UiStore';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import AuthStore from "stores/AuthStore";
+import CollectionsStore from "stores/CollectionsStore";
+import UiStore from "stores/UiStore";

-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import Button from 'components/Button';
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import Button from "components/Button";

 type Props = {
  auth: AuthStore,
@@ -29,7 +29,7 @@ class Export extends React.Component<Props> {
    try {
      await this.props.collections.export();
      this.isExporting = true;
-      this.props.ui.showToast('Export in progress…');
+      this.props.ui.showToast("Export in progress…");
    } finally {
      this.isLoading = false;
    }
@@ -60,12 +60,12 @@ class Export extends React.Component<Props> {
          primary
        >
          {this.isExporting
-            ? 'Export Requested'
-            : this.isLoading ? 'Requesting Export…' : 'Export All Data'}
+            ? "Export Requested"
+            : this.isLoading ? "Requesting Export…" : "Export All Data"}
        </Button>
      </CenteredContent>
    );
  }
 }

-export default inject('auth', 'ui', 'collections')(Export);
+export default inject("auth", "ui", "collections")(Export);
--- a/app/scenes/Settings/Groups.js
+++ b/app/scenes/Settings/Groups.js
@@ -1,27 +1,27 @@
 // @flow
-import * as React from 'react';
-import invariant from 'invariant';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { PlusIcon } from 'outline-icons';
+import * as React from "react";
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import { PlusIcon } from "outline-icons";

-import Empty from 'components/Empty';
-import { ListPlaceholder } from 'components/LoadingPlaceholder';
-import Modal from 'components/Modal';
-import Button from 'components/Button';
-import GroupNew from 'scenes/GroupNew';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import GroupListItem from 'components/GroupListItem';
-import List from 'components/List';
-import Tabs from 'components/Tabs';
-import Tab from 'components/Tab';
-import GroupMenu from 'menus/GroupMenu';
+import Empty from "components/Empty";
+import { ListPlaceholder } from "components/LoadingPlaceholder";
+import Modal from "components/Modal";
+import Button from "components/Button";
+import GroupNew from "scenes/GroupNew";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import GroupListItem from "components/GroupListItem";
+import List from "components/List";
+import Tabs from "components/Tabs";
+import Tab from "components/Tab";
+import GroupMenu from "menus/GroupMenu";

-import AuthStore from 'stores/AuthStore';
-import GroupsStore from 'stores/GroupsStore';
-import PoliciesStore from 'stores/PoliciesStore';
+import AuthStore from "stores/AuthStore";
+import GroupsStore from "stores/GroupsStore";
+import PoliciesStore from "stores/PoliciesStore";

 type Props = {
  auth: AuthStore,
@@ -51,8 +51,8 @@ class Groups extends React.Component<Props> {
    const currentUser = auth.user;
    const team = auth.team;

-    invariant(currentUser, 'User should exist');
-    invariant(team, 'Team should exist');
+    invariant(currentUser, "User should exist");
+    invariant(team, "Team should exist");

    const showLoading = groups.isFetching && !groups.orderedData.length;
    const showEmpty = groups.isLoaded && !groups.orderedData.length;
@@ -111,4 +111,4 @@ class Groups extends React.Component<Props> {
  }
 }

-export default inject('auth', 'groups', 'policies')(Groups);
+export default inject("auth", "groups", "policies")(Groups);
--- a/app/scenes/Settings/Notifications.js
+++ b/app/scenes/Settings/Notifications.js
@@ -1,19 +1,19 @@
 // @flow
-import * as React from 'react';
-import { debounce } from 'lodash';
-import { observer, inject } from 'mobx-react';
-import styled from 'styled-components';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import Input from 'components/Input';
-import Subheading from 'components/Subheading';
-import NotificationListItem from './components/NotificationListItem';
-import Notice from 'shared/components/Notice';
+import * as React from "react";
+import { debounce } from "lodash";
+import { observer, inject } from "mobx-react";
+import styled from "styled-components";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import Input from "components/Input";
+import Subheading from "components/Subheading";
+import NotificationListItem from "./components/NotificationListItem";
+import Notice from "shared/components/Notice";

-import UiStore from 'stores/UiStore';
-import AuthStore from 'stores/AuthStore';
-import NotificationSettingsStore from 'stores/NotificationSettingsStore';
+import UiStore from "stores/UiStore";
+import AuthStore from "stores/AuthStore";
+import NotificationSettingsStore from "stores/NotificationSettingsStore";

 type Props = {
  ui: UiStore,
@@ -23,33 +23,33 @@ type Props = {

 const options = [
  {
-    event: 'documents.publish',
-    title: 'Document published',
-    description: 'Receive a notification whenever a new document is published',
+    event: "documents.publish",
+    title: "Document published",
+    description: "Receive a notification whenever a new document is published",
  },
  {
-    event: 'documents.update',
-    title: 'Document updated',
-    description: 'Receive a notification when a document you created is edited',
+    event: "documents.update",
+    title: "Document updated",
+    description: "Receive a notification when a document you created is edited",
  },
  {
-    event: 'collections.create',
-    title: 'Collection created',
-    description: 'Receive a notification whenever a new collection is created',
+    event: "collections.create",
+    title: "Collection created",
+    description: "Receive a notification whenever a new collection is created",
  },
  {
    separator: true,
  },
  {
-    event: 'emails.onboarding',
-    title: 'Getting started',
+    event: "emails.onboarding",
+    title: "Getting started",
    description:
-      'Tips on getting started with Outline`s features and functionality',
+      "Tips on getting started with Outline`s features and functionality",
  },
  {
-    event: 'emails.features',
-    title: 'New features',
-    description: 'Receive an email when new features of note are added',
+    event: "emails.features",
+    title: "New features",
+    description: "Receive an email when new features of note are added",
  },
 ];

@@ -75,12 +75,12 @@ class Notifications extends React.Component<Props> {
  };

  showSuccessMessage = debounce(() => {
-    this.props.ui.showToast('Notifications saved');
+    this.props.ui.showToast("Notifications saved");
  }, 500);

  render() {
    const { notificationSettings, auth } = this.props;
-    const showSuccessNotice = window.location.search === '?success';
+    const showSuccessNotice = window.location.search === "?success";
    const { user, team } = auth;
    if (!team || !user) return null;

@@ -97,8 +97,8 @@ class Notifications extends React.Component<Props> {

        <HelpText>
          Manage when and where you receive email notifications from Outline.
-          Your email address can be updated in your{' '}
-          {team.slackConnected ? 'Slack' : 'Google'} account.
+          Your email address can be updated in your{" "}
+          {team.slackConnected ? "Slack" : "Google"} account.
        </HelpText>

        <Input
@@ -137,4 +137,4 @@ const Separator = styled.hr`
  padding-bottom: 12px;
 `;

-export default inject('notificationSettings', 'auth', 'ui')(Notifications);
+export default inject("notificationSettings", "auth", "ui")(Notifications);
--- a/app/scenes/Settings/People.js
+++ b/app/scenes/Settings/People.js
@@ -1,25 +1,25 @@
 // @flow
-import * as React from 'react';
-import invariant from 'invariant';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { PlusIcon } from 'outline-icons';
+import * as React from "react";
+import invariant from "invariant";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import { PlusIcon } from "outline-icons";

-import Empty from 'components/Empty';
-import Modal from 'components/Modal';
-import Button from 'components/Button';
-import Invite from 'scenes/Invite';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import PaginatedList from 'components/PaginatedList';
-import Tabs, { Separator } from 'components/Tabs';
-import Tab from 'components/Tab';
-import UserListItem from './components/UserListItem';
+import Empty from "components/Empty";
+import Modal from "components/Modal";
+import Button from "components/Button";
+import Invite from "scenes/Invite";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import PaginatedList from "components/PaginatedList";
+import Tabs, { Separator } from "components/Tabs";
+import Tab from "components/Tab";
+import UserListItem from "./components/UserListItem";

-import AuthStore from 'stores/AuthStore';
-import UsersStore from 'stores/UsersStore';
-import PoliciesStore from 'stores/PoliciesStore';
+import AuthStore from "stores/AuthStore";
+import UsersStore from "stores/UsersStore";
+import PoliciesStore from "stores/PoliciesStore";

 type Props = {
  auth: AuthStore,
@@ -49,17 +49,17 @@ class People extends React.Component<Props> {
    const { filter } = match.params;
    const currentUser = auth.user;
    const team = auth.team;
-    invariant(currentUser, 'User should exist');
-    invariant(team, 'Team should exist');
+    invariant(currentUser, "User should exist");
+    invariant(team, "Team should exist");

    let users = this.props.users.active;
-    if (filter === 'all') {
+    if (filter === "all") {
      users = this.props.users.all;
-    } else if (filter === 'admins') {
+    } else if (filter === "admins") {
      users = this.props.users.admins;
-    } else if (filter === 'suspended') {
+    } else if (filter === "suspended") {
      users = this.props.users.suspended;
-    } else if (filter === 'invited') {
+    } else if (filter === "invited") {
      users = this.props.users.invited;
    }

@@ -136,4 +136,4 @@ class People extends React.Component<Props> {
  }
 }

-export default inject('auth', 'users', 'policies')(People);
+export default inject("auth", "users", "policies")(People);
--- a/app/scenes/Settings/Profile.js
+++ b/app/scenes/Settings/Profile.js
@@ -1,18 +1,18 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import styled from 'styled-components';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import styled from "styled-components";

-import AuthStore from 'stores/AuthStore';
-import UiStore from 'stores/UiStore';
-import ImageUpload from './components/ImageUpload';
-import Input, { LabelText } from 'components/Input';
-import Button from 'components/Button';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import UserDelete from 'scenes/UserDelete';
-import Flex from 'shared/components/Flex';
+import AuthStore from "stores/AuthStore";
+import UiStore from "stores/UiStore";
+import ImageUpload from "./components/ImageUpload";
+import Input, { LabelText } from "components/Input";
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import UserDelete from "scenes/UserDelete";
+import Flex from "shared/components/Flex";

 type Props = {
  auth: AuthStore,
@@ -45,7 +45,7 @@ class Profile extends React.Component<Props> {
      name: this.name,
      avatarUrl: this.avatarUrl,
    });
-    this.props.ui.showToast('Profile saved');
+    this.props.ui.showToast("Profile saved");
  };

  handleNameChange = (ev: SyntheticInputEvent<*>) => {
@@ -58,11 +58,11 @@ class Profile extends React.Component<Props> {
    await this.props.auth.updateUser({
      avatarUrl: this.avatarUrl,
    });
-    this.props.ui.showToast('Profile picture updated');
+    this.props.ui.showToast("Profile picture updated");
  };

  handleAvatarError = (error: ?string) => {
-    this.props.ui.showToast(error || 'Unable to upload new avatar');
+    this.props.ui.showToast(error || "Unable to upload new avatar");
  };

  toggleDeleteAccount = () => {
@@ -106,7 +106,7 @@ class Profile extends React.Component<Props> {
            short
          />
          <Button type="submit" disabled={isSaving || !this.isValid}>
-            {isSaving ? 'Saving…' : 'Save'}
+            {isSaving ? "Saving…" : "Save"}
          </Button>
        </form>

@@ -114,7 +114,7 @@ class Profile extends React.Component<Props> {
          <LabelText>Delete Account</LabelText>
          <p>
            You may delete your account at any time, note that this is
-            unrecoverable.{' '}
+            unrecoverable.{" "}
            <a onClick={this.toggleDeleteAccount}>Delete account</a>.
          </p>
        </DangerZone>
@@ -170,4 +170,4 @@ const Avatar = styled.img`
  ${avatarStyles};
 `;

-export default inject('auth', 'ui')(Profile);
+export default inject("auth", "ui")(Profile);
--- a/app/scenes/Settings/Security.js
+++ b/app/scenes/Settings/Security.js
@@ -1,15 +1,15 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import { debounce } from 'lodash';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import { debounce } from "lodash";

-import AuthStore from 'stores/AuthStore';
-import UiStore from 'stores/UiStore';
-import Checkbox from 'components/Checkbox';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
+import AuthStore from "stores/AuthStore";
+import UiStore from "stores/UiStore";
+import Checkbox from "components/Checkbox";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";

 type Props = {
  auth: AuthStore,
@@ -35,13 +35,13 @@ class Security extends React.Component<Props> {

  handleChange = async (ev: SyntheticInputEvent<*>) => {
    switch (ev.target.name) {
-      case 'sharing':
+      case "sharing":
        this.sharing = ev.target.checked;
        break;
-      case 'documentEmbeds':
+      case "documentEmbeds":
        this.documentEmbeds = ev.target.checked;
        break;
-      case 'guestSignin':
+      case "guestSignin":
        this.guestSignin = ev.target.checked;
        break;
      default:
@@ -56,7 +56,7 @@ class Security extends React.Component<Props> {
  };

  showSuccessMessage = debounce(() => {
-    this.props.ui.showToast('Settings saved');
+    this.props.ui.showToast("Settings saved");
  }, 500);

  render() {
@@ -77,7 +77,7 @@ class Security extends React.Component<Props> {
          checked={this.guestSignin}
          onChange={this.handleChange}
          note={`When enabled guests can be invited by email address and are able to signin without ${
-            team ? team.signinMethods : 'SSO'
+            team ? team.signinMethods : "SSO"
          }`}
        />
        <Checkbox
@@ -99,4 +99,4 @@ class Security extends React.Component<Props> {
  }
 }

-export default inject('auth', 'ui')(Security);
+export default inject("auth", "ui")(Security);
--- a/app/scenes/Settings/Shares.js
+++ b/app/scenes/Settings/Shares.js
@@ -1,17 +1,17 @@
 // @flow
-import * as React from 'react';
-import { observer, inject } from 'mobx-react';
-import { Link } from 'react-router-dom';
-import SharesStore from 'stores/SharesStore';
-import AuthStore from 'stores/AuthStore';
+import * as React from "react";
+import { observer, inject } from "mobx-react";
+import { Link } from "react-router-dom";
+import SharesStore from "stores/SharesStore";
+import AuthStore from "stores/AuthStore";

-import ShareListItem from './components/ShareListItem';
-import Empty from 'components/Empty';
-import List from 'components/List';
-import CenteredContent from 'components/CenteredContent';
-import Subheading from 'components/Subheading';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
+import ShareListItem from "./components/ShareListItem";
+import Empty from "components/Empty";
+import List from "components/List";
+import CenteredContent from "components/CenteredContent";
+import Subheading from "components/Subheading";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";

 type Props = {
  shares: SharesStore,
@@ -44,8 +44,8 @@ class Shares extends React.Component<Props> {
            <HelpText>
              {!canShareDocuments && (
                <strong>Sharing is currently disabled.</strong>
-              )}{' '}
-              You can turn {canShareDocuments ? 'off' : 'on'} public document
+              )}{" "}
+              You can turn {canShareDocuments ? "off" : "on"} public document
              sharing in <Link to="/settings/security">security settings</Link>.
            </HelpText>
          )}
@@ -64,4 +64,4 @@ class Shares extends React.Component<Props> {
  }
 }

-export default inject('shares', 'auth')(Shares);
+export default inject("shares", "auth")(Shares);
--- a/app/scenes/Settings/Slack.js
+++ b/app/scenes/Settings/Slack.js
@@ -1,19 +1,19 @@
 // @flow
-import * as React from 'react';
-import { inject, observer } from 'mobx-react';
-import { find } from 'lodash';
-import styled from 'styled-components';
+import * as React from "react";
+import { inject, observer } from "mobx-react";
+import { find } from "lodash";
+import styled from "styled-components";

-import Button from 'components/Button';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import SlackButton from './components/SlackButton';
-import CollectionsStore from 'stores/CollectionsStore';
-import IntegrationsStore from 'stores/IntegrationsStore';
-import AuthStore from 'stores/AuthStore';
-import Notice from 'shared/components/Notice';
-import getQueryVariable from 'shared/utils/getQueryVariable';
+import Button from "components/Button";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import SlackButton from "./components/SlackButton";
+import CollectionsStore from "stores/CollectionsStore";
+import IntegrationsStore from "stores/IntegrationsStore";
+import AuthStore from "stores/AuthStore";
+import Notice from "shared/components/Notice";
+import getQueryVariable from "shared/utils/getQueryVariable";

 type Props = {
  collections: CollectionsStore,
@@ -26,39 +26,39 @@ class Slack extends React.Component<Props> {
  error: ?string;

  componentDidMount() {
-    this.error = getQueryVariable('error');
+    this.error = getQueryVariable("error");
    this.props.collections.fetchPage({ limit: 100 });
    this.props.integrations.fetchPage();
  }

  get commandIntegration() {
    return find(this.props.integrations.slackIntegrations, {
-      type: 'command',
+      type: "command",
    });
  }

  render() {
    const { collections, integrations, auth } = this.props;
-    const teamId = auth.team ? auth.team.id : '';
+    const teamId = auth.team ? auth.team.id : "";

    return (
      <CenteredContent>
        <PageTitle title="Slack" />
        <h1>Slack</h1>
-        {this.error === 'access_denied' && (
+        {this.error === "access_denied" && (
          <Notice>
            Whoops, you need to accept the permissions in Slack to connect
            Outline to your team. Try again?
          </Notice>
        )}
-        {this.error === 'unauthenticated' && (
+        {this.error === "unauthenticated" && (
          <Notice>
            Something went wrong while authenticating your request. Please try
            logging in again?
          </Notice>
        )}
        <HelpText>
-          Preview Outline links your team mates share and use the{' '}
+          Preview Outline links your team mates share and use the{" "}
          <Code>/outline</Code> slash command in Slack to search for documents
          in your team’s wiki.
        </HelpText>
@@ -67,7 +67,7 @@ class Slack extends React.Component<Props> {
            <Button onClick={this.commandIntegration.delete}>Disconnect</Button>
          ) : (
            <SlackButton
-              scopes={['commands', 'links:read', 'links:write']}
+              scopes={["commands", "links:read", "links:write"]}
              redirectUri={`${BASE_URL}/auth/slack.commands`}
              state={teamId}
            />
@@ -91,7 +91,7 @@ class Slack extends React.Component<Props> {
              return (
                <ListItem key={integration.id}>
                  <span>
-                    <strong>{collection.name}</strong> posting activity to the{' '}
+                    <strong>{collection.name}</strong> posting activity to the{" "}
                    <strong>{integration.settings.channel}</strong> Slack
                    channel
                  </span>
@@ -104,7 +104,7 @@ class Slack extends React.Component<Props> {
              <ListItem key={collection.id}>
                <strong>{collection.name}</strong>
                <SlackButton
-                  scopes={['incoming-webhook']}
+                  scopes={["incoming-webhook"]}
                  redirectUri={`${BASE_URL}/auth/slack.post`}
                  state={collection.id}
                  label="Connect"
@@ -139,4 +139,4 @@ const Code = styled.code`
  border-radius: 4px;
 `;

-export default inject('collections', 'integrations', 'auth')(Slack);
+export default inject("collections", "integrations", "auth")(Slack);
--- a/app/scenes/Settings/Tokens.js
+++ b/app/scenes/Settings/Tokens.js
@@ -1,16 +1,16 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import ApiKeysStore from 'stores/ApiKeysStore';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import ApiKeysStore from "stores/ApiKeysStore";

-import Button from 'components/Button';
-import Input from 'components/Input';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import List from 'components/List';
-import TokenListItem from './components/TokenListItem';
+import Button from "components/Button";
+import Input from "components/Input";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import List from "components/List";
+import TokenListItem from "./components/TokenListItem";

 type Props = {
  apiKeys: ApiKeysStore,
@@ -18,7 +18,7 @@ type Props = {

@observer
 class Tokens extends React.Component<Props> {
-  @observable name: string = '';
+  @observable name: string = "";

  componentDidMount() {
    this.props.apiKeys.fetchPage({ limit: 100 });
@@ -31,7 +31,7 @@ class Tokens extends React.Component<Props> {
  handleSubmit = async (ev: SyntheticEvent<>) => {
    ev.preventDefault();
    await this.props.apiKeys.create({ name: this.name });
-    this.name = '';
+    this.name = "";
  };

  render() {
@@ -45,7 +45,7 @@ class Tokens extends React.Component<Props> {

        <HelpText>
          You can create an unlimited amount of personal tokens to authenticate
-          with the API. For more details about the API take a look at the{' '}
+          with the API. For more details about the API take a look at the{" "}
          <a href="/developers">developer documentation</a>.
        </HelpText>

@@ -79,4 +79,4 @@ class Tokens extends React.Component<Props> {
  }
 }

-export default inject('apiKeys')(Tokens);
+export default inject("apiKeys")(Tokens);
--- a/app/scenes/Settings/Zapier.js
+++ b/app/scenes/Settings/Zapier.js
@@ -1,14 +1,14 @@
 // @flow
-import * as React from 'react';
-import CenteredContent from 'components/CenteredContent';
-import PageTitle from 'components/PageTitle';
-import HelpText from 'components/HelpText';
-import Button from 'components/Button';
+import * as React from "react";
+import CenteredContent from "components/CenteredContent";
+import PageTitle from "components/PageTitle";
+import HelpText from "components/HelpText";
+import Button from "components/Button";

 class Zapier extends React.Component<*> {
  goToZapier = () => {
    window.open(
-      'https://zapier.com/platform/public-invite/5927/a0b2747dbb017723b55fc54f4f0cdcae/'
+      "https://zapier.com/platform/public-invite/5927/a0b2747dbb017723b55fc54f4f0cdcae/"
    );
  };
  render() {
@@ -17,14 +17,14 @@ class Zapier extends React.Component<*> {
        <PageTitle title="Zapier" />
        <h1>Zapier</h1>
        <HelpText>
-          There is now an Outline app on{' '}
+          There is now an Outline app on{" "}
          <a
            href="https://zapier.com"
            rel="noopener noreferrer"
            target="_blank"
          >
            Zapier
-          </a>{' '}
+          </a>{" "}
          to allow easy integration with hundreds of other business services. It
          is currently in early access, to use the integration and hook up to
          your wiki simply accept the public invite below. All configuration is
--- a/app/scenes/Settings/components/EventListItem.js
+++ b/app/scenes/Settings/components/EventListItem.js
@@ -1,12 +1,12 @@
 // @flow
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import { capitalize } from 'lodash';
-import styled from 'styled-components';
-import Time from 'shared/components/Time';
-import ListItem from 'components/List/Item';
-import Avatar from 'components/Avatar';
-import Event from 'models/Event';
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { capitalize } from "lodash";
+import styled from "styled-components";
+import Time from "shared/components/Time";
+import ListItem from "components/List/Item";
+import Avatar from "components/Avatar";
+import Event from "models/Event";

 type Props = {
  event: Event,
@@ -14,104 +14,104 @@ type Props = {

 const description = event => {
  switch (event.name) {
-    case 'api_keys.create':
+    case "api_keys.create":
      return (
        <React.Fragment>
          Created the API token <strong>{event.data.name}</strong>
        </React.Fragment>
      );
-    case 'api_keys.delete':
+    case "api_keys.delete":
      return (
        <React.Fragment>
          Revoked the API token <strong>{event.data.name}</strong>
        </React.Fragment>
      );
-    case 'teams.create':
-      return 'Created the team';
-    case 'shares.create':
-    case 'shares.revoke':
+    case "teams.create":
+      return "Created the team";
+    case "shares.create":
+    case "shares.revoke":
      return (
        <React.Fragment>
-          {capitalize(event.verbPastTense)} a{' '}
-          <Link to={`/share/${event.modelId || ''}`}>public link</Link> to the{' '}
-          <Link to={`/doc/${event.documentId}`}>{event.data.name}</Link>{' '}
+          {capitalize(event.verbPastTense)} a{" "}
+          <Link to={`/share/${event.modelId || ""}`}>public link</Link> to the{" "}
+          <Link to={`/doc/${event.documentId}`}>{event.data.name}</Link>{" "}
          document
        </React.Fragment>
      );
-    case 'users.create':
+    case "users.create":
      return (
        <React.Fragment>{event.data.name} created an account</React.Fragment>
      );
-    case 'users.invite':
+    case "users.invite":
      return (
        <React.Fragment>
          {capitalize(event.verbPastTense)} {event.data.name} (<a
-            href={`mailto:${event.data.email || ''}`}
+            href={`mailto:${event.data.email || ""}`}
          >
-            {event.data.email || ''}
+            {event.data.email || ""}
          </a>)
        </React.Fragment>
      );
-    case 'users.suspend':
+    case "users.suspend":
      return (
        <React.Fragment>
          Suspended <strong>{event.data.name}’s</strong> account
        </React.Fragment>
      );
-    case 'users.activate':
+    case "users.activate":
      return (
        <React.Fragment>
          Unsuspended <strong>{event.data.name}’s</strong> account
        </React.Fragment>
      );
-    case 'users.promote':
+    case "users.promote":
      return (
        <React.Fragment>
          Made <strong>{event.data.name}</strong> an admin
        </React.Fragment>
      );
-    case 'users.demote':
+    case "users.demote":
      return (
        <React.Fragment>
          Made <strong>{event.data.name}</strong> a member
        </React.Fragment>
      );
-    case 'users.delete':
-      return 'Deleted their account';
-    case 'groups.create':
+    case "users.delete":
+      return "Deleted their account";
+    case "groups.create":
      return (
        <React.Fragment>
          Created the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
-    case 'groups.update':
+    case "groups.update":
      return (
        <React.Fragment>
          Update the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
-    case 'groups.delete':
+    case "groups.delete":
      return (
        <React.Fragment>
          Deleted the group <strong>{event.data.name}</strong>
        </React.Fragment>
      );
-    case 'collections.add_user':
-    case 'collections.add_group':
+    case "collections.add_user":
+    case "collections.add_group":
      return (
        <React.Fragment>
-          Granted <strong>{event.data.name}</strong> access to a{' '}
-          <Link to={`/collections/${event.collectionId || ''}`}>
+          Granted <strong>{event.data.name}</strong> access to a{" "}
+          <Link to={`/collections/${event.collectionId || ""}`}>
            collection
          </Link>
        </React.Fragment>
      );
-    case 'collections.remove_user':
-    case 'collections.remove_group':
+    case "collections.remove_user":
+    case "collections.remove_group":
      return (
        <React.Fragment>
-          Revoked <strong>{event.data.name}</strong> access to a{' '}
-          <Link to={`/collections/${event.collectionId || ''}`}>
+          Revoked <strong>{event.data.name}</strong> access to a{" "}
+          <Link to={`/collections/${event.collectionId || ""}`}>
            collection
          </Link>
        </React.Fragment>
@@ -120,7 +120,7 @@ const description = event => {
  }

  if (event.documentId) {
-    if (event.name === 'documents.delete') {
+    if (event.name === "documents.delete") {
      return (
        <React.Fragment>
          Deleted the <strong>{event.data.title}</strong> document
@@ -129,13 +129,13 @@ const description = event => {
    }
    return (
      <React.Fragment>
-        {capitalize(event.verbPastTense)} the{' '}
+        {capitalize(event.verbPastTense)} the{" "}
        <Link to={`/doc/${event.documentId}`}>{event.data.title}</Link> document
      </React.Fragment>
    );
  }
  if (event.collectionId) {
-    if (event.name === 'collections.delete') {
+    if (event.name === "collections.delete") {
      return (
        <React.Fragment>
          Deleted the <strong>{event.data.name}</strong> collection
@@ -144,10 +144,10 @@ const description = event => {
    }
    return (
      <React.Fragment>
-        {capitalize(event.verbPastTense)} the{' '}
-        <Link to={`/collections/${event.collectionId || ''}`}>
+        {capitalize(event.verbPastTense)} the{" "}
+        <Link to={`/collections/${event.collectionId || ""}`}>
          {event.data.name}
-        </Link>{' '}
+        </Link>{" "}
        collection
      </React.Fragment>
    );
@@ -159,7 +159,7 @@ const description = event => {
      </React.Fragment>
    );
  }
-  return '';
+  return "";
 };

 const EventListItem = ({ event }: Props) => {
@@ -170,7 +170,7 @@ const EventListItem = ({ event }: Props) => {
      image={<Avatar src={event.actor.avatarUrl} size={32} />}
      subtitle={
        <React.Fragment>
-          {description(event)} <Time dateTime={event.createdAt} /> ago &middot;{' '}
+          {description(event)} <Time dateTime={event.createdAt} /> ago &middot;{" "}
          <strong>{event.name}</strong>
        </React.Fragment>
      }
@@ -193,7 +193,7 @@ const EventListItem = ({ event }: Props) => {
  );
 };

-const IP = styled('span')`
+const IP = styled("span")`
  color: ${props => props.theme.textTertiary};
  font-size: 12px;
 `;
--- a/app/scenes/Settings/components/ImageUpload.js
+++ b/app/scenes/Settings/components/ImageUpload.js
@@ -1,16 +1,16 @@
 // @flow
-import * as React from 'react';
-import { observable } from 'mobx';
-import { observer, inject } from 'mobx-react';
-import styled from 'styled-components';
-import Dropzone from 'react-dropzone';
-import LoadingIndicator from 'components/LoadingIndicator';
-import Flex from 'shared/components/Flex';
-import Modal from 'components/Modal';
-import Button from 'components/Button';
-import AvatarEditor from 'react-avatar-editor';
-import { uploadFile, dataUrlToBlob } from 'utils/uploadFile';
-import UiStore from 'stores/UiStore';
+import * as React from "react";
+import { observable } from "mobx";
+import { observer, inject } from "mobx-react";
+import styled from "styled-components";
+import Dropzone from "react-dropzone";
+import LoadingIndicator from "components/LoadingIndicator";
+import Flex from "shared/components/Flex";
+import Modal from "components/Modal";
+import Button from "components/Button";
+import AvatarEditor from "react-avatar-editor";
+import { uploadFile, dataUrlToBlob } from "utils/uploadFile";
+import UiStore from "stores/UiStore";

 type Props = {
  children?: React.Node,
@@ -30,7 +30,7 @@ class ImageUpload extends React.Component<Props> {
  avatarEditorRef: AvatarEditor;

  static defaultProps = {
-    submitText: 'Crop Picture',
+    submitText: "Crop Picture",
    borderRadius: 150,
  };

@@ -92,7 +92,7 @@ class ImageUpload extends React.Component<Props> {
              border={25}
              borderRadius={this.props.borderRadius}
              color={
-                ui.theme === 'light' ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6]
+                ui.theme === "light" ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6]
              } // RGBA
              scale={this.zoom}
              rotate={0}
@@ -107,7 +107,7 @@ class ImageUpload extends React.Component<Props> {
            onChange={this.handleZoom}
          />
          <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
-            {this.isUploading ? 'Uploading…' : submitText}
+            {this.isUploading ? "Uploading…" : submitText}
          </CropButton>
        </Flex>
      </Modal>
@@ -167,4 +167,4 @@ const CropButton = styled(Button)`
  width: 300px;
 `;

-export default inject('ui')(ImageUpload);
+export default inject("ui")(ImageUpload);
--- a/app/scenes/Settings/components/NotificationListItem.js
+++ b/app/scenes/Settings/components/NotificationListItem.js
@@ -1,7 +1,7 @@
 // @flow
-import * as React from 'react';
-import Checkbox from 'components/Checkbox';
-import NotificationSetting from 'models/NotificationSetting';
+import * as React from "react";
+import Checkbox from "components/Checkbox";
+import NotificationSetting from "models/NotificationSetting";

 type Props = {
  setting?: NotificationSetting,
--- a/app/scenes/Settings/components/ShareListItem.js
+++ b/app/scenes/Settings/components/ShareListItem.js
@@ -1,9 +1,9 @@
 // @flow
-import * as React from 'react';
-import ShareMenu from 'menus/ShareMenu';
-import ListItem from 'components/List/Item';
-import Time from 'shared/components/Time';
-import Share from 'models/Share';
+import * as React from "react";
+import ShareMenu from "menus/ShareMenu";
+import ListItem from "components/List/Item";
+import Time from "shared/components/Time";
+import Share from "models/Share";

 type Props = {
  share: Share,
@@ -16,7 +16,7 @@ const ShareListItem = ({ share }: Props) => {
      title={share.documentTitle}
      subtitle={
        <React.Fragment>
-          Shared <Time dateTime={share.createdAt} /> ago by{' '}
+          Shared <Time dateTime={share.createdAt} /> ago by{" "}
          {share.createdBy.name}
        </React.Fragment>
      }
--- a/app/scenes/Settings/components/SlackButton.js
+++ b/app/scenes/Settings/components/SlackButton.js
@@ -1,9 +1,9 @@
 // @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { slackAuth } from 'shared/utils/routeHelpers';
-import SlackLogo from 'shared/components/SlackLogo';
-import Button from 'components/Button';
+import * as React from "react";
+import styled from "styled-components";
+import { slackAuth } from "shared/utils/routeHelpers";
+import SlackLogo from "shared/components/SlackLogo";
+import Button from "components/Button";

 type Props = {
  scopes?: string[],
--- a/app/scenes/Settings/components/TokenListItem.js
+++ b/app/scenes/Settings/components/TokenListItem.js
@@ -1,8 +1,8 @@
 // @flow
-import * as React from 'react';
-import Button from 'components/Button';
-import ListItem from 'components/List/Item';
-import ApiKey from 'models/ApiKey';
+import * as React from "react";
+import Button from "components/Button";
+import ListItem from "components/List/Item";
+import ApiKey from "models/ApiKey";

 type Props = {
  token: ApiKey,
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@@ -1,15 +1,15 @@
 // @flow
-import * as React from 'react';
-import styled from 'styled-components';
-import { observable } from 'mobx';
-import { observer } from 'mobx-react';
-import UserMenu from 'menus/UserMenu';
-import Avatar from 'components/Avatar';
-import Badge from 'components/Badge';
-import UserProfile from 'scenes/UserProfile';
-import ListItem from 'components/List/Item';
-import Time from 'shared/components/Time';
-import User from 'models/User';
+import * as React from "react";
+import styled from "styled-components";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import UserMenu from "menus/UserMenu";
+import Avatar from "components/Avatar";
+import Badge from "components/Badge";
+import UserProfile from "scenes/UserProfile";
+import ListItem from "components/List/Item";
+import Time from "shared/components/Time";
+import User from "models/User";

 type Props = {
  user: User,
@@ -56,7 +56,7 @@ class UserListItem extends React.Component<Props> {
                Active <Time dateTime={user.lastActiveAt} /> ago
              </React.Fragment>
            ) : (
-              'Invited'
+              "Invited"
            )}
            {user.isAdmin && <Badge admin={user.isAdmin}>Admin</Badge>}
            {user.isSuspended && <Badge>Suspended</Badge>}
--- a/app/scenes/Settings/index.js
+++ b/app/scenes/Settings/index.js
@@ -1,3 +1,3 @@
 // @flow
-import Profile from './Profile';
+import Profile from "./Profile";
 export default Profile;