[full-ci] Implement unshare confirm dialog

changelog/unreleased/enhancement-add-unshare-confirmation-dialog

@@ -0,0 +1,6 @@
+Enhancement: Add un-share confirmation dialog
+
+We have implemented a confirmation dialog which pops up if the user clicks the "remove share" button
+
+https://github.com/owncloud/web/pull/6795
+https://github.com/owncloud/web/issues/6728

packages/web-app-files/src/components/SideBar/Shares/FileShares.vue

@@ -41,7 +41,7 @@
               :share="collaborator"
               :modifiable="!collaborator.indirect"
               :shared-parent-route="getSharedParentRoute(collaborator)"
-              @onDelete="$_ocCollaborators_deleteShare"
+              @onDelete="$_ocCollaborators_deleteShare_trigger"
             />
           </li>
         </ul>
@@ -306,6 +306,7 @@ export default {
       'deleteShare',
       'loadIncomingShares'
     ]),
+    ...mapActions(['createModal', 'hideModal', 'showMessage']),
     $_isCollaboratorShare(collaborator) {
       return ShareTypes.containsAnyValue(ShareTypes.authenticated, [collaborator.shareType])
     },
@@ -337,13 +338,43 @@ export default {
     toggleShareeList() {
       this.showShareesList = !this.showShareesList
     },
+
+    $_ocCollaborators_deleteShare_trigger(share) {
+      const modal = {
+        variation: 'danger',
+        title: this.$gettext('Remove share'),
+        cancelText: this.$gettext('Cancel'),
+        confirmText: this.$gettext('Remove'),
+        icon: 'alarm-warning',
+        message: this.$gettext('Are you sure you want to remove this share?'),
+        hasInput: false,
+        onCancel: this.hideModal,
+        onConfirm: () => this.$_ocCollaborators_deleteShare(share)
+      }
+
+      this.createModal(modal)
+    },
+
     $_ocCollaborators_deleteShare(share) {
       this.deleteShare({
         client: this.$client,
         share: share,
         resource: this.highlightedFile,
         storageId: this.$route.params.storageId
       })
+        .then(() => {
+          this.hideModal()
+          this.showMessage({
+            title: this.$gettext('Share was removed successfully')
+          })
+        })
+        .catch((error) => {
+          console.error(error)
+          this.showMessage({
+            title: this.$gettext('Failed to remove share'),
+            status: 'danger'
+          })
+        })
     },
     $_reloadShares() {
       this.loadCurrentFileOutgoingShares({

packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue

@@ -13,7 +13,7 @@
             <collaborator-list-item
               :share="collaborator"
               :modifiable="isModifiable(collaborator)"
-              @onDelete="$_ocCollaborators_deleteShare(collaborator)"
+              @onDelete="$_ocCollaborators_deleteShare_trigger(collaborator)"
             />
           </li>
         </ul>
@@ -104,6 +104,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['loadCurrentFileOutgoingShares', 'deleteShare']),
+    ...mapActions(['createModal', 'hideModal', 'showMessage']),
 
     isModifiable(share) {
       if (!this.currentUserIsManager) {
@@ -120,21 +121,50 @@ export default defineComponent({
       )
       return managers.length > 1
     },
+
+    $_ocCollaborators_deleteShare_trigger(share) {
+      const modal = {
+        variation: 'danger',
+        title: this.$gettext('Remove share'),
+        cancelText: this.$gettext('Cancel'),
+        confirmText: this.$gettext('Remove'),
+        icon: 'alarm-warning',
+        message: this.$gettext('Are you sure you want to remove this share?'),
+        hasInput: false,
+        onCancel: this.hideModal,
+        onConfirm: () => this.$_ocCollaborators_deleteShare(share)
+      }
+
+      this.createModal(modal)
+    },
+
     $_ocCollaborators_deleteShare(share) {
       this.deleteShare({
         client: this.$client,
         graphClient: this.graphClient,
         share: share,
         resource: this.highlightedFile
-      }).then(() => {
-        // current user was removed from the share.
-        if (share.collaborator.name === this.user.id) {
-          if (isLocationSpacesActive(this.$router, 'files-spaces-projects')) {
-            return this.$router.go()
-          }
-          return this.$router.push(createLocationSpaces('files-spaces-projects'))
-        }
       })
+        .then(() => {
+          this.hideModal()
+          this.showMessage({
+            title: this.$gettext('Share was removed successfully')
+          })
+          // current user was removed from the share.
+          if (share.collaborator.name === this.user.id) {
+            if (isLocationSpacesActive(this.$router, 'files-spaces-projects')) {
+              return this.$router.go()
+            }
+            return this.$router.push(createLocationSpaces('files-spaces-projects'))
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+          this.showMessage({
+            title: this.$gettext('Failed to remove share'),
+            status: 'danger'
+          })
+        })
     }
   }
 })

packages/web-app-files/tests/unit/components/SideBar/Shares/FileShares.spec.js

@@ -91,16 +91,16 @@ describe('FileShares', () => {
     })
 
     it('reacts on delete events by collaborator list items', async () => {
-      const spyOnCollaboratorDelete = jest
-        .spyOn(FileShares.methods, '$_ocCollaborators_deleteShare')
+      const spyOnCollaboratorDeleteTrigger = jest
+        .spyOn(FileShares.methods, '$_ocCollaborators_deleteShare_trigger')
         .mockImplementation()
       const wrapper = getMountedWrapper({
         user,
         outgoingCollaborators: collaborators
       })
       wrapper.find(selectors.firstCollaboratorListItem).vm.$emit('onDelete')
       await wrapper.vm.$nextTick()
-      expect(spyOnCollaboratorDelete).toHaveBeenCalledTimes(1)
+      expect(spyOnCollaboratorDeleteTrigger).toHaveBeenCalledTimes(1)
     })
     it('reloads shares if highlighted file is changed', async () => {
       const spyOnReloadShares = jest
@@ -207,6 +207,11 @@ const storeOptions = (data) => {
   }
 
   return {
+    actions: {
+      createModal: jest.fn(),
+      hideModal: jest.fn(),
+      showMessage: jest.fn()
+    },
     state: {
       user
     },

packages/web-app-files/tests/unit/components/SideBar/Shares/SpaceMembers.spec.js

@@ -118,12 +118,15 @@ describe('SpaceMembers', () => {
         outgoingCollaborators: outgoingShares
       })
 
-      const spyOnCollaboratorDelete = jest.spyOn(wrapper.vm, 'deleteShare')
+      const spyOnCollaboratorDeleteTrigger = jest.spyOn(
+        wrapper.vm,
+        '$_ocCollaborators_deleteShare_trigger'
+      )
       wrapper
         .find(`div[data-testid="collaborator-user-item-${outgoingShares[0].collaborator.name}"]`)
         .vm.$emit('onDelete')
       await wrapper.vm.$nextTick()
-      expect(spyOnCollaboratorDelete).toHaveBeenCalledTimes(1)
+      expect(spyOnCollaboratorDeleteTrigger).toHaveBeenCalledTimes(1)
     })
   })
 })
@@ -132,6 +135,11 @@ const storeOptions = (data, isInLoadingState) => {
   const { user, outgoingCollaborators = [] } = data
 
   return {
+    actions: {
+      createModal: jest.fn(),
+      hideModal: jest.fn(),
+      showMessage: jest.fn()
+    },
     state: {
       user
     },

tests/acceptance/pageObjects/FilesPageElement/SharingDialog/collaboratorsDialog.js

@@ -11,10 +11,16 @@ module.exports = {
     deleteShareWithUserGroup: function (collaborator) {
       this.expandShareEditDropdown(collaborator)
       const deleteSelector = this.elements.deleteShareButton.selector
+      const dialogSelector = this.elements.dialog.selector
+      const dialogConfirmSelector = this.elements.dialogConfirmBtn.selector
+
       return this.useXpath()
         .waitForElementVisible(deleteSelector)
         .waitForAnimationToFinish() // wait for animation of share sliding out
         .click(deleteSelector)
+        .waitForElementVisible(dialogSelector)
+        .waitForAnimationToFinish() // wait for transition on the modal to finish
+        .click(dialogConfirmSelector)
         .waitForAjaxCallsToStartAndFinish()
     },
     /**
@@ -207,6 +213,14 @@ module.exports = {
       selector: '//button[contains(@class, "remove-share")]',
       locateStrategy: 'xpath'
     },
+    dialog: {
+      selector: '//div[contains(@class, "oc-modal")]',
+      locateStrategy: 'xpath'
+    },
+    dialogConfirmBtn: {
+      selector: '//button[contains(@class, "oc-modal-body-actions-confirm")]',
+      locateStrategy: 'xpath'
+    },
     createShareDialog: {
       selector: '#new-collaborators-form'
     },

tests/e2e/support/objects/app-files/share/actions.ts

@@ -176,7 +176,8 @@ export const removeSharee = async (args: removeShareeArgs): Promise<void> => {
         .locator(
           `${userColumn}//ul[contains(@class,"collaborator-edit-dropdown-options-list")]//button[contains(@class,"remove-share")]`
         )
-        .click()
+        .click(),
+      page.locator('.oc-modal-body-actions-confirm').click()
     ])
   }
 }