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>

app/menus/NewDocumentMenu.js

@@ -3,6 +3,7 @@ import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import { Redirect } from "react-router-dom";
 
 import CollectionsStore from "stores/CollectionsStore";
@@ -19,6 +20,7 @@ type Props = {
   documents: DocumentsStore,
   collections: CollectionsStore,
   policies: PoliciesStore,
+  t: TFunction,
 };
 
 @observer
@@ -29,7 +31,14 @@ class NewDocumentMenu extends React.Component<Props> {
     this.redirectTo = undefined;
   }
 
-  handleNewDocument = (collectionId: string, options) => {
+  handleNewDocument = (
+    collectionId: string,
+    options?: {
+      parentDocumentId?: string,
+      template?: boolean,
+      templateId?: string,
+    }
+  ) => {
     this.redirectTo = newDocumentUrl(collectionId, options);
   };
 
@@ -44,7 +53,7 @@ class NewDocumentMenu extends React.Component<Props> {
   render() {
     if (this.redirectTo) return <Redirect to={this.redirectTo} push />;
 
-    const { collections, documents, policies, label, ...rest } = this.props;
+    const { collections, documents, policies, label, t, ...rest } = this.props;
     const singleCollection = collections.orderedData.length === 1;
 
     return (
@@ -52,14 +61,15 @@ class NewDocumentMenu extends React.Component<Props> {
         label={
           label || (
             <Button icon={<PlusIcon />} small>
-              New doc{singleCollection ? "" : "…"}
+              {t("New doc")}
+              {singleCollection ? "" : "…"}
             </Button>
           )
         }
         onOpen={this.onOpen}
         {...rest}
       >
-        <Header>Choose a collection</Header>
+        <Header>{t("Choose a collection")}</Header>
         <DropdownMenuItems
           items={collections.orderedData.map((collection) => ({
             onClick: () => this.handleNewDocument(collection.id),
@@ -77,4 +87,6 @@ class NewDocumentMenu extends React.Component<Props> {
   }
 }
 
-export default inject("collections", "documents", "policies")(NewDocumentMenu);
+export default withTranslation()<NewDocumentMenu>(
+  inject("collections", "documents", "policies")(NewDocumentMenu)
+);