n8n-editor-ui 1.69.1 → 1.70.0

package/dist/assets/TestDefinitionEditView-CQZkRDBJ.js

@@ -0,0 +1,870 @@
+import { _ as _export_sfc, c as openBlock, h as createElementBlock, n as normalizeClass, r as ref, q as computed, d as defineComponent, i as createVNode, l as unref, j as createBaseVNode, F as Fragment, t as toDisplayString, e as createBlock, g as useI18n, m as resolveComponent, w as withCtx, s as renderSlot, f as createCommentVNode, k as createTextVNode, ay as withDirectives, az as vShow, je as ElCollapseTransition, y as nextTick, A as renderList, C as createEventBus, j7 as _sfc_main$8, jf as __unplugin_components_0$1, b as useRouter, U as useRoute, J as useDebounce, a as useToast, j5 as useAnnotationTagsStore, o as onMounted, V as VIEWS, H as watch } from "./index-CmLVLa2S.js";
+import { u as useTestDefinitionStore } from "./testDefinition.store.ee-C_33eEVx.js";
+const arrowConnector = "_arrowConnector_1ffe6_1";
+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_0 = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render], ["__cssModules", cssModules$6]]);
+function useTestDefinitionForm() {
+  const evaluationsStore = useTestDefinitionStore();
+  const state = ref({
+    description: "",
+    name: {
+      value: `My Test [${(/* @__PURE__ */ new Date()).toLocaleString(void 0, { month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" })}]`,
+      isEditing: false,
+      tempValue: ""
+    },
+    tags: {
+      isEditing: false,
+      appliedTagIds: []
+    },
+    evaluationWorkflow: {
+      mode: "list",
+      value: "",
+      __rl: true
+    },
+    metrics: [""]
+  });
+  const isSaving = ref(false);
+  const fieldsIssues = ref([]);
+  const fields = ref({});
+  const loadTestData = async (testId) => {
+    try {
+      await evaluationsStore.fetchAll({ force: true });
+      const testDefinition = evaluationsStore.testDefinitionsById[testId];
+      if (testDefinition) {
+        state.value = {
+          description: testDefinition.description ?? "",
+          name: {
+            value: testDefinition.name ?? "",
+            isEditing: false,
+            tempValue: ""
+          },
+          tags: {
+            isEditing: false,
+            appliedTagIds: testDefinition.annotationTagId ? [testDefinition.annotationTagId] : []
+          },
+          evaluationWorkflow: {
+            mode: "list",
+            value: testDefinition.evaluationWorkflowId ?? "",
+            __rl: true
+          },
+          metrics: [""]
+        };
+      }
+    } catch (error) {
+      console.error("Failed to load test data", error);
+    }
+  };
+  const createTest = async (workflowId) => {
+    if (isSaving.value) return;
+    isSaving.value = true;
+    fieldsIssues.value = [];
+    try {
+      const params = {
+        name: state.value.name.value,
+        workflowId,
+        description: state.value.description
+      };
+      const newTest = await evaluationsStore.create(params);
+      return newTest;
+    } catch (error) {
+      throw error;
+    } finally {
+      isSaving.value = false;
+    }
+  };
+  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");
+      }
+      const params = {
+        name: state.value.name.value,
+        description: state.value.description
+      };
+      if (state.value.evaluationWorkflow.value) {
+        params.evaluationWorkflowId = state.value.evaluationWorkflow.value.toString();
+      }
+      const annotationTagId = state.value.tags.appliedTagIds[0];
+      if (annotationTagId) {
+        params.annotationTagId = annotationTagId;
+      }
+      return await evaluationsStore.update({ ...params, id: testId });
+    } catch (error) {
+      throw error;
+    } finally {
+      isSaving.value = false;
+    }
+  };
+  const startEditing = async (field2) => {
+    if (field2 === "name") {
+      state.value.name.tempValue = state.value.name.value;
+      state.value.name.isEditing = true;
+    } else {
+      state.value.tags.isEditing = true;
+    }
+  };
+  const saveChanges = (field2) => {
+    if (field2 === "name") {
+      state.value.name.value = state.value.name.tempValue;
+      state.value.name.isEditing = false;
+    } else {
+      state.value.tags.isEditing = false;
+    }
+  };
+  const cancelEditing = (field2) => {
+    if (field2 === "name") {
+      state.value.name.isEditing = false;
+      state.value.name.tempValue = "";
+    } else {
+      state.value.tags.isEditing = false;
+    }
+  };
+  const handleKeydown = (event, field2) => {
+    if (event.key === "Escape") {
+      cancelEditing(field2);
+    } else if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      saveChanges(field2);
+    }
+  };
+  return {
+    state,
+    fields,
+    isSaving: computed(() => isSaving.value),
+    fieldsIssues: computed(() => fieldsIssues.value),
+    loadTestData,
+    createTest,
+    updateTest,
+    startEditing,
+    saveChanges,
+    cancelEditing,
+    handleKeydown
+  };
+}
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "EvaluationHeader",
+  props: {
+    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_button = resolveComponent("n8n-icon-button");
+      const _component_N8nInput = resolveComponent("N8nInput");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.header)
+      }, [
+        createVNode(_component_n8n_icon_button, {
+          icon: "arrow-left",
+          class: normalizeClass(_ctx.$style.backButton),
+          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)
+      ], 2);
+    };
+  }
+});
+const header$1 = "_header_1htk6_1";
+const editInputButton$1 = "_editInputButton_1htk6_7";
+const title$1 = "_title_1htk6_11";
+const titleText = "_titleText_1htk6_22";
+const backButton = "_backButton_1htk6_35";
+const style0$5 = {
+  header: header$1,
+  editInputButton: editInputButton$1,
+  title: title$1,
+  titleText,
+  backButton
+};
+const cssModules$5 = {
+  "$style": style0$5
+};
+const EvaluationHeader = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__cssModules", cssModules$5]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "DescriptionInput",
+  props: {
+    modelValue: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const locale = useI18n();
+    return (_ctx, _cache) => {
+      const _component_N8nInput = resolveComponent("N8nInput");
+      const _component_n8n_input_label = resolveComponent("n8n-input-label");
+      return openBlock(), createElementBlock("div", {
+        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"])
+      ], 2);
+    };
+  }
+});
+const field = "_field_15r7v_1";
+const style0$4 = {
+  field
+};
+const cssModules$4 = {
+  "$style": style0$4
+};
+const DescriptionInput = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__cssModules", cssModules$4]]);
+const _hoisted_1$1 = ["aria-expanded", "aria-controls"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "EvaluationStep",
+  props: {
+    title: {},
+    warning: { type: Boolean, default: false },
+    small: { type: Boolean, default: false },
+    expanded: { type: Boolean, default: true }
+  },
+  setup(__props) {
+    const props = __props;
+    const locale = useI18n();
+    const isExpanded = ref(props.expanded);
+    const contentRef = ref(null);
+    const containerRef = ref(null);
+    const toggleExpand = async () => {
+      isExpanded.value = !isExpanded.value;
+      if (isExpanded.value) {
+        await nextTick();
+        if (containerRef.value) {
+          containerRef.value.style.height = "auto";
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: normalizeClass([_ctx.$style.evaluationStep, _ctx.small && _ctx.$style.small])
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.content)
+        }, [
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.header)
+          }, [
+            createBaseVNode("div", {
+              class: normalizeClass([_ctx.$style.icon, _ctx.warning && _ctx.$style.warning])
+            }, [
+              renderSlot(_ctx.$slots, "icon")
+            ], 2),
+            createBaseVNode("h3", {
+              class: normalizeClass(_ctx.$style.title)
+            }, toDisplayString(_ctx.title), 3),
+            _ctx.warning ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.warningIcon)
+            }, "⚠", 2)) : createCommentVNode("", true),
+            _ctx.$slots.cardContent ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: normalizeClass(_ctx.$style.collapseButton),
+              "aria-expanded": isExpanded.value,
+              "aria-controls": "content-" + _ctx.title.replace(/\s+/g, "-"),
+              onClick: toggleExpand
+            }, [
+              createTextVNode(toDisplayString(isExpanded.value ? unref(locale).baseText("testDefinition.edit.step.collapse") : unref(locale).baseText("testDefinition.edit.step.expand")) + " ", 1),
+              createVNode(_component_font_awesome_icon, {
+                icon: isExpanded.value ? "angle-down" : "angle-right",
+                size: "lg"
+              }, null, 8, ["icon"])
+            ], 10, _hoisted_1$1)) : createCommentVNode("", true)
+          ], 2),
+          _ctx.$slots.cardContent ? (openBlock(), createBlock(unref(ElCollapseTransition), { key: 0 }, {
+            default: withCtx(() => [
+              withDirectives(createBaseVNode("div", {
+                class: normalizeClass(_ctx.$style.cardContentWrapper)
+              }, [
+                createBaseVNode("div", {
+                  ref_key: "contentRef",
+                  ref: contentRef,
+                  class: normalizeClass(_ctx.$style.cardContent)
+                }, [
+                  renderSlot(_ctx.$slots, "cardContent")
+                ], 2)
+              ], 2), [
+                [vShow, isExpanded.value]
+              ])
+            ]),
+            _: 3
+          })) : createCommentVNode("", true)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const evaluationStep = "_evaluationStep_efi3y_1";
+const small = "_small_efi3y_13";
+const icon = "_icon_efi3y_17";
+const warning = "_warning_efi3y_26";
+const content$1 = "_content_efi3y_30";
+const header = "_header_efi3y_35";
+const title = "_title_efi3y_41";
+const warningIcon = "_warningIcon_efi3y_47";
+const cardContent = "_cardContent_efi3y_51";
+const collapseButton = "_collapseButton_efi3y_56";
+const cardContentWrapper = "_cardContentWrapper_efi3y_69";
+const style0$3 = {
+  evaluationStep,
+  small,
+  icon,
+  warning,
+  content: content$1,
+  header,
+  title,
+  warningIcon,
+  cardContent,
+  collapseButton,
+  cardContentWrapper
+};
+const cssModules$3 = {
+  "$style": style0$3
+};
+const EvaluationStep = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$3]]);
+const _hoisted_1 = { "data-test-id": "workflow-tags-field" };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "TagsInput",
+  props: {
+    modelValue: { default: () => ({
+      isEditing: false,
+      appliedTagIds: []
+    }) },
+    allTags: {},
+    tagsById: {},
+    isLoading: { type: Boolean },
+    startEditing: {},
+    saveChanges: {},
+    cancelEditing: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const locale = useI18n();
+    const tagsEventBus = createEventBus();
+    const getTagName = computed(() => (tagId) => {
+      var _a;
+      return ((_a = props.tagsById[tagId]) == null ? void 0 : _a.name) ?? "";
+    });
+    function updateTags(tags) {
+      const newTags = tags[0] ? [tags[0]] : [];
+      emit("update:modelValue", {
+        ...props.modelValue,
+        appliedTagIds: newTags
+      });
+    }
+    return (_ctx, _cache) => {
+      const _component_n8n_text = resolveComponent("n8n-text");
+      const _component_n8n_tag = resolveComponent("n8n-tag");
+      const _component_n8n_icon_button = resolveComponent("n8n-icon-button");
+      const _component_TagsDropdown = _sfc_main$8;
+      const _component_n8n_input_label = resolveComponent("n8n-input-label");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_n8n_input_label, {
+          label: unref(locale).baseText("testDefinition.edit.tagName"),
+          bold: false,
+          size: "small"
+        }, {
+          default: withCtx(() => [
+            !_ctx.modelValue.isEditing ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.tagsRead),
+              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.startEditing("tags"))
+            }, [
+              _ctx.modelValue.appliedTagIds.length === 0 ? (openBlock(), createBlock(_component_n8n_text, {
+                key: 0,
+                size: "small"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.selectTag")), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue.appliedTagIds, (tagId) => {
+                return openBlock(), createBlock(_component_n8n_tag, {
+                  key: tagId,
+                  text: getTagName.value(tagId),
+                  "data-test-id": "evaluation-tag-field"
+                }, null, 8, ["text"]);
+              }), 128)),
+              createVNode(_component_n8n_icon_button, {
+                class: normalizeClass(_ctx.$style.editInputButton),
+                icon: "pen",
+                type: "tertiary",
+                size: "small",
+                transparent: ""
+              }, null, 8, ["class"])
+            ], 2)) : (openBlock(), createBlock(_component_TagsDropdown, {
+              key: 1,
+              "model-value": _ctx.modelValue.appliedTagIds,
+              placeholder: unref(locale).baseText("executionAnnotationView.chooseOrCreateATag"),
+              "create-enabled": false,
+              "all-tags": _ctx.allTags,
+              "is-loading": _ctx.isLoading,
+              "tags-by-id": _ctx.tagsById,
+              "data-test-id": "workflow-tags-dropdown",
+              "event-bus": unref(tagsEventBus),
+              "onUpdate:modelValue": updateTags,
+              onEsc: _cache[1] || (_cache[1] = ($event) => _ctx.cancelEditing("tags")),
+              onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.saveChanges("tags"))
+            }, null, 8, ["model-value", "placeholder", "all-tags", "is-loading", "tags-by-id", "event-bus"]))
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        createVNode(_component_n8n_text, {
+          size: "small",
+          color: "text-light"
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.tagsHelpText")), 1)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const tagsRead = "_tagsRead_ekbvu_1";
+const editInputButton = "_editInputButton_ekbvu_1";
+const style0$2 = {
+  tagsRead,
+  editInputButton
+};
+const cssModules$2 = {
+  "$style": style0$2
+};
+const TagsInput = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "WorkflowSelector",
+  props: {
+    modelValue: { default: () => ({
+      mode: "id",
+      value: "",
+      __rl: true
+    }) }
+  },
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const locale = useI18n();
+    return (_ctx, _cache) => {
+      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, {
+          label: unref(locale).baseText("testDefinition.edit.workflowSelectorLabel"),
+          bold: false
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_WorkflowSelectorParameterInput, {
+              ref: "workflowInput",
+              parameter: {
+                displayName: unref(locale).baseText("testDefinition.edit.workflowSelectorDisplayName"),
+                name: "workflowId",
+                type: "workflowSelector",
+                default: ""
+              },
+              "model-value": _ctx.modelValue,
+              "display-title": unref(locale).baseText("testDefinition.edit.workflowSelectorTitle"),
+              "is-value-expression": false,
+              "expression-edit-dialog-visible": false,
+              path: "workflows",
+              "allow-new": "",
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event))
+            }, null, 8, ["parameter", "model-value", "display-title"])
+          ]),
+          _: 1
+        }, 8, ["label"])
+      ]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "MetricsInput",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const locale = useI18n();
+    function addNewMetric() {
+      emit("update:modelValue", [...props.modelValue, ""]);
+    }
+    function updateMetric(index, value) {
+      const newMetrics = [...props.modelValue];
+      newMetrics[index] = value;
+      emit("update:modelValue", newMetrics);
+    }
+    return (_ctx, _cache) => {
+      const _component_N8nInput = resolveComponent("N8nInput");
+      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_n8n_input_label = resolveComponent("n8n-input-label");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([_ctx.$style.metrics])
+      }, [
+        createVNode(_component_n8n_input_label, {
+          label: unref(locale).baseText("testDefinition.edit.metricsFields"),
+          bold: false,
+          class: normalizeClass(_ctx.$style.metricField)
+        }, {
+          default: withCtx(() => [
+            createBaseVNode("div", {
+              class: normalizeClass(_ctx.$style.metricsContainer)
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, (metric, index) => {
+                return openBlock(), createElementBlock("div", { key: index }, [
+                  createVNode(_component_N8nInput, {
+                    ref_for: true,
+                    ref: `metric_${index}`,
+                    "data-test-id": "evaluation-metric-item",
+                    "model-value": metric,
+                    placeholder: unref(locale).baseText("testDefinition.edit.metricsPlaceholder"),
+                    "onUpdate:modelValue": (value) => updateMetric(index, value)
+                  }, null, 8, ["model-value", "placeholder", "onUpdate:modelValue"])
+                ]);
+              }), 128)),
+              createVNode(_component_n8n_button, {
+                type: "tertiary",
+                label: unref(locale).baseText("testDefinition.edit.metricsNew"),
+                class: normalizeClass(_ctx.$style.newMetricButton),
+                onClick: addNewMetric
+              }, null, 8, ["label", "class"])
+            ], 2)
+          ]),
+          _: 1
+        }, 8, ["label", "class"])
+      ], 2);
+    };
+  }
+});
+const metricsContainer = "_metricsContainer_lwkya_1";
+const metricField = "_metricField_lwkya_7";
+const metricsDivider = "_metricsDivider_lwkya_12";
+const newMetricButton = "_newMetricButton_lwkya_17";
+const style0$1 = {
+  metricsContainer,
+  metricField,
+  metricsDivider,
+  newMetricButton
+};
+const cssModules$1 = {
+  "$style": style0$1
+};
+const MetricsInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "TestDefinitionEditView",
+  props: {
+    testId: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const router = useRouter();
+    const route = useRoute();
+    const locale = useI18n();
+    const { debounce } = useDebounce();
+    const toast = useToast();
+    const { isLoading, allTags, tagsById, fetchAll } = useAnnotationTagsStore();
+    const testId = computed(() => props.testId ?? route.params.testId);
+    const currentWorkflowId = computed(() => route.params.name);
+    const buttonLabel = computed(
+      () => testId.value ? locale.baseText("testDefinition.edit.updateTest") : locale.baseText("testDefinition.edit.saveTest")
+    );
+    const {
+      state,
+      fieldsIssues,
+      isSaving,
+      loadTestData,
+      createTest,
+      updateTest,
+      startEditing,
+      saveChanges,
+      cancelEditing,
+      handleKeydown
+    } = useTestDefinitionForm();
+    onMounted(async () => {
+      await fetchAll();
+      if (testId.value) {
+        await loadTestData(testId.value);
+      } else {
+        await onSaveTest();
+      }
+    });
+    async function onSaveTest() {
+      try {
+        let savedTest;
+        if (testId.value) {
+          savedTest = await updateTest(testId.value);
+        } else {
+          savedTest = await createTest(currentWorkflowId.value);
+        }
+        if (savedTest && route.name === VIEWS.TEST_DEFINITION_EDIT) {
+          await router.replace({
+            name: VIEWS.TEST_DEFINITION_EDIT,
+            params: { testId: savedTest.id }
+          });
+        }
+        toast.showMessage({
+          title: locale.baseText("testDefinition.edit.testSaved"),
+          type: "success"
+        });
+      } catch (e) {
+        toast.showError(e, locale.baseText("testDefinition.edit.testSaveFailed"));
+      }
+    }
+    function hasIssues(key) {
+      return fieldsIssues.value.some((issue) => issue.field === key);
+    }
+    watch(() => state.value, debounce(onSaveTest, { debounceTime: 400 }), { deep: true });
+    return (_ctx, _cache) => {
+      const _component_font_awesome_icon = resolveComponent("font-awesome-icon");
+      const _component_BlockArrow = __unplugin_components_0;
+      const _component_n8n_button = resolveComponent("n8n-button");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(_ctx.$style.content)
+        }, [
+          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"]),
+          createVNode(EvaluationStep, {
+            class: normalizeClass(_ctx.$style.step),
+            title: unref(locale).baseText("testDefinition.edit.description"),
+            expanded: false
+          }, {
+            icon: withCtx(() => [
+              createVNode(_component_font_awesome_icon, {
+                icon: "thumbtack",
+                size: "lg"
+              })
+            ]),
+            cardContent: withCtx(() => [
+              createVNode(DescriptionInput, {
+                modelValue: unref(state).description,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(state).description = $event)
+              }, null, 8, ["modelValue"])
+            ]),
+            _: 1
+          }, 8, ["class", "title"]),
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.panelIntro)
+          }, toDisplayString(unref(locale).baseText("testDefinition.edit.step.intro")), 3),
+          createVNode(_component_BlockArrow, {
+            class: normalizeClass(_ctx.$style.introArrow)
+          }, null, 8, ["class"]),
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.panelBlock)
+          }, [
+            createVNode(EvaluationStep, {
+              class: normalizeClass(_ctx.$style.step),
+              title: unref(locale).baseText("testDefinition.edit.step.executions")
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "history",
+                  size: "lg"
+                })
+              ]),
+              cardContent: withCtx(() => [
+                createVNode(TagsInput, {
+                  modelValue: unref(state).tags,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(state).tags = $event),
+                  class: normalizeClass({ "has-issues": hasIssues("tags") }),
+                  "all-tags": unref(allTags),
+                  "tags-by-id": unref(tagsById),
+                  "is-loading": unref(isLoading),
+                  "start-editing": unref(startEditing),
+                  "save-changes": unref(saveChanges),
+                  "cancel-editing": unref(cancelEditing)
+                }, null, 8, ["modelValue", "class", "all-tags", "tags-by-id", "is-loading", "start-editing", "save-changes", "cancel-editing"])
+              ]),
+              _: 1
+            }, 8, ["class", "title"]),
+            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.nodes"),
+              small: true,
+              expanded: false
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "thumbtack",
+                  size: "lg"
+                })
+              ]),
+              cardContent: withCtx(() => [
+                createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.step.mockedNodes", { adjustToNumber: 0 })), 1)
+              ]),
+              _: 1
+            }, 8, ["class", "title"]),
+            createVNode(EvaluationStep, {
+              class: normalizeClass(_ctx.$style.step),
+              title: unref(locale).baseText("testDefinition.edit.step.reRunExecutions"),
+              small: true
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "redo",
+                  size: "lg"
+                })
+              ]),
+              _: 1
+            }, 8, ["class", "title"]),
+            createVNode(EvaluationStep, {
+              class: normalizeClass(_ctx.$style.step),
+              title: unref(locale).baseText("testDefinition.edit.step.compareExecutions")
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "equals",
+                  size: "lg"
+                })
+              ]),
+              cardContent: withCtx(() => [
+                createVNode(_sfc_main$2, {
+                  modelValue: unref(state).evaluationWorkflow,
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => unref(state).evaluationWorkflow = $event),
+                  class: normalizeClass({ "has-issues": hasIssues("evaluationWorkflow") })
+                }, null, 8, ["modelValue", "class"])
+              ]),
+              _: 1
+            }, 8, ["class", "title"]),
+            createVNode(EvaluationStep, {
+              class: normalizeClass(_ctx.$style.step),
+              title: unref(locale).baseText("testDefinition.edit.step.metrics")
+            }, {
+              icon: withCtx(() => [
+                createVNode(_component_font_awesome_icon, {
+                  icon: "chart-bar",
+                  size: "lg"
+                })
+              ]),
+              cardContent: withCtx(() => [
+                createVNode(MetricsInput, {
+                  modelValue: unref(state).metrics,
+                  "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => unref(state).metrics = $event),
+                  class: normalizeClass({ "has-issues": hasIssues("metrics") })
+                }, null, 8, ["modelValue", "class"])
+              ]),
+              _: 1
+            }, 8, ["class", "title"])
+          ], 2),
+          createBaseVNode("div", {
+            class: normalizeClass(_ctx.$style.footer)
+          }, [
+            createVNode(_component_n8n_button, {
+              type: "primary",
+              "data-test-id": "run-test-button",
+              label: buttonLabel.value,
+              loading: unref(isSaving),
+              onClick: onSaveTest
+            }, null, 8, ["label", "loading"])
+          ], 2)
+        ], 2)
+      ], 2);
+    };
+  }
+});
+const container = "_container_1lz9n_1";
+const content = "_content_1lz9n_10";
+const panelBlock = "_panelBlock_1lz9n_15";
+const panelIntro = "_panelIntro_1lz9n_21";
+const step = "_step_1lz9n_30";
+const introArrow = "_introArrow_1lz9n_37";
+const evaluationArrows = "_evaluationArrows_1lz9n_42";
+const footer = "_footer_1lz9n_53";
+const workflow = "_workflow_1lz9n_59";
+const workflowSteps = "_workflowSteps_1lz9n_66";
+const sideBySide = "_sideBySide_1lz9n_73";
+const style0 = {
+  container,
+  content,
+  panelBlock,
+  panelIntro,
+  step,
+  introArrow,
+  evaluationArrows,
+  footer,
+  workflow,
+  workflowSteps,
+  sideBySide
+};
+const cssModules = {
+  "$style": style0
+};
+const TestDefinitionEditView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  TestDefinitionEditView as default
+};