show verb translations

scm-ui/src/config/roles/components/AvailableVerbs.js

@@ -0,0 +1,46 @@
+//@flow
+import React from "react";
+import type { Role } from "@scm-manager/ui-types";
+import { translate } from "react-i18next";
+import { compose } from "redux";
+import injectSheet from "react-jss";
+
+type Props = {
+  role: Role,
+  // context props
+  t: string => string
+};
+
+const styles = {
+  spacing: {
+    padding: "0 !important"
+  }
+};
+
+class AvailableVerbs extends React.Component<Props> {
+
+  render() {
+    const { role, t, classes } = this.props;
+
+    let verbs = null;
+    if (role.verbs.length > 0) {
+      verbs = (
+        <tr>
+          <td className={classes.spacing}>
+            <ul>
+              {role.verbs.map(verb => {
+                return <li>{t("verbs.repository." + verb + ".displayName")}</li>;
+              })}
+            </ul>
+          </td>
+        </tr>
+      );
+    }
+    return (verbs);
+  }
+}
+
+export default compose(
+  injectSheet(styles),
+  translate("plugins")
+)(AvailableVerbs);

scm-ui/src/config/roles/components/PermissionRoleDetailsTable.js

@@ -2,8 +2,7 @@
 import React from "react";
 import type { Role } from "@scm-manager/ui-types";
 import { translate } from "react-i18next";
-import { compose } from "redux";
-import injectSheet from "react-jss";
+import AvailableVerbs from "./AvailableVerbs";
 
 type Props = {
   role: Role,
@@ -11,12 +10,6 @@ type Props = {
   t: string => string
 };
 
-const styles = {
-  spacing: {
-    padding: "0 !important"
-  }
-};
-
 class PermissionRoleDetailsTable extends React.Component<Props> {
   render() {
     const { role, t } = this.props;
@@ -31,35 +24,14 @@ class PermissionRoleDetailsTable extends React.Component<Props> {
             <th>{t("repositoryRole.type")}</th>
             <td>{role.type}</td>
           </tr>
-          {this.renderVerbs()}
+          <tr>
+            <th>{t("repositoryRole.verbs")}</th>
+            <AvailableVerbs role={role} />
+          </tr>
         </tbody>
       </table>
     );
   }
-
-  renderVerbs() {
-    const { role, t, classes } = this.props;
-
-    let verbs = null;
-    if (role.verbs.length > 0) {
-      verbs = (
-        <tr>
-          <th>{t("repositoryRole.verbs")}</th>
-          <td className={classes.spacing}>
-            <ul>
-              {role.verbs.map(verb => {
-                return <li>{verb}</li>;
-              })}
-            </ul>
-          </td>
-        </tr>
-      );
-    }
-    return verbs;
-  }
 }
 
-export default compose(
-  injectSheet(styles),
-  translate("config")
-)(PermissionRoleDetailsTable);
+export default translate("config")(PermissionRoleDetailsTable);