Merge pull request #11137 from owncloud/fix/duplicated-ui-elements-pu…

…blic-link

fix: duplicated elements on public link page

changelog/unreleased/bugfix-duplicated-ui-elements-public-link

@@ -0,0 +1,6 @@
+Bugfix: Duplicated elements on public link page
+
+We've fixed a bug where clicking the ownCloud logo on a public link page would lead to certain UI elements being duplicated.
+
+https://github.com/owncloud/web/pull/11137
+https://github.com/owncloud/web/issues/10371

packages/web-pkg/src/composables/actions/files/useFileActionsCopy.ts

@@ -66,7 +66,7 @@ export const useFileActionsCopy = () => {
           }
 
           if (isLocationPublicActive(router, 'files-public-link')) {
-            return unref(currentFolder).canCreate()
+            return unref(currentFolder)?.canCreate()
           }
 
           if (

packages/web-pkg/src/composables/actions/files/useFileActionsPaste.ts

@@ -162,7 +162,7 @@ export const useFileActionsPaste = () => {
         }
 
         if (isLocationPublicActive(router, 'files-public-link') && unref(currentFolder)) {
-          return unref(currentFolder).canCreate()
+          return unref(currentFolder)?.canCreate()
         }
 
         // copy can't be restricted in authenticated context, because

packages/web-pkg/src/composables/piniaStores/extensionRegistry/extensionRegistry.ts

@@ -11,6 +11,11 @@ export const useExtensionRegistry = defineStore('extensionRegistry', () => {
   const registerExtensions = (e: Ref<Extension[]>) => {
     extensions.value.push(e)
   }
+  const unregisterExtensions = (ids: string[]) => {
+    extensions.value = unref(extensions)
+      .map((e) => ref(unref(e).filter(({ id }) => !ids.includes(id))))
+      .filter((e) => unref(e).length)
+  }
   const requestExtensions = <T extends Extension>(extensionPoint: ExtensionPoint<T>) => {
     if (!extensionPoint.id || !extensionPoint.extensionType) {
       throw new Error('ExtensionPoint must have an id and an extensionType')
@@ -30,6 +35,11 @@ export const useExtensionRegistry = defineStore('extensionRegistry', () => {
   const registerExtensionPoints = <T extends Extension>(e: Ref<ExtensionPoint<T>[]>) => {
     extensionPoints.value.push(e)
   }
+  const unregisterExtensionPoints = (ids: string[]) => {
+    extensionPoints.value = unref(extensionPoints)
+      .map((e) => ref(unref(e).filter(({ id }) => !ids.includes(id))))
+      .filter((e) => unref(e).length)
+  }
   const getExtensionPoints = <T extends ExtensionPoint<Extension>>(
     options: {
       extensionType?: ExtensionType
@@ -52,9 +62,11 @@ export const useExtensionRegistry = defineStore('extensionRegistry', () => {
   return {
     extensions,
     registerExtensions,
+    unregisterExtensions,
     requestExtensions,
     extensionPoints,
     registerExtensionPoints,
+    unregisterExtensionPoints,
     getExtensionPoints
   }
 })

packages/web-pkg/tests/unit/composables/piniaStores/extensionRegistry/extensionRegistry.spec.ts

@@ -132,6 +132,36 @@ describe('useExtensionRegistry', () => {
         }
       })
     })
+
+    it('unregisters extensions', () => {
+      const extensionPoint: ExtensionPoint<CustomComponentExtension> = mock<
+        ExtensionPoint<CustomComponentExtension>
+      >({
+        id: 'extension-point-id',
+        extensionType: 'customComponent'
+      })
+
+      const extension = mock<Extension>({
+        id: 'foo-1',
+        type: 'customComponent',
+        extensionPointIds: [extensionPoint.id]
+      })
+      const extensions = computed(() => [extension])
+
+      getWrapper({
+        setup: (instance) => {
+          instance.registerExtensions(extensions)
+
+          const result1 = instance.requestExtensions(extensionPoint)
+          expect(result1.length).toBe(1)
+
+          instance.unregisterExtensions([extension.id])
+
+          const result2 = instance.requestExtensions(extensionPoint)
+          expect(result2.length).toBe(0)
+        }
+      })
+    })
   })
 
   describe('register and get extensionPoints', () => {
@@ -196,6 +226,29 @@ describe('useExtensionRegistry', () => {
         }
       })
     })
+
+    it('unregisters extension points', () => {
+      const extensionPoint = mock<ExtensionPoint<CustomComponentExtension>>({
+        id: 'foo-1',
+        extensionType: 'customComponent'
+      })
+
+      const extensionPoints = computed<ExtensionPoint<Extension>[]>(() => [extensionPoint])
+
+      getWrapper({
+        setup: (instance) => {
+          instance.registerExtensionPoints(extensionPoints)
+
+          const result1 = instance.getExtensionPoints({ extensionType: 'customComponent' })
+          expect(result1.length).toBe(1)
+
+          instance.unregisterExtensionPoints([extensionPoint.id])
+
+          const result2 = instance.getExtensionPoints({ extensionType: 'customComponent' })
+          expect(result2.length).toBe(0)
+        }
+      })
+    })
   })
 })
 

packages/web-runtime/src/layouts/Application.vue

@@ -63,7 +63,18 @@ import MobileNav from '../components/MobileNav.vue'
 import { NavItem, getExtensionNavItems } from '../helpers/navItems'
 import { LoadingIndicator } from '@ownclouders/web-pkg'
 import { useActiveApp, useRoute, useRouteMeta, useSpacesLoading } from '@ownclouders/web-pkg'
-import { computed, defineComponent, provide, ref, toRef, unref, watch } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+  toRef,
+  unref,
+  watch
+} from 'vue'
 import { useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 
@@ -200,14 +211,25 @@ export default defineComponent({
     const extensionPoints = computed<ExtensionPoint<Extension>[]>(() => [progressBarExtensionPoint])
     extensionRegistry.registerExtensionPoints(extensionPoints)
 
+    onMounted(async () => {
+      await nextTick()
+      window.addEventListener('resize', onResize)
+      onResize()
+    })
+
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', onResize)
+
+      extensionRegistry.unregisterExtensions([progressBarExtensionId])
+      extensionRegistry.unregisterExtensionPoints(unref(extensionPoints).flatMap((e) => e.id))
+    })
+
     return {
       apps,
-      defaultProgressBarExtension,
       progressBarExtensionPoint,
       isSidebarVisible,
       isLoading,
       navItems,
-      onResize,
       isMobileWidth,
       navBarClosed,
       setNavBarClosed
@@ -239,15 +261,6 @@ export default defineComponent({
           (b.applicationMenu?.priority || Number.MAX_SAFE_INTEGER)
       )
     }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      window.addEventListener('resize', this.onResize)
-      this.onResize()
-    })
-  },
-  beforeUnmount() {
-    window.removeEventListener('resize', this.onResize)
   }
 })
 </script>

packages/web-runtime/src/services/auth/authService.ts

@@ -93,7 +93,8 @@ export class AuthService implements AuthServiceInterface {
       if (publicLinkToken) {
         await this.publicLinkManager.updateContext(publicLinkToken)
       }
-    } else {
+    } else if (to.name !== 'resolvePublicLink') {
+      // no need to clear public context if we're routing the to public link resolving page
       this.publicLinkManager.clearContext()
     }