Members can now be added to/removed from groups

scm-ui/src/groups/components/GroupForm.js

@@ -2,7 +2,7 @@
 import React from "react";
 
 import InputField from "../../components/forms/InputField";
-import { SubmitButton } from "../../components/buttons";
+import { SubmitButton, Button } from "../../components/buttons";
 import { translate } from "react-i18next";
 import type { Group } from "../types/Group";
 import * as validator from "./groupValidation";
@@ -16,6 +16,7 @@ type Props = {
 
 type State = {
   group: Group,
+  userToAdd: string,
   nameValidationError: boolean
 };
 
@@ -33,7 +34,8 @@ class GroupForm extends React.Component<Props, State> {
         members: [],
         type: ""
       },
-      nameValidationError: false
+      nameValidationError: false,
+      userToAdd: ""
     };
   }
 
@@ -93,11 +95,53 @@ 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>
+        <InputField
+          label="Add user"
+          errorMessage="Error"
+          onChange={this.handleAddUserChange}
+          validationError={false} 
+          value={this.state.userToAdd}/>
+        
+          <Button label="Add user" action={this.addUserClick} />
+
           <SubmitButton disabled={!this.isValid()} label={t("group-form.submit")} loading={loading}/>
       </form>
     );
   }
 
+removeUser(user: string, event: Event) {
+    event.preventDefault();
+    let newMembers = this.state.group.members.filter(name => name !== user)
+    this.setState({...this.state, group: {
+      ...this.state.group,
+      members: newMembers}
+    })
+  }
+
+
+
+  addUserClick = (event: Event) => {
+    event.preventDefault();
+    this.setState({
+      ...this.state,
+      userToAdd: "",
+      group: {
+        ...this.state.group,
+        members: [...this.state.group.members, this.state.userToAdd]}
+    })
+  }
+
   handleGroupNameChange = (name: string) => {
     this.setState({
       nameValidationError: !validator.isNameValid(name),
@@ -110,6 +154,13 @@ class GroupForm extends React.Component<Props, State> {
       group: { ...this.state.group, description }
     });
   };
+
+  handleAddUserChange = (username: string) => {
+    this.setState({
+      ...this.state,
+      userToAdd: username
+    })
+  }
 }
 
 export default translate("groups")(GroupForm);

scm-ui/src/groups/containers/EditGroup.js

@@ -2,7 +2,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import GroupForm from "../components/GroupForm";
-import { modifyGroup } from "../modules/groups"
+import { modifyGroup, fetchGroup } from "../modules/groups"
 import type { History } from "history";
 import { withRouter } from "react-router-dom";
 import type { Group } from "../types/Group"
@@ -12,6 +12,7 @@ import ErrorNotification from "../../components/ErrorNotification";
 type Props = {
   group: Group,
   modifyGroup: (group: Group, callback?: () => void) => void,
+  fetchGroup: (name: string) => void,
   history: History,
   loading?: boolean,
   error: Error
@@ -19,6 +20,7 @@ type Props = {
 
 class EditGroup extends React.Component<Props> {
   groupModified = (group: Group) => () => {
+    this.props.fetchGroup(group.name)
     this.props.history.push(`/group/${group.name}`)
   }
 
@@ -48,6 +50,9 @@ const mapDispatchToProps = (dispatch) => {
   return {
    modifyGroup: (group: Group, callback?: () => void) => {
      dispatch(modifyGroup(group, callback))
+    },
+    fetchGroup: (name: string) => {
+      dispatch(fetchGroup(name))
     }
   };
 };