@kestra-io/ui-libs 0.0.27 → 0.0.28

package/package.json

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

package/src/components/misc/TaskIcon.vue

@@ -9,7 +9,6 @@
     </div>
 </template>
 <script>
-    import {mapState} from "vuex";
     import {Buffer} from "buffer";
     import Tooltip from "../misc/Tooltip.vue";
     import {cssVariable} from "../../utils/global.js";
@@ -32,10 +31,13 @@
                 validator(value) {
                     return ["dark", "light"].includes(value)
                 }
+            },
+            icons: {
+                type: Object,
+                default: undefined
             }
         },
         computed: {
-            ...mapState("plugin", ["icons"]),
             backgroundImage() {
                 return `data:image/svg+xml;base64,${this.imageBase64}`
             },

package/src/components/nodes/BasicNode.vue

@@ -7,7 +7,7 @@
     >
         <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
         <div class="icon rounded">
-            <TaskIcon :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" />
+            <TaskIcon :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" :icons="icons" />
         </div>
         <div class="node-content">
             <div class="d-flex node-title">
@@ -22,7 +22,7 @@
                     class="d-flex"
                     v-if="description"
                 >
-                    <tooltip :title="$t('show description')" class="d-flex align-items-center">
+                    <tooltip :title="Utils.translate('show description')" class="d-flex align-items-center">
                         <InformationOutline
                             @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: trimmedId, description:description})"
                             class="description-button ms-2"
@@ -36,21 +36,21 @@
             <slot name="badge-button-before" />
             <span
                 v-if="data.link"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.OPEN_LINK, {link: data.link})"
             >
-                <tooltip :title="$t('open')">
+                <tooltip :title="Utils.translate('open')">
                     <OpenInNew class="button-icon" alt="Open in new tab" />
                 </tooltip>
             </span>
             <span
                 v-if="expandable"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND)"
             >
-                <tooltip :title="$t('expand')">
+                <tooltip :title="Utils.translate('expand')">
                     <ArrowExpand class="button-icon" alt="Expand task" />
                 </tooltip>
             </span>
@@ -111,6 +111,10 @@
             data: {
                 type: Object,
                 required: true
+            },
+            icons: {
+                type: Object,
+                default: undefined
             }
         },
         methods: {
@@ -128,6 +132,9 @@
             };
         },
         computed: {
+            Utils() {
+                return Utils
+            },
             ...mapState("execution", ["execution"]),
             borderColor() {
                 const color = this.data.color ? this.data.color === "default" ? null : this.data.color : null
@@ -235,9 +242,9 @@
         }
 
         .icon {
-            position: relative;
-            width: 32px;
-            height: 30px;
+            margin: 0.2rem;
+            width: 25px;
+            height: 25px;
             border: 0.4px solid var(--bs-border-color);
         }
     }
@@ -263,7 +270,7 @@
         padding: 1px;
     }
 
-    .rounded-button {
+    .circle-button {
         border-radius: 1rem;
         width: 1rem;
         height: 1rem;

package/src/components/nodes/ClusterNode.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="classes">
-        <span class="badge rounded-pill text-truncate text-color" :class="[`bg-${data.color}`]">{{ clusterName }}</span>
+        <span class="badge rounded-pill text-truncate text-color position-reliative" :class="[`bg-${data.color}`]">{{ clusterName }}</span>
         <div class="top-button-div text-white d-flex">
             <span
                 v-if="data.collapsable"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="collapse()"
             >
-                <tooltip :title="$t('collapse')">
+                <tooltip :title="Utils.translate('collapse')">
                     <ArrowCollapse class="button-icon" alt="Collapse task" />
                 </tooltip>
             </span>
@@ -19,6 +19,7 @@
     import ArrowCollapse from "vue-material-design-icons/ArrowCollapse.vue"
     import {EVENTS} from "../../utils/constants.js";
     import {Position} from "@vue-flow/core";
+    import Utils from "../../utils/Utils.js";
 
     const props = defineProps({
         "data": {
@@ -72,7 +73,7 @@
     }
 </script>
 <style scoped lang="scss">
-    .rounded-button {
+    .circle-button {
         border-radius: 1rem;
         width: 1rem;
         height: 1rem;
@@ -102,10 +103,12 @@
     }
 
     .top-button-div {
-        transform: translate(-50%, -50%) !important;
-        left: 100% !important;
+        position: absolute;
+        top: -0.5rem;
+        right: -0.5rem;
         justify-content: center;
         padding-right: 3px;
+        display: flex
     }
 
 </style>

package/src/components/nodes/CollapsedClusterNode.vue

@@ -9,11 +9,11 @@
             <slot name="badge-button-before" />
             <span
                 v-if="expandable"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND, {id})"
             >
-                <tooltip :title="$t('expand')">
+                <tooltip :title="Utils.translate('expand')">
                     <ArrowExpand class="button-icon" alt="Expand task" />
                 </tooltip>
             </span>
@@ -33,6 +33,7 @@
     import Webhook from "vue-material-design-icons/Webhook.vue";
     import {Handle} from "@vue-flow/core";
     import Tooltip from "../misc/Tooltip.vue";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         components: {
@@ -102,7 +103,7 @@
         }
     }
 
-    .rounded-button {
+    .circle-button {
         border-radius: 1rem;
         width: 1rem;
         height: 1rem;

package/src/components/nodes/DependenciesNode.vue

@@ -22,20 +22,20 @@
             <slot name="badge-button-before" />
             <span
                 v-if="data.link"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.OPEN_LINK, data)"
             >
-                <tooltip :title="$t('open')">
+                <tooltip :title="Utils.translate('open')">
                     <OpenInNew class="button-icon" alt="Open in new tab" />
                 </tooltip>
             </span>
             <span
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND_DEPENDENCIES, data)"
             >
-                <tooltip :title="$t('expand')">
+                <tooltip :title="Utils.translate('expand')">
                     <ArrowExpandAll class="button-icon" alt="Expand task" />
                 </tooltip>
             </span>
@@ -53,6 +53,7 @@
     import ArrowExpandAll from "vue-material-design-icons/ArrowExpandAll.vue";
     import {EVENTS} from "../../utils/constants.js";
     import Tooltip from "../misc/Tooltip.vue";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         name: "Dependencies",

package/src/components/nodes/EdgeNode.vue

@@ -4,6 +4,7 @@
     import AddTaskButton from "../buttons/AddTaskButton.vue";
     import {EVENTS} from "../../utils/constants.js";
     import Tooltip from "../misc/Tooltip.vue";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         data() {
@@ -28,6 +29,9 @@
             Tooltip
         },
         computed: {
+            Utils() {
+                return Utils
+            },
             EVENTS() {
                 return EVENTS
             },
@@ -71,7 +75,7 @@
                 transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
             }"
         >
-            <tooltip :title="$t('add task')">
+            <tooltip :title="Utils.translate('add task')">
                 <AddTaskButton
                     v-if="data.haveAdd"
                     :add-task="true"
@@ -79,7 +83,6 @@
                     :class="{'text-danger': data.color}"
                 />
             </tooltip>
-
         </div>
     </EdgeLabelRenderer>
 </template>

package/src/components/nodes/TaskNode.vue

@@ -5,6 +5,7 @@
         :data="dataWithLink"
         :state="state"
         :class="classes"
+        :icons="icons"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, expandData)"
         @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
@@ -17,41 +18,41 @@
         <template #badge-button-before>
             <span
                 v-if="taskExecution"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.SHOW_LOGS, {id: taskId, execution: taskExecution, taskRuns})"
             >
-                <tooltip :title="$t('show task logs')">
+                <tooltip :title="Utils.translate('show task logs')">
                     <TextBoxSearch class="button-icon" alt="Show logs" />
                 </tooltip>
             </span>
             <span
                 v-if="!taskExecution && !data.isReadOnly && data.isFlowable"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
             >
-                <tooltip :title="$t('add error handler')">
+                <tooltip :title="Utils.translate('add error handler')">
                     <AlertOutline class="button-icon" alt="Edit task" />
                 </tooltip>
             </span>
             <span
                 v-if="!taskExecution && !data.isReadOnly"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
             >
-                <tooltip :title="$t('edit')">
+                <tooltip :title="Utils.translate('edit')">
                     <Pencil class="button-icon" alt="Edit task" />
                 </tooltip>
             </span>
             <span
                 v-if="!taskExecution && !data.isReadOnly"
-                class="rounded-button"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.DELETE, {id: taskId, section: SECTIONS.TASKS})"
             >
-                <tooltip :title="$t('delete')">
+                <tooltip :title="Utils.translate('delete')">
                     <Delete class="button-icon" alt="Delete task" />
                 </tooltip>
             </span>
@@ -162,7 +163,7 @@
                 }
             },
             dataWithLink() {
-                if(this.data.node.type.endsWith("SubflowGraphTask")){
+                if(this.data.node.type.endsWith("SubflowGraphTask") && this.enableSubflowInteraction){
                     return {
                         ...this.data,
                         link: {
@@ -205,6 +206,14 @@
             id: {
                 type: String,
                 required: true
+            },
+            icons: {
+                type: Object,
+                default: undefined
+            },
+            enableSubflowInteraction: {
+                type: Boolean,
+                default: true
             }
         },
         methods: {

package/src/components/nodes/TriggerNode.vue

@@ -4,27 +4,28 @@
         :id="id"
         :data="data"
         :color="color"
+        :icons="icons"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, {id})"
     >
-        <template #badge-button-before>
+        <template #badge-button-before v-if="!data.isReadOnly">
             <span
-                v-if="!execution && !data.isReadOnly"
-                class="rounded-button"
+                v-if="!execution"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.trigger, section: SECTIONS.TRIGGERS})"
             >
-                <tooltip :title="$t('edit')">
+                <tooltip :title="Utils.translate('edit')">
                     <Pencil class="button-icon" alt="Edit task" />
                 </tooltip>
             </span>
             <span
-                v-if="!execution && !data.isReadOnly"
-                class="rounded-button"
+                v-if="!execution"
+                class="circle-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TRIGGERS})"
             >
-                <tooltip :title="$t('delete')">
+                <tooltip :title="Utils.translate('delete')">
                     <Delete class="button-icon" alt="Delete task" />
                 </tooltip>
             </span>
@@ -42,6 +43,7 @@
     import Pencil from "vue-material-design-icons/Pencil.vue";
     import Delete from "vue-material-design-icons/Delete.vue";
     import Tooltip from "../misc/Tooltip.vue";
+    import Utils from "../../utils/Utils.js";
 
     export default {
         name: "Task",
@@ -82,6 +84,10 @@
             id: {
                 type: String,
                 required: true
+            },
+            icons: {
+                type: Object,
+                default: undefined
             }
         },
         methods: {

package/src/components/topology/Topology.vue

@@ -54,6 +54,14 @@
         expandedSubflows: {
             type: Array,
             default: () => []
+        },
+        icons: {
+            type: Object,
+            default: undefined
+        },
+        enableSubflowInteraction: {
+            type: Boolean,
+            default: true
         }
     });
 
@@ -84,6 +92,7 @@
 
     onMounted(() => {
         generateGraph();
+
     })
 
     watch(() => props.flowGraph, () => {
@@ -119,7 +128,8 @@
                 collapsed.value,
                 clusterToNode.value,
                 props.isReadOnly,
-                props.isAllowedEdit
+                props.isAllowedEdit,
+                props.enableSubflowInteraction
             );
             setElements(elements);
             fitView();
@@ -195,7 +205,7 @@
     })
 
     const subflowPrefixes = computed(() => {
-        if(!props.flowGraph) {
+        if(!props.flowGraph?.clusters) {
             return [];
         }
 
@@ -206,7 +216,7 @@
     onNodeDrag((e) => {
         resetNodesStyle();
         getNodes.value.filter(n => n.id !== e.node.id).forEach(n => {
-            if (n.type === "trigger" || (n.type === "task" && (n.id.startsWith(e.node.id + ".") || e.node.id.startsWith(n.id + "."))) || subflowPrefixes.value.some(subflowPrefix => n.id.startsWith(subflowPrefix))) {
+            if (n.type === "trigger" || (n.type === "task" && (n.id.startsWith(e.node.id + ".") || e.node.id.startsWith(n.id + "."))) || subflowPrefixes?.value?.some(subflowPrefix => n.id.startsWith(subflowPrefix))) {
                 n.style = {...n.style, opacity: "0.5"}
             } else {
                 n.style = {...n.style, opacity: "1"}
@@ -313,6 +323,7 @@
         <template #node-task="taskProps">
             <TaskNode
                 v-bind="taskProps"
+                :icons="icons"
                 @edit="forwardEvent(EVENTS.EDIT, $event)"
                 @delete="forwardEvent(EVENTS.DELETE, $event)"
                 @expand="expand($event)"
@@ -322,12 +333,14 @@
                 @mouseover="onMouseOver($event)"
                 @mouseleave="onMouseLeave()"
                 @add-error="forwardEvent('on-add-flowable-error', $event)"
+                :enable-subflow-interaction="enableSubflowInteraction"
             />
         </template>
 
         <template #node-trigger="triggerProps">
             <TriggerNode
                 v-bind="triggerProps"
+                :icons="icons"
                 :is-read-only="isReadOnly"
                 :is-allowed-edit="isAllowedEdit"
                 @delete="forwardEvent(EVENTS.DELETE, $event)"

package/src/scss/app.scss

@@ -5,7 +5,7 @@
 }
 
 
-.rounded-button {
+.circle-button {
     border-radius: 1rem;
     width: 1rem;
     height: 1rem;
@@ -46,12 +46,11 @@
 .vue-flow__container {
     .top-button-div {
         position: absolute;
-        top: 0;
-        width: 100%;
-        justify-content: end;
-        display: flex;
-        right: -16px;
-        transform: translate(-5%, -50%) !important;
+        top: -0.5rem;
+        right: -0.5rem;
+        justify-content: center;
+        padding-right: 3px;
+        display: flex
     }
 
     .vue-flow__node-cluster {

package/src/utils/Utils.js

@@ -49,4 +49,12 @@ export default class Utils {
     static afterLastDot(str) {
         return str.split(".").pop();
     }
+
+    static translate(text) {
+        if (typeof $t !== "undefined" && typeof $t === "function") {
+            return $t(text);
+        } else {
+            return text;
+        }
+    }
 }

package/src/utils/VueFlowUtils.js

@@ -294,7 +294,7 @@ export default class VueFlowUtils {
         return null;
     }
 
-    static generateGraph(vueFlowId, flowId, namespace, flowGraph, flowSource, hiddenNodes, isHorizontal, edgeReplacer, collapsed, clusterToNode, isReadOnly, isAllowedEdit) {
+    static generateGraph(vueFlowId, flowId, namespace, flowGraph, flowSource, hiddenNodes, isHorizontal, edgeReplacer, collapsed, clusterToNode, isReadOnly, isAllowedEdit, enableSubflowInteraction) {
         const elements = [];
 
         const clustersWithoutRootNode = [CLUSTER_PREFIX + TRIGGERS_NODE_UID];
@@ -422,7 +422,7 @@ export default class VueFlowUtils {
                         flowId: clusterByNodeUid[node.uid]?.taskNode?.task?.flowId ?? flowId,
                         isFlowable: clusterByNodeUid[node.uid]?.uid === CLUSTER_PREFIX + node.uid && !node.type.endsWith("SubflowGraphTask"),
                         color: color,
-                        expandable: this.isExpandableTask(node, clusterByNodeUid, edgeReplacer),
+                        expandable: this.isExpandableTask(node, clusterByNodeUid, edgeReplacer, enableSubflowInteraction),
                         isReadOnly: isReadOnlyTask,
                         iconComponent: this.isCollapsedCluster(node) ? "webhook" : null,
                         executionId: node.executionId,
@@ -486,7 +486,7 @@ export default class VueFlowUtils {
         return "blue";
     }
 
-    static isExpandableTask(node, clusterByNodeUid, edgeReplacer) {
+    static isExpandableTask(node, clusterByNodeUid, edgeReplacer, enableSubflowInteraction) {
         if (Object.values(edgeReplacer).includes(node.uid)) {
             return true;
         }
@@ -495,6 +495,6 @@ export default class VueFlowUtils {
             return true;
         }
 
-        return node.type.endsWith("SubflowGraphTask") && clusterByNodeUid[node.uid]?.uid?.replace(CLUSTER_PREFIX, "") !== node.uid;
+        return node.type.endsWith("SubflowGraphTask") && clusterByNodeUid[node.uid]?.uid?.replace(CLUSTER_PREFIX, "") !== node.uid && enableSubflowInteraction;
     }
 }