From 2701a6ed802e4803f67a6edc18f6464b11c09290 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 8 Nov 2024 07:10:12 +0100
Subject: [PATCH] fix(editor): Move project tabs to project header

---
 ...stHeader.test.ts => ProjectHeader.test.ts} | 20 +++++--
 ...sourceListHeader.vue => ProjectHeader.vue} | 42 ++++++++++-----
 .../components/Projects/ProjectTabs.test.ts   | 54 +++----------------
 .../src/components/Projects/ProjectTabs.vue   | 18 ++-----
 .../global/GlobalExecutionsList.vue           |  6 +--
 .../layouts/ResourcesListLayout.vue           |  6 +--
 .../editor-ui/src/views/ProjectSettings.vue   |  5 +-
 7 files changed, 65 insertions(+), 86 deletions(-)
 rename packages/editor-ui/src/components/Projects/{ProjectResourceListHeader.test.ts => ProjectHeader.test.ts} (80%)
 rename packages/editor-ui/src/components/Projects/{ProjectResourceListHeader.vue => ProjectHeader.vue} (54%)

diff --git a/packages/editor-ui/src/components/Projects/ProjectResourceListHeader.test.ts b/packages/editor-ui/src/components/Projects/ProjectHeader.test.ts
similarity index 80%
rename from packages/editor-ui/src/components/Projects/ProjectResourceListHeader.test.ts
rename to packages/editor-ui/src/components/Projects/ProjectHeader.test.ts
index 7f349fe63b..d526e395aa 100644
--- a/packages/editor-ui/src/components/Projects/ProjectResourceListHeader.test.ts
+++ b/packages/editor-ui/src/components/Projects/ProjectHeader.test.ts
@@ -1,16 +1,30 @@
 import { createTestingPinia } from '@pinia/testing';
 import { createComponentRenderer } from '@/__tests__/render';
 import { mockedStore } from '@/__tests__/utils';
-import ProjectResourceListHeader from '@/components/Projects/ProjectResourceListHeader.vue';
+import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { Project } from '@/types/projects.types';
 import { ProjectTypes } from '@/types/projects.types';
 
-const renderComponent = createComponentRenderer(ProjectResourceListHeader);
+vi.mock('vue-router', async () => {
+	const actual = await vi.importActual('vue-router');
+	return {
+		...actual,
+		useRoute: () => ({
+			location: {},
+		}),
+	};
+});
+
+const renderComponent = createComponentRenderer(ProjectHeader, {
+	global: {
+		stubs: ['ProjectTabs'],
+	},
+});
 
 let projectsStore: ReturnType<typeof mockedStore<typeof useProjectsStore>>;
 
-describe('ProjectResourceListHeader', () => {
+describe('ProjectHeader', () => {
 	beforeEach(() => {
 		createTestingPinia();
 		projectsStore = mockedStore(useProjectsStore);
diff --git a/packages/editor-ui/src/components/Projects/ProjectResourceListHeader.vue b/packages/editor-ui/src/components/Projects/ProjectHeader.vue
similarity index 54%
rename from packages/editor-ui/src/components/Projects/ProjectResourceListHeader.vue
rename to packages/editor-ui/src/components/Projects/ProjectHeader.vue
index 0088c5ef0b..f702ad1f66 100644
--- a/packages/editor-ui/src/components/Projects/ProjectResourceListHeader.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectHeader.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { useRoute } from 'vue-router';
 import { useI18n } from '@/composables/useI18n';
 import { ProjectTypes } from '@/types/projects.types';
 import { useProjectsStore } from '@/stores/projects.store';
+import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
+import { getResourcePermissions } from '@/permissions';
 
+const route = useRoute();
 const i18n = useI18n();
 const projectsStore = useProjectsStore();
 
@@ -26,22 +30,36 @@ const projectName = computed(() => {
 		return projectsStore.currentProject.name;
 	}
 });
+
+const projectPermissions = computed(
+	() => getResourcePermissions(projectsStore.currentProject?.scopes).project,
+);
+
+const showSettings = computed(
+	() =>
+		!!route?.params?.projectId &&
+		projectPermissions.value.update &&
+		projectsStore.currentProject?.type === ProjectTypes.Team,
+);
 </script>
 
 <template>
-	<div :class="[$style.projectHeader]">
-		<div :class="[$style.icon]">
-			<N8nIcon :icon="headerIcon" color="text-light"></N8nIcon>
-		</div>
-		<div>
-			<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
-			<N8nText v-if="$slots.subtitle" size="small" color="text-light">
-				<slot name="subtitle" />
-			</N8nText>
-		</div>
-		<div v-if="$slots.actions" :class="[$style.actions]">
-			<slot name="actions"></slot>
+	<div>
+		<div :class="[$style.projectHeader]">
+			<div :class="[$style.icon]">
+				<N8nIcon :icon="headerIcon" color="text-light"></N8nIcon>
+			</div>
+			<div>
+				<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
+				<N8nText v-if="$slots.subtitle" size="small" color="text-light">
+					<slot name="subtitle" />
+				</N8nText>
+			</div>
+			<div v-if="$slots.actions" :class="[$style.actions]">
+				<slot name="actions"></slot>
+			</div>
 		</div>
+		<ProjectTabs :show-settings="showSettings" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
index 45e4a74e1d..c77d7b42cf 100644
--- a/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
+++ b/packages/editor-ui/src/components/Projects/ProjectTabs.test.ts
@@ -1,22 +1,14 @@
-import { createPinia, setActivePinia } from 'pinia';
-import { useRoute } from 'vue-router';
 import { createComponentRenderer } from '@/__tests__/render';
-import { createTestProject } from '@/__tests__/data/projects';
 import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
-import { useProjectsStore } from '@/stores/projects.store';
-import { ProjectTypes } from '@/types/projects.types';
 
-vi.mock('vue-router', () => {
+vi.mock('vue-router', async () => {
+	const actual = await vi.importActual('vue-router');
 	const params = {};
-	const push = vi.fn();
 	return {
+		...actual,
 		useRoute: () => ({
 			params,
 		}),
-		useRouter: () => ({
-			push,
-		}),
-		RouterLink: vi.fn(),
 	};
 });
 const renderComponent = createComponentRenderer(ProjectTabs, {
@@ -29,54 +21,22 @@ const renderComponent = createComponentRenderer(ProjectTabs, {
 	},
 });
 
-let route: ReturnType<typeof useRoute>;
-let projectsStore: ReturnType<typeof useProjectsStore>;
-
 describe('ProjectTabs', () => {
-	beforeEach(() => {
-		const pinia = createPinia();
-		setActivePinia(pinia);
-		route = useRoute();
-		projectsStore = useProjectsStore();
-	});
-
 	it('should render home tabs', async () => {
 		const { getByText, queryByText } = renderComponent();
 
 		expect(getByText('Workflows')).toBeInTheDocument();
 		expect(getByText('Credentials')).toBeInTheDocument();
+		expect(getByText('Executions')).toBeInTheDocument();
 		expect(queryByText('Project settings')).not.toBeInTheDocument();
 	});
 
-	it('should render project tab Settings if user has permissions and current project is of type Team', () => {
-		route.params.projectId = '123';
-		projectsStore.setCurrentProject(createTestProject({ scopes: ['project:update'] }));
-		const { getByText } = renderComponent();
+	it('should render project tab Settings', () => {
+		const { getByText } = renderComponent({ props: { showSettings: true } });
 
 		expect(getByText('Workflows')).toBeInTheDocument();
 		expect(getByText('Credentials')).toBeInTheDocument();
+		expect(getByText('Executions')).toBeInTheDocument();
 		expect(getByText('Project settings')).toBeInTheDocument();
 	});
-
-	it('should render project tabs without Settings if no permission', () => {
-		route.params.projectId = '123';
-		projectsStore.setCurrentProject(createTestProject({ scopes: ['project:read'] }));
-		const { queryByText, getByText } = renderComponent();
-
-		expect(getByText('Workflows')).toBeInTheDocument();
-		expect(getByText('Credentials')).toBeInTheDocument();
-		expect(queryByText('Project settings')).not.toBeInTheDocument();
-	});
-
-	it('should render project tabs without Settings if project is the Personal project', () => {
-		route.params.projectId = '123';
-		projectsStore.setCurrentProject(
-			createTestProject({ type: ProjectTypes.Personal, scopes: ['project:update'] }),
-		);
-		const { queryByText, getByText } = renderComponent();
-
-		expect(getByText('Workflows')).toBeInTheDocument();
-		expect(getByText('Credentials')).toBeInTheDocument();
-		expect(queryByText('Project settings')).not.toBeInTheDocument();
-	});
 });
diff --git a/packages/editor-ui/src/components/Projects/ProjectTabs.vue b/packages/editor-ui/src/components/Projects/ProjectTabs.vue
index eb06c48abd..19b3269056 100644
--- a/packages/editor-ui/src/components/Projects/ProjectTabs.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectTabs.vue
@@ -4,19 +4,15 @@ import type { RouteRecordName } from 'vue-router';
 import { useRoute } from 'vue-router';
 import { VIEWS } from '@/constants';
 import { useI18n } from '@/composables/useI18n';
-import { useProjectsStore } from '@/stores/projects.store';
-import { getResourcePermissions } from '@/permissions';
-import { ProjectTypes } from '@/types/projects.types';
+
+const props = defineProps<{
+	showSettings?: boolean;
+}>();
 
 const locale = useI18n();
 const route = useRoute();
 
-const projectsStore = useProjectsStore();
-
 const selectedTab = ref<RouteRecordName | null | undefined>('');
-const projectPermissions = computed(
-	() => getResourcePermissions(projectsStore.currentProject?.scopes).project,
-);
 const options = computed(() => {
 	const projectId = route?.params?.projectId;
 	const to = projectId
@@ -63,11 +59,7 @@ const options = computed(() => {
 		},
 	];
 
-	if (
-		projectId &&
-		projectPermissions.value.update &&
-		projectsStore.currentProject?.type === ProjectTypes.Team
-	) {
+	if (props.showSettings) {
 		tabs.push({
 			label: locale.baseText('projects.settings'),
 			value: VIEWS.PROJECT_SETTINGS,
diff --git a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
index 9f97c497ab..0a4dbecba3 100644
--- a/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
+++ b/packages/editor-ui/src/components/executions/global/GlobalExecutionsList.vue
@@ -14,8 +14,7 @@ import { useExecutionsStore } from '@/stores/executions.store';
 import type { PermissionsRecord } from '@/permissions';
 import { getResourcePermissions } from '@/permissions';
 import { useSettingsStore } from '@/stores/settings.store';
-import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
-import ProjectResourceListHeader from '@/components/Projects/ProjectResourceListHeader.vue';
+import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 
 const props = withDefaults(
 	defineProps<{
@@ -317,8 +316,7 @@ async function onAutoRefreshToggle(value: boolean) {
 
 <template>
 	<div :class="$style.execListWrapper">
-		<ProjectResourceListHeader />
-		<ProjectTabs />
+		<ProjectHeader />
 		<div :class="$style.execList">
 			<div :class="$style.execListHeader">
 				<div :class="$style.execListHeaderControls">
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 7ae2e45153..2e89159f0f 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -5,8 +5,7 @@ import { type ProjectSharingData } from '@/types/projects.types';
 import PageViewLayout from '@/components/layouts/PageViewLayout.vue';
 import PageViewLayoutList from '@/components/layouts/PageViewLayoutList.vue';
 import ResourceFiltersDropdown from '@/components/forms/ResourceFiltersDropdown.vue';
-import ProjectResourceListHeader from '@/components/Projects/ProjectResourceListHeader.vue';
-import ProjectTabs from '@/components/Projects/ProjectTabs.vue';
+import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { useUsersStore } from '@/stores/users.store';
 import type { DatatableColumn } from 'n8n-design-system';
 import { useI18n } from '@/composables/useI18n';
@@ -334,8 +333,7 @@ onMounted(async () => {
 <template>
 	<PageViewLayout>
 		<template #header>
-			<ProjectResourceListHeader />
-			<ProjectTabs />
+			<ProjectHeader />
 			<slot name="header" />
 		</template>
 		<div v-if="loading" class="resource-list-loading">
diff --git a/packages/editor-ui/src/views/ProjectSettings.vue b/packages/editor-ui/src/views/ProjectSettings.vue
index 514c1b9143..155e22fa3e 100644
--- a/packages/editor-ui/src/views/ProjectSettings.vue
+++ b/packages/editor-ui/src/views/ProjectSettings.vue
@@ -18,7 +18,7 @@ import type { ProjectRole } from '@/types/roles.types';
 import { useCloudPlanStore } from '@/stores/cloudPlan.store';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
-import ProjectResourceListHeader from '@/components/Projects/ProjectResourceListHeader.vue';
+import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 
 type FormDataDiff = {
 	name?: string;
@@ -261,8 +261,7 @@ onMounted(() => {
 <template>
 	<div :class="$style.projectSettings">
 		<div :class="$style.header">
-			<ProjectResourceListHeader />
-			<ProjectTabs />
+			<ProjectHeader />
 		</div>
 		<form @submit.prevent="onSubmit">
 			<fieldset>