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>
2020-11-29 20:04:58 -08:00
parent 63c73c9a51
commit 1285efc49a
85 changed files with 6432 additions and 2613 deletions
--- a/app/scenes/CollectionMembers/AddGroupsToCollection.js
+++ b/app/scenes/CollectionMembers/AddGroupsToCollection.js
@@ -3,12 +3,14 @@ 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 styled from "styled-components";
 import AuthStore from "stores/AuthStore";
 import CollectionGroupMembershipsStore from "stores/CollectionGroupMembershipsStore";
 import GroupsStore from "stores/GroupsStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
+import Group from "models/Group";
 import GroupNew from "scenes/GroupNew";
 import Button from "components/Button";
 import Empty from "components/Empty";
@@ -26,6 +28,7 @@ type Props = {
  collectionGroupMemberships: CollectionGroupMembershipsStore,
  groups: GroupsStore,
  onSubmit: () => void,
+  t: TFunction,
 };

@observer
@@ -52,50 +55,56 @@ class AddGroupsToCollection extends React.Component<Props> {
    });
  }, 250);

-  handleAddGroup = (group) => {
+  handleAddGroup = (group: Group) => {
+    const { t } = this.props;
+
    try {
      this.props.collectionGroupMemberships.create({
        collectionId: this.props.collection.id,
        groupId: group.id,
        permission: "read_write",
      });
-      this.props.ui.showToast(`${group.name} was added to the collection`);
+      this.props.ui.showToast(
+        t("{{ groupName }} was added to the collection", {
+          groupName: group.name,
+        })
+      );
    } catch (err) {
-      this.props.ui.showToast("Could not add user");
+      this.props.ui.showToast(t("Could not add user"));
      console.error(err);
    }
  };

  render() {
-    const { groups, collection, auth } = this.props;
+    const { groups, collection, auth, t } = this.props;
    const { user, team } = auth;
    if (!user || !team) return null;

    return (
      <Flex column>
        <HelpText>
-          Can’t find the group you’re looking for?{" "}
+          {t("Can’t find the group you’re looking for?")}{" "}
          <a role="button" onClick={this.handleNewGroupModalOpen}>
-            Create a group
+            {t("Create a group")}
          </a>
          .
        </HelpText>

        <Input
          type="search"
-          placeholder="Search by group name…"
+          placeholder={t("Search by group name…")}
          value={this.query}
          onChange={this.handleFilter}
-          label="Search groups"
+          label={t("Search groups")}
          labelHidden
          flex
        />
        <PaginatedList
          empty={
            this.query ? (
-              <Empty>No groups matching your search</Empty>
+              <Empty>{t("No groups matching your search")}</Empty>
            ) : (
-              <Empty>No groups left to add</Empty>
+              <Empty>{t("No groups left to add")}</Empty>
            )
          }
          items={groups.notInCollection(collection.id, this.query)}
@@ -108,7 +117,7 @@ class AddGroupsToCollection extends React.Component<Props> {
              renderActions={() => (
                <ButtonWrap>
                  <Button onClick={() => this.handleAddGroup(item)} neutral>
-                    Add
+                    {t("Add")}
                  </Button>
                </ButtonWrap>
              )}
@@ -116,7 +125,7 @@ class AddGroupsToCollection extends React.Component<Props> {
          )}
        />
        <Modal
-          title="Create a group"
+          title={t("Create a group")}
          onRequestClose={this.handleNewGroupModalClose}
          isOpen={this.newGroupModalOpen}
        >
@@ -131,9 +140,11 @@ const ButtonWrap = styled.div`
  margin-left: 6px;
 `;

-export default inject(
-  "auth",
-  "groups",
-  "collectionGroupMemberships",
-  "ui"
-)(AddGroupsToCollection);
+export default withTranslation()<AddGroupsToCollection>(
+  inject(
+    "auth",
+    "groups",
+    "collectionGroupMemberships",
+    "ui"
+  )(AddGroupsToCollection)
+);
--- a/app/scenes/CollectionMembers/AddPeopleToCollection.js
+++ b/app/scenes/CollectionMembers/AddPeopleToCollection.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 MembershipsStore from "stores/MembershipsStore";
 import UiStore from "stores/UiStore";
 import UsersStore from "stores/UsersStore";
 import Collection from "models/Collection";
+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 = {
  memberships: MembershipsStore,
  users: UsersStore,
  onSubmit: () => void,
+  t: TFunction,
 };

@observer
@@ -50,40 +53,43 @@ class AddPeopleToCollection extends React.Component<Props> {
    });
  }, 250);

-  handleAddUser = (user) => {
+  handleAddUser = (user: User) => {
+    const { t } = this.props;
    try {
      this.props.memberships.create({
        collectionId: this.props.collection.id,
        userId: user.id,
        permission: "read_write",
      });
-      this.props.ui.showToast(`${user.name} was added to the collection`);
+      this.props.ui.showToast(
+        t("{{ userName }} was added to the collection", { 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, collection, auth } = this.props;
+    const { users, collection, auth, t } = this.props;
    const { user, team } = auth;
    if (!user || !team) return null;

    return (
      <Flex column>
        <HelpText>
-          Need to add someone who’s not yet on the team yet?{" "}
+          {t("Need to add someone who’s not yet on the team yet?")}{" "}
          <a role="button" onClick={this.handleInviteModalOpen}>
-            Invite people to {team.name}
+            {t("Invite people 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")}
          autoFocus
          labelHidden
          flex
@@ -91,9 +97,9 @@ class AddPeopleToCollection 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.notInCollection(collection.id, this.query)}
@@ -108,7 +114,7 @@ class AddPeopleToCollection extends React.Component<Props> {
          )}
        />
        <Modal
-          title="Invite people"
+          title={t("Invite people")}
          onRequestClose={this.handleInviteModalClose}
          isOpen={this.inviteModalOpen}
        >
@@ -119,9 +125,6 @@ class AddPeopleToCollection extends React.Component<Props> {
  }
 }

-export default inject(
-  "auth",
-  "users",
-  "memberships",
-  "ui"
-)(AddPeopleToCollection);
+export default withTranslation()<AddPeopleToCollection>(
+  inject("auth", "users", "memberships", "ui")(AddPeopleToCollection)
+);
--- a/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
+++ b/app/scenes/CollectionMembers/components/CollectionGroupMemberListItem.js
@@ -1,5 +1,6 @@
 // @flow
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import CollectionGroupMembership from "models/CollectionGroupMembership";
 import Group from "models/Group";
@@ -7,10 +8,6 @@ import { DropdownMenu, DropdownMenuItem } from "components/DropdownMenu";
 import GroupListItem from "components/GroupListItem";
 import InputSelect from "components/InputSelect";

-const PERMISSIONS = [
-  { label: "Read only", value: "read" },
-  { label: "Read & Edit", value: "read_write" },
-];
 type Props = {
  group: Group,
  collectionGroupMembership: ?CollectionGroupMembership,
@@ -24,6 +21,16 @@ const MemberListItem = ({
  onUpdate,
  onRemove,
 }: Props) => {
+  const { t } = useTranslation();
+
+  const PERMISSIONS = React.useMemo(
+    () => [
+      { label: t("Read only"), value: "read" },
+      { label: t("Read & Edit"), value: "read_write" },
+    ],
+    [t]
+  );
+
  return (
    <GroupListItem
      group={group}
@@ -32,7 +39,7 @@ const MemberListItem = ({
      renderActions={({ openMembersModal }) => (
        <>
          <Select
-            label="Permissions"
+            label={t("Permissions")}
            options={PERMISSIONS}
            value={
              collectionGroupMembership
@@ -45,10 +52,12 @@ const MemberListItem = ({
          <ButtonWrap>
            <DropdownMenu>
              <DropdownMenuItem onClick={openMembersModal}>
-                Members…
+                {t("Members…")}
              </DropdownMenuItem>
              <hr />
-              <DropdownMenuItem onClick={onRemove}>Remove</DropdownMenuItem>
+              <DropdownMenuItem onClick={onRemove}>
+                {t("Remove")}
+              </DropdownMenuItem>
            </DropdownMenu>
          </ButtonWrap>
        </>
--- a/app/scenes/CollectionMembers/components/MemberListItem.js
+++ b/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>
--- a/app/scenes/CollectionMembers/components/UserListItem.js
+++ b/app/scenes/CollectionMembers/components/UserListItem.js
@@ -1,6 +1,7 @@
 // @flow
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import User from "models/User";
 import Avatar from "components/Avatar";
 import Badge from "components/Badge";
@@ -15,6 +16,8 @@ type Props = {
 };

 const UserListItem = ({ user, onAdd, canEdit }: Props) => {
+  const { t } = useTranslation();
+
  return (
    <ListItem
      title={user.name}
@@ -23,19 +26,21 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
        <>
          {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>}
        </>
      }
      actions={
        canEdit ? (
          <Button type="button" onClick={onAdd} icon={<PlusIcon />} neutral>
-            Add
+            {t("Add")}
          </Button>
        ) : undefined
      }