WIP fix share routing

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -249,6 +249,15 @@ export default defineComponent({
       required: false,
       default: null
     },
+    /**
+     * Mapping with template `<resource.field>:<targetRoute.param>` which maps a field of a resource to a param of the target route.
+     * Defaults to `storageId:storageId` to map the `storageId` field of a resource to the `storageId` param of the target route.
+     */
+    targetRouteParamMapper: {
+      type: String,
+      required: false,
+      default: 'storageId:storageId'
+    },
     /**
      * Asserts whether clicking on the resource name triggers any action
      */
@@ -532,23 +541,27 @@ export default defineComponent({
       this.openWithPanel('sharing-item')
     },
     folderLink(file) {
-      return this.createFolderLink(file.path, file.storageId)
+      return this.createFolderLink(file.path, file)
     },
     parentFolderLink(file) {
-      return this.createFolderLink(path.dirname(file.path), file.storageId)
+      return this.createFolderLink(path.dirname(file.path), file)
     },
-    createFolderLink(path, storageId) {
+    createFolderLink(path, file) {
       if (this.targetRoute === null) {
         return {}
       }
+      const params = {
+        item: path.replace(/^\//, ''),
+        ...this.targetRoute.params
+      }
+      const [fileKey, routeParamKey] = this.targetRouteParamMapper.split(':')
+      if (file[fileKey]) {
+        params[routeParamKey] = file[fileKey]
+      }
       return {
         name: this.targetRoute.name,
         query: this.targetRoute.query,
-        params: {
-          item: path.replace(/^\//, ''),
-          ...this.targetRoute.params,
-          ...(storageId && { storageId })
-        }
+        params
       }
     },
     fileDragged(file) {

packages/web-app-files/src/router/spaces.ts

@@ -64,7 +64,9 @@ export const buildRoutes = (components: RouteComponents): RouteConfig[] => [
         }
       },
       {
-        path: 'shares/:item*',
+        // FIXME: this is cheating. We rely on shares having a drive alias of `shares/<shareName>` and hardcode it here until we have dynamic routes with drive aliases.
+        path: 'shares/:shareName?',
+        // path: 'shares/:shareName?/:item*',
         name: locationSpacesShare.name,
         component: components.SharedResource,
         meta: {

packages/web-app-files/src/services/folder/loaderSharedWithMe.ts

@@ -1,7 +1,7 @@
 import { FolderLoader, FolderLoaderTask, TaskContext } from '../folder'
 import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
-import { aggregateResourceShares } from '../../helpers/resources'
+import { aggregateResourceShares, buildWebDavSpacesPath } from '../../helpers/resources'
 import { isLocationSharesActive } from '../../router'
 import { Store } from 'vuex'
 import get from 'lodash-es/get'
@@ -47,13 +47,12 @@ export class FolderLoaderSharedWithMe implements FolderLoader {
           getToken
         )
 
-        // FIXME, HACK 1: `/Shares` path prefix needs to be removed backend side. We remove it client side in the meantime.
-        // FIXME, HACK 2: webDavPath points to `files/<user>/Shares/xyz` but now needs to point to a shares webDavPath according to the storageId of the share. meh.
+        // FIXME, HACK 1: path needs to be empty because the share has it's own webdav endpoint (we access it's root and thus don't need any relative path). should ideally be removed backend side.
+        // FIXME, HACK 2: webDavPath points to `files/<user>/Shares/xyz` but now needs to point to a shares webdav root.
         if (get(store, 'getters.capabilities.spaces.enabled', false)) {
           resources.forEach((resource) => {
-            if (resource.path.startsWith('/Shares')) {
-              resource.path = resource.path.substring('/Shares'.length)
-            }
+            resource.path = ''
+            resource.webDavPath = buildWebDavSpacesPath(resource.storageId, '')
           })
         }
       }

packages/web-app-files/src/services/folder/spaces/loaderPersonal.ts

@@ -2,11 +2,7 @@ import { FolderLoader, FolderLoaderTask, TaskContext } from '../../folder'
 import Router from 'vue-router'
 import { useTask } from 'vue-concurrency'
 import { DavProperties } from 'web-pkg/src/constants'
-import {
-  buildResource,
-  buildWebDavFilesPath,
-  buildWebDavSpacesPath
-} from '../../../helpers/resources'
+import { buildResource, buildWebDavSpacesPath } from '../../../helpers/resources'
 import { isLocationSpacesActive } from '../../../router'
 import { Store } from 'vuex'
 import { fetchResources } from '../util'

packages/web-app-files/src/services/folder/spaces/loaderShare.ts

@@ -16,15 +16,22 @@ export class FolderLoaderSpacesShare implements FolderLoader {
   }
 
   public getTask(context: TaskContext): FolderLoaderTask {
-    const {
-      store,
-      clientService: { owncloudSdk: client }
-    } = context
+    const { store, clientService } = context
+    const graphClient = clientService.graphAuthenticated(
+      store.getters.configuration.server,
+      store.getters.getToken
+    )
 
-    return useTask(function* (signal1, signal2, ref, storageId, path = null) {
+    return useTask(function* (signal1, signal2, ref, shareName, path = null) {
       store.commit('Files/CLEAR_CURRENT_FILES_LIST')
 
-      const webDavResponse = yield client.files.list(buildWebDavSpacesPath(storageId, path || ''))
+      const drives = yield graphClient.drives.listMyDrives('', `name eq '${shareName}'`)
+      console.log(drives.data.value)
+
+      const webDavResponse = yield clientService.owncloudSdk.files.list(
+        buildWebDavSpacesPath(shareName, path || '')
+      )
+      console.log(webDavResponse)
 
       const resources = webDavResponse.map(buildResource)
       const currentFolder = resources.shift()

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <list-loader v-if="loadResourcesTask.isRunning" />
+    <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <not-found-message v-if="folderNotFound" class="files-not-found oc-height-1-1" />
       <no-content-message
@@ -72,8 +72,8 @@ import MixinMountSideBar from '../../mixins/sidebar/mountSideBar'
 // components
 import ResourceTable from '../../components/FilesList/ResourceTable.vue'
 import QuickActions from '../../components/FilesList/QuickActions.vue'
-import ListLoader from '../../components/FilesList/ListLoader.vue'
-import NoContentMessage from '../../components/FilesList/NoContentMessage.vue'
+import AppLoadingSpinner from 'web-pkg/src/components/AppLoadingSpinner.vue'
+import NoContentMessage from 'web-pkg/src/components/NoContentMessage.vue'
 import NotFoundMessage from '../../components/FilesList/NotFoundMessage.vue'
 import ListInfo from '../../components/FilesList/ListInfo.vue'
 import Pagination from '../../components/FilesList/Pagination.vue'
@@ -96,7 +96,7 @@ export default {
   components: {
     ResourceTable,
     QuickActions,
-    ListLoader,
+    AppLoadingSpinner,
     NoContentMessage,
     NotFoundMessage,
     ListInfo,
@@ -152,23 +152,23 @@ export default {
       return !this.configuration.options.disablePreviews
     },
 
-    storageId() {
-      return this.$route.params.storageId
+    shareName() {
+      return this.$route.params.shareName
     }
   },
 
   watch: {
     $route: {
       handler: function () {
-        this.loadResourcesTask.perform(this, this.storageId)
+        this.loadResourcesTask.perform(this, this.shareName)
       },
       immediate: true
     }
   },
 
   mounted() {
     const loadResourcesEventToken = bus.subscribe('app.files.list.load', (path) => {
-      this.loadResourcesTask.perform(this, this.storageId, path)
+      this.loadResourcesTask.perform(this, this.shareName, path)
     })
 
     this.$on('beforeDestroy', () => bus.unsubscribe('app.files.list.load', loadResourcesEventToken))

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

@@ -113,6 +113,7 @@
         :resources="sharesItems"
         :are-resources-clickable="showsAcceptedShares"
         :target-route="resourceTargetLocation"
+        target-route-param-mapper="name:shareName"
         :header-position="fileListHeaderY"
         :sort-by="sharesSortBy"
         :sort-dir="sharesSortDir"