merge with branch feature/update_react_i18next

scm-plugins/scm-git-plugin/src/main/js/CloneInformation.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
   url: string;
   repository: Repository;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class CloneInformation extends React.Component<Props> {
@@ -54,4 +51,4 @@ class CloneInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(CloneInformation);
+export default withTranslation("plugins")(CloneInformation);

scm-plugins/scm-git-plugin/src/main/js/GitBranchInformation.tsx

@@ -1,10 +1,9 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   branch: Branch;
-  t: (p: string) => string;
 };
 
 class GitBranchInformation extends React.Component<Props> {
@@ -26,4 +25,4 @@ class GitBranchInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(GitBranchInformation);
+export default withTranslation("plugins")(GitBranchInformation);

scm-plugins/scm-git-plugin/src/main/js/GitConfigurationForm.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Links } from "@scm-manager/ui-types";
-
 import { InputField, Checkbox } from "@scm-manager/ui-components";
 
 type Configuration = {
@@ -11,14 +10,11 @@ type Configuration = {
   _links: Links;
 };
 
-type Props = {
+type Props = WithTranslation & {
   initialConfiguration: Configuration;
   readOnly: boolean;
 
   onConfigurationChange: (p1: Configuration, p2: boolean) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = Configuration & {};
@@ -76,4 +72,4 @@ class GitConfigurationForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("plugins")(GitConfigurationForm);
+export default withTranslation("plugins")(GitConfigurationForm);

scm-plugins/scm-git-plugin/src/main/js/GitGlobalConfiguration.tsx

@@ -1,12 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Title, Configuration } from "@scm-manager/ui-components";
 import GitConfigurationForm from "./GitConfigurationForm";
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
-
-  t: (p: string) => string;
 };
 
 class GitGlobalConfiguration extends React.Component<Props> {
@@ -22,4 +20,4 @@ class GitGlobalConfiguration extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(GitGlobalConfiguration);
+export default withTranslation("plugins")(GitGlobalConfiguration);

scm-plugins/scm-git-plugin/src/main/js/GitMergeInformation.tsx

@@ -1,12 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   target: string;
   source: string;
-  t: (p: string) => string;
 };
 
 class GitMergeInformation extends React.Component<Props> {
@@ -47,4 +46,4 @@ class GitMergeInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(GitMergeInformation);
+export default withTranslation("plugins")(GitMergeInformation);

scm-plugins/scm-git-plugin/src/main/js/RepositoryConfig.tsx

@@ -1,12 +1,10 @@
 import React, { FormEvent } from "react";
-
+import { WithTranslation, withTranslation } from "react-i18next";
-import { apiClient, BranchSelector, ErrorPage, Loading, Subtitle, SubmitButton } from "@scm-manager/ui-components";
 import { Branch, Repository, Link } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { apiClient, BranchSelector, ErrorPage, Loading, Subtitle, SubmitButton } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -196,4 +194,4 @@ class RepositoryConfig extends React.Component<Props, State> {
   };
 }
 
-export default translate("plugins")(RepositoryConfig);
+export default withTranslation("plugins")(RepositoryConfig);

scm-plugins/scm-hg-plugin/src/main/js/HgBranchInformation.tsx

@@ -1,10 +1,9 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   branch: Branch;
-  t: (p: string) => string;
 };
 
 class HgBranchInformation extends React.Component<Props> {
@@ -26,4 +25,4 @@ class HgBranchInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(HgBranchInformation);
+export default withTranslation("plugins")(HgBranchInformation);

scm-plugins/scm-hg-plugin/src/main/js/HgConfigurationForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Links } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import { InputField, Checkbox } from "@scm-manager/ui-components";
 
 type Configuration = {
@@ -15,14 +15,11 @@ type Configuration = {
   _links: Links;
 };
 
-type Props = {
+type Props = WithTranslation & {
   initialConfiguration: Configuration;
   readOnly: boolean;
 
   onConfigurationChange: (p1: Configuration, p2: boolean) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = Configuration & {
@@ -127,4 +124,4 @@ class HgConfigurationForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("plugins")(HgConfigurationForm);
+export default withTranslation("plugins")(HgConfigurationForm);

scm-plugins/scm-hg-plugin/src/main/js/HgGlobalConfiguration.tsx

@@ -1,13 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Title, Configuration } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 import HgConfigurationForm from "./HgConfigurationForm";
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class HgGlobalConfiguration extends React.Component<Props> {
@@ -22,4 +19,4 @@ class HgGlobalConfiguration extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(HgGlobalConfiguration);
+export default withTranslation("plugins")(HgGlobalConfiguration);

scm-plugins/scm-hg-plugin/src/main/js/ProtocolInformation.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { repositories } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { repositories } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
-  t: (p: string) => string;
 };
 
 class ProtocolInformation extends React.Component<Props> {
@@ -62,4 +61,4 @@ class ProtocolInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(ProtocolInformation);
+export default withTranslation("plugins")(ProtocolInformation);

scm-plugins/scm-svn-plugin/src/main/js/ProtocolInformation.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { repositories } from "@scm-manager/ui-components";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { repositories } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
-  t: (p: string) => string;
 };
 
 class ProtocolInformation extends React.Component<Props> {
@@ -26,4 +25,4 @@ class ProtocolInformation extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(ProtocolInformation);
+export default withTranslation("plugins")(ProtocolInformation);

scm-plugins/scm-svn-plugin/src/main/js/SvnConfigurationForm.tsx

@@ -1,6 +1,6 @@
 import React from "react";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { Links } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import { Checkbox, Select } from "@scm-manager/ui-components";
 
 type Configuration = {
@@ -9,14 +9,11 @@ type Configuration = {
   _links: Links;
 };
 
-type Props = {
+type Props = WithTranslation & {
   initialConfiguration: Configuration;
   readOnly: boolean;
 
   onConfigurationChange: (p1: Configuration, p2: boolean) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = Configuration;
@@ -84,4 +81,4 @@ class SvnConfigurationForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("plugins")(SvnConfigurationForm);
+export default withTranslation("plugins")(SvnConfigurationForm);

scm-plugins/scm-svn-plugin/src/main/js/SvnGlobalConfiguration.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Title, Configuration } from "@scm-manager/ui-components";
 import SvnConfigurationForm from "./SvnConfigurationForm";
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class SvnGlobalConfiguration extends React.Component<Props> {
@@ -22,4 +19,4 @@ class SvnGlobalConfiguration extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(SvnGlobalConfiguration);
+export default withTranslation("plugins")(SvnGlobalConfiguration);

scm-ui/ui-components/.storybook/config.js

@@ -1,16 +1,19 @@
 import i18n from "i18next";
-import { reactI18nextModule } from "react-i18next";
+import { initReactI18next } from "react-i18next";
 import { addDecorator, configure } from "@storybook/react";
 import { withI18next } from "storybook-addon-i18next";
 
 import "!style-loader!css-loader!sass-loader!../../ui-styles/src/scm.scss";
 
-i18n.use(reactI18nextModule).init({
+i18n.use(initReactI18next).init({
   whitelist: ["en", "de", "es"],
   lng: "en",
   fallbackLng: "en",
   interpolation: {
     escapeValue: false
+  },
+  react: {
+    useSuspense: false
   }
 });
 

scm-ui/ui-components/package.json

@@ -29,7 +29,6 @@
     "@types/query-string": "5",
     "@types/react": "^16.9.9",
     "@types/react-dom": "^16.9.2",
-    "@types/react-i18next": "^7.8.3",
     "@types/react-router-dom": "^5.1.0",
     "@types/react-select": "^2.0.19",
     "@types/react-syntax-highlighter": "^11.0.1",
@@ -54,7 +53,7 @@
     "react": "^16.8.6",
     "react-diff-view": "^1.8.1",
     "react-dom": "^16.8.6",
-    "react-i18next": "^7.9.0",
+    "react-i18next": "^10.13.1",
     "react-markdown": "^4.0.6",
     "react-router-dom": "^5.1.2",
     "react-select": "^2.1.2",

scm-ui/ui-components/src/BackendErrorNotification.tsx

@@ -2,11 +2,10 @@ import React from "react";
 import { BackendError } from "./errors";
 import Notification from "./Notification";
 
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   error: BackendError;
-  t: (p: string) => string;
 };
 
 class BackendErrorNotification extends React.Component<Props> {
@@ -122,4 +121,4 @@ class BackendErrorNotification extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(BackendErrorNotification);
+export default withTranslation("plugins")(BackendErrorNotification);

scm-ui/ui-components/src/Breadcrumb.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import Icon from "./Icon";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
   defaultBranch: Branch;
@@ -15,9 +15,6 @@ type Props = {
   revision: string;
   path: string;
   baseUrl: string;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 const FlexStartNav = styled.nav`
@@ -99,4 +96,4 @@ class Breadcrumb extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Breadcrumb);
+export default withTranslation("commons")(Breadcrumb);

scm-ui/ui-components/src/DateFromNow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedI18nProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { formatDistance, format, parseISO, Locale } from "date-fns";
 import { enUS, de, es } from "date-fns/locale";
 import styled from "styled-components";
@@ -16,7 +16,7 @@ const supportedLocales: LocaleMap = {
   es
 };
 
-type Props = InjectedI18nProps & {
+type Props = WithTranslation & {
   date?: DateInput;
   timeZone?: string;
 
@@ -90,4 +90,4 @@ class DateFromNow extends React.Component<Props> {
   }
 }
 
-export default translate()(DateFromNow);
+export default withTranslation()(DateFromNow);

scm-ui/ui-components/src/ErrorNotification.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { BackendError, ForbiddenError, UnauthorizedError } from "./errors";
 import Notification from "./Notification";
 import BackendErrorNotification from "./BackendErrorNotification";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   error?: Error;
 };
 
@@ -40,4 +39,4 @@ class ErrorNotification extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ErrorNotification);
+export default withTranslation("commons")(ErrorNotification);

scm-ui/ui-components/src/GroupAutocomplete.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
+class GroupAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
-  // Context props
-  t: (p: string) => string;
-};
-
-class GroupAutocomplete extends React.Component<Props> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class GroupAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(GroupAutocomplete);
+export default withTranslation("commons")(GroupAutocomplete);

scm-ui/ui-components/src/LinkPaginator.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   filter?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class LinkPaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class LinkPaginator extends React.Component<Props> {
     return null;
   }
 }
-export default translate("commons")(LinkPaginator);
+export default withTranslation("commons")(LinkPaginator);

scm-ui/ui-components/src/Loading.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import Image from "./Image";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   message?: string;
 };
 
@@ -33,4 +32,4 @@ class Loading extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(Loading);
+export default withTranslation("commons")(Loading);

scm-ui/ui-components/src/Logo.tsx

@@ -1,16 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import Image from "./Image";
 
-type Props = {
+class Logo extends React.Component<WithTranslation> {
-  t: (p: string) => string;
-};
-
-class Logo extends React.Component<Props> {
   render() {
     const { t } = this.props;
     return <Image src="/images/logo.png" alt={t("logo.alt")} />;
   }
 }
 
-export default translate("commons")(Logo);
+export default withTranslation("commons")(Logo);

scm-ui/ui-components/src/Paginator.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection, Link } from "@scm-manager/ui-types";
 import { Button } from "./buttons";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   onPageChange?: (p: string) => void;
-  t: (p: string) => string;
 };
 
 class Paginator extends React.Component<Props> {
@@ -108,4 +107,4 @@ class Paginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(Paginator);
+export default withTranslation("commons")(Paginator);

scm-ui/ui-components/src/StatePaginator.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PagedCollection } from "@scm-manager/ui-types";
 import { Button } from "./index";
 
-type Props = {
+type Props = WithTranslation & {
   collection: PagedCollection;
   page: number;
   updatePage: (p: number) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class StatePaginator extends React.Component<Props> {
@@ -123,4 +120,4 @@ class StatePaginator extends React.Component<Props> {
     );
   }
 }
-export default translate("commons")(StatePaginator);
+export default withTranslation("commons")(StatePaginator);

scm-ui/ui-components/src/UserAutocomplete.tsx

@@ -1,14 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import AutocompleteProps from "./UserGroupAutocomplete";
 import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-type Props = AutocompleteProps & {
+class UserAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
-  // Context props
-  t: (p: string) => string;
-};
-
-class UserAutocomplete extends React.Component<Props> {
   render() {
     const { t } = this.props;
     return (
@@ -23,4 +18,4 @@ class UserAutocomplete extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(UserAutocomplete);
+export default withTranslation("commons")(UserAutocomplete);

scm-ui/ui-components/src/config/Configuration.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Links, Link } from "@scm-manager/ui-types";
 import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
 import { FormEvent } from "react";
@@ -10,12 +10,9 @@ type RenderProps = {
   onConfigurationChange: (p1: ConfigurationType, p2: boolean) => void;
 };
 
-type Props = {
+type Props = WithTranslation & {
   link: string;
   render: (props: RenderProps) => any; // ???
-
-  // context props
-  t: (p: string) => string;
 };
 
 type ConfigurationType = {
@@ -190,4 +187,4 @@ class Configuration extends React.Component<Props, State> {
   }
 }
 
-export default translate("config")(Configuration);
+export default withTranslation("config")(Configuration);

scm-ui/ui-components/src/config/ConfigurationBinder.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Links, Link } from "@scm-manager/ui-types";
 
 type GlobalRouteProps = {
@@ -15,6 +15,8 @@ type RepositoryRouteProps = {
   repository: Repository;
 };
 
+type RepositoryNavProps = WithTranslation & { url: string };
+
 class ConfigurationBinder {
   i18nNamespace = "plugins";
 
@@ -34,7 +36,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const ConfigNavLink = translate(this.i18nNamespace)(({ t }) => {
+    const ConfigNavLink = withTranslation(this.i18nNamespace)(({ t }) => {
       return this.navLink("/admin/settings" + to, labelI18nKey, t);
     });
 
@@ -64,7 +66,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + to, labelI18nKey, t);
     });
 
@@ -94,7 +96,7 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = translate(this.i18nNamespace)(({ t, url }) => {
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
       return this.navLink(url + "/settings" + to, labelI18nKey, t);
     });
 

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -1,14 +1,10 @@
-import React, { ChangeEvent } from "react";
+import React, { ChangeEvent, FormEvent } from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
-import { FormEvent } from "react";
 
-type Props = {
+type Props = WithTranslation & {
   filter: (p: string) => void;
   value?: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -59,4 +55,4 @@ class FilterInput extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(FilterInput);
+export default withTranslation("commons")(FilterInput);

scm-ui/ui-components/src/forms/MemberNameTagGroup.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { DisplayedUser } from "@scm-manager/ui-types";
 import TagGroup from "./TagGroup";
 
-type Props = {
+type Props = WithTranslation & {
   members: string[];
   memberListChanged: (p: string[]) => void;
   label?: string;
   helpText?: string;
-  t: (p: string) => string;
 };
 
 class MemberNameTagGroup extends React.Component<Props> {
@@ -39,4 +38,4 @@ class MemberNameTagGroup extends React.Component<Props> {
   };
 }
 
-export default translate("groups")(MemberNameTagGroup);
+export default withTranslation("groups")(MemberNameTagGroup);

scm-ui/ui-components/src/forms/PasswordConfirmation.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import InputField from "./InputField";
 
 type State = {
@@ -8,11 +8,9 @@ type State = {
   passwordValid: boolean;
   passwordConfirmationFailed: boolean;
 };
-type Props = {
+type Props = WithTranslation & {
   passwordChanged: (p1: string, p2: boolean) => void;
   passwordValidator?: (p: string) => boolean;
-  // Context props
-  t: (p: string) => string;
 };
 
 class PasswordConfirmation extends React.Component<Props, State> {
@@ -106,4 +104,4 @@ class PasswordConfirmation extends React.Component<Props, State> {
   };
 }
 
-export default translate("commons")(PasswordConfirmation);
+export default withTranslation("commons")(PasswordConfirmation);

scm-ui/ui-components/src/navigation/PrimaryNavigation.tsx

@@ -1,11 +1,10 @@
 import React, { ReactNode } from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 import { Links } from "@scm-manager/ui-types";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   links: Links;
 };
 
@@ -88,4 +87,4 @@ class PrimaryNavigation extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(PrimaryNavigation);
+export default withTranslation("commons")(PrimaryNavigation);

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate, InjectedTranslateProps } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 // @ts-ignore
@@ -10,7 +10,7 @@ import Icon from "../Icon";
 import { File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
 
 type Props = DiffObjectProps &
-  InjectedTranslateProps & {
+  WithTranslation & {
     file: File;
     defaultCollapse?: boolean;
   };
@@ -271,4 +271,4 @@ class DiffFile extends React.Component<Props, State> {
   }
 }
 
-export default translate("repos")(DiffFile);
+export default withTranslation("repos")(DiffFile);

scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import { Changeset } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetAuthor extends React.Component<Props> {
@@ -50,4 +47,4 @@ class ChangesetAuthor extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetAuthor);
+export default withTranslation("repos")(ChangesetAuthor);

scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Repository } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "../../buttons";
 import { createChangesetLink, createSourcesLink } from "./changesets";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetButtonGroup extends React.Component<Props> {
@@ -26,4 +23,4 @@ class ChangesetButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetButtonGroup);
+export default withTranslation("repos")(ChangesetButtonGroup);

scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx

@@ -2,14 +2,11 @@ import React from "react";
 import { Changeset, Link } from "@scm-manager/ui-types";
 import LoadingDiff from "../LoadingDiff";
 import Notification from "../../Notification";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
   defaultCollapse?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetDiff extends React.Component<Props> {
@@ -36,4 +33,4 @@ class ChangesetDiff extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetDiff);
+export default withTranslation("repos")(ChangesetDiff);

scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Interpolate, translate } from "react-i18next";
+import { Trans } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -15,9 +15,6 @@ import ChangesetButtonGroup from "./ChangesetButtonGroup";
 type Props = {
   repository: Repository;
   changeset: Changeset;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const Wrapper = styled.div`
@@ -98,10 +95,10 @@ class ChangesetRow extends React.Component<Props> {
                       </ExtensionPoint>
                     </h4>
                     <p className="is-hidden-touch">
-                      <Interpolate i18nKey="changeset.summary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="repos:changeset.summary" components={[changesetId, dateFromNow]} />
                     </p>
                     <p className="is-hidden-desktop">
-                      <Interpolate i18nKey="changeset.shortSummary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="repos:changeset.shortSummary" components={[changesetId, dateFromNow]} />
                     </p>
                     <AuthorWrapper className="is-size-7">
                       <ChangesetAuthor changeset={changeset} />
@@ -131,4 +128,4 @@ class ChangesetRow extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetRow);
+export default ChangesetRow;

scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Tag } from "@scm-manager/ui-types";
 import Tooltip from "../../Tooltip";
 import ChangesetTagBase from "./ChangesetTagBase";
 
-type Props = {
+type Props = WithTranslation & {
   tags: Tag[];
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ChangesetTagsCollapsed extends React.Component<Props> {
@@ -23,4 +20,4 @@ class ChangesetTagsCollapsed extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ChangesetTagsCollapsed);
+export default withTranslation("repos")(ChangesetTagsCollapsed);

scm-ui/ui-plugins/package.json

@@ -27,7 +27,7 @@
     "jest": "^24.9.0",
     "query-string": "^5.0.1",
     "react": "^16.10.2",
-    "react-i18next": "^7.9.0",
+    "react-i18next": "^10.13.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.0",

scm-ui/ui-tests/i18n.ts

@@ -1,6 +1,6 @@
 jest.mock("react-i18next", () => ({
   // this mock makes sure any components using the translate HoC receive the t function as a prop
-  translate: () => (Component: any) => {
+  withTranslation: () => (Component: any) => {
     Component.defaultProps = {
       ...Component.defaultProps,
       t: (key: string) => key

scm-ui/ui-webapp/package.json

@@ -7,14 +7,14 @@
     "@scm-manager/ui-extensions": "^2.0.0-SNAPSHOT",
     "classnames": "^2.2.5",
     "history": "^4.10.1",
-    "i18next": "^11.4.0",
+    "i18next": "^17.3.0",
-    "i18next-browser-languagedetector": "^2.2.2",
+    "i18next-browser-languagedetector": "^4.0.0",
-    "i18next-fetch-backend": "^0.1.0",
+    "i18next-fetch-backend": "^2.2.0",
     "memoize-one": "^5.0.4",
     "query-string": "5",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-i18next": "^7.9.0",
+    "react-i18next": "^10.13.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^5.1.2",
     "react-select": "^2.1.2",
@@ -38,7 +38,6 @@
     "@types/query-string": "5",
     "@types/react": "^16.9.9",
     "@types/react-dom": "^16.9.2",
-    "@types/react-i18next": "^7.8.3",
     "@types/react-redux": "5.0.7",
     "@types/react-router-dom": "^5.1.0",
     "@types/styled-components": "^4.1.19",

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -78,8 +78,8 @@
   },
   "changeset": {
     "description": "Beschreibung",
-    "summary": "Changeset {{id}} wurde committet {{time}}",
+    "summary": "Changeset <0/> wurde <1/> committet",
-    "shortSummary": "Committet {{id}} {{time}}",
+    "shortSummary": "Committet <0/> <1/>",
     "tags": "Tags",
     "diffNotSupported": "Diff des Changesets wird von diesem Repositorytyp nicht unterstützt",
     "author": {

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -78,8 +78,8 @@
   },
   "changeset": {
     "description": "Description",
-    "summary": "Changeset {{id}} was committed {{time}}",
+    "summary": "Changeset <0/> was committed <1/>",
-    "shortSummary": "Committed {{id}} {{time}}",
+    "shortSummary": "Committed <0/> <1/>",
     "tags": "Tags",
     "diffNotSupported": "Diff of changesets is not supported by the type of repository",
     "author": {

scm-ui/ui-webapp/public/locales/es/repos.json

@@ -78,8 +78,8 @@
   },
   "changeset": {
     "description": "Descripción",
-    "summary": "El changeset {{id}} fue entregado {{time}}",
+    "summary": "El changeset <0/> fue entregado <1/>",
-    "shortSummary": "Entregado {{id}} {{time}}",
+    "shortSummary": "Entregado <0/> <1/>",
     "tags": "Etiquetas",
     "diffNotSupported": "La comparación de changesets no es soportada por el tipo de repositorio",
     "author": {

scm-ui/ui-webapp/src/admin/components/form/BaseUrlSettings.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField, Subtitle } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   forceBaseUrl: boolean;
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -49,4 +48,4 @@ class BaseUrlSettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(BaseUrlSettings);
+export default withTranslation("config")(BaseUrlSettings);

scm-ui/ui-webapp/src/admin/components/form/ConfigForm.tsx

@@ -1,21 +1,19 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
-import { SubmitButton, Notification } from "@scm-manager/ui-components";
 import { NamespaceStrategies, Config } from "@scm-manager/ui-types";
+import { SubmitButton, Notification } from "@scm-manager/ui-components";
 import ProxySettings from "./ProxySettings";
 import GeneralSettings from "./GeneralSettings";
 import BaseUrlSettings from "./BaseUrlSettings";
 import LoginAttempt from "./LoginAttempt";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: Config) => void;
   config?: Config;
   loading?: boolean;
   configReadPermission: boolean;
   configUpdatePermission: boolean;
   namespaceStrategies?: NamespaceStrategies;
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -189,4 +187,4 @@ class ConfigForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(ConfigForm);
+export default withTranslation("config")(ConfigForm);

scm-ui/ui-webapp/src/admin/components/form/GeneralSettings.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField } from "@scm-manager/ui-components";
 import { NamespaceStrategies } from "@scm-manager/ui-types";
 import NamespaceStrategySelect from "./NamespaceStrategySelect";
 
-type Props = {
+type Props = WithTranslation & {
   realmDescription: string;
   loginInfoUrl: string;
   disableGroupingGrid: boolean;
@@ -17,8 +17,6 @@ type Props = {
   namespaceStrategies?: NamespaceStrategies;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
-  // context props
-  t: (p: string) => string;
 };
 
 class GeneralSettings extends React.Component<Props> {
@@ -122,4 +120,4 @@ class GeneralSettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(GeneralSettings);
+export default withTranslation("config")(GeneralSettings);

scm-ui/ui-webapp/src/admin/components/form/LoginAttempt.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { InputField, Subtitle, validation as validator } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   loginAttemptLimit: number;
   loginAttemptLimitTimeout: number;
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -76,4 +75,4 @@ class LoginAttempt extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(LoginAttempt);
+export default withTranslation("config")(LoginAttempt);

scm-ui/ui-webapp/src/admin/components/form/NamespaceStrategySelect.tsx

@@ -1,17 +1,15 @@
 import React from "react";
-import { translate, TFunction } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
-import { Select } from "@scm-manager/ui-components";
 import { NamespaceStrategies } from "@scm-manager/ui-types";
+import { Select } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   namespaceStrategies: NamespaceStrategies;
   label: string;
   value?: string;
   disabled?: boolean;
   helpText?: string;
   onChange: (value: string, name?: string) => void;
-  // context props
-  t: TFunction;
 };
 
 class NamespaceStrategySelect extends React.Component<Props> {
@@ -59,4 +57,4 @@ class NamespaceStrategySelect extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(NamespaceStrategySelect);
+export default withTranslation("plugins")(NamespaceStrategySelect);

scm-ui/ui-webapp/src/admin/components/form/ProxySettings.tsx

@@ -1,16 +1,15 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox, InputField, Subtitle, AddEntryToTableField } from "@scm-manager/ui-components";
 import ProxyExcludesTable from "../table/ProxyExcludesTable";
 
-type Props = {
+type Props = WithTranslation & {
   proxyPassword: string;
   proxyPort: number;
   proxyServer: string;
   proxyUser: string;
   enableProxy: boolean;
   proxyExcludes: string[];
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   hasUpdatePermission: boolean;
 };
@@ -131,4 +130,4 @@ class ProxySettings extends React.Component<Props> {
   };
 }
 
-export default translate("config")(ProxySettings);
+export default withTranslation("config")(ProxySettings);

scm-ui/ui-webapp/src/admin/components/table/ProxyExcludesTable.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import ArrayConfigTable from "./ArrayConfigTable";
 
-type Props = {
+type Props = WithTranslation & {
   proxyExcludes: string[];
-  t: (p: string) => string;
   onChange: (p1: boolean, p2: any, p3: string) => void;
   disabled: boolean;
 };
@@ -31,4 +30,4 @@ class ProxyExcludesTable extends React.Component<Props, State> {
   };
 }
 
-export default translate("config")(ProxyExcludesTable);
+export default withTranslation("config")(ProxyExcludesTable);

scm-ui/ui-webapp/src/admin/containers/Admin.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import { History } from "history";
 import { connect } from "react-redux";
 import { compose } from "redux";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Redirect, Route, Switch } from "react-router-dom";
+import { History } from "history";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Links } from "@scm-manager/ui-types";
 import { Page, Navigation, NavLink, Section, SubNavigation } from "@scm-manager/ui-components";
 import { getLinks, getAvailablePluginsLink, getInstalledPluginsLink } from "../../modules/indexResource";
@@ -15,13 +15,12 @@ import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   links: Links;
   availablePluginsLink: string;
   installedPluginsLink: string;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -150,5 +149,5 @@ const mapStateToProps = (state: any) => {
 
 export default compose(
   connect(mapStateToProps),
-  translate("admin")
+  withTranslation("admin")
 )(Admin);

scm-ui/ui-webapp/src/admin/containers/AdminDetails.tsx

@@ -1,17 +1,14 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Image, Loading, Subtitle, Title } from "@scm-manager/ui-components";
 import { getAppVersion } from "../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   version: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const BoxShadowBox = styled.div`
@@ -86,4 +83,4 @@ const mapStateToProps = (state: any) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("admin")(AdminDetails));
+export default connect(mapStateToProps)(withTranslation("admin")(AdminDetails));

scm-ui/ui-webapp/src/admin/containers/GlobalConfig.tsx

@@ -1,6 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { Config, NamespaceStrategies } from "@scm-manager/ui-types";
 import { Title, Loading, ErrorNotification } from "@scm-manager/ui-components";
+import { getConfigLink } from "../../modules/indexResource";
 import {
   fetchConfig,
   getFetchConfigFailure,
@@ -12,10 +15,7 @@ import {
   getModifyConfigFailure,
   modifyConfigReset
 } from "../modules/config";
-import { connect } from "react-redux";
-import { Config, NamespaceStrategies } from "@scm-manager/ui-types";
 import ConfigForm from "../components/form/ConfigForm";
-import { getConfigLink } from "../../modules/indexResource";
 import {
   fetchNamespaceStrategiesIfNeeded,
   getFetchNamespaceStrategiesFailure,
@@ -23,7 +23,7 @@ import {
   isFetchNamespaceStrategiesPending
 } from "../modules/namespaceStrategies";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   config: Config;
@@ -36,9 +36,6 @@ type Props = {
   fetchConfig: (link: string) => void;
   configReset: (p: void) => void;
   fetchNamespaceStrategiesIfNeeded: (p: void) => void;
-
-  // context objects
-  t: (p: string) => string;
 };
 
 type State = {
@@ -181,4 +178,4 @@ const mapStateToProps = state => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("config")(GlobalConfig));
+)(withTranslation("config")(GlobalConfig));

scm-ui/ui-webapp/src/admin/plugins/components/CancelPendingActionModal.tsx

@@ -2,15 +2,12 @@ import React from "react";
 import PluginActionModal from "./PluginActionModal";
 import { PendingPlugins } from "@scm-manager/ui-types";
 import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   refresh: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class CancelPendingActionModal extends React.Component<Props> {
@@ -37,4 +34,4 @@ class CancelPendingActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(CancelPendingActionModal);
+export default withTranslation("admin")(CancelPendingActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingAction.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { Button } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { Button } from "@scm-manager/ui-components";
 import ExecutePendingModal from "./ExecutePendingModal";
 
-type Props = {
+type Props = WithTranslation & {
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -55,4 +52,4 @@ class ExecutePendingAction extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingAction);
+export default withTranslation("admin")(ExecutePendingAction);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingActionModal.tsx

@@ -1,16 +1,13 @@
 import React from "react";
-import PluginActionModal from "./PluginActionModal";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import waitForRestart from "./waitForRestart";
 import { apiClient, Notification } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import waitForRestart from "./waitForRestart";
+import PluginActionModal from "./PluginActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class ExecutePendingActionModal extends React.Component<Props> {
@@ -36,4 +33,4 @@ class ExecutePendingActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(ExecutePendingActionModal);
+export default withTranslation("admin")(ExecutePendingActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/ExecutePendingModal.tsx

@@ -1,16 +1,13 @@
 import React from "react";
 import { apiClient, Button, ButtonGroup, ErrorNotification, Modal, Notification } from "@scm-manager/ui-components";
 import { PendingPlugins } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   pendingPlugins: PendingPlugins;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -167,4 +164,4 @@ class ExecutePendingModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(ExecutePendingModal);
+export default withTranslation("admin")(ExecutePendingModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginActionModal.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
-import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { Button, ButtonGroup, ErrorNotification, Modal } from "@scm-manager/ui-components";
 import SuccessNotification from "./SuccessNotification";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   actionType: string;
   pendingPlugins?: PendingPlugins;
@@ -15,9 +15,6 @@ type Props = {
   label: string;
 
   children?: React.Node;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -199,4 +196,4 @@ class PluginActionModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginActionModal);
+export default withTranslation("admin")(PluginActionModal);

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
-import classNames from "classnames";
 import styled from "styled-components";
 import { Plugin } from "@scm-manager/ui-types";
 import { CardColumn, Icon } from "@scm-manager/ui-components";
@@ -13,12 +12,9 @@ export const PluginAction = {
   UNINSTALL: "uninstall"
 };
 
-type Props = {
+type Props = WithTranslation & {
   plugin: Plugin;
   refresh: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -173,4 +169,4 @@ class PluginEntry extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginEntry);
+export default withTranslation("admin")(PluginEntry);

scm-ui/ui-webapp/src/admin/plugins/components/PluginModal.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Plugin } from "@scm-manager/ui-types";
@@ -16,14 +16,11 @@ import waitForRestart from "./waitForRestart";
 import SuccessNotification from "./SuccessNotification";
 import { PluginAction } from "./PluginEntry";
 
-type Props = {
+type Props = WithTranslation & {
   plugin: Plugin;
   pluginAction: string;
   refresh: () => void;
   onClose: () => void;
-
-  // context props
-  t: (key: string, params?: object) => string;
 };
 
 type State = {
@@ -268,4 +265,4 @@ class PluginModal extends React.Component<Props, State> {
   }
 }
 
-export default translate("admin")(PluginModal);
+export default withTranslation("admin")(PluginModal);

scm-ui/ui-webapp/src/admin/plugins/components/SuccessNotification.tsx

@@ -1,13 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Notification } from "@scm-manager/ui-components";
 
-type Props = {
+class InstallSuccessNotification extends React.Component<WithTranslation> {
-  // context props
-  t: (p: string) => string;
-};
-
-class InstallSuccessNotification extends React.Component<Props> {
   render() {
     const { t } = this.props;
     return (
@@ -19,4 +14,4 @@ class InstallSuccessNotification extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(InstallSuccessNotification);
+export default withTranslation("admin")(InstallSuccessNotification);

scm-ui/ui-webapp/src/admin/plugins/components/UpdateAllActionModal.tsx

@@ -1,16 +1,13 @@
 import React from "react";
-import PluginActionModal from "./PluginActionModal";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PluginCollection } from "@scm-manager/ui-types";
 import { apiClient } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import PluginActionModal from "./PluginActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   onClose: () => void;
   refresh: () => void;
   installedPlugins: PluginCollection;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class UpdateAllActionModal extends React.Component<Props> {
@@ -37,4 +34,4 @@ class UpdateAllActionModal extends React.Component<Props> {
   };
 }
 
-export default translate("admin")(UpdateAllActionModal);
+export default withTranslation("admin")(UpdateAllActionModal);

scm-ui/ui-webapp/src/admin/plugins/containers/PluginsOverview.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { compose } from "redux";
 import { PendingPlugins, PluginCollection } from "@scm-manager/ui-types";
 import {
@@ -32,7 +32,7 @@ import ExecutePendingActionModal from "../components/ExecutePendingActionModal";
 import CancelPendingActionModal from "../components/CancelPendingActionModal";
 import UpdateAllActionModal from "../components/UpdateAllActionModal";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   collection: PluginCollection;
@@ -43,9 +43,6 @@ type Props = {
   pendingPluginsLink: string;
   pendingPlugins: PendingPlugins;
 
-  // context objects
-  t: (key: string, params?: object) => string;
-
   // dispatched functions
   fetchPluginsByLink: (link: string) => void;
   fetchPendingPlugins: (link: string) => void;
@@ -291,7 +288,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("admin"),
+  withTranslation("admin"),
   connect(
     mapStateToProps,
     mapDispatchToProps

scm-ui/ui-webapp/src/admin/roles/components/AvailableVerbs.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class AvailableVerbs extends React.Component<Props> {
@@ -31,4 +28,4 @@ class AvailableVerbs extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(AvailableVerbs);
+export default withTranslation("plugins")(AvailableVerbs);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetails.tsx

@@ -1,16 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
-import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
+import { RepositoryRole } from "@scm-manager/ui-types";
 import { Button } from "@scm-manager/ui-components";
+import PermissionRoleDetailsTable from "./PermissionRoleDetailsTable";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
   url: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleDetails extends React.Component<Props> {
@@ -42,4 +39,4 @@ class PermissionRoleDetails extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleDetails);
+export default withTranslation("admin")(PermissionRoleDetails);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleDetailsTable.tsx

@@ -1,13 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
 import AvailableVerbs from "./AvailableVerbs";
 
-type Props = {
+type Props = WithTranslation & {
   role: RepositoryRole;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleDetailsTable extends React.Component<Props> {
@@ -34,4 +31,4 @@ class PermissionRoleDetailsTable extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleDetailsTable);
+export default withTranslation("admin")(PermissionRoleDetailsTable);

scm-ui/ui-webapp/src/admin/roles/components/PermissionRoleTable.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import PermissionRoleRow from "./PermissionRoleRow";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   roles: RepositoryRole[];
-
-  // context props
-  t: (p: string) => string;
 };
 
 class PermissionRoleTable extends React.Component<Props> {
@@ -31,4 +28,4 @@ class PermissionRoleTable extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(PermissionRoleTable);
+export default withTranslation("admin")(PermissionRoleTable);

scm-ui/ui-webapp/src/admin/roles/components/SystemRoleTag.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Tag } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   system?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const LeftMarginTag = styled(Tag)`
@@ -26,4 +23,4 @@ class SystemRoleTag extends React.Component<Props> {
   }
 }
 
-export default translate("admin")(SystemRoleTag);
+export default withTranslation("admin")(SystemRoleTag);

scm-ui/ui-webapp/src/admin/roles/containers/CreateRepositoryRole.tsx

@@ -1,23 +1,20 @@
 import React from "react";
-import RepositoryRoleForm from "./RepositoryRoleForm";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { RepositoryRole } from "@scm-manager/ui-types";
 import { ErrorNotification, Subtitle, Title } from "@scm-manager/ui-components";
 import { createRole, getCreateRoleFailure, getFetchVerbsFailure, isFetchVerbsPending } from "../modules/roles";
-import { RepositoryRole } from "@scm-manager/ui-types";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
-import { History } from "history";
+import RepositoryRoleForm from "./RepositoryRoleForm";
 
-type Props = {
+type Props = WithTranslation & {
   repositoryRolesLink: string;
   error?: Error;
   history: History;
 
   // dispatch function
   addRole: (link: string, role: RepositoryRole, callback?: () => void) => void;
-
-  // context objects
-  t: (p: string) => string;
 };
 
 class CreateRepositoryRole extends React.Component<Props> {
@@ -47,7 +44,7 @@ class CreateRepositoryRole extends React.Component<Props> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const loading = isFetchVerbsPending(state);
   const error = getFetchVerbsFailure(state) || getCreateRoleFailure(state);
   const verbsLink = getRepositoryVerbsLink(state);
@@ -72,4 +69,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(CreateRepositoryRole));
+)(withTranslation("admin")(CreateRepositoryRole));

scm-ui/ui-webapp/src/admin/roles/containers/DeleteRepositoryRole.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
+import { RepositoryRole } from "@scm-manager/ui-types";
+import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRole, getDeleteRoleFailure, isDeleteRolePending } from "../modules/roles";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   role: RepositoryRole;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 class DeleteRepositoryRole extends React.Component<Props> {
@@ -96,4 +95,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("admin")(DeleteRepositoryRole)));
+)(withRouter(withTranslation("admin")(DeleteRepositoryRole)));

scm-ui/ui-webapp/src/admin/roles/containers/EditRepositoryRole.tsx

@@ -1,21 +1,21 @@
 import React from "react";
 import RepositoryRoleForm from "./RepositoryRoleForm";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { getModifyRoleFailure, isModifyRolePending, modifyRole } from "../modules/roles";
-import { ErrorNotification, Subtitle } from "@scm-manager/ui-components";
+import { ErrorNotification, Subtitle, Loading } from "@scm-manager/ui-components";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import { History } from "history";
 import DeleteRepositoryRole from "./DeleteRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   disabled: boolean;
   role: RepositoryRole;
   repositoryRolesLink: string;
+  loading?: boolean;
   error?: Error;
 
   // context objects
-  t: (p: string) => string;
   history: History;
 
   //dispatch function
@@ -32,9 +32,11 @@ class EditRepositoryRole extends React.Component<Props> {
   };
 
   render() {
-    const { error, t } = this.props;
+    const { loading, error, t } = this.props;
 
-    if (error) {
+    if (loading) {
+      return <Loading />;
+    } else if (error) {
       return <ErrorNotification error={error} />;
     }
 
@@ -70,4 +72,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(EditRepositoryRole));
+)(withTranslation("admin")(EditRepositoryRole));

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoleForm.tsx

@@ -1,22 +1,19 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { RepositoryRole } from "@scm-manager/ui-types";
 import { InputField, SubmitButton } from "@scm-manager/ui-components";
-import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
-import { fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, isFetchVerbsPending } from "../modules/roles";
 import { getRepositoryRolesLink, getRepositoryVerbsLink } from "../../../modules/indexResource";
+import { fetchAvailableVerbs, getFetchVerbsFailure, getVerbsFromState, isFetchVerbsPending } from "../modules/roles";
+import PermissionCheckbox from "../../../repos/permissions/components/PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   role?: RepositoryRole;
   loading?: boolean;
   availableVerbs: string[];
   verbsLink: string;
   submitForm: (p: RepositoryRole) => void;
 
-  // context objects
-  t: (p: string) => string;
-
   // dispatch functions
   fetchAvailableVerbs: (link: string) => void;
 };
@@ -123,7 +120,7 @@ class RepositoryRoleForm extends React.Component<Props, State> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = (state) => {
   const loading = isFetchVerbsPending(state);
   const error = getFetchVerbsFailure(state);
   const verbsLink = getRepositoryVerbsLink(state);
@@ -150,4 +147,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("admin")(RepositoryRoleForm));
+)(withTranslation("admin")(RepositoryRoleForm));

scm-ui/ui-webapp/src/admin/roles/containers/RepositoryRoles.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { RepositoryRole, PagedCollection } from "@scm-manager/ui-types";
 import { Title, Subtitle, Loading, Notification, LinkPaginator, urls, CreateButton } from "@scm-manager/ui-components";
@@ -16,7 +16,7 @@ import {
 import PermissionRoleTable from "../components/PermissionRoleTable";
 import { getRepositoryRolesLink } from "../../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
   roles: RepositoryRole[];
   loading: boolean;
@@ -27,7 +27,6 @@ type Props = {
   rolesLink: string;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -123,5 +122,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("admin")(RepositoryRoles))
+  )(withTranslation("admin")(RepositoryRoles))
 );

scm-ui/ui-webapp/src/admin/roles/containers/SingleRepositoryRole.tsx

@@ -1,18 +1,17 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Loading, ErrorPage, Title } from "@scm-manager/ui-components";
+import { Route, withRouter } from "react-router-dom";
-import { Route } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
-import { translate } from "react-i18next";
-import { RepositoryRole } from "@scm-manager/ui-types";
-import { getRepositoryRolesLink } from "../../../modules/indexResource";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { RepositoryRole } from "@scm-manager/ui-types";
+import { Loading, ErrorPage, Title } from "@scm-manager/ui-components";
+import { getRepositoryRolesLink } from "../../../modules/indexResource";
 import { fetchRoleByName, getFetchRoleFailure, getRoleByName, isFetchRolePending } from "../modules/roles";
-import { withRouter } from "react-router-dom";
 import PermissionRoleDetail from "../components/PermissionRoleDetails";
 import EditRepositoryRole from "./EditRepositoryRole";
 
-type Props = {
+type Props = WithTranslation & {
   roleName: string;
   role: RepositoryRole;
   loading: boolean;
@@ -24,7 +23,6 @@ type Props = {
   fetchRoleByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -107,5 +105,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("admin")(SingleRepositoryRole))
+  )(withTranslation("admin")(SingleRepositoryRole))
 );

scm-ui/ui-webapp/src/components/InfoBox.tsx

@@ -1,16 +1,13 @@
 import * as React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { InfoItem } from "./InfoItem";
 import { Icon } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   type: "plugin" | "feature";
   item: InfoItem;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const BottomMarginA = styled.a`
@@ -73,4 +70,4 @@ class InfoBox extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(InfoBox);
+export default withTranslation("commons")(InfoBox);

scm-ui/ui-webapp/src/components/LoginForm.tsx

@@ -1,15 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { Image, ErrorNotification, InputField, SubmitButton, UnauthorizedError } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   error?: Error;
   loading: boolean;
   loginHandler: (username: string, password: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -106,4 +103,4 @@ class LoginForm extends React.Component<Props, State> {
   }
 }
 
-export default translate("commons")(LoginForm);
+export default withTranslation("commons")(LoginForm);

scm-ui/ui-webapp/src/containers/App.tsx

@@ -1,10 +1,9 @@
 import React, { Component } from "react";
 import Main from "./Main";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
 import { fetchMe, getFetchMeFailure, getMe, isAuthenticated, isFetchMePending } from "../modules/auth";
-
 import { ErrorPage, Footer, Header, Loading, PrimaryNavigation } from "@scm-manager/ui-components";
 import { Links, Me } from "@scm-manager/ui-types";
 import {
@@ -14,7 +13,7 @@ import {
   isFetchIndexResourcesPending
 } from "../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
   authenticated: boolean;
   error: Error;
@@ -24,9 +23,6 @@ type Props = {
 
   // dispatcher functions
   fetchMe: (link: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class App extends Component<Props> {
@@ -86,5 +82,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("commons")(App))
+  )(withTranslation("commons")(App))
 );

scm-ui/ui-webapp/src/containers/ChangeUserPassword.tsx

@@ -6,13 +6,12 @@ import {
   PasswordConfirmation,
   SubmitButton
 } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { changePassword } from "../modules/changePassword";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -150,4 +149,4 @@ class ChangeUserPassword extends React.Component<Props, State> {
   };
 }
 
-export default translate("commons")(ChangeUserPassword);
+export default withTranslation("commons")(ChangeUserPassword);

scm-ui/ui-webapp/src/containers/Index.tsx

@@ -1,9 +1,8 @@
 import React, { Component } from "react";
 import App from "./App";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { withRouter } from "react-router-dom";
-
 import { Loading, ErrorBoundary } from "@scm-manager/ui-components";
 import {
   fetchIndexResources,
@@ -16,16 +15,13 @@ import { IndexResources } from "@scm-manager/ui-types";
 import ScrollToTop from "./ScrollToTop";
 import IndexErrorPage from "./IndexErrorPage";
 
-type Props = {
+type Props = WithTranslation & {
   error: Error;
   loading: boolean;
   indexResources: IndexResources;
 
   // dispatcher functions
   fetchIndexResources: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -93,5 +89,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("commons")(Index))
+  )(withTranslation("commons")(Index))
 );

scm-ui/ui-webapp/src/containers/IndexErrorPage.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate, TFunction } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { ErrorPage } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   error: Error;
-  t: TFunction;
 };
 
 class IndexErrorPage extends React.Component<Props> {
@@ -14,4 +13,4 @@ class IndexErrorPage extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(IndexErrorPage);
+export default withTranslation("commons")(IndexErrorPage);

scm-ui/ui-webapp/src/containers/Login.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import { connect } from "react-redux";
 import { Redirect, withRouter } from "react-router-dom";
 import { compose } from "redux";
-import { translate } from "react-i18next";
 import styled from "styled-components";
 import { getLoginFailure, isAuthenticated, isLoginPending, login } from "../modules/auth";
 import { getLoginInfoLink, getLoginLink } from "../modules/indexResource";
@@ -19,7 +18,6 @@ type Props = {
   login: (link: string, username: string, password: string) => void;
 
   // context props
-  t: (p: string) => string;
   from: any;
   location: any;
 };

scm-ui/ui-webapp/src/containers/Logout.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 
 import { logout, isAuthenticated, isLogoutPending, getLogoutFailure, isRedirecting } from "../modules/auth";
 import { Loading, ErrorPage } from "@scm-manager/ui-components";
 import { getLogoutLink } from "../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   authenticated: boolean;
   loading: boolean;
   redirecting: boolean;
@@ -16,9 +16,6 @@ type Props = {
 
   // dispatcher functions
   logout: (link: string) => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class Logout extends React.Component<Props> {
@@ -62,4 +59,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("commons")(Logout));
+)(withTranslation("commons")(Logout));

scm-ui/ui-webapp/src/containers/Profile.tsx

@@ -1,21 +1,19 @@
 import React from "react";
-
 import { Route, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { ErrorPage, Page, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
 
   // Context props
-  t: (p: string) => string;
   match: any;
 };
 type State = {};
@@ -87,7 +85,7 @@ const mapStateToProps = state => {
 };
 
 export default compose(
-  translate("commons"),
+  withTranslation("commons"),
   connect(mapStateToProps),
   withRouter
 )(Profile);

scm-ui/ui-webapp/src/containers/ProfileInfo.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
 import { MailLink, AvatarWrapper, AvatarImage } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   me: Me;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 class ProfileInfo extends React.Component<Props> {
@@ -69,4 +66,4 @@ class ProfileInfo extends React.Component<Props> {
   }
 }
 
-export default translate("commons")(ProfileInfo);
+export default withTranslation("commons")(ProfileInfo);

scm-ui/ui-webapp/src/groups/components/GroupForm.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Group, SelectValue } from "@scm-manager/ui-types";
 import {
   Subtitle,
   AutocompleteAddEntryToTableField,
@@ -9,12 +10,10 @@ import {
   Textarea,
   Checkbox
 } from "@scm-manager/ui-components";
-import { Group, SelectValue } from "@scm-manager/ui-types";
 
 import * as validator from "./groupValidation";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   submitForm: (p: Group) => void;
   loading?: boolean;
   group?: Group;
@@ -218,4 +217,4 @@ class GroupForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("groups")(GroupForm);
+export default withTranslation("groups")(GroupForm);

scm-ui/ui-webapp/src/groups/components/navLinks/EditGroupNavLink.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { Group } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
   editUrl: string;
-  t: (p: string) => string;
 };
 
 class EditGroupNavLink extends React.Component<Props> {
@@ -24,4 +23,4 @@ class EditGroupNavLink extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(EditGroupNavLink);
+export default withTranslation("groups")(EditGroupNavLink);

scm-ui/ui-webapp/src/groups/components/navLinks/SetPermissionsNavLink.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Group } from "@scm-manager/ui-types";
 import { NavLink } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   group: Group;
   permissionsUrl: string;
 };
@@ -24,4 +23,4 @@ class ChangePermissionNavLink extends React.Component<Props> {
   };
 }
 
-export default translate("groups")(ChangePermissionNavLink);
+export default withTranslation("groups")(ChangePermissionNavLink);

scm-ui/ui-webapp/src/groups/components/table/Details.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Group } from "@scm-manager/ui-types";
 import { DateFromNow, Checkbox } from "@scm-manager/ui-components";
 import GroupMember from "./GroupMember";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 class Details extends React.Component<Props> {
@@ -75,4 +72,4 @@ class Details extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(Details);
+export default withTranslation("groups")(Details);

scm-ui/ui-webapp/src/groups/components/table/GroupRow.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { Group } from "@scm-manager/ui-types";
 import { Icon } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   group: Group;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class GroupRow extends React.Component<Props> {
@@ -36,4 +33,4 @@ class GroupRow extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(GroupRow);
+export default withTranslation("groups")(GroupRow);

scm-ui/ui-webapp/src/groups/components/table/GroupTable.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import GroupRow from "./GroupRow";
 import { Group } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   groups: Group[];
 };
 
@@ -29,4 +28,4 @@ class GroupTable extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(GroupTable);
+export default withTranslation("groups")(GroupTable);

scm-ui/ui-webapp/src/groups/containers/CreateGroup.tsx

@@ -1,16 +1,14 @@
 import React from "react";
-
-import { Page } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
-import GroupForm from "../components/GroupForm";
 import { connect } from "react-redux";
-import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
+import { WithTranslation, withTranslation } from "react-i18next";
-import { Group } from "@scm-manager/ui-types";
 import { History } from "history";
+import { Group } from "@scm-manager/ui-types";
+import { Page } from "@scm-manager/ui-components";
 import { getGroupsLink, getUserAutoCompleteLink } from "../../modules/indexResource";
+import { createGroup, isCreateGroupPending, getCreateGroupFailure, createGroupReset } from "../modules/groups";
+import GroupForm from "../components/GroupForm";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   createGroup: (link: string, group: Group, callback?: () => void) => void;
   history: History;
   loading?: boolean;
@@ -20,9 +18,7 @@ type Props = {
   autocompleteLink: string;
 };
 
-type State = {};
+class CreateGroup extends React.Component<Props> {
-
-class CreateGroup extends React.Component<Props, State> {
   componentDidMount() {
     this.props.resetForm();
   }
@@ -88,4 +84,4 @@ const mapStateToProps = state => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(CreateGroup));
+)(withTranslation("groups")(CreateGroup));

scm-ui/ui-webapp/src/groups/containers/DeleteGroup.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { Group } from "@scm-manager/ui-types";
 import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteGroup, getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   group: Group;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 export class DeleteGroup extends React.Component<Props> {
@@ -96,4 +95,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("groups")(DeleteGroup)));
+)(withRouter(withTranslation("groups")(DeleteGroup)));

scm-ui/ui-webapp/src/groups/containers/Groups.tsx

@@ -1,16 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { History } from "history";
 import { Group, PagedCollection } from "@scm-manager/ui-types";
-import {
-  fetchGroupsByPage,
-  getGroupsFromState,
-  isFetchGroupsPending,
-  getFetchGroupsFailure,
-  isPermittedToCreateGroups,
-  selectListAsCollection
-} from "../modules/groups";
 import {
   Page,
   PageActions,
@@ -20,10 +12,18 @@ import {
   urls,
   CreateButton
 } from "@scm-manager/ui-components";
-import { GroupTable } from "./../components/table";
 import { getGroupsLink } from "../../modules/indexResource";
+import {
+  fetchGroupsByPage,
+  getGroupsFromState,
+  isFetchGroupsPending,
+  getFetchGroupsFailure,
+  isPermittedToCreateGroups,
+  selectListAsCollection
+} from "../modules/groups";
+import { GroupTable } from "./../components/table";
 
-type Props = {
+type Props = WithTranslation & {
   groups: Group[];
   loading: boolean;
   error: Error;
@@ -33,7 +33,6 @@ type Props = {
   groupLink: string;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -124,4 +123,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(Groups));
+)(withTranslation("groups")(Groups));

scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx

@@ -1,20 +1,19 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Page, ErrorPage, Loading, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
 import { Route } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { Group } from "@scm-manager/ui-types";
+import { Page, ErrorPage, Loading, Navigation, SubNavigation, Section, NavLink } from "@scm-manager/ui-components";
+import { getGroupsLink } from "../../modules/indexResource";
+import { fetchGroupByName, getGroupByName, isFetchGroupPending, getFetchGroupFailure } from "../modules/groups";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
-import { Group } from "@scm-manager/ui-types";
-import { History } from "history";
-import { fetchGroupByName, getGroupByName, isFetchGroupPending, getFetchGroupFailure } from "../modules/groups";
-
-import { translate } from "react-i18next";
 import EditGroup from "./EditGroup";
-import { getGroupsLink } from "../../modules/indexResource";
 import SetPermissions from "../../permissions/components/SetPermissions";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   name: string;
   group: Group;
   loading: boolean;
@@ -25,7 +24,6 @@ type Props = {
   fetchGroupByName: (p1: string, p2: string) => void;
 
   // context objects
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -123,4 +121,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("groups")(SingleGroup));
+)(withTranslation("groups")(SingleGroup));

scm-ui/ui-webapp/src/i18n.ts

@@ -1,7 +1,8 @@
 import i18n from "i18next";
+// @ts-ignore
 import Backend from "i18next-fetch-backend";
 import LanguageDetector from "i18next-browser-languagedetector";
-import { reactI18nextModule } from "react-i18next";
+import { initReactI18next } from "react-i18next";
 import { urls } from "@scm-manager/ui-components";
 
 const loadPath = urls.withContextPath("/locales/{{lng}}/{{ns}}.json");
@@ -11,7 +12,7 @@ const loadPath = urls.withContextPath("/locales/{{lng}}/{{ns}}.json");
 i18n
   .use(Backend)
   .use(LanguageDetector)
-  .use(reactI18nextModule)
+  .use(initReactI18next)
   .init({
     fallbackLng: "en",
 
@@ -29,7 +30,8 @@ i18n
     },
 
     react: {
-      wait: true
+      wait: true,
+      useSuspense: false
     },
 
     backend: {

scm-ui/ui-webapp/src/permissions/components/PermissionCheckbox.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Checkbox } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   permission: string;
   checked: boolean;
   onChange: (value: boolean, name: string) => void;
   disabled: boolean;
-  t: (p: string) => string;
 };
 
 class PermissionCheckbox extends React.Component<Props> {
@@ -36,4 +35,4 @@ class PermissionCheckbox extends React.Component<Props> {
   };
 }
 
-export default translate("plugins")(PermissionCheckbox);
+export default withTranslation("plugins")(PermissionCheckbox);

scm-ui/ui-webapp/src/permissions/components/SetPermissions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Link } from "@scm-manager/ui-types";
@@ -9,12 +9,9 @@ import { getLink } from "../../modules/indexResource";
 import { loadPermissionsForEntity, setPermissions } from "./handlePermissions";
 import PermissionCheckbox from "./PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   availablePermissionLink: string;
   selectedPermissionsLink: Link;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -189,4 +186,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps)(translate("permissions")(SetPermissions));
+export default connect(mapStateToProps)(withTranslation("permissions")(SetPermissions));

scm-ui/ui-webapp/src/repos/branches/components/BranchButtonGroup.tsx

@@ -1,14 +1,11 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Branch } from "@scm-manager/ui-types";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
-
-  // context props
-  t: (p: string) => string;
 };
 
 class BranchButtonGroup extends React.Component<Props> {
@@ -29,4 +26,4 @@ class BranchButtonGroup extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchButtonGroup);
+export default withTranslation("repos")(BranchButtonGroup);

scm-ui/ui-webapp/src/repos/branches/components/BranchDetail.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import { Repository, Branch } from "@scm-manager/ui-types";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import BranchButtonGroup from "./BranchButtonGroup";
 import DefaultBranchTag from "./DefaultBranchTag";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
-  // context props
-  t: (p: string) => string;
 };
 
 class BranchDetail extends React.Component<Props> {
@@ -28,4 +26,4 @@ class BranchDetail extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchDetail);
+export default withTranslation("repos")(BranchDetail);