fix(ui): expanded subflows list is shared between Topology tab & Edit…

…orView's topology

ui/package.json

@@ -10,7 +10,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../.gitignore"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.16",
+    "@kestra-io/ui-libs": "^0.0.17",
     "@popperjs/core": "npm:@sxzz/[email protected]",
     "@vue-flow/background": "^1.2.0",
     "@vue-flow/controls": "1.0.6",

ui/src/components/flows/FlowEditor.vue

@@ -8,6 +8,8 @@
         :is-read-only="isReadOnly"
         :flow-error="flowError"
         :flow-deprecations="flowDeprecations"
+        :expanded-subflows="expandedSubflows"
+        @expand-subflow="$emit('expand-subflow', $event)"
     />
 </template>
 <script>
@@ -26,6 +28,10 @@
             isReadOnly: {
                 type: Boolean,
                 default: false
+            },
+            expandedSubflows: {
+                type: Array,
+                default: []
             }
         },
         computed: {

ui/src/components/flows/FlowRoot.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="ready">
-            <tabs route-name="flows/update" ref="currentTab" :tabs="tabs" />
+            <tabs @expand-subflow="updateExpandedSubflows" route-name="flows/update" ref="currentTab" :tabs="tabs" />
             <bottom-line v-if="displayBottomLine()">
                 <ul>
                     <li>
@@ -54,7 +54,8 @@
             return {
                 tabIndex: undefined,
                 previousFlow: undefined,
-                depedenciesCount: undefined
+                depedenciesCount: undefined,
+                expandedSubflows: []
             };
         },
         watch: {
@@ -84,7 +85,6 @@
                         }
                     });
                 }
-
             },
             flowKey() {
                 return this.$route.params.namespace +  "/" + this.$route.params.id;
@@ -96,7 +96,8 @@
                         component: Topology,
                         title: this.$t("topology"),
                         props: {
-                            isReadOnly: true
+                            isReadOnly: true,
+                            expandedSubflows: this.expandedSubflows
                         }
                     },
                 ];
@@ -126,6 +127,9 @@
                         name: "editor",
                         component: FlowEditor,
                         title: this.$t("editor"),
+                        props: {
+                            expandedSubflows: this.expandedSubflows
+                        }
                     });
                 }
 
@@ -189,6 +193,9 @@
                     tab: "editor"
                 }})
             },
+            updateExpandedSubflows(expandedSubflows) {
+                this.expandedSubflows = expandedSubflows;
+            }
         },
         computed: {
             ...mapState("flow", ["flow"]),
@@ -229,7 +236,7 @@
                     return this.user.isAllowed(permission.EXECUTION, action.CREATE, this.flow.namespace)
                 }
                 return false;
-            },
+            }
         },
         unmounted () {
             this.$store.commit("flow/setFlow", undefined)

ui/src/components/flows/Topology.vue

@@ -31,6 +31,10 @@
             isReadOnly: {
                 type: Boolean,
                 default: false
+            },
+            expandedSubflows: {
+                type: Array,
+                default: []
             }
         },
         computed: {
@@ -39,14 +43,9 @@
         beforeUnmount() {
             this.$store.commit("flow/setFlowError", undefined);
         },
-        data() {
-            return {
-                expandedSubflows: []
-            }
-        },
         methods: {
             onExpandSubflow(event) {
-                this.expandedSubflows = event;
+                this.$emit("expand-subflow", event);
                 this.$store.dispatch("flow/loadGraph", {
                     flow: this.flow,
                     params: {

ui/src/components/inputs/EditorView.vue

@@ -32,7 +32,7 @@
 
     const store = useStore();
     const router = getCurrentInstance().appContext.config.globalProperties.$router;
-    const emit = defineEmits(["follow"])
+    const emit = defineEmits(["follow", "expand-subflow"])
     const toast = getCurrentInstance().appContext.config.globalProperties.$toast();
     const t = getCurrentInstance().appContext.config.globalProperties.$t;
     const http = getCurrentInstance().appContext.config.globalProperties.$http;
@@ -93,6 +93,10 @@
         flowDeprecations: {
             type: Array,
             default: undefined
+        },
+        expandedSubflows: {
+            type: Array,
+            default: []
         }
     })
 
@@ -165,6 +169,12 @@
         taskError.value = store.getters["flow/taskError"];
     });
 
+    watch(() => props.expandedSubflows, (_, oldValue) => {
+        fetchGraph().catch(() => {
+            emit("expand-subflow", oldValue);
+        });
+    });
+
     const flowHaveTasks = (source) => {
         const flow = source ? source : flowYaml.value
         return flow ? YamlUtils.flowHaveTasks(flow) : false;
@@ -357,14 +367,13 @@
         persistEditorContent(false);
     }
 
-    const expandedSubflows = ref([]);
     const fetchGraph = () => {
         return store.dispatch("flow/loadGraphFromSource", {
             flow: flowYaml.value,
             config: {
                 params: {
                     // due to usage of axios instance instead of $http which doesn't convert arrays
-                    subflows: expandedSubflows.value.join(","),
+                    subflows: props.expandedSubflows.join(","),
                 },
                 validateStatus: (status) => {
                     return status === 200 || status === 422;
@@ -649,15 +658,11 @@
     }
 
     const onExpandSubflow = (e) => {
-        const oldExpandedSubflows = expandedSubflows.value;
-        expandedSubflows.value = e;
-        fetchGraph().catch(() => {
-            expandedSubflows.value = oldExpandedSubflows;
-        });
+        emit("expand-subflow", e);
     }
 
     const onSwappedTask = (swappedTasks) => {
-        expandedSubflows.value = expandedSubflows.value.map(expandedSubflow => {
+        emit("expand-subflow", props.expandedSubflows.map(expandedSubflow => {
             let swappedTaskSplit;
             if (expandedSubflow === swappedTasks[0]) {
                 swappedTaskSplit = swappedTasks[1].split(".");
@@ -673,7 +678,7 @@
             }
 
             return expandedSubflow;
-        });
+        }));
     }
 </script>
 
@@ -719,7 +724,7 @@
                 :source="flowYaml"
                 :is-allowed-edit="isAllowedEdit()"
                 :view-type="viewType"
-                :expanded-subflows="expandedSubflows"
+                :expanded-subflows="props.expandedSubflows"
             >
                 <template #top-bar v-if="viewType === editorViewTypes.TOPOLOGY">
                     <ValidationError tooltip-placement="bottom-start" size="small" class="ms-2" :error="flowError" :warnings="flowWarnings" />

ui/src/components/inputs/LowCodeEditor.vue

@@ -306,7 +306,7 @@
             :flowGraph="props.flowGraph"
             :flow-id="flowId"
             :namespace="namespace"
-            :expanded-subflows="expandedSubflows"
+            :expanded-subflows="props.expandedSubflows"
             @toggle-orientation="toggleOrientation"
             @edit="onEditTask($event)"
             @delete="onDelete"