add create permission possibility

scm-ui/src/permissions/components/CreatePermissionForm.js

@@ -1,14 +1,20 @@
 // @flow
 import React from "react";
-import type { Permission } from "../types/Permissions";
 import { translate } from "react-i18next";
+import { Checkbox, InputField } from "../../components/forms";
+import TypeSelector from "./TypeSelector";
+import type { Permission } from "../types/Permissions";
+import { SubmitButton } from "../../components/buttons";
 
 type Props = {
-  t: string => string
+  t: string => string,
+  createPermission: (permission: Permission) => void
 };
 
 type State = {
-  permission: Permission
+  name: string,
+  type: string,
+  groupPermission: boolean
 };
 
 class CreatePermissionForm extends React.Component<Props, State> {
@@ -16,18 +22,84 @@ class CreatePermissionForm extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      permission: {
-        name: "",
-        type: "READ",
-        groupPermission: false,
-        _links: {}
-      }
+      name: "",
+      type: "READ",
+      groupPermission: false
     };
   }
 
   render() {
-    return "Show Permissions here!";
+    const { t } = this.props;
+    const { name, type, groupPermission } = this.state;
+
+    return (
+      <div>
+        <h2 className="subtitle">
+          {t("add-permission.add-permission-heading")}
+        </h2>
+        <table className="table">
+          <tbody>
+            <tr>
+              <td>{t("permission.name")}</td>
+              <td>
+                <InputField
+                  value={name ? name : ""}
+                  onChange={this.handleNameChange}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>{t("permission.group-permission")}</td>
+              <td>
+                <Checkbox
+                  checked={groupPermission ? groupPermission : false}
+                  onChange={this.handleGroupPermissionChange}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>{t("permission.type")}</td>
+              <td>
+                <TypeSelector
+                  handleTypeChange={this.handleTypeChange}
+                  type={type ? type : "READ"}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <SubmitButton
+          label={t("add-permission.submit-button")}
+          action={this.submit}
+        />
+      </div>
+    );
   }
+
+  submit = () => {
+    this.props.createPermission({
+      name: this.state.name,
+      type: this.state.type,
+      groupPermission: this.state.groupPermission
+    });
+  };
+
+  handleTypeChange = (type: string) => {
+    this.setState({
+      type: type
+    });
+  };
+
+  handleNameChange = (name: string) => {
+    this.setState({
+      name: name
+    });
+  };
+  handleGroupPermissionChange = (groupPermission: boolean) => {
+    this.setState({
+      groupPermission: groupPermission
+    });
+  };
 }
 
 export default translate("permissions")(CreatePermissionForm);

scm-ui/src/permissions/components/TypeSelector.js

@@ -0,0 +1,39 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import { Select } from "../../components/forms";
+
+type Props = {
+  t: string => string,
+  handleTypeChange: string => void,
+  type: string,
+  loading?: boolean
+};
+
+class TypeSelector extends React.Component<Props> {
+
+  render() {
+    const { t, type, handleTypeChange, loading } = this.props;
+    const types = ["READ", "OWNER", "GROUP"];
+
+    return (
+            <Select
+              onChange={handleTypeChange}
+              value={type ? type : ""}
+              options={this.createSelectOptions(types)}
+              loading={loading}
+            />
+    );
+  }
+
+  createSelectOptions(types: string[]) {
+    return types.map(type => {
+      return {
+        label: type,
+        value: type
+      };
+    });
+  }
+}
+
+export default translate("permissions")(TypeSelector);