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/UserMenu.js

@@ -2,6 +2,7 @@
 import { inject, observer } from "mobx-react";
 import * as React from "react";
 
+import { withTranslation, type TFunction } from "react-i18next";
 import UsersStore from "stores/UsersStore";
 import User from "models/User";
 import { DropdownMenu } from "components/DropdownMenu";
@@ -10,16 +11,20 @@ import DropdownMenuItems from "components/DropdownMenu/DropdownMenuItems";
 type Props = {
   user: User,
   users: UsersStore,
+  t: TFunction,
 };
 
 @observer
 class UserMenu extends React.Component<Props> {
   handlePromote = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    const { user, users } = this.props;
+    const { user, users, t } = this.props;
     if (
       !window.confirm(
-        `Are you want to make ${user.name} an admin? Admins can modify team and billing information.`
+        t(
+          "Are you sure you want to make {{ userName }} an admin? Admins can modify team and billing information.",
+          { userName: user.name }
+        )
       )
     ) {
       return;
@@ -29,8 +34,14 @@ class UserMenu extends React.Component<Props> {
 
   handleDemote = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    const { user, users } = this.props;
-    if (!window.confirm(`Are you want to make ${user.name} a member?`)) {
+    const { user, users, t } = this.props;
+    if (
+      !window.confirm(
+        t("Are you sure you want to make {{ userName }} a member?", {
+          userName: user.name,
+        })
+      )
+    ) {
       return;
     }
     users.demote(user);
@@ -38,10 +49,12 @@ class UserMenu extends React.Component<Props> {
 
   handleSuspend = (ev: SyntheticEvent<>) => {
     ev.preventDefault();
-    const { user, users } = this.props;
+    const { user, users, t } = this.props;
     if (
       !window.confirm(
-        "Are you want to suspend this account? Suspended users will be prevented from logging in."
+        t(
+          "Are you sure you want to suspend this account? Suspended users will be prevented from logging in."
+        )
       )
     ) {
       return;
@@ -62,19 +75,23 @@ class UserMenu extends React.Component<Props> {
   };
 
   render() {
-    const { user } = this.props;
+    const { user, t } = this.props;
 
     return (
       <DropdownMenu>
         <DropdownMenuItems
           items={[
             {
-              title: `Make ${user.name} a member…`,
+              title: t("Make {{ userName }} a member…", {
+                userName: user.name,
+              }),
               onClick: this.handleDemote,
               visible: user.isAdmin,
             },
             {
-              title: `Make ${user.name} an admin…`,
+              title: t("Make {{ userName }} an admin…", {
+                userName: user.name,
+              }),
               onClick: this.handlePromote,
               visible: !user.isAdmin && !user.isSuspended,
             },
@@ -82,17 +99,17 @@ class UserMenu extends React.Component<Props> {
               type: "separator",
             },
             {
-              title: "Revoke invite…",
+              title: t("Revoke invite…"),
               onClick: this.handleRevoke,
               visible: user.isInvited,
             },
             {
-              title: "Reactivate account",
+              title: t("Activate account"),
               onClick: this.handleActivate,
               visible: !user.isInvited && user.isSuspended,
             },
             {
-              title: "Suspend account",
+              title: t("Suspend account…"),
               onClick: this.handleSuspend,
               visible: !user.isInvited && !user.isSuspended,
             },
@@ -103,4 +120,4 @@ class UserMenu extends React.Component<Props> {
   }
 }
 
-export default inject("users")(UserMenu);
+export default withTranslation()<UserMenu>(inject("users")(UserMenu));