From d290d80270738a14bef3159d1bc9a157a86a9876 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba.tuncsik@gmail.com>
Date: Wed, 22 May 2024 14:36:29 +0200
Subject: [PATCH] fix(editor): Fix project menu item highlight

---
 cypress/e2e/39-projects.cy.ts                 | 46 ++++++++++++++++++-
 .../editor-ui/src/__tests__/data/projects.ts  |  5 +-
 .../CredentialEdit/CredentialSharing.ee.vue   |  3 +-
 .../src/components/WorkflowSettings.vue       |  3 +-
 .../src/components/WorkflowShareModal.ee.vue  |  3 +-
 .../projects/components/ProjectCardBadge.vue  |  9 ++--
 .../projects/components/ProjectNavigation.vue | 19 +-------
 .../src/features/projects/projects.store.ts   | 16 ++++++-
 .../src/features/projects/projects.types.ts   |  5 +-
 .../src/features/projects/projects.utils.ts   |  6 +++
 packages/editor-ui/src/views/NodeView.vue     |  9 ++--
 11 files changed, 93 insertions(+), 31 deletions(-)

diff --git a/cypress/e2e/39-projects.cy.ts b/cypress/e2e/39-projects.cy.ts
index d4aec07bcec38..a3758b1fdaa84 100644
--- a/cypress/e2e/39-projects.cy.ts
+++ b/cypress/e2e/39-projects.cy.ts
@@ -1,15 +1,23 @@
 import { INSTANCE_ADMIN, INSTANCE_MEMBERS } from '../constants';
-import { WorkflowsPage, WorkflowPage, CredentialsModal, CredentialsPage } from '../pages';
+import {
+	WorkflowsPage,
+	WorkflowPage,
+	CredentialsModal,
+	CredentialsPage,
+	WorkflowExecutionsTab,
+} from '../pages';
 import * as projects from '../composables/projects';
 
 const workflowsPage = new WorkflowsPage();
 const workflowPage = new WorkflowPage();
 const credentialsPage = new CredentialsPage();
 const credentialsModal = new CredentialsModal();
+const executionsTab = new WorkflowExecutionsTab();
 
 describe('Projects', () => {
 	beforeEach(() => {
 		cy.resetDatabase();
+		cy.enableFeature('sharing');
 		cy.enableFeature('advancedPermissions');
 		cy.enableFeature('projectRole:admin');
 		cy.enableFeature('projectRole:editor');
@@ -160,8 +168,26 @@ describe('Projects', () => {
 		menuItems.filter('[class*=active_]').should('have.length', 1);
 		menuItems.filter(':contains("Development")[class*=active_]').should('exist');
 
+		cy.intercept('GET', '/rest/workflows/*').as('loadWorkflow');
 		workflowsPage.getters.workflowCards().first().click();
 
+		cy.wait('@loadWorkflow');
+		menuItems = cy.getByTestId('menu-item');
+
+		menuItems.filter('[class*=active_]').should('have.length', 1);
+		menuItems.filter(':contains("Development")[class*=active_]').should('exist');
+
+		cy.intercept('GET', '/rest/executions*').as('loadExecutions');
+		executionsTab.actions.switchToExecutionsTab();
+
+		cy.wait('@loadExecutions');
+		menuItems = cy.getByTestId('menu-item');
+
+		menuItems.filter('[class*=active_]').should('have.length', 1);
+		menuItems.filter(':contains("Development")[class*=active_]').should('exist');
+
+		executionsTab.actions.switchToEditorTab();
+
 		menuItems = cy.getByTestId('menu-item');
 
 		menuItems.filter('[class*=active_]').should('have.length', 1);
@@ -174,5 +200,23 @@ describe('Projects', () => {
 
 		menuItems.filter('[class*=active_]').should('have.length', 1);
 		menuItems.filter(':contains("Variables")[class*=active_]').should('exist');
+
+		projects.getHomeButton().click();
+		menuItems = cy.getByTestId('menu-item');
+
+		menuItems.filter('[class*=active_]').should('have.length', 1);
+		menuItems.filter(':contains("Home")[class*=active_]').should('exist');
+
+		workflowsPage.getters.workflowCards().should('have.length', 2).first().click();
+
+		cy.wait('@loadWorkflow');
+		cy.getByTestId('execute-workflow-button').should('be.visible');
+
+		menuItems = cy.getByTestId('menu-item');
+		menuItems.filter(':contains("Home")[class*=active_]').should('not.exist');
+
+		menuItems = cy.getByTestId('menu-item');
+		menuItems.filter('[class*=active_]').should('have.length', 1);
+		menuItems.filter(':contains("Development")[class*=active_]').should('exist');
 	});
 });
diff --git a/packages/editor-ui/src/__tests__/data/projects.ts b/packages/editor-ui/src/__tests__/data/projects.ts
index d0e0666f45c11..9f87d7f781e97 100644
--- a/packages/editor-ui/src/__tests__/data/projects.ts
+++ b/packages/editor-ui/src/__tests__/data/projects.ts
@@ -4,11 +4,14 @@ import type {
 	ProjectSharingData,
 	ProjectType,
 } from '@/features/projects/projects.types';
+import { ProjectTypes } from '@/features/projects/projects.utils';
 
 export const createProjectSharingData = (projectType?: ProjectType): ProjectSharingData => ({
 	id: faker.string.uuid(),
 	name: faker.lorem.words({ min: 1, max: 3 }),
-	type: projectType || 'personal',
+	type: projectType ?? ProjectTypes.Personal,
+	createdAt: faker.date.past().toISOString(),
+	updatedAt: faker.date.recent().toISOString(),
 });
 
 export const createProjectListItem = (projectType?: ProjectType): ProjectListItem => {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index 388101969cfaa..d94364e7a36b6 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -96,6 +96,7 @@ import type { CredentialScope } from '@n8n/permissions';
 import type { EventBus } from 'n8n-design-system/utils';
 import { useRolesStore } from '@/stores/roles.store';
 import type { RoleMap } from '@/types/roles.types';
+import { ProjectTypes } from '@/features/projects/projects.utils';
 
 export default defineComponent({
 	name: 'CredentialSharing',
@@ -178,7 +179,7 @@ export default defineComponent({
 			);
 		},
 		isHomeTeamProject(): boolean {
-			return this.homeProject?.type === 'team';
+			return this.homeProject?.type === ProjectTypes.Team;
 		},
 		numberOfMembersInHomeTeamProject(): number {
 			return this.teamProject?.relations.length ?? 0;
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index ecaa56de3e799..8d7ac218ba43a 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -384,6 +384,7 @@ import type { WorkflowScope } from '@n8n/permissions';
 import { getWorkflowPermissions } from '@/permissions';
 import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { ProjectTypes } from '@/features/projects/projects.utils';
 
 export default defineComponent({
 	name: 'WorkflowSettings',
@@ -604,7 +605,7 @@ export default defineComponent({
 				{
 					key: 'workflowsFromSameOwner',
 					value: this.$locale.baseText(
-						this.workflow.homeProject?.type === 'personal'
+						this.workflow.homeProject?.type === ProjectTypes.Personal
 							? 'workflowSettings.callerPolicy.options.workflowsFromPersonalProject'
 							: 'workflowSettings.callerPolicy.options.workflowsFromTeamProject',
 						{
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 489a46c7316f7..6557492c59b2a 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -152,6 +152,7 @@ import type {
 } from '@/features/projects/projects.types';
 import { useRolesStore } from '@/stores/roles.store';
 import type { RoleMap } from '@/types/roles.types';
+import { ProjectTypes } from '@/features/projects/projects.utils';
 
 export default defineComponent({
 	name: 'WorkflowShareModal',
@@ -238,7 +239,7 @@ export default defineComponent({
 			);
 		},
 		isHomeTeamProject(): boolean {
-			return this.workflow.homeProject?.type === 'team';
+			return this.workflow.homeProject?.type === ProjectTypes.Team;
 		},
 		numberOfMembersInHomeTeamProject(): number {
 			return this.teamProject?.relations.length ?? 0;
diff --git a/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue b/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
index 7c9143e1fc143..4f967891ab9af 100644
--- a/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
+++ b/packages/editor-ui/src/features/projects/components/ProjectCardBadge.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
-import { splitName } from '@/features/projects/projects.utils';
+import { ProjectTypes, splitName } from '@/features/projects/projects.utils';
 import type { ICredentialsResponse, IWorkflowDb } from '@/Interface';
 import type { Project } from '@/features/projects/projects.types';
 
@@ -29,9 +29,12 @@ const badgeText = computed(() => {
 });
 
 const badgeIcon = computed(() => {
-	if (props.resource.sharedWithProjects?.length && props.resource.homeProject?.type !== 'team') {
+	if (
+		props.resource.sharedWithProjects?.length &&
+		props.resource.homeProject?.type !== ProjectTypes.Team
+	) {
 		return 'user-friends';
-	} else if (props.resource.homeProject?.type === 'team') {
+	} else if (props.resource.homeProject?.type === ProjectTypes.Team) {
 		return 'archive';
 	} else {
 		return '';
diff --git a/packages/editor-ui/src/features/projects/components/ProjectNavigation.vue b/packages/editor-ui/src/features/projects/components/ProjectNavigation.vue
index 05899053e3053..deb8cd91f6e45 100644
--- a/packages/editor-ui/src/features/projects/components/ProjectNavigation.vue
+++ b/packages/editor-ui/src/features/projects/components/ProjectNavigation.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, nextTick } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import type { IMenuItem } from 'n8n-design-system/types';
 import { useI18n } from '@/composables/useI18n';
 import { VIEWS } from '@/constants';
@@ -16,7 +16,6 @@ type Props = {
 
 const props = defineProps<Props>();
 
-const route = useRoute();
 const router = useRouter();
 const locale = useI18n();
 const toast = useToast();
@@ -42,20 +41,6 @@ const addProject = computed<IMenuItem>(() => ({
 	isLoading: isCreatingProject.value,
 }));
 
-const activeTab = computed(() => {
-	let routes = [VIEWS.HOMEPAGE, VIEWS.WORKFLOWS, VIEWS.CREDENTIALS];
-	if (projectsStore.currentProjectId === undefined) {
-		routes = [
-			...routes,
-			VIEWS.NEW_WORKFLOW,
-			VIEWS.WORKFLOW_HISTORY,
-			VIEWS.WORKFLOW,
-			VIEWS.EXECUTION_HOME,
-		];
-	}
-	return routes.includes(route.name as VIEWS) ? 'home' : undefined;
-});
-
 const getProjectMenuItem = (project: ProjectListItem) => ({
 	id: project.id,
 	label: project.name,
@@ -123,7 +108,7 @@ onMounted(async () => {
 				:item="home"
 				:compact="props.collapsed"
 				:handle-select="homeClicked"
-				:active-tab="activeTab"
+				:active-tab="projectsStore.projectNavActiveId"
 				mode="tabs"
 				data-test-id="project-home-menu-item"
 			/>
diff --git a/packages/editor-ui/src/features/projects/projects.store.ts b/packages/editor-ui/src/features/projects/projects.store.ts
index b44e8eced8ccb..99ad95a40c3ab 100644
--- a/packages/editor-ui/src/features/projects/projects.store.ts
+++ b/packages/editor-ui/src/features/projects/projects.store.ts
@@ -12,6 +12,7 @@ import type {
 } from '@/features/projects/projects.types';
 import { useSettingsStore } from '@/stores/settings.store';
 import { hasPermission } from '@/rbac/permissions';
+import { ProjectTypes } from './projects.utils';
 
 export const useProjectsStore = defineStore('projects', () => {
 	const route = useRoute();
@@ -36,8 +37,10 @@ export const useProjectsStore = defineStore('projects', () => {
 			currentProject.value?.id,
 	);
 	const isProjectHome = computed(() => route.path.includes('home'));
-	const personalProjects = computed(() => projects.value.filter((p) => p.type === 'personal'));
-	const teamProjects = computed(() => projects.value.filter((p) => p.type === 'team'));
+	const personalProjects = computed(() =>
+		projects.value.filter((p) => p.type === ProjectTypes.Personal),
+	);
+	const teamProjects = computed(() => projects.value.filter((p) => p.type === ProjectTypes.Team));
 	const teamProjectsLimit = computed(() => settingsStore.settings.enterprise.projects.team.limit);
 	const teamProjectsAvailable = computed<boolean>(
 		() => settingsStore.settings.enterprise.projects.team.limit !== 0,
@@ -124,9 +127,18 @@ export const useProjectsStore = defineStore('projects', () => {
 			projectNavActiveId.value = null;
 
 			if (newRoute?.path?.includes('home')) {
+				projectNavActiveId.value = 'home';
 				setCurrentProject(null);
 			}
 
+			if (newRoute?.path?.includes('workflow/')) {
+				if (currentProjectId.value) {
+					projectNavActiveId.value = currentProjectId.value;
+				} else {
+					projectNavActiveId.value = 'home';
+				}
+			}
+
 			if (!newRoute?.params?.projectId) {
 				return;
 			}
diff --git a/packages/editor-ui/src/features/projects/projects.types.ts b/packages/editor-ui/src/features/projects/projects.types.ts
index fd1348d7f0af5..63ade56fcdbb5 100644
--- a/packages/editor-ui/src/features/projects/projects.types.ts
+++ b/packages/editor-ui/src/features/projects/projects.types.ts
@@ -1,8 +1,11 @@
 import type { Scope } from '@n8n/permissions';
 import type { IUserResponse } from '@/Interface';
 import type { ProjectRole } from '@/types/roles.types';
+import type { ProjectTypes } from '@/features/projects/projects.utils';
 
-export type ProjectType = 'personal' | 'team' | 'public';
+type ProjectTypeKeys = typeof ProjectTypes;
+
+export type ProjectType = ProjectTypeKeys[keyof ProjectTypeKeys];
 export type ProjectRelation = Pick<IUserResponse, 'id' | 'email' | 'firstName' | 'lastName'> & {
 	role: ProjectRole;
 };
diff --git a/packages/editor-ui/src/features/projects/projects.utils.ts b/packages/editor-ui/src/features/projects/projects.utils.ts
index 5e9537ddd990f..824365f2ef147 100644
--- a/packages/editor-ui/src/features/projects/projects.utils.ts
+++ b/packages/editor-ui/src/features/projects/projects.utils.ts
@@ -26,3 +26,9 @@ export const splitName = (
 		}
 	}
 };
+
+export const ProjectTypes = {
+	Personal: 'personal',
+	Team: 'team',
+	Public: 'public',
+} as const;
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index e29781cbe8d07..920d3e0bba2b6 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -395,6 +395,7 @@ import type { ProjectSharingData } from '@/features/projects/projects.types';
 import { useAIStore } from '@/stores/ai.store';
 import { useStorage } from '@/composables/useStorage';
 import { isJSPlumbEndpointElement } from '@/utils/typeGuards';
+import { ProjectTypes } from '@/features/projects/projects.utils';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -3726,8 +3727,10 @@ export default defineComponent({
 						await this.openWorkflow(workflow);
 						await this.checkAndInitDebugMode();
 
-						if (this.projectsStore.currentProjectId) {
-							this.projectsStore.projectNavActiveId = this.projectsStore.currentProjectId;
+						if (workflow.homeProject?.type === ProjectTypes.Personal) {
+							this.projectsStore.projectNavActiveId = 'home';
+						} else {
+							this.projectsStore.projectNavActiveId = workflow.homeProject?.id ?? null;
 						}
 
 						if (workflow.meta?.onboardingId) {
@@ -4674,7 +4677,7 @@ export default defineComponent({
 		async loadCredentials(): Promise<void> {
 			const workflow = this.workflowsStore.getWorkflowById(this.currentWorkflow);
 			const projectId =
-				workflow?.homeProject?.type === 'personal'
+				workflow?.homeProject?.type === ProjectTypes.Personal
 					? this.projectsStore.personalProject?.id
 					: workflow?.homeProject?.id;
 			await this.credentialsStore.fetchAllCredentials(projectId);