fix(editor): Fix folders UI for different plans (no-changelog) (#14159)

cypress/composables/folders.ts

@@ -212,6 +212,11 @@ export function getNewFolderNameInput() {
 export function getNewFolderModalErrorMessage() {
 	return cy.get('.el-message-box__errormsg').filter(':visible');
 }
+
+export function getProjectTab(tabId: string) {
+	return cy.getByTestId('project-tabs').find(`#${tabId}`);
+}
+
 /**
  * Actions
  */

cypress/e2e/49-folders.cy.ts

@@ -32,6 +32,7 @@ import {
 	getPersonalProjectMenuItem,
 	getProjectEmptyState,
 	getProjectMenuItem,
+	getProjectTab,
 	getVisibleListBreadcrumbs,
 	getWorkflowCard,
 	getWorkflowCardBreadcrumbs,
@@ -64,12 +65,16 @@ describe('Folders', () => {
 
 	describe('Create and navigate folders', () => {
 		it('should create folder from the project header', () => {
+			// 1. In project root
 			getPersonalProjectMenuItem().click();
 			createFolderFromProjectHeader('My Folder');
 			getFolderCards().should('have.length.greaterThan', 0);
 			// Clicking on the success toast should navigate to the folder
 			successToast().find('a').click();
 			getCurrentBreadcrumb().should('contain.text', 'My Folder');
+			// 2. In a folder
+			createFolderFromListHeaderButton('My Folder 2');
+			getFolderCard('My Folder 2').should('exist');
 		});
 
 		it('should not allow illegal folder names', () => {
@@ -217,6 +222,10 @@ describe('Folders', () => {
 			cy.getByTestId('action-folder').should('exist');
 			createFolderFromProjectHeader('Personal Folder');
 			getFolderCards().should('exist');
+			// Create folder option should not be available on credentials tab
+			getProjectTab('ProjectsCredentials').click();
+			getAddResourceDropdown().click();
+			cy.getByTestId('action-folder').should('not.exist');
 		});
 	});
 

packages/frontend/editor-ui/src/components/Projects/ProjectHeader.vue

@@ -61,7 +61,10 @@ const showSettings = computed(
 const homeProject = computed(() => projectsStore.currentProject ?? projectsStore.personalProject);
 
 const showFolders = computed(() => {
-	return settingsStore.isFoldersFeatureEnabled && route.name !== VIEWS.WORKFLOWS;
+	return (
+		settingsStore.isFoldersFeatureEnabled &&
+		[VIEWS.PROJECTS_WORKFLOWS, VIEWS.PROJECTS_FOLDERS].includes(route.name as VIEWS)
+	);
 });
 
 const ACTION_TYPES = {

packages/frontend/editor-ui/src/views/WorkflowsView.vue

@@ -1231,13 +1231,13 @@ const onCreateWorkflowClick = () => {
 				/>
 			</ProjectHeader>
 		</template>
-		<template v-if="foldersEnabled" #add-button>
+		<template v-if="foldersEnabled || showRegisteredCommunityCTA" #add-button>
 			<N8nTooltip
 				placement="top"
 				:disabled="!(isOverviewPage || (!readOnlyEnv && hasPermissionToCreateFolders))"
 			>
 				<template #content>
-					<span v-if="isOverviewPage">
+					<span v-if="isOverviewPage && !showRegisteredCommunityCTA">
 						<span v-if="teamProjectsEnabled">
 							{{ i18n.baseText('folders.add.overview.withProjects.message') }}
 						</span>
@@ -1245,7 +1245,7 @@ const onCreateWorkflowClick = () => {
 							{{ i18n.baseText('folders.add.overview.community.message') }}
 						</span>
 					</span>
-					<span v-else-if="!readOnlyEnv && hasPermissionToCreateFolders">
+					<span v-else>
 						{{
 							currentParentName
 								? i18n.baseText('folders.add.to.parent.message', {
@@ -1261,7 +1261,7 @@ const onCreateWorkflowClick = () => {
 					type="tertiary"
 					data-test-id="add-folder-button"
 					:class="$style['add-folder-button']"
-					:disabled="readOnlyEnv || !hasPermissionToCreateFolders"
+					:disabled="!showRegisteredCommunityCTA && (readOnlyEnv || !hasPermissionToCreateFolders)"
 					@click="createFolderInCurrent"
 				/>
 			</N8nTooltip>