feat(4336): sharing hierarchy conflict UX (ADR-0005)

packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue

@@ -150,7 +150,10 @@ import {
   CollaboratorShare,
   ShareRole,
   ShareTypes,
-  call
+  call,
+  isSharingHierarchyConflictPendingError,
+  shareHierarchyForceRequestOptions,
+  type SharingHierarchyConflict
 } from '@ownclouders/web-client'
 import {
   useCapabilityStore,
@@ -159,7 +162,8 @@ import {
   useSpacesStore,
   useConfigStore,
   useSharesStore,
-  useUserStore
+  useUserStore,
+  useSharingHierarchyConflictsConfirm
 } from '@ownclouders/web-pkg'
 
 import { computed, defineComponent, inject, ref, unref, watch, onMounted, nextTick, Ref } from 'vue'
@@ -218,6 +222,8 @@ export default defineComponent({
     const { addShare } = sharesStore
     const { collaboratorShares } = storeToRefs(sharesStore)
 
+    const confirmSharingHierarchyConflicts = useSharingHierarchyConflictsConfirm()
+
     const searchQuery = ref('')
     const searchInProgress = ref(false)
     const autocompleteResults = ref<CollaboratorAutoCompleteItem[]>([])
@@ -376,46 +382,96 @@ export default defineComponent({
       const savePromises: Promise<void>[] = []
       const errors: { displayName: string; error: Error }[] = []
       const addedShares: CollaboratorShare[] = []
+      const pendingForceShares: {
+        displayName: string
+        conflict: SharingHierarchyConflict
+        addShareParams: Parameters<typeof addShare>[0]
+      }[] = []
+
+      const finishAddedShare = (share: CollaboratorShare) => {
+        addedShares.push(share)
+
+        if (unref(notifyEnabled)) {
+          clientService.httpAuthenticated.get(
+            `/ocs/v1.php/apps/files_sharing/api/v1/shares/${share.id}/notify`
+          ) as any
+        }
+      }
 
       unref(selectedCollaborators).forEach(({ id, shareType, displayName }) => {
         const type = getRecipientType(shareType)
+        const addShareParams = {
+          clientService,
+          space: unref(space),
+          resource: unref(resource),
+          options: {
+            roles: [unref(selectedRole).id],
+            expirationDateTime: unref(expirationDate),
+            recipients: [
+              {
+                objectId: id,
+                '@libre.graph.recipient.type': type
+              }
+            ]
+          }
+        }
 
         savePromises.push(
           saveQueue.add(async () => {
             try {
               const share = await addShare({
-                clientService,
-                space: unref(space),
-                resource: unref(resource),
-                options: {
-                  roles: [unref(selectedRole).id],
-                  expirationDateTime: unref(expirationDate),
-                  recipients: [
-                    {
-                      objectId: id,
-                      '@libre.graph.recipient.type': type
-                    }
-                  ]
-                }
+                ...addShareParams,
+                deferSharingHierarchyConflictConfirm: true
               })
 
-              addedShares.push(share)
-
-              if (unref(notifyEnabled)) {
-                clientService.httpAuthenticated.get(
-                  `/ocs/v1.php/apps/files_sharing/api/v1/shares/${share.id}/notify`
-                ) as any
-              }
+              finishAddedShare(share)
             } catch (error) {
+              if (isSharingHierarchyConflictPendingError(error)) {
+                pendingForceShares.push({
+                  displayName,
+                  conflict: error.conflict,
+                  addShareParams
+                })
+                return
+              }
               console.error(error)
-              errors.push({ displayName, error })
+              errors.push({ displayName, error: error as Error })
               throw error
             }
           })
         )
       })
 
-      const results = await Promise.allSettled(savePromises)
+      await Promise.allSettled(savePromises)
+
+      if (pendingForceShares.length > 0) {
+        const proceed = await confirmSharingHierarchyConflicts(
+          pendingForceShares.map(({ conflict }) => conflict)
+        )
+
+        if (!proceed) {
+          pendingForceShares.forEach(({ displayName }) => {
+            errors.push({
+              displayName,
+              error: new Error($gettext('Sharing change cancelled'))
+            })
+          })
+        } else {
+          for (const { displayName, addShareParams } of pendingForceShares) {
+            try {
+              const share = await addShare({
+                ...addShareParams,
+                graphRequestOptions: shareHierarchyForceRequestOptions()
+              })
+
+              finishAddedShare(share)
+            } catch (error) {
+              console.error(error)
+              errors.push({ displayName, error: error as Error })
+            }
+          }
+        }
+      }
 
       if (isProjectSpaceResource(unref(resource))) {
         const updatedSpace = await clientService.graphAuthenticated.drives.getDrive(
@@ -426,7 +482,7 @@ export default defineComponent({
         upsertSpace(updatedSpace)
       }
 
-      if (results.length !== errors.length) {
+      if (addedShares.length > 0) {
         showMessage({ title: $gettext('Share was added successfully') })
       }
 

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

@@ -128,15 +128,21 @@ import { DateTime } from 'luxon'
 
 import EditDropdown from './EditDropdown.vue'
 import RoleDropdown from './RoleDropdown.vue'
-import { CollaboratorShare, ShareRole, ShareTypes } from '@ownclouders/web-client'
+import {
+  CollaboratorShare,
+  ShareRole,
+  ShareTypes,
+  isSharingHierarchyConflictCancelledError
+} from '@ownclouders/web-client'
 import {
   queryItemAsString,
   useMessages,
   useModals,
   useSpacesStore,
   useUserStore,
   useSharesStore,
-  useConfigStore
+  useConfigStore,
+  useSharingHierarchyConflictConfirm
 } from '@ownclouders/web-pkg'
 import { Resource, extractDomSelector } from '@ownclouders/web-client'
 import { computed, defineComponent, inject, PropType, Ref, unref } from 'vue'
@@ -205,6 +211,7 @@ export default defineComponent({
     const sharesStore = useSharesStore()
     const { graphRoles } = storeToRefs(sharesStore)
     const { updateShare } = sharesStore
+    const confirmSharingHierarchyConflict = useSharingHierarchyConflictConfirm()
     const { upsertSpace } = useSpacesStore()
 
     const { user } = storeToRefs(userStore)
@@ -235,7 +242,9 @@ export default defineComponent({
     }
     const notifyShare = async () => {
       try {
-        const resp = await clientService.httpAuthenticated.get(`/ocs/v1.php/apps/files_sharing/api/v1/shares/${props.share.id}/notify`) as any
+        const resp = (await clientService.httpAuthenticated.get(
+          `/ocs/v1.php/apps/files_sharing/api/v1/shares/${props.share.id}/notify`
+        )) as any
         showMessage({
           title: $gettext(`Reminder sent to ${resp.data.recipients[0]}`)
         })
@@ -257,6 +266,7 @@ export default defineComponent({
       resource: inject<Ref<Resource>>('resource'),
       space: inject<Ref<SpaceResource>>('space'),
       updateShare,
+      confirmSharingHierarchyConflict,
       user,
       clientService,
       cernFeatures,
@@ -415,7 +425,8 @@ export default defineComponent({
           space: this.space,
           resource: this.resource,
           collaboratorShare: this.share,
-          options: { roles: [role.id], expirationDateTime }
+          options: { roles: [role.id], expirationDateTime },
+          confirmSharingHierarchyConflict: this.confirmSharingHierarchyConflict
         })
 
         if (isProjectSpaceResource(this.resource)) {
@@ -427,6 +438,9 @@ export default defineComponent({
 
         this.showMessage({ title: this.$gettext('Share successfully changed') })
       } catch (e) {
+        if (isSharingHierarchyConflictCancelledError(e)) {
+          return
+        }
         console.error(e)
         this.showErrorMessage({
           title: this.$gettext('Error while editing the share.'),

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

@@ -108,7 +108,8 @@ import {
   useConfigStore,
   useSharesStore,
   useResourcesStore,
-  useCanShare
+  useCanShare,
+  useSharingHierarchyConflictConfirm
 } from '@ownclouders/web-pkg'
 import { isLocationSharesActive } from '@ownclouders/web-pkg'
 import { textUtils } from '../../../helpers/textUtils'
@@ -122,7 +123,8 @@ import {
   Resource,
   SpaceResource,
   CollaboratorShare,
-  isSpaceResource
+  isSpaceResource,
+  isSharingHierarchyConflictCancelledError
 } from '@ownclouders/web-client'
 import { getSharedAncestorRoute } from '@ownclouders/web-pkg'
 import CopyPrivateLink from '../../Shares/CopyPrivateLink.vue'
@@ -153,6 +155,8 @@ export default defineComponent({
     const sharesStore = useSharesStore()
     const { addShare, deleteShare } = sharesStore
 
+    const confirmSharingHierarchyConflict = useSharingHierarchyConflictConfirm()
+
     const { user } = storeToRefs(userStore)
 
     const resource = inject<Ref<Resource>>('resource')
@@ -208,6 +212,7 @@ export default defineComponent({
     return {
       addShare,
       deleteShare,
+      confirmSharingHierarchyConflict,
       user,
       resource,
       space,
@@ -335,12 +340,16 @@ export default defineComponent({
             clientService: this.$clientService,
             space: this.space,
             resource: this.resource,
-            options: {}
+            options: {},
+            confirmSharingHierarchyConflict: this.confirmSharingHierarchyConflict
           })
           this.showMessage({
             title: this.$gettext('Access was denied successfully')
           })
         } catch (e) {
+          if (isSharingHierarchyConflictCancelledError(e)) {
+            return
+          }
           console.error(e)
           this.showErrorMessage({
             title: this.$gettext('Failed to deny access'),
@@ -356,12 +365,16 @@ export default defineComponent({
             collaboratorShare: isSpaceResource(this.resource)
               ? this.getDeniedSpaceMember(share)
               : this.getDeniedShare(share),
-            loadIndicators: false
+            loadIndicators: false,
+            confirmSharingHierarchyConflict: this.confirmSharingHierarchyConflict
           })
           this.showMessage({
             title: this.$gettext('Access was granted successfully')
           })
         } catch (e) {
+          if (isSharingHierarchyConflictCancelledError(e)) {
+            return
+          }
           console.error(e)
           this.showErrorMessage({
             title: this.$gettext('Failed to grant access'),
@@ -388,7 +401,8 @@ export default defineComponent({
               space: this.space,
               resource: this.resource,
               collaboratorShare,
-              loadIndicators
+              loadIndicators,
+              confirmSharingHierarchyConflict: this.confirmSharingHierarchyConflict
             })
 
             this.showMessage({
@@ -398,6 +412,9 @@ export default defineComponent({
               this.removeResources([{ id: lastShareId }] as Resource[])
             }
           } catch (error) {
+            if (isSharingHierarchyConflictCancelledError(error)) {
+              return
+            }
             console.error(error)
             this.showErrorMessage({
               title: this.$gettext('Failed to remove share'),

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

@@ -88,11 +88,16 @@ import {
   useModals,
   useSharesStore,
   useSpacesStore,
-  useUserStore
+  useUserStore,
+  useSharingHierarchyConflictConfirm
 } from '@ownclouders/web-pkg'
 import { computed, defineComponent, inject, nextTick, ref, Ref, unref, useTemplateRef } from 'vue'
 import { shareSpaceAddMemberHelp } from '../../../helpers/contextualHelpers'
-import { ProjectSpaceResource, CollaboratorShare } from '@ownclouders/web-client'
+import {
+  ProjectSpaceResource,
+  CollaboratorShare,
+  isSharingHierarchyConflictCancelledError
+} from '@ownclouders/web-client'
 import { useClientService } from '@ownclouders/web-pkg'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
@@ -120,6 +125,8 @@ export default defineComponent({
     const spacesStore = useSpacesStore()
     const { upsertSpace, getSpaceMembers } = spacesStore
 
+    const confirmSharingHierarchyConflict = useSharingHierarchyConflictConfirm()
+
     const configStore = useConfigStore()
     const { options: configOptions } = storeToRefs(configStore)
 
@@ -142,6 +149,7 @@ export default defineComponent({
       dispatchModal,
       spaceMembers,
       deleteShare,
+      confirmSharingHierarchyConflict,
       upsertSpace,
       canShare,
       markInstance,
@@ -235,7 +243,8 @@ export default defineComponent({
               clientService: this.clientService,
               space: this.resource,
               resource: this.resource,
-              collaboratorShare: share
+              collaboratorShare: share,
+              confirmSharingHierarchyConflict: this.confirmSharingHierarchyConflict
             })
 
             if (!currentUserRemoved) {
@@ -256,6 +265,9 @@ export default defineComponent({
               await this.$router.push(createLocationSpaces('files-spaces-projects'))
             }
           } catch (error) {
+            if (isSharingHierarchyConflictCancelledError(error)) {
+              return
+            }
             console.error(error)
             this.showErrorMessage({
               title: this.$gettext('Failed to remove share'),