feat: I18n (#1653)

* feat: i18n * Changing language single source of truth from TEAM to USER * Changes according to @tommoor comments on PR * Changed package.json for build:i18n and translation label * Finished 1st MVP of i18n for outline * new translation labels & Portuguese from Portugal translation * Fixes from PR request * Described language dropdown as an experimental feature * Set keySeparator to false in order to cowork with html keys * Added useTranslation to Breadcrumb * Repositioned <strong> element * Removed extra space from TemplatesMenu * Fortified the test suite for i18n * Fixed trans component problematic * Check if selected language is available * Update yarn.lock * Removed unused Trans * Removing debug variable from i18n init * Removed debug variable * test: update snapshots * flow: Remove decorator usage to get proper flow typing It's a shame, but hopefully we'll move to Typescript in the next 6 months and we can forget this whole Flow mistake ever happened * translate: Drafts * More translatable strings * Mo translation strings * translation: Search * async translations loading * cache translations in client * Revert "cache translations in client" This reverts commit 08fb61ce36384ff90a704faffe4761eccfb76da1. * Revert localStorage cache for cache headers * Update Crowdin configuration file * Moved translation files to locales folder and fixed english text * Added CONTRIBUTING File for CrowdIn * chore: Move translations again to please CrowdIn * fix: loading paths chore: Add strings for editor * fix: Improve validation on documents.import endpoint * test: mock bull * fix: Unknown mimetype should fallback to Markdown parsing if markdown extension (#1678) * closes #1675 * Update CONTRIBUTING * chore: Add link to translation portal from app UI * refactor: Centralize language config * fix: Ensure creation of i18n directory in build * feat: Add language prompt * chore: Improve contributing guidelines, add link from README * chore: Normalize tab header casing * chore: More string externalization * fix: Language prompt in dark mode Co-authored-by: André Glatzl <andreglatzl@gmail.com>
2020-11-29 20:04:58 -08:00
parent 63c73c9a51
commit 1285efc49a
85 changed files with 6432 additions and 2613 deletions
--- a/app/components/Authenticated.js
+++ b/app/components/Authenticated.js
@@ -1,18 +1,30 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import { isCustomSubdomain } from "shared/utils/domains";
-import AuthStore from "stores/AuthStore";
 import LoadingIndicator from "components/LoadingIndicator";
+import useStores from "../hooks/useStores";
 import env from "env";

 type Props = {
-  auth: AuthStore,
-  children?: React.Node,
+  children: React.Node,
 };

-const Authenticated = observer(({ auth, children }: Props) => {
+const Authenticated = ({ children }: Props) => {
+  const { auth } = useStores();
+  const { i18n } = useTranslation();
+  const language = auth.user && auth.user.language;
+
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
+  React.useEffect(() => {
+    if (i18n.language !== language) {
+      i18n.changeLanguage(language);
+    }
+  }, [i18n, language]);
+
  if (auth.authenticated) {
    const { user, team } = auth;
    const { hostname } = window.location;
@@ -43,6 +55,6 @@ const Authenticated = observer(({ auth, children }: Props) => {

  auth.logout(true);
  return <Redirect to="/" />;
-});
+};

-export default inject("auth")(Authenticated);
+export default observer(Authenticated);
--- a/app/components/Avatar/AvatarWithPresence.js
+++ b/app/components/Avatar/AvatarWithPresence.js
@@ -4,6 +4,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";
 import User from "models/User";
 import UserProfile from "scenes/UserProfile";
@@ -16,6 +17,7 @@ type Props = {
  isEditing: boolean,
  isCurrentUser: boolean,
  lastViewedAt: string,
+  t: TFunction,
 };

@observer
@@ -37,20 +39,25 @@ class AvatarWithPresence extends React.Component<Props> {
      isPresent,
      isEditing,
      isCurrentUser,
+      t,
    } = this.props;

+    const action = isPresent
+      ? isEditing
+        ? t("currently editing")
+        : t("currently viewing")
+      : t("viewed {{ timeAgo }} ago", {
+          timeAgo: distanceInWordsToNow(new Date(lastViewedAt)),
+        });
+
    return (
      <>
        <Tooltip
          tooltip={
            <Centered>
-              <strong>{user.name}</strong> {isCurrentUser && "(You)"}
+              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
              <br />
-              {isPresent
-                ? isEditing
-                  ? "currently editing"
-                  : "currently viewing"
-                : `viewed ${distanceInWordsToNow(new Date(lastViewedAt))} ago`}
+              {action}
            </Centered>
          }
          placement="bottom"
@@ -83,4 +90,4 @@ const AvatarWrapper = styled.div`
  transition: opacity 250ms ease-in-out;
 `;

-export default AvatarWithPresence;
+export default withTranslation()<AvatarWithPresence>(AvatarWithPresence);
--- a/app/components/Breadcrumb.js
+++ b/app/components/Breadcrumb.js
@@ -1,5 +1,5 @@
 // @flow
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
  ArchiveIcon,
  EditIcon,
@@ -10,6 +10,7 @@ import {
  TrashIcon,
 } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -19,6 +20,7 @@ import Document from "models/Document";
 import CollectionIcon from "components/CollectionIcon";
 import Flex from "components/Flex";
 import BreadcrumbMenu from "./BreadcrumbMenu";
+import useStores from "hooks/useStores";
 import { collectionUrl } from "utils/routeHelpers";

 type Props = {
@@ -28,13 +30,15 @@ type Props = {
 };

 function Icon({ document }) {
+  const { t } = useTranslation();
+
  if (document.isDeleted) {
    return (
      <>
        <CollectionName to="/trash">
          <TrashIcon color="currentColor" />
          &nbsp;
-          <span>Trash</span>
+          <span>{t("Trash")}</span>
        </CollectionName>
        <Slash />
      </>
@@ -46,7 +50,7 @@ function Icon({ document }) {
        <CollectionName to="/archive">
          <ArchiveIcon color="currentColor" />
          &nbsp;
-          <span>Archive</span>
+          <span>{t("Archive")}</span>
        </CollectionName>
        <Slash />
      </>
@@ -58,7 +62,7 @@ function Icon({ document }) {
        <CollectionName to="/drafts">
          <EditIcon color="currentColor" />
          &nbsp;
-          <span>Drafts</span>
+          <span>{t("Drafts")}</span>
        </CollectionName>
        <Slash />
      </>
@@ -70,7 +74,7 @@ function Icon({ document }) {
        <CollectionName to="/templates">
          <ShapesIcon color="currentColor" />
          &nbsp;
-          <span>Templates</span>
+          <span>{t("Templates")}</span>
        </CollectionName>
        <Slash />
      </>
@@ -79,14 +83,17 @@ function Icon({ document }) {
  return null;
 }

-const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
+const Breadcrumb = ({ document, onlyText }: Props) => {
+  const { collections } = useStores();
+  const { t } = useTranslation();
+
  let collection = collections.get(document.collectionId);
  if (!collection) {
    if (!document.deletedAt) return <div />;

    collection = {
      id: document.collectionId,
-      name: "Deleted Collection",
+      name: t("Deleted Collection"),
      color: "currentColor",
    };
  }
@@ -141,7 +148,7 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
      )}
    </Wrapper>
  );
-});
+};

 const Wrapper = styled(Flex)`
  display: none;
@@ -202,4 +209,4 @@ const CollectionName = styled(Link)`
  overflow: hidden;
 `;

-export default inject("collections")(Breadcrumb);
+export default observer(Breadcrumb);
--- a/app/components/DocumentMeta.js
+++ b/app/components/DocumentMeta.js
@@ -1,14 +1,14 @@
 // @flow
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import AuthStore from "stores/AuthStore";
-import CollectionsStore from "stores/CollectionsStore";
 import Document from "models/Document";
 import Breadcrumb from "components/Breadcrumb";
 import Flex from "components/Flex";
 import Time from "components/Time";
+import useStores from "hooks/useStores";

 const Container = styled(Flex)`
  color: ${(props) => props.theme.textTertiary};
@@ -23,8 +23,6 @@ const Modified = styled.span`
 `;

 type Props = {
-  collections: CollectionsStore,
-  auth: AuthStore,
  showCollection?: boolean,
  showPublished?: boolean,
  showLastViewed?: boolean,
@@ -34,8 +32,6 @@ type Props = {
 };

 function DocumentMeta({
-  auth,
-  collections,
  showPublished,
  showCollection,
  showLastViewed,
@@ -44,6 +40,8 @@ function DocumentMeta({
  to,
  ...rest
 }: Props) {
+  const { t } = useTranslation();
+  const { collections, auth } = useStores();
  const {
    modifiedSinceViewed,
    updatedAt,
@@ -67,37 +65,37 @@ function DocumentMeta({
  if (deletedAt) {
    content = (
      <span>
-        deleted <Time dateTime={deletedAt} addSuffix />
+        {t("deleted")} <Time dateTime={deletedAt} addSuffix />
      </span>
    );
  } else if (archivedAt) {
    content = (
      <span>
-        archived <Time dateTime={archivedAt} addSuffix />
+        {t("archived")} <Time dateTime={archivedAt} addSuffix />
      </span>
    );
  } else if (createdAt === updatedAt) {
    content = (
      <span>
-        created <Time dateTime={updatedAt} addSuffix />
+        {t("created")} <Time dateTime={updatedAt} addSuffix />
      </span>
    );
  } else if (publishedAt && (publishedAt === updatedAt || showPublished)) {
    content = (
      <span>
-        published <Time dateTime={publishedAt} addSuffix />
+        {t("published")} <Time dateTime={publishedAt} addSuffix />
      </span>
    );
  } else if (isDraft) {
    content = (
      <span>
-        saved <Time dateTime={updatedAt} addSuffix />
+        {t("saved")} <Time dateTime={updatedAt} addSuffix />
      </span>
    );
  } else {
    content = (
      <Modified highlight={modifiedSinceViewed}>
-        updated <Time dateTime={updatedAt} addSuffix />
+        {t("updated")} <Time dateTime={updatedAt} addSuffix />
      </Modified>
    );
  }
@@ -112,25 +110,25 @@ function DocumentMeta({
    if (!lastViewedAt) {
      return (
        <>
-          •&nbsp;<Modified highlight>Never viewed</Modified>
+          •&nbsp;<Modified highlight>{t("Never viewed")}</Modified>
        </>
      );
    }

    return (
      <span>
-        •&nbsp;Viewed <Time dateTime={lastViewedAt} addSuffix shorten />
+        •&nbsp;{t("Viewed")} <Time dateTime={lastViewedAt} addSuffix shorten />
      </span>
    );
  };

  return (
    <Container align="center" {...rest}>
-      {updatedByMe ? "You" : updatedBy.name}&nbsp;
+      {updatedByMe ? t("You") : updatedBy.name}&nbsp;
      {to ? <Link to={to}>{content}</Link> : content}
      {showCollection && collection && (
        <span>
-          &nbsp;in&nbsp;
+          &nbsp;{t("in")}&nbsp;
          <strong>
            <Breadcrumb document={document} onlyText />
          </strong>
@@ -142,4 +140,4 @@ function DocumentMeta({
  );
 }

-export default inject("collections", "auth")(observer(DocumentMeta));
+export default observer(DocumentMeta);
--- a/app/components/DocumentPreview/DocumentPreview.js
+++ b/app/components/DocumentPreview/DocumentPreview.js
@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { StarredIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import { Link, Redirect } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import Document from "models/Document";
@@ -25,6 +26,7 @@ type Props = {
  showPin?: boolean,
  showDraft?: boolean,
  showTemplate?: boolean,
+  t: TFunction,
 };

 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
@@ -72,6 +74,7 @@ class DocumentPreview extends React.Component<Props> {
      showTemplate,
      highlight,
      context,
+      t,
    } = this.props;

    if (this.redirectTo) {
@@ -91,7 +94,7 @@ class DocumentPreview extends React.Component<Props> {
      >
        <Heading>
          <Title text={document.titleWithDefault} highlight={highlight} />
-          {document.isNew && <Badge yellow>New</Badge>}
+          {document.isNew && <Badge yellow>{t("New")}</Badge>}
          {!document.isDraft &&
            !document.isArchived &&
            !document.isTemplate && (
@@ -104,12 +107,16 @@ class DocumentPreview extends React.Component<Props> {
              </Actions>
            )}
          {document.isDraft && showDraft && (
-            <Tooltip tooltip="Only visible to you" delay={500} placement="top">
-              <Badge>Draft</Badge>
+            <Tooltip
+              tooltip={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
            </Tooltip>
          )}
          {document.isTemplate && showTemplate && (
-            <Badge primary>Template</Badge>
+            <Badge primary>{t("Template")}</Badge>
          )}
          <SecondaryActions>
            {document.isTemplate &&
@@ -120,7 +127,7 @@ class DocumentPreview extends React.Component<Props> {
                  icon={<PlusIcon />}
                  neutral
                >
-                  New doc
+                  {t("New doc")}
                </Button>
              )}
            &nbsp;
@@ -237,4 +244,4 @@ const ResultContext = styled(Highlight)`
  margin-bottom: 0.25em;
 `;

-export default DocumentPreview;
+export default withTranslation()<DocumentPreview>(DocumentPreview);
--- a/app/components/DropdownMenu/DropdownMenu.js
+++ b/app/components/DropdownMenu/DropdownMenu.js
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { MoreIcon } from "outline-icons";
 import { rgba } from "polished";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import { PortalWithState } from "react-portal";
 import styled from "styled-components";
 import { fadeAndScaleIn } from "shared/styles/animations";
@@ -27,6 +28,7 @@ type Props = {|
  hover?: boolean,
  style?: Object,
  position?: "left" | "right" | "center",
+  t: TFunction,
 |};

@observer
@@ -150,7 +152,7 @@ class DropdownMenu extends React.Component<Props> {
  };

  render() {
-    const { className, hover, label, children } = this.props;
+    const { className, hover, label, children, t } = this.props;

    return (
      <div className={className}>
@@ -177,7 +179,7 @@ class DropdownMenu extends React.Component<Props> {
                {label || (
                  <NudeButton
                    id={`${this.id}button`}
-                    aria-label="More options"
+                    aria-label={t("More options")}
                    aria-haspopup="true"
                    aria-expanded={isOpen ? "true" : "false"}
                    aria-controls={this.id}
@@ -284,4 +286,4 @@ export const Header = styled.h3`
  margin: 1em 12px 0.5em;
 `;

-export default DropdownMenu;
+export default withTranslation()<DropdownMenu>(DropdownMenu);
--- a/app/components/Editor.js
+++ b/app/components/Editor.js
@@ -1,6 +1,7 @@
 // @flow
 import { lighten } from "polished";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import UiStore from "stores/UiStore";
@@ -28,60 +29,129 @@ type PropsWithRef = Props & {
  history: RouterHistory,
 };

-class Editor extends React.Component<PropsWithRef> {
-  onUploadImage = async (file: File) => {
-    const result = await uploadFile(file, { documentId: this.props.id });
-    return result.url;
-  };
+function Editor(props: PropsWithRef) {
+  const { id, ui, history } = props;
+  const { t } = useTranslation();

-  onClickLink = (href: string, event: MouseEvent) => {
-    // on page hash
-    if (href[0] === "#") {
-      window.location.href = href;
-      return;
-    }
+  const onUploadImage = React.useCallback(
+    async (file: File) => {
+      const result = await uploadFile(file, { documentId: id });
+      return result.url;
+    },
+    [id]
+  );

-    if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
-      // relative
-      let navigateTo = href;
-
-      // probably absolute
-      if (href[0] !== "/") {
-        try {
-          const url = new URL(href);
-          navigateTo = url.pathname + url.hash;
-        } catch (err) {
-          navigateTo = href;
-        }
+  const onClickLink = React.useCallback(
+    (href: string, event: MouseEvent) => {
+      // on page hash
+      if (href[0] === "#") {
+        window.location.href = href;
+        return;
      }

-      this.props.history.push(navigateTo);
-    } else if (href) {
-      window.open(href, "_blank");
-    }
-  };
+      if (isInternalUrl(href) && !event.metaKey && !event.shiftKey) {
+        // relative
+        let navigateTo = href;

-  onShowToast = (message: string) => {
-    if (this.props.ui) {
-      this.props.ui.showToast(message);
-    }
-  };
+        // probably absolute
+        if (href[0] !== "/") {
+          try {
+            const url = new URL(href);
+            navigateTo = url.pathname + url.hash;
+          } catch (err) {
+            navigateTo = href;
+          }
+        }

-  render() {
-    return (
-      <ErrorBoundary reloadOnChunkMissing>
-        <StyledEditor
-          ref={this.props.forwardedRef}
-          uploadImage={this.onUploadImage}
-          onClickLink={this.onClickLink}
-          onShowToast={this.onShowToast}
-          embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
-          tooltip={EditorTooltip}
-          {...this.props}
-        />
-      </ErrorBoundary>
-    );
-  }
+        history.push(navigateTo);
+      } else if (href) {
+        window.open(href, "_blank");
+      }
+    },
+    [history]
+  );
+
+  const onShowToast = React.useCallback(
+    (message: string) => {
+      if (ui) {
+        ui.showToast(message);
+      }
+    },
+    [ui]
+  );
+
+  const dictionary = React.useMemo(() => {
+    return {
+      addColumnAfter: t("Insert column after"),
+      addColumnBefore: t("Insert column before"),
+      addRowAfter: t("Insert row after"),
+      addRowBefore: t("Insert row before"),
+      alignCenter: t("Align center"),
+      alignLeft: t("Align left"),
+      alignRight: t("Align right"),
+      bulletList: t("Bulleted list"),
+      checkboxList: t("Todo list"),
+      codeBlock: t("Code block"),
+      codeCopied: t("Copied to clipboard"),
+      codeInline: t("Code"),
+      createLink: t("Create link"),
+      createLinkError: t("Sorry, an error occurred creating the link"),
+      createNewDoc: t("Create a new doc"),
+      deleteColumn: t("Delete column"),
+      deleteRow: t("Delete row"),
+      deleteTable: t("Delete table"),
+      em: t("Italic"),
+      embedInvalidLink: t("Sorry, that link won’t work for this embed type"),
+      findOrCreateDoc: t("Find or create a doc…"),
+      h1: t("Big heading"),
+      h2: t("Medium heading"),
+      h3: t("Small heading"),
+      heading: t("Heading"),
+      hr: t("Divider"),
+      image: t("Image"),
+      imageUploadError: t("Sorry, an error occurred uploading the image"),
+      info: t("Info"),
+      infoNotice: t("Info notice"),
+      link: t("Link"),
+      linkCopied: t("Link copied to clipboard"),
+      mark: t("Highlight"),
+      newLineEmpty: t("Type '/' to insert…"),
+      newLineWithSlash: t("Keep typing to filter…"),
+      noResults: t("No results"),
+      openLink: t("Open link"),
+      orderedList: t("Ordered list"),
+      pasteLink: t("Paste a link…"),
+      pasteLinkWithTitle: (service: string) =>
+        t("Paste a {{service}} link…", { service }),
+      placeholder: t("Placeholder"),
+      quote: t("Quote"),
+      removeLink: t("Remove link"),
+      searchOrPasteLink: t("Search or paste a link…"),
+      strikethrough: t("Strikethrough"),
+      strong: t("Bold"),
+      subheading: t("Subheading"),
+      table: t("Table"),
+      tip: t("Tip"),
+      tipNotice: t("Tip notice"),
+      warning: t("Warning"),
+      warningNotice: t("Warning notice"),
+    };
+  }, [t]);
+
+  return (
+    <ErrorBoundary reloadOnChunkMissing>
+      <StyledEditor
+        ref={props.forwardedRef}
+        uploadImage={onUploadImage}
+        onClickLink={onClickLink}
+        onShowToast={onShowToast}
+        embeds={props.disableEmbeds ? EMPTY_ARRAY : embeds}
+        tooltip={EditorTooltip}
+        dictionary={dictionary}
+        {...props}
+      />
+    </ErrorBoundary>
+  );
 }

 const StyledEditor = styled(RichMarkdownEditor)`
--- a/app/components/HoverPreviewDocument.js
+++ b/app/components/HoverPreviewDocument.js
@@ -1,20 +1,20 @@
 // @flow
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
-import DocumentsStore from "stores/DocumentsStore";
 import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
+import useStores from "hooks/useStores";

 type Props = {
  url: string,
-  documents: DocumentsStore,
  children: (React.Node) => React.Node,
 };

-function HoverPreviewDocument({ url, documents, children }: Props) {
+function HoverPreviewDocument({ url, children }: Props) {
+  const { documents } = useStores();
  const slug = parseDocumentSlug(url);

  documents.prefetchDocument(slug, {
@@ -50,4 +50,4 @@ const Heading = styled.h2`
  color: ${(props) => props.theme.text};
 `;

-export default inject("documents")(observer(HoverPreviewDocument));
+export default observer(HoverPreviewDocument);
--- a/app/components/IconPicker.js
+++ b/app/components/IconPicker.js
@@ -22,6 +22,7 @@ import {
  VehicleIcon,
 } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";
 import { DropdownMenu } from "components/DropdownMenu";
 import Flex from "components/Flex";
@@ -126,6 +127,7 @@ type Props = {
  onChange: (color: string, icon: string) => void,
  icon: string,
  color: string,
+  t: TFunction,
 };

 function preventEventBubble(event) {
@@ -167,12 +169,13 @@ class IconPicker extends React.Component<Props> {
  };

  render() {
+    const { t } = this.props;
    const Component = icons[this.props.icon || "collection"].component;

    return (
      <Wrapper ref={(ref) => (this.node = ref)}>
        <label>
-          <LabelText>Icon</LabelText>
+          <LabelText>{t("Icon")}</LabelText>
        </label>
        <DropdownMenu
          onOpen={this.handleOpen}
@@ -197,7 +200,7 @@ class IconPicker extends React.Component<Props> {
            })}
          </Icons>
          <Flex onClick={preventEventBubble}>
-            <React.Suspense fallback={<Loading>Loading…</Loading>}>
+            <React.Suspense fallback={<Loading>{t("Loading…")}</Loading>}>
              <ColorPicker
                color={this.props.color}
                onChange={(color) =>
@@ -246,4 +249,4 @@ const Wrapper = styled("div")`
  position: relative;
 `;

-export default IconPicker;
+export default withTranslation()<IconPicker>(IconPicker);
--- a/app/components/InputSearch.js
+++ b/app/components/InputSearch.js
@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, type RouterHistory } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -16,6 +17,7 @@ type Props = {
  source: string,
  placeholder?: string,
  collectionId?: string,
+  t: TFunction,
 };

@observer
@@ -24,7 +26,7 @@ class InputSearch extends React.Component<Props> {
  @observable focused: boolean = false;

  @keydown("meta+f")
-  focus(ev) {
+  focus(ev: SyntheticEvent<>) {
    ev.preventDefault();

    if (this.input) {
@@ -32,7 +34,7 @@ class InputSearch extends React.Component<Props> {
    }
  }

-  handleSearchInput = (ev) => {
+  handleSearchInput = (ev: SyntheticInputEvent<>) => {
    ev.preventDefault();
    this.props.history.push(
      searchUrl(ev.target.value, {
@@ -51,7 +53,8 @@ class InputSearch extends React.Component<Props> {
  };

  render() {
-    const { theme, placeholder = "Search…" } = this.props;
+    const { t } = this.props;
+    const { theme, placeholder = t("Search…") } = this.props;

    return (
      <InputMaxWidth
@@ -76,4 +79,6 @@ const InputMaxWidth = styled(Input)`
  max-width: 30vw;
 `;

-export default withTheme(withRouter(InputSearch));
+export default withTranslation()<InputSearch>(
+  withTheme(withRouter(InputSearch))
+);
--- a/app/components/InputSelect.js
+++ b/app/components/InputSelect.js
@@ -20,11 +20,17 @@ const Select = styled.select`
  }
 `;

+const Wrapper = styled.label`
+  display: block;
+  max-width: ${(props) => (props.short ? "350px" : "100%")};
+`;
+
 type Option = { label: string, value: string };

 export type Props = {
  value?: string,
  label?: string,
+  short?: boolean,
  className?: string,
  labelHidden?: boolean,
  options: Option[],
@@ -43,12 +49,19 @@ class InputSelect extends React.Component<Props> {
  };

  render() {
-    const { label, className, labelHidden, options, ...rest } = this.props;
+    const {
+      label,
+      className,
+      labelHidden,
+      options,
+      short,
+      ...rest
+    } = this.props;

    const wrappedLabel = <LabelText>{label}</LabelText>;

    return (
-      <label>
+      <Wrapper short={short}>
        {label &&
          (labelHidden ? (
            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
@@ -64,7 +77,7 @@ class InputSelect extends React.Component<Props> {
            ))}
          </Select>
        </Outline>
-      </label>
+      </Wrapper>
    );
  }
 }
--- a/app/components/LanguagePrompt.js
+++ b/app/components/LanguagePrompt.js
@@ -0,0 +1,90 @@
+// @flow
+import { find } from "lodash";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { languages, languageOptions } from "shared/i18n";
+import Flex from "components/Flex";
+import NoticeTip from "components/NoticeTip";
+import useCurrentUser from "hooks/useCurrentUser";
+import useStores from "hooks/useStores";
+import { detectLanguage } from "utils/language";
+
+function Icon(props) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M21 18H16L14 16V6C14 4.89543 14.8954 4 16 4H28C29.1046 4 30 4.89543 30 6V16C30 17.1046 29.1046 18 28 18H27L25.4142 19.5858C24.6332 20.3668 23.3668 20.3668 22.5858 19.5858L21 18ZM16 15.1716V6H28V16H27H26.1716L25.5858 16.5858L24 18.1716L22.4142 16.5858L21.8284 16H21H16.8284L16 15.1716Z"
+        fill="#2B2F35"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16 13H4C2.89543 13 2 13.8954 2 15V25C2 26.1046 2.89543 27 4 27H5L6.58579 28.5858C7.36684 29.3668 8.63316 29.3668 9.41421 28.5858L11 27H16C17.1046 27 18 26.1046 18 25V15C18 13.8954 17.1046 13 16 13ZM9 17L6 16.9681C6 16.9681 5 17.016 5 18C5 18.984 6 19 6 19H8.5H10C10 19 9.57627 20.1885 8.38983 21.0831C7.20339 21.9777 5.7197 23 5.7197 23C5.7197 23 4.99153 23.6054 5.5 24.5C6.00847 25.3946 7 24.8403 7 24.8403L9.74576 22.8722L11.9492 24.6614C11.9492 24.6614 12.6271 25.3771 13.3051 24.4825C13.9831 23.5879 13.3051 23.0512 13.3051 23.0512L11.1017 21.262C11.1017 21.262 11.5 21 12 20L12.5 19H14C14 19 15 19.0319 15 18C15 16.9681 14 16.9681 14 16.9681L11 17V16C11 16 11.0169 15 10 15C8.98305 15 9 16 9 16V17Z"
+        fill="#2B2F35"
+      />
+      <path
+        d="M23.6672 12.5221L23.5526 12.1816H23.1934H20.8818H20.5215L20.4075 12.5235L20.082 13.5H19.2196L21.2292 8.10156H21.8774L21.5587 9.06116L20.7633 11.4562L20.5449 12.1138H21.2378H22.8374H23.5327L23.3114 11.4546L22.5072 9.05959L22.1855 8.10156H22.768L24.7887 13.5H23.9964L23.6672 12.5221Z"
+        fill="#2B2F35"
+        stroke="#2B2F35"
+      />
+    </svg>
+  );
+}
+
+export default function LanguagePrompt() {
+  const { auth, ui } = useStores();
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+  const language = detectLanguage();
+
+  if (language === "en_US" || language === user.language) {
+    return null;
+  }
+
+  if (!languages.includes(language)) {
+    return null;
+  }
+
+  const option = find(languageOptions, (o) => o.value === language);
+  const optionLabel = option ? option.label : "";
+
+  return (
+    <NoticeTip>
+      <Flex align="center">
+        <LanguageIcon />
+        <span>
+          <Trans>
+            Outline is available in your language {{ optionLabel }}, would you
+            like to change?
+          </Trans>
+          <br />
+          <a
+            onClick={() => {
+              auth.updateUser({
+                language,
+              });
+              ui.setLanguagePromptDismissed();
+            }}
+          >
+            {t("Change Language")}
+          </a>{" "}
+          &middot; <a onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</a>
+        </span>
+      </Flex>
+    </NoticeTip>
+  );
+}
+
+const LanguageIcon = styled(Icon)`
+  margin-right: 12px;
+`;
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
+import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { Switch, Route, Redirect } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
@@ -37,6 +38,8 @@ type Props = {
  ui: UiStore,
  notifications?: React.Node,
  theme: Theme,
+  i18n: Object,
+  t: TFunction,
 };

@observer
@@ -45,7 +48,7 @@ class Layout extends React.Component<Props> {
  @observable redirectTo: ?string;
  @observable keyboardShortcutsOpen: boolean = false;

-  constructor(props) {
+  constructor(props: Props) {
    super();
    this.updateBackground(props);
  }
@@ -58,7 +61,7 @@ class Layout extends React.Component<Props> {
    }
  }

-  updateBackground(props) {
+  updateBackground(props: Props) {
    // ensure the wider page color always matches the theme
    window.document.body.style.background = props.theme.background;
  }
@@ -74,7 +77,7 @@ class Layout extends React.Component<Props> {
  };

  @keydown(["t", "/", "meta+k"])
-  goToSearch(ev) {
+  goToSearch(ev: SyntheticEvent<>) {
    if (this.props.ui.editMode) return;
    ev.preventDefault();
    ev.stopPropagation();
@@ -88,7 +91,7 @@ class Layout extends React.Component<Props> {
  }

  render() {
-    const { auth, ui } = this.props;
+    const { auth, t, ui } = this.props;
    const { user, team } = auth;
    const showSidebar = auth.authenticated && user && team;

@@ -131,7 +134,7 @@ class Layout extends React.Component<Props> {
        <Modal
          isOpen={this.keyboardShortcutsOpen}
          onRequestClose={this.handleCloseKeyboardShortcuts}
-          title="Keyboard shortcuts"
+          title={t("Keyboard shortcuts")}
        >
          <KeyboardShortcuts />
        </Modal>
@@ -162,4 +165,6 @@ const Content = styled(Flex)`
  `};
 `;

-export default inject("auth", "ui", "documents")(withTheme(Layout));
+export default withTranslation()<Layout>(
+  inject("auth", "ui", "documents")(withTheme(Layout))
+);
--- a/app/components/NoticeTip.js
+++ b/app/components/NoticeTip.js
@@ -0,0 +1,22 @@
+// @flow
+import styled from "styled-components";
+
+const Notice = styled.p`
+  background: ${(props) => props.theme.brand.marine};
+  color: ${(props) => props.theme.almostBlack};
+  padding: 10px 12px;
+  margin-top: 24px;
+  border-radius: 4px;
+  position: relative;
+
+  a {
+    color: ${(props) => props.theme.almostBlack};
+    font-weight: 500;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+`;
+
+export default Notice;
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@@ -12,6 +12,7 @@ import {
  PlusIcon,
 } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";

 import AuthStore from "stores/AuthStore";
@@ -34,6 +35,7 @@ type Props = {
  auth: AuthStore,
  documents: DocumentsStore,
  policies: PoliciesStore,
+  t: TFunction,
 };

@observer
@@ -65,7 +67,7 @@ class MainSidebar extends React.Component<Props> {
  };

  render() {
-    const { auth, documents, policies } = this.props;
+    const { auth, documents, policies, t } = this.props;
    const { user, team } = auth;
    if (!user || !team) return null;

@@ -90,7 +92,7 @@ class MainSidebar extends React.Component<Props> {
                to="/home"
                icon={<HomeIcon color="currentColor" />}
                exact={false}
-                label="Home"
+                label={t("Home")}
              />
              <SidebarLink
                to={{
@@ -98,20 +100,20 @@ class MainSidebar extends React.Component<Props> {
                  state: { fromMenu: true },
                }}
                icon={<SearchIcon color="currentColor" />}
-                label="Search"
+                label={t("Search")}
                exact={false}
              />
              <SidebarLink
                to="/starred"
                icon={<StarredIcon color="currentColor" />}
                exact={false}
-                label="Starred"
+                label={t("Starred")}
              />
              <SidebarLink
                to="/templates"
                icon={<ShapesIcon color="currentColor" />}
                exact={false}
-                label="Templates"
+                label={t("Templates")}
                active={
                  documents.active ? documents.active.template : undefined
                }
@@ -121,7 +123,7 @@ class MainSidebar extends React.Component<Props> {
                icon={<EditIcon color="currentColor" />}
                label={
                  <Drafts align="center">
-                    Drafts
+                    {t("Drafts")}
                    {documents.totalDrafts > 0 && (
                      <Bubble count={documents.totalDrafts} />
                    )}
@@ -146,7 +148,7 @@ class MainSidebar extends React.Component<Props> {
                to="/archive"
                icon={<ArchiveIcon color="currentColor" />}
                exact={false}
-                label="Archive"
+                label={t("Archive")}
                active={
                  documents.active
                    ? documents.active.isArchived && !documents.active.isDeleted
@@ -157,7 +159,7 @@ class MainSidebar extends React.Component<Props> {
                to="/trash"
                icon={<TrashIcon color="currentColor" />}
                exact={false}
-                label="Trash"
+                label={t("Trash")}
                active={
                  documents.active ? documents.active.isDeleted : undefined
                }
@@ -167,21 +169,21 @@ class MainSidebar extends React.Component<Props> {
                  to="/settings/people"
                  onClick={this.handleInviteModalOpen}
                  icon={<PlusIcon color="currentColor" />}
-                  label="Invite people…"
+                  label={t("Invite people…")}
                />
              )}
            </Section>
          </Scrollable>
        </Flex>
        <Modal
-          title="Invite people"
+          title={t("Invite people")}
          onRequestClose={this.handleInviteModalClose}
          isOpen={this.inviteModalOpen}
        >
          <Invite onSubmit={this.handleInviteModalClose} />
        </Modal>
        <Modal
-          title="Create a collection"
+          title={t("Create a collection")}
          onRequestClose={this.handleCreateCollectionModalClose}
          isOpen={this.createCollectionModalOpen}
        >
@@ -196,4 +198,6 @@ const Drafts = styled(Flex)`
  height: 24px;
 `;

-export default inject("documents", "policies", "auth")(MainSidebar);
+export default withTranslation()<MainSidebar>(
+  inject("documents", "policies", "auth")(MainSidebar)
+);
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@@ -13,6 +13,7 @@ import {
  ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import type { RouterHistory } from "react-router-dom";
 import styled from "styled-components";
 import AuthStore from "stores/AuthStore";
@@ -36,6 +37,7 @@ type Props = {
  history: RouterHistory,
  policies: PoliciesStore,
  auth: AuthStore,
+  t: TFunction,
 };

@observer
@@ -45,7 +47,7 @@ class SettingsSidebar extends React.Component<Props> {
  };

  render() {
-    const { policies, auth } = this.props;
+    const { policies, t, auth } = this.props;
    const { team } = auth;
    if (!team) return null;

@@ -56,7 +58,7 @@ class SettingsSidebar extends React.Component<Props> {
        <HeaderBlock
          subheading={
            <ReturnToApp align="center">
-              <BackIcon color="currentColor" /> Return to App
+              <BackIcon color="currentColor" /> {t("Return to App")}
            </ReturnToApp>
          }
          teamName={team.name}
@@ -71,17 +73,17 @@ class SettingsSidebar extends React.Component<Props> {
              <SidebarLink
                to="/settings"
                icon={<ProfileIcon color="currentColor" />}
-                label="Profile"
+                label={t("Profile")}
              />
              <SidebarLink
                to="/settings/notifications"
                icon={<EmailIcon color="currentColor" />}
-                label="Notifications"
+                label={t("Notifications")}
              />
              <SidebarLink
                to="/settings/tokens"
                icon={<CodeIcon color="currentColor" />}
-                label="API Tokens"
+                label={t("API Tokens")}
              />
            </Section>
            <Section>
@@ -90,44 +92,44 @@ class SettingsSidebar extends React.Component<Props> {
                <SidebarLink
                  to="/settings/details"
                  icon={<TeamIcon color="currentColor" />}
-                  label="Details"
+                  label={t("Details")}
                />
              )}
              {can.update && (
                <SidebarLink
                  to="/settings/security"
                  icon={<PadlockIcon color="currentColor" />}
-                  label="Security"
+                  label={t("Security")}
                />
              )}
              <SidebarLink
                to="/settings/people"
                icon={<UserIcon color="currentColor" />}
                exact={false}
-                label="People"
+                label={t("People")}
              />
              <SidebarLink
                to="/settings/groups"
                icon={<GroupIcon color="currentColor" />}
                exact={false}
-                label="Groups"
+                label={t("Groups")}
              />
              <SidebarLink
                to="/settings/shares"
                icon={<LinkIcon color="currentColor" />}
-                label="Share Links"
+                label={t("Share Links")}
              />
              {can.export && (
                <SidebarLink
                  to="/settings/export"
                  icon={<DocumentIcon color="currentColor" />}
-                  label="Export Data"
+                  label={t("Export Data")}
                />
              )}
            </Section>
            {can.update && (
              <Section>
-                <Header>Integrations</Header>
+                <Header>{t("Integrations")}</Header>
                <SidebarLink
                  to="/settings/integrations/slack"
                  icon={<SlackIcon color="currentColor" />}
@@ -144,7 +146,7 @@ class SettingsSidebar extends React.Component<Props> {
            )}
            {can.update && !isHosted && (
              <Section>
-                <Header>Installation</Header>
+                <Header>{t("Installation")}</Header>
                <Version />
              </Section>
            )}
@@ -164,4 +166,6 @@ const ReturnToApp = styled(Flex)`
  height: 16px;
 `;

-export default inject("auth", "policies")(SettingsSidebar);
+export default withTranslation()<SettingsSidebar>(
+  inject("auth", "policies")(SettingsSidebar)
+);
--- a/app/components/Sidebar/components/Collections.js
+++ b/app/components/Sidebar/components/Collections.js
@@ -2,6 +2,7 @@
 import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, type RouterHistory } from "react-router-dom";

@@ -24,6 +25,7 @@ type Props = {
  documents: DocumentsStore,
  onCreateCollection: () => void,
  ui: UiStore,
+  t: TFunction,
 };

@observer
@@ -52,7 +54,7 @@ class Collections extends React.Component<Props> {
  }

  render() {
-    const { collections, ui, policies, documents } = this.props;
+    const { collections, ui, policies, documents, t } = this.props;

    const content = (
      <>
@@ -71,7 +73,7 @@ class Collections extends React.Component<Props> {
          to="/collections"
          onClick={this.props.onCreateCollection}
          icon={<PlusIcon color="currentColor" />}
-          label="New collection…"
+          label={t("New collection…")}
          exact
        />
      </>
@@ -79,7 +81,7 @@ class Collections extends React.Component<Props> {

    return (
      <Flex column>
-        <Header>Collections</Header>
+        <Header>{t("Collections")}</Header>
        {collections.isLoaded ? (
          this.isPreloaded ? (
            content
@@ -94,9 +96,6 @@ class Collections extends React.Component<Props> {
  }
 }

-export default inject(
-  "collections",
-  "ui",
-  "documents",
-  "policies"
-)(withRouter(Collections));
+export default withTranslation()<Collections>(
+  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
+);
--- a/app/components/Sidebar/components/DocumentLink.js
+++ b/app/components/Sidebar/components/DocumentLink.js
@@ -2,6 +2,7 @@
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import Collection from "models/Collection";
@@ -23,6 +24,7 @@ type Props = {|
  activeDocumentRef?: (?HTMLElement) => void,
  prefetchDocument: (documentId: string) => Promise<void>,
  depth: number,
+  t: TFunction,
 |};

@observer
@@ -84,6 +86,7 @@ class DocumentLink extends React.Component<Props> {
      prefetchDocument,
      depth,
      canUpdate,
+      t,
    } = this.props;

    const showChildren = !!(
@@ -96,7 +99,7 @@ class DocumentLink extends React.Component<Props> {
        this.isActiveDocument())
    );
    const document = documents.get(node.id);
-    const title = node.title || "Untitled";
+    const title = node.title || t("Untitled");

    return (
      <Flex
@@ -147,6 +150,7 @@ class DocumentLink extends React.Component<Props> {
                    prefetchDocument={prefetchDocument}
                    depth={depth + 1}
                    canUpdate={canUpdate}
+                    t={t}
                  />
                ))}
              </DocumentChildren>
@@ -160,4 +164,4 @@ class DocumentLink extends React.Component<Props> {

 const DocumentChildren = styled(Flex)``;

-export default DocumentLink;
+export default withTranslation()<DocumentLink>(DocumentLink);