feat: add tiles view for shared with me view

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -10,7 +10,8 @@
         <span>{{ emptyMessage }}</span>
       </template>
     </no-content-message>
-    <resource-table
+    <component
+      :is="folderView.component"
       v-else
       v-model:selected-ids="selectedResourcesIds"
       :is-side-bar-open="isSideBarOpen"
@@ -21,42 +22,15 @@
       :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 })"
       @sort="sortHandler"
     >
-      <template #syncEnabled="{ resource }">
-        <div
-          :key="resource.getDomSelector()"
-          class="whitespace-nowrap flex items-center justify-end"
-        >
-          <oc-icon
-            v-if="resource.shareRoles?.length"
-            v-oc-tooltip="$gettext(resource.shareRoles[0].displayName)"
-            :accessible-label="$gettext(resource.shareRoles[0].description)"
-            :name="resource.shareRoles[0].icon"
-            fill-type="line"
-            size="small"
-          />
-          <oc-icon
-            v-else-if="isExternalShare(resource)"
-            v-oc-tooltip="ShareTypes.remote.label"
-            :accessible-label="ShareTypes.remote.label"
-            :name="ShareTypes.remote.icon"
-            fill-type="line"
-            size="small"
-          />
-          <oc-icon
-            v-if="resource.syncEnabled"
-            v-oc-tooltip="$gettext('Synced with your devices')"
-            :accessible-label="$gettext('Synced with your devices')"
-            name="loop-right"
-            class="sync-enabled ml-2"
-            size="small"
-          />
-        </div>
-      </template>
       <template #contextMenu="{ resource, isOpen }">
         <context-actions
           v-if="isOpen && isResourceInSelection(resource)"
@@ -94,12 +68,13 @@
         </div>
         <list-info v-else class="w-full my-2" />
       </template>
-    </resource-table>
+    </component>
   </div>
 </template>
 
 <script lang="ts">
 import {
+  FolderView,
   ResourceTable,
   useCapabilityStore,
   useConfigStore,
@@ -119,6 +94,7 @@ import { useSelectedResources } from '@opencloud-eu/web-pkg'
 import { RouteLocationNamedRaw } from 'vue-router'
 import { CreateTargetRouteOptions } from '@opencloud-eu/web-pkg'
 import { createFileRouteOptions } from '@opencloud-eu/web-pkg'
+import { useResourcesViewDefaults } from '../../composables'
 
 export default defineComponent({
   components: {
@@ -161,6 +137,14 @@ export default defineComponent({
       type: Function as PropType<any>,
       required: true
     },
+    folderView: {
+      required: true,
+      type: Object as PropType<FolderView>
+    },
+    folderViewStyle: {
+      type: Object,
+      default: () => {}
+    },
     showMoreToggle: {
       type: Boolean,
       default: false
@@ -181,6 +165,7 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+
     /**
      * This is only relevant for CERN and can be ignored in any other cases.
      */
@@ -194,7 +179,10 @@ export default defineComponent({
     const capabilityStore = useCapabilityStore()
     const configStore = useConfigStore()
     const { getMatchingSpace } = useGetMatchingSpace()
-    const { loadPreview } = useLoadPreview()
+
+    const { viewMode, viewSize, sortFields } = useResourcesViewDefaults()
+
+    const { loadPreview } = useLoadPreview(viewMode)
 
     const { triggerDefaultAction } = useFileActions()
     const { actions: hideShareActions } = useFileActionsToggleHideShare()
@@ -228,7 +216,10 @@ export default defineComponent({
       updateResourceField,
       isExternalShare,
       ShareTypes,
-      loadPreview
+      loadPreview,
+      viewMode,
+      viewSize,
+      sortFields
     }
   },
 
@@ -238,7 +229,7 @@ export default defineComponent({
 
   computed: {
     displayedFields() {
-      return ['name', 'syncEnabled', 'sharedBy', 'sdate', 'sharedWith']
+      return ['name', 'sharedBy', 'sdate', 'sharedWith']
     },
     toggleMoreLabel() {
       return this.showMore ? this.$gettext('Show less') : this.$gettext('Show more')

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

@@ -4,8 +4,9 @@ import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
   folderViewsProjectSpacesExtensionPoint,
-  folderViewsSharedViaLink,
-  folderViewsSharedWithOthers,
+  folderViewsSharedViaLinkExtensionPoint,
+  folderViewsSharedWithMeExtensionPoint,
+  folderViewsSharedWithOthersExtensionPoint,
   folderViewsTrashExtensionPoint,
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
@@ -22,8 +23,9 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
         folderViewsProjectSpacesExtensionPoint.id,
-        folderViewsSharedViaLink.id,
-        folderViewsSharedWithOthers.id
+        folderViewsSharedWithMeExtensionPoint.id,
+        folderViewsSharedViaLinkExtensionPoint.id,
+        folderViewsSharedWithOthersExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table-condensed',
@@ -44,8 +46,9 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsSharedViaLink.id,
-        folderViewsSharedWithOthers.id
+        folderViewsSharedWithMeExtensionPoint.id,
+        folderViewsSharedViaLinkExtensionPoint.id,
+        folderViewsSharedWithOthersExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table',
@@ -66,8 +69,9 @@ export const useFolderViews = (): FolderViewExtension[] => {
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsSharedViaLink.id,
-        folderViewsSharedWithOthers.id
+        folderViewsSharedWithMeExtensionPoint.id,
+        folderViewsSharedViaLinkExtensionPoint.id,
+        folderViewsSharedWithOthersExtensionPoint.id
       ],
       folderView: {
         name: 'resource-tiles',

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

@@ -64,16 +64,21 @@ export const folderViewsTrashOverviewExtensionPoint: ExtensionPoint<FolderViewEx
   extensionType: 'folderView'
 }
 
-export const folderViewsSharedViaLink: ExtensionPoint<FolderViewExtension> = {
+export const folderViewsSharedViaLinkExtensionPoint: ExtensionPoint<FolderViewExtension> = {
   id: 'app.files.folder-views.shared-via-link',
   extensionType: 'folderView'
 }
 
-export const folderViewsSharedWithOthers: ExtensionPoint<FolderViewExtension> = {
+export const folderViewsSharedWithOthersExtensionPoint: ExtensionPoint<FolderViewExtension> = {
   id: 'app.files.folder-views.shared-with-others',
   extensionType: 'folderView'
 }
 
+export const folderViewsSharedWithMeExtensionPoint: ExtensionPoint<FolderViewExtension> = {
+  id: 'app.files.folder-views.shared-with-me',
+  extensionType: 'folderView'
+}
+
 export const extensionPoints = () => {
   return computed<ExtensionPoint<any>[]>(() => {
     return [
@@ -89,7 +94,8 @@ export const extensionPoints = () => {
       folderViewsProjectSpacesExtensionPoint,
       folderViewsTrashExtensionPoint,
       folderViewsTrashOverviewExtensionPoint,
-      folderViewsSharedViaLink
+      folderViewsSharedViaLinkExtensionPoint,
+      folderViewsSharedWithOthersExtensionPoint
     ]
   })
 }

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

@@ -78,7 +78,7 @@ 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'
+import { folderViewsSharedViaLinkExtensionPoint } from '../../extensionPoints'
 
 export default defineComponent({
   components: {
@@ -117,7 +117,9 @@ export default defineComponent({
 
     const viewModes = computed(() => {
       return [
-        ...extensionRegistry.requestExtensions(folderViewsSharedViaLink).map((e) => e.folderView)
+        ...extensionRegistry
+          .requestExtensions(folderViewsSharedViaLinkExtensionPoint)
+          .map((e) => e.folderView)
       ]
     })
 

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

@@ -1,7 +1,12 @@
 <template>
   <div class="flex">
     <files-view-wrapper class="flex-col">
-      <app-bar :has-bulk-actions="true" :is-side-bar-open="isSideBarOpen">
+      <app-bar
+        ref="appBarRef"
+        :has-bulk-actions="true"
+        :is-side-bar-open="isSideBarOpen"
+        :view-modes="viewModes"
+      >
         <template #navigation>
           <SharesNavigation />
         </template>
@@ -73,6 +78,8 @@
           :sort-by="sortBy"
           :sort-dir="sortDir"
           :sort-handler="handleSort"
+          :folder-view="folderView"
+          :folder-view-style="folderViewStyle"
           :title="shareSectionTitle"
           :empty-message="
             areHiddenFilesShown ? $gettext('No hidden shares') : $gettext('No shares')
@@ -100,12 +107,22 @@ import {
   InlineFilterOption,
   ItemFilter,
   useAppsStore,
+  useExtensionRegistry,
   useResourcesStore
 } from '@opencloud-eu/web-pkg'
 import { AppBar, ItemFilterInline } from '@opencloud-eu/web-pkg'
 import { queryItemAsString, useRouteQuery } from '@opencloud-eu/web-pkg'
 import SharedWithMeSection from '../../components/Shares/SharedWithMeSection.vue'
-import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  onMounted,
+  ref,
+  unref,
+  useTemplateRef,
+  watch
+} from 'vue'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import { useGetMatchingSpace, useSort } from '@opencloud-eu/web-pkg'
 import { useGroupingSettings } from '@opencloud-eu/web-pkg'
@@ -114,6 +131,7 @@ import { useGettext } from 'vue3-gettext'
 import { useOpenWithDefaultApp, defaultFuseOptions } from '@opencloud-eu/web-pkg'
 import { IncomingShareResource, ShareTypes } from '@opencloud-eu/web-client'
 import { uniq } from 'lodash-es'
+import { folderViewsSharedWithMeExtensionPoint } from '../../extensionPoints'
 
 export default defineComponent({
   components: {
@@ -132,7 +150,11 @@ export default defineComponent({
     const appsStore = useAppsStore()
     const resourcesStore = useResourcesStore()
 
+    const resourcesViewDefaults = useResourcesViewDefaults<IncomingShareResource, any, any>()
+
     const {
+      viewMode,
+      viewSize,
       areResourcesLoading,
       sortFields,
       fileListHeaderY,
@@ -143,13 +165,37 @@ export default defineComponent({
       isSideBarOpen,
       paginatedResources,
       scrollToResourceFromRoute
-    } = useResourcesViewDefaults<IncomingShareResource, any, any>()
+    } = resourcesViewDefaults
 
     const { $gettext } = useGettext()
 
     const areHiddenFilesShown = ref(false)
     const filterTerm = ref('')
 
+    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(folderViewsSharedWithMeExtensionPoint)
+          .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 shareSectionTitle = computed(() => {
       return unref(areHiddenFilesShown) ? $gettext('Hidden Shares') : $gettext('Shares')
     })
@@ -295,6 +341,14 @@ export default defineComponent({
       sortDir,
       items,
 
+      appBarRef,
+      viewMode,
+      viewSize,
+      viewModes,
+      folderView,
+      folderViewStyle,
+      sortFields,
+
       // CERN
       ...useGroupingSettings({ sortBy: sortBy, sortDir: sortDir })
     }

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

@@ -108,7 +108,7 @@ 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'
+import { folderViewsSharedWithOthersExtensionPoint } from '../../extensionPoints'
 
 export default defineComponent({
   components: {
@@ -155,7 +155,9 @@ export default defineComponent({
 
     const viewModes = computed(() => {
       return [
-        ...extensionRegistry.requestExtensions(folderViewsSharedWithOthers).map((e) => e.folderView)
+        ...extensionRegistry
+          .requestExtensions(folderViewsSharedWithOthersExtensionPoint)
+          .map((e) => e.folderView)
       ]
     })
 

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

@@ -16,7 +16,7 @@ import {
   folderViewsFavoritesExtensionPoint,
   folderViewsFolderExtensionPoint,
   folderViewsProjectSpacesExtensionPoint,
-  folderViewsSharedViaLink,
+  folderViewsSharedViaLinkExtensionPoint,
   folderViewsTrashOverviewExtensionPoint
 } from '../../../../src/extensionPoints'
 
@@ -91,7 +91,7 @@ function getMountedWrapper({
         folderViewsProjectSpacesExtensionPoint.id,
         folderViewsFavoritesExtensionPoint.id,
         folderViewsTrashOverviewExtensionPoint.id,
-        folderViewsSharedViaLink.id
+        folderViewsSharedViaLinkExtensionPoint.id
       ],
       folderView: {
         name: 'resource-table',