add edit view

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

@@ -4,8 +4,12 @@
     "error-subtitle": "Unknown permissions error"
   },
   "permission": {
-    "name": "Username",
+    "name": "Name",
     "type": "Type",
     "group-permission": "Group Permission"
+  },
+  "edit-permission": {
+    "delete-button": "Delete",
+    "save-button": "Save Changes"
   }
 }

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

@@ -0,0 +1,108 @@
+// @flow
+import React from "react";
+import type { Permission } from "../../types/Permissions";
+import { Checkbox, InputField } from "../../../components/forms/index";
+import { DeleteButton, SubmitButton } from "../../../components/buttons/index";
+import { translate } from "react-i18next";
+import { Select } from "../../../components/forms";
+
+type Props = {
+  permission: Permission,
+  t: string => string
+};
+
+type State = {
+  name: string,
+  type: string,
+  groupPermission: boolean
+};
+
+class PermissionRowEditable extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      name: "",
+      type: "READ",
+      groupPermission: false
+    };
+  }
+
+  componentDidMount() {
+    const { permission } = this.props;
+    if (permission) {
+      this.setState({
+        name: permission.name,
+        type: permission.type,
+        groupPermission: permission.groupPermission
+      });
+    }
+  }
+
+  render() {
+    const { name, type, groupPermission } = this.state;
+    const { t } = this.props;
+    const types = ["READ", "OWNER", "GROUP"];
+
+    const deleteButton = this.props.permission._links.delete ? (
+      <DeleteButton label={t("edit-permission.delete-button")} />
+    ) : null;
+
+    return (
+      <tr>
+        <td>
+          <InputField
+            value={name ? name : ""}
+            onChange={this.handleNameChange}
+          />
+        </td>
+        <td className="is-hidden-mobile">
+          <Select
+            onChange={this.handleTypeChange}
+            value={type ? type : ""}
+            options={this.createSelectOptions(types)}
+          />
+        </td>
+        <td>
+          <Checkbox
+            checked={groupPermission ? groupPermission : false}
+            onChange={this.handleGroupPermissionChange}
+          />
+        </td>
+        <td>
+          <SubmitButton label={t("edit-permission.save-button")} />
+        </td>
+        <td>{deleteButton}</td>
+      </tr>
+    );
+  }
+
+  handleTypeChange = (type: string) => {
+    this.setState({
+      type: type
+    });
+  };
+
+  createSelectOptions(types: string[]) {
+    return types.map(type => {
+      return {
+        label: type,
+        value: type
+      };
+    });
+  }
+
+  handleNameChange = (name: string) => {
+    this.setState({
+      name: name
+    });
+  };
+
+  handleGroupPermissionChange = (groupPermission: boolean) => {
+    this.setState({
+      groupPermission: groupPermission
+    });
+  };
+}
+
+export default translate("permissions")(PermissionRowEditable);

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

@@ -3,6 +3,7 @@ import React from "react";
 import { translate } from "react-i18next";
 import PermissionRow from "./PermissionRow";
 import type { PermissionCollection } from "../../types/Permissions";
+import PermissionRowEditable from "./PermissionRowEditable";
 
 type Props = {
   t: string => string,
@@ -12,21 +13,27 @@ type Props = {
 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>
+        <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) => {
+              if (permission._links.update)
+                return (
+                  <PermissionRowEditable key={index} permission={permission} />
+                );
+               else
+                return <PermissionRow key={index} permission={permission} />;
+            })}
+          </tbody>
+        </table>
     );
   }
 }