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/CollectionMembers/components/MemberListItem.js

@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Membership from "models/Membership";
 import User from "models/User";
@@ -12,10 +13,6 @@ import InputSelect from "components/InputSelect";
 import ListItem from "components/List/Item";
 import Time from "components/Time";
 
-const PERMISSIONS = [
-  { label: "Read only", value: "read" },
-  { label: "Read & Edit", value: "read_write" },
-];
 type Props = {
   user: User,
   membership?: ?Membership,
@@ -33,6 +30,16 @@ const MemberListItem = ({
   onAdd,
   canEdit,
 }: Props) => {
+  const { t } = useTranslation();
+
+  const PERMISSIONS = React.useMemo(
+    () => [
+      { label: t("Read only"), value: "read" },
+      { label: t("Read & Edit"), value: "read_write" },
+    ],
+    [t]
+  );
+
   return (
     <ListItem
       title={user.name}
@@ -40,13 +47,15 @@ const MemberListItem = ({
         <>
           {user.lastActiveAt ? (
             <>
-              Active <Time dateTime={user.lastActiveAt} /> ago
+              {t("Active {{ lastActiveAt }} ago", {
+                lastActiveAt: <Time dateTime={user.lastActiveAt} />,
+              })}
             </>
           ) : (
-            "Never signed in"
+            t("Never signed in")
           )}
-          {user.isInvited && <Badge>Invited</Badge>}
-          {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
+          {user.isInvited && <Badge>{t("Invited")}</Badge>}
+          {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
       image={<Avatar src={user.avatarUrl} size={40} />}
@@ -54,7 +63,7 @@ const MemberListItem = ({
         <Flex align="center">
           {canEdit && onUpdate && (
             <Select
-              label="Permissions"
+              label={t("Permissions")}
               options={PERMISSIONS}
               value={membership ? membership.permission : undefined}
               onChange={(ev) => onUpdate(ev.target.value)}
@@ -64,12 +73,14 @@ const MemberListItem = ({
           &nbsp;&nbsp;
           {canEdit && onRemove && (
             <DropdownMenu>
-              <DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
+              <DropdownMenuItem onClick={onRemove}>
+                {t("Remove")}
+              </DropdownMenuItem>
             </DropdownMenu>
           )}
           {canEdit && onAdd && (
             <Button onClick={onAdd} neutral>
-              Add
+              {t("Add")}
             </Button>
           )}
         </Flex>