n8n-editor-ui 1.74.1 → 1.75.0

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

@@ -1,7 +1,7 @@
-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";
+import { f as useCanvasOperations, d as useVueFlow, e as useCanvasMapping, _ as __unplugin_components_0 } from "./useCanvasOperations-CZCbgXks.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-DVhaXv7m.js";
+import "./useBugReporting-Cgoz2JMv.js";
+import "./usePinnedData-9d5rr-Ll.js";
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "NodesPinning",
   props: {
@@ -23,14 +23,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const isLoading = ref(true);
     const workflowId = computed(() => route.params.name);
     const testId = computed(() => route.params.testId);
-    const workflow2 = computed(() => workflowsStore.getWorkflowById(workflowId.value));
+    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 workflow2.value.nodes ?? [];
+      return workflow.value.nodes ?? [];
     });
-    const connections = computed(() => workflow2.value.connections);
+    const connections = computed(() => workflow.value.connections);
     const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping({
       nodes,
       connections,
@@ -44,7 +44,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         workflowsStore.fetchWorkflow(workflowId.value)
       ]);
       await loadingPromise;
-      initializeWorkspace(workflow2.value);
+      initializeWorkspace(workflow.value);
       disableAllNodes();
     }
     function getNodeNameById(id) {
@@ -71,12 +71,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     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);
+      const pinnedNodes = props.modelValue.map((node) => node.id).filter((id) => id !== null);
       if (pinnedNodes.length > 0) {
         updateNodeClasses(pinnedNodes, true);
       }
@@ -84,8 +79,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     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 }];
+      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);
     }
@@ -101,7 +96,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_N8nSpinner = resolveComponent("N8nSpinner");
       const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
-      const _component_Canvas = __unplugin_components_0$1;
+      const _component_Canvas = __unplugin_components_0;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
@@ -138,6 +133,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
                     size: "large",
                     icon: "thumbtack",
                     class: normalizeClass(_ctx.$style.pinButton),
+                    "data-test-id": "node-pin-button",
                     onClick: ($event) => onPinButtonClick(data)
                   }, null, 8, ["class", "onClick"])
                 ]),
@@ -168,7 +164,7 @@ const style0$7 = {
 const cssModules$7 = {
   "$style": style0$7
 };
-const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
+const __unplugin_components_2 = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$7]]);
 const arrowConnector = "_arrowConnector_1mi41_123";
 const style0$6 = {
   arrowConnector
@@ -182,7 +178,7 @@ function _sfc_render(_ctx, _cache) {
 const cssModules$6 = {
   "$style": style0$6
 };
-const __unplugin_components_0 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__cssModules", cssModules$6]]);
+const __unplugin_components_1 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__cssModules", cssModules$6]]);
 function useTestDefinitionForm() {
   const evaluationsStore = useTestDefinitionStore();
   const state = ref({
@@ -196,7 +192,11 @@ function useTestDefinitionForm() {
       tempValue: [],
       isEditing: false
     },
-    description: "",
+    description: {
+      value: "",
+      tempValue: "",
+      isEditing: false
+    },
     evaluationWorkflow: {
       mode: "list",
       value: "",
@@ -210,7 +210,8 @@ function useTestDefinitionForm() {
   const fields = ref({});
   const editableFields = computed(() => ({
     name: state.value.name,
-    tags: state.value.tags
+    tags: state.value.tags,
+    description: state.value.description
   }));
   const loadTestData = async (testId) => {
     try {
@@ -218,7 +219,11 @@ function useTestDefinitionForm() {
       const testDefinition = evaluationsStore.testDefinitionsById[testId];
       if (testDefinition) {
         const metrics = await evaluationsStore.fetchMetrics(testId);
-        state.value.description = testDefinition.description ?? "";
+        state.value.description = {
+          value: testDefinition.description ?? "",
+          isEditing: false,
+          tempValue: ""
+        };
         state.value.name = {
           value: testDefinition.name ?? "",
           isEditing: false,
@@ -249,7 +254,7 @@ function useTestDefinitionForm() {
       const params = {
         name: state.value.name.value,
         workflowId,
-        description: state.value.description
+        description: state.value.description.value
       };
       return await evaluationsStore.create(params);
     } finally {
@@ -277,7 +282,9 @@ function useTestDefinitionForm() {
         });
       }
     });
+    isSaving.value = true;
     await Promise.all(promises);
+    isSaving.value = false;
   };
   const updateTest = async (testId) => {
     if (isSaving.value) return;
@@ -289,7 +296,7 @@ function useTestDefinitionForm() {
       }
       const params = {
         name: state.value.name.value,
-        description: state.value.description
+        description: state.value.description.value
       };
       if (state.value.evaluationWorkflow.value) {
         params.evaluationWorkflowId = state.value.evaluationWorkflow.value.toString();
@@ -301,13 +308,14 @@ function useTestDefinitionForm() {
       if (state.value.mockedNodes.length > 0) {
         params.mockedNodes = state.value.mockedNodes;
       }
-      return await evaluationsStore.update({ ...params, id: testId });
+      const response = await evaluationsStore.update({ ...params, id: testId });
+      return response;
     } finally {
       isSaving.value = false;
     }
   };
-  function startEditing(field2) {
-    const fieldObj = editableFields.value[field2];
+  function startEditing(field) {
+    const fieldObj = editableFields.value[field];
     if (fieldObj.isEditing) {
       return;
     }
@@ -318,13 +326,13 @@ function useTestDefinitionForm() {
     }
     fieldObj.isEditing = true;
   }
-  function saveChanges(field2) {
-    const fieldObj = editableFields.value[field2];
+  function saveChanges(field) {
+    const fieldObj = editableFields.value[field];
     fieldObj.value = Array.isArray(fieldObj.tempValue) ? [...fieldObj.tempValue] : fieldObj.tempValue;
     fieldObj.isEditing = false;
   }
-  function cancelEditing(field2) {
-    const fieldObj = editableFields.value[field2];
+  function cancelEditing(field) {
+    const fieldObj = editableFields.value[field];
     if (Array.isArray(fieldObj.value)) {
       fieldObj.tempValue = [...fieldObj.value];
     } else {
@@ -332,12 +340,12 @@ function useTestDefinitionForm() {
     }
     fieldObj.isEditing = false;
   }
-  function handleKeydown(event, field2) {
+  function handleKeydown(event, field) {
     if (event.key === "Escape") {
-      cancelEditing(field2);
+      cancelEditing(field);
     } else if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
-      saveChanges(field2);
+      saveChanges(field);
     }
   }
   return {
@@ -374,8 +382,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(_ctx.$style.header)
       }, [
         createVNode(_component_n8n_icon_button, {
-          icon: "arrow-left",
           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())
@@ -409,14 +417,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 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$1,
+  editInputButton: editInputButton$2,
   title: title$1,
   titleText,
   backButton
@@ -428,40 +436,71 @@ const EvaluationHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModule
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "DescriptionInput",
   props: {
-    modelValue: { default: "" }
+    modelValue: {},
+    startEditing: { type: Function },
+    saveChanges: { type: Function },
+    handleKeydown: { type: Function }
   },
   emits: ["update:modelValue"],
   setup(__props) {
     const locale = useI18n();
     return (_ctx, _cache) => {
+      const _component_n8n_icon = resolveComponent("n8n-icon");
+      const _component_N8nText = resolveComponent("N8nText");
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
       const _component_N8nInput = resolveComponent("N8nInput");
-      const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass([_ctx.$style.description])
+        class: normalizeClass(_ctx.$style.description)
       }, [
-        createVNode(_component_n8n_input_label, {
-          label: unref(locale).baseText("testDefinition.edit.description"),
-          bold: false,
-          size: "small",
-          class: normalizeClass(_ctx.$style.field)
-        }, {
-          default: withCtx(() => [
-            createVNode(_component_N8nInput, {
-              "model-value": _ctx.modelValue,
-              type: "textarea",
-              placeholder: unref(locale).baseText("testDefinition.edit.descriptionPlaceholder"),
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
-            }, null, 8, ["model-value", "placeholder"])
-          ]),
-          _: 1
-        }, 8, ["label", "class"])
+        !_ctx.modelValue.isEditing ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createBaseVNode("span", {
+            class: normalizeClass(_ctx.$style.descriptionText),
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.startEditing("description"))
+          }, [
+            _ctx.modelValue.value.length === 0 ? (openBlock(), createBlock(_component_n8n_icon, {
+              key: 0,
+              class: normalizeClass(_ctx.$style.icon),
+              icon: "plus",
+              color: "text-light",
+              size: "medium"
+            }, null, 8, ["class"])) : createCommentVNode("", true),
+            createVNode(_component_N8nText, { size: "medium" }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(_ctx.modelValue.value.length > 0 ? _ctx.modelValue.value : "Add a description"), 1)
+              ]),
+              _: 1
+            })
+          ], 2),
+          createVNode(_component_n8n_icon_button, {
+            class: normalizeClass(_ctx.$style.editInputButton),
+            icon: "pen",
+            type: "tertiary",
+            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.startEditing("description"))
+          }, null, 8, ["class"])
+        ], 64)) : (openBlock(), createBlock(_component_N8nInput, {
+          key: 1,
+          ref: "descriptionInput",
+          "data-test-id": "evaluation-description-input",
+          "model-value": _ctx.modelValue.tempValue,
+          type: "textarea",
+          placeholder: unref(locale).baseText("testDefinition.edit.descriptionPlaceholder"),
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", { ..._ctx.modelValue, tempValue: $event })),
+          onBlur: _cache[3] || (_cache[3] = () => _ctx.saveChanges("description")),
+          onKeydown: _cache[4] || (_cache[4] = (e) => _ctx.handleKeydown(e, "description"))
+        }, null, 8, ["model-value", "placeholder"]))
       ], 2);
     };
   }
 });
-const field = "_field_2al59_123";
+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 = {
-  field
+  description: description$1,
+  editInputButton: editInputButton$1,
+  descriptionText,
+  icon: icon$1
 };
 const cssModules$4 = {
   "$style": style0$4
@@ -475,7 +514,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     warning: { type: Boolean, default: false },
     small: { type: Boolean, default: false },
     expanded: { type: Boolean, default: true },
-    tooltip: { default: "" }
+    description: { default: "" }
   },
   setup(__props) {
     const props = __props;
@@ -483,7 +522,6 @@ 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) {
@@ -493,12 +531,6 @@ 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", {
@@ -507,26 +539,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         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),
-          onMouseenter: showTooltip,
-          onMouseleave: hideTooltip
+          class: normalizeClass(_ctx.$style.content)
         }, [
           createBaseVNode("div", {
             class: normalizeClass(_ctx.$style.header)
@@ -558,7 +572,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }, null, 8, ["icon"])
             ], 10, _hoisted_1$1)) : createCommentVNode("", true)
           ], 2),
-          _ctx.$slots.cardContent ? (openBlock(), createBlock(unref(ElCollapseTransition), { key: 0 }, {
+          _ctx.description ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(_ctx.$style.description)
+          }, toDisplayString(_ctx.description), 3)) : createCommentVNode("", true),
+          _ctx.$slots.cardContent ? (openBlock(), createBlock(unref(ElCollapseTransition), { key: 1 }, {
             default: withCtx(() => [
               withDirectives(createBaseVNode("div", {
                 class: normalizeClass(_ctx.$style.cardContentWrapper)
@@ -577,36 +595,36 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             ]),
             _: 3
           })) : createCommentVNode("", true)
-        ], 34)
+        ], 2)
       ], 2);
     };
   }
 });
-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 evaluationStep = "_evaluationStep_65xdl_123";
+const small = "_small_65xdl_135";
+const icon = "_icon_65xdl_140";
+const warning = "_warning_65xdl_149";
+const content$1 = "_content_65xdl_153";
+const header = "_header_65xdl_158";
+const title = "_title_65xdl_164";
+const warningIcon = "_warningIcon_65xdl_170";
+const cardContent = "_cardContent_65xdl_174";
+const collapseButton = "_collapseButton_65xdl_179";
+const cardContentWrapper = "_cardContentWrapper_65xdl_192";
+const description = "_description_65xdl_196";
 const style0$3 = {
   evaluationStep,
   small,
-  contentPlaceholder,
   icon,
   warning,
-  content,
+  content: content$1,
   header,
   title,
   warningIcon,
   cardContent,
   collapseButton,
-  cardContentWrapper
+  cardContentWrapper,
+  description
 };
 const cssModules$3 = {
   "$style": style0$3
@@ -732,7 +750,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const locale = useI18n();
     return (_ctx, _cache) => {
-      const _component_WorkflowSelectorParameterInput = __unplugin_components_0$2;
+      const _component_WorkflowSelectorParameterInput = __unplugin_components_0$1;
       const _component_n8n_input_label = resolveComponent("n8n-input-label");
       return openBlock(), createElementBlock("div", null, [
         createVNode(_component_n8n_input_label, {
@@ -776,9 +794,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function addNewMetric() {
       emit("update:modelValue", [...props.modelValue, { name: "" }]);
     }
-    function updateMetric(index, name) {
+    function updateMetric(index, name2) {
       const newMetrics = [...props.modelValue];
-      newMetrics[index].name = name;
+      newMetrics[index].name = name2;
       emit("update:modelValue", newMetrics);
     }
     function onDeleteMetric(metric) {
@@ -869,6 +887,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const {
       state,
       fieldsIssues,
+      isSaving,
       cancelEditing,
       loadTestData,
       createTest,
@@ -884,11 +903,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const tagsById = computed(() => tagsStore.tagsById);
     const testId = computed(() => props.testId ?? route.params.testId);
     const currentWorkflowId = computed(() => route.params.name);
+    const appliedTheme = computed(() => uiStore.appliedTheme);
     const tagUsageCount = computed(
       () => tagsStore.tagsById[state.value.tags.value[0]]?.usageCount ?? 0
     );
+    const hasRuns = computed(() => runs2.value.length > 0);
     const nodePinningModal = ref(null);
     const modalContentWidth = ref(0);
+    const showConfig = ref(true);
+    const selectedMetric = ref("");
     onMounted(async () => {
       if (!testDefinitionStore.isFeatureEnabled) {
         toast.showMessage({
@@ -950,18 +973,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       await testDefinitionStore.startTestRun(testId.value);
       await testDefinitionStore.fetchTestRuns(testId.value);
     }
-    const runs = computed(
+    const runs2 = computed(
       () => Object.values(testDefinitionStore.testRunsById ?? {}).filter(
         (run) => run.testDefinitionId === testId.value
       )
     );
-    async function onDeleteRuns(runs2) {
+    async function onDeleteRuns(toDelete) {
       await Promise.all(
-        runs2.map(async (run) => {
+        toDelete.map(async (run) => {
           await testDefinitionStore.deleteTestRun({ testDefinitionId: testId.value, runId: run.id });
         })
       );
     }
+    function toggleConfig() {
+      showConfig.value = !showConfig.value;
+    }
     watch(
       () => state.value.metrics,
       debounce(async () => await updateMetrics(testId.value), { debounceTime: 400 }),
@@ -979,48 +1005,106 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       { 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_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_1;
+      const _component_NodesPinning = __unplugin_components_2;
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.container)
+        class: normalizeClass([_ctx.$style.container, { [_ctx.$style.noRuns]: !hasRuns.value }])
       }, [
         createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.formContent)
+          class: normalizeClass(_ctx.$style.headerSection)
         }, [
-          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.panelBlock)
+            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),
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.content)
+        }, [
+          runs2.value.length > 0 ? (openBlock(), createElementBlock("div", {
+            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 }])
           }, [
-            createVNode(EvaluationStep, {
-              class: normalizeClass(_ctx.$style.step),
-              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),
@@ -1032,7 +1116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               title: unref(locale).baseText("testDefinition.edit.step.executions", {
                 adjustToNumber: tagUsageCount.value
               }),
-              tooltip: unref(locale).baseText("testDefinition.edit.step.executions.tooltip")
+              description: unref(locale).baseText("testDefinition.edit.step.executions.description")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -1043,7 +1127,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               cardContent: withCtx(() => [
                 createVNode(TagsInput, {
                   modelValue: unref(state).tags,
-                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).tags = $event),
+                  "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,
@@ -1055,7 +1139,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["modelValue", "class", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "cancel-editing"])
               ]),
               _: 1
-            }, 8, ["class", "title", "tooltip"]),
+            }, 8, ["class", "title", "description"]),
             createBaseVNode("div", {
               class: normalizeClass(_ctx.$style.evaluationArrows)
             }, [
@@ -1069,7 +1153,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }),
               small: true,
               expanded: true,
-              tooltip: unref(locale).baseText("testDefinition.edit.step.nodes.tooltip")
+              description: unref(locale).baseText("testDefinition.edit.step.nodes.description")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -1087,12 +1171,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, null, 8, ["label"])
               ]),
               _: 1
-            }, 8, ["class", "title", "tooltip"]),
+            }, 8, ["class", "title", "description"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
               title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
               small: true,
-              tooltip: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.tooltip")
+              description: unref(locale).baseText("testDefinition.edit.step.reRunExecutions.description")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -1101,11 +1185,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 })
               ]),
               _: 1
-            }, 8, ["class", "title", "tooltip"]),
+            }, 8, ["class", "title", "description"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
               title: unref(locale).baseText("testDefinition.edit.step.compareExecutions"),
-              tooltip: unref(locale).baseText("testDefinition.edit.step.compareExecutions.tooltip")
+              description: unref(locale).baseText("testDefinition.edit.step.compareExecutions.description")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -1116,16 +1200,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               cardContent: withCtx(() => [
                 createVNode(_sfc_main$2, {
                   modelValue: unref(state).evaluationWorkflow,
-                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(state).evaluationWorkflow = $event),
+                  "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", "tooltip"]),
+            }, 8, ["class", "title", "description"]),
             createVNode(EvaluationStep, {
               class: normalizeClass(_ctx.$style.step),
               title: unref(locale).baseText("testDefinition.edit.step.metrics"),
-              tooltip: unref(locale).baseText("testDefinition.edit.step.metrics.tooltip")
+              description: unref(locale).baseText("testDefinition.edit.step.metrics.description")
             }, {
               icon: withCtx(() => [
                 createVNode(_component_font_awesome_icon, {
@@ -1136,53 +1220,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               cardContent: withCtx(() => [
                 createVNode(MetricsInput, {
                   modelValue: unref(state).metrics,
-                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(state).metrics = $event),
+                  "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", "tooltip"])
-          ], 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"]))
+            }, 8, ["class", "title", "description"])
+          ], 2)
         ], 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,
@@ -1205,7 +1251,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           content: withCtx(() => [
             createVNode(_component_NodesPinning, {
               modelValue: unref(state).mockedNodes,
-              "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => unref(state).mockedNodes = $event),
+              "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => unref(state).mockedNodes = $event),
               width: modalContentWidth.value,
               "data-test-id": "nodes-pinning-modal"
             }, null, 8, ["modelValue", "width"])
@@ -1216,39 +1262,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 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 style0 = {
   container,
-  formContent,
-  runsTableTotal,
-  runsTable,
-  runsTableHeading,
+  content,
+  noRuns,
+  headerSection,
+  headerMeta,
+  name,
+  lastSaved,
+  descriptionInput,
+  runs,
   panelBlock,
+  hidden,
   panelIntro,
   step,
   introArrow,
   evaluationArrows,
-  footer,
-  workflow,
-  workflowSteps,
-  sideBySide,
-  mockedNodesLabel,
-  runTestButton
+  controls
 };
 const cssModules = {
   "$style": style0