finished

my-app/src/components/EditUser.js

@@ -80,10 +80,10 @@ class EditUser extends Component {
                     <Form.Group className="mb-3">
                         <Form.Check name="isAdministrator" id="EditUserComponentEditIsAdministrator" type="checkbox" label="Administrator-Rechte" style={{ color: '#0eb30e' }} defaultChecked={this.props.editUser.isAdministrator} />
                     </Form.Group>
-                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit" onClick={this.handleSubmit}>
+                    <Button id="EditUserComponentSaveUserButton" variant="primary" type="submit" onClick={this.handleSubmit}>
                         Speichern
                     </Button>
-                    <Button id="backToList" variant="primary" type="submit" onClick={this.props.goBack}>
+                    <Button id="OpenUserManagementPageListComponentButton" variant="primary" type="submit" onClick={this.props.goBack}>
                         User-Liste
                     </Button>
                 </Form>

my-app/src/components/UserItem.js

@@ -73,8 +73,8 @@ class UserItem extends Component {
             }
             console.log("deleteModal:" + showDeleteUserModal)
             var users = allUsers.map(user => {
-                let editButtonID = "EditButton" + user.userID
-                let deleteButtonID = "DeleteButton" + user.userID
+                let editButtonID = "UserItemEditButton" + user.userID
+                let deleteButtonID = "UserItemDeleteButton" + user.userID
                 let itemID = "UserItem" + user.userID
                 let dialogData = {
                     dialogID: "DeleteDialogUser" + user.userID,
@@ -84,7 +84,6 @@ class UserItem extends Component {
 
                 return (
                     <div key={user.userID}>
-                        <DeleteUserModal />
                         <Card style={{ width: "18rem", background: '#ebebeb' }} id={itemID}>
                             <Card.Header>{user.firstName} {user.lastName}</Card.Header>
                             <ListGroup variant="flush">
@@ -109,26 +108,36 @@ class UserItem extends Component {
 
     render() {
         var workspace
-        
+
         console.log(this.MapAllUsers())
         switch (this.state.displayingPage) {
             case DISPLAY.LIST:
-                workspace = <Button onClick={this.handleShowCreatePage}>
-                    <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
-                </Button>
-                {this.MapAllUsers()}
+                workspace =
+                    (<>
+                        <Button id="UserManagementPageCreateUserButton" onClick={this.handleShowCreatePage}>
+                            <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
+                        </Button>
+                        {this.MapAllUsers()}
+                        <DeleteUserModal />
+                    </>)
                 break
             case DISPLAY.CREATE:
-                workspace = <CreateNewUser goBack={this.handleSwitchToList} />
+                workspace = <CreateNewUser id="UserManagementPageCreateComponent" goBack={this.handleSwitchToList} />
                 break
             case DISPLAY.EDIT:
-                workspace = <EditUser goBack={this.handleSwitchToList} editUser={this.state.editingUser} />
+                workspace = <EditUser id="UserManagementPageEditComponent" goBack={this.handleSwitchToList} editUser={this.state.editingUser} />
                 break
             default:
                 workspace = <Button onClick={this.handleShowCreatePage}>
                     <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
                 </Button>
-                {this.MapAllUsers()}
+                (<>
+                    <Button id="UserManagementPageCreateUserButton" onClick={this.handleShowCreatePage}>
+                        <img alt="Add-User-Button" src="https://cdn.icon-icons.com/icons2/933/PNG/512/round-add-button_icon-icons.com_72595.png" style={{ width: '2rem' }}></img>
+                    </Button>
+                    {this.MapAllUsers()} 
+                    <DeleteUserModal />
+                    </>)
         }
         return (
             <div >

my-app/src/components/UserManagement.js

@@ -6,7 +6,7 @@ class UserManagement extends Component {
     render() {
         return (
             <div>
-                <div id="userManagementPage" style={{ height: '50vw', backgroundColor: '#2b3648', padding: '10rem', display: 'flex', justifyContent: 'center' }}>
+                <div id="UserManagementPage" style={{ height: '50vw', backgroundColor: '#2b3648', padding: '10rem', display: 'flex', justifyContent: 'center' }}>
                     
                     <UserItem />
                 </div>