Migrate react-i18next translate components

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 { translate } from "react-i18next";
-import BranchForm from "../components/BranchForm";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+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 { translate } from "react-i18next";
+import { WithTranslation, withTranslation } 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 { Subtitle, InputField, Select, SubmitButton, Textarea } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 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 true;
-    }
-    return false;
+    return !value;
+
   }
 
   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 { translate } from "react-i18next";
+import {
+  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 { translate } from "react-i18next";
-import { Route, withRouter } from "react-router-dom";
-import Changesets from "./Changesets";
+import { compose } from "redux";
 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 { Page } from "@scm-manager/ui-components";
-import RepositoryForm from "../components/form";
+import { WithTranslation, withTranslation } from "react-i18next";
+import { History } from "history";
 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 = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   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 = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   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);

scm-ui/ui-webapp/src/repos/permissions/containers/Permissions.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 {
   createPermission,
   createPermissionReset,
@@ -35,7 +35,7 @@ import {
   getUserAutoCompleteLink
 } from "../../../modules/indexResource";
 
-type Props = {
+type Props = WithTranslation & {
   availablePermissions: boolean;
   availableRepositoryRoles: RepositoryRole[];
   availableVerbs: string[];
@@ -52,7 +52,7 @@ type Props = {
   groupAutocompleteLink: string;
   userAutocompleteLink: string;
 
-  //dispatch functions
+  // dispatch functions
   fetchAvailablePermissionsIfNeeded: (repositoryRolesLink: string, repositoryVerbsLink: string) => void;
   fetchPermissions: (link: string, namespace: string, repoName: string) => void;
   createPermission: (
@@ -65,8 +65,8 @@ type Props = {
   createPermissionReset: (p1: string, p2: string) => void;
   modifyPermissionReset: (p1: string, p2: string) => void;
   deletePermissionReset: (p1: string, p2: string) => void;
+
   // context props
-  t: (p: string) => string;
   match: any;
   history: History;
 };
@@ -248,4 +248,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(Permissions));
+)(withTranslation("repos")(Permissions));

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { History } from "history";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { RepositoryRole, Permission } from "@scm-manager/ui-types";
 import { Button, Icon } from "@scm-manager/ui-components";
@@ -16,13 +16,12 @@ import DeletePermissionButton from "../components/buttons/DeletePermissionButton
 import RoleSelector from "../components/RoleSelector";
 import AdvancedPermissionsDialog from "./AdvancedPermissionsDialog";
 
-type Props = {
+type Props = WithTranslation & {
   availableRepositoryRoles: RepositoryRole[];
   availableRepositoryVerbs: string[];
   submitForm: (p: Permission) => void;
   modifyPermission: (permission: Permission, namespace: string, name: string) => void;
   permission: Permission;
-  t: (p: string) => string;
   namespace: string;
   repoName: string;
   match: any;
@@ -233,4 +232,4 @@ const mapDispatchToProps = dispatch => {
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(translate("repos")(SinglePermission));
+)(withTranslation("repos")(SinglePermission));

scm-ui/ui-webapp/src/repos/sources/components/FileTree.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import styled from "styled-components";
 import { binder } from "@scm-manager/ui-extensions";
 import { Repository, File } from "@scm-manager/ui-types";
@@ -10,7 +10,7 @@ import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-compon
 import { getFetchSourcesFailure, isFetchSourcesPending, getSources } from "../modules/sources";
 import FileTreeLeaf from "./FileTreeLeaf";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   error: Error;
   tree: File;
@@ -20,7 +20,6 @@ type Props = {
   baseUrl: string;
 
   // context props
-  t: (p: string) => string;
   match: any;
 };
 
@@ -142,4 +141,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
 export default compose(
   withRouter,
   connect(mapStateToProps)
-)(translate("repos")(FileTree));
+)(withTranslation("repos")(FileTree));

scm-ui/ui-webapp/src/repos/sources/components/content/DownloadViewer.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { File } from "@scm-manager/ui-types";
 import { DownloadButton } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
 };
 
@@ -19,4 +18,4 @@ class DownloadViewer extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DownloadViewer);
+export default withTranslation("repos")(DownloadViewer);

scm-ui/ui-webapp/src/repos/sources/components/content/FileButtonAddons.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { ButtonAddons, Button } from "@scm-manager/ui-components";
 
-type Props = {
+type Props = WithTranslation & {
   className?: string;
-  t: (p: string) => string;
   historyIsSelected: boolean;
   showHistory: (p: boolean) => void;
 };
@@ -46,4 +45,4 @@ class FileButtonAddons extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(FileButtonAddons);
+export default withTranslation("repos")(FileButtonAddons);

scm-ui/ui-webapp/src/repos/sources/components/content/ImageViewer.tsx

@@ -1,9 +1,8 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { File } from "@scm-manager/ui-types";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
 };
 
@@ -20,4 +19,4 @@ class ImageViewer extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(ImageViewer);
+export default withTranslation("repos")(ImageViewer);

scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { translate } from "react-i18next";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { apiClient, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File } from "@scm-manager/ui-types";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 
-type Props = {
-  t: (p: string) => string;
+type Props = WithTranslation & {
   file: File;
   language: string;
 };
@@ -85,4 +84,4 @@ export function getContent(url: string) {
     });
 }
 
-export default translate("repos")(SourcecodeViewer);
+export default withTranslation("repos")(SourcecodeViewer);

scm-ui/ui-webapp/src/repos/sources/containers/Content.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 { ExtensionPoint } from "@scm-manager/ui-extensions";
@@ -11,15 +11,12 @@ import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
 
-type Props = {
+type Props = WithTranslation & {
   loading: boolean;
   file: File;
   repository: Repository;
   revision: string;
   path: string;
-
-  // context props
-  t: (p: string) => string;
 };
 
 type State = {
@@ -209,4 +206,4 @@ const mapStateToProps = (state: any, ownProps: Props) => {
   };
 };
 
-export default connect(mapStateToProps)(translate("repos")(Content));
+export default connect(mapStateToProps)(withTranslation("repos")(Content));

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
+import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch, Repository } from "@scm-manager/ui-types";
-import FileTree from "../components/FileTree";
 import { BranchSelector, Breadcrumb, ErrorNotification, Loading } from "@scm-manager/ui-components";
-import { translate } from "react-i18next";
+import FileTree from "../components/FileTree";
 import {
   fetchBranches,
   getBranches,
@@ -15,7 +15,7 @@ import { compose } from "redux";
 import Content from "./Content";
 import { fetchSources, isDirectory } from "../modules/sources";
 
-type Props = {
+type Props = WithTranslation & {
   repository: Repository;
   loading: boolean;
   error: Error;
@@ -33,7 +33,6 @@ type Props = {
   history: any;
   match: any;
   location: any;
-  t: (p: string) => string;
 };
 
 type State = {
@@ -203,7 +202,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default compose(
-  translate("repos"),
+  withTranslation("repos"),
   withRouter,
   connect(
     mapStateToProps,