From 45e0bd414a06d7732d69f7ce9860cae6cfaf8863 Mon Sep 17 00:00:00 2001
From: "brian.mulier" <bmmulier@hotmail.fr>
Date: Thu, 25 May 2023 11:30:19 +0200
Subject: [PATCH] fix(ui): Error message on draft save

closes #1341
---
 ui/src/components/graph/Topology.vue | 40 ++++++++++++++++++++--------
 ui/src/translations.json             | 14 ++--------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/ui/src/components/graph/Topology.vue b/ui/src/components/graph/Topology.vue
index 89349eb09fd..e7c8d31a7fc 100644
--- a/ui/src/components/graph/Topology.vue
+++ b/ui/src/components/graph/Topology.vue
@@ -1,5 +1,5 @@
 <script setup>
-    import {ref, onMounted, nextTick, watch, getCurrentInstance, onBeforeUnmount, computed} from "vue";
+    import {ref, onMounted, nextTick, watch, getCurrentInstance, onBeforeUnmount, computed, h} from "vue";
     import {useStore} from "vuex"
     import {VueFlow, useVueFlow, Position, MarkerType} from "@vue-flow/core"
     import {Controls, ControlButton} from "@vue-flow/controls"
@@ -37,6 +37,7 @@
     import editor from "../inputs/Editor.vue";
     import yamlUtils from "../../utils/yamlUtils";
     import {pageFromRoute} from "../../utils/eventsRouter";
+    import {ElNotification, ElTable, ElTableColumn} from "element-plus";
 
     const {
         id,
@@ -573,15 +574,32 @@
         haveChange.value = false;
     }
 
-    const showDraftPopup = (draftReason) => {
-        toast.confirm(draftReason + " " + (props.isCreating ? t("save draft.prompt.creation") : t("save draft.prompt.existing", {
-                          namespace: flow.namespace,
-                          id: flow.id
-                      })),
-                      () => {
-                          persistEditorContent(false);
-                      }
-        );
+    const saveAsDraft = (errorMessage) => {
+        const errorToastDom = [h("span", {innerHTML: t("invalid flow")}),
+            h(
+            ElTable,
+            {
+                stripe: true,
+                tableLayout: "auto",
+                fixed: true,
+                data: [{errorMessage}],
+                class: ["mt-2"],
+                size: "small",
+            },
+            [
+                h(ElTableColumn, {prop: "errorMessage", label: "Message"})
+            ]
+        )];
+
+        ElNotification({
+            title: t("save draft.message"),
+            message: h("div",  errorToastDom),
+            type: "error",
+            duration: 0,
+            dangerouslyUseHTMLString: true,
+            customClass: "large"
+        });
+        persistEditorContent(false);
     }
 
     const onEdit = (event) => {
@@ -832,7 +850,7 @@
                 flowParsed = YamlUtils.parse(flowYaml.value);
             } catch (_) {}
             if (validation[0].constraints) {
-                showDraftPopup(t("save draft.prompt.base"));
+                saveAsDraft(validation[0].constraints);
                 return;
             }
 
diff --git a/ui/src/translations.json b/ui/src/translations.json
index 250e79b1452..cfb6001ae29 100644
--- a/ui/src/translations.json
+++ b/ui/src/translations.json
@@ -421,12 +421,7 @@
     "metric choice": "Please choose a metric and an aggregation",
     "of": "of",
     "save draft": {
-      "prompt": {
-        "base": "The current Flow is not valid. Do you still want to save it as a draft ?",
-        "http_error": "Unable to validate the Flow due to an HTTP error. Do you want to save the current Flow as draft ?",
-        "creation": "You will retrieve it on your next Flow creation.",
-        "existing": "You will retrieve it on your next <code>{namespace}.{id}</code> Flow edition."
-      },
+      "message": "Draft saved",
       "retrieval": {
         "creation": "A Flow creation draft was retrieved, do you want to resume its edition ?",
         "existing": "A <code>{flowFullName}</code> Flow draft was retrieved, do you want to resume its edition ?"
@@ -856,12 +851,7 @@
     "metric choice": "Merci de sélectionner une métrique et une agrégation",
     "of": "de",
     "save draft": {
-      "prompt": {
-        "base": "Le Flow actuel est invalide. Voulez-vous le sauvegarder en tant que brouillon ?",
-        "http_error": "Impossible de valider le Flow en raison d'une erreur HTTP. Voulez-vous sauvegarder le Flow actuel en tant que brouillon ?",
-        "creation": "Vous le récupérerez à votre prochaine création de Flow.",
-        "existing": "Vous le récupérerez à votre prochaine édition du Flow <code>{namespace}.{id}</code>."
-      },
+      "message": "Brouillon sauvegardé",
       "retrieval": {
         "creation": "Un brouillon de création de Flow existe, voulez-vous reprendre son édition ?",
         "existing": "Un brouillon pour le Flow <code>{flowFullName}</code> existe, voulez-vous reprendre son édition?"