feat: add tiles view for shared with others view

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

@@ -5,6 +5,7 @@ import {
   folderViewsFolderExtensionPoint,
   folderViewsProjectSpacesExtensionPoint,
   folderViewsSharedViaLink,
+  folderViewsSharedWithOthers,
   folderViewsTrashExtensionPoint,
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
@@ -21,7 +22,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsSharedViaLink.id
+        folderViewsSharedViaLink.id,
+        folderViewsSharedWithOthers.id
       ],
       folderView: {
         name: 'resource-table-condensed',
@@ -42,7 +44,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsSharedViaLink.id
+        folderViewsSharedViaLink.id,
+        folderViewsSharedWithOthers.id
       ],
       folderView: {
         name: 'resource-table',
@@ -63,7 +66,8 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsSharedViaLink.id
+        folderViewsSharedViaLink.id,
+        folderViewsSharedWithOthers.id
       ],
       folderView: {
         name: 'resource-tiles',

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

@@ -69,6 +69,11 @@ export const folderViewsSharedViaLink: ExtensionPoint<FolderViewExtension> = {
   extensionType: 'folderView'
 }
 
+export const folderViewsSharedWithOthers: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.shared-with-others',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [

packages/web-app-files/src/views/shares/SharedWithOthers.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>
@@ -35,7 +35,8 @@
             <span v-text="$gettext('You have not shared any resources with other people.')" />
           </template>
         </no-content-message>
-        <resource-table
+        <component
+          :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
@@ -45,6 +46,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"
           :grouping-settings="groupingSettings"
           @file-click="triggerDefaultAction"
           @item-visible="loadPreview({ space: getMatchingSpace($event), resource: $event })"
@@ -60,7 +65,7 @@
             <pagination :pages="paginationPages" :current-page="paginationPage" />
             <list-info v-if="filteredItems.length > 0" class="w-full my-2" />
           </template>
-        </resource-table>
+        </component>
       </template>
     </files-view-wrapper>
     <file-side-bar
@@ -77,6 +82,7 @@ import {
   useAppsStore,
   useCapabilityStore,
   useConfigStore,
+  useExtensionRegistry,
   useFileActions,
   useLoadPreview,
   useResourcesStore,
@@ -95,13 +101,14 @@ import { ContextActions } from '@opencloud-eu/web-pkg'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 
 import { useResourcesViewDefaults } from '../../composables'
-import { defineComponent, computed, unref } from 'vue'
+import { defineComponent, computed, unref, useTemplateRef, ComponentPublicInstance } from 'vue'
 import { useGroupingSettings } from '@opencloud-eu/web-pkg'
 import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
 import SharesNavigation from '../../components/AppBar/SharesNavigation.vue'
 import { OutgoingShareResource, ShareTypes } from '@opencloud-eu/web-client'
 import { storeToRefs } from 'pinia'
 import { useGettext } from 'vue3-gettext'
+import { folderViewsSharedWithOthers } from '../../extensionPoints'
 
 export default defineComponent({
   components: {
@@ -139,6 +146,28 @@ export default defineComponent({
     } = 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(folderViewsSharedWithOthers).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)`
+        })
+      }
+    })
+
     const shareTypes = computed(() => {
       const uniqueShareTypes = uniq(unref(paginatedResources).flatMap((i) => i.shareTypes))
 
@@ -199,6 +228,10 @@ export default defineComponent({
       shareTypes,
       getMatchingSpace,
       loadPreview,
+      folderView,
+      folderViewStyle,
+      viewModes,
+      appBarRef,
 
       // CERN
       ...useGroupingSettings({ sortBy, sortDir })

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

@@ -8,7 +8,14 @@ import { IncomingShareResource } from '@opencloud-eu/web-client'
 import { defaultPlugins, mount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
 import { ShareTypes } from '@opencloud-eu/web-client'
 import { useSortMock } from '../../../mocks/useSortMock'
-import { ResourceTable } from '@opencloud-eu/web-pkg'
+import { ResourceTable, FolderViewExtension, useExtensionRegistry } from '@opencloud-eu/web-pkg'
+import {
+  folderViewsSharedWithOthers,
+  folderViewsTrashOverviewExtensionPoint,
+  folderViewsFavoritesExtensionPoint,
+  folderViewsProjectSpacesExtensionPoint,
+  folderViewsFolderExtensionPoint
+} from '../../../../src/extensionPoints'
 
 vi.mock('../../../../src/composables')
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
@@ -81,12 +88,40 @@ function getMountedWrapper({
   files?: IncomingShareResource[]
   loading?: boolean
 } = {}) {
+  const plugins = [...defaultPlugins()]
+
   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,
+        folderViewsSharedWithOthers.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)
+
   const defaultMocks = {
     ...defaultComponentMocks({
       currentRoute: mock<RouteLocation>({ name: 'files-shares-with-others' })
@@ -98,7 +133,7 @@ function getMountedWrapper({
     mocks: defaultMocks,
     wrapper: mount(SharedWithOthers, {
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: { ...defaultStubs, ItemFilter: true }

packages/web-pkg/src/components/FilesList/ResourceTile.vue

@@ -87,6 +87,7 @@
               :is-resource-clickable="isResourceClickable"
               :is-path-displayed="isPathDisplayed"
               :parent-folder-name="getParentFolderName(resource)"
+              :parent-folder-link="getParentFolderLink(resource)"
               :link="resourceRoute"
               @click.stop="$emit('click', $event)"
             />
@@ -163,7 +164,7 @@ defineSlots<{
 
 const { toggleTile } = useToggleTile()
 const { $gettext } = useGettext()
-const { getParentFolderName } = useFolderLink()
+const { getParentFolderName, getParentFolderLink } = useFolderLink()
 
 const observerTarget = useTemplateRef<InstanceType<typeof OcCard>>('observerTarget')
 const observerTargetElement = computed<HTMLElement>(() => unref(observerTarget)?.$el)

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTile.spec.ts.snap

@@ -12,7 +12,7 @@ exports[`OcTile component > renders default space correctly 1`] = `
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
+        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfolderlink="[object Object]" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
       </div>
       <div class="flex items-center">
         <!-- Slot for indicators !-->
@@ -37,7 +37,7 @@ exports[`OcTile component > renders disabled space correctly 1`] = `
   <div class="p-2">
     <div class="flex justify-between items-center">
       <div class="flex items-center truncate resource-name-wrapper text-role-on-surface overflow-hidden">
-        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
+        <resource-list-item-stub resource="[object Object]" pathprefix="" ispathdisplayed="false" parentfolderlink="[object Object]" parentfoldername="." parentfolderlinkiconadditionalattributes="[object Object]" isextensiondisplayed="true" isthumbnaildisplayed="true" isicondisplayed="false" isresourceclickable="true"></resource-list-item-stub>
       </div>
       <div class="flex items-center">
         <!-- Slot for indicators !-->

tests/e2e/cucumber/features/user-settings/profilePhoto.feature

@@ -14,7 +14,7 @@ Feature: profile photo
 
     When "Alice" changes the profile image "testavatar.png"
     Then "Alice" should have a profile picture
-    
+
     When "Alice" deletes the profile image
     Then "Alice" should not have a profile picture
     And "Alice" logs out
@@ -35,21 +35,22 @@ Feature: profile photo
       | resource       | recipient | type | role     |
       | sharedFolder   | Brian     | user | Can edit |
       | sharedFolder   | Carol     | user | Can edit |
-    
+
     When "Alice" logs in
     Then "Alice" should see the following recipients
       | resource     | recipient | hasAvatar |
       | sharedFolder | Brian     | true     |
       | sharedFolder | Carol     | false    |
     And "Alice" should see "Brian" avatar for the resource "sharedFolder" in the activity panel
     And "Alice" navigates to the shared with others page
+    And "Alice" switches to the "table" view
     And "Alice" should see "recipient" avatar for the resource "sharedFolder"
     And "Alice" should see the following recipients
       | resource     | recipient | hasAvatar |
       | sharedFolder | Brian     | true     |
       | sharedFolder | Carol     | false    |
     And "Alice" logs out
-    
+
     When "Brian" logs in
     Then "Brian" should see sharer avatar in the notification
     And "Brian" navigates to the shared with me page