diff --git a/scm-ui/src/components/Checkbox.js b/scm-ui/src/components/Checkbox.js index 12d6f3f77f..346ff6bc2a 100644 --- a/scm-ui/src/components/Checkbox.js +++ b/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 { @@ -15,7 +16,11 @@ class Checkbox extends React.Component {
diff --git a/scm-ui/src/components/InputField.js b/scm-ui/src/components/InputField.js index 7ffe1f55bf..0bf44e1bdc 100644 --- a/scm-ui/src/components/InputField.js +++ b/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 { }; render() { - const { type, placeholder } = this.props; + const { type, placeholder, value } = this.props; return (
@@ -49,6 +50,7 @@ class InputField extends React.Component { className="input" type={type} placeholder={placeholder} + value={value} onChange={this.handleInput} />
diff --git a/scm-ui/src/users/containers/UserForm.js b/scm-ui/src/users/containers/UserForm.js index 6c01fb7a18..23df3c568f 100644 --- a/scm-ui/src/users/containers/UserForm.js +++ b/scm-ui/src/users/containers/UserForm.js @@ -11,46 +11,62 @@ type Props = { }; class UserForm extends React.Component { + 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 (
diff --git a/scm-ui/src/users/containers/UserRow.js b/scm-ui/src/users/containers/UserRow.js index 40b0628031..f4b5788bc3 100644 --- a/scm-ui/src/users/containers/UserRow.js +++ b/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 { render() { - const { deleteUser } = this.props; + const { deleteUser, editUser } = this.props; const user = this.props.entry.entry; return ( @@ -23,6 +25,9 @@ export default class UserRow extends React.Component { + + + ); } diff --git a/scm-ui/src/users/containers/UserTable.js b/scm-ui/src/users/containers/UserTable.js index 9379945342..7afc57fc05 100644 --- a/scm-ui/src/users/containers/UserTable.js +++ b/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, + deleteUser: string => void, + editUser: User => void }; class UserTable extends React.Component { render() { - const { deleteUser } = this.props; + const { deleteUser, editUser } = this.props; const entries = this.props.entries; return ( @@ -25,7 +27,12 @@ class UserTable extends React.Component { {entries.map((entry, index) => { return ( - + ); })} diff --git a/scm-ui/src/users/containers/Users.js b/scm-ui/src/users/containers/Users.js index 04b983d750..a68058eb6b 100644 --- a/scm-ui/src/users/containers/Users.js +++ b/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 { +class Users extends React.Component { componentDidMount() { this.props.fetchUsers(); } @@ -38,29 +36,41 @@ class Users extends React.Component { 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 (

SCM

Users

- - {/* */} - {}} user={testUser} /> + editUser(user)} + /> + this.submitUser(user)} + user={userToEdit} + />
); @@ -72,11 +82,13 @@ class Users extends React.Component { 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)); } }; }; diff --git a/scm-ui/src/users/modules/users.js b/scm-ui/src/users/modules/users.js index 1d14f8cb33..c76d0d4455 100644 --- a/scm-ui/src/users/modules/users.js +++ b/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, - userNames: Array, + 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: @@ -254,14 +274,18 @@ export default function reducer(state: any = {}, action: any = {}) { ...state, error: action.payload, loading: false - }; + }; case DELETE_USER_FAILURE: - return { - ...state, - error: action.payload, - loading: false - }; - + return { + ...state, + error: action.payload, + loading: false + }; + case EDIT_USER: + return { + ...state, + editUser: action.user + }; default: return state; } diff --git a/scm-ui/src/users/modules/users.test.js b/scm-ui/src/users/modules/users.test.js index 8d4db41985..a246ac1e83 100644 --- a/scm-ui/src/users/modules/users.test.js +++ b/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); + }); });