From 6f1615ef0a67db69f58961d8bde24fb44a77f04f Mon Sep 17 00:00:00 2001
From: Florian Scholdei <florian.scholdei@cloudogu.com>
Date: Wed, 6 Feb 2019 10:42:25 +0100
Subject: [PATCH] added loading and error state

---
 scm-ui/src/groups/components/DeleteGroup.js | 26 +++++++++++++++++---
 scm-ui/src/groups/containers/EditGroup.js   | 12 +++------
 scm-ui/src/repos/components/DeleteRepo.js   | 27 ++++++++++++++++++---
 scm-ui/src/users/components/DeleteUser.js   | 26 +++++++++++++++++---
 scm-ui/src/users/containers/EditUser.js     |  4 +--
 5 files changed, 76 insertions(+), 19 deletions(-)

diff --git a/scm-ui/src/groups/components/DeleteGroup.js b/scm-ui/src/groups/components/DeleteGroup.js
index c32983ff94..5604685ae5 100644
--- a/scm-ui/src/groups/components/DeleteGroup.js
+++ b/scm-ui/src/groups/components/DeleteGroup.js
@@ -2,9 +2,18 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { Group } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
+import {
+  Subtitle,
+  DeleteButton,
+  confirmAlert
+} from "@scm-manager/ui-components";
+import { getDeleteGroupFailure, isDeleteGroupPending } from "../modules/groups";
+import { connect } from "react-redux";
+import { ErrorNotification } from "@scm-manager/ui-components";
 
 type Props = {
+  loading: boolean,
+  error: Error,
   group: Group,
   confirmDialog?: boolean,
   deleteGroup: (group: Group) => void,
@@ -43,7 +52,7 @@ export class DeleteGroup extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, t } = this.props;
+    const { loading, error, confirmDialog, t } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deleteGroup;
 
     if (!this.isDeletable()) {
@@ -53,11 +62,13 @@ export class DeleteGroup extends React.Component<Props> {
     return (
       <>
         <Subtitle subtitle={t("deleteGroup.subtitle")} />
+        <ErrorNotification error={error} />
         <div className="columns">
           <div className="column">
             <DeleteButton
               label={t("deleteGroup.button")}
               action={action}
+              loading={loading}
             />
           </div>
         </div>
@@ -66,4 +77,13 @@ export class DeleteGroup extends React.Component<Props> {
   }
 }
 
-export default translate("groups")(DeleteGroup);
+const mapStateToProps = (state, ownProps) => {
+  const loading = isDeleteGroupPending(state, ownProps.group.name);
+  const error = getDeleteGroupFailure(state, ownProps.group.name);
+  return {
+    loading,
+    error
+  };
+};
+
+export default connect(mapStateToProps)(translate("groups")(DeleteGroup));
diff --git a/scm-ui/src/groups/containers/EditGroup.js b/scm-ui/src/groups/containers/EditGroup.js
index 241a61356a..3a83728dde 100644
--- a/scm-ui/src/groups/containers/EditGroup.js
+++ b/scm-ui/src/groups/containers/EditGroup.js
@@ -7,8 +7,6 @@ import {
   deleteGroup,
   getModifyGroupFailure,
   isModifyGroupPending,
-  getDeleteGroupFailure,
-  isDeleteGroupPending,
   modifyGroupReset
 } from "../modules/groups";
 import type { History } from "history";
@@ -67,7 +65,7 @@ class EditGroup extends React.Component<Props> {
   };
 
   render() {
-    const { group, loading, error } = this.props;
+    const { loading, error, group } = this.props;
     return (
       <div>
         <ErrorNotification error={error} />
@@ -80,17 +78,15 @@ class EditGroup extends React.Component<Props> {
           loadUserSuggestions={this.loadUserAutocompletion}
         />
         <hr />
-        <DeleteGroup
-          group={group}
-          deleteGroup={this.deleteGroup} />
+        <DeleteGroup group={group} deleteGroup={this.deleteGroup} />
       </div>
     );
   }
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const loading = isModifyGroupPending(state, ownProps.group.name) || isDeleteGroupPending(state, ownProps.group.name);
-  const error = getModifyGroupFailure(state, ownProps.group.name) || getDeleteGroupFailure(state, ownProps.group.name);
+  const loading = isModifyGroupPending(state, ownProps.group.name);
+  const error = getModifyGroupFailure(state, ownProps.group.name);
   const autocompleteLink = getUserAutoCompleteLink(state);
   return {
     loading,
diff --git a/scm-ui/src/repos/components/DeleteRepo.js b/scm-ui/src/repos/components/DeleteRepo.js
index 3ba7b08d48..4d1b9f3c7c 100644
--- a/scm-ui/src/repos/components/DeleteRepo.js
+++ b/scm-ui/src/repos/components/DeleteRepo.js
@@ -2,9 +2,18 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { Repository } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
+import {
+  Subtitle,
+  DeleteButton,
+  confirmAlert
+} from "@scm-manager/ui-components";
+import { getDeleteRepoFailure, isDeleteRepoPending } from "../modules/repos";
+import { connect } from "react-redux";
+import { ErrorNotification } from "@scm-manager/ui-components";
 
 type Props = {
+  loading: boolean,
+  error: Error,
   repository: Repository,
   confirmDialog?: boolean,
 
@@ -47,7 +56,7 @@ class DeleteRepo extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, t } = this.props;
+    const { loading, error, confirmDialog, t } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deleteRepo;
 
     if (!this.isDeletable()) {
@@ -57,11 +66,13 @@ class DeleteRepo extends React.Component<Props> {
     return (
       <>
         <Subtitle subtitle={t("deleteRepo.subtitle")} />
+        <ErrorNotification error={error} />
         <div className="columns">
           <div className="column">
             <DeleteButton
               label={t("deleteRepo.button")}
               action={action}
+              loading={loading}
             />
           </div>
         </div>
@@ -70,4 +81,14 @@ class DeleteRepo extends React.Component<Props> {
   }
 }
 
-export default translate("repos")(DeleteRepo);
+const mapStateToProps = (state, ownProps) => {
+  const { namespace, name } = ownProps.repository;
+  const loading = isDeleteRepoPending(state, namespace, name);
+  const error = getDeleteRepoFailure(state, namespace, name);
+  return {
+    loading,
+    error
+  };
+};
+
+export default connect(mapStateToProps)(translate("repos")(DeleteRepo));
diff --git a/scm-ui/src/users/components/DeleteUser.js b/scm-ui/src/users/components/DeleteUser.js
index b8523a375e..91868e44fb 100644
--- a/scm-ui/src/users/components/DeleteUser.js
+++ b/scm-ui/src/users/components/DeleteUser.js
@@ -2,9 +2,18 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { User } from "@scm-manager/ui-types";
-import { Subtitle, DeleteButton, confirmAlert } from "@scm-manager/ui-components";
+import {
+  Subtitle,
+  DeleteButton,
+  confirmAlert
+} from "@scm-manager/ui-components";
+import { getDeleteUserFailure, isDeleteUserPending } from "../modules/users";
+import { connect } from "react-redux";
+import { ErrorNotification } from "@scm-manager/ui-components";
 
 type Props = {
+  loading: boolean,
+  error: Error,
   user: User,
   confirmDialog?: boolean,
 
@@ -47,7 +56,7 @@ class DeleteUser extends React.Component<Props> {
   };
 
   render() {
-    const { confirmDialog, t } = this.props;
+    const { loading, error, confirmDialog, t } = this.props;
     const action = confirmDialog ? this.confirmDelete : this.deleteUser;
 
     if (!this.isDeletable()) {
@@ -57,11 +66,13 @@ class DeleteUser extends React.Component<Props> {
     return (
       <>
         <Subtitle subtitle={t("deleteUser.subtitle")} />
+        <ErrorNotification error={error} />
         <div className="columns">
           <div className="column">
             <DeleteButton
               label={t("deleteUser.button")}
               action={action}
+              loading={loading}
             />
           </div>
         </div>
@@ -70,4 +81,13 @@ class DeleteUser extends React.Component<Props> {
   }
 }
 
-export default translate("users")(DeleteUser);
+const mapStateToProps = (state, ownProps) => {
+  const loading = isDeleteUserPending(state, ownProps.user.name);
+  const error = getDeleteUserFailure(state, ownProps.user.name);
+  return {
+    loading,
+    error
+  };
+};
+
+export default connect(mapStateToProps)(translate("users")(DeleteUser));
diff --git a/scm-ui/src/users/containers/EditUser.js b/scm-ui/src/users/containers/EditUser.js
index 6b061c48bf..4198c97447 100644
--- a/scm-ui/src/users/containers/EditUser.js
+++ b/scm-ui/src/users/containers/EditUser.js
@@ -71,8 +71,8 @@ class EditUser extends React.Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => {
-  const loading = isModifyUserPending(state, ownProps.user.name) || isDeleteUserPending(state, ownProps.user.name);
-  const error = getModifyUserFailure(state, ownProps.user.name) || getDeleteUserFailure(state, ownProps.user.name);
+  const loading = isModifyUserPending(state, ownProps.user.name);
+  const error = getModifyUserFailure(state, ownProps.user.name);
   return {
     loading,
     error