User management bottom bar state saved

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

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>

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)

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: {

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({

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