fix: hidden shares in preview app

changelog/unreleased/bugfix-preview-app-files-visibility

@@ -0,0 +1,8 @@
+Bugfix: Preview app files visibility
+
+We've fixed the issue with displaying hidden files when user open a file in preview app in "Shared with me" list.
+The `q_share-visibility` query param is now passed to the app so that if a user opens a file while listing "visible shares", the preview app will allow moving only to another visible files.
+When the `q_share-visibility` query param is set to `hidden` (i.e. user is listing "hidden shares"), the preview app will allow moving only to another hidden files.
+
+https://github.com/owncloud/web/pull/12040
+https://github.com/owncloud/web/issues/11883

packages/web-app-preview/src/App.vue

@@ -80,7 +80,7 @@ import {
   watch,
   Ref
 } from 'vue'
-import { Resource } from '@ownclouders/web-client'
+import { IncomingShareResource, Resource } from '@ownclouders/web-client'
 import {
   AppFileHandlingResult,
   AppFolderHandlingResult,
@@ -180,6 +180,20 @@ export default defineComponent({
       }
 
       const files = props.activeFiles.filter((file) => {
+        if (
+          unref(props.currentFileContext.routeQuery)['q_share-visibility'] === 'hidden' &&
+          !(file as IncomingShareResource).hidden
+        ) {
+          return false
+        }
+
+        if (
+          unref(props.currentFileContext.routeQuery)['q_share-visibility'] !== 'hidden' &&
+          (file as IncomingShareResource).hidden
+        ) {
+          return false
+        }
+
         return mimeTypes.includes(file.mimeType?.toLowerCase()) && file.canDownload()
       })
 

packages/web-app-preview/tests/unit/app.spec.ts

@@ -1,5 +1,5 @@
 import App from '../../src/App.vue'
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 import { defaultComponentMocks, defaultPlugins, shallowMount } from '@ownclouders/web-test-helpers'
 import { FileContext, queryItemAsString } from '@ownclouders/web-pkg'
 import { mock } from 'vitest-mock-extended'
@@ -17,6 +17,7 @@ const activeFiles = [
     name: 'bear.png',
     mimeType: 'image/png',
     path: 'personal/admin/bear.png',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -25,6 +26,7 @@ const activeFiles = [
     name: 'elephant.png',
     mimeType: 'image/png',
     path: 'personal/admin/elephant.png',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -33,6 +35,7 @@ const activeFiles = [
     name: 'wale_sounds.flac',
     mimeType: 'audio/flac',
     path: 'personal/admin/wale_sounds.flac',
+    hidden: true,
     canDownload: () => true
   },
   {
@@ -41,6 +44,7 @@ const activeFiles = [
     name: 'lonely_sloth_very_sad.gif',
     mimeType: 'image/gif',
     path: 'personal/admin/lonely_sloth_very_sad.gif',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -49,6 +53,7 @@ const activeFiles = [
     name: 'tiger_eats_plants.mp4',
     mimeType: 'video/mp4',
     path: 'personal/admin/tiger_eats_plants.mp4',
+    hidden: true,
     canDownload: () => true
   },
   {
@@ -57,6 +62,7 @@ const activeFiles = [
     name: 'happy_hippo.gif',
     mimeType: 'image/gif',
     path: 'personal/admin/happy_hippo.gif',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -65,6 +71,7 @@ const activeFiles = [
     name: 'sleeping_dog.gif',
     mimeType: 'image/gif',
     path: 'personal/admin/sleeping_dog.gif',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -73,6 +80,7 @@ const activeFiles = [
     name: 'cat_murr_murr.gif',
     mimeType: 'image/gif',
     path: 'personal/admin/cat_murr_murr.gif',
+    hidden: false,
     canDownload: () => true
   },
   {
@@ -81,6 +89,7 @@ const activeFiles = [
     name: 'labrador.gif',
     mimeType: 'image/gif',
     path: 'personal/admin/labrador.gif',
+    hidden: false,
     canDownload: () => true
   }
 ]
@@ -104,9 +113,27 @@ describe('Preview app', () => {
       ).toEqual(['1', '2', '4', '6', '7', '8', '9'])
     })
   })
+
+  describe('Computed "filteredFiles"', () => {
+    it('should hide hidden shares if the share visibility query is not set to "hidden"', () => {
+      const { wrapper } = createShallowMountWrapper()
+      expect(wrapper.vm.filteredFiles.length).toStrictEqual(7)
+    })
+
+    it('should hide visible shares if the share visibility query is set to "hidden"', () => {
+      const { wrapper } = createShallowMountWrapper({
+        currentFileContext: { routeQuery: ref({ ['q_share-visibility']: 'hidden' }) }
+      })
+      expect(wrapper.vm.filteredFiles.length).toStrictEqual(2)
+    })
+  })
 })
 
-function createShallowMountWrapper() {
+function createShallowMountWrapper({
+  currentFileContext
+}: {
+  currentFileContext?: Partial<FileContext>
+} = {}) {
   const mocks = defaultComponentMocks()
   mocks.$previewService.loadPreview.mockResolvedValue('')
   vi.mocked(queryItemAsString).mockImplementationOnce(() => '1')
@@ -115,7 +142,8 @@ function createShallowMountWrapper() {
     wrapper: shallowMount(App, {
       props: {
         currentFileContext: mock<FileContext>({
-          path: 'personal/admin/bear.png'
+          path: 'personal/admin/bear.png',
+          ...currentFileContext
         }),
         activeFiles,
         isFolderLoading: true,

packages/web-pkg/src/composables/appDefaults/useAppNavigation.ts

@@ -34,7 +34,7 @@ export const routeToContextQuery = (location: RouteLocation): LocationQuery => {
   const { params, query } = location
 
   const contextQuery: Record<string, QueryValue> = {}
-  const contextQueryItems = ['fileId', 'shareId'].concat(
+  const contextQueryItems = ['fileId', 'shareId', 'q_share-visibility'].concat(
     (location as any).meta?.contextQueryItems || []
   ) as string[]
   for (const queryItem of contextQueryItems) {