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>

server/api/__snapshots__/users.test.js.snap

@@ -9,6 +9,7 @@ Object {
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
     "isSuspended": false,
+    "language": null,
     "lastActiveAt": null,
     "name": "User 1",
   },
@@ -44,6 +45,7 @@ Object {
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
     "isSuspended": false,
+    "language": null,
     "lastActiveAt": null,
     "name": "User 1",
   },
@@ -79,6 +81,7 @@ Object {
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": true,
     "isSuspended": false,
+    "language": null,
     "lastActiveAt": null,
     "name": "User 1",
   },
@@ -123,6 +126,7 @@ Object {
     "id": "46fde1d4-0050-428f-9f0b-0bf77f4bdf61",
     "isAdmin": false,
     "isSuspended": true,
+    "language": null,
     "lastActiveAt": null,
     "name": "User 1",
   },

server/api/users.js

@@ -63,10 +63,11 @@ router.post("users.info", auth(), async (ctx) => {
 
 router.post("users.update", auth(), async (ctx) => {
   const { user } = ctx.state;
-  const { name, avatarUrl } = ctx.body;
+  const { name, avatarUrl, language } = ctx.body;
 
   if (name) user.name = name;
   if (avatarUrl) user.avatarUrl = avatarUrl;
+  if (language) user.language = language;
 
   await user.save();
 

server/migrations/20201106122752-i18n.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  up: async (queryInterface, Sequelize) => {
+    await queryInterface.addColumn('users', 'language', {
+      type: Sequelize.STRING,
+      defaultValue: process.env.DEFAULT_LANGUAGE,
+    });
+  },
+
+  down: async (queryInterface, Sequelize) => {
+    await queryInterface.removeColumn('users', 'language');
+  }
+};

server/models/User.js

@@ -4,6 +4,7 @@ import addMinutes from "date-fns/add_minutes";
 import subMinutes from "date-fns/sub_minutes";
 import JWT from "jsonwebtoken";
 import uuid from "uuid";
+import { languages } from "../../shared/i18n";
 import { ValidationError } from "../errors";
 import { sendEmail } from "../mailer";
 import { DataTypes, sequelize, encryptedFields } from "../sequelize";
@@ -36,6 +37,13 @@ const User = sequelize.define(
     lastSigninEmailSentAt: DataTypes.DATE,
     suspendedAt: DataTypes.DATE,
     suspendedById: DataTypes.UUID,
+    language: {
+      type: DataTypes.STRING,
+      defaultValue: process.env.DEFAULT_LANGUAGE,
+      validate: {
+        isIn: [languages],
+      },
+    },
   },
   {
     paranoid: true,

server/presenters/__snapshots__/user.test.js.snap

@@ -7,6 +7,7 @@ Object {
   "id": "123",
   "isAdmin": undefined,
   "isSuspended": undefined,
+  "language": undefined,
   "lastActiveAt": undefined,
   "name": "Test User",
 }
@@ -19,6 +20,7 @@ Object {
   "id": "123",
   "isAdmin": undefined,
   "isSuspended": undefined,
+  "language": undefined,
   "lastActiveAt": undefined,
   "name": "Test User",
 }

server/presenters/user.js

@@ -12,6 +12,7 @@ type UserPresentation = {
   email?: string,
   isAdmin: boolean,
   isSuspended: boolean,
+  language: string,
 };
 
 export default (user: User, options: Options = {}): ?UserPresentation => {
@@ -23,6 +24,7 @@ export default (user: User, options: Options = {}): ?UserPresentation => {
   userData.isAdmin = user.isAdmin;
   userData.isSuspended = user.isSuspended;
   userData.avatarUrl = user.avatarUrl;
+  userData.language = user.language;
 
   if (options.includeDetails) {
     userData.email = user.email;

server/routes.js

@@ -6,7 +6,9 @@ import Koa from "koa";
 import Router from "koa-router";
 import sendfile from "koa-sendfile";
 import serve from "koa-static";
+import { languages } from "../shared/i18n";
 import environment from "./env";
+import { NotFoundError } from "./errors";
 import apexRedirect from "./middlewares/apexRedirect";
 import { opensearchResponse } from "./utils/opensearch";
 import { robotsResponse } from "./utils/robots";
@@ -72,6 +74,25 @@ if (process.env.NODE_ENV === "production") {
   });
 }
 
+router.get("/locales/:lng.json", async (ctx) => {
+  let { lng } = ctx.params;
+
+  if (!languages.includes(lng)) {
+    throw new NotFoundError();
+  }
+
+  if (process.env.NODE_ENV === "production") {
+    ctx.set({
+      "Cache-Control": `max-age=${7 * 24 * 60 * 60}`,
+    });
+  }
+
+  await sendfile(
+    ctx,
+    path.join(__dirname, "../shared/i18n/locales", lng, "translation.json")
+  );
+});
+
 router.get("/robots.txt", (ctx) => {
   ctx.body = robotsResponse(ctx);
 });