refactor: move getIndicators to a composable

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -138,8 +138,8 @@ import {
   formatDateFromJSDate,
   useResourceContents,
   useLoadPreview,
-  useInterceptModifierClick,
-  useSideBar
+  useSideBar,
+  useResourceIndicators
 } from '@opencloud-eu/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
 import {
@@ -149,7 +149,6 @@ import {
   ShareTypes
 } from '@opencloud-eu/web-client'
 import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
-import { getIndicators } from '@opencloud-eu/web-pkg'
 import { formatFileSize, formatRelativeDateFromJSDate } from '@opencloud-eu/web-pkg'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
@@ -172,13 +171,13 @@ const { getMatchingSpace } = useGetMatchingSpace()
 const { resourceContentsText } = useResourceContents({ showSizeInformation: false })
 const { loadPreview, previewsLoading } = useLoadPreview()
 const { openSideBarPanel } = useSideBar()
+const { getIndicators } = useResourceIndicators()
 
 const language = useGettext()
 const { $gettext, current: currentLanguage } = language
 
 const resourcesStore = useResourcesStore()
 const { ancestorMetaData, currentFolder } = storeToRefs(resourcesStore)
-const { interceptModifierClick } = useInterceptModifierClick()
 const { user } = storeToRefs(userStore)
 
 const resource = inject<Ref<Resource>>('resource')
@@ -234,10 +233,7 @@ const hasDeletionDate = computed(() => {
 const shareIndicators = computed(() => {
   return getIndicators({
     space: unref(space),
-    resource: unref(resource),
-    ancestorMetaData: unref(ancestorMetaData),
-    user: unref(user),
-    interceptModifierClick
+    resource: unref(resource)
   }).filter(({ category }) => category === 'sharing')
 })
 

packages/web-app-files/tests/unit/components/FilesList/ResourceDetails.spec.ts

@@ -12,7 +12,6 @@ import { ref } from 'vue'
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
-  getIndicators: vi.fn(() => []),
   useRouteQuery: vi.fn(),
   useOpenWithDefaultApp: vi.fn()
 }))

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

@@ -9,11 +9,9 @@
 
 <script setup lang="ts">
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { getIndicators, ResourceIndicator } from '../../helpers'
 import { computed, useAttrs } from 'vue'
-import { useResourcesStore, useUserStore } from '../../composables/piniaStores'
 import { OcStatusIndicators } from '@opencloud-eu/design-system/components'
-import { useInterceptModifierClick } from '../../composables/keyboardActions'
+import { ResourceIndicator, useResourceIndicators } from '../../composables'
 
 const attrs = useAttrs() as (typeof OcStatusIndicators)['props']
 const {
@@ -26,19 +24,10 @@ const {
   filter?: (indicator: ResourceIndicator) => boolean
 }>()
 
-const userStore = useUserStore()
-const resourcesStore = useResourcesStore()
-const { interceptModifierClick } = useInterceptModifierClick()
+const { getIndicators } = useResourceIndicators()
 
 const indicators = computed(() => {
-  const list = getIndicators({
-    space,
-    resource,
-    ancestorMetaData: resourcesStore.ancestorMetaData,
-    user: userStore.user,
-    interceptModifierClick
-  })
-
+  const list = getIndicators({ space, resource })
   if (filter) {
     return list.filter(filter)
   }

packages/web-pkg/src/composables/piniaStores/sideBar.ts

@@ -5,7 +5,7 @@ import { useLocalStorage } from '../localStorage'
 import { useEmbedMode } from '../embedMode'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
-/** @deprecated use exposed methods from the useSideBar instead */
+/** @deprecated use exposed methods from useSideBar instead */
 export enum SideBarEventTopics {
   open = 'sidebar.open',
   close = 'sidebar.close',

packages/web-pkg/src/composables/resources/index.ts

@@ -3,6 +3,7 @@ export * from './useCanListVersions'
 export * from './useGetResourceContext'
 export * from './useLoadPreview'
 export * from './useResourceContents'
+export * from './useResourceIndicators'
 export * from './useResourceViewContextMenu'
 export * from './useResourceViewDrag'
 export * from './useResourceViewHelpers'

packages/web-pkg/src/composables/resources/useResourceIndicators.ts

@@ -0,0 +1,246 @@
+import { useGettext } from 'vue3-gettext'
+import {
+  IncomingShareResource,
+  isIncomingShareResource,
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  Resource,
+  ShareTypes,
+  SpaceResource
+} from '@opencloud-eu/web-client'
+import { useInterceptModifierClick } from '../keyboardActions'
+import { useResourcesStore, useSideBar, useUserStore } from '../piniaStores'
+import { IconFillType } from '../../helpers'
+
+export type ResourceIndicatorCategory = 'system' | 'sharing' | 'space'
+
+export interface ResourceIndicator {
+  id: string
+  accessibleDescription: string
+  label: string
+  icon: string
+  fillType: IconFillType
+  type: string
+  category: ResourceIndicatorCategory
+  handler?: (resource: Resource, event?: MouseEvent) => void
+}
+
+export const useResourceIndicators = () => {
+  const { $gettext } = useGettext()
+  const { interceptModifierClick } = useInterceptModifierClick()
+  const { openSideBarPanel } = useSideBar()
+  const resourcesStore = useResourcesStore()
+  const userStore = useUserStore()
+
+  const isUserShare = (shareTypes: number[]) => {
+    return ShareTypes.containsAnyValue(ShareTypes.authenticated, shareTypes ?? [])
+  }
+
+  const isLinkShare = (shareTypes: number[]) => {
+    return ShareTypes.containsAnyValue(ShareTypes.unauthenticated, shareTypes ?? [])
+  }
+
+  const shareUserIconDescribedBy = ({ isDirect }: { isDirect: boolean }) => {
+    return isDirect
+      ? $gettext('This item is directly shared with others.')
+      : $gettext('This item is shared with others through one of the parent folders.')
+  }
+
+  const shareLinkDescribedBy = ({ isDirect }: { isDirect: boolean }) => {
+    return isDirect
+      ? $gettext('This item is directly shared via links.')
+      : $gettext('This item is shared via links through one of the parent folders.')
+  }
+
+  const getUserIndicator = ({
+    resource,
+    isDirect
+  }: {
+    resource: Resource
+    isDirect: boolean
+  }): ResourceIndicator => {
+    return {
+      id: `files-sharing-${resource.getDomSelector()}`,
+      accessibleDescription: shareUserIconDescribedBy({ isDirect }),
+      label: $gettext('Show invited people'),
+      icon: 'group',
+      category: 'sharing',
+      type: isDirect ? 'user-direct' : 'user-indirect',
+      fillType: 'line',
+      handler: (resource: Resource, event?: MouseEvent) => {
+        if (event && interceptModifierClick(event, resource)) {
+          return
+        }
+
+        openSideBarPanel('sharing')
+      }
+    }
+  }
+
+  const getSyncedIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    return {
+      id: `files-sharing-synced-${resource.getDomSelector()}`,
+      accessibleDescription: $gettext('This item is synced with your devices'),
+      label: $gettext('Synced with your devices'),
+      icon: 'loop-right',
+      category: 'sharing',
+      type: 'resource-synced',
+      fillType: 'line'
+    }
+  }
+
+  const getRoleIndicator = ({
+    resource
+  }: {
+    resource: IncomingShareResource
+  }): ResourceIndicator => {
+    if (resource.shareRoles?.length) {
+      return {
+        id: `files-sharing-role-${resource.getDomSelector()}`,
+        accessibleDescription: $gettext(resource.shareRoles[0].description),
+        label: $gettext(resource.shareRoles[0].displayName),
+        icon: resource.shareRoles[0].icon,
+        category: 'sharing',
+        type: 'share-role',
+        fillType: 'line'
+      }
+    }
+
+    return {
+      id: `files-sharing-role-${resource.getDomSelector()}`,
+      accessibleDescription: ShareTypes.remote.label,
+      label: ShareTypes.remote.label,
+      icon: ShareTypes.remote.icon,
+      category: 'sharing',
+      type: 'share-role',
+      fillType: 'line'
+    }
+  }
+
+  const getLinkIndicator = ({
+    resource,
+    isDirect
+  }: {
+    resource: Resource
+    isDirect: boolean
+  }): ResourceIndicator => {
+    return {
+      id: `file-link-${resource.getDomSelector()}`,
+      accessibleDescription: shareLinkDescribedBy({ isDirect }),
+      label: $gettext('Show links'),
+      icon: 'link',
+      category: 'sharing',
+      type: isDirect ? 'link-direct' : 'link-indirect',
+      fillType: 'line',
+      handler: () => openSideBarPanel('sharing')
+    }
+  }
+
+  const getLockedIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    return {
+      id: `resource-locked-${resource.getDomSelector()}`,
+      accessibleDescription: $gettext('Item locked'),
+      label: $gettext('This item is locked'),
+      icon: 'lock',
+      category: 'system',
+      type: 'resource-locked',
+      fillType: 'line'
+    }
+  }
+
+  const getProcessingIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    return {
+      id: `resource-processing-${resource.getDomSelector()}`,
+      accessibleDescription: $gettext('Item in processing'),
+      label: $gettext('This item is in processing'),
+      icon: 'loop-right',
+      category: 'system',
+      type: 'resource-processing',
+      fillType: 'line'
+    }
+  }
+
+  const getSpaceEnabledIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    return {
+      id: `resource-space-enabled-${resource.getDomSelector()}`,
+      accessibleDescription: $gettext('Space is enabled'),
+      label: $gettext('This space is enabled'),
+      icon: 'play-circle',
+      category: 'space',
+      type: 'resource-space-enabled',
+      fillType: 'line'
+    }
+  }
+
+  const getSpaceDisabledIndicator = ({ resource }: { resource: Resource }): ResourceIndicator => {
+    return {
+      id: `resource-space-disabled-${resource.getDomSelector()}`,
+      accessibleDescription: $gettext('Space is disabled'),
+      label: $gettext('This space is disabled'),
+      icon: 'stop-circle',
+      category: 'space',
+      type: 'resource-space-disabled',
+      fillType: 'line'
+    }
+  }
+
+  const getIndicators = ({
+    space,
+    resource
+  }: {
+    space: SpaceResource
+    resource: Resource
+  }): ResourceIndicator[] => {
+    const indicators: ResourceIndicator[] = []
+
+    if (resource.locked) {
+      indicators.push(getLockedIndicator({ resource }))
+    }
+
+    if (resource.processing) {
+      indicators.push(getProcessingIndicator({ resource }))
+    }
+
+    if (isProjectSpaceResource(resource) && !resource.disabled) {
+      indicators.push(getSpaceEnabledIndicator({ resource }))
+    }
+
+    if (isProjectSpaceResource(resource) && resource.disabled) {
+      indicators.push(getSpaceDisabledIndicator({ resource }))
+    }
+
+    if (
+      isIncomingShareResource(resource) &&
+      (resource.shareTypes.includes(ShareTypes.remote.value) || resource.shareRoles?.length)
+    ) {
+      indicators.push(getRoleIndicator({ resource }))
+    }
+
+    if (isIncomingShareResource(resource) && resource.syncEnabled) {
+      indicators.push(getSyncedIndicator({ resource }))
+    }
+
+    const shareIndicatorsAllowed =
+      isProjectSpaceResource(space) ||
+      (isPersonalSpaceResource(space) && space.isOwner(userStore.user))
+
+    if (shareIndicatorsAllowed) {
+      const ancestors = Object.values(resourcesStore.ancestorMetaData)
+      const parentShareTypes = ancestors.flatMap(({ shareTypes }) => shareTypes)
+
+      const isDirectUserShare = isUserShare(resource.shareTypes)
+      if (isDirectUserShare || isUserShare(parentShareTypes)) {
+        indicators.push(getUserIndicator({ resource, isDirect: isDirectUserShare }))
+      }
+
+      const isDirectLinkShare = isLinkShare(resource.shareTypes)
+      if (isDirectLinkShare || isLinkShare(parentShareTypes)) {
+        indicators.push(getLinkIndicator({ resource, isDirect: isDirectLinkShare }))
+      }
+    }
+
+    return indicators
+  }
+
+  return { getIndicators }
+}