add createPermission reset and validation for creating

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

@@ -23,6 +23,7 @@
   },
   "add-permission": {
     "add-permission-heading": "Add new Permission",
-    "submit-button": "Submit"
+    "submit-button": "Submit",
+    "name-input-invalid": "Permission for name already exists!"
   }
 }

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

@@ -3,13 +3,17 @@ import React from "react";
 import { translate } from "react-i18next";
 import { Checkbox, InputField } from "../../components/forms";
 import TypeSelector from "./TypeSelector";
-import type {PermissionEntry} from "../types/Permissions";
+import type {
+  PermissionCollection,
+  PermissionEntry
+} from "../types/Permissions";
 import { SubmitButton } from "../../components/buttons";
 
 type Props = {
   t: string => string,
   createPermission: (permission: PermissionEntry) => void,
-  loading: boolean
+  loading: boolean,
+  currentPermissions: PermissionCollection
 };
 
 type State = {
@@ -46,6 +50,8 @@ class CreatePermissionForm extends React.Component<Props, State> {
                 <InputField
                   value={name ? name : ""}
                   onChange={this.handleNameChange}
+                  validationError={this.currentPermissionIncludeName()}
+                  errorMessage={t("add-permission.name-input-invalid")}
                 />
               </td>
             </tr>
@@ -73,11 +79,31 @@ class CreatePermissionForm extends React.Component<Props, State> {
           label={t("add-permission.submit-button")}
           action={this.submit}
           loading={loading}
+          disabled={this.isValid()}
         />
       </div>
     );
   }
 
+  isValid = () => {
+    if (
+      this.state.name === null ||
+      this.state.name === "" ||
+      this.currentPermissionIncludeName()
+    ) {
+      return true;
+    }
+    return false;
+  };
+
+  currentPermissionIncludeName = () => {
+    for (let i = 0; i < this.props.currentPermissions.length; i++) {
+      if (this.props.currentPermissions[i].name === this.state.name)
+        return true;
+    }
+    return false;
+  };
+
   submit = () => {
     this.props.createPermission({
       name: this.state.name,

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

@@ -10,7 +10,7 @@ import {
   getPermissionsOfRepo,
   hasCreatePermission,
   createPermission,
-  isCreatePermissionPending
+  isCreatePermissionPending, getCreatePermissionFailure, createPermissionReset
 } from "../modules/permissions";
 import Loading from "../../components/Loading";
 import ErrorPage from "../../components/ErrorPage";
@@ -39,6 +39,7 @@ type Props = {
     repoName: string,
     callback?: () => void
   ) => void,
+  createPermissionReset: (string, string) => void,
 
   // context props
   t: string => string,
@@ -48,8 +49,9 @@ type Props = {
 
 class Permissions extends React.Component<Props> {
   componentDidMount() {
-    const { fetchPermissions, namespace, repoName } = this.props;
+    const { fetchPermissions, namespace, repoName, createPermissionReset } = this.props;
 
+    createPermissionReset(namespace, repoName);
     fetchPermissions(namespace, repoName);
   }
 
@@ -69,7 +71,6 @@ class Permissions extends React.Component<Props> {
       loadingCreatePermission,
       hasPermissionToCreate
     } = this.props;
-    console.log(permissions);
 
     if (error) {
       return (
@@ -96,6 +97,7 @@ class Permissions extends React.Component<Props> {
           )
         }
         loading={loadingCreatePermission}
+        currentPermissions={permissions}
       />
     ) : null;
     return (
@@ -130,7 +132,7 @@ class Permissions extends React.Component<Props> {
 const mapStateToProps = (state, ownProps) => {
   const namespace = ownProps.namespace;
   const repoName = ownProps.repoName;
-  const error = getFetchPermissionsFailure(state, namespace, repoName);
+  const error = getFetchPermissionsFailure(state, namespace, repoName) || getCreatePermissionFailure(state, namespace, repoName);
   const loading = isFetchPermissionsPending(state, namespace, repoName);
   const permissions = getPermissionsOfRepo(state, namespace, repoName);
   const loadingCreatePermission = isCreatePermissionPending(
@@ -162,6 +164,12 @@ const mapDispatchToProps = dispatch => {
       callback?: () => void
     ) => {
       dispatch(createPermission(permission, namespace, repoName, callback));
+    },
+    createPermissionReset: (
+      namespace: string,
+      repoName: string
+    ) => {
+      dispatch(createPermissionReset(namespace, repoName));
     }
   };
 };

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

@@ -2,7 +2,11 @@
 import { apiClient } from "../../apiclient";
 import * as types from "../../modules/types";
 import type { Action } from "../../types/Action";
-import type {PermissionCollection, Permission, PermissionEntry} from "../types/Permissions";
+import type {
+  PermissionCollection,
+  Permission,
+  PermissionEntry
+} from "../types/Permissions";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
 import { Dispatch } from "redux";
@@ -40,6 +44,9 @@ export const CREATE_PERMISSION_SUCCESS = `${CREATE_PERMISSION}_${
 export const CREATE_PERMISSION_FAILURE = `${CREATE_PERMISSION}_${
   types.FAILURE_SUFFIX
 }`;
+export const CREATE_PERMISSION_RESET = `${CREATE_PERMISSION}_${
+  types.RESET_SUFFIX
+}`;
 export const DELETE_PERMISSION = "scm/permissions/DELETE_PERMISSION";
 export const DELETE_PERMISSION_PENDING = `${DELETE_PERMISSION}_${
   types.PENDING_SUFFIX
@@ -136,7 +143,9 @@ export function modifyPermission(
         const error = new Error(
           `failed to modify permission: ${cause.message}`
         );
-        dispatch(modifyPermissionFailure(permission, error, namespace, repoName));
+        dispatch(
+          modifyPermissionFailure(permission, error, namespace, repoName)
+        );
       });
   };
 }
@@ -278,6 +287,13 @@ export function createPermissionFailure(
   };
 }
 
+export function createPermissionReset(namespace: string, repoName: string) {
+  return {
+    type: CREATE_PERMISSION_RESET,
+    itemId: namespace + "/" + repoName
+  };
+}
+
 // delete permission
 
 export function deletePermission(
@@ -300,7 +316,9 @@ export function deletePermission(
         const error = new Error(
           `could not delete permission ${permission.name}: ${cause.message}`
         );
-        dispatch(deletePermissionFailure(permission, namespace, repoName, error));
+        dispatch(
+          deletePermissionFailure(permission, namespace, repoName, error)
+        );
       });
   };
 }
@@ -490,22 +508,14 @@ export function isCreatePermissionPending(
   namespace: string,
   repoName: string
 ) {
-  return isPending(
-    state,
-    CREATE_PERMISSION,
-    namespace + "/" + repoName
-  );
+  return isPending(state, CREATE_PERMISSION, namespace + "/" + repoName);
 }
 export function getCreatePermissionFailure(
   state: Object,
   namespace: string,
   repoName: string
 ) {
-  return getFailure(
-    state,
-    CREATE_PERMISSION,
-    namespace + "/" + repoName
-  );
+  return getFailure(state, CREATE_PERMISSION, namespace + "/" + repoName);
 }
 
 export function isDeletePermissionPending(