n8n-editor-ui 1.75.1 → 1.77.0

package/dist/assets/{TestDefinitionEditView-Cuphh86f.js → TestDefinitionEditView-DeYXSHuX.js}

@@ -1,184 +1,6 @@
-import { f as useCanvasOperations, d as useVueFlow, e as useCanvasMapping, _ as __unplugin_components_0 } from "./useCanvasOperations-DTx4vbp_.js";
-import { d as defineComponent, T as useWorkflowsStore, bp 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, aQ as N8nTooltip, g as useI18n, C as createEventBus, aa as useCssModule, m as resolveComponent, _ as _export_sfc, hM as useTestDefinitionStore, F as Fragment, s as renderSlot, ay as withDirectives, az as vShow, hN as ElCollapseTransition, y as nextTick, A as renderList, hG as _sfc_main$9, hO as __unplugin_components_0$1, J as useDebounce, a as useToast, hE as useAnnotationTagsStore, K as useUIStore, V as VIEWS, H as watch, hP as TestRunsTable, hQ as NODE_PINNING_MODAL_KEY, hR as Modal, hS as __unplugin_components_0$2 } from "./index-CWcTt6jd.js";
-import "./useBugReporting-BxDqzvRW.js";
-import "./usePinnedData-C5NRkSpx.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 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, 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) => 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 isPinned = props.modelValue.some((node) => node.id === data.id);
-      const updatedNodes = isPinned ? props.modelValue.filter((node) => node.id !== data.id) : [...props.modelValue, { name: nodeName, id: data.id }];
-      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;
-      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),
-                    "data-test-id": "node-pin-button",
-                    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_2 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
-const arrowConnector = "_arrowConnector_1mi41_123";
-const style0$6 = {
-  arrowConnector
-};
-const _sfc_main$7 = {};
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", {
-    class: normalizeClass(_ctx.$style.arrowConnector)
-  }, null, 2);
-}
-const cssModules$6 = {
-  "$style": style0$6
-};
-const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__cssModules", cssModules$6]]);
+import { hS as useTestDefinitionStore, r as ref, q as computed, d as defineComponent, c as openBlock, h as createElementBlock, F as Fragment, j as createBaseVNode, t as toDisplayString, n as normalizeClass, i as createVNode, e as createBlock, l as unref, g as useI18n, m as resolveComponent, _ as _export_sfc, f as createCommentVNode, w as withCtx, k as createTextVNode, hw as mergeModels, hx as useModel, s as renderSlot, hT as MetricsChart, hU as TestRunsTable, T as useWorkflowsStore, bo as useNodeTypesStore, U as useRoute, b as useRouter, o as onMounted, aP as N8nTooltip, C as createEventBus, aa as useCssModule, ax as withDirectives, ay as vShow, hV as ElCollapseTransition, y as nextTick, A as renderList, hK as _sfc_main$c, hW as __unplugin_components_0$2, hX as SAMPLE_EVALUATION_WORKFLOW, hY as NODE_PINNING_MODAL_KEY, hZ as __unplugin_components_2, J as useDebounce, a as useToast, hI as useAnnotationTagsStore, K as useUIStore, at as useExecutionsStore, V as VIEWS, H as watch } from "./index-BW7gX0J2.js";
+import { f as useCanvasOperations, d as useVueFlow, e as useCanvasMapping, _ as __unplugin_components_0$1 } from "./useCanvasOperations-ZjLeZwpS.js";
+import "./usePinnedData-CHMuwypo.js";
 function useTestDefinitionForm() {
   const evaluationsStore = useTestDefinitionStore();
   const state = ref({
@@ -206,7 +28,6 @@ function useTestDefinitionForm() {
     mockedNodes: []
   });
   const isSaving = ref(false);
-  const fieldsIssues = ref([]);
   const fields = ref({});
   const editableFields = computed(() => ({
     name: state.value.name,
@@ -249,7 +70,6 @@ function useTestDefinitionForm() {
   const createTest = async (workflowId) => {
     if (isSaving.value) return;
     isSaving.value = true;
-    fieldsIssues.value = [];
     try {
       const params = {
         name: state.value.name.value,
@@ -289,7 +109,6 @@ function useTestDefinitionForm() {
   const updateTest = async (testId) => {
     if (isSaving.value) return;
     isSaving.value = true;
-    fieldsIssues.value = [];
     try {
       if (!testId) {
         throw new Error("Test ID is required for updating a test");
@@ -352,7 +171,6 @@ function useTestDefinitionForm() {
     state,
     fields,
     isSaving: computed(() => isSaving.value),
-    fieldsIssues: computed(() => fieldsIssues.value),
     deleteMetric,
     updateMetrics,
     loadTestData,
@@ -364,8 +182,8 @@ function useTestDefinitionForm() {
     handleKeydown
   };
 }
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "EvaluationHeader",
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "TestNameInput",
   props: {
     modelValue: {},
     startEditing: { type: Function },
@@ -378,62 +196,47 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
       const _component_N8nInput = resolveComponent("N8nInput");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.header)
+      return openBlock(), createElementBlock("h2", {
+        class: normalizeClass(_ctx.$style.title)
       }, [
-        createVNode(_component_n8n_icon_button, {
-          class: normalizeClass(_ctx.$style.backButton),
-          icon: "arrow-left",
-          type: "tertiary",
-          title: unref(locale).baseText("testDefinition.edit.backButtonTitle"),
-          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.back())
-        }, null, 8, ["class", "title"]),
-        createBaseVNode("h2", {
-          class: normalizeClass(_ctx.$style.title)
-        }, [
-          !_ctx.modelValue.isEditing ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createBaseVNode("span", {
-              class: normalizeClass(_ctx.$style.titleText)
-            }, toDisplayString(_ctx.modelValue.value), 3),
-            createVNode(_component_n8n_icon_button, {
-              class: normalizeClass(_ctx.$style.editInputButton),
-              icon: "pen",
-              type: "tertiary",
-              onClick: _cache[1] || (_cache[1] = ($event) => _ctx.startEditing("name"))
-            }, null, 8, ["class"])
-          ], 64)) : (openBlock(), createBlock(_component_N8nInput, {
-            key: 1,
-            ref: "nameInput",
-            "data-test-id": "evaluation-name-input",
-            "model-value": _ctx.modelValue.tempValue,
-            type: "text",
-            placeholder: unref(locale).baseText("testDefinition.edit.namePlaceholder"),
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", { ..._ctx.modelValue, tempValue: $event })),
-            onBlur: _cache[3] || (_cache[3] = () => _ctx.saveChanges("name")),
-            onKeydown: _cache[4] || (_cache[4] = (e) => _ctx.handleKeydown(e, "name"))
-          }, null, 8, ["model-value", "placeholder"]))
-        ], 2)
+        !_ctx.modelValue.isEditing ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createBaseVNode("span", {
+            class: normalizeClass(_ctx.$style.titleText)
+          }, toDisplayString(_ctx.modelValue.value), 3),
+          createVNode(_component_n8n_icon_button, {
+            class: normalizeClass(_ctx.$style.editInputButton),
+            icon: "pen",
+            type: "tertiary",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.startEditing("name"))
+          }, null, 8, ["class"])
+        ], 64)) : (openBlock(), createBlock(_component_N8nInput, {
+          key: 1,
+          ref: "nameInput",
+          "data-test-id": "evaluation-name-input",
+          "model-value": _ctx.modelValue.tempValue,
+          type: "text",
+          placeholder: unref(locale).baseText("testDefinition.edit.namePlaceholder"),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", { ..._ctx.modelValue, tempValue: $event })),
+          onBlur: _cache[2] || (_cache[2] = () => _ctx.saveChanges("name")),
+          onKeydown: _cache[3] || (_cache[3] = (e) => _ctx.handleKeydown(e, "name"))
+        }, null, 8, ["model-value", "placeholder"]))
       ], 2);
     };
   }
 });
-const header$1 = "_header_qmfly_123";
-const editInputButton$2 = "_editInputButton_qmfly_127";
-const title$1 = "_title_qmfly_131";
-const titleText = "_titleText_qmfly_142";
-const backButton = "_backButton_qmfly_155";
-const style0$5 = {
-  header: header$1,
-  editInputButton: editInputButton$2,
+const title$1 = "_title_1g2qi_123";
+const titleText = "_titleText_1g2qi_133";
+const editInputButton$2 = "_editInputButton_1g2qi_140";
+const style0$a = {
   title: title$1,
   titleText,
-  backButton
+  editInputButton: editInputButton$2
 };
-const cssModules$5 = {
-  "$style": style0$5
+const cssModules$a = {
+  "$style": style0$a
 };
-const EvaluationHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const TestNameInput = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__cssModules", cssModules$a]]);
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "DescriptionInput",
   props: {
     modelValue: {},
@@ -492,29 +295,413 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const description$1 = "_description_f14k1_123";
-const editInputButton$1 = "_editInputButton_f14k1_129";
-const descriptionText = "_descriptionText_f14k1_133";
-const icon$1 = "_icon_f14k1_139";
-const style0$4 = {
-  description: description$1,
-  editInputButton: editInputButton$1,
-  descriptionText,
-  icon: icon$1
+const description$1 = "_description_f14k1_123";
+const editInputButton$1 = "_editInputButton_f14k1_129";
+const descriptionText = "_descriptionText_f14k1_133";
+const icon$1 = "_icon_f14k1_139";
+const style0$9 = {
+  description: description$1,
+  editInputButton: editInputButton$1,
+  descriptionText,
+  icon: icon$1
+};
+const cssModules$9 = {
+  "$style": style0$9
+};
+const DescriptionInput = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$9]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "HeaderSection",
+  props: /* @__PURE__ */ mergeModels({
+    hasRuns: { type: Boolean },
+    isSaving: { type: Boolean },
+    showConfig: { type: Boolean },
+    runTestEnabled: { type: Boolean },
+    startEditing: { type: Function },
+    saveChanges: { type: Function },
+    handleKeydown: { type: Function },
+    onSaveTest: { type: Function },
+    runTest: { type: Function },
+    toggleConfig: { type: Function },
+    getFieldIssues: { type: Function }
+  }, {
+    "name": { required: true },
+    "nameModifiers": {},
+    "description": { required: true },
+    "descriptionModifiers": {}
+  }),
+  emits: ["update:name", "update:description"],
+  setup(__props) {
+    const props = __props;
+    const name2 = useModel(__props, "name");
+    const description2 = useModel(__props, "description");
+    const locale = useI18n();
+    const showSavingIndicator = computed(() => {
+      return !name2.value.isEditing;
+    });
+    return (_ctx, _cache) => {
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
+      const _component_N8nButton = resolveComponent("N8nButton");
+      const _component_N8nTooltip = resolveComponent("N8nTooltip");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.headerSection)
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.headerMeta)
+        }, [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.name)
+          }, [
+            createVNode(_component_n8n_icon_button, {
+              class: normalizeClass(_ctx.$style.backButton),
+              icon: "arrow-left",
+              type: "tertiary",
+              title: unref(locale).baseText("testDefinition.edit.backButtonTitle"),
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$router.back())
+            }, null, 8, ["class", "title"]),
+            createVNode(TestNameInput, {
+              modelValue: name2.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => name2.value = $event),
+              class: normalizeClass({ "has-issues": _ctx.getFieldIssues("name").length > 0 }),
+              "start-editing": _ctx.startEditing,
+              "save-changes": _ctx.saveChanges,
+              "handle-keydown": _ctx.handleKeydown
+            }, null, 8, ["modelValue", "class", "start-editing", "save-changes", "handle-keydown"]),
+            showSavingIndicator.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.lastSaved)
+            }, [
+              _ctx.isSaving ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.saving")), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.saved")), 1)
+              ], 64))
+            ], 2)) : createCommentVNode("", true)
+          ], 2),
+          createVNode(DescriptionInput, {
+            modelValue: description2.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => description2.value = $event),
+            "start-editing": _ctx.startEditing,
+            "save-changes": _ctx.saveChanges,
+            "handle-keydown": _ctx.handleKeydown,
+            class: normalizeClass(_ctx.$style.descriptionInput)
+          }, null, 8, ["modelValue", "start-editing", "save-changes", "handle-keydown", "class"])
+        ], 2),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.controls)
+        }, [
+          props.hasRuns ? (openBlock(), createBlock(_component_N8nButton, {
+            key: 0,
+            size: "small",
+            icon: _ctx.showConfig ? "eye-slash" : "eye",
+            "data-test-id": "toggle-config-button",
+            label: _ctx.showConfig ? unref(locale).baseText("testDefinition.edit.hideConfig") : unref(locale).baseText("testDefinition.edit.showConfig"),
+            type: "tertiary",
+            onClick: _ctx.toggleConfig
+          }, null, 8, ["icon", "label", "onClick"])) : createCommentVNode("", true),
+          createVNode(_component_N8nTooltip, {
+            disabled: _ctx.runTestEnabled,
+            placement: "left"
+          }, {
+            content: withCtx(() => [
+              renderSlot(_ctx.$slots, "runTestTooltip")
+            ]),
+            default: withCtx(() => [
+              createVNode(_component_N8nButton, {
+                disabled: !_ctx.runTestEnabled,
+                class: normalizeClass(_ctx.$style.runTestButton),
+                size: "small",
+                "data-test-id": "run-test-button",
+                label: unref(locale).baseText("testDefinition.runTest"),
+                type: "primary",
+                onClick: _ctx.runTest
+              }, null, 8, ["disabled", "class", "label", "onClick"])
+            ]),
+            _: 3
+          }, 8, ["disabled"])
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const headerSection = "_headerSection_28wt7_123";
+const headerMeta = "_headerMeta_28wt7_131";
+const name = "_name_28wt7_135";
+const lastSaved = "_lastSaved_28wt7_140";
+const descriptionInput = "_descriptionInput_28wt7_145";
+const controls = "_controls_28wt7_149";
+const backButton = "_backButton_28wt7_154";
+const style0$8 = {
+  headerSection,
+  headerMeta,
+  name,
+  lastSaved,
+  descriptionInput,
+  controls,
+  backButton
+};
+const cssModules$8 = {
+  "$style": style0$8
+};
+const HeaderSection = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__cssModules", cssModules$8]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "RunsSection",
+  props: /* @__PURE__ */ mergeModels({
+    runs: {},
+    testId: {},
+    appliedTheme: {}
+  }, {
+    "selectedMetric": { required: true },
+    "selectedMetricModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["deleteRuns"], ["update:selectedMetric"]),
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const selectedMetric = useModel(__props, "selectedMetric");
+    function onDeleteRuns(toDelete) {
+      emit("deleteRuns", toDelete);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.runs)
+      }, [
+        createVNode(MetricsChart, {
+          selectedMetric: selectedMetric.value,
+          "onUpdate:selectedMetric": _cache[0] || (_cache[0] = ($event) => selectedMetric.value = $event),
+          runs: _ctx.runs,
+          theme: _ctx.appliedTheme
+        }, null, 8, ["selectedMetric", "runs", "theme"]),
+        createVNode(TestRunsTable, {
+          class: normalizeClass(_ctx.$style.runsTable),
+          runs: _ctx.runs,
+          selectable: true,
+          "data-test-id": "past-runs-table",
+          onDeleteRuns
+        }, null, 8, ["class", "runs"])
+      ], 2);
+    };
+  }
+});
+const runs = "_runs_1llgd_123";
+const style0$7 = {
+  runs
+};
+const cssModules$7 = {
+  "$style": style0$7
+};
+const RunsSection = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const _sfc_main$7 = /* @__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 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, 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) => 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 isPinned = props.modelValue.some((node) => node.id === data.id);
+      const updatedNodes = isPinned ? props.modelValue.filter((node) => node.id !== data.id) : [...props.modelValue, { name: nodeName, id: data.id }];
+      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_N8nHeading = resolveComponent("N8nHeading");
+      const _component_N8nText = resolveComponent("N8nText");
+      const _component_N8nSpinner = resolveComponent("N8nSpinner");
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
+      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 }) => [
+            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),
+                    "data-test-id": "node-pin-button",
+                    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_108jn_123";
+const pinButtonContainer = "_pinButtonContainer_108jn_128";
+const pinButton = "_pinButton_108jn_128";
+const notPinnedNode = "_notPinnedNode_108jn_142";
+const pinnedNode = "_pinnedNode_108jn_143";
+const spinner = "_spinner_108jn_154";
+const noNodes = "_noNodes_108jn_161";
+const style0$6 = {
+  container: container$1,
+  pinButtonContainer,
+  pinButton,
+  notPinnedNode,
+  pinnedNode,
+  spinner,
+  noNodes
 };
-const cssModules$4 = {
-  "$style": style0$4
+const cssModules$6 = {
+  "$style": style0$6
+};
+const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__cssModules", cssModules$6]]);
+const arrowConnector = "_arrowConnector_1mi41_123";
+const style0$5 = {
+  arrowConnector
+};
+const _sfc_main$6 = {};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.$style.arrowConnector)
+  }, null, 2);
+}
+const cssModules$5 = {
+  "$style": style0$5
 };
-const DescriptionInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
+const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render], ["__cssModules", cssModules$5]]);
 const _hoisted_1$1 = ["aria-expanded", "aria-controls"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "EvaluationStep",
   props: {
     title: {},
     warning: { type: Boolean, default: false },
     small: { type: Boolean, default: false },
     expanded: { type: Boolean, default: true },
-    description: { default: "" }
+    description: { default: "" },
+    issues: { default: () => [] },
+    showIssues: { type: Boolean, default: true }
   },
   setup(__props) {
     const props = __props;
@@ -532,6 +719,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
+      const _component_N8nInfoTip = resolveComponent("N8nInfoTip");
       const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -553,10 +741,22 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             createBaseVNode("h3", {
               class: normalizeClass(_ctx.$style.title)
             }, toDisplayString(_ctx.title), 3),
-            _ctx.warning ? (openBlock(), createElementBlock("span", {
+            _ctx.issues.length > 0 && _ctx.showIssues ? (openBlock(), createElementBlock("span", {
               key: 0,
               class: normalizeClass(_ctx.$style.warningIcon)
-            }, "⚠", 2)) : createCommentVNode("", true),
+            }, [
+              createVNode(_component_N8nInfoTip, {
+                bold: true,
+                type: "tooltip",
+                theme: "warning",
+                "tooltip-placement": "right"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(_ctx.issues.map((issue) => issue.message).join(", ")), 1)
+                ]),
+                _: 1
+              })
+            ], 2)) : createCommentVNode("", true),
             _ctx.$slots.cardContent ? (openBlock(), createElementBlock("button", {
               key: 1,
               class: normalizeClass(_ctx.$style.collapseButton),
@@ -612,7 +812,7 @@ const cardContent = "_cardContent_65xdl_174";
 const collapseButton = "_collapseButton_65xdl_179";
 const cardContentWrapper = "_cardContentWrapper_65xdl_192";
 const description = "_description_65xdl_196";
-const style0$3 = {
+const style0$4 = {
   evaluationStep,
   small,
   icon,
@@ -626,12 +826,12 @@ const style0$3 = {
   cardContentWrapper,
   description
 };
-const cssModules$3 = {
-  "$style": style0$3
+const cssModules$4 = {
+  "$style": style0$4
 };
-const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
 const _hoisted_1 = { "data-test-id": "workflow-tags-field" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "TagsInput",
   props: {
     modelValue: { default: () => ({
@@ -666,7 +866,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       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$9;
+      const _component_TagsDropdown = _sfc_main$c;
       const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(_component_n8n_input_label, {
@@ -729,28 +929,46 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 });
 const tagsRead = "_tagsRead_z5pm4_123";
 const editInputButton = "_editInputButton_z5pm4_123";
-const style0$2 = {
+const style0$3 = {
   tagsRead,
   editInputButton
 };
-const cssModules$2 = {
-  "$style": style0$2
+const cssModules$3 = {
+  "$style": style0$3
 };
-const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowSelector",
   props: {
     modelValue: { default: () => ({
       mode: "id",
       value: "",
       __rl: true
-    }) }
+    }) },
+    examplePinnedData: { default: () => ({}) },
+    sampleWorkflowName: { default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const props = __props;
     const locale = useI18n();
+    const subworkflowName = computed(() => {
+      if (props.sampleWorkflowName) {
+        return locale.baseText("testDefinition.workflowInput.subworkflowName", {
+          interpolate: { name: props.sampleWorkflowName }
+        });
+      }
+      return locale.baseText("testDefinition.workflowInput.subworkflowName.default");
+    });
+    const sampleWorkflow = computed(() => {
+      return {
+        ...SAMPLE_EVALUATION_WORKFLOW,
+        name: subworkflowName.value,
+        pinData: props.examplePinnedData
+      };
+    });
     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, {
@@ -772,8 +990,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               "expression-edit-dialog-visible": false,
               path: "workflows",
               "allow-new": "",
+              "sample-workflow": sampleWorkflow.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
-            }, null, 8, ["parameter", "model-value", "display-title"])
+            }, null, 8, ["parameter", "model-value", "display-title", "sample-workflow"])
           ]),
           _: 1
         }, 8, ["label"])
@@ -781,7 +1000,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "MetricsInput",
   props: {
     modelValue: {}
@@ -858,17 +1077,266 @@ const metricItem = "_metricItem_1eaf8_129";
 const metricField = "_metricField_1eaf8_134";
 const metricsDivider = "_metricsDivider_1eaf8_139";
 const newMetricButton = "_newMetricButton_1eaf8_144";
-const style0$1 = {
+const style0$2 = {
   metricsContainer,
   metricItem,
   metricField,
   metricsDivider,
   newMetricButton
 };
+const cssModules$2 = {
+  "$style": style0$2
+};
+const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules$2]]);
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ConfigSection",
+  props: /* @__PURE__ */ mergeModels({
+    showConfig: { type: Boolean },
+    tagUsageCount: {},
+    allTags: {},
+    tagsById: {},
+    isLoading: { type: Boolean },
+    examplePinnedData: {},
+    sampleWorkflowName: {},
+    getFieldIssues: { type: Function },
+    startEditing: { type: Function },
+    saveChanges: { type: Function },
+    cancelEditing: { type: Function },
+    createTag: { type: Function }
+  }, {
+    "tags": { required: true },
+    "tagsModifiers": {},
+    "evaluationWorkflow": { required: true },
+    "evaluationWorkflowModifiers": {},
+    "metrics": { required: true },
+    "metricsModifiers": {},
+    "mockedNodes": {
+      required: true
+    },
+    "mockedNodesModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["openPinningModal", "deleteMetric"], ["update:tags", "update:evaluationWorkflow", "update:metrics", "update:mockedNodes"]),
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const locale = useI18n();
+    const changedFieldsKeys = ref([]);
+    const tags = useModel(__props, "tags");
+    const evaluationWorkflow = useModel(
+      __props,
+      "evaluationWorkflow"
+    );
+    const metrics = useModel(__props, "metrics");
+    const mockedNodes = useModel(__props, "mockedNodes");
+    const nodePinningModal = ref(null);
+    function updateChangedFieldsKeys(key) {
+      changedFieldsKeys.value.push(key);
+    }
+    function showFieldIssues(fieldKey) {
+      return changedFieldsKeys.value.includes(fieldKey);
+    }
+    return (_ctx, _cache) => {
+      const _component_BlockArrow = __unplugin_components_0;
+      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_N8nHeading = resolveComponent("N8nHeading");
+      const _component_NodesPinning = __unplugin_components_1;
+      const _component_Modal = __unplugin_components_2;
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.panelBlock, { [_ctx.$style.hidden]: !_ctx.showConfig }])
+      }, [
+        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: _ctx.tagUsageCount
+          }),
+          description: unref(locale).baseText("testDefinition.edit.step.executions.description"),
+          issues: _ctx.getFieldIssues("tags"),
+          "show-issues": showFieldIssues("tags")
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_font_awesome_icon, {
+              icon: "history",
+              size: "lg"
+            })
+          ]),
+          cardContent: withCtx(() => [
+            createVNode(TagsInput, {
+              modelValue: tags.value,
+              "onUpdate:modelValue": [
+                _cache[0] || (_cache[0] = ($event) => tags.value = $event),
+                _cache[1] || (_cache[1] = ($event) => updateChangedFieldsKeys("tags"))
+              ],
+              class: normalizeClass({ "has-issues": _ctx.getFieldIssues("tags") }),
+              "all-tags": _ctx.allTags,
+              "tags-by-id": _ctx.tagsById,
+              "is-loading": _ctx.isLoading,
+              "start-editing": _ctx.startEditing,
+              "save-changes": _ctx.saveChanges,
+              "cancel-editing": _ctx.cancelEditing,
+              "create-tag": _ctx.createTag
+            }, null, 8, ["modelValue", "class", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "cancel-editing", "create-tag"])
+          ]),
+          _: 1
+        }, 8, ["class", "title", "description", "issues", "show-issues"]),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.evaluationArrows)
+        }, [
+          createVNode(_component_BlockArrow),
+          createVNode(_component_BlockArrow)
+        ], 2),
+        createVNode(EvaluationStep, {
+          class: normalizeClass(_ctx.$style.step),
+          title: unref(locale).baseText("testDefinition.edit.step.mockedNodes", {
+            adjustToNumber: mockedNodes.value?.length ?? 0
+          }),
+          small: true,
+          expanded: true,
+          description: unref(locale).baseText("testDefinition.edit.step.nodes.description"),
+          issues: _ctx.getFieldIssues("mockedNodes"),
+          "show-issues": showFieldIssues("mockedNodes")
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_font_awesome_icon, {
+              icon: "thumbtack",
+              size: "lg"
+            })
+          ]),
+          cardContent: withCtx(() => [
+            createVNode(_component_n8n_button, {
+              size: "small",
+              "data-test-id": "select-nodes-button",
+              label: unref(locale).baseText("testDefinition.edit.selectNodes"),
+              type: "tertiary",
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("openPinningModal"))
+            }, null, 8, ["label"])
+          ]),
+          _: 1
+        }, 8, ["class", "title", "description", "issues", "show-issues"]),
+        createVNode(EvaluationStep, {
+          class: normalizeClass(_ctx.$style.step),
+          title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
+          small: true,
+          description: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.description")
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_font_awesome_icon, {
+              icon: "redo",
+              size: "lg"
+            })
+          ]),
+          _: 1
+        }, 8, ["class", "title", "description"]),
+        createVNode(EvaluationStep, {
+          class: normalizeClass(_ctx.$style.step),
+          title: unref(locale).baseText("testDefinition.edit.step.compareExecutions"),
+          description: unref(locale).baseText("testDefinition.edit.step.compareExecutions.description"),
+          issues: _ctx.getFieldIssues("evaluationWorkflow"),
+          "show-issues": showFieldIssues("evaluationWorkflow")
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_font_awesome_icon, {
+              icon: "equals",
+              size: "lg"
+            })
+          ]),
+          cardContent: withCtx(() => [
+            createVNode(_sfc_main$3, {
+              modelValue: evaluationWorkflow.value,
+              "onUpdate:modelValue": [
+                _cache[3] || (_cache[3] = ($event) => evaluationWorkflow.value = $event),
+                _cache[4] || (_cache[4] = ($event) => updateChangedFieldsKeys("evaluationWorkflow"))
+              ],
+              "example-pinned-data": _ctx.examplePinnedData,
+              class: normalizeClass({ "has-issues": _ctx.getFieldIssues("evaluationWorkflow").length > 0 }),
+              "sample-workflow-name": _ctx.sampleWorkflowName
+            }, null, 8, ["modelValue", "example-pinned-data", "class", "sample-workflow-name"])
+          ]),
+          _: 1
+        }, 8, ["class", "title", "description", "issues", "show-issues"]),
+        createVNode(EvaluationStep, {
+          class: normalizeClass(_ctx.$style.step),
+          title: unref(locale).baseText("testDefinition.edit.step.metrics"),
+          description: unref(locale).baseText("testDefinition.edit.step.metrics.description"),
+          issues: _ctx.getFieldIssues("metrics"),
+          "show-issues": showFieldIssues("metrics")
+        }, {
+          icon: withCtx(() => [
+            createVNode(_component_font_awesome_icon, {
+              icon: "chart-bar",
+              size: "lg"
+            })
+          ]),
+          cardContent: withCtx(() => [
+            createVNode(MetricsInput, {
+              modelValue: metrics.value,
+              "onUpdate:modelValue": [
+                _cache[5] || (_cache[5] = ($event) => metrics.value = $event),
+                _cache[7] || (_cache[7] = ($event) => updateChangedFieldsKeys("metrics"))
+              ],
+              class: normalizeClass({ "has-issues": _ctx.getFieldIssues("metrics").length > 0 }),
+              onDeleteMetric: _cache[6] || (_cache[6] = (metric) => emit("deleteMetric", metric))
+            }, null, 8, ["modelValue", "class"])
+          ]),
+          _: 1
+        }, 8, ["class", "title", "description", "issues", "show-issues"]),
+        createVNode(_component_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: mockedNodes.value,
+              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => mockedNodes.value = $event),
+              "data-test-id": "nodes-pinning-modal"
+            }, null, 8, ["modelValue"])
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ], 2);
+    };
+  }
+});
+const panelBlock = "_panelBlock_1xhy8_123";
+const hidden = "_hidden_1xhy8_133";
+const noRuns$1 = "_noRuns_1xhy8_139";
+const panelIntro = "_panelIntro_1xhy8_143";
+const step = "_step_1xhy8_151";
+const introArrow = "_introArrow_1xhy8_158";
+const evaluationArrows = "_evaluationArrows_1xhy8_164";
+const style0$1 = {
+  panelBlock,
+  hidden,
+  noRuns: noRuns$1,
+  panelIntro,
+  step,
+  introArrow,
+  evaluationArrows
+};
 const cssModules$1 = {
   "$style": style0$1
 };
-const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const ConfigSection = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TestDefinitionEditView",
   props: {
@@ -884,9 +1352,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const testDefinitionStore = useTestDefinitionStore();
     const tagsStore = useAnnotationTagsStore();
     const uiStore = useUIStore();
+    const executionsStore = useExecutionsStore();
+    const workflowStore = useWorkflowsStore();
     const {
       state,
-      fieldsIssues,
       isSaving,
       cancelEditing,
       loadTestData,
@@ -907,11 +1376,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tagUsageCount = computed(
       () => tagsStore.tagsById[state.value.tags.value[0]]?.usageCount ?? 0
     );
+    const workflowName = computed(() => workflowStore.workflow.name);
     const hasRuns = computed(() => runs2.value.length > 0);
-    const nodePinningModal = ref(null);
-    const modalContentWidth = ref(0);
+    const fieldsIssues = computed(() => testDefinitionStore.getFieldIssues(testId.value) ?? []);
     const showConfig = ref(true);
     const selectedMetric = ref("");
+    const examplePinnedData = ref({});
     onMounted(async () => {
       if (!testDefinitionStore.isFeatureEnabled) {
         toast.showMessage({
@@ -924,7 +1394,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         });
         return;
       }
-      void tagsStore.fetchAll({ withUsageCount: true });
       if (testId.value) {
         await loadTestData(testId.value);
       } else {
@@ -949,8 +1418,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         toast.showError(e, locale.baseText("testDefinition.edit.testSaveFailed"));
       }
     }
-    function hasIssues(key) {
-      return fieldsIssues.value.some((issue) => issue.field === key);
+    function getFieldIssues(key) {
+      return fieldsIssues.value.filter((issue) => issue.field === key);
     }
     async function onDeleteMetric(deletedMetric) {
       if (deletedMetric.id) {
@@ -978,6 +1447,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         (run) => run.testDefinitionId === testId.value
       )
     );
+    const isRunning = computed(() => runs2.value.some((run) => run.status === "running"));
+    const isRunTestEnabled = computed(() => fieldsIssues.value.length === 0 && !isRunning.value);
     async function onDeleteRuns(toDelete) {
       await Promise.all(
         toDelete.map(async (run) => {
@@ -988,11 +1459,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function toggleConfig() {
       showConfig.value = !showConfig.value;
     }
+    async function getExamplePinnedDataForTags() {
+      const evaluationWorkflowExecutions = await executionsStore.fetchExecutions({
+        workflowId: currentWorkflowId.value,
+        annotationTags: state.value.tags.value
+      });
+      if (evaluationWorkflowExecutions.count > 0) {
+        const firstExecution = evaluationWorkflowExecutions.results[0];
+        const executionData = await executionsStore.fetchExecution(firstExecution.id);
+        const resultData = executionData?.data?.resultData.runData;
+        examplePinnedData.value = {
+          "When called by a test run": [
+            {
+              json: {
+                originalExecution: resultData,
+                newExecution: resultData
+              }
+            }
+          ]
+        };
+      }
+    }
     watch(
       () => state.value.metrics,
       debounce(async () => await updateMetrics(testId.value), { debounceTime: 400 }),
       { deep: true }
     );
+    watch(() => state.value.tags, getExamplePinnedDataForTags);
     watch(
       () => [
         state.value.description,
@@ -1005,296 +1498,91 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { deep: true }
     );
     return (_ctx, _cache) => {
-      const _component_n8n_button = resolveComponent("n8n-button");
-      const _component_MetricsChart = __unplugin_components_0$2;
-      const _component_BlockArrow = __unplugin_components_1;
-      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
-      const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_NodesPinning = __unplugin_components_2;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([_ctx.$style.container, { [_ctx.$style.noRuns]: !hasRuns.value }])
       }, [
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.headerSection)
-        }, [
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.headerMeta)
-          }, [
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.name)
-            }, [
-              createVNode(EvaluationHeader, {
-                modelValue: unref(state).name,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(state).name = $event),
-                class: normalizeClass({ "has-issues": hasIssues("name") }),
-                "start-editing": unref(startEditing),
-                "save-changes": unref(saveChanges),
-                "handle-keydown": unref(handleKeydown)
-              }, null, 8, ["modelValue", "class", "start-editing", "save-changes", "handle-keydown"]),
-              createBaseVNode("div", {
-                class: normalizeClass(_ctx.$style.lastSaved)
-              }, [
-                unref(isSaving) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.saving")), 1)
-                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.saved")), 1)
-                ], 64))
-              ], 2)
-            ], 2),
-            createVNode(DescriptionInput, {
-              modelValue: unref(state).description,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).description = $event),
-              "start-editing": unref(startEditing),
-              "save-changes": unref(saveChanges),
-              "handle-keydown": unref(handleKeydown),
-              class: normalizeClass(_ctx.$style.descriptionInput)
-            }, null, 8, ["modelValue", "start-editing", "save-changes", "handle-keydown", "class"])
-          ], 2),
-          createBaseVNode("div", {
-            class: normalizeClass(_ctx.$style.controls)
-          }, [
-            runs2.value.length > 0 ? (openBlock(), createBlock(_component_n8n_button, {
-              key: 0,
-              size: "small",
-              icon: showConfig.value ? "eye-slash" : "eye",
-              "data-test-id": "toggle-config-button",
-              label: showConfig.value ? unref(locale).baseText("testDefinition.edit.hideConfig") : unref(locale).baseText("testDefinition.edit.showConfig"),
-              type: "tertiary",
-              onClick: toggleConfig
-            }, null, 8, ["icon", "label"])) : createCommentVNode("", true),
-            unref(state).evaluationWorkflow.value && unref(state).tags.value.length > 0 ? (openBlock(), createBlock(_component_n8n_button, {
-              key: 1,
-              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: 2,
-              class: normalizeClass(_ctx.$style.runTestButton),
-              size: "small",
-              "data-test-id": "run-test-button",
-              label: unref(locale).baseText("testDefinition.edit.saveTest"),
-              type: "primary",
-              onClick: onSaveTest
-            }, null, 8, ["class", "label"]))
-          ], 2)
-        ], 2),
+        createVNode(HeaderSection, {
+          name: unref(state).name,
+          "onUpdate:name": _cache[0] || (_cache[0] = ($event) => unref(state).name = $event),
+          description: unref(state).description,
+          "onUpdate:description": _cache[1] || (_cache[1] = ($event) => unref(state).description = $event),
+          tags: unref(state).tags,
+          "onUpdate:tags": _cache[2] || (_cache[2] = ($event) => unref(state).tags = $event),
+          "has-runs": hasRuns.value,
+          "is-saving": unref(isSaving),
+          "get-field-issues": getFieldIssues,
+          "start-editing": unref(startEditing),
+          "save-changes": unref(saveChanges),
+          "handle-keydown": unref(handleKeydown),
+          "on-save-test": onSaveTest,
+          "run-test": runTest,
+          "show-config": showConfig.value,
+          "toggle-config": toggleConfig,
+          "run-test-enabled": isRunTestEnabled.value
+        }, {
+          runTestTooltip: withCtx(() => [
+            fieldsIssues.value.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createBaseVNode("div", null, toDisplayString(unref(locale).baseText("testDefinition.completeConfig")), 1),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(fieldsIssues.value, (issue) => {
+                return openBlock(), createElementBlock("div", {
+                  key: issue.field
+                }, "- " + toDisplayString(issue.message), 1);
+              }), 128))
+            ], 64)) : createCommentVNode("", true),
+            isRunning.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.testIsRunning")), 1)
+            ], 64)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["name", "description", "tags", "has-runs", "is-saving", "start-editing", "save-changes", "handle-keydown", "show-config", "run-test-enabled"]),
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.content)
         }, [
-          runs2.value.length > 0 ? (openBlock(), createElementBlock("div", {
+          runs2.value.length > 0 ? (openBlock(), createBlock(RunsSection, {
             key: 0,
-            class: normalizeClass(_ctx.$style.runs)
-          }, [
-            createVNode(_component_MetricsChart, {
-              selectedMetric: selectedMetric.value,
-              "onUpdate:selectedMetric": _cache[2] || (_cache[2] = ($event) => selectedMetric.value = $event),
-              runs: runs2.value,
-              theme: appliedTheme.value
-            }, null, 8, ["selectedMetric", "runs", "theme"]),
-            createVNode(TestRunsTable, {
-              class: normalizeClass(_ctx.$style.runsTable),
-              runs: runs2.value,
-              selectable: true,
-              "data-test-id": "past-runs-table",
-              onDeleteRuns
-            }, null, 8, ["class", "runs"])
-          ], 2)) : createCommentVNode("", true),
-          createBaseVNode("div", {
-            class: normalizeClass([_ctx.$style.panelBlock, { [_ctx.$style.hidden]: !showConfig.value }])
-          }, [
-            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
-              }),
-              description: unref(locale).baseText("testDefinition.edit.step.executions.description")
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_font_awesome_icon, {
-                  icon: "history",
-                  size: "lg"
-                })
-              ]),
-              cardContent: withCtx(() => [
-                createVNode(TagsInput, {
-                  modelValue: unref(state).tags,
-                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(state).tags = $event),
-                  class: normalizeClass({ "has-issues": hasIssues("tags") }),
-                  "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),
-                  "create-tag": handleCreateTag
-                }, null, 8, ["modelValue", "class", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "cancel-editing"])
-              ]),
-              _: 1
-            }, 8, ["class", "title", "description"]),
-            createBaseVNode("div", {
-              class: normalizeClass(_ctx.$style.evaluationArrows)
-            }, [
-              createVNode(_component_BlockArrow),
-              createVNode(_component_BlockArrow)
-            ], 2),
-            createVNode(EvaluationStep, {
-              class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.mockedNodes", {
-                adjustToNumber: unref(state).mockedNodes?.length ?? 0
-              }),
-              small: true,
-              expanded: true,
-              description: unref(locale).baseText("testDefinition.edit.step.nodes.description")
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_font_awesome_icon, {
-                  icon: "thumbtack",
-                  size: "lg"
-                })
-              ]),
-              cardContent: withCtx(() => [
-                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", "description"]),
-            createVNode(EvaluationStep, {
-              class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
-              small: true,
-              description: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.description")
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_font_awesome_icon, {
-                  icon: "redo",
-                  size: "lg"
-                })
-              ]),
-              _: 1
-            }, 8, ["class", "title", "description"]),
-            createVNode(EvaluationStep, {
-              class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.compareExecutions"),
-              description: unref(locale).baseText("testDefinition.edit.step.compareExecutions.description")
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_font_awesome_icon, {
-                  icon: "equals",
-                  size: "lg"
-                })
-              ]),
-              cardContent: withCtx(() => [
-                createVNode(_sfc_main$2, {
-                  modelValue: unref(state).evaluationWorkflow,
-                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(state).evaluationWorkflow = $event),
-                  class: normalizeClass({ "has-issues": hasIssues("evaluationWorkflow") })
-                }, null, 8, ["modelValue", "class"])
-              ]),
-              _: 1
-            }, 8, ["class", "title", "description"]),
-            createVNode(EvaluationStep, {
-              class: normalizeClass(_ctx.$style.step),
-              title: unref(locale).baseText("testDefinition.edit.step.metrics"),
-              description: unref(locale).baseText("testDefinition.edit.step.metrics.description")
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_font_awesome_icon, {
-                  icon: "chart-bar",
-                  size: "lg"
-                })
-              ]),
-              cardContent: withCtx(() => [
-                createVNode(MetricsInput, {
-                  modelValue: unref(state).metrics,
-                  "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => unref(state).metrics = $event),
-                  class: normalizeClass({ "has-issues": hasIssues("metrics") }),
-                  onDeleteMetric
-                }, null, 8, ["modelValue", "class"])
-              ]),
-              _: 1
-            }, 8, ["class", "title", "description"])
-          ], 2)
-        ], 2),
-        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[6] || (_cache[6] = ($event) => unref(state).mockedNodes = $event),
-              width: modalContentWidth.value,
-              "data-test-id": "nodes-pinning-modal"
-            }, null, 8, ["modelValue", "width"])
-          ]),
-          _: 1
-        }, 8, ["name"])
+            selectedMetric: selectedMetric.value,
+            "onUpdate:selectedMetric": _cache[3] || (_cache[3] = ($event) => selectedMetric.value = $event),
+            runs: runs2.value,
+            "test-id": testId.value,
+            "applied-theme": appliedTheme.value,
+            onDeleteRuns
+          }, null, 8, ["selectedMetric", "runs", "test-id", "applied-theme"])) : createCommentVNode("", true),
+          createVNode(ConfigSection, {
+            tags: unref(state).tags,
+            "onUpdate:tags": _cache[4] || (_cache[4] = ($event) => unref(state).tags = $event),
+            evaluationWorkflow: unref(state).evaluationWorkflow,
+            "onUpdate:evaluationWorkflow": _cache[5] || (_cache[5] = ($event) => unref(state).evaluationWorkflow = $event),
+            metrics: unref(state).metrics,
+            "onUpdate:metrics": _cache[6] || (_cache[6] = ($event) => unref(state).metrics = $event),
+            mockedNodes: unref(state).mockedNodes,
+            "onUpdate:mockedNodes": _cache[7] || (_cache[7] = ($event) => unref(state).mockedNodes = $event),
+            "cancel-editing": unref(cancelEditing),
+            "show-config": showConfig.value,
+            "tag-usage-count": tagUsageCount.value,
+            "all-tags": allTags.value,
+            "tags-by-id": tagsById.value,
+            "is-loading": isLoading.value,
+            "get-field-issues": getFieldIssues,
+            "start-editing": unref(startEditing),
+            "save-changes": unref(saveChanges),
+            "create-tag": handleCreateTag,
+            "example-pinned-data": examplePinnedData.value,
+            "sample-workflow-name": workflowName.value,
+            onOpenPinningModal: openPinningModal,
+            onDeleteMetric
+          }, null, 8, ["tags", "evaluationWorkflow", "metrics", "mockedNodes", "cancel-editing", "show-config", "tag-usage-count", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "example-pinned-data", "sample-workflow-name"])
+        ], 2)
       ], 2);
     };
   }
 });
-const container = "_container_y9ejv_123";
-const content = "_content_y9ejv_141";
-const noRuns = "_noRuns_y9ejv_146";
-const headerSection = "_headerSection_y9ejv_151";
-const headerMeta = "_headerMeta_y9ejv_159";
-const name = "_name_y9ejv_163";
-const lastSaved = "_lastSaved_y9ejv_167";
-const descriptionInput = "_descriptionInput_y9ejv_172";
-const runs = "_runs_y9ejv_176";
-const panelBlock = "_panelBlock_y9ejv_190";
-const hidden = "_hidden_y9ejv_200";
-const panelIntro = "_panelIntro_y9ejv_210";
-const step = "_step_y9ejv_218";
-const introArrow = "_introArrow_y9ejv_225";
-const evaluationArrows = "_evaluationArrows_y9ejv_231";
-const controls = "_controls_y9ejv_242";
+const container = "_container_wdela_123";
+const content = "_content_wdela_141";
+const noRuns = "_noRuns_wdela_146";
 const style0 = {
   container,
   content,
-  noRuns,
-  headerSection,
-  headerMeta,
-  name,
-  lastSaved,
-  descriptionInput,
-  runs,
-  panelBlock,
-  hidden,
-  panelIntro,
-  step,
-  introArrow,
-  evaluationArrows,
-  controls
+  noRuns
 };
 const cssModules = {
   "$style": style0