Migrate react-i18next translate components

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 { SubmitButton, Notification } from "@scm-manager/ui-components";
+import { WithTranslation, withTranslation } from "react-i18next";
 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 { Select } from "@scm-manager/ui-components";
+import { withTranslation, WithTranslation } from "react-i18next";
 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 classNames from "classnames";
+import { WithTranslation, withTranslation } from "react-i18next";
 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 = {
-  // context props
-  t: (p: string) => string;
-};
-
-class InstallSuccessNotification extends React.Component<Props> {
+class InstallSuccessNotification extends React.Component<WithTranslation> {
   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 { RepositoryRole } from "@scm-manager/ui-types";
+import { WithTranslation, withTranslation } from "react-i18next";
 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 } from "react-router-dom";
+import { Route, withRouter } 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))
 );