n8n-editor-ui 1.90.1 → 1.92.0

package/dist/assets/{MainHeader-D4cIIoUA.js → MainHeader-Bk29pgmL.js}

@@ -1,13 +1,13 @@
-import { d as defineComponent, s as MAIN_HEADER_TABS, h as resolveComponent, i as createElementBlock, f as createCommentVNode, g as openBlock, n as normalizeClass, j as createVNode, _ as _export_sfc, q as computed, v as shorten, x as renderSlot, r as ref, y as onBeforeUnmount, o as onMounted, z as nextTick, A as debounce, e as createBlock, m as unref, B as normalizeStyle, C as createEventBus, w as withCtx, k as createBaseVNode, F as Fragment, D as renderList, l as createTextVNode, t as toDisplayString, E as useTagsStore, G as onClickOutside, H as withKeys, I as watch, J as withModifiers, K as useDebounce, L as useUIStore, N as BREAKPOINT_SM, O as BREAKPOINT_XL, P as BREAKPOINT_LG, Q as BREAKPOINT_MD, R as getBannerRowHeight, V as VIEWS, c as useI18n, S as defineStore, T as usePushConnectionStore, U as useWorkflowsStore, u as useUsersStore, W as useRoute, X as PLACEHOLDER_EMPTY_WORKFLOW_ID, Y as STORES, Z as TIME, $ as useDocumentVisibility, a0 as useCssModule, a1 as useRootStore, a2 as useCanvasStore, p as useSettingsStore, a3 as useSourceControlStore, a4 as useProjectsStore, a5 as useNpsSurveyStore, b as useRouter, a as useToast, a6 as useDocumentTitle, a7 as useWorkflowHelpers, a8 as usePageRedirectionHelper, a9 as getResourcePermissions, aa as WORKFLOW_MENU_ACTIONS, ab as hasPermission, ac as EnterpriseEditionFeature, ad as ProjectTypes, ae as MAX_WORKFLOW_NAME_LENGTH, af as _sfc_main$f, ag as SaveButton, ah as WORKFLOW_SHARE_MODAL_KEY, ai as useTelemetry, aj as nodeViewEventBus, ak as useMessage, al as MODAL_CONFIRM, am as WORKFLOW_SETTINGS_MODAL_KEY, an as SOURCE_CONTROL_PUSH_MODAL_KEY, ao as VALID_WORKFLOW_IMPORT_URL_REGEX, ap as DUPLICATE_MODAL_KEY, aq as __vitePreload, ar as hyphenate, as as h, at as hasOwn, au as useNDVStore, av as useExecutionsStore, aw as usePostHog, ax as useLocalStorage, ay as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, az as WORKFLOW_EVALUATION_EXPERIMENT, aA as STICKY_NODE_TYPE, aB as onBeforeMount, aC as withDirectives, aD as vShow, aE as N8N_MAIN_GITHUB_REPO_URL } from "./index-BpdkKRP4.js";
-import { _ as _sfc_main$g } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-CM7WIpD3.js";
-import { W as WorkflowActivator } from "./WorkflowActivator-O6i5XAk2.js";
-import { u as useBeforeUnload } from "./useBeforeUnload-K7nQ15Rk.js";
-import { F as FileSaver_minExports } from "./FileSaver.min-Cm0u4qyc.js";
-import { u as usePushConnection } from "./usePushConnection-BdV7ILvK.js";
-import "./useWorkflowActivate-pZ62ib_C.js";
-import "./global-link-actions-OGaZVwsw.js";
-import "./easyAiWorkflowUtils-ChToD_Yl.js";
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+import { d as defineComponent, s as MAIN_HEADER_TABS, h as resolveComponent, i as createElementBlock, f as createCommentVNode, g as openBlock, n as normalizeClass, j as createVNode, _ as _export_sfc, q as computed, v as shorten, x as renderSlot, r as ref, y as onBeforeUnmount, o as onMounted, z as nextTick, A as debounce, e as createBlock, m as unref, B as normalizeStyle, C as createEventBus, w as withCtx, k as createBaseVNode, F as Fragment, D as renderList, l as createTextVNode, t as toDisplayString, E as useTagsStore, G as useDebounce, H as useUIStore, I as BREAKPOINT_SM, J as BREAKPOINT_XL, K as BREAKPOINT_LG, L as BREAKPOINT_MD, N as getBannerRowHeight, V as VIEWS, c as useI18n, O as defineStore, P as usePushConnectionStore, Q as useWorkflowsStore, u as useUsersStore, R as useRoute, S as PLACEHOLDER_EMPTY_WORKFLOW_ID, T as STORES, U as TIME, W as useDocumentVisibility, X as watch, Y as useCssModule, Z as useRootStore, $ as useCanvasStore, p as useSettingsStore, a0 as useSourceControlStore, a1 as useProjectsStore, a2 as useFoldersStore, a3 as useNpsSurveyStore, b as useRouter, a as useToast, a4 as useDocumentTitle, a5 as useWorkflowHelpers, a6 as usePageRedirectionHelper, a7 as getResourcePermissions, a8 as WORKFLOW_MENU_ACTIONS, a9 as hasPermission, aa as EnterpriseEditionFeature, ab as ProjectTypes, ac as MAX_WORKFLOW_NAME_LENGTH, ad as _sfc_main$b, ae as SaveButton, af as WORKFLOW_SHARE_MODAL_KEY, ag as useTelemetry, ah as nodeViewEventBus, ai as useMessage, aj as MODAL_CONFIRM, ak as WORKFLOW_SETTINGS_MODAL_KEY, al as SOURCE_CONTROL_PUSH_MODAL_KEY, am as VALID_WORKFLOW_IMPORT_URL_REGEX, an as DUPLICATE_MODAL_KEY, ao as __vitePreload, ap as hyphenate, aq as h, ar as hasOwn, as as useNDVStore, at as useExecutionsStore, au as usePostHog, av as useLocalStorage, aw as LOCAL_STORAGE_HIDE_GITHUB_STAR_BUTTON, ax as WORKFLOW_EVALUATION_EXPERIMENT, ay as STICKY_NODE_TYPE, az as onBeforeMount, aA as withDirectives, aB as vShow, aC as N8N_MAIN_GITHUB_REPO_URL } from "./index-B6eunbxp.js";
+import { _ as __unplugin_components_0, I as InlineTextEdit, W as WorkflowActivator } from "./WorkflowActivator-CPCbgb_n.js";
+import { _ as _sfc_main$c } from "./PushConnectionTracker.vue_vue_type_script_setup_true_lang-C3JbZMCk.js";
+import { u as useBeforeUnload } from "./useBeforeUnload-DxrN8vOO.js";
+import { F as FileSaver_minExports } from "./FileSaver.min-BzAtcQXX.js";
+import { u as usePushConnection } from "./usePushConnection-Pobjq0U9.js";
+import "./useWorkflowActivate-DFqvrpj6.js";
+import "./easyAiWorkflowUtils-CLqHnasO.js";
+import "./global-link-actions-BvoZh8u9.js";
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "TabBar",
   props: {
     items: {},
@@ -44,11 +44,11 @@ const style0$3 = {
 const cssModules$4 = {
   "$style": style0$3
 };
-const TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__cssModules", cssModules$4]]);
-const _hoisted_1$7 = ["title", "data-test-id"];
+const TabBar = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__cssModules", cssModules$4]]);
+const _hoisted_1$3 = ["title", "data-test-id"];
 const DEFAULT_WORKFLOW_NAME_LIMIT = 25;
 const WORKFLOW_NAME_END_COUNT_TO_KEEP = 4;
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "ShortenName",
   props: {
     name: {},
@@ -66,11 +66,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
         "data-test-id": _ctx.testId
       }, [
         renderSlot(_ctx.$slots, "default", { shortenedName: shortenedName.value })
-      ], 8, _hoisted_1$7);
+      ], 8, _hoisted_1$3);
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "IntersectionObserver",
   props: {
     threshold: { default: 0 },
@@ -125,7 +125,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "IntersectionObserved",
   props: {
     enabled: { type: Boolean, default: false },
@@ -156,9 +156,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$6 = { class: "tags" };
+const _hoisted_1$2 = { class: "tags" };
 const _hoisted_2$2 = ["onClick"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TagsContainer",
   props: {
     tagIds: {},
@@ -242,7 +242,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_el_tag = resolveComponent("el-tag");
-      return openBlock(), createBlock(_sfc_main$c, {
+      return openBlock(), createBlock(_sfc_main$8, {
         ref_key: "tagsContainer",
         ref: tagsContainer,
         threshold: 1,
@@ -253,7 +253,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
         onObserved
       }, {
         default: withCtx(() => [
-          createBaseVNode("span", _hoisted_1$6, [
+          createBaseVNode("span", _hoisted_1$2, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(tags.value, (tag) => {
               return openBlock(), createElementBlock("span", {
                 key: tag.id,
@@ -272,7 +272,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     createTextVNode(toDisplayString(tag.name), 1)
                   ]),
                   _: 2
-                }, 1032, ["title"])) : (openBlock(), createBlock(_sfc_main$b, {
+                }, 1032, ["title"])) : (openBlock(), createBlock(_sfc_main$7, {
                   key: 1,
                   class: normalizeClass({ hideTag: tag.hidden }),
                   "data-id": tag.id,
@@ -304,8 +304,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-9f29f608"]]);
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const TagsContainer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-9f29f608"]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "WorkflowTagsContainer",
   props: {
     tagIds: {},
@@ -335,225 +335,6 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$5 = ["data-value"];
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "ExpandableInputBase",
-  props: {
-    modelValue: {},
-    placeholder: { default: "" },
-    staticSize: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    const hiddenValue = computed(() => {
-      let value = props.modelValue.replace(/\s/g, ".");
-      if (!value) {
-        value = props.placeholder;
-      }
-      return `${value}`;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass({ "el-input": true, "static-size": _ctx.staticSize }),
-        "data-value": hiddenValue.value
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 10, _hoisted_1$5);
-    };
-  }
-});
-const ExpandableInputBase = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-b6416d9d"]]);
-const _hoisted_1$4 = ["value", "placeholder", "maxlength"];
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "ExpandableInputEdit",
-  props: {
-    modelValue: {},
-    placeholder: {},
-    maxlength: {},
-    autofocus: { type: Boolean },
-    eventBus: {}
-  },
-  emits: ["update:model-value", "enter", "blur", "esc"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const inputRef = ref();
-    onMounted(() => {
-      if (props.autofocus && inputRef.value) {
-        focus();
-      }
-      props.eventBus?.on("focus", focus);
-    });
-    onBeforeUnmount(() => {
-      props.eventBus?.off("focus", focus);
-    });
-    function focus() {
-      if (inputRef.value) {
-        inputRef.value.focus();
-      }
-    }
-    function onInput() {
-      if (inputRef.value) {
-        emit("update:model-value", inputRef.value.value);
-      }
-    }
-    function onEnter() {
-      if (inputRef.value) {
-        emit("enter", inputRef.value.value);
-      }
-    }
-    onClickOutside(inputRef, () => {
-      if (inputRef.value) {
-        emit("blur", inputRef.value.value);
-      }
-    });
-    function onEscape() {
-      emit("esc");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(ExpandableInputBase, {
-        "model-value": _ctx.modelValue,
-        placeholder: _ctx.placeholder
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("input", {
-            ref_key: "inputRef",
-            ref: inputRef,
-            class: "el-input__inner",
-            value: _ctx.modelValue,
-            placeholder: _ctx.placeholder,
-            maxlength: _ctx.maxlength,
-            size: "4",
-            onInput,
-            onKeydown: [
-              withKeys(onEnter, ["enter"]),
-              withKeys(onEscape, ["esc"])
-            ]
-          }, null, 40, _hoisted_1$4)
-        ]),
-        _: 1
-      }, 8, ["model-value", "placeholder"]);
-    };
-  }
-});
-const _hoisted_1$3 = ["value"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  __name: "ExpandableInputPreview",
-  props: {
-    modelValue: {}
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(ExpandableInputBase, {
-        "model-value": _ctx.modelValue,
-        "static-size": true
-      }, {
-        default: withCtx(() => [
-          createBaseVNode("input", {
-            class: normalizeClass({ "el-input__inner": true, clickable: true }),
-            value: _ctx.modelValue,
-            disabled: true,
-            size: "4"
-          }, null, 8, _hoisted_1$3)
-        ]),
-        _: 1
-      }, 8, ["model-value"]);
-    };
-  }
-});
-const ExpandableInputPreview = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-87c6f53b"]]);
-const _hoisted_1$2 = { key: 0 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  __name: "InlineTextEdit",
-  props: {
-    isEditEnabled: { type: Boolean, default: false },
-    modelValue: { default: "" },
-    placeholder: { default: "" },
-    maxLength: { default: 0 },
-    previewValue: { default: "" },
-    disabled: { type: Boolean, default: false }
-  },
-  emits: ["toggle", "submit"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const isDisabled = ref(props.disabled);
-    const newValue = ref("");
-    const escPressed = ref(false);
-    const inputBus = ref(createEventBus());
-    watch(
-      () => props.disabled,
-      (value) => {
-        isDisabled.value = value;
-      }
-    );
-    function onInput(val) {
-      if (isDisabled.value) return;
-      newValue.value = val;
-    }
-    function onClick() {
-      if (isDisabled.value) return;
-      newValue.value = props.modelValue;
-      emit("toggle");
-    }
-    function onBlur() {
-      if (isDisabled.value) return;
-      if (!escPressed.value) {
-        submit();
-      }
-      escPressed.value = false;
-    }
-    function submit() {
-      if (isDisabled.value) return;
-      const onSubmit = (updated) => {
-        isDisabled.value = false;
-        if (!updated) {
-          inputBus.value.emit("focus");
-        }
-      };
-      isDisabled.value = true;
-      emit("submit", { name: newValue.value, onSubmit });
-    }
-    function onEscape() {
-      if (isDisabled.value) return;
-      escPressed.value = true;
-      emit("toggle");
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: "inline-edit",
-        onKeydown: _cache[1] || (_cache[1] = withModifiers(() => {
-        }, ["stop"]))
-      }, [
-        _ctx.isEditEnabled && !isDisabled.value ? (openBlock(), createElementBlock("span", _hoisted_1$2, [
-          createVNode(_sfc_main$7, {
-            modelValue: newValue.value,
-            "onUpdate:modelValue": [
-              _cache[0] || (_cache[0] = ($event) => newValue.value = $event),
-              onInput
-            ],
-            placeholder: _ctx.placeholder,
-            maxlength: _ctx.maxLength,
-            autofocus: true,
-            "event-bus": inputBus.value,
-            onEsc: onEscape,
-            onBlur,
-            onEnter: submit
-          }, null, 8, ["modelValue", "placeholder", "maxlength", "event-bus"])
-        ])) : (openBlock(), createElementBlock("span", {
-          key: 1,
-          class: "preview",
-          onClick
-        }, [
-          createVNode(ExpandableInputPreview, {
-            "model-value": _ctx.previewValue || _ctx.modelValue
-          }, null, 8, ["model-value"])
-        ]))
-      ], 32);
-    };
-  }
-});
-const InlineTextEdit = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-746f09e1"]]);
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "BreakpointsObserver",
   props: {
@@ -849,7 +630,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     name: {},
     meta: {},
     scopes: {},
-    active: { type: Boolean }
+    active: { type: Boolean },
+    currentFolder: {}
   },
   setup(__props) {
     const props = __props;
@@ -863,6 +645,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const usersStore = useUsersStore();
     const workflowsStore = useWorkflowsStore();
     const projectsStore = useProjectsStore();
+    const foldersStore = useFoldersStore();
     const npsSurveyStore = useNpsSurveyStore();
     const i18n = useI18n();
     const router = useRouter();
@@ -911,6 +694,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           id: WORKFLOW_MENU_ACTIONS.DOWNLOAD,
           label: locale.baseText("menuActions.download"),
           disabled: !onWorkflowPage.value
+        },
+        {
+          id: WORKFLOW_MENU_ACTIONS.RENAME,
+          label: locale.baseText("generic.rename"),
+          disabled: !onWorkflowPage.value || workflowPermissions.value.update !== true
         }
       ];
       if (workflowPermissions.value.delete && !props.readOnly || isNewWorkflow.value) {
@@ -961,22 +749,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const workflowTagIds = computed(() => {
       return (props.tags ?? []).map((tag) => typeof tag === "string" ? tag : tag.id);
     });
-    const currentFolder = computed(() => {
-      if (props.id === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
-        return void 0;
-      }
-      const workflow = workflowsStore.getWorkflowById(props.id);
-      if (!workflow) {
-        return void 0;
-      }
-      return workflow.parentFolder;
-    });
     const currentProjectName = computed(() => {
       if (projectsStore.currentProject?.type === ProjectTypes.Personal) {
         return locale.baseText("projects.menu.personal");
       }
       return projectsStore.currentProject?.name;
     });
+    const currentFolderForBreadcrumbs = computed(() => {
+      if (!isNewWorkflow.value && props.currentFolder) {
+        return props.currentFolder;
+      }
+      const folderId = route.query.parentFolderId;
+      if (folderId) {
+        return foldersStore.getCachedFolder(folderId);
+      }
+      return null;
+    });
     watch(
       () => props.id,
       () => {
@@ -1075,8 +863,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       const newName = name.trim();
       if (!newName) {
         toast.showMessage({
-          title: locale.baseText("workflowDetails.showMessage.title"),
-          message: locale.baseText("workflowDetails.showMessage.message"),
+          title: locale.baseText("renameAction.emptyName.title"),
+          message: locale.baseText("renameAction.emptyName.message"),
           type: "error"
         });
         onSubmit(false);
@@ -1130,11 +918,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             data: {
               id: props.id,
               name: props.name,
-              tags: props.tags
+              tags: props.tags,
+              parentFolderId: props.currentFolder?.id
             }
           });
           break;
         }
+        case WORKFLOW_MENU_ACTIONS.RENAME: {
+          onNameToggle();
+          break;
+        }
         case WORKFLOW_MENU_ACTIONS.DOWNLOAD: {
           const workflowData = await workflowHelpers.getWorkflowDataToSave();
           const { tags, ...data } = workflowData;
@@ -1259,11 +1052,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         let toastTitle = locale.baseText("workflows.create.personal.toast.title");
         let toastText = locale.baseText("workflows.create.personal.toast.text");
         if (projectsStore.currentProject) {
-          if (currentFolder.value) {
+          if (props.currentFolder) {
             toastTitle = locale.baseText("workflows.create.folder.toast.title", {
               interpolate: {
                 projectName: currentProjectName.value ?? "",
-                folderName: currentFolder.value.name ?? ""
+                folderName: props.currentFolder.name ?? ""
               }
             });
           } else if (projectsStore.currentProject.id !== projectsStore.personalProject?.id) {
@@ -1282,7 +1075,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         });
       }
     }
+    const onBreadcrumbsItemSelected = (item) => {
+      if (item.href) {
+        void router.push(item.href).catch((error) => {
+          toast.showError(error, i18n.baseText("folders.open.error.title"));
+        });
+      }
+    };
     return (_ctx, _cache) => {
+      const _component_FolderBreadcrumbs = __unplugin_components_0;
       const _component_N8nButton = resolveComponent("N8nButton");
       const _component_i18n_t = resolveComponent("i18n-t");
       const _component_N8nTooltip = resolveComponent("N8nTooltip");
@@ -1295,35 +1096,49 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "value-x-s": 15,
           "value-s-m": 25,
           "value-m-d": 50,
-          class: "name-container"
+          class: "name-container",
+          "data-test-id": "canvas-breadcrumbs"
         }, {
           default: withCtx(({ value }) => [
-            createVNode(_sfc_main$d, {
-              name: _ctx.name,
-              limit: value,
-              custom: true,
-              "test-id": "workflow-name-input"
+            createVNode(_component_FolderBreadcrumbs, {
+              "current-folder": currentFolderForBreadcrumbs.value,
+              "current-folder-as-link": true,
+              onItemSelected: onBreadcrumbsItemSelected
             }, {
-              default: withCtx(({ shortenedName }) => [
-                createVNode(InlineTextEdit, {
-                  "model-value": _ctx.name,
-                  "preview-value": shortenedName,
-                  "is-edit-enabled": isNameEditEnabled.value,
-                  "max-length": unref(MAX_WORKFLOW_NAME_LENGTH),
-                  disabled: _ctx.readOnly || !isNewWorkflow.value && !workflowPermissions.value.update,
-                  placeholder: "Enter workflow name",
-                  class: "name",
-                  onToggle: onNameToggle,
-                  onSubmit: onNameSubmit
-                }, null, 8, ["model-value", "preview-value", "is-edit-enabled", "max-length", "disabled"])
+              append: withCtx(() => [
+                unref(projectsStore).currentProject ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass(unref($style)["path-separator"])
+                }, "/", 2)) : createCommentVNode("", true),
+                createVNode(_sfc_main$9, {
+                  name: _ctx.name,
+                  limit: value,
+                  custom: true,
+                  "test-id": "workflow-name-input"
+                }, {
+                  default: withCtx(({ shortenedName }) => [
+                    createVNode(InlineTextEdit, {
+                      "model-value": _ctx.name,
+                      "preview-value": shortenedName,
+                      "is-edit-enabled": isNameEditEnabled.value,
+                      "max-length": unref(MAX_WORKFLOW_NAME_LENGTH),
+                      disabled: _ctx.readOnly || !isNewWorkflow.value && !workflowPermissions.value.update,
+                      placeholder: "Enter workflow name",
+                      class: "name",
+                      onToggle: onNameToggle,
+                      onSubmit: onNameSubmit
+                    }, null, 8, ["model-value", "preview-value", "is-edit-enabled", "max-length", "disabled"])
+                  ]),
+                  _: 2
+                }, 1032, ["name", "limit"])
               ]),
               _: 2
-            }, 1032, ["name", "limit"])
+            }, 1032, ["current-folder"])
           ]),
           _: 1
         }),
         unref(settingsStore).areTagsEnabled ? (openBlock(), createElementBlock("span", _hoisted_1, [
-          isTagsEditEnabled.value && !_ctx.readOnly && (isNewWorkflow.value || workflowPermissions.value.update) ? (openBlock(), createBlock(_sfc_main$f, {
+          isTagsEditEnabled.value && !_ctx.readOnly && (isNewWorkflow.value || workflowPermissions.value.update) ? (openBlock(), createBlock(_sfc_main$b, {
             key: 0,
             ref: "dropdown",
             modelValue: appliedTagIds.value,
@@ -1340,7 +1155,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$9, {
+          ])) : (openBlock(), createBlock(_sfc_main$5, {
             key: _ctx.id,
             "tag-ids": workflowTagIds.value,
             clickable: true,
@@ -1349,7 +1164,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onClick: onTagsEditEnable
           }, null, 8, ["tag-ids"]))
         ])) : (openBlock(), createElementBlock("span", _hoisted_3)),
-        createVNode(_sfc_main$g, { class: "actions" }, {
+        createVNode(_sfc_main$c, { class: "actions" }, {
           default: withCtx(() => [
             createBaseVNode("span", {
               class: normalizeClass(`activator ${unref($style).group}`)
@@ -1455,14 +1270,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container$1 = "_container_d7ycs_123";
-const group = "_group_d7ycs_132";
-const hiddenInput = "_hiddenInput_d7ycs_137";
-const deleteItem = "_deleteItem_d7ycs_141";
-const disabledShareButton = "_disabledShareButton_d7ycs_145";
-const closeNodeViewDiscovery = "_closeNodeViewDiscovery_d7ycs_149";
+const container$1 = "_container_l9ipp_123";
+const group = "_group_l9ipp_138";
+const hiddenInput = "_hiddenInput_l9ipp_143";
+const deleteItem = "_deleteItem_l9ipp_147";
+const disabledShareButton = "_disabledShareButton_l9ipp_151";
+const closeNodeViewDiscovery = "_closeNodeViewDiscovery_l9ipp_155";
 const style1 = {
   container: container$1,
+  "path-separator": "_path-separator_l9ipp_132",
   group,
   hiddenInput,
   deleteItem,
@@ -1472,7 +1288,7 @@ const style1 = {
 const cssModules$1 = {
   "$style": style1
 };
-const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-f531056b"]]);
+const WorkflowDetails = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1], ["__scopeId", "data-v-7ec35e38"]]);
 const GithubButton = defineComponent({
   name: "github-button",
   props: {
@@ -1600,6 +1416,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const showGitHubButton = computed(
       () => !isEnterprise.value && !settingsStore.settings.inE2ETests && !githubButtonHidden.value
     );
+    const parentFolderForBreadcrumbs = computed(() => {
+      if (!workflow.value.parentFolder) {
+        return void 0;
+      }
+      return {
+        id: workflow.value.parentFolder.id,
+        name: workflow.value.parentFolder.name,
+        parentFolder: workflow.value.parentFolder.parentFolderId ?? void 0
+      };
+    });
     watch(route, (to, from) => {
       syncTabsWithRoute(to, from);
     });
@@ -1713,8 +1539,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               meta: workflow.value.meta,
               scopes: workflow.value.scopes,
               active: workflow.value.active,
-              "read-only": readOnly.value
-            }, null, 8, ["id", "tags", "name", "meta", "scopes", "active", "read-only"])) : createCommentVNode("", true),
+              "read-only": readOnly.value,
+              "current-folder": parentFolderForBreadcrumbs.value
+            }, null, 8, ["id", "tags", "name", "meta", "scopes", "active", "read-only", "current-folder"])) : createCommentVNode("", true),
             showGitHubButton.value ? (openBlock(), createElementBlock("div", {
               key: 1,
               class: normalizeClass([_ctx.$style["github-button"], "hidden-sm-and-down"])
@@ -1756,14 +1583,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const container = "_container_1vvf3_123";
+const container = "_container_hdyww_123";
 const style0 = {
   container,
-  "main-header": "_main-header_1vvf3_130",
-  "top-menu": "_top-menu_1vvf3_138",
-  "github-button": "_github-button_1vvf3_147",
-  "close-github-button": "_close-github-button_1vvf3_156",
-  "github-button-container": "_github-button-container_1vvf3_171"
+  "main-header": "_main-header_hdyww_130",
+  "top-menu": "_top-menu_hdyww_138",
+  "github-button": "_github-button_hdyww_149",
+  "close-github-button": "_close-github-button_hdyww_158",
+  "github-button-container": "_github-button-container_hdyww_173"
 };
 const cssModules = {
   "$style": style0