fix(editor): Add disabled state with tooltip on project creation buttons if user lacks permission (#13867)

packages/frontend/editor-ui/src/components/MainSidebar.vue

@@ -294,6 +294,7 @@ const {
 	createCredentialsAppendSlotName,
 	projectsLimitReachedMessage,
 	upgradeLabel,
+	hasPermissionToCreateProjects,
 } = useGlobalEntityCreation();
 onClickOutside(createBtn as Ref<VueInstance>, () => {
 	createBtn.value?.close();
@@ -385,7 +386,14 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
 						placement="right"
 						:content="projectsLimitReachedMessage"
 					>
+						<N8nIcon
+							v-if="!hasPermissionToCreateProjects"
+							style="margin-left: auto; margin-right: 5px"
+							icon="lock"
+							size="xsmall"
+						/>
 						<N8nButton
+							v-else
 							:size="'mini'"
 							style="margin-left: auto"
 							type="tertiary"

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

@@ -195,4 +195,22 @@ describe('ProjectsNavigation', () => {
 		expect(getByTestId('project-plus-button')).toBeVisible();
 		expect(getByTestId('add-first-project-button')).toBeVisible();
 	});
+
+	it('should show project plus button and add first project button in disabled state if user does not have permission', async () => {
+		projectsStore.teamProjectsLimit = -1;
+		projectsStore.hasPermissionToCreateProjects = false;
+
+		const { getByTestId } = renderComponent({
+			props: {
+				collapsed: false,
+			},
+		});
+		const plusButton = getByTestId('project-plus-button');
+		const addFirstProjectButton = getByTestId('add-first-project-button');
+
+		expect(plusButton).toBeVisible();
+		expect(plusButton).toBeDisabled();
+		expect(addFirstProjectButton).toBeVisible();
+		expect(addFirstProjectButton).toBeDisabled();
+	});
 });

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

@@ -83,15 +83,21 @@ const showAddFirstProject = computed(
 			bold
 		>
 			<span>{{ locale.baseText('projects.menu.title') }}</span>
-			<N8nButton
-				v-if="projectsStore.canCreateProjects"
-				icon="plus"
-				text
-				data-test-id="project-plus-button"
-				:disabled="isCreatingProject"
-				:class="$style.plusBtn"
-				@click="globalEntityCreation.createProject"
-			/>
+			<N8nTooltip
+				placement="right"
+				:disabled="projectsStore.hasPermissionToCreateProjects"
+				:content="locale.baseText('projects.create.permissionDenied')"
+			>
+				<N8nButton
+					v-if="projectsStore.canCreateProjects"
+					icon="plus"
+					text
+					data-test-id="project-plus-button"
+					:disabled="isCreatingProject || !projectsStore.hasPermissionToCreateProjects"
+					:class="$style.plusBtn"
+					@click="globalEntityCreation.createProject"
+				/>
+			</N8nTooltip>
 		</N8nText>
 		<ElMenu
 			v-if="projectsStore.isTeamProjectFeatureEnabled || isFoldersFeatureEnabled"
@@ -118,22 +124,28 @@ const showAddFirstProject = computed(
 				data-test-id="project-menu-item"
 			/>
 		</ElMenu>
-		<N8nButton
-			v-if="showAddFirstProject"
-			:class="[
-				$style.addFirstProjectBtn,
-				{
-					[$style.collapsed]: props.collapsed,
-				},
-			]"
-			:disabled="isCreatingProject"
-			type="secondary"
-			icon="plus"
-			data-test-id="add-first-project-button"
-			@click="globalEntityCreation.createProject"
+		<N8nTooltip
+			placement="right"
+			:disabled="projectsStore.hasPermissionToCreateProjects"
+			:content="locale.baseText('projects.create.permissionDenied')"
 		>
-			{{ locale.baseText('projects.menu.addFirstProject') }}
-		</N8nButton>
+			<N8nButton
+				v-if="showAddFirstProject"
+				:class="[
+					$style.addFirstProjectBtn,
+					{
+						[$style.collapsed]: props.collapsed,
+					},
+				]"
+				:disabled="isCreatingProject || !projectsStore.hasPermissionToCreateProjects"
+				type="secondary"
+				icon="plus"
+				data-test-id="add-first-project-button"
+				@click="globalEntityCreation.createProject"
+			>
+				{{ locale.baseText('projects.menu.addFirstProject') }}
+			</N8nButton>
+		</N8nTooltip>
 		<hr v-if="projectsStore.isTeamProjectFeatureEnabled" class="mb-m" />
 	</div>
 </template>