Feat: Add additional locking information

changelog/unreleased/enhancement-display-lock-information

@@ -3,4 +3,5 @@ Enhancement: Display locking information
 We've added indicators and information in case a file is locked.
 
 https://github.com/owncloud/web/pull/9566
+https://github.com/owncloud/web/pull/9658
 https://github.com/owncloud/web/issues/6682

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

@@ -45,6 +45,12 @@
             <span v-else v-text="capitalizedTimestamp" />
           </td>
         </tr>
+        <tr v-if="resource.locked" data-testid="locked-by">
+          <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Locked by')" />
+          <td>
+            <span>{{ resource.lockOwnerName }} ({{ formatDateRelative(resource.lockTime) }})</span>
+          </td>
+        </tr>
         <tr v-if="showSharedVia" data-testid="shared-via">
           <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Shared via')" />
           <td>
@@ -204,7 +210,11 @@ import {
 import { getIndicators } from '../../../helpers/statusIndicators'
 import { useClipboard } from '@vueuse/core'
 import { encodePath } from 'web-pkg/src/utils'
-import { formatDateFromHTTP, formatFileSize } from 'web-pkg/src/helpers'
+import {
+  formatDateFromHTTP,
+  formatFileSize,
+  formatRelativeDateFromJSDate
+} from 'web-pkg/src/helpers'
 import { eventBus } from 'web-pkg/src/services/eventBus'
 import { SideBarEventTopics } from 'web-pkg/src/composables/sideBar'
 import { Resource, SpaceResource } from 'web-client'
@@ -218,6 +228,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const { $gettext } = useGettext()
+    const language = useGettext()
     const client = useClientService()
 
     const copiedDirect = ref(false)
@@ -326,6 +337,9 @@ export default defineComponent({
           ShareTypes.containsAnyValue(ShareTypes.authenticated, a.shareTypes)
       )
     })
+    const formatDateRelative = (date) => {
+      return formatRelativeDateFromJSDate(new Date(date), language.current)
+    }
 
     watch(
       resource,
@@ -355,7 +369,8 @@ export default defineComponent({
       hasTags: useCapabilityFilesTags(),
       isPreviewLoading,
       ancestorMetaData,
-      sharedAncestor
+      sharedAncestor,
+      formatDateRelative
     }
   },
   computed: {

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

@@ -44,6 +44,7 @@ exports[`ResourceDetails component renders resource details correctly 1`] = `
             <!--v-if-->
             <!--v-if-->
             <!--v-if-->
+            <!--v-if-->
             <tr>
               <th class="oc-pr-s oc-font-semibold" scope="col">Size</th>
               <td>24 kB</td>

packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts

@@ -17,7 +17,8 @@ const getResourceMock = ({
   thumbnail = null,
   shareTypes = [],
   share = null,
-  path = '/somePath/someResource'
+  path = '/somePath/someResource',
+  locked = false
 } = {}) =>
   mock<Resource>({
     id: '1',
@@ -33,7 +34,8 @@ const getResourceMock = ({
     path,
     thumbnail,
     shareTypes,
-    share
+    share,
+    locked
   })
 
 const selectors = {
@@ -43,6 +45,7 @@ const selectors = {
   ownerDisplayName: '[data-testid="ownerDisplayName"]',
   preview: '[data-testid="preview"]',
   resourceIcon: '.details-icon',
+  lockedBy: '[data-testid="locked-by"]',
   sharedBy: '[data-testid="shared-by"]',
   sharedVia: '[data-testid="shared-via"]',
   sharingInfo: '[data-testid="sharingInfo"]',
@@ -94,6 +97,13 @@ describe('Details SideBar Panel', () => {
       expect(wrapper.find(selectors.timestamp).exists()).toBeTruthy()
     })
   })
+  describe('locked by', () => {
+    it('shows if the resource is locked', () => {
+      const resource = getResourceMock({ locked: true })
+      const { wrapper } = createWrapper({ resource })
+      expect(wrapper.find(selectors.lockedBy).exists()).toBeTruthy()
+    })
+  })
   describe('shared via', () => {
     it('shows if the resource has an indirect share', () => {
       const resource = getResourceMock()

packages/web-client/src/helpers/resource/functions.ts

@@ -87,9 +87,11 @@ export function buildResource(resource): Resource {
   }
 
   const lock = resource.fileInfo[DavProperty.LockDiscovery]
-  let activeLock
+  let activeLock, lockOwnerName, lockTime
   if (lock) {
     activeLock = lock[DavProperty.ActiveLock]
+    lockOwnerName = activeLock[DavProperty.LockOwnerName]
+    lockTime = activeLock[DavProperty.LockTime]
   }
   const id = resource.fileInfo[DavProperty.FileId]
   const r = {
@@ -105,7 +107,8 @@ export function buildResource(resource): Resource {
     type: isFolder ? 'folder' : resource.type,
     isFolder,
     locked: activeLock ? true : false,
-    lockOwner: activeLock ? activeLock[DavProperty.LockOwner] : '',
+    lockOwnerName,
+    lockTime,
     processing: resource.processing || false,
     mdate: resource.fileInfo[DavProperty.LastModifiedDate],
     size: isFolder

packages/web-client/src/helpers/resource/types.ts

@@ -52,7 +52,8 @@ export interface Resource {
   status?: number
   processing?: boolean
   locked?: boolean
-  lockOwner?: string
+  lockOwnerName?: string
+  lockTime?: string
   spaceRoles?: {
     [k: string]: SpaceRole[]
   }

packages/web-client/src/webdav/constants/dav.ts

@@ -28,7 +28,8 @@ export abstract class DavProperty {
   static readonly MimeType: string = '{DAV:}getcontenttype'
   static readonly ResourceType: string = '{DAV:}resourcetype'
   static readonly LockDiscovery: string = '{DAV:}lockdiscovery'
-  static readonly LockOwner: string = '{DAV:}owner'
+  static readonly LockOwnerName: string = '{http://owncloud.org/ns}ownername'
+  static readonly LockTime: string = '{http://owncloud.org/ns}locktime'
   static readonly ActiveLock: string = '{DAV:}activelock'
   static readonly DownloadURL: string = '{http://owncloud.org/ns}downloadURL'
   static readonly Highlights: string = '{http://owncloud.org/ns}highlights'
@@ -63,7 +64,6 @@ export abstract class DavProperties {
     DavProperty.Name,
     DavProperty.LockDiscovery,
     DavProperty.ActiveLock,
-    DavProperty.LockOwner,
     DavProperty.OwnerId,
     DavProperty.OwnerDisplayName,
     DavProperty.ShareId,