Repository: kestra-io/kestra
Issue: [UI] Adjust the toast when changing anything in Settings

### Issue description

When changing anything in Settings, the toast says "is successfully saved" without saying what.

We can simply change the message to "Settings have been saved".

![image](https://github.com/kestra-io/kestra/assets/86264395/3bf8a73e-8fa2-4c53-bd26-01b436e1891e)


Issue comments:

Pull request review comments:
I'm not sure it's worth creating a new type of toast.
Maybe an alternative would be that you use the options from the saved method to give an "genericQualifier" key which defines whether or not we should display the saved thing in italic (false = italic, which will be the default not to break anything).

You can then update the saved() method to check for this param (don't forget to be null-safe on the options param :+1: ). Conditionally on that you can create a new translation that **doesn't includes** the `<em>` (see [here](https://github.com/kestra-io/kestra/blob/develop/ui/src/translations.json#L27)) if this param is true.

This way we now have a customizable toast which allow to display saved things whether they are id or not (and so the display will be adapted to it).

An example of usage for settings saving would then be
`this.$toast().saved(this.$t('setting'), undefined, {genericQualifier: true})`

To recap:

- in saved method check for options?.genericQualifier
- if true -> use $t('generic saved done') else -> use $t('saved done')
- create a translation for `generic saved done` key [below that](https://github.com/kestra-io/kestra/blob/develop/ui/src/translations.json#L27C39-L27C51) and [that](https://github.com/kestra-io/kestra/blob/develop/ui/src/translations.json#L546) (it's the same but without the `<em>` tags
- use `this.$toast().saved(this.$t('setting'), undefined, {genericQualifier: true})` everywhere a setting is saved
- remove your introduced "toast().settingsSaved()"
Ok.I will update it.
```suggestion
    "multiple saved done": "{name} have been saved",
```
```suggestion
                        ? self.$t("multiple saved done", {name})
```
```suggestion
                this.$toast().saved(this.$t('settings'),undefined,{multiple: true});
```
Sorry I changed my mind but "multiple" will be easier to understand I think
```suggestion
                    const message = options?.multiple
```
Thank you.I update it.

Patch that resolved the issue:
diff --git a/ui/src/components/settings/BasicSettings.vue b/ui/src/components/settings/BasicSettings.vue
index 262da3b9a2..15bed32dd1 100644
--- a/ui/src/components/settings/BasicSettings.vue
+++ b/ui/src/components/settings/BasicSettings.vue
@@ -223,7 +223,7 @@
                 } else {
                     localStorage.removeItem("defaultNamespace")
                 }
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onLevelChange(value) {
                 this.defaultLogLevel = value;
@@ -233,39 +233,39 @@
                 } else {
                     localStorage.removeItem("defaultLogLevel")
                 }
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onLang(value) {
                 localStorage.setItem("lang", value);
                 this.$moment.locale(value);
                 this.$i18n.locale = value;
                 this.lang = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onTheme(value) {
                 Utils.switchTheme(value)
                 this.theme = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onDateFormat(value) {
                 localStorage.setItem(DATE_FORMAT_STORAGE_KEY, value);
                 this.dateFormat = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onTimezone(value) {
                 localStorage.setItem(TIMEZONE_STORAGE_KEY, value);
                 this.timezone = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onEditorTheme(value) {
                 localStorage.setItem("editorTheme", value);
                 this.editorTheme = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onAutofoldTextEditor(value) {
                 localStorage.setItem("autofoldTextEditor", value);
                 this.autofoldTextEditor = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             exportFlows() {
                 return this.$store
@@ -284,38 +284,38 @@
             onLogDisplayChange(value) {
                 localStorage.setItem("logDisplay", value);
                 this.logDisplay = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onFontSize(value) {
                 localStorage.setItem("editorFontSize", value);
                 this.editorFontSize = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onFontFamily(value) {
                 localStorage.setItem("editorFontFamily", value);
                 this.editorFontFamily = value;
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onEnvNameChange(value) {
                 if (value !== this.configs?.environment?.name) {
                     this.$store.commit("layout/setEnvName", value);
                 }
 
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onEnvColorChange(value) {
                 if (value !== this.configs?.environment?.color) {
                     this.$store.commit("layout/setEnvColor", value);
                 }
 
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             },
             onExecuteFlowBehaviourChange(value) {
                 this.executeFlowBehaviour = value;
 
                 localStorage.setItem(storageKeys.EXECUTE_FLOW_BEHAVIOUR, value);
 
-                this.$toast().saved();
+                this.$toast().saved(this.$t("settings"), undefined, {multiple: true});
             }
         },
         computed: {
diff --git a/ui/src/translations.json b/ui/src/translations.json
index 3c02ba9971..bcdd305810 100644
--- a/ui/src/translations.json
+++ b/ui/src/translations.json
@@ -25,6 +25,7 @@
     "save": "Save",
     "saved": "Successfully saved",
     "saved done": "<em>{name}</em> is successfully saved",
+    "multiple saved done": "{name} have been saved",
     "delete": "Delete",
     "deleted": "Successfully deleted",
     "deleted confirm": "<em>{name}</em> is successfully deleted!",
@@ -548,6 +549,7 @@
     "save": "Enregistrer",
     "saved": "Enregistrement réussi",
     "saved done": "<em>{name}</em> est enregistré avec succès",
+    "multiple saved done": "{name} ont été enregistré(e)s",
     "delete": "Effacer",
     "deleted": "Effacement réussi",
     "deleted confirm": "<em>{name}</em> est effacé !",
diff --git a/ui/src/utils/toast.js b/ui/src/utils/toast.js
index 9a5504a3fe..c256ccc2ab 100644
--- a/ui/src/utils/toast.js
+++ b/ui/src/utils/toast.js
@@ -41,16 +41,19 @@ export default {
                 },
                 saved: function(name, title, options) {
                     ElNotification.closeAll();
+                    const message = options?.multiple
+                        ? self.$t("multiple saved done", {name})
+                        : self.$t("saved done", { name: name });
                     ElNotification({
                         ...{
                             title: title || self.$t("saved"),
-                            message: this._wrap(self.$t("saved done", {name: name})),
+                            message: this._wrap(message),
                             position: 'top-right',
                             offset: 65,
                             type: "success",
                         },
                         ...(options || {})
-                    })
+                    });
                 },
                 deleted: function(name, title, options) {
                     ElNotification({
@@ -101,7 +104,7 @@ export default {
                         },
                         ...(options || {})
                     })
-                },
+                }
             }
         }
     }


Test patch: