n8n-editor-ui 1.108.1 → 1.109.1-exp.0

package/dist/assets/{MainHeader-lQ8AnThi.js → MainHeader-BZ-UXtjK.js}

@@ -1,13 +1,13 @@
-import { d as defineComponent, r as ref, x as computed, e as createBlock, f as createCommentVNode, g as openBlock, l as unref, y as N8nPopoverReka, w as withCtx, j as createBaseVNode, n as normalizeClass, i as createVNode, h as createElementBlock, m as N8nHeading, k as createTextVNode, t as toDisplayString, z as N8nCallout, F as Fragment, A as renderList, B as withModifiers, N as N8nIcon, p as N8nText, C as N8nLink, D as useI18n, _ as _export_sfc, E as ElDropdown, G as N8nAvatar, H as ElDropdownMenu, I as ElDropdownItem, J as N8nUserInfo, K as mergeProps, L as MAIN_HEADER_TABS, O as N8nRadioButtons, P as onBeforeUnmount, o as onMounted, Q as renderSlot, R as nextTick, S as debounce, T as resolveComponent, U as normalizeStyle, W as createEventBus, X as useTagsStore, Y as useDebounce, Z as useUIStore, $ as BREAKPOINT_SM, a0 as BREAKPOINT_XL, a1 as BREAKPOINT_LG, a2 as BREAKPOINT_MD, a3 as getBannerRowHeight, V as VIEWS, a4 as Tooltip, a5 as _sfc_main$d, c as useI18n$1, a6 as I18nT, a7 as defineStore, a8 as usePushConnectionStore, a9 as useWorkflowsStore, u as useUsersStore, aa as useRoute, ab as PLACEHOLDER_EMPTY_WORKFLOW_ID, ac as STORES, ad as TIME, ae as useDocumentVisibility, af as watch, b as useRouter, ag as useEvaluationStore, ah as useNodeTypesStore, ai as useWorkflowSettingsCache, aj as useSourceControlStore, ak as WORKFLOW_ACTIVE_MODAL_KEY, al as ERROR_WORKFLOW_DOCS_URL, am as EVALUATIONS_DOCS_URL, an as TIME_SAVED_DOCS_URL, ao as WORKFLOW_SETTINGS_MODAL_KEY, ap as useTelemetry, aq as useMessage, ar as MODAL_CONFIRM, as as useCssModule, at as useRootStore, v as useSettingsStore, au as useProjectsStore, av as useFoldersStore, aw as useNpsSurveyStore, a as useToast, ax as useDocumentTitle, ay as useWorkflowSaving, az as useWorkflowHelpers, aA as usePageRedirectionHelper, aB as getResourcePermissions, aC as WORKFLOW_MENU_ACTIONS, aD as hasPermission, aE as EnterpriseEditionFeature, aF as ProjectTypes, aG as useTemplateRef, aH as InlineRename, aI as MAX_WORKFLOW_NAME_LENGTH, aJ as _sfc_main$e, aK as N8nBadge, q as N8nButton, aL as SaveButton, aM as N8nActionDropdown, aN as WORKFLOW_SHARE_MODAL_KEY, aO as nodeViewEventBus, aP as IMPORT_WORKFLOW_URL_MODAL_KEY, aQ as FileSaver_minExports, aR as DUPLICATE_MODAL_KEY, aS as ResourceType, aT as PROJECT_MOVE_RESOURCE_MODAL, aU as __vitePreload, aV as hyphenate, aW as h, aX as hasOwn, aY as useNDVStore, aZ as useExecutionsStore, a_ as useLocalStorage, a$ as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, b0 as STICKY_NODE_TYPE, b1 as onBeforeMount, b2 as withDirectives, b3 as vShow, b4 as N8N_MAIN_GITHUB_REPO_URL } from "./index-DuT-FIl1.js";
-import { _ as __unplugin_components_0, W as WorkflowActivator } from "./WorkflowActivator-5rkOtBNg.js";
-import { _ as _sfc_main$f } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-CC7YLT_t.js";
-import { u as useBeforeUnload } from "./useBeforeUnload-_0Sc5GzG.js";
-import { T as Tag } from "./Tag-BU_1pCk_.js";
-import { u as usePushConnection } from "./usePushConnection-_wOU-QzC.js";
-import "./ProjectBreadcrumb-CzeQoSDB.js";
-import "./useWorkflowActivate-IL8D7V3s.js";
-import "./global-link-actions-DVZ42e62.js";
-import "./readyToRunWorkflows.store-BMekdydj.js";
+import { d as defineComponent, r as ref, x as computed, e as createBlock, f as createCommentVNode, g as openBlock, l as unref, y as N8nPopoverReka, w as withCtx, j as createBaseVNode, n as normalizeClass, i as createVNode, h as createElementBlock, m as N8nHeading, k as createTextVNode, t as toDisplayString, z as N8nCallout, F as Fragment, A as renderList, B as withModifiers, N as N8nIcon, p as N8nText, C as N8nLink, D as useI18n, _ as _export_sfc, E as ElDropdown, G as N8nAvatar, H as ElDropdownMenu, I as ElDropdownItem, J as N8nUserInfo, K as mergeProps, L as MAIN_HEADER_TABS, O as N8nRadioButtons, P as useDebounce, Q as useUIStore, R as BREAKPOINT_SM, S as BREAKPOINT_XL, T as BREAKPOINT_LG, U as BREAKPOINT_MD, o as onMounted, W as onBeforeUnmount, X as renderSlot, Y as nextTick, Z as getBannerRowHeight, $ as defineStore, a0 as usePushConnectionStore, a1 as useWorkflowsStore, u as useUsersStore, a2 as useRoute, a3 as PLACEHOLDER_EMPTY_WORKFLOW_ID, a4 as STORES, a5 as TIME, a6 as useDocumentVisibility, a7 as watch, V as VIEWS, a8 as resolveComponent, a9 as Tooltip, aa as _sfc_main$d, c as useI18n$1, ab as I18nT, b as useRouter, ac as useEvaluationStore, ad as useNodeTypesStore, ae as useWorkflowSettingsCache, af as useSourceControlStore, ag as WORKFLOW_ACTIVE_MODAL_KEY, ah as ERROR_WORKFLOW_DOCS_URL, ai as EVALUATIONS_DOCS_URL, aj as TIME_SAVED_DOCS_URL, ak as WORKFLOW_SETTINGS_MODAL_KEY, al as useTelemetry, am as useMessage, an as MODAL_CONFIRM, ao as debounce, ap as normalizeStyle, aq as createEventBus, ar as useTagsStore, as as useCssModule, at as useRootStore, v as useSettingsStore, au as useProjectsStore, av as useFoldersStore, aw as useNpsSurveyStore, a as useToast, ax as useDocumentTitle, ay as useWorkflowSaving, az as useWorkflowHelpers, aA as usePageRedirectionHelper, aB as getResourcePermissions, aC as WORKFLOW_MENU_ACTIONS, aD as hasPermission, aE as EnterpriseEditionFeature, aF as ProjectTypes, aG as useTemplateRef, aH as InlineRename, aI as MAX_WORKFLOW_NAME_LENGTH, aJ as _sfc_main$e, aK as N8nBadge, q as N8nButton, aL as SaveButton, aM as N8nActionDropdown, aN as WORKFLOW_SHARE_MODAL_KEY, aO as nodeViewEventBus, aP as IMPORT_WORKFLOW_URL_MODAL_KEY, aQ as FileSaver_minExports, aR as DUPLICATE_MODAL_KEY, aS as ResourceType, aT as PROJECT_MOVE_RESOURCE_MODAL, aU as __vitePreload, aV as hyphenate, aW as h, aX as hasOwn, aY as useNDVStore, aZ as useExecutionsStore, a_ as useLocalStorage, a$ as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, b0 as STICKY_NODE_TYPE, b1 as onBeforeMount, b2 as withDirectives, b3 as vShow, b4 as N8N_MAIN_GITHUB_REPO_URL } from "./index-Cz15Tiv9.js";
+import { _ as __unplugin_components_0, W as WorkflowActivator } from "./WorkflowActivator-_e923o0y.js";
+import { u as useBeforeUnload } from "./useBeforeUnload-BkXoGUBm.js";
+import { _ as _sfc_main$f } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-CO-M5R89.js";
+import { T as Tag } from "./Tag-DU_lYKFb.js";
+import { u as usePushConnection } from "./usePushConnection-CdWJ1GHK.js";
+import "./ProjectBreadcrumb-CWq8ubCf.js";
+import "./useWorkflowActivate-DUdD-y87.js";
+import "./global-link-actions-B6KV3Sbr.js";
+import "./readyToRunWorkflows.store-Cmgt_RuC.js";
 const _hoisted_1$4 = ["data-action-id", "onClick"];
 const _hoisted_2$3 = { key: 0 };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
@@ -394,271 +394,6 @@ const cssModules$3 = {
 };
 const TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$3]]);
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "IntersectionObserver",
-  props: {
-    threshold: { default: 0 },
-    enabled: { type: Boolean, default: false },
-    eventBus: {}
-  },
-  emits: ["observed"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const observer = ref(null);
-    const root = ref(null);
-    onBeforeUnmount(() => {
-      if (props.enabled && observer.value) {
-        observer.value.disconnect();
-      }
-    });
-    onMounted(() => {
-      if (!props.enabled) {
-        return;
-      }
-      const options = {
-        root: root.value,
-        rootMargin: "0px",
-        threshold: props.threshold
-      };
-      const intersectionObserver = new IntersectionObserver((entries) => {
-        entries.forEach(({ target, isIntersecting }) => {
-          emit("observed", {
-            el: target,
-            isIntersecting
-          });
-        });
-      }, options);
-      observer.value = intersectionObserver;
-      props.eventBus.on("observe", (observed) => {
-        if (observed) {
-          intersectionObserver.observe(observed);
-        }
-      });
-      props.eventBus.on("unobserve", (observed) => {
-        intersectionObserver.unobserve(observed);
-      });
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "root",
-        ref: root
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
-});
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "IntersectionObserved",
-  props: {
-    enabled: { type: Boolean, default: false },
-    eventBus: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const observed = ref(null);
-    onMounted(async () => {
-      if (!props.enabled) {
-        return;
-      }
-      await nextTick();
-      props.eventBus.emit("observe", observed.value);
-    });
-    onBeforeUnmount(() => {
-      if (props.enabled) {
-        props.eventBus.emit("unobserve", observed.value);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        ref_key: "observed",
-        ref: observed
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 512);
-    };
-  }
-});
-const _hoisted_1$2 = { class: "tags" };
-const _hoisted_2$2 = ["onClick"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "TagsContainer",
-  props: {
-    tagIds: {},
-    tagsById: {},
-    limit: { default: 20 },
-    clickable: { type: Boolean, default: false },
-    responsive: { type: Boolean, default: false },
-    hoverable: { type: Boolean, default: false }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const maxWidth = ref(320);
-    const intersectionEventBus = createEventBus();
-    const visibility = ref({});
-    const tagsContainer = ref();
-    const style = computed(() => ({
-      "max-width": `${maxWidth.value}px`
-    }));
-    const tags = computed(() => {
-      const allTags = props.tagIds.map((tagId) => props.tagsById[tagId]).filter(Boolean);
-      let toDisplay = props.limit ? allTags.slice(0, props.limit) : allTags;
-      toDisplay = toDisplay.map((tag) => ({
-        ...tag,
-        hidden: props.responsive && !visibility.value[tag.id]
-      }));
-      let visibleCount = toDisplay.length;
-      if (props.responsive) {
-        visibleCount = Object.values(visibility.value).reduce(
-          (accu, val) => val ? accu + 1 : accu,
-          0
-        );
-      }
-      if (visibleCount < allTags.length) {
-        const hidden = allTags.slice(visibleCount);
-        const hiddenTitle = hidden.reduce(
-          (accu, tag) => accu ? `${accu}, ${tag.name}` : tag.name,
-          ""
-        );
-        const countTag = {
-          id: "count",
-          name: `+${hidden.length}`,
-          title: hiddenTitle,
-          isCount: true
-        };
-        toDisplay.splice(visibleCount, 0, countTag);
-      }
-      return toDisplay;
-    });
-    const setMaxWidth = () => {
-      const container2 = tagsContainer.value?.$el;
-      const parent = container2?.parentNode;
-      if (parent) {
-        maxWidth.value = 0;
-        void nextTick(() => {
-          maxWidth.value = parent.clientWidth;
-        });
-      }
-    };
-    const debouncedSetMaxWidth = debounce(setMaxWidth, 100);
-    const onObserved = ({ el, isIntersecting }) => {
-      if (el.dataset.id) {
-        visibility.value = { ...visibility.value, [el.dataset.id]: isIntersecting };
-      }
-    };
-    const onClick = (e, tag) => {
-      if (props.clickable) {
-        e.stopPropagation();
-      }
-      if (!tag.hidden) {
-        emit("click", tag.id);
-      }
-    };
-    onMounted(() => {
-      setMaxWidth();
-      window.addEventListener("resize", debouncedSetMaxWidth);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", debouncedSetMaxWidth);
-    });
-    return (_ctx, _cache) => {
-      const _component_el_tag = resolveComponent("el-tag");
-      return openBlock(), createBlock(_sfc_main$9, {
-        ref_key: "tagsContainer",
-        ref: tagsContainer,
-        threshold: 1,
-        class: "tags-container",
-        style: normalizeStyle(style.value),
-        enabled: _ctx.responsive,
-        "event-bus": unref(intersectionEventBus),
-        onObserved
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("span", _hoisted_1$2, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag) => {
-              return openBlock(), createElementBlock("span", {
-                key: tag.id,
-                class: normalizeClass({ clickable: !tag.hidden }),
-                onClick: (e) => onClick(e, tag)
-              }, [
-                tag.isCount ? (openBlock(), createBlock(_component_el_tag, {
-                  key: 0,
-                  title: tag.title,
-                  type: "info",
-                  size: "small",
-                  class: "count-container",
-                  "disable-transitions": true
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(tag.name), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["title"])) : (openBlock(), createBlock(_sfc_main$8, {
-                  key: 1,
-                  class: normalizeClass({ hideTag: tag.hidden }),
-                  "data-id": tag.id,
-                  enabled: _ctx.responsive,
-                  "event-bus": unref(intersectionEventBus)
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_el_tag, {
-                      title: tag.name,
-                      type: "info",
-                      size: "mini",
-                      class: normalizeClass({ hoverable: _ctx.hoverable }),
-                      "disable-transitions": true
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(tag.name), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["title", "class"])
-                  ]),
-                  _: 2
-                }, 1032, ["class", "data-id", "enabled", "event-bus"]))
-              ], 10, _hoisted_2$2);
-            }), 128))
-          ])
-        ]),
-        _: 1
-      }, 8, ["style", "enabled", "event-bus"]);
-    };
-  }
-});
-const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6bab2764"]]);
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "WorkflowTagsContainer",
-  props: {
-    tagIds: {},
-    limit: {},
-    clickable: { type: Boolean },
-    responsive: { type: Boolean },
-    hoverable: { type: Boolean }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const annotationTagsStore = useTagsStore();
-    const tagsById = computed(() => annotationTagsStore.tagsById);
-    function onClick(tagId) {
-      emit("click", tagId);
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(TagsContainer, {
-        "tag-ids": _ctx.tagIds,
-        "tags-by-id": tagsById.value,
-        limit: _ctx.limit,
-        clickable: _ctx.clickable,
-        responsive: _ctx.responsive,
-        hoverable: _ctx.hoverable,
-        onClick
-      }, null, 8, ["tag-ids", "tags-by-id", "limit", "clickable", "responsive", "hoverable"]);
-    };
-  }
-});
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "BreakpointsObserver",
   props: {
     valueXS: {},
@@ -731,71 +466,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$1 = { key: 0 };
-const _hoisted_2$1 = { key: 1 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "WorkflowHistoryButton",
-  props: {
-    workflowId: {},
-    isNewWorkflow: { type: Boolean },
-    isFeatureEnabled: { type: Boolean }
-  },
-  emits: ["upgrade"],
-  setup(__props, { emit: __emit }) {
-    const locale = useI18n$1();
-    const props = __props;
-    const emit = __emit;
-    const workflowHistoryRoute = computed(() => ({
-      name: VIEWS.WORKFLOW_HISTORY,
-      params: {
-        workflowId: props.workflowId
-      }
-    }));
-    return (_ctx, _cache) => {
-      const _component_N8nIconButton = _sfc_main$d;
-      const _component_RouterLink = resolveComponent("RouterLink");
-      const _component_N8nLink = N8nLink;
-      const _component_N8nTooltip = Tooltip;
-      return openBlock(), createBlock(_component_N8nTooltip, { placement: "bottom" }, {
-        content: withCtx(() => [
-          _ctx.isFeatureEnabled && _ctx.isNewWorkflow ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.empty")), 1)) : _ctx.isFeatureEnabled ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.enabled")), 1)) : (openBlock(), createBlock(unref(I18nT), {
-            key: 2,
-            keypath: "workflowHistory.button.tooltip.disabled",
-            scope: "global"
-          }, {
-            link: withCtx(() => [
-              createVNode(_component_N8nLink, {
-                size: "small",
-                onClick: _cache[0] || (_cache[0] = ($event) => emit("upgrade"))
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.disabled.link")), 1)
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          }))
-        ]),
-        default: withCtx(() => [
-          createVNode(_component_RouterLink, { to: workflowHistoryRoute.value }, {
-            default: withCtx(() => [
-              createVNode(_component_N8nIconButton, {
-                disabled: _ctx.isNewWorkflow || !_ctx.isFeatureEnabled,
-                "data-test-id": "workflow-history-button",
-                type: "highlight",
-                icon: "history",
-                size: "medium"
-              }, null, 8, ["disabled"])
-            ]),
-            _: 1
-          }, 8, ["to"])
-        ]),
-        _: 1
-      });
-    };
-  }
-});
 const HEARTBEAT_INTERVAL = 5 * TIME.MINUTE;
 const useCollaborationStore = defineStore(STORES.COLLABORATION, () => {
   const pushStore = usePushConnectionStore();
@@ -871,7 +541,7 @@ const useCollaborationStore = defineStore(STORES.COLLABORATION, () => {
     stopHeartbeat
   };
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "CollaborationPane",
   setup(__props) {
     const collaborationStore = useCollaborationStore();
@@ -914,15 +584,80 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$2 = "_container_ame1i_123";
-const style0$1 = {
-  container: container$2
-};
-const cssModules$2 = {
-  "$style": style0$1
-};
-const CollaborationPane = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__cssModules", cssModules$2]]);
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const container$2 = "_container_ame1i_123";
+const style0$1 = {
+  container: container$2
+};
+const cssModules$2 = {
+  "$style": style0$1
+};
+const CollaborationPane = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__cssModules", cssModules$2]]);
+const _hoisted_1$2 = { key: 0 };
+const _hoisted_2$2 = { key: 1 };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "WorkflowHistoryButton",
+  props: {
+    workflowId: {},
+    isNewWorkflow: { type: Boolean },
+    isFeatureEnabled: { type: Boolean }
+  },
+  emits: ["upgrade"],
+  setup(__props, { emit: __emit }) {
+    const locale = useI18n$1();
+    const props = __props;
+    const emit = __emit;
+    const workflowHistoryRoute = computed(() => ({
+      name: VIEWS.WORKFLOW_HISTORY,
+      params: {
+        workflowId: props.workflowId
+      }
+    }));
+    return (_ctx, _cache) => {
+      const _component_N8nIconButton = _sfc_main$d;
+      const _component_RouterLink = resolveComponent("RouterLink");
+      const _component_N8nLink = N8nLink;
+      const _component_N8nTooltip = Tooltip;
+      return openBlock(), createBlock(_component_N8nTooltip, { placement: "bottom" }, {
+        content: withCtx(() => [
+          _ctx.isFeatureEnabled && _ctx.isNewWorkflow ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.empty")), 1)) : _ctx.isFeatureEnabled ? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.enabled")), 1)) : (openBlock(), createBlock(unref(I18nT), {
+            key: 2,
+            keypath: "workflowHistory.button.tooltip.disabled",
+            scope: "global"
+          }, {
+            link: withCtx(() => [
+              createVNode(_component_N8nLink, {
+                size: "small",
+                onClick: _cache[0] || (_cache[0] = ($event) => emit("upgrade"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(locale).baseText("workflowHistory.button.tooltip.disabled.link")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }))
+        ]),
+        default: withCtx(() => [
+          createVNode(_component_RouterLink, { to: workflowHistoryRoute.value }, {
+            default: withCtx(() => [
+              createVNode(_component_N8nIconButton, {
+                disabled: _ctx.isNewWorkflow || !_ctx.isFeatureEnabled,
+                "data-test-id": "workflow-history-button",
+                type: "highlight",
+                icon: "history",
+                size: "medium"
+              }, null, 8, ["disabled"])
+            ]),
+            _: 1
+          }, 8, ["to"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowProductionChecklist",
   props: {
     workflow: {}
@@ -986,106 +721,371 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           completed: hasEvaluationSetOutputsNode.value
         });
       }
-      if (!suggestedActionSettings.timeSaved?.ignored) {
-        actions.push({
-          id: "timeSaved",
-          title: i18n.baseText("workflowProductionChecklist.timeSaved.title"),
-          description: i18n.baseText("workflowProductionChecklist.timeSaved.description"),
-          moreInfoLink: TIME_SAVED_DOCS_URL,
-          completed: hasTimeSaved.value
-        });
+      if (!suggestedActionSettings.timeSaved?.ignored) {
+        actions.push({
+          id: "timeSaved",
+          title: i18n.baseText("workflowProductionChecklist.timeSaved.title"),
+          description: i18n.baseText("workflowProductionChecklist.timeSaved.description"),
+          moreInfoLink: TIME_SAVED_DOCS_URL,
+          completed: hasTimeSaved.value
+        });
+      }
+      return actions;
+    });
+    async function loadWorkflowSettings() {
+      if (props.workflow.id) {
+        cachedSettings.value = await workflowsCache.getMergedWorkflowSettings(props.workflow.id);
+      }
+    }
+    async function handleActionClick(actionId) {
+      if (actionId === "evaluations") {
+        await router.push({
+          name: VIEWS.EVALUATION_EDIT,
+          params: { name: props.workflow.id }
+        });
+      } else if (actionId === "errorWorkflow" || actionId === "timeSaved") {
+        uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
+      }
+      isPopoverOpen.value = false;
+    }
+    function isValidAction(action) {
+      return ["evaluations", "errorWorkflow", "timeSaved"].includes(action);
+    }
+    async function handleIgnoreClick(actionId) {
+      if (!isValidAction(actionId)) {
+        return;
+      }
+      await workflowsCache.ignoreSuggestedAction(props.workflow.id, actionId);
+      await loadWorkflowSettings();
+      telemetry.track("user clicked ignore suggested action", {
+        actionId
+      });
+    }
+    async function handleIgnoreAll() {
+      const ignoreAllConfirmed = await message.confirm(
+        i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.description"),
+        i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.title"),
+        {
+          confirmButtonText: i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.confirm")
+        }
+      );
+      if (ignoreAllConfirmed === MODAL_CONFIRM) {
+        await workflowsCache.ignoreAllSuggestedActionsForAllWorkflows(
+          availableActions.value.map((action) => action.id)
+        );
+        await loadWorkflowSettings();
+        telemetry.track("user clicked ignore suggested actions for all workflows");
+      }
+    }
+    function openSuggestedActions() {
+      isPopoverOpen.value = true;
+    }
+    function onPopoverOpened() {
+      telemetry.track("user opened suggested actions checklist");
+    }
+    function handlePopoverOpenChange(open) {
+      if (open) {
+        isPopoverOpen.value = true;
+        onPopoverOpened();
+      } else if (!isActivationModalOpen.value) {
+        isPopoverOpen.value = false;
+      }
+    }
+    watch(
+      () => props.workflow.active,
+      async (isActive, wasActive) => {
+        if (isActive && !wasActive) {
+          if (!cachedSettings.value?.firstActivatedAt) {
+            setTimeout(() => {
+              openSuggestedActions();
+            }, 0);
+          }
+          await workflowsCache.updateFirstActivatedAt(props.workflow.id);
+        }
+      }
+    );
+    onMounted(async () => {
+      await loadWorkflowSettings();
+    });
+    return (_ctx, _cache) => {
+      return availableActions.value.length > 0 ? (openBlock(), createBlock(unref(N8nSuggestedActions), {
+        key: 0,
+        open: isPopoverOpen.value,
+        title: unref(i18n).baseText("workflowProductionChecklist.title"),
+        actions: availableActions.value,
+        "ignore-all-label": unref(i18n).baseText("workflowProductionChecklist.turnOffWorkflowSuggestions"),
+        notice: isProtectedEnvironment.value ? unref(i18n).baseText("workflowProductionChecklist.readOnlyNotice") : "",
+        "popover-alignment": "end",
+        onActionClick: handleActionClick,
+        onIgnoreClick: handleIgnoreClick,
+        onIgnoreAll: handleIgnoreAll,
+        "onUpdate:open": handlePopoverOpenChange
+      }, null, 8, ["open", "title", "actions", "ignore-all-label", "notice"])) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "IntersectionObserver",
+  props: {
+    threshold: { default: 0 },
+    enabled: { type: Boolean, default: false },
+    eventBus: {}
+  },
+  emits: ["observed"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const observer = ref(null);
+    const root = ref(null);
+    onBeforeUnmount(() => {
+      if (props.enabled && observer.value) {
+        observer.value.disconnect();
+      }
+    });
+    onMounted(() => {
+      if (!props.enabled) {
+        return;
+      }
+      const options = {
+        root: root.value,
+        rootMargin: "0px",
+        threshold: props.threshold
+      };
+      const intersectionObserver = new IntersectionObserver((entries) => {
+        entries.forEach(({ target, isIntersecting }) => {
+          emit("observed", {
+            el: target,
+            isIntersecting
+          });
+        });
+      }, options);
+      observer.value = intersectionObserver;
+      props.eventBus.on("observe", (observed) => {
+        if (observed) {
+          intersectionObserver.observe(observed);
+        }
+      });
+      props.eventBus.on("unobserve", (observed) => {
+        intersectionObserver.unobserve(observed);
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "IntersectionObserved",
+  props: {
+    enabled: { type: Boolean, default: false },
+    eventBus: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const observed = ref(null);
+    onMounted(async () => {
+      if (!props.enabled) {
+        return;
+      }
+      await nextTick();
+      props.eventBus.emit("observe", observed.value);
+    });
+    onBeforeUnmount(() => {
+      if (props.enabled) {
+        props.eventBus.emit("unobserve", observed.value);
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "observed",
+        ref: observed
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$1 = { class: "tags" };
+const _hoisted_2$1 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "TagsContainer",
+  props: {
+    tagIds: {},
+    tagsById: {},
+    limit: { default: 20 },
+    clickable: { type: Boolean, default: false },
+    responsive: { type: Boolean, default: false },
+    hoverable: { type: Boolean, default: false }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const maxWidth = ref(320);
+    const intersectionEventBus = createEventBus();
+    const visibility = ref({});
+    const tagsContainer = ref();
+    const style = computed(() => ({
+      "max-width": `${maxWidth.value}px`
+    }));
+    const tags = computed(() => {
+      const allTags = props.tagIds.map((tagId) => props.tagsById[tagId]).filter(Boolean);
+      let toDisplay = props.limit ? allTags.slice(0, props.limit) : allTags;
+      toDisplay = toDisplay.map((tag) => ({
+        ...tag,
+        hidden: props.responsive && !visibility.value[tag.id]
+      }));
+      let visibleCount = toDisplay.length;
+      if (props.responsive) {
+        visibleCount = Object.values(visibility.value).reduce(
+          (accu, val) => val ? accu + 1 : accu,
+          0
+        );
+      }
+      if (visibleCount < allTags.length) {
+        const hidden = allTags.slice(visibleCount);
+        const hiddenTitle = hidden.reduce(
+          (accu, tag) => accu ? `${accu}, ${tag.name}` : tag.name,
+          ""
+        );
+        const countTag = {
+          id: "count",
+          name: `+${hidden.length}`,
+          title: hiddenTitle,
+          isCount: true
+        };
+        toDisplay.splice(visibleCount, 0, countTag);
       }
-      return actions;
+      return toDisplay;
     });
-    async function loadWorkflowSettings() {
-      if (props.workflow.id) {
-        cachedSettings.value = await workflowsCache.getMergedWorkflowSettings(props.workflow.id);
-      }
-    }
-    async function handleActionClick(actionId) {
-      if (actionId === "evaluations") {
-        await router.push({
-          name: VIEWS.EVALUATION_EDIT,
-          params: { name: props.workflow.id }
+    const setMaxWidth = () => {
+      const container2 = tagsContainer.value?.$el;
+      const parent = container2?.parentNode;
+      if (parent) {
+        maxWidth.value = 0;
+        void nextTick(() => {
+          maxWidth.value = parent.clientWidth;
         });
-      } else if (actionId === "errorWorkflow" || actionId === "timeSaved") {
-        uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
-      }
-      isPopoverOpen.value = false;
-    }
-    function isValidAction(action) {
-      return ["evaluations", "errorWorkflow", "timeSaved"].includes(action);
-    }
-    async function handleIgnoreClick(actionId) {
-      if (!isValidAction(actionId)) {
-        return;
       }
-      await workflowsCache.ignoreSuggestedAction(props.workflow.id, actionId);
-      await loadWorkflowSettings();
-      telemetry.track("user clicked ignore suggested action", {
-        actionId
-      });
-    }
-    async function handleIgnoreAll() {
-      const ignoreAllConfirmed = await message.confirm(
-        i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.description"),
-        i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.title"),
-        {
-          confirmButtonText: i18n.baseText("workflowProductionChecklist.ignoreAllConfirmation.confirm")
-        }
-      );
-      if (ignoreAllConfirmed === MODAL_CONFIRM) {
-        await workflowsCache.ignoreAllSuggestedActionsForAllWorkflows(
-          availableActions.value.map((action) => action.id)
-        );
-        await loadWorkflowSettings();
-        telemetry.track("user clicked ignore suggested actions for all workflows");
+    };
+    const debouncedSetMaxWidth = debounce(setMaxWidth, 100);
+    const onObserved = ({ el, isIntersecting }) => {
+      if (el.dataset.id) {
+        visibility.value = { ...visibility.value, [el.dataset.id]: isIntersecting };
       }
-    }
-    function openSuggestedActions() {
-      isPopoverOpen.value = true;
-    }
-    function onPopoverOpened() {
-      telemetry.track("user opened suggested actions checklist");
-    }
-    function handlePopoverOpenChange(open) {
-      if (open) {
-        isPopoverOpen.value = true;
-        onPopoverOpened();
-      } else if (!isActivationModalOpen.value) {
-        isPopoverOpen.value = false;
+    };
+    const onClick = (e, tag) => {
+      if (props.clickable) {
+        e.stopPropagation();
       }
-    }
-    watch(
-      () => props.workflow.active,
-      async (isActive, wasActive) => {
-        if (isActive && !wasActive) {
-          if (!cachedSettings.value?.firstActivatedAt) {
-            setTimeout(() => {
-              openSuggestedActions();
-            }, 0);
-          }
-          await workflowsCache.updateFirstActivatedAt(props.workflow.id);
-        }
+      if (!tag.hidden) {
+        emit("click", tag.id);
       }
-    );
-    onMounted(async () => {
-      await loadWorkflowSettings();
+    };
+    onMounted(() => {
+      setMaxWidth();
+      window.addEventListener("resize", debouncedSetMaxWidth);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", debouncedSetMaxWidth);
     });
     return (_ctx, _cache) => {
-      return availableActions.value.length > 0 ? (openBlock(), createBlock(unref(N8nSuggestedActions), {
-        key: 0,
-        open: isPopoverOpen.value,
-        title: unref(i18n).baseText("workflowProductionChecklist.title"),
-        actions: availableActions.value,
-        "ignore-all-label": unref(i18n).baseText("workflowProductionChecklist.turnOffWorkflowSuggestions"),
-        notice: isProtectedEnvironment.value ? unref(i18n).baseText("workflowProductionChecklist.readOnlyNotice") : "",
-        "popover-alignment": "end",
-        onActionClick: handleActionClick,
-        onIgnoreClick: handleIgnoreClick,
-        onIgnoreAll: handleIgnoreAll,
-        "onUpdate:open": handlePopoverOpenChange
-      }, null, 8, ["open", "title", "actions", "ignore-all-label", "notice"])) : createCommentVNode("", true);
+      const _component_el_tag = resolveComponent("el-tag");
+      return openBlock(), createBlock(_sfc_main$5, {
+        ref_key: "tagsContainer",
+        ref: tagsContainer,
+        threshold: 1,
+        class: "tags-container",
+        style: normalizeStyle(style.value),
+        enabled: _ctx.responsive,
+        "event-bus": unref(intersectionEventBus),
+        onObserved
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("span", _hoisted_1$1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag) => {
+              return openBlock(), createElementBlock("span", {
+                key: tag.id,
+                class: normalizeClass({ clickable: !tag.hidden }),
+                onClick: (e) => onClick(e, tag)
+              }, [
+                tag.isCount ? (openBlock(), createBlock(_component_el_tag, {
+                  key: 0,
+                  title: tag.title,
+                  type: "info",
+                  size: "small",
+                  class: "count-container",
+                  "disable-transitions": true
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(tag.name), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["title"])) : (openBlock(), createBlock(_sfc_main$4, {
+                  key: 1,
+                  class: normalizeClass({ hideTag: tag.hidden }),
+                  "data-id": tag.id,
+                  enabled: _ctx.responsive,
+                  "event-bus": unref(intersectionEventBus)
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_tag, {
+                      title: tag.name,
+                      type: "info",
+                      size: "mini",
+                      class: normalizeClass({ hoverable: _ctx.hoverable }),
+                      "disable-transitions": true
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(tag.name), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["title", "class"])
+                  ]),
+                  _: 2
+                }, 1032, ["class", "data-id", "enabled", "event-bus"]))
+              ], 10, _hoisted_2$1);
+            }), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["style", "enabled", "event-bus"]);
+    };
+  }
+});
+const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-6bab2764"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "WorkflowTagsContainer",
+  props: {
+    tagIds: {},
+    limit: {},
+    clickable: { type: Boolean },
+    responsive: { type: Boolean },
+    hoverable: { type: Boolean }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const annotationTagsStore = useTagsStore();
+    const tagsById = computed(() => annotationTagsStore.tagsById);
+    function onClick(tagId) {
+      emit("click", tagId);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(TagsContainer, {
+        "tag-ids": _ctx.tagIds,
+        "tags-by-id": tagsById.value,
+        limit: _ctx.limit,
+        clickable: _ctx.clickable,
+        responsive: _ctx.responsive,
+        hoverable: _ctx.hoverable,
+        onClick
+      }, null, 8, ["tag-ids", "tags-by-id", "limit", "clickable", "responsive", "hoverable"]);
     };
   }
 });
@@ -1637,33 +1637,43 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     function goToWorkflowHistoryUpgrade() {
       void pageRedirectionHelper.goToUpgrade("workflow-history", "upgrade-workflow-history");
     }
-    function showCreateWorkflowSuccessToast(id) {
-      if (!id || ["new", PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(id)) {
-        let toastTitle = locale.baseText("workflows.create.personal.toast.title");
-        let toastText = locale.baseText("workflows.create.personal.toast.text");
-        if (projectsStore.currentProject) {
-          if (props.currentFolder) {
-            toastTitle = locale.baseText("workflows.create.folder.toast.title", {
-              interpolate: {
-                projectName: currentProjectName.value ?? "",
-                folderName: props.currentFolder.name ?? ""
-              }
-            });
-          } else if (projectsStore.currentProject.id !== projectsStore.personalProject?.id) {
-            toastTitle = locale.baseText("workflows.create.project.toast.title", {
-              interpolate: { projectName: currentProjectName.value ?? "" }
-            });
-          }
-          toastText = locale.baseText("workflows.create.project.toast.text", {
-            interpolate: { projectName: currentProjectName.value ?? "" }
-          });
+    function getPersonalProjectToastContent() {
+      const title = locale.baseText("workflows.create.personal.toast.title");
+      if (!props.currentFolder) {
+        return { title };
+      }
+      const toastMessage = locale.baseText("workflows.create.folder.toast.title", {
+        interpolate: {
+          projectName: "Personal",
+          folderName: props.currentFolder.name
         }
-        toast.showMessage({
-          title: toastTitle,
-          message: toastText,
-          type: "success"
-        });
-      }
+      });
+      return { title, toastMessage };
+    }
+    function getToastContent() {
+      const currentProject = projectsStore.currentProject;
+      const isPersonalProject = !projectsStore.currentProject || currentProject?.id === projectsStore.personalProject?.id;
+      const projectName = currentProjectName.value ?? "";
+      if (isPersonalProject) {
+        return getPersonalProjectToastContent();
+      }
+      const titleKey = props.currentFolder ? "workflows.create.folder.toast.title" : "workflows.create.project.toast.title";
+      const interpolateData = props.currentFolder ? { projectName, folderName: props.currentFolder.name ?? "" } : { projectName };
+      const title = locale.baseText(titleKey, { interpolate: interpolateData });
+      const toastMessage = locale.baseText("workflows.create.project.toast.text", {
+        interpolate: { projectName }
+      });
+      return { title, toastMessage };
+    }
+    function showCreateWorkflowSuccessToast(id) {
+      const shouldShowToast = !id || ["new", PLACEHOLDER_EMPTY_WORKFLOW_ID].includes(id);
+      if (!shouldShowToast) return;
+      const { title, toastMessage } = getToastContent();
+      toast.showMessage({
+        title,
+        message: toastMessage,
+        type: "success"
+      });
     }
     const onBreadcrumbsItemSelected = (item) => {
       if (item.href) {
@@ -1682,7 +1692,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(unref($style).container)
       }, [
-        createVNode(_sfc_main$5, {
+        createVNode(_sfc_main$9, {
           "value-x-s": 15,
           "value-s-m": 25,
           "value-m-d": 50,
@@ -1739,7 +1749,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 "data-test-id": "new-tag-link",
                 onClick: onTagsEditEnable
               }, " + " + toDisplayString(unref(i18n).baseText("workflowDetails.addTag")), 1)
-            ])) : (openBlock(), createBlock(_sfc_main$6, {
+            ])) : (openBlock(), createBlock(_sfc_main$2, {
               key: _ctx.id,
               "tag-ids": workflowTagIds.value,
               clickable: true,
@@ -1765,7 +1775,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ]),
         createVNode(_sfc_main$f, { class: "actions" }, {
           default: withCtx(() => [
-            !isNewWorkflow.value ? (openBlock(), createBlock(_sfc_main$2, {
+            !isNewWorkflow.value ? (openBlock(), createBlock(_sfc_main$6, {
               key: 0,
               workflow: unref(workflowsStore).workflow
             }, null, 8, ["workflow"])) : createCommentVNode("", true),
@@ -1844,7 +1854,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 "data-test-id": "workflow-save-button",
                 onClick: onSaveButtonClick
               }, null, 8, ["saved", "disabled", "is-saving", "with-shortcut", "shortcut-tooltip"]),
-              createVNode(_sfc_main$4, {
+              createVNode(_sfc_main$7, {
                 "workflow-id": props.id,
                 "is-feature-enabled": isWorkflowHistoryFeatureEnabled.value,
                 "is-new-workflow": isNewWorkflow.value,
@@ -1893,7 +1903,7 @@ const style1 = {
 const cssModules$1 = {
   "$style": style1
 };
-const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-2a478201"]]);
+const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-3cc77b55"]]);
 const GithubButton = defineComponent({
   name: "github-button",
   props: {