User management bottom bar state saved (#7375)

* Add changes saved dialog in user management
owncloud · Aug 1, 2022 · a664eb7 · a664eb7
1 parent eb324f3
commit a664eb7
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 26 deletions.
diff --git a/changelog/unreleased/enhancement-user-management-app-saved-dialog 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
diff --git 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 variation="success" name="checkbox-circle" />
+        <span v-translate class="changes-saved 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,18 +45,41 @@ export default {
       }
     },
   },
+  data: () => ({
+    saved: false,
+  }),
   computed: {
     unsavedChanges(){
       return !isEqual(this.originalObject, this.compareObject)
     },
     unsavedChangesText(){
       return this.unsavedChanges ? this.$gettext('Unsaved changes') : this.$gettext('No changes')
     }
+  },
+  watch: {
+    unsavedChanges(){
+      if(this.unsavedChanges){
+        this.saved = false
+      }
+    },
+    'originalObject.id': function(){
+        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>
 <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);
 }
 </style>
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
@@ -91,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
@@ -38,8 +38,8 @@
     </div>
     <compare-save-dialog
       class="edit-compare-save-dialog"
-      :original-object="originalObjectUser"
-      :compare-object="compareObjectUser"
+      :original-object="user"
+      :compare-object="editUser"
       @revert="revertChanges"
       @confirm="$emit('confirm', editUser)"
     ></compare-save-dialog>
@@ -73,13 +73,6 @@ export default {
   computed: {
     user() {
       return this.users.length === 1 ? this.users[0] : null
-    },
-
-    originalObjectUser() {
-      return { user: { ...this.user } }
-    },
-    compareObjectUser() {
-      return { user: { ...this.editUser } }
     }
   },
   watch: {

diff --git a/packages/web-app-user-management/src/views/Users.vue b/packages/web-app-user-management/src/views/Users.vue
@@ -484,9 +484,7 @@ 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({
@@ -525,9 +523,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({

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
@@ -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 on 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()
     })