show permissions in table

scm-ui/public/locales/en/permissions.json

@@ -2,5 +2,10 @@
   "permissions": {
     "error-title": "Error",
     "error-subtitle": "Unknown permissions error"
+  },
+  "permission": {
+    "name": "Username",
+    "type": "Type",
+    "group-permission": "Group Permission"
   }
 }

scm-ui/src/permissions/components/table/PermissionRow.js

@@ -0,0 +1,23 @@
+// @flow
+import React from "react";
+import type { Permission } from "../../types/Permissions";
+import { Checkbox } from "../../../components/forms";
+
+type Props = {
+  permission: Permission
+};
+
+export default class PermissionRow extends React.Component<Props> {
+  render() {
+    const { permission } = this.props;
+    return (
+      <tr>
+        <td>{permission.name}</td>
+        <td className="is-hidden-mobile">{permission.type}</td>
+        <td>
+          <Checkbox checked={permission ? permission.groupPermission : false} />
+        </td>
+      </tr>
+    );
+  }
+}

scm-ui/src/permissions/components/table/PermissionsTable.js

@@ -0,0 +1,34 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import PermissionRow from "./PermissionRow";
+import type { PermissionCollection } from "../../types/Permissions";
+
+type Props = {
+  t: string => string,
+  permissions: PermissionCollection
+};
+
+class PermissionsTable extends React.Component<Props> {
+  render() {
+    const { permissions, t } = this.props;
+    return (
+      <table className="table is-hoverable is-fullwidth">
+        <thead>
+        <tr>
+          <th>{t("permission.name")}</th>
+          <th className="is-hidden-mobile">{t("permission.type")}</th>
+          <th>{t("permission.group-permission")}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {permissions.map((permission, index) => {
+          return <PermissionRow key={index} permission={permission} />;
+        })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default translate("permissions")(PermissionsTable);

scm-ui/src/permissions/containers/Permissions.js

@@ -10,7 +10,8 @@ import {
 } from "../modules/permissions";
 import Loading from "../../components/Loading";
 import ErrorPage from "../../components/ErrorPage";
-import type {PermissionCollection}  from "../types/Permissions";
+import type { PermissionCollection } from "../types/Permissions";
+import PermissionsTable from "../components/table/PermissionsTable";
 
 type Props = {
   namespace: string,
@@ -51,7 +52,10 @@ class Permissions extends React.Component<Props> {
       return <Loading />;
     }
 
-    return <div>Permissions will be shown here!</div>;
+    if (permissions.length > 0)
+      return <PermissionsTable permissions={permissions} />;
+
+    return <div />;
   }
 }