diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index 53a9209b14e..767c5ee2d6d 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -3,17 +3,17 @@
     <div class="oc-flex oc-flex-between oc-flex-middle oc-width-1-1">
       <span>{{ unsavedChangesText }}</span>
       <div>
-        <oc-button v-translate :disabled="!unsavedChanges" @click="$emit('revert')"
-          >Revert</oc-button
-        >
+        <oc-button :disabled="!unsavedChanges" @click="$emit('revert')">
+          <translate>Revert</translate>
+        </oc-button>
         <oc-button
-          v-translate
           appearance="filled"
           variation="primary"
           :disabled="!unsavedChanges || confirmButtonDisabled"
           @click="$emit('confirm')"
-          >Save</oc-button
         >
+          <translate>Save</translate>
+        </oc-button>
       </div>
     </div>
   </div>
diff --git a/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue b/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue
index 44be85d1ecf..89cd4cbc4dc 100644
--- a/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue
+++ b/packages/web-app-user-management/src/components/Groups/SideBar/EditPanel.vue
@@ -82,7 +82,7 @@ export default {
     revertChanges() {
       this.editGroup = { ...this.group }
       Object.keys(this.formData).forEach((formDataKey) => {
-        this.formData[formDataKey].invalid = false
+        this.formData[formDataKey].valid = true
         this.formData[formDataKey].errorMessage = ''
       })
     }
diff --git a/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue b/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue
index 8e4b76ca010..4f2faa878c8 100644
--- a/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue
+++ b/packages/web-app-user-management/src/components/Users/SideBar/EditPanel.vue
@@ -142,7 +142,7 @@ export default {
       this.editUser = { ...this.user, ...{ passwordProfile: { password: '' } } }
       this.editUserRole = this.roles.find((role) => role.id === this.userRole.id)
       Object.keys(this.formData).forEach((formDataKey) => {
-        this.formData[formDataKey].invalid = false
+        this.formData[formDataKey].valid = true
         this.formData[formDataKey].errorMessage = ''
       })
     }
diff --git a/packages/web-app-user-management/tests/unit/components/CompareSaveDialog.spec.js b/packages/web-app-user-management/tests/unit/components/CompareSaveDialog.spec.js
new file mode 100644
index 00000000000..85f43cd0509
--- /dev/null
+++ b/packages/web-app-user-management/tests/unit/components/CompareSaveDialog.spec.js
@@ -0,0 +1,54 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import CompareSaveDialog from '../../../src/components/CompareSaveDialog.vue'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+afterEach(() => jest.clearAllMocks())
+
+describe('CompareSaveDialog', () => {
+  describe('computed method "unsavedChanges"', () => {
+    it('should be false if objects are equal', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          originalObject: { id: '1', displayName: 'jan' },
+          compareObject: { id: '1', displayName: 'jan' }
+        }
+      })
+      expect(wrapper.vm.unsavedChanges).toBeFalsy()
+    })
+
+    it('should be true if objects are not equal', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          originalObject: { id: '1', displayName: 'jan' },
+          compareObject: { id: '1', displayName: 'janina' }
+        }
+      })
+      expect(wrapper.vm.unsavedChanges).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper({ propsData = {} } = {}) {
+  return mount(CompareSaveDialog, {
+    localVue,
+    directives: {
+      translate: jest.fn()
+    },
+    mocks: {
+      $gettext: jest.fn(),
+      $gettextInterpolate: jest.fn()
+    },
+    propsData: {
+      originalObject: {},
+      compareObject: {},
+      ...propsData
+    },
+    stubs: {
+      'oc-button': true,
+      translate: true
+    }
+  })
+}
diff --git a/packages/web-app-user-management/tests/unit/components/Groups/SideBar/EditPanel.spec.js b/packages/web-app-user-management/tests/unit/components/Groups/SideBar/EditPanel.spec.js
new file mode 100644
index 00000000000..a23bd3b77dc
--- /dev/null
+++ b/packages/web-app-user-management/tests/unit/components/Groups/SideBar/EditPanel.spec.js
@@ -0,0 +1,86 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import EditPanel from '../../../../../src/components/Groups/SideBar/EditPanel.vue'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+afterEach(() => jest.clearAllMocks())
+
+describe('EditPanel', () => {
+  describe('method "revertChanges"', () => {
+    it('should revert changes on property editGroup', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          group: { displayName: 'group' }
+        }
+      })
+      wrapper.vm.editGroup = { displayName: 'my group' }
+      wrapper.vm.revertChanges()
+      expect(wrapper.vm.editGroup).toEqual({ displayName: 'group' })
+    })
+    it('should revert changes on property formData', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          group: { displayName: 'group' }
+        }
+      })
+      wrapper.vm.formData.displayName.valid = false
+      wrapper.vm.formData.displayName.errorMessage = 'error'
+      wrapper.vm.revertChanges()
+      expect(wrapper.vm.formData.displayName.valid).toBeTruthy()
+      expect(wrapper.vm.formData.displayName.errorMessage).toEqual('')
+    })
+  })
+
+  describe('method "validateDisplayName"', () => {
+    it('should return true if displayName is valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editGroup.displayName = 'jan'
+      expect(wrapper.vm.validateDisplayName()).toBeTruthy()
+      expect(wrapper.vm.formData.displayName.valid).toBeTruthy()
+    })
+    it('should return false if displayName is not valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editGroup.displayName = ''
+      expect(wrapper.vm.validateDisplayName()).toBeFalsy()
+      expect(wrapper.vm.formData.displayName.valid).toBeFalsy()
+    })
+  })
+
+  describe('computed method "invalidFormData"', () => {
+    it('should be false if formData is invalid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.formData.displayName.valid = true
+      expect(wrapper.vm.invalidFormData).toBeFalsy()
+    })
+    it('should be true if formData is valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.formData.displayName.valid = false
+      expect(wrapper.vm.invalidFormData).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper({ propsData = {} } = {}) {
+  return mount(EditPanel, {
+    localVue,
+    directives: {
+      translate: jest.fn()
+    },
+    mocks: {
+      $gettext: jest.fn(),
+      $gettextInterpolate: jest.fn()
+    },
+    propsData: {
+      group: { displayName: 'group' },
+      ...propsData
+    },
+    stubs: {
+      'oc-text-input': true,
+      'avatar-image': true,
+      'oc-button': true,
+      translate: true
+    }
+  })
+}
diff --git a/packages/web-app-user-management/tests/unit/components/Users/SideBar/DetailsPanel.spec.js b/packages/web-app-user-management/tests/unit/components/Users/SideBar/DetailsPanel.spec.js
index ebbf892ff0c..64f4e152520 100644
--- a/packages/web-app-user-management/tests/unit/components/Users/SideBar/DetailsPanel.spec.js
+++ b/packages/web-app-user-management/tests/unit/components/Users/SideBar/DetailsPanel.spec.js
@@ -66,7 +66,10 @@ describe('DetailsPanel', () => {
     })
     it('should be set if user role is assigned', () => {
       const wrapper = getWrapper({
-        propsData: { users: [{ id: '1', displayName: 'user' }], userRoles: { 1: 'admin' } }
+        propsData: {
+          users: [{ id: '1', displayName: 'user' }],
+          userRoles: { 1: { displayName: 'admin' } }
+        }
       })
       expect(wrapper.vm.userRole).toEqual('admin')
     })
diff --git a/packages/web-app-user-management/tests/unit/components/Users/SideBar/EditPanel.spec.js b/packages/web-app-user-management/tests/unit/components/Users/SideBar/EditPanel.spec.js
new file mode 100644
index 00000000000..ad03398a168
--- /dev/null
+++ b/packages/web-app-user-management/tests/unit/components/Users/SideBar/EditPanel.spec.js
@@ -0,0 +1,106 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from '@vue/test-utils'
+import EditPanel from '../../../../../src/components/Users/SideBar/EditPanel.vue'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+afterEach(() => jest.clearAllMocks())
+
+describe('EditPanel', () => {
+  describe('method "revertChanges"', () => {
+    it('should revert changes on property editUser', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          user: { displayName: 'jan', mail: 'jan@owncloud.com' }
+        }
+      })
+      wrapper.vm.editUser.displayName = 'jana'
+      wrapper.vm.editUser.mail = 'jana@owncloud.com'
+      wrapper.vm.revertChanges()
+      expect(wrapper.vm.editUser.displayName).toEqual('jan')
+      expect(wrapper.vm.editUser.mail).toEqual('jan@owncloud.com')
+    })
+    it('should revert changes on property formData', () => {
+      const wrapper = getWrapper({
+        propsData: {
+          group: { displayName: 'jan' }
+        }
+      })
+      wrapper.vm.formData.displayName.valid = false
+      wrapper.vm.formData.displayName.errorMessage = 'error'
+      wrapper.vm.revertChanges()
+      expect(wrapper.vm.formData.displayName.valid).toBeTruthy()
+      expect(wrapper.vm.formData.displayName.errorMessage).toEqual('')
+    })
+  })
+
+  describe('method "validateDisplayName"', () => {
+    it('should return true if displayName is valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editUser.displayName = 'jan'
+      expect(wrapper.vm.validateDisplayName()).toBeTruthy()
+      expect(wrapper.vm.formData.displayName.valid).toBeTruthy()
+    })
+    it('should return false if displayName is not valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editUser.displayName = ''
+      expect(wrapper.vm.validateDisplayName()).toBeFalsy()
+      expect(wrapper.vm.formData.displayName.valid).toBeFalsy()
+    })
+  })
+
+  describe('method "validateEmail"', () => {
+    it('should return true if email is valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editUser.mail = 'jan@owncloud.com'
+      expect(wrapper.vm.validateEmail()).toBeTruthy()
+      expect(wrapper.vm.formData.email.valid).toBeTruthy()
+    })
+    it('should return false if email is not valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.editUser.mail = ''
+      expect(wrapper.vm.validateEmail()).toBeFalsy()
+      expect(wrapper.vm.formData.email.valid).toBeFalsy()
+    })
+  })
+
+  describe('computed method "invalidFormData"', () => {
+    it('should be false if formData is invalid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.formData.displayName.valid = true
+      expect(wrapper.vm.invalidFormData).toBeFalsy()
+    })
+    it('should be true if formData is valid', () => {
+      const wrapper = getWrapper()
+      wrapper.vm.formData.displayName.valid = false
+      expect(wrapper.vm.invalidFormData).toBeTruthy()
+    })
+  })
+})
+
+function getWrapper({ propsData = {} } = {}) {
+  return mount(EditPanel, {
+    localVue,
+    directives: {
+      translate: jest.fn()
+    },
+    mocks: {
+      $gettext: jest.fn(),
+      $gettextInterpolate: jest.fn()
+    },
+    propsData: {
+      user: { displayName: 'jan', mail: 'jan@owncloud.com' },
+      roles: [{ id: '1', displayName: 'admin' }],
+      userRole: { id: '1', displayName: 'admin' },
+      ...propsData
+    },
+    stubs: {
+      'oc-text-input': true,
+      'avatar-image': true,
+      'oc-button': true,
+      'oc-select': true,
+      translate: true
+    }
+  })
+}
diff --git a/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js b/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
index a89f40232ce..a4935d6f977 100644
--- a/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
+++ b/packages/web-app-user-management/tests/unit/components/Users/UsersList.spec.js
@@ -33,7 +33,7 @@ describe('UsersList', () => {
     it('should return user role if record is set', () => {
       const wrapper = getWrapper({
         propsData: {
-          userRoles: { 1: 'admin' }
+          userRoles: { 1: { displayName: 'admin' } }
         }
       })
       expect(wrapper.vm.getUserRole({ id: 1 })).toEqual('admin')
diff --git a/packages/web-app-user-management/tests/unit/views/Users.spec.js b/packages/web-app-user-management/tests/unit/views/Users.spec.js
index 2e2f1884f16..9c42ec1bbed 100644
--- a/packages/web-app-user-management/tests/unit/views/Users.spec.js
+++ b/packages/web-app-user-management/tests/unit/views/Users.spec.js
@@ -97,14 +97,14 @@ describe('Users view', () => {
       const wrapper = getMountedWrapper({
         mocks: {
           users: [user],
-          userAssignments: [
-            [
+          userAssignments: {
+            1: [
               {
                 accountUuid: '1',
                 roleId: '1'
               }
             ]
-          ],
+          },
           roles: [
             {
               displayName: 'admin',
@@ -113,7 +113,10 @@ describe('Users view', () => {
           ]
         }
       })
-      expect(wrapper.vm.userRoles[user.id]).toEqual('admin')
+      expect(wrapper.vm.userRoles[user.id]).toEqual({
+        displayName: 'admin',
+        id: '1'
+      })
     })
     it('should not contain user role if userAssignments is empty', () => {
       const user = { id: '1' }
@@ -127,14 +130,14 @@ describe('Users view', () => {
       const wrapper = getMountedWrapper({
         mocks: {
           users: [user],
-          userAssignments: [
-            [
+          userAssignments: {
+            2: [
               {
                 accountUuid: '2',
                 roleId: '1'
               }
             ]
-          ],
+          },
           roles: [
             {
               displayName: 'admin',
@@ -150,14 +153,14 @@ describe('Users view', () => {
       const wrapper = getMountedWrapper({
         mocks: {
           users: [user],
-          userAssignments: [
-            [
+          userAssignments: {
+            1: [
               {
                 accountUuid: '1',
                 roleId: '1'
               }
             ]
-          ],
+          },
           roles: [
             {
               displayName: 'admin',
@@ -173,13 +176,13 @@ describe('Users view', () => {
       const wrapper = getMountedWrapper({
         mocks: {
           users: [user],
-          userAssignments: [
-            [
+          userAssignments: {
+            1: [
               {
                 accountUuid: '1'
               }
             ]
-          ],
+          },
           roles: [
             {
               displayName: 'admin',
diff --git a/yarn.lock b/yarn.lock
index f9e20891e64..0e40c9e65ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4113,17 +4113,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "chalk@npm:4.1.1"
-  dependencies:
-    ansi-styles: ^4.1.0
-    supports-color: ^7.1.0
-  checksum: 036e973e665ba1a32c975e291d5f3d549bceeb7b1b983320d4598fb75d70fe20c5db5d62971ec0fe76cdbce83985a00ee42372416abfc3a5584465005a7855ed
-  languageName: node
-  linkType: hard
-
-"chalk@npm:^4.1.2":
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2":
   version: 4.1.2
   resolution: "chalk@npm:4.1.2"
   dependencies: