fix(editor): Correctly show Workflow Breadcrumbs in MainHeader on Registered Community (#15457)

packages/cli/src/workflows/workflows.controller.ts

@@ -330,7 +330,7 @@ export class WorkflowsController {
 			workflowId,
 			req.user,
 			['workflow:read'],
-			{ includeTags: !this.globalConfig.tags.disabled },
+			{ includeTags: !this.globalConfig.tags.disabled, includeParentFolder: true },
 		);
 
 		if (!workflow) {

packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.test.ts

@@ -123,4 +123,19 @@ describe('FolderBreadcrumbs', () => {
 		expect(queryAllByTestId('breadcrumbs-item')).toHaveLength(2);
 		expect(queryByTestId('ellipsis')).not.toBeInTheDocument();
 	});
+
+	it('should render personal project as fallback', () => {
+		foldersStore.getCachedFolder.mockReturnValue(TEST_FOLDER);
+		projectsStore.currentProject = null;
+		projectsStore.personalProject = TEST_PROJECT;
+
+		const { getByTestId } = renderComponent({
+			props: {
+				currentFolder: TEST_FOLDER_CHILD,
+			},
+		});
+		// Now, parent folder should also be visible
+		expect(getByTestId('folder-breadcrumbs')).toBeVisible();
+		expect(getByTestId('home-project')).toBeVisible();
+	});
 });

packages/frontend/editor-ui/src/components/Folders/FolderBreadcrumbs.vue

@@ -42,7 +42,9 @@ const hiddenBreadcrumbsItemsAsync = ref<Promise<PathItem[]>>(new Promise(() => {
 // This will be used to filter out items that are already visible in the breadcrumbs
 const visibleIds = ref<Set<string>>(new Set());
 
-const currentProject = computed(() => projectsStore.currentProject);
+const currentProject = computed(
+	() => projectsStore.currentProject ?? projectsStore.personalProject,
+);
 
 const projectName = computed(() => {
 	if (currentProject.value?.type === ProjectTypes.Personal) {
@@ -74,7 +76,7 @@ const visibleBreadcrumbsItems = computed<FolderPathItem[]>(() => {
 		items.push({
 			id: parent.id,
 			label: parent.name,
-			href: `/projects/${projectsStore.currentProjectId}/folders/${parent.id}/workflows`,
+			href: `/projects/${currentProject.value?.id}/folders/${parent.id}/workflows`,
 			parentFolder: parent.parentFolder,
 		});
 		visibleIds.value.add(parent.id);
@@ -84,11 +86,11 @@ const visibleBreadcrumbsItems = computed<FolderPathItem[]>(() => {
 		label: props.currentFolder.name,
 		parentFolder: props.currentFolder.parentFolder,
 		href: props.currentFolderAsLink
-			? `/projects/${projectsStore.currentProjectId}/folders/${props.currentFolder.id}/workflows`
+			? `/projects/${currentProject.value?.id}/folders/${props.currentFolder.id}/workflows`
 			: undefined,
 	});
-	if (projectsStore.currentProjectId) {
-		visibleIds.value.add(projectsStore.currentProjectId);
+	if (currentProject.value) {
+		visibleIds.value.add(currentProject.value.id);
 	}
 	visibleIds.value.add(props.currentFolder.id);
 
@@ -96,12 +98,12 @@ const visibleBreadcrumbsItems = computed<FolderPathItem[]>(() => {
 });
 
 const fetchHiddenBreadCrumbsItems = async () => {
-	if (!projectName.value || !props.currentFolder?.parentFolder || !projectsStore.currentProjectId) {
+	if (!projectName.value || !props.currentFolder?.parentFolder || !currentProject.value) {
 		hiddenBreadcrumbsItemsAsync.value = Promise.resolve([]);
 	} else {
 		try {
 			const loadedItems = foldersStore.getHiddenBreadcrumbsItems(
-				{ id: projectsStore.currentProjectId, name: projectName.value },
+				{ id: currentProject.value.id, name: projectName.value },
 				props.currentFolder.parentFolder,
 				{ addLinks: true },
 			);

packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -679,7 +679,11 @@ const onBreadcrumbsItemSelected = (item: PathItem) => {
 					@item-selected="onBreadcrumbsItemSelected"
 				>
 					<template #append>
-						<span v-if="projectsStore.currentProject" :class="$style['path-separator']">/</span>
+						<span
+							v-if="projectsStore.currentProject ?? projectsStore.personalProject"
+							:class="$style['path-separator']"
+							>/</span
+						>
 						<ShortenName :name="name" :limit="value" :custom="true" test-id="workflow-name-input">
 							<template #default="{ shortenedName }">
 								<InlineTextEdit