n8n-editor-ui 1.86.0 → 1.87.1

package/dist/assets/{TestDefinitionEditView-o2Gc4BjN.js → TestDefinitionEditView-CZnzTAsp.js}

@@ -1,10 +1,10 @@
-import { u as useTestDefinitionForm } from "./useTestDefinitionForm-ZJngcsSH.js";
-import { _ as _export_sfc, i as createElementBlock, g as openBlock, k as createBaseVNode, n as normalizeClass, d as defineComponent, r as ref, $ as useCssModule, q as computed, h as resolveComponent, m as unref, j as createVNode, f as createCommentVNode, aR as N8nTooltip, w as withCtx, e as createBlock, b8 as N8nText, x as renderSlot, F as Fragment, l as createTextVNode, t as toDisplayString, dc as InfoTip, c as useI18n, gf as ne, T as useWorkflowsStore, bv as useNodeTypesStore, U as useRoute, b as useRouter, fM as useModel, o as onMounted, cX as N8nHeading, gg as _sfc_main$9, b2 as mergeProps, ba as N8nButton, ah as useTelemetry, a3 as useProjectsStore, gh as SAMPLE_EVALUATION_WORKFLOW, aS as N8nLink, gi as __unplugin_components_0, V as VIEWS, fL as mergeModels, gj as Tag, gk as NODE_PINNING_MODAL_KEY, gl as __unplugin_components_0$1, aj as useMessage, fl as dateFormat, bb as watchEffect, D as renderList, aB as withDirectives, aC as vShow, gm as TestTableBase, ca as N8nIcon, B as normalizeStyle, K as useDebounce, a as useToast, c7 as useTestDefinitionStore, fZ as useAnnotationTagsStore, L as useUIStore, Z as useDocumentVisibility, I as watch, aT as _sfc_main$a, gn as InlineNameEdit } from "./index-CkOV8f0Z.js";
-import { u as useVueFlow, a as useCanvasMapping, C as Canvas, b as CanvasNode } from "./useCanvasMapping-Cla--atl.js";
-import { c as useCanvasOperations } from "./useCanvasOperations-FyzGfva5.js";
-import { L as Line } from "./index-C0DaAYgf.js";
-import "./useRunWorkflow-DnbQqqcB.js";
-import "./pushConnection.store-Cb2TGyrZ.js";
+import { u as useTestDefinitionForm } from "./useTestDefinitionForm-Dlzud2C-.js";
+import { _ as _export_sfc, i as createElementBlock, g as openBlock, k as createBaseVNode, n as normalizeClass, d as defineComponent, r as ref, a0 as useCssModule, q as computed, h as resolveComponent, m as unref, j as createVNode, f as createCommentVNode, aS as N8nTooltip, w as withCtx, e as createBlock, b9 as N8nText, x as renderSlot, F as Fragment, l as createTextVNode, t as toDisplayString, df as InfoTip, c as useI18n, g8 as ne, U as useWorkflowsStore, bw as useNodeTypesStore, W as useRoute, b as useRouter, fA as useModel, o as onMounted, c_ as N8nHeading, g9 as _sfc_main$9, b3 as mergeProps, bb as N8nButton, ai as useTelemetry, a4 as useProjectsStore, ga as SAMPLE_EVALUATION_WORKFLOW, aT as N8nLink, gb as __unplugin_components_0, V as VIEWS, fz as mergeModels, gc as Tag, gd as NODE_PINNING_MODAL_KEY, ge as __unplugin_components_0$1, ak as useMessage, gf as useCssVar, f9 as dateformat, bc as watchEffect, D as renderList, gg as TestTableBase, bE as N8nIcon, K as useDebounce, a as useToast, g5 as useTestDefinitionStore, fQ as useAnnotationTagsStore, L as useUIStore, $ as useDocumentVisibility, I as watch, d2 as orderBy, aU as _sfc_main$a, gh as InlineNameEdit } from "./index-D76xStxp.js";
+import { u as useVueFlow, a as useCanvasMapping, C as Canvas, b as CanvasNode } from "./useCanvasMapping-D1DfqsUU.js";
+import { b as useCanvasOperations } from "./useCanvasOperations-CAthHfOB.js";
+import { L as Line } from "./index-Bo3CExk-.js";
+import { _ as __unplugin_components_0$2 } from "./AnimatedSpinner-BJKBduqI.js";
+import { c as convertToDisplayDate } from "./dateFormatter-Cdy8FmTT.js";
 const blockArrow = "_blockArrow_hbkir_123";
 const stalk = "_stalk_hbkir_129";
 const arrowHead = "_arrowHead_hbkir_136";
@@ -762,61 +762,44 @@ const cssModules$4 = {
   "$style": style0$4
 };
 const ConfigSection = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__cssModules", cssModules$4]]);
-const THEME_COLORS = {
-  light: {
-    primary: "rgb(255, 110, 92)",
-    text: {
-      primary: "rgb(68, 68, 68)",
-      secondary: "rgb(102, 102, 102)"
-    },
-    background: "rgb(255, 255, 255)",
-    grid: "rgba(68, 68, 68, 0.1)"
-  },
-  dark: {
-    primary: "rgb(255, 110, 92)",
-    text: {
-      primary: "rgb(255, 255, 255)",
-      secondary: "rgba(255, 255, 255, 0.7)"
-    },
-    background: "rgb(32, 32, 32)",
-    grid: "rgba(255, 255, 255, 0.1)"
-  }
-};
-function useMetricsChart(mode = "light") {
-  const colors = THEME_COLORS[mode];
-  const toRGBA = (color, alpha) => {
-    if (color.includes("rgba")) return color;
-    return color.replace("rgb", "rgba").replace(")", `, ${alpha})`);
+function useMetricsChart() {
+  const colors = {
+    primary: useCssVar("--color-primary", document.body).value,
+    textBase: useCssVar("--color-text-base", document.body).value,
+    backgroundXLight: useCssVar("--color-background-xlight", document.body).value,
+    foregroundLight: useCssVar("--color-foreground-light", document.body).value,
+    foregroundBase: useCssVar("--color-foreground-base", document.body).value,
+    foregroundDark: useCssVar("--color-foreground-dark", document.body).value
   };
   function generateChartData(runs2, metric) {
-    const sortedRuns = [...runs2].sort((a, b) => new Date(a.runAt).getTime() - new Date(b.runAt).getTime()).filter((run) => run.metrics?.[metric]);
-    return {
-      labels: sortedRuns.map((run) => {
-        return dateFormat(run.runAt, "yyyy-mm-dd HH:MM");
-      }),
+    const data = {
       datasets: [
         {
-          label: metric,
-          data: sortedRuns.map((run) => run.metrics?.[metric] ?? 0),
+          data: runs2,
+          parsing: {
+            xAxisKey: "id",
+            yAxisKey: `metrics.${metric}`
+          },
           borderColor: colors.primary,
-          backgroundColor: toRGBA(colors.primary, 0.1),
-          borderWidth: 2,
-          pointRadius: 4,
-          pointHoverRadius: 6,
-          pointBackgroundColor: colors.primary,
-          pointBorderColor: colors.primary,
-          pointHoverBackgroundColor: colors.background,
-          pointHoverBorderColor: colors.primary,
-          tension: 0.4,
-          fill: true
+          backgroundColor: colors.backgroundXLight,
+          borderWidth: 1,
+          pointRadius: 2,
+          pointHoverRadius: 4,
+          pointBackgroundColor: colors.backgroundXLight,
+          pointHoverBackgroundColor: colors.backgroundXLight
         }
       ]
     };
+    return data;
   }
-  function generateChartOptions(params) {
+  function generateChartOptions({
+    metric,
+    data
+  }) {
     return {
       responsive: true,
       maintainAspectRatio: false,
+      animation: false,
       devicePixelRatio: 2,
       interaction: {
         mode: "index",
@@ -824,67 +807,64 @@ function useMetricsChart(mode = "light") {
       },
       scales: {
         y: {
-          beginAtZero: true,
+          border: {
+            display: false
+          },
           grid: {
-            color: colors.grid
+            color: colors.foregroundBase
           },
           ticks: {
             padding: 8,
-            color: colors.text.primary
-          },
-          title: {
-            display: false,
-            text: params.metric,
-            padding: 16,
-            color: colors.text.primary
+            color: colors.textBase
           }
         },
         x: {
-          grid: {
+          border: {
             display: false
           },
-          ticks: {
+          grid: {
             display: false
           },
-          title: {
-            text: params.xTitle,
-            padding: 1,
-            color: colors.text.primary
+          ticks: {
+            color: colors.textBase,
+            // eslint-disable-next-line id-denylist
+            callback(_tickValue, index) {
+              return `#${data[index].index}`;
+            }
           }
         }
       },
       plugins: {
         tooltip: {
-          backgroundColor: colors.background,
-          titleColor: colors.text.primary,
+          backgroundColor: colors.backgroundXLight,
+          titleColor: colors.textBase,
           titleFont: {
             weight: "600"
           },
-          bodyColor: colors.text.secondary,
+          bodyColor: colors.textBase,
           bodySpacing: 4,
           padding: 12,
-          borderColor: toRGBA(colors.primary, 0.2),
+          borderColor: colors.foregroundBase,
           borderWidth: 1,
           displayColors: true,
           callbacks: {
-            title: (tooltipItems) => tooltipItems[0].label,
-            label: (context) => `${params.metric}: ${context.parsed.y.toFixed(2)}`
+            title: (tooltipItems) => {
+              return dateformat(tooltipItems[0].raw.runAt, "yyyy-mm-dd HH:MM");
+            },
+            label: (context) => `${metric}: ${context.parsed.y.toFixed(2)}`,
+            labelColor() {
+              return {
+                borderColor: "rgba(29, 21, 21, 0)",
+                backgroundColor: colors.primary,
+                borderWidth: 0,
+                borderRadius: 5
+              };
+            }
           }
         },
         legend: {
           display: false
         }
-      },
-      animation: {
-        duration: 750,
-        easing: "easeInOutQuart"
-      },
-      transitions: {
-        active: {
-          animation: {
-            duration: 300
-          }
-        }
       }
     };
   }
@@ -897,26 +877,29 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "MetricsChart",
   props: {
     selectedMetric: {},
-    runs: {},
-    theme: {}
+    runs: {}
   },
   emits: ["update:selectedMetric"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const locale = useI18n();
-    const metricsChart = useMetricsChart(props.theme);
+    const metricsChart = useMetricsChart();
     const availableMetrics = computed(() => {
       return props.runs.reduce((acc, run) => {
         const metricKeys = Object.keys(run.metrics ?? {});
         return [.../* @__PURE__ */ new Set([...acc, ...metricKeys])];
       }, []);
     });
-    const chartData = computed(() => metricsChart.generateChartData(props.runs, props.selectedMetric));
+    const filteredRuns = computed(
+      () => props.runs.filter((run) => run.metrics?.[props.selectedMetric] !== void 0)
+    );
+    const chartData = computed(
+      () => metricsChart.generateChartData(filteredRuns.value, props.selectedMetric)
+    );
     const chartOptions = computed(
       () => metricsChart.generateChartOptions({
         metric: props.selectedMetric,
-        xTitle: locale.baseText("testDefinition.listRuns.runDate")
+        data: filteredRuns.value
       })
     );
     watchEffect(() => {
@@ -927,8 +910,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_N8nOption = resolveComponent("N8nOption");
       const _component_N8nSelect = resolveComponent("N8nSelect");
-      return availableMetrics.value.length > 0 ? (openBlock(), createElementBlock("div", {
-        key: 0,
+      return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.metricsChartContainer)
       }, [
         createBaseVNode("div", {
@@ -956,22 +938,22 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: normalizeClass(_ctx.$style.chartWrapper)
         }, [
-          availableMetrics.value.length > 0 ? (openBlock(), createBlock(unref(Line), {
+          (openBlock(), createBlock(unref(Line), {
             key: _ctx.selectedMetric,
             data: chartData.value,
             options: chartOptions.value,
             class: normalizeClass(_ctx.$style.metricsChart)
-          }, null, 8, ["data", "options", "class"])) : createCommentVNode("", true)
+          }, null, 8, ["data", "options", "class"]))
         ], 2)
-      ], 2)) : createCommentVNode("", true);
+      ], 2);
     };
   }
 });
-const metricsChartContainer = "_metricsChartContainer_1ejem_123";
-const chartHeader = "_chartHeader_1ejem_128";
-const chartTitle = "_chartTitle_1ejem_136";
-const metricSelect = "_metricSelect_1ejem_141";
-const chartWrapper = "_chartWrapper_1ejem_144";
+const metricsChartContainer = "_metricsChartContainer_1xhz2_123";
+const chartHeader = "_chartHeader_1xhz2_128";
+const chartTitle = "_chartTitle_1xhz2_131";
+const metricSelect = "_metricSelect_1xhz2_136";
+const chartWrapper = "_chartWrapper_1xhz2_139";
 const style0$3 = {
   metricsChartContainer,
   chartHeader,
@@ -988,24 +970,43 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "TestRunsTable",
   props: {
     runs: {},
-    columns: {},
-    selectable: { type: Boolean }
+    columns: {}
   },
-  emits: ["rowClick", "selectionChange", "deleteRuns"],
+  emits: ["rowClick"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const statusesColorDictionary = {
-      new: "var(--color-primary)",
-      running: "var(--color-secondary)",
-      completed: "var(--color-success)",
-      error: "var(--color-danger)",
-      cancelled: "var(--color-foreground-dark)",
-      warning: "var(--color-warning)",
-      success: "var(--color-success)"
+    const statusDictionary = {
+      new: {
+        icon: "status-new",
+        color: "foreground-xdark"
+      },
+      running: {
+        icon: "spinner",
+        color: "secondary"
+      },
+      completed: {
+        icon: "status-completed",
+        color: "success"
+      },
+      error: {
+        icon: "status-error",
+        color: "danger"
+      },
+      cancelled: {
+        icon: "status-canceled",
+        color: "foreground-xdark"
+      },
+      warning: {
+        icon: "status-warning",
+        color: "warning"
+      },
+      success: {
+        icon: "status-completed",
+        color: "success"
+      }
     };
     const locale = useI18n();
-    const selectedRows = ref([]);
     const runSummaries = computed(() => {
       return props.runs.map(({ status, finalResult, ...run }) => {
         if (status === "completed" && finalResult) {
@@ -1014,86 +1015,60 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         return { ...run, status };
       });
     });
-    function onSelectionChange(runs2) {
-      selectedRows.value = runs2;
-      emit("selectionChange", runs2);
-    }
-    async function deleteRuns() {
-      emit("deleteRuns", selectedRows.value);
-    }
     return (_ctx, _cache) => {
       const _component_N8nHeading = resolveComponent("N8nHeading");
-      const _component_n8n_button = resolveComponent("n8n-button");
+      const _component_AnimatedSpinner = __unplugin_components_0$2;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(_ctx.$style.container)
       }, [
         createVNode(_component_N8nHeading, {
           size: "large",
           bold: true,
-          class: normalizeClass(_ctx.$style.runsTableHeading)
+          class: normalizeClass(_ctx.$style.runsTableHeading),
+          color: "text-base"
         }, {
           default: withCtx(() => [
-            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pastRuns.total", { adjustToNumber: _ctx.runs.length })), 1)
+            createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.edit.pastRuns.total", { adjustToNumber: _ctx.runs.length })) + " ", 1),
+            createVNode(unref(N8nText), null, {
+              default: withCtx(() => [
+                createTextVNode(" (" + toDisplayString(_ctx.runs.length) + ") ", 1)
+              ]),
+              _: 1
+            })
           ]),
           _: 1
         }, 8, ["class"]),
-        createBaseVNode("div", {
-          class: normalizeClass(_ctx.$style.header)
-        }, [
-          withDirectives(createVNode(_component_n8n_button, {
-            type: "danger",
-            class: normalizeClass(_ctx.$style.activator),
-            size: "medium",
-            icon: "trash",
-            "data-test-id": "delete-runs-button",
-            onClick: deleteRuns
-          }, {
-            default: withCtx(() => [
-              createTextVNode(toDisplayString(unref(locale).baseText("testDefinition.listRuns.deleteRuns", {
-                adjustToNumber: selectedRows.value.length
-              })), 1)
-            ]),
-            _: 1
-          }, 8, ["class"]), [
-            [vShow, selectedRows.value.length > 0]
-          ])
-        ], 2),
         createVNode(TestTableBase, {
           data: runSummaries.value,
           columns: _ctx.columns,
-          selectable: "",
           "default-sort": { prop: "runAt", order: "descending" },
-          onRowClick: _cache[0] || (_cache[0] = (row) => emit("rowClick", row)),
-          onSelectionChange
+          onRowClick: _cache[0] || (_cache[0] = (row) => emit("rowClick", row))
         }, {
+          id: withCtx(({ row }) => [
+            createTextVNode("#" + toDisplayString(row.index), 1)
+          ]),
           status: withCtx(({ row }) => [
             createBaseVNode("div", _hoisted_1$1, [
-              createVNode(unref(N8nIcon), {
-                icon: "circle",
-                size: "xsmall",
-                style: normalizeStyle({ color: statusesColorDictionary[row.status] })
-              }, null, 8, ["style"]),
-              row.status === "error" ? (openBlock(), createBlock(unref(N8nText), {
+              row.status === "running" ? (openBlock(), createBlock(unref(N8nText), {
                 key: 0,
-                size: "small",
-                bold: "",
-                color: "text-base"
+                color: "secondary",
+                class: "mr-2xs"
               }, {
                 default: withCtx(() => [
-                  createTextVNode(toDisplayString(row.failedCases) + " / " + toDisplayString(row.totalCases) + " " + toDisplayString(row.status), 1)
+                  createVNode(_component_AnimatedSpinner)
                 ]),
-                _: 2
-              }, 1024)) : (openBlock(), createBlock(unref(N8nText), {
+                _: 1
+              })) : (openBlock(), createBlock(unref(N8nIcon), {
                 key: 1,
-                size: "small",
-                bold: "",
-                color: "text-base"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(row.status), 1)
-                ]),
-                _: 2
-              }, 1024))
+                icon: statusDictionary[row.status].icon,
+                color: statusDictionary[row.status].color,
+                class: "mr-2xs"
+              }, null, 8, ["icon", "color"])),
+              row.status === "error" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                createTextVNode(toDisplayString(row.failedCases) + " " + toDisplayString(row.status), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                createTextVNode(toDisplayString(row.status), 1)
+              ], 64))
             ])
           ]),
           _: 1
@@ -1102,7 +1077,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_fgn23_123";
+const container = "_container_1rjad_123";
 const style0$2 = {
   container
 };
@@ -1114,22 +1089,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "RunsSection",
   props: /* @__PURE__ */ mergeModels({
     runs: {},
-    testId: {},
-    appliedTheme: {}
+    testId: {}
   }, {
     "selectedMetric": { required: true },
     "selectedMetricModifiers": {}
   }),
-  emits: /* @__PURE__ */ mergeModels(["deleteRuns"], ["update:selectedMetric"]),
-  setup(__props, { emit: __emit }) {
+  emits: ["update:selectedMetric"],
+  setup(__props) {
     const props = __props;
-    const emit = __emit;
     const locale = useI18n();
     const router = useRouter();
     const selectedMetric = useModel(__props, "selectedMetric");
-    function onDeleteRuns(toDelete) {
-      emit("deleteRuns", toDelete);
-    }
     const metrics = computed(() => {
       const metricKeys = props.runs.reduce((acc, run) => {
         Object.keys(run.metrics ?? {}).forEach((metric) => acc.add(metric));
@@ -1144,14 +1114,13 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         sortable: true,
         showHeaderTooltip: true,
         sortMethod: (a, b) => (a.metrics?.[metric] ?? 0) - (b.metrics?.[metric] ?? 0),
-        formatter: (row) => (row.metrics?.[metric] ?? 0).toFixed(2)
+        formatter: (row) => row.metrics?.[metric] !== void 0 ? (row.metrics?.[metric]).toFixed(2) : ""
       }))
     );
     const columns = computed(() => [
       {
-        prop: "runNumber",
+        prop: "id",
         label: locale.baseText("testDefinition.listRuns.runNumber"),
-        formatter: (row) => `${row.id}`,
         showOverflowTooltip: true
       },
       {
@@ -1159,6 +1128,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         label: "Run at",
         sortable: true,
         showOverflowTooltip: true,
+        formatter: (row) => {
+          const { date, time } = convertToDisplayDate(row.runAt);
+          return [date, time].join(", ");
+        },
         sortMethod: (a, b) => new Date(a.runAt ?? a.createdAt).getTime() - new Date(b.runAt ?? b.createdAt).getTime()
       },
       {
@@ -1181,23 +1154,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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"]),
+          runs: _ctx.runs
+        }, null, 8, ["selectedMetric", "runs"]),
         createVNode(TestRunsTable, {
           class: normalizeClass(_ctx.$style.runsTable),
           runs: _ctx.runs,
           columns: columns.value,
           selectable: true,
           "data-test-id": "past-runs-table",
-          onDeleteRuns,
           onRowClick: handleRowClick
         }, null, 8, ["class", "runs", "columns"])
       ], 2);
     };
   }
 });
-const runs = "_runs_gua3g_123";
+const runs = "_runs_37xaf_123";
 const style0$1 = {
   runs
 };
@@ -1235,7 +1206,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const isLoading = computed(() => tagsStore.isLoading);
     const tagsById = computed(() => tagsStore.tagsById);
     const currentWorkflowId = computed(() => props.name);
-    const appliedTheme = computed(() => uiStore.appliedTheme);
     const workflowName = computed(() => workflowStore.workflow.name);
     const hasRuns = computed(() => runs2.value.length > 0);
     const fieldsIssues = computed(() => testDefinitionStore.getFieldIssues(props.testId) ?? []);
@@ -1269,20 +1239,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
       window.open(executionsRoute.href, "_blank");
     }
-    const runs2 = computed(
-      () => Object.values(testDefinitionStore.testRunsById ?? {}).filter(
-        (run) => run.testDefinitionId === props.testId
-      )
-    );
+    const runs2 = computed(() => {
+      const testRuns = Object.values(testDefinitionStore.testRunsById ?? {}).filter(
+        ({ testDefinitionId }) => testDefinitionId === props.testId
+      );
+      return orderBy(testRuns, (record) => new Date(record.runAt), ["asc"]).map(
+        (record, index) => Object.assign(record, { index: index + 1 })
+      );
+    });
     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) => {
-          await testDefinitionStore.deleteTestRun({ testDefinitionId: props.testId, runId: run.id });
-        })
-      );
-    }
     async function renameTag(newName) {
       await tagsStore.rename({ id: state.value.tags.value[0], name: newName });
     }
@@ -1436,10 +1402,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "onUpdate:selectedMetric": _cache[1] || (_cache[1] = ($event) => selectedMetric.value = $event),
               class: normalizeClass(_ctx.$style.runs),
               runs: runs2.value,
-              "test-id": _ctx.testId,
-              "applied-theme": appliedTheme.value,
-              onDeleteRuns
-            }, null, 8, ["selectedMetric", "class", "runs", "test-id", "applied-theme"])) : createCommentVNode("", true),
+              "test-id": _ctx.testId
+            }, null, 8, ["selectedMetric", "class", "runs", "test-id"])) : createCommentVNode("", true),
             showConfig.value ? (openBlock(), createBlock(ConfigSection, {
               key: 1,
               tags: unref(state).tags,

package/dist/assets/{TestDefinitionEditView-C3nnWQ4Q.css → TestDefinitionEditView-Cwkrz308.css}

@@ -752,30 +752,25 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._metricsChartContainer_1ejem_123 {
+._metricsChartContainer_1xhz2_123 {
   background: var(--color-background-xlight);
   border-radius: var(--border-radius-large);
-  box-shadow: var(--box-shadow-base);
+  border: 1px solid var(--color-foreground-base);
 }
-._metricsChartContainer_1ejem_123 ._chartHeader_1ejem_128 {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--spacing-s);
-  padding: var(--spacing-xs) var(--spacing-s);
-  border-bottom: 1px solid var(--color-foreground-base);
+._metricsChartContainer_1xhz2_123 ._chartHeader_1xhz2_128 {
+  padding: var(--spacing-xs) var(--spacing-s) 0;
 }
-._metricsChartContainer_1ejem_123 ._chartTitle_1ejem_136 {
+._metricsChartContainer_1xhz2_123 ._chartTitle_1xhz2_131 {
   font-size: var(--font-size-l);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-base);
 }
-._metricsChartContainer_1ejem_123 ._metricSelect_1ejem_141 {
+._metricsChartContainer_1xhz2_123 ._metricSelect_1xhz2_136 {
   max-width: 15rem;
 }
-._metricsChartContainer_1ejem_123 ._chartWrapper_1ejem_144 {
+._metricsChartContainer_1xhz2_123 ._chartWrapper_1xhz2_139 {
   position: relative;
-  height: var(--metrics-chart-height, 200px);
+  height: var(--metrics-chart-height, 147px);
   width: 100%;
   padding: var(--spacing-s);
 }/* BEM support Func
@@ -900,11 +895,10 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._container_fgn23_123 {
+._container_1rjad_123 {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  flex: 1;
+  gap: 8px;
 }/* BEM support Func
  -------------------------- */
 /* Transition
@@ -1027,10 +1021,10 @@
  -------------------------- */
 /* BEM
  -------------------------- */
-._runs_gua3g_123 {
+._runs_37xaf_123 {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-m);
+  gap: var(--spacing-s);
   flex: 1;
   overflow: auto;
   margin-bottom: 20px;

package/dist/assets/{TestDefinitionListView-BuUWjPAl.js → TestDefinitionListView-CKsRlhn4.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, q as computed, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, j as createVNode, w as withCtx, l as createTextVNode, m as unref, d6 as N8nBadge, e as createBlock, f as createCommentVNode, t as toDisplayString, c as useI18n, b8 as N8nText, ba as N8nButton, F as Fragment, _ as _export_sfc, x as renderSlot, b2 as mergeProps, ca as N8nIcon, cR as _sfc_main$3, D as renderList, b as useRouter, c7 as useTestDefinitionStore, a as useToast, d4 as useAsyncState, c$ as orderBy, gd as N8nLoading, cX as N8nHeading, J as withModifiers, ge as N8nActionToggle, aR as N8nTooltip, aT as _sfc_main$4, ar as h, c8 as RouterLink, V as VIEWS, aj as useMessage, ak as MODAL_CONFIRM } from "./index-CkOV8f0Z.js";
+import { d as defineComponent, q as computed, i as createElementBlock, g as openBlock, n as normalizeClass, k as createBaseVNode, j as createVNode, w as withCtx, l as createTextVNode, m as unref, d9 as N8nBadge, e as createBlock, f as createCommentVNode, t as toDisplayString, c as useI18n, b9 as N8nText, bb as N8nButton, F as Fragment, _ as _export_sfc, x as renderSlot, b3 as mergeProps, bE as N8nIcon, cV as _sfc_main$3, D as renderList, b as useRouter, g5 as useTestDefinitionStore, a as useToast, d7 as useAsyncState, d2 as orderBy, g6 as N8nLoading, c_ as N8nHeading, J as withModifiers, g7 as N8nActionToggle, aS as N8nTooltip, aU as _sfc_main$4, as as h, cd as RouterLink, V as VIEWS, ak as useMessage, al as MODAL_CONFIRM } from "./index-D76xStxp.js";
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "EmptyState",
   emits: ["create-test"],