From 82f113b1e1a2db68a92259494f035005f9622407 Mon Sep 17 00:00:00 2001
From: Abhishek Kumar <abhishek.mrt22@gmail.com>
Date: Fri, 6 Sep 2024 17:13:01 +0530
Subject: [PATCH] ui: refactor config update/reset notification (#9639)

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>
---
 ui/src/components/view/ListView.vue         | 12 ++---------
 ui/src/components/view/SettingsTab.vue      | 22 ++++++++++-----------
 ui/src/utils/plugins.js                     |  7 +++++++
 ui/src/views/setting/ConfigurationValue.vue | 12 ++---------
 4 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/ui/src/components/view/ListView.vue b/ui/src/components/view/ListView.vue
index 70931834a798..032985c730e1 100644
--- a/ui/src/components/view/ListView.vue
+++ b/ui/src/components/view/ListView.vue
@@ -761,11 +761,7 @@ export default {
       }).then(json => {
         this.editableValueKey = null
         this.$store.dispatch('RefreshFeatures')
-        var message = `${this.$t('message.setting.updated')} ${record.name}`
-        if (record.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.$message.success(message)
+        this.$messageConfigSuccess(`${this.$t('message.setting.updated')} ${record.name}`, record)
         if (json.updateconfigurationresponse &&
           json.updateconfigurationresponse.configuration &&
           !json.updateconfigurationresponse.configuration.isdynamic &&
@@ -786,11 +782,7 @@ export default {
       api('resetConfiguration', {
         name: item.name
       }).then(() => {
-        var message = `${this.$t('label.setting')} ${item.name} ${this.$t('label.reset.config.value')}`
-        if (item.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.$message.success(message)
+        this.$messageConfigSuccess(`${this.$t('label.setting')} ${item.name} ${this.$t('label.reset.config.value')}`, item)
       }).catch(error => {
         console.error(error)
         this.$message.error(this.$t('message.error.reset.config'))
diff --git a/ui/src/components/view/SettingsTab.vue b/ui/src/components/view/SettingsTab.vue
index f0812c3a8ade..be74e7b32dd9 100644
--- a/ui/src/components/view/SettingsTab.vue
+++ b/ui/src/components/view/SettingsTab.vue
@@ -175,10 +175,7 @@ export default {
         value: this.editableValue
       }).then(() => {
         var message = `${this.$t('label.setting')} ${item.name} ${this.$t('label.update.to')} ${this.editableValue}`
-        if (item.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.handleSuccessMessage(item.name, this.$route.meta.name, message)
+        this.handleSuccessMessage(item, this.$route.meta.name, message)
       }).catch(error => {
         console.error(error)
         this.$message.error(this.$t('message.error.save.setting'))
@@ -208,10 +205,7 @@ export default {
         name: item.name
       }).then(() => {
         var message = `${this.$t('label.setting')} ${item.name} ${this.$t('label.reset.config.value')}`
-        if (item.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.handleSuccessMessage(item.name, this.$route.meta.name, message)
+        this.handleSuccessMessage(item, this.$route.meta.name, message)
       }).catch(error => {
         console.error(error)
         this.$message.error(this.$t('message.error.reset.config'))
@@ -226,12 +220,16 @@ export default {
         })
       })
     },
-    handleSuccessMessage (name, scope, message) {
-      var obj = this.warningMessages[name]
+    handleSuccessMessage (config, scope, message) {
+      var obj = this.warningMessages[config.name]
       if (obj && obj.scope === scope) {
-        this.$warning({ title: message, content: obj.warning })
+        var content = obj.warning
+        if (config.isdynamic) {
+          content = `this.$t('message.setting.update.delay').\n ${content}`
+        }
+        this.$warning({ title: message, content: content })
       } else {
-        this.$message.success(message)
+        this.$messageConfigSuccess(message, config)
       }
     }
   }
diff --git a/ui/src/utils/plugins.js b/ui/src/utils/plugins.js
index 949ea910db38..353fe2ac0529 100644
--- a/ui/src/utils/plugins.js
+++ b/ui/src/utils/plugins.js
@@ -289,6 +289,13 @@ export const notifierPlugin = {
       close: (key) => notification.close(key),
       destroy: () => notification.destroy()
     }
+
+    app.config.globalProperties.$messageConfigSuccess = function (msg, configrecord) {
+      if (configrecord.isdynamic) {
+        msg += `. ${this.$t('message.setting.update.delay')}`
+      }
+      message.success(msg)
+    }
   }
 }
 
diff --git a/ui/src/views/setting/ConfigurationValue.vue b/ui/src/views/setting/ConfigurationValue.vue
index da6bf399fe2f..4ae0244b7460 100644
--- a/ui/src/views/setting/ConfigurationValue.vue
+++ b/ui/src/views/setting/ConfigurationValue.vue
@@ -258,11 +258,7 @@ export default {
         this.actualValue = this.editableValue
         this.$emit('change-config', { value: newValue })
         this.$store.dispatch('RefreshFeatures')
-        var message = `${this.$t('message.setting.updated')} ${configrecord.name}`
-        if (configrecord.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.$message.success(message)
+        this.$messageConfigSuccess(`${this.$t('message.setting.updated')} ${configrecord.name}`, configrecord)
         if (json.updateconfigurationresponse &&
           json.updateconfigurationresponse.configuration &&
           !json.updateconfigurationresponse.configuration.isdynamic &&
@@ -299,11 +295,7 @@ export default {
         }
         this.$emit('change-config', { value: newValue })
         this.$store.dispatch('RefreshFeatures')
-        var message = `${this.$t('label.setting')} ${configrecord.name} ${this.$t('label.reset.config.value')}`
-        if (configrecord.isdynamic) {
-          message += `. ${this.$t('message.setting.update.delay')}`
-        }
-        this.$message.success(message)
+        this.$messageConfigSuccess(`${this.$t('label.setting')} ${configrecord.name} ${this.$t('label.reset.config.value')}`, configrecord)
         if (json.resetconfigurationresponse &&
           json.resetconfigurationresponse.configuration &&
           !json.resetconfigurationresponse.configuration.isdynamic &&