merge heads

scm-ui/src/components/Checkbox.js

@@ -3,6 +3,7 @@ import React from "react";
 
 type Props = {
   label: string,
+  checked: boolean,
   onChange: boolean => void
 };
 class Checkbox extends React.Component<Props> {
@@ -15,7 +16,11 @@ class Checkbox extends React.Component<Props> {
       <div className="field">
         <div className="control">
           <label className="checkbox">
-            <input type="checkbox" onChange={this.onCheckboxChange} />{" "}
+            <input
+              type="checkbox"
+              checked={this.props.checked}
+              onChange={this.onCheckboxChange}
+            />
             {this.props.label}
           </label>
         </div>

scm-ui/src/components/InputField.js

@@ -4,6 +4,7 @@ import React from "react";
 type Props = {
   label?: string,
   placeholder?: string,
+  value?: string,
   type?: string,
   autofocus?: boolean,
   onChange: string => void
@@ -36,7 +37,7 @@ class InputField extends React.Component<Props> {
   };
 
   render() {
-    const { type, placeholder } = this.props;
+    const { type, placeholder, value } = this.props;
 
     return (
       <div className="field">
@@ -49,6 +50,7 @@ class InputField extends React.Component<Props> {
             className="input"
             type={type}
             placeholder={placeholder}
+            value={value}
             onChange={this.handleInput}
           />
         </div>

scm-ui/src/users/containers/UserForm.js

@@ -11,46 +11,62 @@ type Props = {
 };
 
 class UserForm extends React.Component<Props, User> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      name: "",
+      displayName: "",
+      mail: "",
+      password: "",
+      admin: false,
+      active: false
+    };
+  }
+
   submit = (event: Event) => {
     event.preventDefault();
     this.props.submitForm(this.state);
   };
 
+  componentWillReceiveProps() {
+    this.setState(this.props.user);
+  }
+
   render() {
-    const { submitForm, user } = this.props;
+    const user = this.state;
     return (
       <div className="container">
         <form onSubmit={this.submit}>
           <InputField
             label="Username"
             onChange={this.handleUsernameChange}
-            value={user !== undefined ? user.name : ""}
+            value={user ? user.name : ""}
           />
           <InputField
             label="Display Name"
             onChange={this.handleDisplayNameChange}
-            value={user !== undefined ? user.displayName : ""}
+            value={user ? user.displayName : ""}
           />
           <InputField
             label="E-Mail"
             onChange={this.handleEmailChange}
-            value={user !== undefined ? user.mail : ""}
+            value={user ? user.mail : ""}
           />
           <InputField
             label="Password"
             type="password"
             onChange={this.handlePasswordChange}
-            value={user !== undefined ? user.password : ""}
+            value={user ? user.password : ""}
           />
           <Checkbox
             label="Admin"
             onChange={this.handleAdminChange}
-            checked={user !== undefined ? user.admin : false}
+            checked={user ? user.admin : false}
           />
           <Checkbox
             label="Active"
             onChange={this.handleActiveChange}
-            value={user !== undefined ? user.active : false}
+            checked={user ? user.active : false}
           />
           <SubmitButton value="Submit" />
         </form>

scm-ui/src/users/containers/UserRow.js

@@ -1,16 +1,18 @@
 // @flow
 import React from "react";
 import DeleteUserButton from "./DeleteUserButton";
+import EditUserButton from "./EditUserButton";
 import type { User } from "../types/User";
 
 type Props = {
   entry: { loading: boolean, error: Error, user: User },
-  deleteUser: string => void
+  deleteUser: string => void,
+  editUser: User => void
 };
 
 export default class UserRow extends React.Component<Props> {
   render() {
-    const { deleteUser } = this.props;
+    const { deleteUser, editUser } = this.props;
     const user = this.props.entry.entry;
     return (
       <tr>
@@ -23,6 +25,9 @@ export default class UserRow extends React.Component<Props> {
         <td>
           <DeleteUserButton user={user} deleteUser={deleteUser} />
         </td>
+        <td>
+          <EditUserButton user={user} editUser={editUser} />
+        </td>
       </tr>
     );
   }

scm-ui/src/users/containers/UserTable.js

@@ -2,15 +2,17 @@
 import React from "react";
 import UserRow from "./UserRow";
 import type { User } from "../types/User";
+import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
-  entries: [{ loading: boolean, error: Error, user: User }],
-  deleteUser: string => void
+  entries: Array<UserEntry>,
+  deleteUser: string => void,
+  editUser: User => void
 };
 
 class UserTable extends React.Component<Props> {
   render() {
-    const { deleteUser } = this.props;
+    const { deleteUser, editUser } = this.props;
     const entries = this.props.entries;
     return (
       <table>
@@ -25,7 +27,12 @@ class UserTable extends React.Component<Props> {
         <tbody>
           {entries.map((entry, index) => {
             return (
-              <UserRow key={index} entry={entry} deleteUser={deleteUser} />
+              <UserRow
+                key={index}
+                entry={entry}
+                deleteUser={deleteUser}
+                editUser={editUser}
+              />
             );
           })}
         </tbody>

scm-ui/src/users/containers/Users.js

@@ -5,19 +5,15 @@ import { connect } from "react-redux";
 import {
   fetchUsers,
   addUser,
-  editUser,
+  updateUser,
   deleteUser,
+  editUser,
   getUsersFromState
 } from "../modules/users";
 import UserForm from "./UserForm";
 import UserTable from "./UserTable";
 import type { User } from "../types/User";
-
-type UserEntry = {
-  loading: boolean,
-  error: Error,
-  user: User
-};
+import type { UserEntry } from "../types/UserEntry";
 
 type Props = {
   login: boolean,
@@ -26,10 +22,12 @@ type Props = {
   fetchUsers: () => void,
   deleteUser: string => void,
   addUser: User => void,
-  editUser: User => void
+  updateUser: User => void,
+  editUser: User => void,
+  userToEdit: User
 };
 
-class Users extends React.Component<Props> {
+class Users extends React.Component<Props, User> {
   componentDidMount() {
     this.props.fetchUsers();
   }
@@ -38,29 +36,41 @@ class Users extends React.Component<Props> {
     this.props.addUser(user);
   };
 
-  editUser = (user: User) => {
-    this.props.editUser(user);
+  updateUser = (user: User) => {
+    this.props.updateUser(user);
+  };
+
+  componentDidUpdate(prevProps: Props) {
+    if (prevProps.userToEdit !== this.props.userToEdit) {
+      this.setState(this.props.userToEdit);
+    }
+  }
+
+  submitUser = (user: User) => {
+    if (user._links && user._links.update) {
+      this.updateUser(user);
+    } else {
+      this.addUser(user);
+    }
   };
 
   render() {
-    const { userEntries, deleteUser } = this.props;
-    const testUser: User = {
-      name: "user",
-      displayName: "user_display",
-      password: "pw",
-      mail: "mail@mail.de",
-      active: true,
-      admin: true
-    };
+    const { userEntries, deleteUser, editUser, userToEdit } = this.props;
     if (userEntries) {
       return (
         <section className="section">
           <div className="container">
             <h1 className="title">SCM</h1>
             <h2 className="subtitle">Users</h2>
-            <UserTable entries={userEntries} deleteUser={deleteUser} />
-            {/* <UserForm submitForm={this.submitForm} /> */}
-            <UserForm submitForm={user => {}} user={testUser} />
+            <UserTable
+              entries={userEntries}
+              deleteUser={deleteUser}
+              editUser={user => editUser(user)}
+            />
+            <UserForm
+              submitForm={user => this.submitUser(user)}
+              user={userToEdit}
+            />
           </div>
         </section>
       );
@@ -72,11 +82,13 @@ class Users extends React.Component<Props> {
 
 const mapStateToProps = state => {
   const userEntries = getUsersFromState(state);
+  var userToEdit = state.users.editUser;
   if (!userEntries) {
-    return {};
+    return { userToEdit };
   }
   return {
-    userEntries
+    userEntries,
+    userToEdit
   };
 };
 
@@ -88,11 +100,14 @@ const mapDispatchToProps = dispatch => {
     addUser: (user: User) => {
       dispatch(addUser(user));
     },
-    editUser: (user: User) => {
-      dispatch(editUser(user));
+    updateUser: (user: User) => {
+      dispatch(updateUser(user));
     },
     deleteUser: (link: string) => {
       dispatch(deleteUser(link));
+    },
+    editUser: (user: User) => {
+      dispatch(editUser(user));
     }
   };
 };

scm-ui/src/users/modules/users.js

@@ -1,7 +1,17 @@
 // @flow
-import { apiClient, NOT_FOUND_ERROR } from "../../apiclient";
-import type { User } from "../types/User";
-import { ThunkDispatch } from "redux-thunk";
+import {
+  apiClient,
+  NOT_FOUND_ERROR
+} from "../../apiclient";
+import type {
+  User
+} from "../types/User";
+import type {
+  UserEntry
+} from "../types/UserEntry";
+import {
+  Dispatch
+} from "redux";
 
 export const FETCH_USERS = "scm/users/FETCH";
 export const FETCH_USERS_SUCCESS = "scm/users/FETCH_SUCCESS";
@@ -13,8 +23,10 @@ export const ADD_USER_SUCCESS = "scm/users/ADD_SUCCESS";
 export const ADD_USER_FAILURE = "scm/users/ADD_FAILURE";
 
 export const EDIT_USER = "scm/users/EDIT";
-export const EDIT_USER_SUCCESS = "scm/users/EDIT_SUCCESS";
-export const EDIT_USER_FAILURE = "scm/users/EDIT_FAILURE";
+
+export const UPDATE_USER = "scm/users/UPDATE";
+export const UPDATE_USER_SUCCESS = "scm/users/UPDATE_SUCCESS";
+export const UPDATE_USER_FAILURE = "scm/users/UPDATE_FAILURE";
 
 export const DELETE_USER = "scm/users/DELETE";
 export const DELETE_USER_SUCCESS = "scm/users/DELETE_SUCCESS";
@@ -23,6 +35,7 @@ export const DELETE_USER_FAILURE = "scm/users/DELETE_FAILURE";
 const USERS_URL = "users";
 
 const CONTENT_TYPE_USER = "application/vnd.scmm-user+json;v=2";
+
 function requestUsers() {
   return {
     type: FETCH_USERS
@@ -45,7 +58,7 @@ function usersNotFound(url: string) {
 }
 
 export function fetchUsers() {
-  return function(dispatch: any) {
+  return function (dispatch: any) {
     dispatch(requestUsers());
     return apiClient
       .get(USERS_URL)
@@ -85,7 +98,7 @@ function requestAddUser(user: User) {
 }
 
 export function addUser(user: User) {
-  return function(dispatch: ThunkDispatch) {
+  return function (dispatch: Dispatch) {
     dispatch(requestAddUser(user));
     return apiClient
       .postWithContentType(USERS_URL, user, CONTENT_TYPE_USER)
@@ -111,36 +124,36 @@ function addUserFailure(user: User, err: Error) {
   };
 }
 
-function requestAddUser(user: User) {
+function requestUpdateUser(user: User) {
   return {
-    type: ADD_USER,
+    type: UPDATE_USER,
     user
   };
 }
 
-export function editUser(user: User) {
-  return function(dispatch: ThunkDispatch) {
-    dispatch(requestAddUser(user));
+export function updateUser(user: User) {
+  return function (dispatch: Dispatch) {
+    dispatch(requestUpdateUser(user));
     return apiClient
-      .putWithContentType(USERS_URL + "/" + user.name, user, CONTENT_TYPE_USER)
+      .putWithContentType(user._links.update.href, user, CONTENT_TYPE_USER)
       .then(() => {
-        dispatch(addUserSuccess());
+        dispatch(updateUserSuccess());
         dispatch(fetchUsers());
       })
-      .catch(err => dispatch(addUserFailure(user, err)));
+      .catch(err => dispatch(updateUserFailure(user, err)));
   };
 }
 
-function editUserSuccess() {
+function updateUserSuccess() {
   return {
-    type: ADD_USER_SUCCESS
+    type: UPDATE_USER_SUCCESS
   };
 }
 
-function addUserFailure(user: User, err: Error) {
+function updateUserFailure(user: User, error: Error) {
   return {
-    type: ADD_USER_FAILURE,
-    payload: err,
+    type: UPDATE_USER_FAILURE,
+    payload: error,
     user
   };
 }
@@ -167,7 +180,7 @@ function deleteUserFailure(url: string, err: Error) {
 }
 
 export function deleteUser(link: string) {
-  return function(dispatch: ThunkDispatch) {
+  return function (dispatch: ThunkDispatch) {
     dispatch(requestDeleteUser(link));
     return apiClient
       .delete(link)
@@ -187,7 +200,7 @@ export function getUsersFromState(state) {
   if (!userNames) {
     return null;
   }
-  var userEntries = new Array();
+  var userEntries: Array < UserEntry > = [];
 
   for (let userName of userNames) {
     userEntries.push(state.users.usersByNames[userName]);
@@ -197,8 +210,8 @@ export function getUsersFromState(state) {
 }
 
 function extractUsersByNames(
-  users: Array<User>,
-  userNames: Array<string>,
+  users: Array < User > ,
+  userNames: Array < string > ,
   oldUsersByNames: {}
 ) {
   var usersByNames = {};
@@ -215,6 +228,13 @@ function extractUsersByNames(
   return usersByNames;
 }
 
+export function editUser(user: User) {
+  return {
+    type: EDIT_USER,
+    user
+  };
+}
+
 export default function reducer(state: any = {}, action: any = {}) {
   switch (action.type) {
     case FETCH_USERS:
@@ -261,7 +281,11 @@ export default function reducer(state: any = {}, action: any = {}) {
         error: action.payload,
         loading: false
       };
-
+    case EDIT_USER:
+      return {
+        ...state,
+        editUser: action.user
+      };
     default:
       return state;
   }

scm-ui/src/users/modules/users.test.js

@@ -10,7 +10,12 @@ import {
   FETCH_USERS,
   FETCH_USERS_SUCCESS,
   fetchUsers,
-  FETCH_USERS_FAILURE
+  FETCH_USERS_FAILURE,
+  updateUser,
+  UPDATE_USER,
+  UPDATE_USER_FAILURE,
+  UPDATE_USER_SUCCESS,
+  EDIT_USER
 } from "./users";
 
 import reducer from "./users";
@@ -152,6 +157,33 @@ describe("fetch tests", () => {
       expect(actions[1].payload).toBeDefined();
     });
   });
+
+  test("successful user update", () => {
+    fetchMock.putOnce("http://localhost:8081/scm/api/rest/v2/users/zaphod", {
+      status: 204
+    });
+
+    const store = mockStore({});
+    return store.dispatch(updateUser(userZaphod)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(UPDATE_USER);
+      expect(actions[1].type).toEqual(UPDATE_USER_SUCCESS);
+    });
+  });
+
+  test("user update failed", () => {
+    fetchMock.putOnce("http://localhost:8081/scm/api/rest/v2/users/zaphod", {
+      status: 500
+    });
+
+    const store = mockStore({});
+    return store.dispatch(updateUser(userZaphod)).then(() => {
+      const actions = store.getActions();
+      expect(actions[0].type).toEqual(UPDATE_USER);
+      expect(actions[1].type).toEqual(UPDATE_USER_FAILURE);
+      expect(actions[1].payload).toBeDefined();
+    });
+  });
 });
 
 describe("reducer tests", () => {
@@ -199,4 +231,15 @@ describe("reducer tests", () => {
     expect(newState.usersByNames["zaphod"]).toBeDefined();
     expect(newState.usersByNames["ford"]).toBeDefined();
   });
+
+  test("edit user", () => {
+    const newState = reducer(
+      {},
+      {
+        type: EDIT_USER,
+        user: userZaphod
+      }
+    );
+    expect(newState.editUser).toEqual(userZaphod);
+  });
 });