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/CollectionMenu.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 { withRouter, type RouterHistory } from "react-router-dom";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -27,6 +28,7 @@ type Props = {
   history: RouterHistory,
   onOpen?: () => void,
   onClose?: () => void,
+  t: TFunction,
 };
 
 @observer
@@ -112,6 +114,7 @@ class CollectionMenu extends React.Component<Props> {
       position,
       onOpen,
       onClose,
+      t,
     } = this.props;
     const can = policies.abilities(collection.id);
 
@@ -128,7 +131,7 @@ class CollectionMenu extends React.Component<Props> {
         </VisuallyHidden>
 
         <Modal
-          title="Collection permissions"
+          title={t("Collection permissions")}
           onRequestClose={this.handleMembersModalClose}
           isOpen={this.showCollectionMembers}
         >
@@ -143,12 +146,12 @@ class CollectionMenu extends React.Component<Props> {
           <DropdownMenuItems
             items={[
               {
-                title: "New document",
+                title: t("New document"),
                 visible: !!(collection && can.update),
                 onClick: this.onNewDocument,
               },
               {
-                title: "Import document",
+                title: t("Import document"),
                 visible: !!(collection && can.update),
                 onClick: this.onImportDocument,
               },
@@ -156,22 +159,22 @@ class CollectionMenu extends React.Component<Props> {
                 type: "separator",
               },
               {
-                title: "Edit…",
+                title: t("Edit…"),
                 visible: !!(collection && can.update),
                 onClick: this.handleEditCollectionOpen,
               },
               {
-                title: "Permissions…",
+                title: t("Permissions…"),
                 visible: !!(collection && can.update),
                 onClick: this.handleMembersModalOpen,
               },
               {
-                title: "Export…",
+                title: t("Export…"),
                 visible: !!(collection && can.export),
                 onClick: this.handleExportCollectionOpen,
               },
               {
-                title: "Delete…",
+                title: t("Delete…"),
                 visible: !!(collection && can.delete),
                 onClick: this.handleDeleteCollectionOpen,
               },
@@ -179,7 +182,7 @@ class CollectionMenu extends React.Component<Props> {
           />
         </DropdownMenu>
         <Modal
-          title="Edit collection"
+          title={t("Edit collection")}
           isOpen={this.showCollectionEdit}
           onRequestClose={this.handleEditCollectionClose}
         >
@@ -189,7 +192,7 @@ class CollectionMenu extends React.Component<Props> {
           />
         </Modal>
         <Modal
-          title="Delete collection"
+          title={t("Delete collection")}
           isOpen={this.showCollectionDelete}
           onRequestClose={this.handleDeleteCollectionClose}
         >
@@ -199,7 +202,7 @@ class CollectionMenu extends React.Component<Props> {
           />
         </Modal>
         <Modal
-          title="Export collection"
+          title={t("Export collection")}
           isOpen={this.showCollectionExport}
           onRequestClose={this.handleExportCollectionClose}
         >
@@ -213,8 +216,6 @@ class CollectionMenu extends React.Component<Props> {
   }
 }
 
-export default inject(
-  "ui",
-  "documents",
-  "policies"
-)(withRouter(CollectionMenu));
+export default withTranslation()<CollectionMenu>(
+  inject("ui", "documents", "policies")(withRouter(CollectionMenu))
+);