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/GroupMembers/AddPeopleToGroup.js

@@ -3,11 +3,13 @@ import { debounce } from "lodash";
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import AuthStore from "stores/AuthStore";
 import GroupMembershipsStore from "stores/GroupMembershipsStore";
 import UiStore from "stores/UiStore";
 import UsersStore from "stores/UsersStore";
 import Group from "models/Group";
+import User from "models/User";
 import Invite from "scenes/Invite";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
@@ -24,6 +26,7 @@ type Props = {
   groupMemberships: GroupMembershipsStore,
   users: UsersStore,
   onSubmit: () => void,
+  t: TFunction,
 };
 
 @observer
@@ -50,40 +53,45 @@ class AddPeopleToGroup extends React.Component<Props> {
     });
   }, 250);
 
-  handleAddUser = async (user) => {
+  handleAddUser = async (user: User) => {
+    const { t } = this.props;
+
     try {
       await this.props.groupMemberships.create({
         groupId: this.props.group.id,
         userId: user.id,
       });
-      this.props.ui.showToast(`${user.name} was added to the group`);
+      this.props.ui.showToast(
+        t(`{{userName}} was added to the group`, { userName: user.name })
+      );
     } catch (err) {
-      this.props.ui.showToast("Could not add user");
+      this.props.ui.showToast(t("Could not add user"));
     }
   };
 
   render() {
-    const { users, group, auth } = this.props;
+    const { users, group, auth, t } = this.props;
     const { user, team } = auth;
     if (!user || !team) return null;
 
     return (
       <Flex column>
         <HelpText>
-          Add team members below to give them access to the group. Need to add
-          someone who’s not yet on the team yet?{" "}
+          {t(
+            "Add team members below to give them access to the group. Need to add someone who’s not yet on the team yet?"
+          )}{" "}
           <a role="button" onClick={this.handleInviteModalOpen}>
-            Invite them to {team.name}
+            {t("Invite them to {{teamName}}", { teamName: team.name })}
           </a>
           .
         </HelpText>
 
         <Input
           type="search"
-          placeholder="Search by name…"
+          placeholder={t("Search by name…")}
           value={this.query}
           onChange={this.handleFilter}
-          label="Search people"
+          label={t("Search people")}
           labelHidden
           autoFocus
           flex
@@ -91,9 +99,9 @@ class AddPeopleToGroup extends React.Component<Props> {
         <PaginatedList
           empty={
             this.query ? (
-              <Empty>No people matching your search</Empty>
+              <Empty>{t("No people matching your search")}</Empty>
             ) : (
-              <Empty>No people left to add</Empty>
+              <Empty>{t("No people left to add")}</Empty>
             )
           }
           items={users.notInGroup(group.id, this.query)}
@@ -108,7 +116,7 @@ class AddPeopleToGroup extends React.Component<Props> {
           )}
         />
         <Modal
-          title="Invite people"
+          title={t("Invite people")}
           onRequestClose={this.handleInviteModalClose}
           isOpen={this.inviteModalOpen}
         >
@@ -119,9 +127,6 @@ class AddPeopleToGroup extends React.Component<Props> {
   }
 }
 
-export default inject(
-  "auth",
-  "users",
-  "groupMemberships",
-  "ui"
-)(AddPeopleToGroup);
+export default withTranslation()<AddPeopleToGroup>(
+  inject("auth", "users", "groupMemberships", "ui")(AddPeopleToGroup)
+);

app/scenes/GroupMembers/GroupMembers.js

@@ -3,12 +3,14 @@ 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 AuthStore from "stores/AuthStore";
 import GroupMembershipsStore from "stores/GroupMembershipsStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import UsersStore from "stores/UsersStore";
 import Group from "models/Group";
+import User from "models/User";
 import Button from "components/Button";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
@@ -26,6 +28,7 @@ type Props = {
   users: UsersStore,
   policies: PoliciesStore,
   groupMemberships: GroupMembershipsStore,
+  t: TFunction,
 };
 
 @observer
@@ -40,20 +43,24 @@ class GroupMembers extends React.Component<Props> {
     this.addModalOpen = false;
   };
 
-  handleRemoveUser = async (user) => {
+  handleRemoveUser = async (user: User) => {
+    const { t } = this.props;
+
     try {
       await this.props.groupMemberships.delete({
         groupId: this.props.group.id,
         userId: user.id,
       });
-      this.props.ui.showToast(`${user.name} was removed from the group`);
+      this.props.ui.showToast(
+        t(`{{userName}} was removed from the group`, { userName: user.name })
+      );
     } catch (err) {
-      this.props.ui.showToast("Could not remove user");
+      this.props.ui.showToast(t("Could not remove user"));
     }
   };
 
   render() {
-    const { group, users, groupMemberships, policies, auth } = this.props;
+    const { group, users, groupMemberships, policies, t, auth } = this.props;
     const { user } = auth;
     if (!user) return null;
 
@@ -75,7 +82,7 @@ class GroupMembers extends React.Component<Props> {
                 icon={<PlusIcon />}
                 neutral
               >
-                Add people…
+                {t("Add people…")}
               </Button>
             </span>
           </>
@@ -90,7 +97,7 @@ class GroupMembers extends React.Component<Props> {
           items={users.inGroup(group.id)}
           fetch={groupMemberships.fetchPage}
           options={{ id: group.id }}
-          empty={<Empty>This group has no members.</Empty>}
+          empty={<Empty>{t("This group has no members.")}</Empty>}
           renderItem={(item) => (
             <GroupMemberListItem
               key={item.id}
@@ -119,10 +126,6 @@ class GroupMembers extends React.Component<Props> {
   }
 }
 
-export default inject(
-  "auth",
-  "users",
-  "policies",
-  "groupMemberships",
-  "ui"
-)(GroupMembers);
+export default withTranslation()<GroupMembers>(
+  inject("auth", "users", "policies", "groupMemberships", "ui")(GroupMembers)
+);