feat: add tiles view for shared via link view

packages/web-app-files/src/composables/extensions/useFolderViews.ts

@@ -4,6 +4,7 @@ import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
   folderViewsProjectSpacesExtensionPoint,
+  folderViewsSharedViaLink,
   folderViewsTrashExtensionPoint,
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
@@ -19,7 +20,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFolderExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsProjectSpacesExtensionPoint.id
+        folderViewsProjectSpacesExtensionPoint.id,
+        folderViewsSharedViaLink.id
       ],
       folderView: {
         name: 'resource-table-condensed',
@@ -39,7 +41,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsProjectSpacesExtensionPoint.id,
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
-        folderViewsTrashOverviewExtensionPoint.id
+        folderViewsTrashOverviewExtensionPoint.id,
+        folderViewsSharedViaLink.id
       ],
       folderView: {
         name: 'resource-table',
@@ -59,7 +62,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsProjectSpacesExtensionPoint.id,
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
-        folderViewsTrashOverviewExtensionPoint.id
+        folderViewsTrashOverviewExtensionPoint.id,
+        folderViewsSharedViaLink.id
       ],
       folderView: {
         name: 'resource-tiles',

packages/web-app-files/src/extensionPoints.ts

@@ -64,6 +64,11 @@ export const folderViewsTrashOverviewExtensionPoint: ExtensionPoint<FolderViewEx
   extensionType: 'folderView'
 }
 
+export const folderViewsSharedViaLink: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.shared-via-link',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [
@@ -77,7 +82,9 @@ export const extensionPoints = () => {
       folderViewsFolderExtensionPoint,
       folderViewsFavoritesExtensionPoint,
       folderViewsProjectSpacesExtensionPoint,
-      folderViewsTrashExtensionPoint
+      folderViewsTrashExtensionPoint,
+      folderViewsTrashOverviewExtensionPoint,
+      folderViewsSharedViaLink
     ]
   })
 }

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper>
-      <app-bar :is-side-bar-open="isSideBarOpen">
+      <app-bar ref="appBarRef" :is-side-bar-open="isSideBarOpen" :view-modes="viewModes">
         <template #navigation>
           <SharesNavigation />
         </template>
@@ -13,7 +13,8 @@
             <span v-text="$gettext('You have not shared any resource via link.')" />
           </template>
         </no-content-message>
-        <resource-table
+        <component
+          :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
@@ -23,6 +24,10 @@
           :header-position="fileListHeaderY"
           :sort-by="sortBy"
           :sort-dir="sortDir"
+          :sort-fields="sortFields.filter((field) => field.name === 'name')"
+          :view-mode="viewMode"
+          :view-size="viewSize"
+          :style="folderViewStyle"
           @file-click="triggerDefaultAction"
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
           @sort="handleSort"
@@ -37,7 +42,7 @@
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <list-info v-if="paginatedResources.length > 0" class="w-full my-2" />
           </template>
-        </resource-table>
+        </component>
       </template>
     </files-view-wrapper>
     <file-side-bar
@@ -52,6 +57,7 @@
 import {
   FileSideBar,
   useConfigStore,
+  useExtensionRegistry,
   useFileActions,
   useLoadPreview,
   useResourcesStore
@@ -66,12 +72,13 @@ import { ResourceTable } from '@opencloud-eu/web-pkg'
 import { Pagination } from '@opencloud-eu/web-pkg'
 
 import { useResourcesViewDefaults } from '../../composables'
-import { defineComponent, unref } from 'vue'
+import { ComponentPublicInstance, computed, defineComponent, unref, useTemplateRef } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
 import SharesNavigation from '../../../src/components/AppBar/SharesNavigation.vue'
 import { storeToRefs } from 'pinia'
 import { OutgoingShareResource } from '@opencloud-eu/web-client'
+import { folderViewsSharedViaLink } from '../../extensionPoints'
 
 export default defineComponent({
   components: {
@@ -95,10 +102,34 @@ export default defineComponent({
     const resourcesStore = useResourcesStore()
     const { totalResourcesCount } = storeToRefs(resourcesStore)
 
+    const resourcesViewDefaults = useResourcesViewDefaults<OutgoingShareResource, any, any[]>()
     const { loadResourcesTask, selectedResourcesIds, paginatedResources, viewMode } =
-      useResourcesViewDefaults<OutgoingShareResource, any, any[]>()
+      resourcesViewDefaults
+
     const { loadPreview } = useLoadPreview(viewMode)
 
+    const extensionRegistry = useExtensionRegistry()
+
+    const folderView = computed(() => {
+      const viewMode = unref(resourcesViewDefaults.viewMode)
+      return unref(viewModes).find((v) => v.name === viewMode)
+    })
+
+    const viewModes = computed(() => {
+      return [
+        ...extensionRegistry.requestExtensions(folderViewsSharedViaLink).map((e) => e.folderView)
+      ]
+    })
+
+    const appBarRef = useTemplateRef<ComponentPublicInstance<typeof AppBar>>('appBarRef')
+    const folderViewStyle = computed(() => {
+      return {
+        ...(unref(folderView)?.isScrollable === false && {
+          height: `calc(100% - ${unref(appBarRef)?.$el.getBoundingClientRect().height}px)`
+        })
+      }
+    })
+
     resourcesStore.$onAction((action) => {
       if (action.name !== 'updateResourceField') {
         return
@@ -126,7 +157,11 @@ export default defineComponent({
       configOptions,
       getMatchingSpace,
       totalResourcesCount,
-      loadPreview
+      loadPreview,
+      folderView,
+      folderViewStyle,
+      viewModes,
+      appBarRef
     }
   },
 

packages/web-app-files/tests/unit/views/shares/SharedViaLink.spec.ts

@@ -11,7 +11,14 @@ import {
   defaultStubs,
   RouteLocation
 } from '@opencloud-eu/web-test-helpers'
-import { ResourceTable } from '@opencloud-eu/web-pkg'
+import { ResourceTable, useExtensionRegistry, FolderViewExtension } from '@opencloud-eu/web-pkg'
+import {
+  folderViewsFavoritesExtensionPoint,
+  folderViewsFolderExtensionPoint,
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsSharedViaLink,
+  folderViewsTrashOverviewExtensionPoint
+} from '../../../../src/extensionPoints'
 
 vi.mock('../../../../src/composables')
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
@@ -54,25 +61,57 @@ function getMountedWrapper({
   mocks = {},
   files = [],
   loading = false
-}: { mocks?: Record<string, unknown>; files?: OutgoingShareResource[]; loading?: boolean } = {}) {
-  vi.mocked(useResourcesViewDefaults).mockImplementation(() =>
-    useResourcesViewDefaultsMock({
-      paginatedResources: ref(files),
-      areResourcesLoading: ref(loading)
-    })
-  )
+}: {
+  mocks?: Record<string, unknown>
+  files?: OutgoingShareResource[]
+  loading?: boolean
+} = {}) {
+  const plugins = [...defaultPlugins()]
+
   const defaultMocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'files-shares-via-link' })
     }),
     ...(mocks && mocks)
   }
 
+  vi.mocked(useResourcesViewDefaults).mockImplementation(() =>
+    useResourcesViewDefaultsMock({
+      paginatedResources: ref(files),
+      areResourcesLoading: ref(loading)
+    })
+  )
+
+  const extensions = [
+    {
+      id: 'com.github.opencloud-eu.web.files.folder-view.resource-table',
+      type: 'folderView',
+      extensionPointIds: [
+        folderViewsFolderExtensionPoint.id,
+        folderViewsProjectSpacesExtensionPoint.id,
+        folderViewsFavoritesExtensionPoint.id,
+        folderViewsTrashOverviewExtensionPoint.id,
+        folderViewsSharedViaLink.id
+      ],
+      folderView: {
+        name: 'resource-table',
+        label: 'Switch to default view',
+        icon: {
+          name: 'menu-line',
+          fillType: 'none'
+        },
+        component: ResourceTable
+      }
+    }
+  ] satisfies FolderViewExtension[]
+  const { requestExtensions } = useExtensionRegistry()
+  vi.mocked(requestExtensions).mockReturnValue(extensions)
+
   return {
     mocks: defaultMocks,
     wrapper: mount(SharedViaLink, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: defaultStubs