Migrate react-i18next translate components

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, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -12,12 +12,9 @@ import ChangesetAuthor from "./ChangesetAuthor";
 import ChangesetTags from "./ChangesetTags";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 
-type Props = {
+type Props = WithTranslation & {
   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="changeset.summary" values={{ id: changesetId, time: dateFromNow }} />
                     </p>
                     <p className="is-hidden-desktop">
-                      <Interpolate i18nKey="changeset.shortSummary" id={changesetId} time={dateFromNow} />
+                      <Trans i18nKey="changeset.shortSummary" values={{ id: changesetId, time: 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 withTranslation("repos")(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-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
+  // 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/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);

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

@@ -1,17 +1,16 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository, Branch, BranchRequest } from "@scm-manager/ui-types";
 import { Select, InputField, SubmitButton, validation as validator } from "@scm-manager/ui-components";
 import { orderBranches } from "../util/orderBranches";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: BranchRequest) => void;
   repository: Repository;
   branches: Branch[];
   loading?: boolean;
   transmittedName?: string;
   disabled?: boolean;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -112,4 +111,4 @@ class BranchForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(BranchForm);
+export default withTranslation("repos")(BranchForm);

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

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import BranchRow from "./BranchRow";
 import { Branch } from "@scm-manager/ui-types";
 
-type Props = {
+type Props = WithTranslation & {
   baseUrl: string;
-  t: (p: string) => string;
   branches: Branch[];
 };
 
@@ -36,4 +35,4 @@ class BranchTable extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(BranchTable);
+export default withTranslation("repos")(BranchTable);

scm-ui/ui-webapp/src/repos/branches/components/DefaultBranchTag.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 & {
   defaultBranch?: boolean;
-
-  // context props
-  t: (p: string) => string;
 };
 
 const LeftMarginTag = styled(Tag)`
@@ -26,4 +23,4 @@ class DefaultBranchTag extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DefaultBranchTag);
+export default withTranslation("repos")(DefaultBranchTag);

scm-ui/ui-webapp/src/repos/branches/containers/BranchesOverview.tsx

@@ -1,4 +1,10 @@
 import React from "react";
+import { connect } from "react-redux";
+import { compose } from "redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Repository } from "@scm-manager/ui-types";
+import { CreateButton, ErrorNotification, Loading, Notification, Subtitle } from "@scm-manager/ui-components";
 import {
   fetchBranches,
   getBranches,
@@ -7,15 +13,9 @@ import {
   isPermittedToCreateBranches
 } from "../modules/branches";
 import { orderBranches } from "../util/orderBranches";
-import { connect } from "react-redux";
-import { Branch, Repository } from "@scm-manager/ui-types";
-import { compose } from "redux";
-import { translate } from "react-i18next";
-import { withRouter } from "react-router-dom";
-import { CreateButton, ErrorNotification, Loading, Notification, Subtitle } from "@scm-manager/ui-components";
 import BranchTable from "../components/BranchTable";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   baseUrl: string;
   loading: boolean;
@@ -29,7 +29,6 @@ type Props = {
   // Context props
   history: any;
   match: any;
-  t: (p: string) => string;
 };
 
 class BranchesOverview extends React.Component<Props> {
@@ -101,7 +100,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,

scm-ui/ui-webapp/src/repos/branches/containers/CreateBranch.tsx

@@ -1,8 +1,12 @@
 import React from "react";
-import { ErrorNotification, Loading, Subtitle } from "@scm-manager/ui-components";
+import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { withRouter } from "react-router-dom";
-import BranchForm from "../components/BranchForm";
+import { WithTranslation, withTranslation } from "react-i18next";
+import queryString from "query-string";
+import { History } from "history";
 import { Repository, Branch, BranchRequest } from "@scm-manager/ui-types";
+import { ErrorNotification, Loading, Subtitle } from "@scm-manager/ui-components";
+import BranchForm from "../components/BranchForm";
 import {
   fetchBranches,
   getBranches,
@@ -14,12 +18,8 @@ import {
   isFetchBranchesPending,
   getFetchBranchesFailure
 } from "../modules/branches";
-import { History } from "history";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import queryString from "query-string";
 
-type Props = {
+type Props = WithTranslation & {
   loading?: boolean;
   error?: Error;
   repository: Repository;
@@ -38,7 +38,6 @@ type Props = {
   resetForm: (p: Repository) => void;
 
   // context objects
-  t: (p: string) => string;
   history: History;
   location: any;
 };
@@ -131,5 +130,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("repos")(CreateBranch))
+  )(withTranslation("repos")(CreateBranch))
 );

scm-ui/ui-webapp/src/repos/components/EditRepoNavLink.tsx

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

scm-ui/ui-webapp/src/repos/components/PermissionsNavLink.tsx

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

scm-ui/ui-webapp/src/repos/components/RepositoryDetailTable.tsx

@@ -1,12 +1,10 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Repository } from "@scm-manager/ui-types";
 import { MailLink, DateFromNow } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
-  // context props
-  t: (p: string) => string;
 };
 
 class RepositoryDetailTable extends React.Component<Props> {
@@ -51,4 +49,4 @@ class RepositoryDetailTable extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(RepositoryDetailTable);
+export default withTranslation("repos")(RepositoryDetailTable);

scm-ui/ui-webapp/src/repos/components/changesets/ChangesetDetails.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Interpolate, translate } from "react-i18next";
+import { Trans, WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -17,12 +17,9 @@ import {
   Button
 } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   changeset: Changeset;
   repository: Repository;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -85,7 +82,7 @@ class ChangesetDetails extends React.Component<Props, State> {
                 <ChangesetAuthor changeset={changeset} />
               </p>
               <p>
-                <Interpolate i18nKey="changeset.summary" id={id} time={date} />
+                <Trans i18nKey="changeset.summary" values={{ id, time: date }} />
               </p>
             </div>
             <div className="media-right">{this.renderTags()}</div>
@@ -154,4 +151,4 @@ class ChangesetDetails extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(ChangesetDetails);
+export default withTranslation("repos")(ChangesetDetails);

scm-ui/ui-webapp/src/repos/components/form/RepositoryForm.tsx

@@ -1,17 +1,16 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
-import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository, RepositoryType } from "@scm-manager/ui-types";
+import { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
 import * as validator from "./repositoryValidation";
 
-type Props = {
+type Props = WithTranslation & {
   submitForm: (p: Repository) => void;
   repository?: Repository;
   repositoryTypes: RepositoryType[];
   namespaceStrategy: string;
   loading?: boolean;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -54,10 +53,8 @@ class RepositoryForm extends React.Component<Props, State> {
   }
 
   isFalsy(value) {
-    if (!value) {
+    return !value;
-      return true;
+
-    }
-    return false;
   }
 
   isValid = () => {
@@ -236,4 +233,4 @@ class RepositoryForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(RepositoryForm);
+export default withTranslation("repos")(RepositoryForm);

scm-ui/ui-webapp/src/repos/containers/ChangesetView.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Changeset, Repository } from "@scm-manager/ui-types";
+import { ErrorPage, Loading } from "@scm-manager/ui-components";
 import {
   fetchChangesetIfNeeded,
   getChangeset,
@@ -9,10 +11,8 @@ import {
   isFetchChangesetPending
 } from "../modules/changesets";
 import ChangesetDetails from "../components/changesets/ChangesetDetails";
-import { translate } from "react-i18next";
-import { ErrorPage, Loading } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   id: string;
   changeset: Changeset;
   repository: Repository;
@@ -20,7 +20,6 @@ type Props = {
   error: Error;
   fetchChangesetIfNeeded: (repository: Repository, id: string) => void;
   match: any;
-  t: (p: string) => string;
 };
 
 class ChangesetView extends React.Component<Props> {
@@ -68,5 +67,5 @@ export default withRouter(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  )(translate("repos")(ChangesetView))
+  )(withTranslation("repos")(ChangesetView))
 );

scm-ui/ui-webapp/src/repos/containers/Changesets.tsx

@@ -1,15 +1,9 @@
 import React from "react";
-import { withRouter } from "react-router-dom";
-import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
-import {
-  fetchChangesets,
-  getChangesets,
-  getFetchChangesetsFailure,
-  isFetchChangesetsPending,
-  selectListAsCollection
-} from "../modules/changesets";
-
 import { connect } from "react-redux";
+import { compose } from "redux";
+import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
 import {
   ErrorNotification,
   getPageFromMatch,
@@ -18,10 +12,15 @@ import {
   Loading,
   Notification
 } from "@scm-manager/ui-components";
-import { compose } from "redux";
+import {
-import { translate } from "react-i18next";
+  fetchChangesets,
+  getChangesets,
+  getFetchChangesetsFailure,
+  isFetchChangesetsPending,
+  selectListAsCollection
+} from "../modules/changesets";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   branch: Branch;
   page: number;
@@ -37,7 +36,6 @@ type Props = {
 
   // context props
   match: any;
-  t: (p: string) => string;
 };
 
 class Changesets extends React.Component<Props> {
@@ -121,7 +119,7 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,

scm-ui/ui-webapp/src/repos/containers/ChangesetsRoot.tsx

@@ -1,19 +1,19 @@
 import React from "react";
-import { Branch, Repository } from "@scm-manager/ui-types";
+import { compose } from "redux";
-import { translate } from "react-i18next";
-import { Route, withRouter } from "react-router-dom";
-import Changesets from "./Changesets";
 import { connect } from "react-redux";
+import { Route, withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { Branch, Repository } from "@scm-manager/ui-types";
 import { BranchSelector, ErrorNotification, Loading } from "@scm-manager/ui-components";
+import Changesets from "./Changesets";
 import {
   fetchBranches,
   getBranches,
   getFetchBranchesFailure,
   isFetchBranchesPending
 } from "../branches/modules/branches";
-import { compose } from "redux";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   baseUrl: string;
   selected: string;
@@ -31,7 +31,6 @@ type Props = {
   // Context props
   history: any; // TODO flow type
   match: any;
-  t: (p: string) => string;
 };
 
 class ChangesetsRoot extends React.Component<Props> {
@@ -151,7 +150,7 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 
 export default compose(
   withRouter,
-  translate("repos"),
+  withTranslation("repos"),
   connect(
     mapStateToProps,
     mapDispatchToProps

scm-ui/ui-webapp/src/repos/containers/Create.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
-import { Page } from "@scm-manager/ui-components";
+import { History } from "history";
-import RepositoryForm from "../components/form";
 import { Repository, RepositoryType, NamespaceStrategies } from "@scm-manager/ui-types";
+import { Page } from "@scm-manager/ui-components";
 import {
   fetchRepositoryTypesIfNeeded,
   getFetchRepositoryTypesFailure,
   getRepositoryTypes,
   isFetchRepositoryTypesPending
 } from "../modules/repositoryTypes";
+import RepositoryForm from "../components/form";
 import { createRepo, createRepoReset, getCreateRepoFailure, isCreateRepoPending } from "../modules/repos";
-import { History } from "history";
 import { getRepositoriesLink } from "../../modules/indexResource";
 import {
   fetchNamespaceStrategiesIfNeeded,
@@ -20,7 +20,7 @@ import {
   isFetchNamespaceStrategiesPending
 } from "../../admin/modules/namespaceStrategies";
 
-type Props = {
+type Props = WithTranslation & {
   repositoryTypes: RepositoryType[];
   namespaceStrategies: NamespaceStrategies;
   pageLoading: boolean;
@@ -35,7 +35,6 @@ type Props = {
   resetForm: () => void;
 
   // context props
-  t: (p: string) => string;
   history: History;
 };
 
@@ -115,4 +114,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(Create));
+)(withTranslation("repos")(Create));

scm-ui/ui-webapp/src/repos/containers/DeleteRepo.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 { Repository } from "@scm-manager/ui-types";
 import { Subtitle, DeleteButton, confirmAlert, ErrorNotification } from "@scm-manager/ui-components";
 import { deleteRepo, getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
-import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
-import { History } from "history";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   repository: Repository;
@@ -16,7 +16,6 @@ type Props = {
 
   // context props
   history: History;
-  t: (p: string) => string;
 };
 
 class DeleteRepo extends React.Component<Props> {
@@ -98,4 +97,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(withRouter(translate("repos")(DeleteRepo)));
+)(withRouter(withTranslation("repos")(DeleteRepo)));

scm-ui/ui-webapp/src/repos/containers/Overview.tsx

@@ -1,16 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
-import { translate } from "react-i18next";
-import { History } from "history";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 import { RepositoryCollection } from "@scm-manager/ui-types";
-import {
-  fetchReposByPage,
-  getFetchReposFailure,
-  getRepositoryCollection,
-  isAbleToCreateRepos,
-  isFetchReposPending
-} from "../modules/repos";
 import {
   Page,
   PageActions,
@@ -20,10 +13,17 @@ import {
   LinkPaginator,
   urls
 } from "@scm-manager/ui-components";
-import RepositoryList from "../components/list";
 import { getRepositoriesLink } from "../../modules/indexResource";
+import {
+  fetchReposByPage,
+  getFetchReposFailure,
+  getRepositoryCollection,
+  isAbleToCreateRepos,
+  isFetchReposPending
+} from "../modules/repos";
+import RepositoryList from "../components/list";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   showCreateButton: boolean;
@@ -32,7 +32,6 @@ type Props = {
   reposLink: string;
 
   // context props
-  t: (p: string) => string;
   history: History;
   location: any;
 
@@ -132,4 +131,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(withRouter(Overview)));
+)(withTranslation("repos")(withRouter(Overview)));

scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx

@@ -1,19 +1,17 @@
 import React from "react";
-import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
-
 import { connect } from "react-redux";
 import { Redirect, Route, Switch } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-
 import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
 import BranchesOverview from "../branches/containers/BranchesOverview";
 import CreateBranch from "../branches/containers/CreateBranch";
 import Permissions from "../permissions/containers/Permissions";
-
-import { History } from "history";
 import EditRepoNavLink from "../components/EditRepoNavLink";
 import BranchRoot from "../branches/containers/BranchRoot";
 import ChangesetsRoot from "./ChangesetsRoot";
@@ -22,9 +20,8 @@ import PermissionsNavLink from "../components/PermissionsNavLink";
 import Sources from "../sources/containers/Sources";
 import RepositoryNavLink from "../components/RepositoryNavLink";
 import { getLinks, getRepositoriesLink } from "../../modules/indexResource";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 
-type Props = {
+type Props = WithTranslation & {
   namespace: string;
   name: string;
   repository: Repository;
@@ -37,7 +34,6 @@ type Props = {
   fetchRepoByName: (link: string, namespace: string, name: string) => void;
 
   // context props
-  t: (p: string) => string;
   history: History;
   match: any;
 };
@@ -45,7 +41,6 @@ type Props = {
 class RepositoryRoot extends React.Component<Props> {
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
-
     fetchRepoByName(repoLink, namespace, name);
   }
 
@@ -237,4 +232,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(RepositoryRoot));
+)(withTranslation("repos")(RepositoryRoot));

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

@@ -1,9 +1,8 @@
 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 & {
-  t: (p: string) => string;
   disabled: boolean;
   name: string;
   checked: boolean;
@@ -27,4 +26,4 @@ class PermissionCheckbox extends React.Component<Props> {
   }
 }
 
-export default translate("plugins")(PermissionCheckbox);
+export default withTranslation("plugins")(PermissionCheckbox);

scm-ui/ui-webapp/src/repos/permissions/components/RoleSelector.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Select } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
-  t: (p: string) => string;
   availableRoles: string[];
   handleRoleChange: (p: string) => void;
   role: string;
@@ -42,4 +41,4 @@ class RoleSelector extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(RoleSelector);
+export default withTranslation("repos")(RoleSelector);

scm-ui/ui-webapp/src/repos/permissions/components/buttons/DeletePermissionButton.tsx

@@ -1,14 +1,13 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Permission } from "@scm-manager/ui-types";
 import { confirmAlert } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   permission: Permission;
   namespace: string;
   repoName: string;
   confirmDialog?: boolean;
-  t: (p: string) => string;
   deletePermission: (permission: Permission, namespace: string, repoName: string) => void;
   loading: boolean;
 };
@@ -61,4 +60,4 @@ class DeletePermissionButton extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DeletePermissionButton);
+export default withTranslation("repos")(DeletePermissionButton);

scm-ui/ui-webapp/src/repos/permissions/containers/AdvancedPermissionsDialog.tsx

@@ -1,17 +1,14 @@
 import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ButtonGroup, Button, SubmitButton, Modal } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
 import PermissionCheckbox from "../components/PermissionCheckbox";
 
-type Props = {
+type Props = WithTranslation & {
   readOnly: boolean;
   availableVerbs: string[];
   selectedVerbs: string[];
   onSubmit: (p: string[]) => void;
   onClose: () => void;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -83,4 +80,4 @@ class AdvancedPermissionsDialog extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(AdvancedPermissionsDialog);
+export default withTranslation("repos")(AdvancedPermissionsDialog);

scm-ui/ui-webapp/src/repos/permissions/containers/CreatePermissionForm.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { PermissionCollection, PermissionCreateEntry, RepositoryRole, SelectValue } from "@scm-manager/ui-types";
 import {
   Button,
@@ -15,7 +15,7 @@ import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 import { findVerbsForRole } from "../modules/permissions";
 
-type Props = {
+type Props = WithTranslation & {
   availableRoles: RepositoryRole[];
   availableVerbs: string[];
   createPermission: (permission: PermissionCreateEntry) => void;
@@ -23,9 +23,6 @@ type Props = {
   currentPermissions: PermissionCollection;
   groupAutocompleteLink: string;
   userAutocompleteLink: string;
-
-  // Context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -231,4 +228,4 @@ class CreatePermissionForm extends React.Component<Props, State> {
   };
 }
 
-export default translate("repos")(CreatePermissionForm);
+export default withTranslation("repos")(CreatePermissionForm);