From d3e0fc0b3f336cf495eee23f1ad0c0d1d75164fb Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 17:26:06 +0200
Subject: [PATCH 01/11] Add changes saved dialog in user management

---
 .../src/components/CompareSaveDialog.vue      | 24 ++++++++++++++++++-
 .../src/views/Users.vue                       |  9 ++-----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index 7c49f4f71d4..fb84f3b79a8 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="compare-save-dialog oc-p-s oc-width-1-1">
     <div class="oc-flex oc-flex-between oc-flex-middle oc-width-1-1">
-      <span>{{ unsavedChangesText }}</span>
+      <span v-if="saved" class="oc-flex oc-flex-middle">
+        <oc-icon name="checkbox-circle" />
+        <span v-translate class="oc-ml-s">Changes saved</span>
+      </span>
+      <span v-else>{{ unsavedChangesText }}</span>
       <div>
         <oc-button :disabled="!unsavedChanges" @click="$emit('revert')">
           <translate>Revert</translate>
@@ -21,6 +25,7 @@
 
 <script lang="js">
 import isEqual from 'lodash-es/isEqual'
+import { bus } from 'web-pkg/src/instance'
 
 export default {
   name: 'CompareSaveDialog',
@@ -40,6 +45,9 @@ export default {
       }
     },
   },
+  data: () => ({
+    saved: false,
+  }),
   computed: {
     unsavedChanges(){
       return !isEqual(this.originalObject, this.compareObject)
@@ -47,6 +55,20 @@ export default {
     unsavedChangesText(){
       return this.unsavedChanges ? this.$gettext('Unsaved changes') : this.$gettext('No changes')
     }
+  },
+  watch: {
+    unsavedChanges(){
+      if(this.unsavedChanges){
+        this.saved = false
+      }
+    }
+  },
+  mounted() {
+    const savedEventToken = bus.subscribe('app.user-management.entity.saved', () => {
+      this.saved = true
+    })
+
+    this.$on('beforeDestroy', () => bus.unsubscribe('app.user-management.entity.saved', savedEventToken))
   }
 }
 </script>
diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
index af7459f5f28..f43c4b9485a 100644
--- a/packages/web-app-user-management/src/views/Users.vue
+++ b/packages/web-app-user-management/src/views/Users.vue
@@ -484,11 +484,8 @@ export default defineComponent({
          */
         this.selectedUsers = [editUser]
 
-        this.showMessage({
-          title: this.$gettext('User was edited successfully')
-        })
+        bus.publish('app.user-management.entity.saved')
       } catch (error) {
-        console.error(error)
         this.showMessage({
           title: this.$gettext('Failed to edit user'),
           status: 'danger'
@@ -525,9 +522,7 @@ export default defineComponent({
          */
         this.selectedUsers = [editUser]
 
-        this.showMessage({
-          title: this.$gettext('Group assignments were edited successfully')
-        })
+        bus.publish('app.user-management.entity.saved')
       } catch (error) {
         console.error(error)
         this.showMessage({

From 5c8af0a4c4bb881881f34f73474c02922f2fb0b5 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 17:31:10 +0200
Subject: [PATCH 02/11] Change colors

---
 .../src/components/CompareSaveDialog.vue                   | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index fb84f3b79a8..a7fbe8ca3f8 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -2,8 +2,8 @@
   <div class="compare-save-dialog oc-p-s oc-width-1-1">
     <div class="oc-flex oc-flex-between oc-flex-middle oc-width-1-1">
       <span v-if="saved" class="oc-flex oc-flex-middle">
-        <oc-icon name="checkbox-circle" />
-        <span v-translate class="oc-ml-s">Changes saved</span>
+        <oc-icon variation="success" name="checkbox-circle" />
+        <span v-translate class="changes-saved oc-ml-s">Changes saved</span>
       </span>
       <span v-else>{{ unsavedChangesText }}</span>
       <div>
@@ -76,4 +76,7 @@ export default {
 .compare-save-dialog {
   background: var(--oc-color-background-muted);
 }
+.changes-saved {
+  color: var(--oc-color-swatch-success-default);
+}
 </style>

From 063a5a0c6c0451dad6f9e436e76d76a6c9fe5fdb Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 17:33:23 +0200
Subject: [PATCH 03/11] Change colors

---
 .../src/components/CompareSaveDialog.vue                        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index a7fbe8ca3f8..87e662faefb 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -74,7 +74,7 @@ export default {
 </script>
 <style lang="scss">
 .compare-save-dialog {
-  background: var(--oc-color-background-muted);
+  background: var(--oc-color-background-highlight);
 }
 .changes-saved {
   color: var(--oc-color-swatch-success-default);

From 6201e7f97267aee5e486c4f7975a4c91cbf35ee0 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 17:47:06 +0200
Subject: [PATCH 04/11] Fix unit tests

---
 .../tests/unit/views/Users.spec.js                 | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

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 a7a45dde332..dd65f77b25e 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
@@ -3,6 +3,7 @@ import { createStore } from 'vuex-extensions'
 import Users from '../../../src/views/Users'
 import Vuex from 'vuex'
 import mockAxios from 'jest-mock-axios'
+import { bus } from 'web-pkg/src/instance'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -32,7 +33,7 @@ describe('Users view', () => {
   })
 
   describe('method "editUser"', () => {
-    it('should show message on success', async () => {
+    it('should emit event on success', async () => {
       mockAxios.post.mockImplementationOnce(() => {
         return Promise.resolve({
           data: {
@@ -49,13 +50,12 @@ describe('Users view', () => {
           users: []
         }
       })
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+      const busStub = jest.spyOn(bus, 'publish')
       const setStub = jest.spyOn(wrapper.vm, '$set')
-
       await wrapper.vm.editUser(editUser)
 
       expect(wrapper.vm.selectedUsers[0]).toEqual(editUser)
-      expect(showMessageStub).toHaveBeenCalled()
+      expect(busStub).toHaveBeenCalledWith('app.user-management.entity.saved')
       expect(setStub).toHaveBeenCalled()
     })
 
@@ -75,7 +75,7 @@ describe('Users view', () => {
   })
 
   describe('method "editUserGroupAssignments"', () => {
-    it('should show message on success', async () => {
+    it('should emit event success', async () => {
       const editUser = {
         id: '1',
         memberOf: [
@@ -96,13 +96,13 @@ describe('Users view', () => {
           ]
         }
       })
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
+      const busStub = jest.spyOn(bus, 'publish')
       const setStub = jest.spyOn(wrapper.vm, '$set')
 
       await wrapper.vm.editUserGroupAssignments(editUser)
 
       expect(wrapper.vm.selectedUsers[0]).toEqual(editUser)
-      expect(showMessageStub).toHaveBeenCalled()
+      expect(busStub).toHaveBeenCalledWith('app.user-management.entity.saved')
       expect(setStub).toHaveBeenCalled()
     })
 

From dc8a5f3cd2f615fc292cb94151b990e57ef03bf6 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 18:05:35 +0200
Subject: [PATCH 05/11] Fix saved state not change when selecting different
 user

---
 .../src/components/CompareSaveDialog.vue                   | 7 +++++++
 .../src/components/Groups/SideBar/EditPanel.vue            | 1 +
 .../src/components/Users/SideBar/EditPanel.vue             | 1 +
 .../src/components/Users/SideBar/GroupAssignmentsPanel.vue | 1 +
 4 files changed, 10 insertions(+)

diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index 87e662faefb..d16621fb0a2 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -38,6 +38,10 @@ export default {
       type: Object,
       required: true
     },
+    objectId: {
+      type: Object,
+      required: true
+    },
     confirmButtonDisabled: {
       type: Boolean,
       default: () => {
@@ -61,6 +65,9 @@ export default {
       if(this.unsavedChanges){
         this.saved = false
       }
+    },
+    objectId(){
+        this.saved = false
     }
   },
   mounted() {
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 827fbd6f8e1..c096734226f 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
@@ -16,6 +16,7 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
+      :object-id='group.id'
       :original-object="group"
       :compare-object="editGroup"
       :confirm-button-disabled="invalidFormData"
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 94c98da5ca5..406f71c7c81 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
@@ -37,6 +37,7 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
+      :object-id='user.id'
       :original-object="originalObjectUser"
       :compare-object="compareObjectUser"
       :confirm-button-disabled="invalidFormData"
diff --git a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
index 48467081cf8..7389735e01f 100644
--- a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
+++ b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
@@ -38,6 +38,7 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
+      :object-id="user.id"
       :original-object="originalObjectUser"
       :compare-object="compareObjectUser"
       @revert="revertChanges"

From 806437a63735f9215aad3b354bb060dba62a1204 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 18:12:43 +0200
Subject: [PATCH 06/11] Lint

---
 .../src/components/Groups/SideBar/EditPanel.vue                 | 2 +-
 .../src/components/Users/SideBar/EditPanel.vue                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 c096734226f..494cfe3951a 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
@@ -16,7 +16,7 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :object-id='group.id'
+      :object-id="group.id"
       :original-object="group"
       :compare-object="editGroup"
       :confirm-button-disabled="invalidFormData"
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 406f71c7c81..73a56c75b26 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
@@ -37,7 +37,7 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :object-id='user.id'
+      :object-id="user.id"
       :original-object="originalObjectUser"
       :compare-object="compareObjectUser"
       :confirm-button-disabled="invalidFormData"

From 65d995e99009565cdeea57fda7463e2acf715be8 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 18:25:00 +0200
Subject: [PATCH 07/11] Dont make things more complex then they are

---
 .../src/components/CompareSaveDialog.vue                 | 6 +-----
 .../src/components/Groups/SideBar/EditPanel.vue          | 1 -
 .../src/components/Users/SideBar/EditPanel.vue           | 5 ++---
 .../components/Users/SideBar/GroupAssignmentsPanel.vue   | 9 ++++-----
 4 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-user-management/src/components/CompareSaveDialog.vue b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
index d16621fb0a2..2d322aa9f1c 100644
--- a/packages/web-app-user-management/src/components/CompareSaveDialog.vue
+++ b/packages/web-app-user-management/src/components/CompareSaveDialog.vue
@@ -38,10 +38,6 @@ export default {
       type: Object,
       required: true
     },
-    objectId: {
-      type: Object,
-      required: true
-    },
     confirmButtonDisabled: {
       type: Boolean,
       default: () => {
@@ -66,7 +62,7 @@ export default {
         this.saved = false
       }
     },
-    objectId(){
+    'originalObject.id': function(){
         this.saved = false
     }
   },
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 494cfe3951a..827fbd6f8e1 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
@@ -16,7 +16,6 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :object-id="group.id"
       :original-object="group"
       :compare-object="editGroup"
       :confirm-button-disabled="invalidFormData"
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 73a56c75b26..3d38a01bedd 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
@@ -37,7 +37,6 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :object-id="user.id"
       :original-object="originalObjectUser"
       :compare-object="compareObjectUser"
       :confirm-button-disabled="invalidFormData"
@@ -92,10 +91,10 @@ export default {
     },
 
     originalObjectUser() {
-      return { user: { ...this.user, passwordProfile: { password: '' } } }
+      return { ...this.user, passwordProfile: { password: '' } }
     },
     compareObjectUser() {
-      return { user: { ...this.editUser } }
+      return { ...this.editUser }
     },
     invalidFormData() {
       return Object.values(this.formData)
diff --git a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
index 7389735e01f..51a3784d9dd 100644
--- a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
+++ b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
@@ -38,9 +38,8 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :object-id="user.id"
-      :original-object="originalObjectUser"
-      :compare-object="compareObjectUser"
+      :original-object="user"
+      :compare-object="editUser"
       @revert="revertChanges"
       @confirm="$emit('confirm', editUser)"
     ></compare-save-dialog>
@@ -77,10 +76,10 @@ export default {
     },
 
     originalObjectUser() {
-      return { user: { ...this.user } }
+      return { ...this.user }
     },
     compareObjectUser() {
-      return { user: { ...this.editUser } }
+      return { ...this.editUser }
     }
   },
   watch: {

From 9e234f4f7f19cf8f334bd6362632336819e4a6ed Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 18:26:08 +0200
Subject: [PATCH 08/11] Get rid of unused vars

---
 .../src/components/Users/SideBar/GroupAssignmentsPanel.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
index 51a3784d9dd..3f465c7263e 100644
--- a/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
+++ b/packages/web-app-user-management/src/components/Users/SideBar/GroupAssignmentsPanel.vue
@@ -73,13 +73,6 @@ export default {
   computed: {
     user() {
       return this.users.length === 1 ? this.users[0] : null
-    },
-
-    originalObjectUser() {
-      return { ...this.user }
-    },
-    compareObjectUser() {
-      return { ...this.editUser }
     }
   },
   watch: {

From ecc6faad786bfd24ffcff0d5530f7482642e3a67 Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Fri, 29 Jul 2022 18:28:25 +0200
Subject: [PATCH 09/11] Add changelog item

---
 .../unreleased/enhancement-user-management-app-saved-dialog | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-user-management-app-saved-dialog

diff --git a/changelog/unreleased/enhancement-user-management-app-saved-dialog b/changelog/unreleased/enhancement-user-management-app-saved-dialog
new file mode 100644
index 00000000000..78f4b89c609
--- /dev/null
+++ b/changelog/unreleased/enhancement-user-management-app-saved-dialog
@@ -0,0 +1,6 @@
+Enhancement: User management app saved dialog
+
+We've replaced the pop up message when the user gets saved by a message which will be shown next to the save button.
+
+https://github.com/owncloud/web/pull/7375
+https://github.com/owncloud/web/issues/7351

From ef2959c58e05b575e2fb3021e68d70336f0932d1 Mon Sep 17 00:00:00 2001
From: Jan <jackermann@owncloud.com>
Date: Mon, 1 Aug 2022 09:40:00 +0200
Subject: [PATCH 10/11] Update Users.spec.js

---
 packages/web-app-user-management/tests/unit/views/Users.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 dd65f77b25e..8c4a6cec63b 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
@@ -75,7 +75,7 @@ describe('Users view', () => {
   })
 
   describe('method "editUserGroupAssignments"', () => {
-    it('should emit event success', async () => {
+    it('should emit event on success', async () => {
       const editUser = {
         id: '1',
         memberOf: [

From 10212676325adc4cf1622110da0e746544582a2b Mon Sep 17 00:00:00 2001
From: JanAckermann <jackermann@owncloud.com>
Date: Mon, 1 Aug 2022 09:49:18 +0200
Subject: [PATCH 11/11] Recover deleted line by accident

---
 packages/web-app-user-management/src/views/Users.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
index f43c4b9485a..e7d9723ca48 100644
--- a/packages/web-app-user-management/src/views/Users.vue
+++ b/packages/web-app-user-management/src/views/Users.vue
@@ -486,6 +486,7 @@ export default defineComponent({
 
         bus.publish('app.user-management.entity.saved')
       } catch (error) {
+        console.error(error)
         this.showMessage({
           title: this.$gettext('Failed to edit user'),
           status: 'danger'