feat: add a prop for dynamic icon component

kestra-io · Dec 29, 2023 · c351efb · c351efb
1 parent 99e7671
commit c351efb
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/components/nodes/BasicNode.vue b/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" :icons="icons" />
+            <component :is="iconComponent || TaskIcon" :cls="cls" :class="taskIconBg" class="rounded bg-white" theme="light" :icons="icons" />
         </div>
         <div class="node-content">
             <div class="d-flex node-title">
@@ -59,8 +59,11 @@
     </div>
 </template>
 
-<script>
+<script setup>
     import TaskIcon from "../misc/TaskIcon.vue";
+</script>
+
+<script>
     import InformationOutline from "vue-material-design-icons/InformationOutline.vue";
     import {EVENTS} from "../../utils/constants.js";
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
@@ -72,7 +75,6 @@
     export default {
         components: {
             ArrowExpand,
-            TaskIcon,
             InformationOutline,
             OpenInNew,
             Tooltip
@@ -115,6 +117,10 @@
             icons: {
                 type: Object,
                 default: undefined
+            },
+            iconComponent: {
+                type: Object,
+                default: undefined
             }
         },
         methods: {

diff --git a/src/components/nodes/TaskNode.vue b/src/components/nodes/TaskNode.vue
@@ -6,6 +6,7 @@
         :state="state"
         :class="classes"
         :icons="icons"
+        :icon-component="iconComponent"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, expandData)"
         @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
@@ -211,6 +212,10 @@
                 type: Object,
                 default: undefined
             },
+            iconComponent: {
+                type: Object,
+                default: undefined
+            },
             enableSubflowInteraction: {
                 type: Boolean,
                 default: true

diff --git a/src/components/nodes/TriggerNode.vue b/src/components/nodes/TriggerNode.vue
@@ -5,6 +5,7 @@
         :data="data"
         :color="color"
         :icons="icons"
+        :icon-component="iconComponent"
         @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
         @expand="forwardEvent(EVENTS.EXPAND, {id})"
     >
@@ -88,6 +89,10 @@
             icons: {
                 type: Object,
                 default: undefined
+            },
+            iconComponent: {
+                type: Object,
+                default: undefined
             }
         },
         methods: {

diff --git a/src/components/topology/Topology.vue b/src/components/topology/Topology.vue
@@ -59,6 +59,10 @@
             type: Object,
             default: undefined
         },
+        iconComponent: {
+            type: Object,
+            default: undefined
+        },
         enableSubflowInteraction: {
             type: Boolean,
             default: true
@@ -325,6 +329,7 @@
             <TaskNode
                 v-bind="taskProps"
                 :icons="icons"
+                :icon-component="iconComponent"
                 @edit="forwardEvent(EVENTS.EDIT, $event)"
                 @delete="forwardEvent(EVENTS.DELETE, $event)"
                 @expand="expand($event)"
@@ -342,6 +347,7 @@
             <TriggerNode
                 v-bind="triggerProps"
                 :icons="icons"
+                :icon-component="iconComponent"
                 :is-read-only="isReadOnly"
                 :is-allowed-edit="isAllowedEdit"
                 @delete="forwardEvent(EVENTS.DELETE, $event)"