add selector for createPermission and show create dummy in uiC

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

@@ -0,0 +1,33 @@
+// @flow
+import React from "react";
+import type { Permission } from "../types/Permissions";
+import { translate } from "react-i18next";
+
+type Props = {
+  t: string => string
+};
+
+type State = {
+  permission: Permission
+};
+
+class CreatePermissionForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      permission: {
+        name: "",
+        type: "READ",
+        groupPermission: false,
+        _links: {}
+      }
+    };
+  }
+
+  render() {
+    return "Show Permissions here!";
+  }
+}
+
+export default translate("permissions")(CreatePermissionForm);

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

@@ -6,12 +6,14 @@ import {
   fetchPermissions,
   getFetchPermissionsFailure,
   isFetchPermissionsPending,
-  getPermissionsOfRepo
+  getPermissionsOfRepo,
+  hasCreatePermission
 } from "../modules/permissions";
 import Loading from "../../components/Loading";
 import ErrorPage from "../../components/ErrorPage";
 import type { PermissionCollection } from "../types/Permissions";
 import SinglePermission from "./SinglePermission";
+import CreatePermissionForm from "../components/CreatePermissionForm";
 
 type Props = {
   namespace: string,
@@ -19,6 +21,7 @@ type Props = {
   loading: boolean,
   error: Error,
   permissions: PermissionCollection,
+  createPermission: boolean,
 
   //dispatch functions
   fetchPermissions: (namespace: string, name: string) => void,
@@ -36,7 +39,16 @@ class Permissions extends React.Component<Props> {
   }
 
   render() {
-    const { loading, error, permissions, t, namespace, name } = this.props;
+    const {
+      loading,
+      error,
+      permissions,
+      t,
+      namespace,
+      name,
+      createPermission
+    } = this.props;
+
     if (error) {
       return (
         <ErrorPage
@@ -51,29 +63,36 @@ class Permissions extends React.Component<Props> {
       return <Loading />;
     }
 
+    const createPermissionForm = createPermission ? (
+      <CreatePermissionForm />
+    ) : null;
+
     if (permissions.length > 0)
       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 (
-                <SinglePermission
-                  key={index}
-                  namespace={namespace}
-                  name={name}
-                  permission={permission}
-                />
-              );
-            })}
-          </tbody>
-        </table>
+        <div>
+          <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 (
+                  <SinglePermission
+                    key={index}
+                    namespace={namespace}
+                    name={name}
+                    permission={permission}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+          {createPermissionForm}
+        </div>
       );
 
     return <div />;
@@ -86,12 +105,14 @@ const mapStateToProps = (state, ownProps) => {
   const error = getFetchPermissionsFailure(state, namespace, name);
   const loading = isFetchPermissionsPending(state, namespace, name);
   const permissions = getPermissionsOfRepo(state, namespace, name);
+  const createPermission = hasCreatePermission(state, namespace, name);
   return {
     namespace,
     name,
     error,
     loading,
-    permissions
+    permissions,
+    createPermission
   };
 };
 

scm-ui/src/permissions/modules/permissions.js

@@ -5,14 +5,7 @@ import type { Action } from "../../types/Action";
 import type { PermissionCollection, Permission } from "../types/Permissions";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
-import type { User } from "../../users/types/User";
 import { Dispatch } from "redux";
-import {
-  CREATE_USER_FAILURE,
-  CREATE_USER_PENDING,
-  CREATE_USER_RESET,
-  CREATE_USER_SUCCESS
-} from "../../users/modules/users";
 
 export const FETCH_PERMISSIONS = "scm/permissions/FETCH_PERMISSIONS";
 export const FETCH_PERMISSIONS_PENDING = `${FETCH_PERMISSIONS}_${
@@ -366,5 +359,7 @@ export function hasCreatePermission(
   namespace: string,
   name: string
 ) {
-  return state.permissions[namespace + "/" + name].createPermission;
+  if (state.permissions && state.permissions[namespace + "/" + name])
+    return state.permissions[namespace + "/" + name].createPermission;
+  else return null;
 }

scm-ui/src/permissions/modules/permissions.test.js

@@ -438,7 +438,7 @@ describe("permissions selectors", () => {
   it("should return true, when createPermission is true", () => {
     const state = {
       permissions: {
-        ["/hitchhiker/puzzle42"]: {
+        ["hitchhiker/puzzle42"]: {
           createPermission: true
         }
       }
@@ -447,6 +447,13 @@ describe("permissions selectors", () => {
   });
 
   it("should return false, when createPermission is false", () => {
-    expect(hasCreatePermission({}, "hitchiker", "puzzle42")).toEqual(false);
+    const state = {
+      permissions: {
+        ["hitchhiker/puzzle42"]: {
+          createPermission: false
+        }
+      }
+    };
+    expect(hasCreatePermission(state, "hitchhiker", "puzzle42")).toEqual(false);
   });
 });