handling error and loading state

scm-ui/src/components/forms/Select.js

@@ -1,5 +1,6 @@
 //@flow
 import React from "react";
+import classNames from "classnames";
 
 export type SelectItem = {
   value: string,
@@ -10,7 +11,8 @@ type Props = {
   label?: string,
   options: SelectItem[],
   value?: SelectItem,
-  onChange: string => void
+  onChange: string => void,
+  loading?: boolean
 };
 
 class Select extends React.Component<Props> {
@@ -37,12 +39,15 @@ class Select extends React.Component<Props> {
   };
 
   render() {
-    const { options, value } = this.props;
+    const { options, value, loading } = this.props;
-
+    const loadingClass = loading ? "is-loading" : "";
     return (
       <div className="field">
         {this.renderLabel()}
-        <div className="control select">
+        <div className={classNames(
+          "control select",
+          loadingClass
+        )}>
           <select
             ref={input => {
               this.field = input;

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

@@ -5,10 +5,16 @@ import { Checkbox } from "../../components/forms/index";
 import { DeleteButton } from "../../components/buttons/index";
 import { translate } from "react-i18next";
 import { Select } from "../../components/forms/index";
-import { modifyPermission } from "../modules/permissions";
+import {
+  modifyPermission,
+  isModifyPermissionPending,
+  getModifyPermissionFailure,
+  modifyPermissionReset
+} from "../modules/permissions";
 import connect from "react-redux/es/connect/connect";
 import { withRouter } from "react-router-dom";
 import type { History } from "history";
+import ErrorNotification from "../../components/ErrorNotification";
 
 type Props = {
   submitForm: Permission => void,
@@ -18,7 +24,10 @@ type Props = {
   namespace: string,
   name: string,
   match: any,
-  history: History
+  history: History,
+  loading: boolean,
+  error: Error,
+  permissionReset: (string, string, string) => void
 };
 
 type State = {
@@ -41,6 +50,11 @@ class SinglePermission extends React.Component<Props, State> {
 
   componentDidMount() {
     const { permission } = this.props;
+    this.props.permissionReset(
+      this.props.namespace,
+      this.props.name,
+      permission.name
+    );
     if (permission) {
       this.setState({
         permission: {
@@ -55,9 +69,8 @@ class SinglePermission extends React.Component<Props, State> {
 
   render() {
     const { permission } = this.state;
-    const { t } = this.props;
+    const { t, loading, error } = this.props;
     const types = ["READ", "OWNER", "GROUP"];
-
     const deleteButton = this.props.permission._links.delete ? (
       <DeleteButton label={t("edit-permission.delete-button")} />
     ) : null;
@@ -68,12 +81,17 @@ class SinglePermission extends React.Component<Props, State> {
           onChange={this.handleTypeChange}
           value={permission.type ? permission.type : ""}
           options={this.createSelectOptions(types)}
+          loading={loading}
         />
       </td>
     ) : (
       <td>{permission.type}</td>
     );
 
+    const errorNotification = error ? (
+      <ErrorNotification error={error} />
+    ) : null;
+
     return (
       <tr>
         <td>{permission.name}</td>
@@ -81,7 +99,7 @@ class SinglePermission extends React.Component<Props, State> {
           <Checkbox checked={permission ? permission.groupPermission : false} />
         </td>
         {typeSelector}
-        <td>{deleteButton}</td>
+        <td>{deleteButton}</td> {errorNotification}
       </tr>
     );
   }
@@ -116,7 +134,23 @@ class SinglePermission extends React.Component<Props, State> {
   }
 }
 
-const mapStateToProps = (state, ownProps) => {};
+const mapStateToProps = (state, ownProps) => {
+  const permission = ownProps.permission;
+  const loading = isModifyPermissionPending(
+    state,
+    ownProps.namespace,
+    ownProps.name,
+    permission.name
+  );
+  const error = getModifyPermissionFailure(
+    state,
+    ownProps.namespace,
+    ownProps.name,
+    permission.name
+  );
+
+  return { loading, error };
+};
 
 const mapDispatchToProps = dispatch => {
   return {
@@ -126,6 +160,13 @@ const mapDispatchToProps = dispatch => {
       name: string
     ) => {
       dispatch(modifyPermission(permission, namespace, name));
+    },
+    permissionReset: (
+      namespace: string,
+      name: string,
+      permissionname: string
+    ) => {
+      dispatch(modifyPermissionReset(namespace, name, permissionname));
     }
   };
 };

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

@@ -26,6 +26,9 @@ export const MODIFY_PERMISSION_SUCCESS = `${MODIFY_PERMISSION}_${
 export const MODIFY_PERMISSION_FAILURE = `${MODIFY_PERMISSION}_${
   types.FAILURE_SUFFIX
 }`;
+export const MODIFY_PERMISSION_RESET = `${MODIFY_PERMISSION}_${
+  types.RESET_SUFFIX
+}`;
 const REPOS_URL = "repositories";
 const PERMISSIONS_URL = "permissions";
 const CONTENT_TYPE = "application/vnd.scmm-permission+json";
@@ -98,15 +101,11 @@ export function modifyPermission(
   callback?: () => void
 ) {
   return function(dispatch: any) {
-    dispatch(
+    dispatch(modifyPermissionPending(permission, namespace, name));
-      modifyPermissionPending(permission, namespace, name)
-    );
     return apiClient
       .put(permission._links.update.href, permission, CONTENT_TYPE)
       .then(() => {
-        dispatch(
+        dispatch(modifyPermissionSuccess(permission, namespace, name));
-          modifyPermissionSuccess(permission, namespace, name)
-        );
         if (callback) {
           callback();
         }
@@ -142,7 +141,7 @@ export function modifyPermissionSuccess(
     payload: {
       permission
     },
-    itemId: namespace + "/" + name
+    itemId: namespace + "/" + name + "/" + permission.name
   };
 }
 
@@ -163,22 +162,27 @@ function newPermissions(
   oldPermissions: PermissionCollection,
   newPermission: Permission
 ) {
-  console.log("oldPermissions:");
-  console.log(oldPermissions);
-  console.log("new Permission:");
-  console.log(newPermission);
   for (let i = 0; i < oldPermissions.length; i++) {
-    console.log("permissionname:");
-    console.log("an der stelle i: " + oldPermissions[i].name);
     if (oldPermissions[i].name === newPermission.name) {
       oldPermissions.splice(i, 1, newPermission);
-      console.log("new Permissions");
-      console.log(oldPermissions);
       return oldPermissions;
     }
   }
 }
 
+// reset
+
+export function modifyPermissionReset(
+  namespace: string,
+  name: string,
+  permissionname: string
+) {
+  return {
+    type: MODIFY_PERMISSION_RESET,
+    itemId: namespace + "/" + name + "/" + permissionname
+  };
+}
+
 // reducer
 export default function reducer(
   state: Object = {},