add systemRoleTag for systemRoles

scm-ui/src/config/components/SystemRoleTag.js

@@ -0,0 +1,35 @@
+//@flow
+import React from "react";
+import injectSheet from "react-jss";
+import classNames from "classnames";
+import { translate } from "react-i18next";
+
+type Props = {
+  system?: boolean,
+  classes: any,
+  t: string => string
+};
+
+const styles = {
+  tag: {
+    marginLeft: "0.75rem",
+    verticalAlign: "inherit"
+  }
+};
+
+class SystemRoleTag extends React.Component<Props> {
+  render() {
+    const { system, classes, t } = this.props;
+
+    if (system) {
+      return (
+        <span className={classNames("tag is-dark", classes.tag)}>
+          {t("roles.system")}
+        </span>
+      );
+    }
+    return null;
+  }
+}
+
+export default injectSheet(styles)(translate("config")(SystemRoleTag));

scm-ui/src/config/components/table/PermissionRoleRow.js

@@ -2,6 +2,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import type { Role } from "@scm-manager/ui-types";
+import SystemRoleTag from "../SystemRoleTag";
 
 type Props = {
   baseUrl: string,
@@ -9,16 +10,23 @@ type Props = {
 };
 
 class PermissionRoleRow extends React.Component<Props> {
-  renderLink(to: string, label: string) {
+  renderLink(to: string, label: string, system?: boolean) {
+    if (!system) {
       return <Link to={to}>{label}</Link>;
     }
+    return (
+      <>
+        {label} <SystemRoleTag system={system} />
+      </>
+    );
+  }
 
   render() {
     const { baseUrl, role } = this.props;
     const to = `${baseUrl}/${encodeURIComponent(role.name)}/edit`;
     return (
       <tr>
-        <td>{this.renderLink(to, role.name)}</td>
+        <td>{this.renderLink(to, role.name, !role._links.update)}</td>
       </tr>
     );
   }