Fix add/remove animations for collaborators and links

apps/files/src/components/Collaborators/Collaborator.vue

@@ -11,9 +11,10 @@
     </oc-table-row>
     <oc-table-row class="files-collaborators-collaborator-table-row-info">
       <oc-table-cell shrink>
-        <oc-button v-if="modifiable" :ariaLabel="$gettext('Delete share')" @click="$emit('onDelete', collaborator)" variation="raw" class="files-collaborators-collaborator-delete">
+        <oc-button v-if="$_deleteButtonVisible" :ariaLabel="$gettext('Delete share')" @click="$_removeShare" variation="raw" class="files-collaborators-collaborator-delete">
           <oc-icon name="close" />
         </oc-button>
+        <oc-spinner v-else-if="$_loadingSpinnerVisible" :aria-label="$gettext('Removing collaborator') + '...'" size="small" />
         <oc-icon v-else name="lock" class="uk-invisible"></oc-icon>
       </oc-table-cell>
       <oc-table-cell shrink>
@@ -36,7 +37,7 @@
         </div>
       </oc-table-cell>
       <oc-table-cell shrink>
-        <oc-button v-if="modifiable" :aria-label="$gettext('Edit share')" @click="$emit('onEdit', collaborator)" variation="raw" class="files-collaborators-collaborator-edit">
+        <oc-button v-if="$_editButtonVisible" :aria-label="$gettext('Edit share')" @click="$emit('onEdit', collaborator)" variation="raw" class="files-collaborators-collaborator-edit">
           <oc-icon name="edit" />
         </oc-button>
       </oc-table-cell>
@@ -79,12 +80,23 @@ export default {
   },
   data: function () {
     return {
-      shareTypes
+      shareTypes,
+      removalInProgress: false
     }
   },
   computed: {
     ...mapGetters(['user']),
 
+    $_loadingSpinnerVisible () {
+      return this.modifiable && this.removalInProgress
+    },
+    $_deleteButtonVisible () {
+      return this.modifiable && !this.removalInProgress
+    },
+    $_editButtonVisible () {
+      return this.modifiable && !this.removalInProgress
+    },
+
     $_isIndirectShare () {
       // it is assumed that the "incoming" attribute only exists
       // on shares coming from this.sharesTree which are all indirect
@@ -139,6 +151,12 @@ export default {
         label: this.$gettext('Unknown Role')
       }
     }
+  },
+  methods: {
+    $_removeShare () {
+      this.removalInProgress = true
+      this.$emit('onDelete', this.collaborator)
+    }
   }
 }
 </script>

apps/files/src/components/Collaborators/CollaboratorsEditOptions.vue

@@ -111,15 +111,17 @@ export default {
     }
   },
   methods: {
-    selectRole (role, propagate = true) {
+    selectRole (role) {
       this.selectedRole = role
-
-      this.$emit('optionChange', { role: this.selectedRole, permissions: this.additionalPermissions, expirationDate: this.expirationDate, propagate: propagate })
+      this.publishChange()
     },
 
     checkAdditionalPermissions (permissions) {
       this.additionalPermissions = permissions
+      this.publishChange()
+    },
 
+    publishChange () {
       this.$emit('optionChange', { role: this.selectedRole, permissions: this.additionalPermissions, expirationDate: this.expirationDate })
     }
   }

apps/files/src/components/Collaborators/EditCollaborator.vue

@@ -6,23 +6,26 @@
     </div>
     <hr class="divider" />
     <collaborators-edit-options
-      :existingRole="collaborator.role"
-      :collaboratorsPermissions="collaboratorsPermissions"
+      :existingRole="$_originalRole"
+      :collaboratorsPermissions="$_originalPermissions"
       @optionChange="collaboratorOptionChanged"
       class="uk-margin-bottom"
     />
     <hr class="divider" />
     <oc-grid gutter="small" class="uk-margin-bottom">
       <div>
-        <oc-button class="files-collaborators-collaborator-cancel" :disabled="collaboratorSaving" @click="$_ocCollaborators_cancelChanges">
+        <oc-button class="files-collaborators-collaborator-cancel" :disabled="saving" @click="$_ocCollaborators_cancelChanges">
           <translate>Cancel</translate>
         </oc-button>
-        <oc-button variation="primary" :disabled="collaboratorSaving || !editing" :aria-label="_saveButtonLabel" @click="$_ocCollaborators_saveChanges(collaborator)">
-          <translate>Save</translate>
+        <oc-button v-if="saving" :disabled="true">
+          <oc-spinner :aria-label="$gettext('Saving Share')" class="uk-position-small uk-position-center-left" size="small"/>
+          <span :aria-hidden="true" class="uk-margin-small-left" v-translate>Saving Share</span>
+        </oc-button>
+        <oc-button v-else variation="primary" :disabled="!$_hasChanges" :aria-label="$gettext('Save Share')" @click="$_ocCollaborators_saveChanges">
+          <translate>Save Share</translate>
         </oc-button>
       </div>
     </oc-grid>
-    <oc-spinner v-if="collaboratorSaving" class="uk-margin-small-left" :aria-label="$gettext('Saving')"/>
   </div>
 </template>
 
@@ -43,101 +46,78 @@ export default {
   mixins: [
     Mixins
   ],
-  props: ['collaborator'],
+  props: {
+    collaborator: {
+      type: Object,
+      required: true
+    }
+  },
   data () {
     return {
-      editing: false,
-      selectedNewRole: null,
+      selectedRole: null,
       additionalPermissions: null,
-      permissionsChanged: false
+      saving: false
     }
   },
   computed: {
-    ...mapGetters('Files', ['highlightedFile', 'collaboratorSaving', 'collaboratorsEditInProgress']),
+    ...mapGetters('Files', ['highlightedFile']),
     ...mapGetters(['user']),
 
-    _saveButtonLabel () {
-      return this.$gettext('Save Share')
+    $_originalPermissions () {
+      const permissions = this.collaborator.customPermissions
+      return filterObject(permissions, (key, value) => value)
     },
 
-    originalRole () {
-      return this.roles[this.collaborator.role].tag
+    $_originalRole () {
+      return this.roles[this.collaborator.role.name]
     },
 
-    collaboratorsPermissions () {
-      const permissions = this.collaborator.customPermissions
+    $_permissionsBitmask () {
+      const role = this.selectedRole || this.$_originalRole
+      const permissions = this.additionalPermissions || Object.keys(this.$_originalPermissions)
+      return roleToBitmask(role, permissions)
+    },
 
-      return filterObject(permissions, (key, value) => value)
+    $_hasChanges () {
+      if (this.selectedRole !== null && this.selectedRole.name !== this.$_originalRole.name) {
+        // if the role has changed, always return true. The user doesn't need to understand if two bitmasks of different roles are the same!
+        return true
+      }
+      const originalBitmask = roleToBitmask(this.$_originalRole, Object.keys(this.$_originalPermissions))
+      return originalBitmask !== this.$_permissionsBitmask
     }
   },
   methods: {
-    ...mapActions('Files', ['changeShare', 'toggleCollaboratorsEdit']),
-
-    close () {
-      this.$emit('close')
-    },
-
-    $_ocCollaborators_saveChanges (collaborator) {
-      if (!this.selectedRole) this.selectedRole = this.roles[collaborator.role.name]
-      let permissions = this.additionalPermissions
+    ...mapActions('Files', ['changeShare']),
 
-      if (!permissions) {
-        permissions = []
-        for (const permission in this.collaboratorsPermissions) {
-          permissions.push(permission)
-        }
-      }
+    $_ocCollaborators_saveChanges () {
+      this.saving = true
 
-      const bitmask = roleToBitmask(this.selectedRole, permissions, this.highlightedFile.type === 'folder')
+      if (!this.selectedRole) this.selectedRole = this.$_originalRole
+      const bitmask = this.$_permissionsBitmask
 
       this.changeShare({
         client: this.$client,
-        share: collaborator,
-        // TODO: After changing to tabs view, this can be dropped
+        share: this.collaborator,
         // Map bitmask to role to get the correct role in case the advanced role was mapped to existing role
         role: bitmaskToRole(bitmask, this.highlightedFile.type === 'folder'),
         permissions: bitmask
       })
-        .then(() => {
-          this.editing = false
-          this.toggleCollaboratorsEdit(false)
-          this.close()
+        .then(() => this.$_ocCollaborators_cancelChanges())
+        .catch(() => {
+          this.saving = false
         })
     },
-    $_ocCollaborators_changeRole (role) {
-      this.selectedNewRole = role
-    },
-    $_ocCollaborators_selectedRoleName (collaborator) {
-      if (!this.selectedNewRole) {
-        return this.roles[collaborator.role].name
-      }
-
-      return this.selectedNewRole.name
-    },
-    $_ocCollaborators_selectedRoleDescription (collaborator) {
-      if (!this.selectedNewRole) {
-        return this.roles[collaborator.role].description
-      }
 
-      return this.selectedNewRole.description
-    },
     $_ocCollaborators_cancelChanges () {
-      this.selectedNewRole = null
-      this.editing = false
-      this.toggleCollaboratorsEdit(false)
+      this.selectedRole = null
+      this.additionalPermissions = null
+      this.saving = false
       this.close()
     },
 
-    onChange () {
-      // TODO: Bring this back
-      // if (this.selectedRole.name === this.originalRole.name && !this.permissionsChanged) {
-      //   this.editing = false
-      //   this.toggleCollaboratorsEdit(false)
-      //   return
-      // }
-
-      this.editing = true
-      this.toggleCollaboratorsEdit(true)
+    close () {
+      this.$emit('close')
     }
   }
 }