From 73eb1856cfc83cf7fbae0341cdedca00439c5878 Mon Sep 17 00:00:00 2001
From: Debora Crescenzo <dcrescenzo@sipwise.com>
Date: Wed, 3 Sep 2025 12:08:48 +0100
Subject: [PATCH] MT#63508 Avoid direct Vuex state mutation in
 CscPageCallRecording

In CscPageCallRecording a watch function was directly
modifying the Vuex state, which is not allowed in
strict mode. This change ensures that each recording
object is cloned before modification, preventing
unintended mutations of store data.

Change-Id: Ie564da2ce31bd61772a05450be21a9a0717632ef
(cherry picked from commit abc25dc49c0e34b7c2dd09c66afe1cb69f5cc810)
(cherry picked from commit cb6299e349604591553c75faf65f68c17bf5bca4)
---
 src/pages/CscPageCallRecording.vue | 31 +++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/pages/CscPageCallRecording.vue b/src/pages/CscPageCallRecording.vue
index 327a83c4..256fd973 100644
--- a/src/pages/CscPageCallRecording.vue
+++ b/src/pages/CscPageCallRecording.vue
@@ -278,21 +278,23 @@ export default {
     },
     watch: {
         recordings () {
-            this.data = this.recordings
-            this.data.forEach((recording) => {
+            this.data = this.recordings.map((recording) => {
+                const recordingCopy = { ...recording }
+
                 const user = this.getSubscriber()
                 const userCli = user.primary_number.cc + user.primary_number.ac + user.primary_number.sn
-                if (recording.caller) {
-                    if (recording.caller === userCli) {
-                        recording.callerName = this.$t('Me')
-                    }
+
+                if (recordingCopy.caller && recordingCopy.caller === userCli) {
+                    recordingCopy.callerName = this.$t('Me')
                 }
-                if (recording.callee) {
-                    if (recording.callee === userCli) {
-                        recording.calleeName = this.$t('Me')
-                    }
+
+                if (recordingCopy.callee && recordingCopy.callee === userCli) {
+                    recordingCopy.calleeName = this.$t('Me')
                 }
+
+                return recordingCopy
             })
+
             this.rowStatus = this.recordings.map((rec) => {
                 return {
                     id: rec.id,
@@ -373,13 +375,20 @@ export default {
             return rowStatus && rowStatus.expanded
         },
         async updateCollapseArray (id) {
-            const recording = this.recordings.filter((rec) => rec.id === id)[0]
+            // Find the recording in our local data copy, not the store
+            const recording = this.data.filter((rec) => rec.id === id)[0]
             const rowStatus = this.rowStatus.filter((row) => row.id === id)[0]
             rowStatus.expanded = !rowStatus.expanded
             if (rowStatus.expanded && recording.files.length === 0) {
                 this.$wait.start(`loading-stream-${id}`)
                 try {
                     await this.fetchStreams(id)
+                    // After fetching streams, we need to update our local copy
+                    // since the store has been updated
+                    const updatedRecording = this.recordings.find((rec) => rec.id === id)
+                    if (updatedRecording) {
+                        recording.files = [...updatedRecording.files]
+                    }
                 } finally {
                     this.$wait.end(`loading-stream-${id}`)
                 }