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/Sidebar/Main.js

@@ -12,6 +12,7 @@ import {
   PlusIcon,
 } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";
 
 import AuthStore from "stores/AuthStore";
@@ -34,6 +35,7 @@ type Props = {
   auth: AuthStore,
   documents: DocumentsStore,
   policies: PoliciesStore,
+  t: TFunction,
 };
 
 @observer
@@ -65,7 +67,7 @@ class MainSidebar extends React.Component<Props> {
   };
 
   render() {
-    const { auth, documents, policies } = this.props;
+    const { auth, documents, policies, t } = this.props;
     const { user, team } = auth;
     if (!user || !team) return null;
 
@@ -90,7 +92,7 @@ class MainSidebar extends React.Component<Props> {
                 to="/home"
                 icon={<HomeIcon color="currentColor" />}
                 exact={false}
-                label="Home"
+                label={t("Home")}
               />
               <SidebarLink
                 to={{
@@ -98,20 +100,20 @@ class MainSidebar extends React.Component<Props> {
                   state: { fromMenu: true },
                 }}
                 icon={<SearchIcon color="currentColor" />}
-                label="Search"
+                label={t("Search")}
                 exact={false}
               />
               <SidebarLink
                 to="/starred"
                 icon={<StarredIcon color="currentColor" />}
                 exact={false}
-                label="Starred"
+                label={t("Starred")}
               />
               <SidebarLink
                 to="/templates"
                 icon={<ShapesIcon color="currentColor" />}
                 exact={false}
-                label="Templates"
+                label={t("Templates")}
                 active={
                   documents.active ? documents.active.template : undefined
                 }
@@ -121,7 +123,7 @@ class MainSidebar extends React.Component<Props> {
                 icon={<EditIcon color="currentColor" />}
                 label={
                   <Drafts align="center">
-                    Drafts
+                    {t("Drafts")}
                     {documents.totalDrafts > 0 && (
                       <Bubble count={documents.totalDrafts} />
                     )}
@@ -146,7 +148,7 @@ class MainSidebar extends React.Component<Props> {
                 to="/archive"
                 icon={<ArchiveIcon color="currentColor" />}
                 exact={false}
-                label="Archive"
+                label={t("Archive")}
                 active={
                   documents.active
                     ? documents.active.isArchived && !documents.active.isDeleted
@@ -157,7 +159,7 @@ class MainSidebar extends React.Component<Props> {
                 to="/trash"
                 icon={<TrashIcon color="currentColor" />}
                 exact={false}
-                label="Trash"
+                label={t("Trash")}
                 active={
                   documents.active ? documents.active.isDeleted : undefined
                 }
@@ -167,21 +169,21 @@ class MainSidebar extends React.Component<Props> {
                   to="/settings/people"
                   onClick={this.handleInviteModalOpen}
                   icon={<PlusIcon color="currentColor" />}
-                  label="Invite people…"
+                  label={t("Invite people…")}
                 />
               )}
             </Section>
           </Scrollable>
         </Flex>
         <Modal
-          title="Invite people"
+          title={t("Invite people")}
           onRequestClose={this.handleInviteModalClose}
           isOpen={this.inviteModalOpen}
         >
           <Invite onSubmit={this.handleInviteModalClose} />
         </Modal>
         <Modal
-          title="Create a collection"
+          title={t("Create a collection")}
           onRequestClose={this.handleCreateCollectionModalClose}
           isOpen={this.createCollectionModalOpen}
         >
@@ -196,4 +198,6 @@ const Drafts = styled(Flex)`
   height: 24px;
 `;
 
-export default inject("documents", "policies", "auth")(MainSidebar);
+export default withTranslation()<MainSidebar>(
+  inject("documents", "policies", "auth")(MainSidebar)
+);

app/components/Sidebar/Settings.js

@@ -13,6 +13,7 @@ import {
   ExpandedIcon,
 } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import type { RouterHistory } from "react-router-dom";
 import styled from "styled-components";
 import AuthStore from "stores/AuthStore";
@@ -36,6 +37,7 @@ type Props = {
   history: RouterHistory,
   policies: PoliciesStore,
   auth: AuthStore,
+  t: TFunction,
 };
 
 @observer
@@ -45,7 +47,7 @@ class SettingsSidebar extends React.Component<Props> {
   };
 
   render() {
-    const { policies, auth } = this.props;
+    const { policies, t, auth } = this.props;
     const { team } = auth;
     if (!team) return null;
 
@@ -56,7 +58,7 @@ class SettingsSidebar extends React.Component<Props> {
         <HeaderBlock
           subheading={
             <ReturnToApp align="center">
-              <BackIcon color="currentColor" /> Return to App
+              <BackIcon color="currentColor" /> {t("Return to App")}
             </ReturnToApp>
           }
           teamName={team.name}
@@ -71,17 +73,17 @@ class SettingsSidebar extends React.Component<Props> {
               <SidebarLink
                 to="/settings"
                 icon={<ProfileIcon color="currentColor" />}
-                label="Profile"
+                label={t("Profile")}
               />
               <SidebarLink
                 to="/settings/notifications"
                 icon={<EmailIcon color="currentColor" />}
-                label="Notifications"
+                label={t("Notifications")}
               />
               <SidebarLink
                 to="/settings/tokens"
                 icon={<CodeIcon color="currentColor" />}
-                label="API Tokens"
+                label={t("API Tokens")}
               />
             </Section>
             <Section>
@@ -90,44 +92,44 @@ class SettingsSidebar extends React.Component<Props> {
                 <SidebarLink
                   to="/settings/details"
                   icon={<TeamIcon color="currentColor" />}
-                  label="Details"
+                  label={t("Details")}
                 />
               )}
               {can.update && (
                 <SidebarLink
                   to="/settings/security"
                   icon={<PadlockIcon color="currentColor" />}
-                  label="Security"
+                  label={t("Security")}
                 />
               )}
               <SidebarLink
                 to="/settings/people"
                 icon={<UserIcon color="currentColor" />}
                 exact={false}
-                label="People"
+                label={t("People")}
               />
               <SidebarLink
                 to="/settings/groups"
                 icon={<GroupIcon color="currentColor" />}
                 exact={false}
-                label="Groups"
+                label={t("Groups")}
               />
               <SidebarLink
                 to="/settings/shares"
                 icon={<LinkIcon color="currentColor" />}
-                label="Share Links"
+                label={t("Share Links")}
               />
               {can.export && (
                 <SidebarLink
                   to="/settings/export"
                   icon={<DocumentIcon color="currentColor" />}
-                  label="Export Data"
+                  label={t("Export Data")}
                 />
               )}
             </Section>
             {can.update && (
               <Section>
-                <Header>Integrations</Header>
+                <Header>{t("Integrations")}</Header>
                 <SidebarLink
                   to="/settings/integrations/slack"
                   icon={<SlackIcon color="currentColor" />}
@@ -144,7 +146,7 @@ class SettingsSidebar extends React.Component<Props> {
             )}
             {can.update && !isHosted && (
               <Section>
-                <Header>Installation</Header>
+                <Header>{t("Installation")}</Header>
                 <Version />
               </Section>
             )}
@@ -164,4 +166,6 @@ const ReturnToApp = styled(Flex)`
   height: 16px;
 `;
 
-export default inject("auth", "policies")(SettingsSidebar);
+export default withTranslation()<SettingsSidebar>(
+  inject("auth", "policies")(SettingsSidebar)
+);

app/components/Sidebar/components/Collections.js

@@ -2,6 +2,7 @@
 import { observer, inject } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import keydown from "react-keydown";
 import { withRouter, type RouterHistory } from "react-router-dom";
 
@@ -24,6 +25,7 @@ type Props = {
   documents: DocumentsStore,
   onCreateCollection: () => void,
   ui: UiStore,
+  t: TFunction,
 };
 
 @observer
@@ -52,7 +54,7 @@ class Collections extends React.Component<Props> {
   }
 
   render() {
-    const { collections, ui, policies, documents } = this.props;
+    const { collections, ui, policies, documents, t } = this.props;
 
     const content = (
       <>
@@ -71,7 +73,7 @@ class Collections extends React.Component<Props> {
           to="/collections"
           onClick={this.props.onCreateCollection}
           icon={<PlusIcon color="currentColor" />}
-          label="New collection…"
+          label={t("New collection…")}
           exact
         />
       </>
@@ -79,7 +81,7 @@ class Collections extends React.Component<Props> {
 
     return (
       <Flex column>
-        <Header>Collections</Header>
+        <Header>{t("Collections")}</Header>
         {collections.isLoaded ? (
           this.isPreloaded ? (
             content
@@ -94,9 +96,6 @@ class Collections extends React.Component<Props> {
   }
 }
 
-export default inject(
-  "collections",
-  "ui",
-  "documents",
-  "policies"
-)(withRouter(Collections));
+export default withTranslation()<Collections>(
+  inject("collections", "ui", "documents", "policies")(withRouter(Collections))
+);

app/components/Sidebar/components/DocumentLink.js

@@ -2,6 +2,7 @@
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { withTranslation, type TFunction } from "react-i18next";
 import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import Collection from "models/Collection";
@@ -23,6 +24,7 @@ type Props = {|
   activeDocumentRef?: (?HTMLElement) => void,
   prefetchDocument: (documentId: string) => Promise<void>,
   depth: number,
+  t: TFunction,
 |};
 
 @observer
@@ -84,6 +86,7 @@ class DocumentLink extends React.Component<Props> {
       prefetchDocument,
       depth,
       canUpdate,
+      t,
     } = this.props;
 
     const showChildren = !!(
@@ -96,7 +99,7 @@ class DocumentLink extends React.Component<Props> {
         this.isActiveDocument())
     );
     const document = documents.get(node.id);
-    const title = node.title || "Untitled";
+    const title = node.title || t("Untitled");
 
     return (
       <Flex
@@ -147,6 +150,7 @@ class DocumentLink extends React.Component<Props> {
                     prefetchDocument={prefetchDocument}
                     depth={depth + 1}
                     canUpdate={canUpdate}
+                    t={t}
                   />
                 ))}
               </DocumentChildren>
@@ -160,4 +164,4 @@ class DocumentLink extends React.Component<Props> {
 
 const DocumentChildren = styled(Flex)``;
 
-export default DocumentLink;
+export default withTranslation()<DocumentLink>(DocumentLink);