From fcd7cc3571809afb0cd51b220e1b68e13b5ea259 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Mon, 24 Jan 2022 13:55:23 +0530
Subject: [PATCH 1/3] ui: fix filtering readonly details while VM update

Fixes #5724

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/view/DetailSettings.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index 2588c11fb2e4..d5ed7f3a226d 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -173,8 +173,8 @@ export default {
         this.deployasistemplate = json.listtemplatesresponse.template[0].deployasis
       })
     },
-    filterOrReadOnlyDetails () {
-      for (var i = 0; i < this.details.length; i++) {
+    filterReadOnlyDetails () {
+      for (var i = this.details.length - 1; i >= 0; i--) {
         if (!this.allowEditOfDetail(this.details[i].name)) {
           this.details.splice(i, 1)
         }
@@ -261,16 +261,16 @@ export default {
       }
       this.error = false
       this.details.push({ name: this.newKey, value: this.newValue })
-      this.filterOrReadOnlyDetails()
+      this.filterReadOnlyDetails()
       this.runApi()
     },
     updateDetail (index) {
-      this.filterOrReadOnlyDetails()
+      this.filterReadOnlyDetails()
       this.runApi()
     },
     deleteDetail (index) {
       this.details.splice(index, 1)
-      this.filterOrReadOnlyDetails()
+      this.filterReadOnlyDetails()
       this.runApi()
     },
     onShowAddDetail () {

From 940a558e6c5dc659110b84ddd725eaf64575c969 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Thu, 27 Jan 2022 11:15:33 +0530
Subject: [PATCH 2/3] refactor

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/view/DetailSettings.vue | 41 +++++++++++++----------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index d5ed7f3a226d..b9a9ec4c8ba1 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -173,13 +173,6 @@ export default {
         this.deployasistemplate = json.listtemplatesresponse.template[0].deployasis
       })
     },
-    filterReadOnlyDetails () {
-      for (var i = this.details.length - 1; i >= 0; i--) {
-        if (!this.allowEditOfDetail(this.details[i].name)) {
-          this.details.splice(i, 1)
-        }
-      }
-    },
     allowEditOfDetail (name) {
       if (this.resource.readonlydetails) {
         if (this.resource.readonlydetails.split(',').map(item => item.trim()).includes(name)) {
@@ -211,6 +204,27 @@ export default {
         (this.resource.domainid === this.$store.getters.userInfo.domainid && this.resource.account === this.$store.getters.userInfo.account) ||
         this.resource.project && this.resource.projectid === this.$store.getters.project.id
     },
+    getDetailsParam (details) {
+      var params = {}
+      var filteredDetails = details
+      if (this.resource.readonlydetails && filteredDetails) {
+        filteredDetails = []
+        var readOnlyDetailNames = this.resource.readonlydetails.split(',').map(item => item.trim())
+        for (var detail of this.details) {
+          if (!readOnlyDetailNames.includes(detail.name)) {
+            filteredDetails.push(detail)
+          }
+        }
+      }
+      if (filteredDetails.length === 0) {
+        params.cleanupdetails = true
+      } else {
+        filteredDetails.forEach(function (item, index) {
+          params['details[0].' + item.name] = item.value
+        })
+      }
+      return params
+    },
     runApi () {
       var apiName = ''
       if (this.resourceType === 'UserVm') {
@@ -226,14 +240,8 @@ export default {
         return
       }
 
-      const params = { id: this.resource.id }
-      if (this.details.length === 0) {
-        params.cleanupdetails = true
-      } else {
-        this.details.forEach(function (item, index) {
-          params['details[0].' + item.name] = item.value
-        })
-      }
+      var params = { id: this.resource.id }
+      params = Object.assign(params, this.getDetailsParam(this.details))
       this.loading = true
       api(apiName, params).then(json => {
         var details = {}
@@ -261,16 +269,13 @@ export default {
       }
       this.error = false
       this.details.push({ name: this.newKey, value: this.newValue })
-      this.filterReadOnlyDetails()
       this.runApi()
     },
     updateDetail (index) {
-      this.filterReadOnlyDetails()
       this.runApi()
     },
     deleteDetail (index) {
       this.details.splice(index, 1)
-      this.filterReadOnlyDetails()
       this.runApi()
     },
     onShowAddDetail () {

From ae1d267753090aeae652520237770a36d7882845 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Thu, 27 Jan 2022 14:24:13 +0530
Subject: [PATCH 3/3] error on add

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/view/DetailSettings.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ui/src/components/view/DetailSettings.vue b/ui/src/components/view/DetailSettings.vue
index b9a9ec4c8ba1..7d143ba52efa 100644
--- a/ui/src/components/view/DetailSettings.vue
+++ b/ui/src/components/view/DetailSettings.vue
@@ -267,6 +267,10 @@ export default {
         this.error = this.$t('message.error.provide.setting')
         return
       }
+      if (!this.allowEditOfDetail(this.newKey)) {
+        this.error = this.$t('error.unable.to.proceed')
+        return
+      }
       this.error = false
       this.details.push({ name: this.newKey, value: this.newValue })
       this.runApi()