From 527ec1e57d0dbc2f90bff6fe0a30728bdb21c77c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Thu, 19 Oct 2023 10:31:01 +0200
Subject: [PATCH] make use of useFolerLink in ResourceTable

---
 .../components/FilesList/ResourceTable.vue    | 123 +++++-------------
 .../filesList/useResourceRouteResolver.ts     |   7 +-
 .../composables/folderLink/useFolderLink.ts   |  69 ++++++++--
 3 files changed, 97 insertions(+), 102 deletions(-)

diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 473b1ef3855..1714d298cca 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -66,10 +66,10 @@
           :is-icon-displayed="!$slots['image']"
           :is-extension-displayed="areFileExtensionsShown"
           :is-resource-clickable="isResourceClickable(item.id)"
-          :folder-link="folderLink(item)"
-          :parent-folder-link="parentFolderLink(item)"
+          :folder-link="getFolderLink(item)"
+          :parent-folder-link="getParentFolderLink(item)"
           :parent-folder-link-icon-additional-attributes="
-            parentFolderLinkIconAdditionalAttributes(item)
+            getParentFolderLinkIconAdditionalAttributes(item)
           "
           :class="{ 'resource-table-resource-cut': isResourceCut(item) }"
           @click="emitFileClick(item)"
@@ -211,17 +211,9 @@
 <script lang="ts">
 import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
-import { dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
 import { Resource } from '@ownclouders/web-client'
-import {
-  extractDomSelector,
-  extractParentFolderName,
-  isProjectSpaceResource,
-  isShareRoot,
-  isShareSpaceResource,
-  SpaceResource
-} from '@ownclouders/web-client/src/helpers'
+import { extractDomSelector, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { ShareTypes } from '@ownclouders/web-client/src/helpers/share'
 
 import {
@@ -233,7 +225,8 @@ import {
   useUserContext,
   ViewModeConstants,
   useConfigurationManager,
-  useGetMatchingSpace
+  useGetMatchingSpace,
+  useFolderLink
 } from '../../composables'
 import { EVENT_TROW_MOUNTED, EVENT_FILE_DROPPED, ImageDimension } from '../../constants'
 import { eventBus } from '../../services'
@@ -250,7 +243,7 @@ import { useResourceRouteResolver } from '../../composables/filesList/useResourc
 import { ClipboardActions } from '../../helpers/clipboardActions'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { useFileActionsRename } from '../../composables/actions'
-import { createLocationShares, createLocationCommon, createLocationSpaces } from '../../router'
+import { createLocationCommon } from '../../router'
 import get from 'lodash-es/get'
 
 // ODS component import is necessary here for CERN to overwrite OcTable
@@ -444,6 +437,12 @@ export default defineComponent({
   setup(props, context) {
     const store = useStore()
     const configurationManager = useConfigurationManager()
+    const {
+      getFolderLink,
+      getParentFolderLink,
+      getParentFolderName,
+      getParentFolderLinkIconAdditionalAttributes
+    } = useFolderLink()
 
     const { width } = useWindowSize()
     const hasTags = computed(
@@ -486,7 +485,11 @@ export default defineComponent({
           targetRouteCallback: computed(() => props.targetRouteCallback)
         },
         context
-      )
+      ),
+      getFolderLink,
+      getParentFolderLink,
+      getParentFolderName,
+      getParentFolderLinkIconAdditionalAttributes
     }
   },
   data() {
@@ -769,47 +772,6 @@ export default defineComponent({
       }
       eventBus.publish(SideBarEventTopics.openWithPanel, panelToOpen)
     },
-    folderLink(file: Resource) {
-      return this.createFolderLink({
-        path: file.path,
-        fileId: file.fileId,
-        resource: file
-      })
-    },
-    parentFolderLink(file: Resource) {
-      const space = this.getMatchingSpace(file)
-      const parentFolderAccessible = this.isResourceAccessible({
-        space,
-        path: dirname(file.path)
-      })
-      if ((file.shareId && file.path === '/') || !parentFolderAccessible) {
-        return createLocationShares('files-shares-with-me')
-      }
-      if (isProjectSpaceResource(file)) {
-        return createLocationSpaces('files-spaces-projects')
-      }
-
-      return this.createFolderLink({
-        path: dirname(file.path),
-        ...(file.parentFolderId && { fileId: file.parentFolderId }),
-        resource: file
-      })
-    },
-    parentFolderLinkIconAdditionalAttributes(file) {
-      // Identify if resource is project space or is part of a project space and the resource is located in its root
-      if (
-        isProjectSpaceResource(file) ||
-        (isProjectSpaceResource(this.getInternalSpace(file.storageId) || ({} as Resource)) &&
-          file.path.split('/').length === 2)
-      ) {
-        return {
-          name: 'layout-grid',
-          'fill-type': 'fill'
-        }
-      }
-
-      return {}
-    },
     fileDragged(file) {
       this.addSelectedResource(file)
     },
@@ -978,39 +940,6 @@ export default defineComponent({
         resourceType,
         ownerName: resource.owner[0].displayName
       })
-    },
-    getParentFolderName(resource: Resource) {
-      const space = this.getMatchingSpace(resource)
-      const parentFolderAccessible = this.isResourceAccessible({
-        space,
-        path: dirname(resource.path)
-      })
-      if (isShareRoot(resource) || !parentFolderAccessible) {
-        return this.$gettext('Shared with me')
-      }
-      const parentFolder = extractParentFolderName(resource)
-      if (parentFolder) {
-        return parentFolder
-      }
-
-      if (isShareSpaceResource(space)) {
-        return space.name
-      }
-
-      if (this.hasProjectSpaces) {
-        if (isProjectSpaceResource(resource)) {
-          return this.$gettext('Spaces')
-        }
-        if (space?.driveType === 'project') {
-          return space.name
-        }
-      }
-
-      if (!this.hasShareJail) {
-        return this.$gettext('All files and folders')
-      }
-
-      return this.$gettext('Personal')
     }
   }
 })
@@ -1019,10 +948,12 @@ export default defineComponent({
 .oc-table.condensed > tbody > tr {
   height: 0 !important;
 }
+
 .resource-table {
   &-resource-cut {
     opacity: 0.6;
   }
+
   &-resource-wrapper {
     display: flex;
     align-items: center;
@@ -1037,21 +968,26 @@ export default defineComponent({
       }
     }
   }
+
   &-tag {
     max-width: 80px;
   }
+
   &-tag-more {
     cursor: pointer;
     border: 0 !important;
     vertical-align: text-bottom;
   }
+
   &-edit-name {
     display: inline-flex;
     margin-left: var(--oc-space-xsmall);
+
     svg {
       fill: var(--oc-color-text-muted);
     }
   }
+
   &-people {
     position: absolute;
     right: var(--oc-space-xsmall);
@@ -1266,15 +1202,18 @@ export default defineComponent({
     display: none;
   }
 }
+
 .oc-resource-icon-status-badge,
 .oc-resource-thumbnail-status-badge {
   .oc-icon {
     margin-top: -2px;
     margin-left: -1.5px;
+
     svg {
       fill: var(--oc-color-background-default) !important;
     }
   }
+
   .oc-spinner {
     margin-left: -2px;
     margin-top: -2px;
@@ -1288,26 +1227,32 @@ export default defineComponent({
     bottom: 2px !important;
   }
 }
+
 // on table row hover change the status badge background color
 .oc-tbody-tr:hover .oc-resource-icon-status-badge {
   background: var(--oc-color-background-hover) !important;
+
   .oc-icon {
     svg {
       fill: var(--oc-color-background-hover) !important;
     }
   }
+
   .oc-spinner {
     color: var(--oc-color-background-hover) !important;
   }
 }
+
 // on table row highlight change the status badge background color
 .oc-table-highlighted .oc-resource-icon-status-badge {
   background: var(--oc-color-background-highlight) !important;
+
   .oc-icon {
     svg {
       fill: var(--oc-color-background-highlight) !important;
     }
   }
+
   .oc-spinner {
     color: var(--oc-color-background-highlight) !important;
   }
diff --git a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
index 372da85122d..72acca2403e 100644
--- a/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
+++ b/packages/web-pkg/src/composables/filesList/useResourceRouteResolver.ts
@@ -1,4 +1,4 @@
-import { unref, Ref } from 'vue'
+import {unref, Ref} from 'vue'
 
 import { ConfigurationManager } from '../../configuration'
 import { useGetMatchingSpace } from '../spaces'
@@ -14,7 +14,10 @@ type ResourceRouteResolverOptions = {
   space?: Ref<SpaceResource>
 }
 
-export const useResourceRouteResolver = (options: ResourceRouteResolverOptions, context) => {
+export const useResourceRouteResolver = (
+  options: ResourceRouteResolverOptions,
+  context?: {emit: Function}
+) => {
   const configurationManager = options.configurationManager || useConfigurationManager()
   const targetRouteCallback = options.targetRouteCallback
   const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace(options)
diff --git a/packages/web-pkg/src/composables/folderLink/useFolderLink.ts b/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
index d502da087bf..573a6d0b971 100644
--- a/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
+++ b/packages/web-pkg/src/composables/folderLink/useFolderLink.ts
@@ -7,35 +7,80 @@ import {
 } from '@ownclouders/web-client/src/helpers'
 import { useGettext } from 'vue3-gettext'
 import { unref } from 'vue'
-import { useCapabilityShareJailEnabled } from '../capability'
+import { useCapabilityProjectSpacesEnabled, useCapabilityShareJailEnabled } from '../capability'
 import { useGetMatchingSpace } from '../spaces'
+import { dirname } from 'path'
+import { useResourceRouteResolver } from '../filesList'
+import { createLocationShares, createLocationSpaces } from '../../router'
+import { useConfigurationManager } from '../configuration'
 
 export const useFolderLink = () => {
   const { $gettext } = useGettext()
   const hasShareJail = useCapabilityShareJailEnabled()
-  const { getInternalSpace, getMatchingSpace } = useGetMatchingSpace()
+  const hasProjectSpaces = useCapabilityProjectSpacesEnabled()
+  const { getInternalSpace, getMatchingSpace, isResourceAccessible } = useGetMatchingSpace()
+  const configurationManager = useConfigurationManager()
+  const { createFolderLink } = useResourceRouteResolver({
+    configurationManager
+  })
+
+  const getFolderLink = (resource: Resource) => {
+    return createFolderLink({
+      path: resource.path,
+      fileId: resource.fileId,
+      resource
+    })
+  }
+
+  const getParentFolderLink = (resource: Resource) => {
+    const space = getMatchingSpace(resource)
+    const parentFolderAccessible = isResourceAccessible({
+      space,
+      path: dirname(resource.path)
+    })
+    if ((resource.shareId && resource.path === '/') || !parentFolderAccessible) {
+      return createLocationShares('files-shares-with-me')
+    }
+    if (isProjectSpaceResource(resource)) {
+      return createLocationSpaces('files-spaces-projects')
+    }
+
+    return createFolderLink({
+      path: dirname(resource.path),
+      ...(resource.parentFolderId && { fileId: resource.parentFolderId }),
+      resource
+    })
+  }
 
   const getParentFolderName = (resource: Resource) => {
-    if (isShareRoot(resource)) {
+    const space = getMatchingSpace(resource)
+    const parentFolderAccessible = isResourceAccessible({
+      space,
+      path: dirname(resource.path)
+    })
+    if (isShareRoot(resource) || !parentFolderAccessible) {
       return $gettext('Shared with me')
     }
-
     const parentFolder = extractParentFolderName(resource)
     if (parentFolder) {
       return parentFolder
     }
 
-    if (!unref(hasShareJail)) {
-      return $gettext('All files and folders')
+    if (isShareSpaceResource(space)) {
+      return space.name
     }
 
-    if (isProjectSpaceResource(resource)) {
-      return $gettext('Spaces')
+    if (unref(hasProjectSpaces)) {
+      if (isProjectSpaceResource(resource)) {
+        return $gettext('Spaces')
+      }
+      if (space?.driveType === 'project') {
+        return space.name
+      }
     }
 
-    const matchingSpace = unref(getMatchingSpace(resource))
-    if (isProjectSpaceResource(matchingSpace) || isShareSpaceResource(matchingSpace)) {
-      return matchingSpace.name
+    if (!unref(hasShareJail)) {
+      return $gettext('All files and folders')
     }
 
     return $gettext('Personal')
@@ -58,6 +103,8 @@ export const useFolderLink = () => {
   }
 
   return {
+    getFolderLink,
+    getParentFolderLink,
     getParentFolderName,
     getParentFolderLinkIconAdditionalAttributes
   }