chore(ui): make confirmation dialogs properly render markdown content (…

…#5986) Co-authored-by: Miloš Paunović <[email protected]>
kestra-io · Dec 4, 2024 · 9cdaefc · 9cdaefc
1 parent f02cf1f
commit 9cdaefc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/ui/src/components/flows/TriggerFlow.vue b/ui/src/components/flows/TriggerFlow.vue
@@ -51,8 +51,6 @@
 
 
 <script>
-    import {h} from "vue";
-
     import FlowRun from "./FlowRun.vue";
     import {mapState} from "vuex";
     import Flash from "vue-material-design-icons/Flash.vue";
@@ -114,7 +112,7 @@
                     return;
                 }
                 else if (this.checkForTrigger) {
-                    this.$toast().confirm(h(FlowWarningDialog), () => (this.toggleModal()), true, null);
+                    this.$toast().confirm(FlowWarningDialog, () => (this.toggleModal()), true, null);
                 }
                 else if (this.computedNamespace !== undefined && this.computedFlowId !== undefined) {
                     this.toggleModal()

diff --git a/ui/src/utils/toast.ts b/ui/src/utils/toast.ts
@@ -2,6 +2,8 @@ import {ElNotification, ElMessageBox, ElTable, ElTableColumn} from "element-plus
 import {h} from "vue"
 import {useI18n} from "vue-i18n"
 
+import Markdown from "../components/layout/Markdown.vue"
+
 // eslint-disable-next-line no-unused-vars
 const makeToast = (t: (t:string, options?: Record<string, string>) => string) => ({
     _wrap: function(message) {
@@ -21,12 +23,15 @@ const makeToast = (t: (t:string, options?: Record<string, string>) => string) =>
                 ]
             )
         } else {
-            return h("span", {innerHTML: message});
+            return h(Markdown, {source: message});
         }
     },
-    confirm: function(message, callback, renderVNode = false, type = "warning" as const) {
+    _MarkdownWrap: function(message) {    
+        return h(Markdown, {source: message})
+    },
+    confirm: function(message, callback, type = "warning" as const) {
         ElMessageBox
-            .confirm(renderVNode ? message : this._wrap(message || t("toast confirm")), t("confirmation"), {type})
+            .confirm(typeof message === "string" ? this._MarkdownWrap(message || t("toast confirm")) : h(message), t("confirmation"), {type})
             .then(() => callback())
     },
     saved: function(name, title, options) {