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/scenes/CollectionEdit.js

@@ -2,6 +2,7 @@
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
 import Button from "components/Button";
@@ -16,6 +17,7 @@ type Props = {
   collection: Collection,
   ui: UiStore,
   onSubmit: () => void,
+  t: TFunction,
 };
 
 @observer
@@ -30,6 +32,7 @@ class CollectionEdit extends React.Component<Props> {
   handleSubmit = async (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     this.isSaving = true;
+    const { t } = this.props;
 
     try {
       await this.props.collection.save({
@@ -40,7 +43,7 @@ class CollectionEdit extends React.Component<Props> {
         private: this.private,
       });
       this.props.onSubmit();
-      this.props.ui.showToast("The collection was updated");
+      this.props.ui.showToast(t("The collection was updated"));
     } catch (err) {
       this.props.ui.showToast(err.message);
     } finally {
@@ -48,7 +51,7 @@ class CollectionEdit extends React.Component<Props> {
     }
   };
 
-  handleDescriptionChange = (getValue) => {
+  handleDescriptionChange = (getValue: () => string) => {
     this.description = getValue();
   };
 
@@ -66,17 +69,20 @@ class CollectionEdit extends React.Component<Props> {
   };
 
   render() {
+    const { t } = this.props;
+
     return (
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit the name and other details at any time, however doing
-            so often might confuse your team mates.
+            {t(
+              "You can edit the name and other details at any time, however doing so often might confuse your team mates."
+            )}
           </HelpText>
           <Flex>
             <Input
               type="text"
-              label="Name"
+              label={t("Name")}
               onChange={this.handleNameChange}
               value={this.name}
               required
@@ -92,27 +98,29 @@ class CollectionEdit extends React.Component<Props> {
           </Flex>
           <InputRich
             id={this.props.collection.id}
-            label="Description"
+            label={t("Description")}
             onChange={this.handleDescriptionChange}
             defaultValue={this.description || ""}
-            placeholder="More details about this collection…"
+            placeholder={t("More details about this collection…")}
             minHeight={68}
             maxHeight={200}
           />
           <Switch
             id="private"
-            label="Private collection"
+            label={t("Private collection")}
             onChange={this.handlePrivateChange}
             checked={this.private}
           />
           <HelpText>
-            A private collection will only be visible to invited team members.
+            {t(
+              "A private collection will only be visible to invited team members."
+            )}
           </HelpText>
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}
           >
-            {this.isSaving ? "Saving…" : "Save"}
+            {this.isSaving ? t("Saving…") : t("Save")}
           </Button>
         </form>
       </Flex>
@@ -120,4 +128,4 @@ class CollectionEdit extends React.Component<Props> {
   }
 }
 
-export default inject("ui")(CollectionEdit);
+export default withTranslation()<CollectionEdit>(inject("ui")(CollectionEdit));