n8n-editor-ui 1.83.1 → 1.84.0

package/dist/assets/{TestDefinitionEditView-DjR3gJvA.js → TestDefinitionEditView-BTo9LlAU.js}

@@ -1,233 +1,20 @@
-import { u as useTestDefinitionForm } from "./useTestDefinitionForm-DxJcvrhw.js";
-import { d as defineComponent, U as useWorkflowsStore, bp as useNodeTypesStore, W as useRoute, b as useRouter, r as ref, q as computed, o as onMounted, l as unref, c as openBlock, h as createElementBlock, i as createVNode, w as withCtx, k as createTextVNode, t as toDisplayString, n as normalizeClass, e as createBlock, f as createCommentVNode, aQ as N8nTooltip, g as useI18n, D as createEventBus, ab as useCssModule, m as resolveComponent, ak as useTelemetry, _ as _export_sfc, j as createBaseVNode, fY as N8nText, v as renderSlot, F as Fragment, c$ as InfoTip, g0 as ne, cS as useTemplateRef, B as renderList, cR as N8nButton, z as nextTick, g1 as N8nInput, aR as _sfc_main$a, a2 as useProjectsStore, aP as N8nLink, V as VIEWS, g2 as __unplugin_components_0$2, g3 as SAMPLE_EVALUATION_WORKFLOW, fn as mergeModels, fo as useModel, g4 as Tag, g5 as NODE_PINNING_MODAL_KEY, g6 as __unplugin_components_1, al as useMessage, dS as dateFormat, bo as watchEffect, ax as withDirectives, ay as vShow, fZ as N8nIcon, C as normalizeStyle, g7 as TestTableBase, K as useDebounce, a as useToast, bX as useTestDefinitionStore, fH as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, g8 as InlineNameEdit } from "./index-BloiTH5y.js";
-import { u as useVueFlow, a as useCanvasMapping, _ as __unplugin_components_0$1 } from "./useCanvasMapping-CGHW3BxZ.js";
-import { a as useCanvasOperations } from "./useCanvasOperations-Cr_vZCiR.js";
-import { L as Line } from "./index-Cvcpg6Dy.js";
-import "./usePinnedData-C5x08fuF.js";
-import "./useRunWorkflow-CnFMyZFO.js";
-import "./pushConnection.store-D5RQY4RP.js";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "NodesPinning",
-  props: {
-    modelValue: {}
-  },
-  emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const workflowsStore = useWorkflowsStore();
-    const nodeTypesStore = useNodeTypesStore();
-    const route = useRoute();
-    const router = useRouter();
-    const locale = useI18n();
-    const telemetry = useTelemetry();
-    const { resetWorkspace, initializeWorkspace } = useCanvasOperations({ router });
-    const eventBus = createEventBus();
-    const style = useCssModule();
-    const uuid = crypto.randomUUID();
-    const props = __props;
-    const emit = __emit;
-    const isLoading = ref(true);
-    const workflowId = computed(() => route.params.name);
-    const testId = computed(() => route.params.testId);
-    const workflow = computed(() => workflowsStore.getWorkflowById(workflowId.value));
-    const workflowObject = computed(() => workflowsStore.getCurrentWorkflow(true));
-    const canvasId = computed(() => `${uuid}-${testId.value}`);
-    const { onNodesInitialized, fitView, zoomTo } = useVueFlow({ id: canvasId.value });
-    const nodes = computed(() => {
-      return workflow.value.nodes ?? [];
-    });
-    const connections = computed(() => workflow.value.connections);
-    const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
-      nodes,
-      connections,
-      workflowObject
-    });
-    async function loadData() {
-      workflowsStore.resetState();
-      resetWorkspace();
-      const loadingPromise = Promise.all([
-        nodeTypesStore.getNodeTypes(),
-        workflowsStore.fetchWorkflow(workflowId.value)
-      ]);
-      await loadingPromise;
-      initializeWorkspace(workflow.value);
-      disableAllNodes();
-    }
-    function getNodeNameById(id) {
-      return mappedNodes.value.find((node) => node.id === id)?.data?.name;
-    }
-    function updateNodeClasses(nodeIds, isPinned2) {
-      eventBus.emit("nodes:action", {
-        ids: nodeIds,
-        action: "update:node:class",
-        payload: {
-          className: style.pinnedNode,
-          add: isPinned2
-        }
-      });
-      eventBus.emit("nodes:action", {
-        ids: nodeIds,
-        action: "update:node:class",
-        payload: {
-          className: style.notPinnedNode,
-          add: !isPinned2
-        }
-      });
-    }
-    function disableAllNodes() {
-      const ids = mappedNodes.value.map((node) => node.id);
-      updateNodeClasses(ids, false);
-      const pinnedNodes = props.modelValue.map((node) => node.id).filter((id) => id !== null);
-      if (pinnedNodes.length > 0) {
-        updateNodeClasses(pinnedNodes, true);
-      }
-    }
-    function onPinButtonClick(data) {
-      const nodeName = getNodeNameById(data.id);
-      if (!nodeName) return;
-      const isPinned2 = props.modelValue.some((node) => node.id === data.id);
-      const updatedNodes = isPinned2 ? props.modelValue.filter((node) => node.id !== data.id) : [...props.modelValue, { name: nodeName, id: data.id }];
-      emit("update:modelValue", updatedNodes);
-      updateNodeClasses([data.id], !isPinned2);
-      if (!isPinned2) {
-        telemetry.track("User selected node to be mocked", {
-          node_id: data.id,
-          test_id: testId.value
-        });
-      }
-    }
-    function isPinButtonVisible(outputs, inputs) {
-      return outputs.length === 1 && inputs.length >= 1;
-    }
-    const isPinned = (data) => props.modelValue.some((node) => node.id === data.id);
-    onNodesInitialized(async () => {
-      await fitView();
-      isLoading.value = false;
-      await zoomTo(0.7, { duration: 400 });
-    });
-    onMounted(loadData);
-    return (_ctx, _cache) => {
-      const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_N8nText = resolveComponent("N8nText");
-      const _component_N8nSpinner = resolveComponent("N8nSpinner");
-      const _component_N8nButton = resolveComponent("N8nButton");
-      const _component_Canvas = __unplugin_components_0$1;
-      return unref(mappedNodes).length === 0 ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        class: normalizeClass(_ctx.$style.noNodes)
-      }, [
-        createVNode(_component_N8nHeading, {
-          size: "large",
-          bold: true,
-          class: normalizeClass(_ctx.$style.noNodesTitle)
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pinNodes.noNodes.title")), 1)
-          ]),
-          _: 1
-        }, 8, ["class"]),
-        createVNode(_component_N8nText, null, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pinNodes.noNodes.description")), 1)
-          ]),
-          _: 1
-        })
-      ], 2)) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: normalizeClass(_ctx.$style.container)
-      }, [
-        isLoading.value ? (openBlock(), createBlock(_component_N8nSpinner, {
-          key: 0,
-          size: "xlarge",
-          type: "dots",
-          class: normalizeClass(_ctx.$style.spinner)
-        }, null, 8, ["class"])) : createCommentVNode("", true),
-        createVNode(_component_Canvas, {
-          id: canvasId.value,
-          loading: isLoading.value,
-          class: normalizeClass({ [_ctx.$style.canvas]: true }),
-          nodes: unref(mappedNodes),
-          connections: unref(mappedConnections),
-          "show-bug-reporting-button": false,
-          "read-only": true,
-          "event-bus": unref(eventBus)
-        }, {
-          nodeToolbar: withCtx(({ data, outputs, inputs }) => [
-            isPinButtonVisible(outputs, inputs) ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass({
-                [_ctx.$style.pinButtonContainer]: true,
-                [_ctx.$style.pinButtonContainerPinned]: isPinned(data)
-              })
-            }, [
-              createVNode(unref(N8nTooltip), { placement: "left" }, {
-                content: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.nodesPinning.pinButtonTooltip")), 1)
-                ]),
-                default: withCtx(() => [
-                  isPinned(data) ? (openBlock(), createBlock(_component_N8nButton, {
-                    key: 0,
-                    icon: "thumbtack",
-                    block: "",
-                    type: "secondary",
-                    class: normalizeClass(_ctx.$style.customSecondary),
-                    "data-test-id": "node-pin-button",
-                    onClick: ($event) => onPinButtonClick(data)
-                  }, {
-                    default: withCtx(() => _cache[0] || (_cache[0] = [
-                      createTextVNode(" Un Mock ")
-                    ])),
-                    _: 2
-                  }, 1032, ["class", "onClick"])) : (openBlock(), createBlock(_component_N8nButton, {
-                    key: 1,
-                    icon: "thumbtack",
-                    block: "",
-                    type: "secondary",
-                    "data-test-id": "node-pin-button",
-                    onClick: ($event) => onPinButtonClick(data)
-                  }, {
-                    default: withCtx(() => _cache[1] || (_cache[1] = [
-                      createTextVNode(" Mock ")
-                    ])),
-                    _: 2
-                  }, 1032, ["onClick"]))
-                ]),
-                _: 2
-              }, 1024)
-            ], 2)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }, 8, ["id", "loading", "class", "nodes", "connections", "event-bus"])
-      ], 2));
-    };
-  }
-});
-const container$1 = "_container_z719h_123";
-const pinButtonContainer = "_pinButtonContainer_z719h_128";
-const pinButtonContainerPinned = "_pinButtonContainerPinned_z719h_139";
-const customSecondary = "_customSecondary_z719h_143";
-const spinner = "_spinner_z719h_152";
-const noNodes = "_noNodes_z719h_159";
-const style0$8 = {
-  container: container$1,
-  pinButtonContainer,
-  pinButtonContainerPinned,
-  customSecondary,
-  spinner,
-  noNodes
-};
-const cssModules$8 = {
-  "$style": style0$8
-};
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+import { u as useTestDefinitionForm } from "./useTestDefinitionForm-8dJH3v29.js";
+import { _ as _export_sfc, i as createElementBlock, g as openBlock, k as createBaseVNode, n as normalizeClass, d as defineComponent, r as ref, $ as useCssModule, q as computed, h as resolveComponent, m as unref, j as createVNode, f as createCommentVNode, aQ as N8nTooltip, w as withCtx, e as createBlock, c0 as N8nText, x as renderSlot, F as Fragment, l as createTextVNode, t as toDisplayString, d7 as InfoTip, c as useI18n, g7 as ne, bu as useTemplateRef, D as renderList, g8 as N8nInput, aS as _sfc_main$a, c1 as N8nButton, z as nextTick, T as useWorkflowsStore, bs as useNodeTypesStore, U as useRoute, b as useRouter, fH as useModel, o as onMounted, cS as N8nHeading, g9 as _sfc_main$b, b1 as mergeProps, ag as useTelemetry, a3 as useProjectsStore, ga as SAMPLE_EVALUATION_WORKFLOW, aR as N8nLink, gb as __unplugin_components_0, V as VIEWS, fG as mergeModels, gc as Tag, gd as NODE_PINNING_MODAL_KEY, ge as __unplugin_components_0$1, ai as useMessage, d$ as dateFormat, bo as watchEffect, aA as withDirectives, aB as vShow, gf as TestTableBase, c4 as N8nIcon, B as normalizeStyle, K as useDebounce, a as useToast, b$ as useTestDefinitionStore, fR as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, gg as InlineNameEdit } from "./index-CyVlLoqB.js";
+import { u as useVueFlow, a as useCanvasMapping, C as Canvas, b as CanvasNode } from "./useCanvasMapping-BCP7UO9p.js";
+import { a as useCanvasOperations } from "./useCanvasOperations-Ctquo5LL.js";
+import { L as Line } from "./index-tzkIB4Tg.js";
+import "./usePinnedData-CtRDhd6k.js";
+import "./useRunWorkflow-D9JIEr1s.js";
+import "./pushConnection.store-BhUCpqAg.js";
 const blockArrow = "_blockArrow_hbkir_123";
 const stalk = "_stalk_hbkir_129";
 const arrowHead = "_arrowHead_hbkir_136";
-const style0$7 = {
+const style0$8 = {
   blockArrow,
   stalk,
   arrowHead
 };
-const _sfc_main$8 = {};
+const _sfc_main$9 = {};
 function _sfc_render(_ctx, _cache) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(_ctx.$style.blockArrow)
@@ -240,11 +27,11 @@ function _sfc_render(_ctx, _cache) {
     }, null, 2)
   ], 2);
 }
-const cssModules$7 = {
-  "$style": style0$7
+const cssModules$8 = {
+  "$style": style0$8
 };
-const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render], ["__cssModules", cssModules$7]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const BlockArrow = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render], ["__cssModules", cssModules$8]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "EvaluationStep",
   props: {
     title: { default: "" },
@@ -411,7 +198,7 @@ const infoTip = "_infoTip_1h8fm_172";
 const actions = "_actions_1h8fm_180";
 const cardContent = "_cardContent_1h8fm_186";
 const cardContentWrapper = "_cardContentWrapper_1h8fm_192";
-const style0$6 = {
+const style0$7 = {
   evaluationStep,
   evaluationTooltip,
   icon,
@@ -425,11 +212,11 @@ const style0$6 = {
   cardContentWrapper,
   "has-issues": "_has-issues_1h8fm_196"
 };
-const cssModules$6 = {
-  "$style": style0$6
+const cssModules$7 = {
+  "$style": style0$7
 };
-const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "MetricsInput",
   props: {
     modelValue: {}
@@ -491,13 +278,219 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const metricItem = "_metricItem_1hbcq_123";
-const style0$5 = {
+const style0$6 = {
   metricItem
 };
+const cssModules$6 = {
+  "$style": style0$6
+};
+const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "NodesPinning",
+  props: {
+    "modelValue": { required: true },
+    "modelModifiers": {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const workflowsStore = useWorkflowsStore();
+    const nodeTypesStore = useNodeTypesStore();
+    const route = useRoute();
+    const router = useRouter();
+    const locale = useI18n();
+    const telemetry = useTelemetry();
+    const { resetWorkspace, initializeWorkspace } = useCanvasOperations({ router });
+    const uuid = crypto.randomUUID();
+    const model = useModel(__props, "modelValue");
+    const isLoading = ref(false);
+    const workflowId = computed(() => route.params.name);
+    const testId = computed(() => route.params.testId);
+    const workflow = computed(() => workflowsStore.getWorkflowById(workflowId.value));
+    const workflowObject = computed(() => workflowsStore.getCurrentWorkflow(true));
+    const canvasId = computed(() => `${uuid}-${testId.value}`);
+    const { onNodesInitialized, fitView, zoomTo, onNodeClick, viewport } = useVueFlow({
+      id: canvasId.value
+    });
+    const nodes = computed(() => workflow.value.nodes ?? []);
+    const connections = computed(() => workflow.value.connections);
+    const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
+      nodes,
+      connections,
+      workflowObject
+    });
+    async function loadData() {
+      isLoading.value = true;
+      workflowsStore.resetState();
+      resetWorkspace();
+      await Promise.all([
+        nodeTypesStore.getNodeTypes(),
+        workflowsStore.fetchWorkflow(workflowId.value)
+      ]);
+      workflow.value.pinData = {};
+      initializeWorkspace(workflow.value);
+    }
+    function getNodeNameById(id) {
+      return mappedNodes.value.find((node) => node.id === id)?.data?.name;
+    }
+    function isMocked(data) {
+      return model.value.some((node) => node.id === data.id);
+    }
+    function canBeMocked(outputs, inputs) {
+      return outputs.length === 1 && inputs.length >= 1;
+    }
+    function handleNodeClick(data) {
+      const nodeName = getNodeNameById(data.id);
+      if (!nodeName || !canBeMocked(data.outputs, data.inputs)) return;
+      const mocked = isMocked(data);
+      model.value = mocked ? model.value.filter((node) => node.id !== data.id) : model.value.concat({ name: nodeName, id: data.id });
+      if (!mocked) {
+        telemetry.track("User selected node to be mocked", {
+          node_id: data.id,
+          test_id: testId.value
+        });
+      }
+    }
+    function tooltipContent(data) {
+      if (nodeTypesStore.isTriggerNode(data.type)) {
+        return locale.baseText("testDefinition.edit.nodesPinning.triggerTooltip");
+      }
+      if (!canBeMocked(data.outputs, data.inputs)) {
+        return;
+      }
+      if (isMocked(data)) {
+        return locale.baseText("testDefinition.edit.nodesPinning.pinButtonTooltip.pinned");
+      } else {
+        return locale.baseText("testDefinition.edit.nodesPinning.pinButtonTooltip");
+      }
+    }
+    function tooltipOffset(data) {
+      if (nodeTypesStore.isTriggerNode(data.type)) return;
+      return 45 * viewport.value.zoom;
+    }
+    function tooltipProps(data) {
+      const content2 = tooltipContent(data);
+      return {
+        disabled: !content2,
+        content: content2,
+        offset: tooltipOffset(data)
+      };
+    }
+    onNodeClick(({ node }) => handleNodeClick(node.data));
+    onNodesInitialized(async () => {
+      await fitView();
+      await zoomTo(0.7);
+      await new Promise((resolve) => setTimeout(resolve, 400));
+      isLoading.value = false;
+    });
+    onMounted(loadData);
+    return (_ctx, _cache) => {
+      return unref(mappedNodes).length === 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(_ctx.$style.noNodes)
+      }, [
+        createVNode(unref(N8nHeading), {
+          size: "large",
+          bold: true,
+          class: normalizeClass(_ctx.$style.noNodesTitle)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pinNodes.noNodes.title")), 1)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createVNode(unref(N8nText), null, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pinNodes.noNodes.description")), 1)
+          ]),
+          _: 1
+        })
+      ], 2)) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        isLoading.value ? (openBlock(), createBlock(unref(_sfc_main$b), {
+          key: 0,
+          size: "large",
+          type: "dots",
+          class: normalizeClass(_ctx.$style.spinner)
+        }, null, 8, ["class"])) : createCommentVNode("", true),
+        createVNode(Canvas, {
+          id: canvasId.value,
+          loading: isLoading.value,
+          nodes: unref(mappedNodes),
+          connections: unref(mappedConnections),
+          "show-bug-reporting-button": false,
+          "read-only": true
+        }, {
+          node: withCtx(({ nodeProps }) => [
+            createVNode(unref(N8nTooltip), mergeProps({ placement: "top" }, tooltipProps(nodeProps.data)), {
+              default: withCtx(() => [
+                createVNode(CanvasNode, mergeProps(nodeProps, {
+                  class: {
+                    [_ctx.$style.isTrigger]: unref(nodeTypesStore).isTriggerNode(nodeProps.data.type),
+                    [_ctx.$style.mockNode]: true
+                  }
+                }), {
+                  toolbar: withCtx(({ data, outputs, inputs }) => [
+                    canBeMocked(outputs, inputs) ? (openBlock(), createElementBlock("div", {
+                      key: 0,
+                      class: normalizeClass({
+                        [_ctx.$style.pinButtonContainer]: true,
+                        [_ctx.$style.pinButtonContainerPinned]: isMocked(data)
+                      })
+                    }, [
+                      createVNode(unref(N8nButton), {
+                        icon: "thumbtack",
+                        block: "",
+                        type: "secondary",
+                        class: normalizeClass({ [_ctx.$style.customSecondary]: isMocked(data) }),
+                        "data-test-id": "node-pin-button"
+                      }, {
+                        default: withCtx(() => [
+                          isMocked(data) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            createTextVNode(toDisplayString(unref(locale).baseText("contextMenu.unpin")), 1)
+                          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                            createTextVNode(toDisplayString(unref(locale).baseText("contextMenu.pin")), 1)
+                          ], 64))
+                        ]),
+                        _: 2
+                      }, 1032, ["class"])
+                    ], 2)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, 1040, ["class"])
+              ]),
+              _: 2
+            }, 1040)
+          ]),
+          _: 1
+        }, 8, ["id", "loading", "nodes", "connections"])
+      ], 2));
+    };
+  }
+});
+const mockNode = "_mockNode_7xdc7_123";
+const isTrigger = "_isTrigger_7xdc7_127";
+const container$1 = "_container_7xdc7_131";
+const pinButtonContainer = "_pinButtonContainer_7xdc7_138";
+const pinButtonContainerPinned = "_pinButtonContainerPinned_7xdc7_149";
+const customSecondary = "_customSecondary_7xdc7_153";
+const spinner = "_spinner_7xdc7_162";
+const noNodes = "_noNodes_7xdc7_169";
+const style0$5 = {
+  mockNode,
+  isTrigger,
+  container: container$1,
+  pinButtonContainer,
+  pinButtonContainerPinned,
+  customSecondary,
+  spinner,
+  noNodes
+};
 const cssModules$5 = {
   "$style": style0$5
 };
-const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
+const NodesPinning = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
 const _hoisted_1$3 = { class: "mt-xs" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowSelector",
@@ -558,7 +551,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
       window.open(href, "_blank");
     };
     return (_ctx, _cache) => {
-      const _component_WorkflowSelectorParameterInput = __unplugin_components_0$2;
+      const _component_WorkflowSelectorParameterInput = __unplugin_components_0;
       return openBlock(), createElementBlock("div", _hoisted_1$3, [
         !_ctx.modelValue.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createVNode(unref(N8nButton), {
@@ -661,7 +654,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     );
     const metrics = useModel(__props, "metrics");
     const mockedNodes = useModel(__props, "mockedNodes");
-    const nodePinningModal = ref(null);
     const selectedTag = computed(() => props.tagsById[tags.value.value[0]] ?? {});
     function openExecutionsView() {
       emit("openExecutionsViewForTag");
@@ -669,9 +661,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
       const _component_i18n_t = resolveComponent("i18n-t");
-      const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_NodesPinning = __unplugin_components_0;
-      const _component_Modal = __unplugin_components_1;
+      const _component_Modal = __unplugin_components_0$1;
       return openBlock(), createElementBlock("div", null, [
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.editForm)
@@ -814,24 +804,24 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, 8, ["title", "issues", "description", "tooltip", "external-tooltip"])
         ], 2),
         createVNode(_component_Modal, {
-          ref_key: "nodePinningModal",
-          ref: nodePinningModal,
-          width: "80vw",
-          height: "85vh",
+          width: "calc(100% - (48px * 2))",
+          height: "calc(100% - (48px * 2))",
+          "custom-class": _ctx.$style.pinnigModal,
           name: unref(NODE_PINNING_MODAL_KEY)
         }, {
           header: withCtx(() => [
-            createVNode(_component_N8nHeading, {
-              size: "large",
-              bold: true
+            createVNode(unref(N8nHeading), {
+              tag: "h3",
+              size: "xlarge",
+              color: "text-dark",
+              class: "mb-2xs"
             }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.selectNodes")), 1)
               ]),
               _: 1
             }),
-            _cache[6] || (_cache[6] = createBaseVNode("br", null, null, -1)),
-            createVNode(unref(N8nText), null, {
+            createVNode(unref(N8nText), { color: "text-base" }, {
               default: withCtx(() => [
                 createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.modal.description")), 1)
               ]),
@@ -839,21 +829,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             })
           ]),
           content: withCtx(() => [
-            createVNode(_component_NodesPinning, {
+            createVNode(NodesPinning, {
               modelValue: mockedNodes.value,
               "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => mockedNodes.value = $event),
               "data-test-id": "nodes-pinning-modal"
             }, null, 8, ["modelValue"])
           ]),
           _: 1
-        }, 8, ["name"])
+        }, 8, ["custom-class", "name"])
       ]);
     };
   }
 });
-const nestedSteps = "_nestedSteps_1784n_123";
-const tagInputTag = "_tagInputTag_1784n_128";
+const pinnigModal = "_pinnigModal_1qbos_123";
+const nestedSteps = "_nestedSteps_1qbos_128";
+const tagInputTag = "_tagInputTag_1qbos_133";
 const style0$4 = {
+  pinnigModal,
   nestedSteps,
   tagInputTag
 };