n8n-editor-ui 1.73.0 → 1.74.1

package/dist/assets/{TestDefinitionEditView-CAgd51U-.js → TestDefinitionEditView-CEfQepq8.js}

@@ -1,6 +1,175 @@
-import { _ as _export_sfc, c as openBlock, h as createElementBlock, n as normalizeClass, r as ref, q as computed, d as defineComponent, i as createVNode, l as unref, j as createBaseVNode, F as Fragment, t as toDisplayString, e as createBlock, g as useI18n, m as resolveComponent, w as withCtx, s as renderSlot, f as createCommentVNode, k as createTextVNode, ay as withDirectives, az as vShow, hH as ElCollapseTransition, y as nextTick, A as renderList, C as createEventBus, hy as _sfc_main$8, hI as __unplugin_components_0$1, b as useRouter, U as useRoute, J as useDebounce, a as useToast, hw as useAnnotationTagsStore, o as onMounted, V as VIEWS, H as watch } from "./index-DYxqsGB9.js";
-import { u as useTestDefinitionStore } from "./testDefinition.store.ee-D3IYMf-K.js";
-const arrowConnector = "_arrowConnector_1ffe6_1";
+import { f as useCanvasOperations, d as useVueFlow, e as useCanvasMapping, _ as __unplugin_components_0$1 } from "./useCanvasOperations-BsWyQUek.js";
+import { d as defineComponent, T as useWorkflowsStore, bn as useNodeTypesStore, U as useRoute, b as useRouter, r as ref, q as computed, o as onMounted, c as openBlock, h as createElementBlock, e as createBlock, n as normalizeClass, f as createCommentVNode, i as createVNode, w as withCtx, j as createBaseVNode, k as createTextVNode, t as toDisplayString, l as unref, aO as N8nTooltip, g as useI18n, C as createEventBus, aa as useCssModule, m as resolveComponent, _ as _export_sfc, hI as useTestDefinitionStore, F as Fragment, s as renderSlot, ay as withDirectives, az as vShow, hJ as ElCollapseTransition, y as nextTick, A as renderList, hC as _sfc_main$9, hK as __unplugin_components_0$2, J as useDebounce, a as useToast, hA as useAnnotationTagsStore, K as useUIStore, V as VIEWS, H as watch, hL as TestRunsTable, hM as NODE_PINNING_MODAL_KEY, hN as Modal } from "./index-D0W-rAl_.js";
+import "./useBugReporting-BGxycXGV.js";
+import "./usePinnedData-872bXiu-.js";
+const _sfc_main$8 = /* @__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 { 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 workflow2 = 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 workflow2.value.nodes ?? [];
+    });
+    const connections = computed(() => workflow2.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(workflow2.value);
+      disableAllNodes();
+    }
+    function getNodeNameById(id) {
+      return mappedNodes.value.find((node) => node.id === id)?.data?.name;
+    }
+    function updateNodeClasses(nodeIds, isPinned) {
+      eventBus.emit("nodes:action", {
+        ids: nodeIds,
+        action: "update:node:class",
+        payload: {
+          className: style.pinnedNode,
+          add: isPinned
+        }
+      });
+      eventBus.emit("nodes:action", {
+        ids: nodeIds,
+        action: "update:node:class",
+        payload: {
+          className: style.notPinnedNode,
+          add: !isPinned
+        }
+      });
+    }
+    function disableAllNodes() {
+      const ids = mappedNodes.value.map((node) => node.id);
+      updateNodeClasses(ids, false);
+      const pinnedNodes = props.modelValue.map((node) => {
+        const matchedNode = mappedNodes.value.find(
+          (mappedNode) => mappedNode?.data?.name === node.name
+        );
+        return matchedNode?.id ?? null;
+      }).filter((n) => n !== null);
+      if (pinnedNodes.length > 0) {
+        updateNodeClasses(pinnedNodes, true);
+      }
+    }
+    function onPinButtonClick(data) {
+      const nodeName = getNodeNameById(data.id);
+      if (!nodeName) return;
+      const isPinned = props.modelValue.some((node) => node.name === nodeName);
+      const updatedNodes = isPinned ? props.modelValue.filter((node) => node.name !== nodeName) : [...props.modelValue, { name: nodeName }];
+      emit("update:modelValue", updatedNodes);
+      updateNodeClasses([data.id], !isPinned);
+    }
+    function isPinButtonVisible(outputs) {
+      return outputs.length === 1;
+    }
+    onNodesInitialized(async () => {
+      await fitView();
+      isLoading.value = false;
+      await zoomTo(0.7, { duration: 400 });
+    });
+    onMounted(loadData);
+    return (_ctx, _cache) => {
+      const _component_N8nSpinner = resolveComponent("N8nSpinner");
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
+      const _component_Canvas = __unplugin_components_0$1;
+      return openBlock(), createElementBlock("div", {
+        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 }) => [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.pinButtonContainer)
+            }, [
+              isPinButtonVisible(outputs) ? (openBlock(), createBlock(unref(N8nTooltip), {
+                key: 0,
+                placement: "left"
+              }, {
+                content: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.nodesPinning.pinButtonTooltip")), 1)
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_n8n_icon_button, {
+                    type: "tertiary",
+                    size: "large",
+                    icon: "thumbtack",
+                    class: normalizeClass(_ctx.$style.pinButton),
+                    onClick: ($event) => onPinButtonClick(data)
+                  }, null, 8, ["class", "onClick"])
+                ]),
+                _: 2
+              }, 1024)) : createCommentVNode("", true)
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["id", "loading", "class", "nodes", "connections", "event-bus"])
+      ], 2);
+    };
+  }
+});
+const container$1 = "_container_1ogu0_123";
+const pinButtonContainer = "_pinButtonContainer_1ogu0_128";
+const pinButton = "_pinButton_1ogu0_128";
+const notPinnedNode = "_notPinnedNode_1ogu0_142";
+const pinnedNode = "_pinnedNode_1ogu0_143";
+const spinner = "_spinner_1ogu0_154";
+const style0$7 = {
+  container: container$1,
+  pinButtonContainer,
+  pinButton,
+  notPinnedNode,
+  pinnedNode,
+  spinner
+};
+const cssModules$7 = {
+  "$style": style0$7
+};
+const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const arrowConnector = "_arrowConnector_1mi41_123";
 const style0$6 = {
   arrowConnector
 };
@@ -17,49 +186,56 @@ const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["rend
 function useTestDefinitionForm() {
   const evaluationsStore = useTestDefinitionStore();
   const state = ref({
-    description: "",
     name: {
-      value: `My Test [${(/* @__PURE__ */ new Date()).toLocaleString(void 0, { month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" })}]`,
-      isEditing: false,
-      tempValue: ""
+      value: `My Test ${evaluationsStore.allTestDefinitions.length + 1}`,
+      tempValue: "",
+      isEditing: false
     },
     tags: {
-      isEditing: false,
-      appliedTagIds: []
+      value: [],
+      tempValue: [],
+      isEditing: false
     },
+    description: "",
     evaluationWorkflow: {
       mode: "list",
       value: "",
       __rl: true
     },
-    metrics: [""]
+    metrics: [],
+    mockedNodes: []
   });
   const isSaving = ref(false);
   const fieldsIssues = ref([]);
   const fields = ref({});
+  const editableFields = computed(() => ({
+    name: state.value.name,
+    tags: state.value.tags
+  }));
   const loadTestData = async (testId) => {
     try {
       await evaluationsStore.fetchAll({ force: true });
       const testDefinition = evaluationsStore.testDefinitionsById[testId];
       if (testDefinition) {
-        state.value = {
-          description: testDefinition.description ?? "",
-          name: {
-            value: testDefinition.name ?? "",
-            isEditing: false,
-            tempValue: ""
-          },
-          tags: {
-            isEditing: false,
-            appliedTagIds: testDefinition.annotationTagId ? [testDefinition.annotationTagId] : []
-          },
-          evaluationWorkflow: {
-            mode: "list",
-            value: testDefinition.evaluationWorkflowId ?? "",
-            __rl: true
-          },
-          metrics: [""]
+        const metrics = await evaluationsStore.fetchMetrics(testId);
+        state.value.description = testDefinition.description ?? "";
+        state.value.name = {
+          value: testDefinition.name ?? "",
+          isEditing: false,
+          tempValue: ""
+        };
+        state.value.tags = {
+          isEditing: false,
+          value: testDefinition.annotationTagId ? [testDefinition.annotationTagId] : [],
+          tempValue: []
+        };
+        state.value.evaluationWorkflow = {
+          mode: "list",
+          value: testDefinition.evaluationWorkflowId ?? "",
+          __rl: true
         };
+        state.value.metrics = metrics;
+        state.value.mockedNodes = testDefinition.mockedNodes ?? [];
       }
     } catch (error) {
       console.error("Failed to load test data", error);
@@ -75,14 +251,34 @@ function useTestDefinitionForm() {
         workflowId,
         description: state.value.description
       };
-      const newTest = await evaluationsStore.create(params);
-      return newTest;
-    } catch (error) {
-      throw error;
+      return await evaluationsStore.create(params);
     } finally {
       isSaving.value = false;
     }
   };
+  const deleteMetric = async (metricId, testId) => {
+    await evaluationsStore.deleteMetric({ id: metricId, testDefinitionId: testId });
+    state.value.metrics = state.value.metrics.filter((metric) => metric.id !== metricId);
+  };
+  const updateMetrics = async (testId) => {
+    const promises = state.value.metrics.map(async (metric) => {
+      if (!metric.name) return;
+      if (!metric.id) {
+        const createdMetric = await evaluationsStore.createMetric({
+          name: metric.name,
+          testDefinitionId: testId
+        });
+        metric.id = createdMetric.id;
+      } else {
+        await evaluationsStore.updateMetric({
+          name: metric.name,
+          id: metric.id,
+          testDefinitionId: testId
+        });
+      }
+    });
+    await Promise.all(promises);
+  };
   const updateTest = async (testId) => {
     if (isSaving.value) return;
     isSaving.value = true;
@@ -98,54 +294,59 @@ function useTestDefinitionForm() {
       if (state.value.evaluationWorkflow.value) {
         params.evaluationWorkflowId = state.value.evaluationWorkflow.value.toString();
       }
-      const annotationTagId = state.value.tags.appliedTagIds[0];
+      const annotationTagId = state.value.tags.value[0];
       if (annotationTagId) {
         params.annotationTagId = annotationTagId;
       }
+      if (state.value.mockedNodes.length > 0) {
+        params.mockedNodes = state.value.mockedNodes;
+      }
       return await evaluationsStore.update({ ...params, id: testId });
-    } catch (error) {
-      throw error;
     } finally {
       isSaving.value = false;
     }
   };
-  const startEditing = async (field2) => {
-    if (field2 === "name") {
-      state.value.name.tempValue = state.value.name.value;
-      state.value.name.isEditing = true;
-    } else {
-      state.value.tags.isEditing = true;
+  function startEditing(field2) {
+    const fieldObj = editableFields.value[field2];
+    if (fieldObj.isEditing) {
+      return;
     }
-  };
-  const saveChanges = (field2) => {
-    if (field2 === "name") {
-      state.value.name.value = state.value.name.tempValue;
-      state.value.name.isEditing = false;
+    if (Array.isArray(fieldObj.value)) {
+      fieldObj.tempValue = [...fieldObj.value];
     } else {
-      state.value.tags.isEditing = false;
+      fieldObj.tempValue = fieldObj.value;
     }
-  };
-  const cancelEditing = (field2) => {
-    if (field2 === "name") {
-      state.value.name.isEditing = false;
-      state.value.name.tempValue = "";
+    fieldObj.isEditing = true;
+  }
+  function saveChanges(field2) {
+    const fieldObj = editableFields.value[field2];
+    fieldObj.value = Array.isArray(fieldObj.tempValue) ? [...fieldObj.tempValue] : fieldObj.tempValue;
+    fieldObj.isEditing = false;
+  }
+  function cancelEditing(field2) {
+    const fieldObj = editableFields.value[field2];
+    if (Array.isArray(fieldObj.value)) {
+      fieldObj.tempValue = [...fieldObj.value];
     } else {
-      state.value.tags.isEditing = false;
+      fieldObj.tempValue = fieldObj.value;
     }
-  };
-  const handleKeydown = (event, field2) => {
+    fieldObj.isEditing = false;
+  }
+  function handleKeydown(event, field2) {
     if (event.key === "Escape") {
       cancelEditing(field2);
     } else if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       saveChanges(field2);
     }
-  };
+  }
   return {
     state,
     fields,
     isSaving: computed(() => isSaving.value),
     fieldsIssues: computed(() => fieldsIssues.value),
+    deleteMetric,
+    updateMetrics,
     loadTestData,
     createTest,
     updateTest,
@@ -208,11 +409,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const header$1 = "_header_1htk6_1";
-const editInputButton$1 = "_editInputButton_1htk6_7";
-const title$1 = "_title_1htk6_11";
-const titleText = "_titleText_1htk6_22";
-const backButton = "_backButton_1htk6_35";
+const header$1 = "_header_vi783_123";
+const editInputButton$1 = "_editInputButton_vi783_129";
+const title$1 = "_title_vi783_133";
+const titleText = "_titleText_vi783_144";
+const backButton = "_backButton_vi783_157";
 const style0$5 = {
   header: header$1,
   editInputButton: editInputButton$1,
@@ -258,7 +459,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const field = "_field_15r7v_1";
+const field = "_field_2al59_123";
 const style0$4 = {
   field
 };
@@ -273,7 +474,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     title: {},
     warning: { type: Boolean, default: false },
     small: { type: Boolean, default: false },
-    expanded: { type: Boolean, default: true }
+    expanded: { type: Boolean, default: true },
+    tooltip: { default: "" }
   },
   setup(__props) {
     const props = __props;
@@ -281,6 +483,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const isExpanded = ref(props.expanded);
     const contentRef = ref(null);
     const containerRef = ref(null);
+    const isTooltipVisible = ref(false);
     const toggleExpand = async () => {
       isExpanded.value = !isExpanded.value;
       if (isExpanded.value) {
@@ -290,15 +493,40 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }
       }
     };
+    const showTooltip = () => {
+      isTooltipVisible.value = true;
+    };
+    const hideTooltip = () => {
+      isTooltipVisible.value = false;
+    };
     return (_ctx, _cache) => {
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
         ref: containerRef,
-        class: normalizeClass([_ctx.$style.evaluationStep, _ctx.small && _ctx.$style.small])
+        class: normalizeClass([_ctx.$style.evaluationStep, _ctx.small && _ctx.$style.small]),
+        "data-test-id": "evaluation-step"
       }, [
+        createVNode(unref(N8nTooltip), {
+          disabled: !_ctx.tooltip,
+          placement: "right",
+          offset: 25,
+          visible: isTooltipVisible.value
+        }, {
+          content: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.tooltip), 1)
+          ]),
+          default: withCtx(() => [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.contentPlaceholder)
+            }, null, 2)
+          ]),
+          _: 1
+        }, 8, ["disabled", "visible"]),
         createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.content)
+          class: normalizeClass(_ctx.$style.content),
+          onMouseenter: showTooltip,
+          onMouseleave: hideTooltip
         }, [
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.header)
@@ -320,6 +548,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.collapseButton),
               "aria-expanded": isExpanded.value,
               "aria-controls": "content-" + _ctx.title.replace(/\s+/g, "-"),
+              "data-test-id": "evaluation-step-collapse-button",
               onClick: toggleExpand
             }, [
               createTextVNode(toDisplayString(isExpanded.value ? unref(locale).baseText("testDefinition.edit.step.collapse") : unref(locale).baseText("testDefinition.edit.step.expand")) + " ", 1),
@@ -337,7 +566,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                 createBaseVNode("div", {
                   ref_key: "contentRef",
                   ref: contentRef,
-                  class: normalizeClass(_ctx.$style.cardContent)
+                  class: normalizeClass(_ctx.$style.cardContent),
+                  "data-test-id": "evaluation-step-content"
                 }, [
                   renderSlot(_ctx.$slots, "cardContent")
                 ], 2)
@@ -347,28 +577,30 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           })) : createCommentVNode("", true)
-        ], 2)
+        ], 34)
       ], 2);
     };
   }
 });
-const evaluationStep = "_evaluationStep_efi3y_1";
-const small = "_small_efi3y_13";
-const icon = "_icon_efi3y_17";
-const warning = "_warning_efi3y_26";
-const content$1 = "_content_efi3y_30";
-const header = "_header_efi3y_35";
-const title = "_title_efi3y_41";
-const warningIcon = "_warningIcon_efi3y_47";
-const cardContent = "_cardContent_efi3y_51";
-const collapseButton = "_collapseButton_efi3y_56";
-const cardContentWrapper = "_cardContentWrapper_efi3y_69";
+const evaluationStep = "_evaluationStep_11knb_123";
+const small = "_small_11knb_135";
+const contentPlaceholder = "_contentPlaceholder_11knb_139";
+const icon = "_icon_11knb_148";
+const warning = "_warning_11knb_157";
+const content = "_content_11knb_139";
+const header = "_header_11knb_166";
+const title = "_title_11knb_172";
+const warningIcon = "_warningIcon_11knb_178";
+const cardContent = "_cardContent_11knb_182";
+const collapseButton = "_collapseButton_11knb_187";
+const cardContentWrapper = "_cardContentWrapper_11knb_200";
 const style0$3 = {
   evaluationStep,
   small,
+  contentPlaceholder,
   icon,
   warning,
-  content: content$1,
+  content,
   header,
   title,
   warningIcon,
@@ -386,14 +618,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: { default: () => ({
       isEditing: false,
-      appliedTagIds: []
+      value: [],
+      tempValue: []
     }) },
     allTags: {},
     tagsById: {},
     isLoading: { type: Boolean },
     startEditing: {},
     saveChanges: {},
-    cancelEditing: {}
+    cancelEditing: {},
+    createTag: { type: Function, default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -405,17 +639,16 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       return props.tagsById[tagId]?.name ?? "";
     });
     function updateTags(tags) {
-      const newTags = tags[0] ? [tags[0]] : [];
       emit("update:modelValue", {
         ...props.modelValue,
-        appliedTagIds: newTags
+        tempValue: tags
       });
     }
     return (_ctx, _cache) => {
       const _component_n8n_text = resolveComponent("n8n-text");
       const _component_n8n_tag = resolveComponent("n8n-tag");
       const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
-      const _component_TagsDropdown = _sfc_main$8;
+      const _component_TagsDropdown = _sfc_main$9;
       const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_component_n8n_input_label, {
@@ -429,7 +662,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.tagsRead),
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.startEditing("tags"))
             }, [
-              _ctx.modelValue.appliedTagIds.length === 0 ? (openBlock(), createBlock(_component_n8n_text, {
+              _ctx.modelValue.value.length === 0 ? (openBlock(), createBlock(_component_n8n_text, {
                 key: 0,
                 size: "small"
               }, {
@@ -438,7 +671,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })) : createCommentVNode("", true),
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue.appliedTagIds, (tagId) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue.value, (tagId) => {
                 return openBlock(), createBlock(_component_n8n_tag, {
                   key: tagId,
                   text: getTagName.value(tagId),
@@ -454,36 +687,30 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["class"])
             ], 2)) : (openBlock(), createBlock(_component_TagsDropdown, {
               key: 1,
-              "model-value": _ctx.modelValue.appliedTagIds,
+              "model-value": _ctx.modelValue.tempValue,
               placeholder: unref(locale).baseText("executionAnnotationView.chooseOrCreateATag"),
-              "create-enabled": false,
+              "create-enabled": _ctx.modelValue.tempValue.length === 0,
               "all-tags": _ctx.allTags,
               "is-loading": _ctx.isLoading,
               "tags-by-id": _ctx.tagsById,
               "data-test-id": "workflow-tags-dropdown",
               "event-bus": unref(tagsEventBus),
+              "create-tag": _ctx.createTag,
+              "manage-enabled": false,
+              "multiple-limit": 1,
               "onUpdate:modelValue": updateTags,
               onEsc: _cache[1] || (_cache[1] = ($event) => _ctx.cancelEditing("tags")),
               onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.saveChanges("tags"))
-            }, null, 8, ["model-value", "placeholder", "all-tags", "is-loading", "tags-by-id", "event-bus"]))
-          ]),
-          _: 1
-        }, 8, ["label"]),
-        createVNode(_component_n8n_text, {
-          size: "small",
-          color: "text-light"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.tagsHelpText")), 1)
+            }, null, 8, ["model-value", "placeholder", "create-enabled", "all-tags", "is-loading", "tags-by-id", "event-bus", "create-tag"]))
           ]),
           _: 1
-        })
+        }, 8, ["label"])
       ]);
     };
   }
 });
-const tagsRead = "_tagsRead_ekbvu_1";
-const editInputButton = "_editInputButton_ekbvu_1";
+const tagsRead = "_tagsRead_z5pm4_123";
+const editInputButton = "_editInputButton_z5pm4_123";
 const style0$2 = {
   tagsRead,
   editInputButton
@@ -505,7 +732,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const locale = useI18n();
     return (_ctx, _cache) => {
-      const _component_WorkflowSelectorParameterInput = __unplugin_components_0$1;
+      const _component_WorkflowSelectorParameterInput = __unplugin_components_0$2;
       const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", null, [
         createVNode(_component_n8n_input_label, {
@@ -541,21 +768,25 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {}
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "deleteMetric"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const locale = useI18n();
     function addNewMetric() {
-      emit("update:modelValue", [...props.modelValue, ""]);
+      emit("update:modelValue", [...props.modelValue, { name: "" }]);
     }
-    function updateMetric(index, value) {
+    function updateMetric(index, name) {
       const newMetrics = [...props.modelValue];
-      newMetrics[index] = value;
+      newMetrics[index].name = name;
       emit("update:modelValue", newMetrics);
     }
+    function onDeleteMetric(metric) {
+      emit("deleteMetric", metric);
+    }
     return (_ctx, _cache) => {
       const _component_N8nInput = resolveComponent("N8nInput");
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
       const _component_n8n_button = resolveComponent("n8n-button");
       const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", {
@@ -571,16 +802,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               class: normalizeClass(_ctx.$style.metricsContainer)
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (metric, index) => {
-                return openBlock(), createElementBlock("div", { key: index }, [
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: normalizeClass(_ctx.$style.metricItem)
+                }, [
                   createVNode(_component_N8nInput, {
                     ref_for: true,
                     ref: `metric_${index}`,
                     "data-test-id": "evaluation-metric-item",
-                    "model-value": metric,
+                    "model-value": metric.name,
                     placeholder: unref(locale).baseText("testDefinition.edit.metricsPlaceholder"),
                     "onUpdate:modelValue": (value) => updateMetric(index, value)
-                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
-                ]);
+                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"]),
+                  createVNode(_component_n8n_icon_button, {
+                    icon: "trash",
+                    type: "text",
+                    onClick: ($event) => onDeleteMetric(metric)
+                  }, null, 8, ["onClick"])
+                ], 2);
               }), 128)),
               createVNode(_component_n8n_button, {
                 type: "tertiary",
@@ -596,12 +835,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const metricsContainer = "_metricsContainer_lwkya_1";
-const metricField = "_metricField_lwkya_7";
-const metricsDivider = "_metricsDivider_lwkya_12";
-const newMetricButton = "_newMetricButton_lwkya_17";
+const metricsContainer = "_metricsContainer_1eaf8_123";
+const metricItem = "_metricItem_1eaf8_129";
+const metricField = "_metricField_1eaf8_134";
+const metricsDivider = "_metricsDivider_1eaf8_139";
+const newMetricButton = "_newMetricButton_1eaf8_144";
 const style0$1 = {
   metricsContainer,
+  metricItem,
   metricField,
   metricsDivider,
   newMetricButton
@@ -622,26 +863,45 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const locale = useI18n();
     const { debounce } = useDebounce();
     const toast = useToast();
-    const { isLoading, allTags, tagsById, fetchAll } = useAnnotationTagsStore();
-    const testId = computed(() => props.testId ?? route.params.testId);
-    const currentWorkflowId = computed(() => route.params.name);
-    const buttonLabel = computed(
-      () => testId.value ? locale.baseText("testDefinition.edit.updateTest") : locale.baseText("testDefinition.edit.saveTest")
-    );
+    const testDefinitionStore = useTestDefinitionStore();
+    const tagsStore = useAnnotationTagsStore();
+    const uiStore = useUIStore();
     const {
       state,
       fieldsIssues,
-      isSaving,
+      cancelEditing,
       loadTestData,
       createTest,
       updateTest,
       startEditing,
       saveChanges,
-      cancelEditing,
-      handleKeydown
+      handleKeydown,
+      deleteMetric,
+      updateMetrics
     } = useTestDefinitionForm();
+    const isLoading = computed(() => tagsStore.isLoading);
+    const allTags = computed(() => tagsStore.allTags);
+    const tagsById = computed(() => tagsStore.tagsById);
+    const testId = computed(() => props.testId ?? route.params.testId);
+    const currentWorkflowId = computed(() => route.params.name);
+    const tagUsageCount = computed(
+      () => tagsStore.tagsById[state.value.tags.value[0]]?.usageCount ?? 0
+    );
+    const nodePinningModal = ref(null);
+    const modalContentWidth = ref(0);
     onMounted(async () => {
-      await fetchAll();
+      if (!testDefinitionStore.isFeatureEnabled) {
+        toast.showMessage({
+          title: locale.baseText("testDefinition.notImplemented"),
+          type: "warning"
+        });
+        void router.push({
+          name: VIEWS.WORKFLOW,
+          params: { name: router.currentRoute.value.params.name }
+        });
+        return;
+      }
+      void tagsStore.fetchAll({ withUsageCount: true });
       if (testId.value) {
         await loadTestData(testId.value);
       } else {
@@ -656,16 +916,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         } else {
           savedTest = await createTest(currentWorkflowId.value);
         }
-        if (savedTest && route.name === VIEWS.TEST_DEFINITION_EDIT) {
+        if (savedTest && route.name === VIEWS.NEW_TEST_DEFINITION) {
           await router.replace({
             name: VIEWS.TEST_DEFINITION_EDIT,
             params: { testId: savedTest.id }
           });
         }
-        toast.showMessage({
-          title: locale.baseText("testDefinition.edit.testSaved"),
-          type: "success"
-        });
       } catch (e) {
         toast.showError(e, locale.baseText("testDefinition.edit.testSaveFailed"));
       }
@@ -673,16 +929,66 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function hasIssues(key) {
       return fieldsIssues.value.some((issue) => issue.field === key);
     }
-    watch(() => state.value, debounce(onSaveTest, { debounceTime: 400 }), { deep: true });
+    async function onDeleteMetric(deletedMetric) {
+      if (deletedMetric.id) {
+        await deleteMetric(deletedMetric.id, testId.value);
+      }
+    }
+    async function handleCreateTag(tagName) {
+      try {
+        const newTag = await tagsStore.create(tagName);
+        return newTag;
+      } catch (error) {
+        toast.showError(error, "Error", error.message);
+        throw error;
+      }
+    }
+    async function openPinningModal() {
+      uiStore.openModal(NODE_PINNING_MODAL_KEY);
+    }
+    async function runTest() {
+      await testDefinitionStore.startTestRun(testId.value);
+      await testDefinitionStore.fetchTestRuns(testId.value);
+    }
+    const runs = computed(
+      () => Object.values(testDefinitionStore.testRunsById ?? {}).filter(
+        (run) => run.testDefinitionId === testId.value
+      )
+    );
+    async function onDeleteRuns(runs2) {
+      await Promise.all(
+        runs2.map(async (run) => {
+          await testDefinitionStore.deleteTestRun({ testDefinitionId: testId.value, runId: run.id });
+        })
+      );
+    }
+    watch(
+      () => state.value.metrics,
+      debounce(async () => await updateMetrics(testId.value), { debounceTime: 400 }),
+      { deep: true }
+    );
+    watch(
+      () => [
+        state.value.description,
+        state.value.name,
+        state.value.tags,
+        state.value.evaluationWorkflow,
+        state.value.mockedNodes
+      ],
+      debounce(onSaveTest, { debounceTime: 400 }),
+      { deep: true }
+    );
     return (_ctx, _cache) => {
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
       const _component_BlockArrow = __unplugin_components_0;
       const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_N8nHeading = resolveComponent("N8nHeading");
+      const _component_NodesPinning = __unplugin_components_1;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
         createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.content)
+          class: normalizeClass(_ctx.$style.formContent)
         }, [
           createVNode(EvaluationHeader, {
             modelValue: unref(state).name,
@@ -692,37 +998,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "save-changes": unref(saveChanges),
             "handle-keydown": unref(handleKeydown)
           }, null, 8, ["modelValue", "class", "start-editing", "save-changes", "handle-keydown"]),
-          createVNode(EvaluationStep, {
-            class: normalizeClass(_ctx.$style.step),
-            title: unref(locale).baseText("testDefinition.edit.description"),
-            expanded: false
-          }, {
-            icon: withCtx(() => [
-              createVNode(_component_font_awesome_icon, {
-                icon: "thumbtack",
-                size: "lg"
-              })
-            ]),
-            cardContent: withCtx(() => [
-              createVNode(DescriptionInput, {
-                modelValue: unref(state).description,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).description = $event)
-              }, null, 8, ["modelValue"])
-            ]),
-            _: 1
-          }, 8, ["class", "title"]),
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.panelIntro)
-          }, toDisplayString(unref(locale).baseText("testDefinition.edit.step.intro")), 3),
-          createVNode(_component_BlockArrow, {
-            class: normalizeClass(_ctx.$style.introArrow)
-          }, null, 8, ["class"]),
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.panelBlock)
           }, [
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.executions")
+              title: unref(locale).baseText("testDefinition.edit.description"),
+              expanded: false,
+              tooltip: unref(locale).baseText("testDefinition.edit.description.tooltip")
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "thumbtack",
+                  size: "lg"
+                })
+              ]),
+              cardContent: withCtx(() => [
+                createVNode(DescriptionInput, {
+                  modelValue: unref(state).description,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).description = $event)
+                }, null, 8, ["modelValue"])
+              ]),
+              _: 1
+            }, 8, ["class", "title", "tooltip"]),
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.panelIntro)
+            }, toDisplayString(unref(locale).baseText("testDefinition.edit.step.intro")), 3),
+            createVNode(_component_BlockArrow, {
+              class: normalizeClass(_ctx.$style.introArrow)
+            }, null, 8, ["class"]),
+            createVNode(EvaluationStep, {
+              class: normalizeClass(_ctx.$style.step),
+              title: unref(locale).baseText("testDefinition.edit.step.executions", {
+                adjustToNumber: tagUsageCount.value
+              }),
+              tooltip: unref(locale).baseText("testDefinition.edit.step.executions.tooltip")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -735,16 +1045,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   modelValue: unref(state).tags,
                   "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).tags = $event),
                   class: normalizeClass({ "has-issues": hasIssues("tags") }),
-                  "all-tags": unref(allTags),
-                  "tags-by-id": unref(tagsById),
-                  "is-loading": unref(isLoading),
+                  "all-tags": allTags.value,
+                  "tags-by-id": tagsById.value,
+                  "is-loading": isLoading.value,
                   "start-editing": unref(startEditing),
                   "save-changes": unref(saveChanges),
-                  "cancel-editing": unref(cancelEditing)
+                  "cancel-editing": unref(cancelEditing),
+                  "create-tag": handleCreateTag
                 }, null, 8, ["modelValue", "class", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "cancel-editing"])
               ]),
               _: 1
-            }, 8, ["class", "title"]),
+            }, 8, ["class", "title", "tooltip"]),
             createBaseVNode("div", {
               class: normalizeClass(_ctx.$style.evaluationArrows)
             }, [
@@ -753,9 +1064,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 2),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.nodes"),
+              title: unref(locale).baseText("testDefinition.edit.step.mockedNodes", {
+                adjustToNumber: unref(state).mockedNodes?.length ?? 0
+              }),
               small: true,
-              expanded: false
+              expanded: true,
+              tooltip: unref(locale).baseText("testDefinition.edit.step.nodes.tooltip")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -764,14 +1078,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               ]),
               cardContent: withCtx(() => [
-                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.step.mockedNodes", { adjustToNumber: 0 })), 1)
+                createVNode(_component_n8n_button, {
+                  size: "small",
+                  "data-test-id": "select-nodes-button",
+                  label: unref(locale).baseText("testDefinition.edit.selectNodes"),
+                  type: "tertiary",
+                  onClick: openPinningModal
+                }, null, 8, ["label"])
               ]),
               _: 1
-            }, 8, ["class", "title"]),
+            }, 8, ["class", "title", "tooltip"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
               title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
-              small: true
+              small: true,
+              tooltip: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.tooltip")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -780,10 +1101,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 1
-            }, 8, ["class", "title"]),
+            }, 8, ["class", "title", "tooltip"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.compareExecutions")
+              title: unref(locale).baseText("testDefinition.edit.step.compareExecutions"),
+              tooltip: unref(locale).baseText("testDefinition.edit.step.compareExecutions.tooltip")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -799,10 +1121,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["modelValue", "class"])
               ]),
               _: 1
-            }, 8, ["class", "title"]),
+            }, 8, ["class", "title", "tooltip"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.metrics")
+              title: unref(locale).baseText("testDefinition.edit.step.metrics"),
+              tooltip: unref(locale).baseText("testDefinition.edit.step.metrics.tooltip")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -814,42 +1137,107 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 createVNode(MetricsInput, {
                   modelValue: unref(state).metrics,
                   "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(state).metrics = $event),
-                  class: normalizeClass({ "has-issues": hasIssues("metrics") })
+                  class: normalizeClass({ "has-issues": hasIssues("metrics") }),
+                  onDeleteMetric
                 }, null, 8, ["modelValue", "class"])
               ]),
               _: 1
-            }, 8, ["class", "title"])
+            }, 8, ["class", "title", "tooltip"])
           ], 2),
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.footer)
-          }, [
-            createVNode(_component_n8n_button, {
-              type: "primary",
-              "data-test-id": "run-test-button",
-              label: buttonLabel.value,
-              loading: unref(isSaving),
-              onClick: onSaveTest
-            }, null, 8, ["label", "loading"])
-          ], 2)
-        ], 2)
+          unref(state).evaluationWorkflow.value && unref(state).tags.value.length > 0 ? (openBlock(), createBlock(_component_n8n_button, {
+            key: 0,
+            class: normalizeClass(_ctx.$style.runTestButton),
+            size: "small",
+            "data-test-id": "run-test-button",
+            label: unref(locale).baseText("testDefinition.runTest"),
+            type: "primary",
+            onClick: runTest
+          }, null, 8, ["class", "label"])) : (openBlock(), createBlock(_component_n8n_button, {
+            key: 1,
+            class: normalizeClass(_ctx.$style.runTestButton),
+            size: "small",
+            "data-test-id": "run-test-button",
+            label: "Save Test",
+            type: "primary",
+            onClick: onSaveTest
+          }, null, 8, ["class"]))
+        ], 2),
+        runs.value.length > 0 ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(_ctx.$style.runsTable)
+        }, [
+          createVNode(_component_N8nHeading, {
+            size: "large",
+            bold: true,
+            class: normalizeClass(_ctx.$style.runsTableHeading)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pastRuns")), 1)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          createVNode(TestRunsTable, {
+            runs: runs.value,
+            selectable: true,
+            "data-test-id": "past-runs-table",
+            onDeleteRuns
+          }, null, 8, ["runs"])
+        ], 2)) : createCommentVNode("", true),
+        createVNode(Modal, {
+          ref_key: "nodePinningModal",
+          ref: nodePinningModal,
+          width: "80vw",
+          height: "85vh",
+          name: unref(NODE_PINNING_MODAL_KEY)
+        }, {
+          header: withCtx(() => [
+            createVNode(_component_N8nHeading, {
+              size: "large",
+              bold: true,
+              class: normalizeClass(_ctx.$style.runsTableHeading)
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.selectNodes")), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          content: withCtx(() => [
+            createVNode(_component_NodesPinning, {
+              modelValue: unref(state).mockedNodes,
+              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => unref(state).mockedNodes = $event),
+              width: modalContentWidth.value,
+              "data-test-id": "nodes-pinning-modal"
+            }, null, 8, ["modelValue", "width"])
+          ]),
+          _: 1
+        }, 8, ["name"])
       ], 2);
     };
   }
 });
-const container = "_container_1lz9n_1";
-const content = "_content_1lz9n_10";
-const panelBlock = "_panelBlock_1lz9n_15";
-const panelIntro = "_panelIntro_1lz9n_21";
-const step = "_step_1lz9n_30";
-const introArrow = "_introArrow_1lz9n_37";
-const evaluationArrows = "_evaluationArrows_1lz9n_42";
-const footer = "_footer_1lz9n_53";
-const workflow = "_workflow_1lz9n_59";
-const workflowSteps = "_workflowSteps_1lz9n_66";
-const sideBySide = "_sideBySide_1lz9n_73";
+const container = "_container_7ygna_123";
+const formContent = "_formContent_7ygna_133";
+const runsTableTotal = "_runsTableTotal_7ygna_142";
+const runsTable = "_runsTable_7ygna_142";
+const runsTableHeading = "_runsTableHeading_7ygna_154";
+const panelBlock = "_panelBlock_7ygna_159";
+const panelIntro = "_panelIntro_7ygna_166";
+const step = "_step_7ygna_175";
+const introArrow = "_introArrow_7ygna_182";
+const evaluationArrows = "_evaluationArrows_7ygna_187";
+const footer = "_footer_7ygna_198";
+const workflow = "_workflow_7ygna_204";
+const workflowSteps = "_workflowSteps_7ygna_211";
+const sideBySide = "_sideBySide_7ygna_218";
+const mockedNodesLabel = "_mockedNodesLabel_7ygna_226";
+const runTestButton = "_runTestButton_7ygna_231";
 const style0 = {
   container,
-  content,
+  formContent,
+  runsTableTotal,
+  runsTable,
+  runsTableHeading,
   panelBlock,
   panelIntro,
   step,
@@ -858,7 +1246,9 @@ const style0 = {
   footer,
   workflow,
   workflowSteps,
-  sideBySide
+  sideBySide,
+  mockedNodesLabel,
+  runTestButton
 };
 const cssModules = {
   "$style": style0