@kestra-io/ui-libs 0.0.41 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "v0.0.41",
+  "version": "v0.0.43",
   "type": "module",
   "files": [
     "src",

package/src/components/nodes/BasicNode.vue

@@ -200,9 +200,9 @@
             },
             hoverTooltip() {
                 if (this.data.node.type.endsWith("SubflowGraphTask")) {
-                    const subflowTask = this.data.node.task;
+                    const subflowIdContainer = this.data.node.task.subflowId ?? this.data.node.task;
 
-                    return subflowTask.namespace + " " + subflowTask.flowId;
+                    return subflowIdContainer.namespace + " " + subflowIdContainer.flowId;
                 }
 
                 return this.trimmedId;

package/src/components/nodes/ClusterNode.vue

@@ -66,7 +66,8 @@
             clusterName() {
                 const taskNode = this.data.taskNode;
                 if (taskNode?.type?.endsWith("SubflowGraphTask")) {
-                    return taskNode.task.namespace + " " + taskNode.task.flowId;
+                    const subflowIdContainer = taskNode.task.subflowId ?? taskNode.task
+                    return subflowIdContainer.namespace + " " + subflowIdContainer.flowId;
                 }
 
                 return Utils.afterLastDot(this.id);

package/src/components/nodes/TaskNode.vue

@@ -34,7 +34,7 @@
                 @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
             >
                 <tooltip :title="Utils.translate('add error handler')">
-                    <AlertOutline class="button-icon" alt="Edit task" />
+                    <AlertOutline class="button-icon" alt="Add error handler" />
                 </tooltip>
             </span>
             <span
@@ -165,11 +165,12 @@
             },
             dataWithLink() {
                 if(this.data.node.type.endsWith("SubflowGraphTask") && this.enableSubflowInteraction){
+                    const subflowIdContainer = this.data.node.task.subflowId ?? this.data.node.task;
                     return {
                         ...this.data,
                         link: {
-                            namespace: this.data.node.task.namespace,
-                            id: this.data.node.task.flowId,
+                            namespace: subflowIdContainer.namespace,
+                            id: subflowIdContainer.flowId,
                             executionId: this.taskExecution?.taskRunList
                                 .filter(taskRun => taskRun.taskId === this.data.node.task.id && taskRun.outputs?.executionId)
                                 ?.[0]?.outputs?.executionId

package/src/components/nodes/TriggerNode.vue

@@ -24,7 +24,7 @@
                 v-if="!execution"
                 class="circle-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TRIGGERS})"
+                @click="$emit(EVENTS.DELETE, {id: triggerId, section: SECTIONS.TRIGGERS})"
             >
                 <tooltip :title="Utils.translate('delete')">
                     <Delete class="button-icon" alt="Delete task" />
@@ -65,6 +65,9 @@
                     ...this.data,
                     unused: this.data.node?.triggerDeclaration?.disabled || this.data.node?.trigger?.disabled
                 }
+            },
+            triggerId() {
+                return Utils.afterLastDot(this.id);
             }
         },
         emits: [

package/src/components/topology/Topology.vue

@@ -282,7 +282,7 @@
     }
 
     const expand = (expandData) => {
-        const taskTypesWithSubflows = ["io.kestra.core.tasks.flows.Flow", "io.kestra.core.tasks.flows.Subflow", "io.kestra.core.tasks.flows.ForEachItem"];
+        const taskTypesWithSubflows = ["io.kestra.core.tasks.flows.Flow", "io.kestra.core.tasks.flows.Subflow", "io.kestra.core.tasks.flows.ForEachItem$ForEachItemExecutable"];
         if (taskTypesWithSubflows.includes(expandData.type) && !props.expandedSubflows.includes(expandData.id)) {
             forwardEvent("expand-subflow", [...props.expandedSubflows, expandData.id]);
             return;

package/src/utils/VueFlowUtils.js

@@ -403,7 +403,9 @@ export default class VueFlowUtils {
                 }
 
                 const color = this.nodeColor(node, collapsed, flowSource);
-                const isReadOnlyTask = isReadOnly || readOnlyUidPrefixes.some(prefix => node.uid.startsWith(prefix + "."));
+                // If task type includes '$', it's an inner class so it's probably an internal class not supposed to be editable
+                // In such case, only the root task will be editable
+                const isReadOnlyTask = isReadOnly || node.task?.type?.includes("$") || readOnlyUidPrefixes.some(prefix => node.uid.startsWith(prefix + "."));
                 elements.push({
                     id: node.uid,
                     type: nodeType,