feat(editor): Show personal project for community edition (no-changelog) (#13828)

packages/frontend/editor-ui/src/components/Projects/ProjectNavigation.test.ts

@@ -5,6 +5,7 @@ import { mockedStore } from '@/__tests__/utils';
 import { createProjectListItem } from '@/__tests__/data/projects';
 import ProjectsNavigation from '@/components/Projects/ProjectNavigation.vue';
 import { useProjectsStore } from '@/stores/projects.store';
+import { useSettingsStore } from '@/stores/settings.store';
 
 vi.mock('vue-router', async () => {
 	const actual = await vi.importActual('vue-router');
@@ -62,6 +63,7 @@ const renderComponent = createComponentRenderer(ProjectsNavigation, {
 });
 
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
+let settingsStore: ReturnType<typeof mockedStore<typeof useSettingsStore>>;
 
 const personalProjects = Array.from({ length: 3 }, createProjectListItem);
 const teamProjects = Array.from({ length: 3 }, () => createProjectListItem('team'));
@@ -71,6 +73,7 @@ describe('ProjectsNavigation', () => {
 		createTestingPinia();
 
 		projectsStore = mockedStore(useProjectsStore);
+		settingsStore = mockedStore(useSettingsStore);
 	});
 
 	it('should not throw an error', () => {
@@ -124,6 +127,23 @@ describe('ProjectsNavigation', () => {
 		expect(queryByRole('heading', { level: 3, name: 'Projects' })).not.toBeInTheDocument();
 	});
 
+	it('should show Personal project when folders are enabled but projects are disabled', async () => {
+		projectsStore.teamProjectsLimit = 0;
+		settingsStore.isFoldersFeatureEnabled = true;
+
+		const { queryByRole, getByTestId, queryByTestId } = renderComponent({
+			props: {
+				collapsed: false,
+			},
+		});
+
+		// Personal project menu item should be visible
+		expect(getByTestId('project-personal-menu-item')).toBeVisible();
+		// Projects section should not be visible
+		expect(queryByRole('heading', { level: 3, name: 'Projects' })).not.toBeInTheDocument();
+		expect(queryByTestId('project-plus-button')).not.toBeInTheDocument();
+	});
+
 	it('should show project icons when the menu is collapsed', async () => {
 		projectsStore.teamProjectsLimit = -1;
 

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

@@ -6,6 +6,7 @@ import { VIEWS } from '@/constants';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { ProjectListItem } from '@/types/projects.types';
 import { useGlobalEntityCreation } from '@/composables/useGlobalEntityCreation';
+import { useSettingsStore } from '@/stores/settings.store';
 
 type Props = {
 	collapsed: boolean;
@@ -15,11 +16,15 @@ type Props = {
 const props = defineProps<Props>();
 
 const locale = useI18n();
-const projectsStore = useProjectsStore();
 const globalEntityCreation = useGlobalEntityCreation();
 
+const projectsStore = useProjectsStore();
+const settingsStore = useSettingsStore();
+
 const isCreatingProject = computed(() => globalEntityCreation.isCreatingProject.value);
 const displayProjects = computed(() => globalEntityCreation.displayProjects.value);
+// TODO: Once we remove the feature flag, we can remove this computed property
+const isFoldersFeatureEnabled = computed(() => settingsStore.isFoldersFeatureEnabled);
 
 const home = computed<IMenuItem>(() => ({
 	id: 'home',
@@ -89,7 +94,7 @@ const showAddFirstProject = computed(
 			/>
 		</N8nText>
 		<ElMenu
-			v-if="projectsStore.isTeamProjectFeatureEnabled"
+			v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
 			:collapse="props.collapsed"
 			:class="$style.projectItems"
 		>
@@ -140,6 +145,7 @@ const showAddFirstProject = computed(
 	width: 100%;
 	overflow: hidden;
 	align-items: start;
+	gap: var(--spacing-3xs);
 	&:hover {
 		.plusBtn {
 			display: block;