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/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);