From dec6b3f17d48dab3be38b57afec15832759b2cf5 Mon Sep 17 00:00:00 2001
From: Philipp Czora <philipp.czora@cloudogu.com>
Date: Fri, 3 Aug 2018 14:21:07 +0200
Subject: [PATCH] Split GroupForm

---
 scm-ui/public/locales/en/groups.json          |  3 ++
 scm-ui/src/groups/components/GroupForm.js     | 40 +++++----------
 scm-ui/src/groups/components/UserNameTable.js | 51 +++++++++++++++++++
 3 files changed, 66 insertions(+), 28 deletions(-)
 create mode 100644 scm-ui/src/groups/components/UserNameTable.js

diff --git a/scm-ui/public/locales/en/groups.json b/scm-ui/public/locales/en/groups.json
index 873d88a809..5de5c15974 100644
--- a/scm-ui/public/locales/en/groups.json
+++ b/scm-ui/public/locales/en/groups.json
@@ -32,6 +32,9 @@
   "add-user-button": {
     "label": "Add user"
   },
+  "remove-user-button": {
+    "label": "Remove user"
+  },
   "add-user-textfield": {
     "label": "Add user",
     "error": "Error adding user"
diff --git a/scm-ui/src/groups/components/GroupForm.js b/scm-ui/src/groups/components/GroupForm.js
index 04374782d9..f822a53764 100644
--- a/scm-ui/src/groups/components/GroupForm.js
+++ b/scm-ui/src/groups/components/GroupForm.js
@@ -7,6 +7,7 @@ import { translate } from "react-i18next";
 import type { Group } from "../types/Group";
 import * as validator from "./groupValidation";
 import AddUserField from "./AddUserField";
+import UserNameTable from "./UserNameTable";
 
 type Props = {
   t: string => string,
@@ -41,7 +42,7 @@ class GroupForm extends React.Component<Props, State> {
   componentDidMount() {
     const { group } = this.props;
     if (group) {
-      this.setState({...this.state, group: { ...group } });
+      this.setState({ ...this.state, group: { ...group } });
     }
   }
 
@@ -94,26 +95,10 @@ class GroupForm extends React.Component<Props, State> {
           value={group.description}
           validationError={false}
         />
-        <label className="label">{t("group.members")}</label>
-        <table className="table is-hoverable is-fullwidth">
-          <tbody>
-            {this.state.group.members.map((user, index) => {
-              return (
-                <tr key={user}>
-                  <td key={user}>{user}</td>
-                  <td>
-                    <Button
-                      label="Remove"
-                      action={this.removeUser.bind(this, user)}
-                      key={user}
-                    />
-                  </td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-
+        <UserNameTable
+          users={this.state.group.members}
+          userListChanged={this.userListChanged}
+        />
         <AddUserField addUser={this.addUser} />
         <SubmitButton
           disabled={!this.isValid()}
@@ -124,18 +109,17 @@ class GroupForm extends React.Component<Props, State> {
     );
   }
 
-  removeUser(user: string, event: Event) {
-    event.preventDefault();
-    let newMembers = this.state.group.members.filter(name => name !== user);
+  userListChanged = usernames => {
     this.setState({
       ...this.state,
       group: {
         ...this.state.group,
-        members: newMembers
+        members: usernames
       }
     });
   }
 
+
   addUser = (username: string) => {
     if (this.isMember(username)) {
       return;
@@ -148,11 +132,11 @@ class GroupForm extends React.Component<Props, State> {
         members: [...this.state.group.members, username]
       }
     });
-  }
+  };
 
   isMember = (username: string) => {
-    return this.state.group.members.includes(username)
-  }
+    return this.state.group.members.includes(username);
+  };
 
   handleGroupNameChange = (name: string) => {
     this.setState({
diff --git a/scm-ui/src/groups/components/UserNameTable.js b/scm-ui/src/groups/components/UserNameTable.js
new file mode 100644
index 0000000000..e046f9fd5f
--- /dev/null
+++ b/scm-ui/src/groups/components/UserNameTable.js
@@ -0,0 +1,51 @@
+//@flow
+import React from "react";
+import Button from "../../components/buttons/Button"
+import { translate } from "react-i18next"
+
+type Props = {
+  users: string[];
+  t: string => string,
+  userListChanged: (string[]) => void
+};
+
+type State = {
+};
+
+
+class UserNameTable extends React.Component<Props, State> {
+  render() {
+    const { t } = this.props;
+    return (
+      <div>
+        <label className="label">{t("group.members")}</label>
+        <table className="table is-hoverable is-fullwidth">
+          <tbody>
+            {this.props.users.map((user, index) => {
+              return (
+                <tr key={user}>
+                  <td key={user}>{user}</td>
+                  <td>
+                    <Button
+                      label={t("remove-user-button.label")}
+                      action={this.removeUser.bind(this, user)}
+                      key={user}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  removeUser(user: string, event: Event) {
+    event.preventDefault();
+    const newUsers = this.props.users.filter(name => name !== user);
+    this.props.userListChanged(newUsers);
+  }
+}
+
+export default translate("groups")(UserNameTable);