Repository: kestra-io/kestra
Issue: Cannot edit an existing invalid flow
Labels: bug

### Expected Behavior

If a flow is invalid in the database (this is an edge case but it can happen), I should still be able to edit it.

### Actual Behaviour

The flow is not editable as the editor loads forever.
![image](https://github.com/kestra-io/kestra/assets/1819009/3207eab7-28ac-4b38-9469-b005d7f7b352)


The following JavScript error is shown:

```
index-9958380e.js:1 TypeError: n.flowGraph.edges is not iterable
    at ue (index-9958380e.js:1074:259649)
    at ge (index-9958380e.js:1074:261791)
    at X (index-9958380e.js:1074:260077)
    at index-9958380e.js:1074:263820
    at index-9958380e.js:1:26652
    at lm (index-9958380e.js:1:14864)
    at Nu (index-9958380e.js:1:14943)
    at e.__weh.e.__weh (index-9958380e.js:1:26532)
    at Wge (index-9958380e.js:1:16251)
    at Uge (index-9958380e.js:1:16561)
```

### Steps To Reproduce

_No response_

### Environment Information

- Kestra Version: 0.9.0
- Operating System (OS / Docker / Kubernetes):
- Java Version (If not docker):


### Example flow

_No response_

Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/graph/Topology.vue b/ui/src/components/graph/Topology.vue
index 42cd4d4e7c..c67fe9ec25 100644
--- a/ui/src/components/graph/Topology.vue
+++ b/ui/src/components/graph/Topology.vue
@@ -189,12 +189,17 @@
             namespace: props.namespace
         });
 
-        const validation = await store.dispatch("flow/validateFlow", {flow: flowYaml.value});
-        const validationErrors = validation[0].constraints;
-        if(validationErrors){
-            errorToast(t("cannot create topology"), t("invalid flow"), validationErrors);
+        if(!props.isCreating) {
+            const validation = await store.dispatch("flow/validateFlow", {flow: flowYaml.value});
+            const validationErrors = validation[0].constraints;
+            if (validationErrors) {
+                singleErrorToast(t("cannot create topology"), t("invalid flow"), validationErrors);
+            }else {
+                generateGraph();
+            }
+        } else {
+            generateGraph();
         }
-        generateGraph();
 
         if(!props.isReadOnly) {
             let restoredLocalStorageKey;
@@ -584,35 +589,21 @@
         haveChange.value = false;
     }
 
-    const errorToast = (title, message, detailedError) => {
-        const errorToastDom = [h("span", {innerHTML: message}),
-            h(
-                ElTable,
-                {
-                    stripe: true,
-                    tableLayout: "auto",
-                    fixed: true,
-                    data: [{detailedError}],
-                    class: ["mt-2"],
-                    size: "small",
-                },
-                [
-                    h(ElTableColumn, {prop: "detailedError", label: "Message"})
-                ]
-            )];
-
-        ElNotification({
+    const singleErrorToast = (title, message, detailedError) => {
+        store.dispatch("core/showMessage", {
             title: title,
-            message: h("div", errorToastDom),
-            type: "error",
-            duration: 0,
-            dangerouslyUseHTMLString: true,
-            customClass: "large"
+            message: message,
+            content: {
+                _embedded: {
+                    errors: [{message: detailedError}]
+                }
+            },
+            variant: "error"
         });
     }
 
     const saveAsDraft = (errorMessage) => {
-        errorToast(t("save draft.message"), t("invalid flow"), errorMessage);
+        singleErrorToast(t("save draft.message"), t("invalid flow"), errorMessage);
         persistEditorContent(false);
     }
 


Test patch: