Add sse event for move operations and add debug logs

changelog/unreleased/enhancement-add-sse-event-for-moving

@@ -0,0 +1,7 @@
+Enhancement: Add SSE event for moving
+
+We've added Server-Sent Events (SSE) for moving resources.
+When the user moves files or folders, everyone with access to them instantly sees the changes across their browsers and devices.
+
+https://github.com/owncloud/web/pull/10798
+https://github.com/owncloud/web/issues/10780

packages/web-client/src/sse/index.ts

@@ -9,6 +9,7 @@ export enum MESSAGE_TYPE {
   ITEM_RENAMED = 'item-renamed',
   ITEM_TRASHED = 'item-trashed',
   ITEM_RESTORED = 'item-restored',
+  ITEM_MOVED = 'item-moved',
   FOLDER_CREATED = 'folder-created'
 }
 

packages/web-runtime/src/container/bootstrap.ts

@@ -61,7 +61,8 @@ import {
   onSSEItemRestoredEvent,
   onSSEItemTrashedEvent,
   onSSEFolderCreatedEvent,
-  onSSEFileTouchedEvent
+  onSSEFileTouchedEvent,
+  onSSEItemMovedEvent
 } from './sse'
 
 const getEmbedConfigFromQuery = (
@@ -726,6 +727,17 @@ export const registerSSEEventListeners = ({
     })
   )
 
+  clientService.sseAuthenticated.addEventListener(MESSAGE_TYPE.ITEM_MOVED, (msg) =>
+    onSSEItemMovedEvent({
+      topic: MESSAGE_TYPE.ITEM_MOVED,
+      resourcesStore,
+      spacesStore,
+      userStore,
+      msg,
+      clientService
+    })
+  )
+
   clientService.sseAuthenticated.addEventListener(MESSAGE_TYPE.FOLDER_CREATED, (msg) =>
     onSSEFolderCreatedEvent({
       topic: MESSAGE_TYPE.FOLDER_CREATED,

packages/web-runtime/src/container/sse.ts

@@ -66,6 +66,7 @@ export const onSSEItemRenamedEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (sseData.initiatorid === clientService.initiatorId) {
       /**
@@ -124,6 +125,8 @@ export const onSSEFileLockingEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
+
     const resource = resourcesStore.resources.find((f) => f.id === sseData.itemid)
     const space = spacesStore.spaces.find((s) => s.id === resource.storageId)
 
@@ -170,6 +173,7 @@ export const onSSEProcessingFinishedEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (!itemInCurrentFolder({ resourcesStore, parentFolderId: sseData.parentitemid })) {
       return false
@@ -252,6 +256,7 @@ export const onSSEItemTrashedEvent = ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (sseData.initiatorid === clientService.initiatorId) {
       /**
@@ -302,6 +307,7 @@ export const onSSEItemRestoredEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (sseData.initiatorid === clientService.initiatorId) {
       /**
@@ -345,6 +351,67 @@ export const onSSEItemRestoredEvent = async ({
   }
 }
 
+export const onSSEItemMovedEvent = async ({
+  topic,
+  resourcesStore,
+  spacesStore,
+  userStore,
+  msg,
+  clientService
+}: {
+  topic: string
+  resourcesStore: ResourcesStore
+  spacesStore: SpacesStore
+  userStore: UserStore
+  msg: MessageEvent
+  clientService: ClientService
+}) => {
+  try {
+    const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
+
+    if (sseData.initiatorid === clientService.initiatorId) {
+      /**
+       * If the request was initiated by the current client (browser tab),
+       * there's no need to proceed with the action since the web already
+       * handles its own business logic. Therefore, we'll return early here.
+       */
+      return
+    }
+
+    const space = spacesStore.spaces.find((space) => space.id === sseData.spaceid)
+    if (!space) {
+      return
+    }
+
+    const resource = await clientService.webdav.getFileInfo(space, {
+      fileId: sseData.itemid
+    })
+
+    if (!resource) {
+      return
+    }
+
+    if (resource.parentFolderId !== resourcesStore.currentFolder.id) {
+      return resourcesStore.removeResources([resource])
+    }
+
+    resourcesStore.upsertResource(resource)
+    resourcesStore.updateResourceField({
+      id: resource.id,
+      field: 'indicators',
+      value: getIndicators({
+        resource,
+        space,
+        user: userStore.user,
+        ancestorMetaData: resourcesStore.ancestorMetaData
+      })
+    })
+  } catch (e) {
+    console.error(`Unable to parse sse event ${topic} data`, e)
+  }
+}
+
 /**
  * The FileTouched event is triggered when a new empty file, such as a new text file,
  * is about to be created on the server. This event is necessary because the
@@ -365,6 +432,7 @@ export const onSSEFileTouchedEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (sseData.initiatorid === clientService.initiatorId) {
       /**
@@ -413,6 +481,7 @@ export const onSSEFolderCreatedEvent = async ({
 }) => {
   try {
     const sseData = eventSchema.parse(JSON.parse(msg.data))
+    console.debug(`SSE event '${topic}'`, sseData)
 
     if (sseData.initiatorid === clientService.initiatorId) {
       /**