Split GroupForm

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"

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>
+        <UserNameTable
-        <table className="table is-hoverable is-fullwidth">
+          users={this.state.group.members}
-          <tbody>
+          userListChanged={this.userListChanged}
-            {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>
-
         <AddUserField addUser={this.addUser} />
         <SubmitButton
           disabled={!this.isValid()}
@@ -124,18 +109,17 @@ class GroupForm extends React.Component<Props, State> {
     );
   }
 
-  removeUser(user: string, event: Event) {
+  userListChanged = usernames => {
-    event.preventDefault();
-    let newMembers = this.state.group.members.filter(name => name !== user);
     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({

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);