From 6256889d39f3012921b96f0a33bac7b4ade54c31 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Mon, 6 Aug 2018 10:23:41 +0200
Subject: [PATCH] Extracted RemoveUserButton

---
 scm-ui/src/groups/components/GroupForm.js     |  2 +-
 scm-ui/src/groups/components/UserNameTable.js | 12 +++----
 .../components/buttons/RemoveUserButton.js    | 34 +++++++++++++++++++
 3 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 scm-ui/src/groups/components/buttons/RemoveUserButton.js

diff --git a/scm-ui/src/groups/components/GroupForm.js b/scm-ui/src/groups/components/GroupForm.js
index f822a53764..94363ba86f 100644
--- a/scm-ui/src/groups/components/GroupForm.js
+++ b/scm-ui/src/groups/components/GroupForm.js
@@ -2,7 +2,7 @@
 import React from "react";
 
 import InputField from "../../components/forms/InputField";
-import { SubmitButton, Button } from "../../components/buttons";
+import { SubmitButton } from "../../components/buttons";
 import { translate } from "react-i18next";
 import type { Group } from "../types/Group";
 import * as validator from "./groupValidation";
diff --git a/scm-ui/src/groups/components/UserNameTable.js b/scm-ui/src/groups/components/UserNameTable.js
index e046f9fd5f..d7049aee31 100644
--- a/scm-ui/src/groups/components/UserNameTable.js
+++ b/scm-ui/src/groups/components/UserNameTable.js
@@ -2,6 +2,7 @@
 import React from "react";
 import Button from "../../components/buttons/Button"
 import { translate } from "react-i18next"
+import RemoveUserButton from "./buttons/RemoveUserButton";
 
 type Props = {
   users: string[];
@@ -26,11 +27,7 @@ class UserNameTable extends React.Component<Props, State> {
                 <tr key={user}>
                   <td key={user}>{user}</td>
                   <td>
-                    <Button
-                      label={t("remove-user-button.label")}
-                      action={this.removeUser.bind(this, user)}
-                      key={user}
-                    />
+                    <RemoveUserButton username={user} removeUser={this.removeUser} />
                   </td>
                 </tr>
               );
@@ -41,9 +38,8 @@ class UserNameTable extends React.Component<Props, State> {
     );
   }
 
-  removeUser(user: string, event: Event) {
-    event.preventDefault();
-    const newUsers = this.props.users.filter(name => name !== user);
+  removeUser = (username: string) => {
+    const newUsers = this.props.users.filter(name => name !== username);
     this.props.userListChanged(newUsers);
   }
 }
diff --git a/scm-ui/src/groups/components/buttons/RemoveUserButton.js b/scm-ui/src/groups/components/buttons/RemoveUserButton.js
new file mode 100644
index 0000000000..4474b325f7
--- /dev/null
+++ b/scm-ui/src/groups/components/buttons/RemoveUserButton.js
@@ -0,0 +1,34 @@
+//@flow
+import React from "react";
+import { DeleteButton } from "../../../components/buttons";
+import { translate } from "react-i18next";
+import classNames from "classnames";
+
+type Props = {
+  t: string => string,
+  username: string,
+  removeUser: string => void
+};
+
+type State = {};
+
+
+
+class RemoveUserButton extends React.Component<Props, State> {
+  render() {
+    const { t , username, removeUser} = this.props;
+    return (
+      <div className={classNames("is-pulled-right")}>
+        <DeleteButton
+          label={t("remove-user-button.label")}
+          action={(event: Event) => {
+            event.preventDefault();
+            removeUser(username);
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default translate("groups")(RemoveUserButton);