fix(editor): Move projects and rbac files (no-changelog) (#9651)

2025-12-21 11:49:59 +00:00 · 2024-06-06 15:30:17 +02:00
parent 58cfd2fde8
commit ed963011c9
94 changed files with 172 additions and 212 deletions
--- a/packages/editor-ui/src/components/Projects/ProjectNavigation.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectNavigation.vue
@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
+import type { IMenuItem } from 'n8n-design-system/types';
+import { useI18n } from '@/composables/useI18n';
+import { VIEWS } from '@/constants';
+import { useProjectsStore } from '@/stores/projects.store';
+import type { ProjectListItem } from '@/types/projects.types';
+import { useToast } from '@/composables/useToast';
+import { useUIStore } from '@/stores/ui.store';
+
+type Props = {
+	collapsed: boolean;
+	planName?: string;
+};
+
+const props = defineProps<Props>();
+
+const router = useRouter();
+const locale = useI18n();
+const toast = useToast();
+const projectsStore = useProjectsStore();
+const uiStore = useUIStore();
+
+const isCreatingProject = ref(false);
+const isComponentMounted = ref(false);
+const home = computed<IMenuItem>(() => ({
+	id: 'home',
+	label: locale.baseText('projects.menu.home'),
+	icon: 'home',
+	route: {
+		to: { name: VIEWS.HOMEPAGE },
+	},
+}));
+const addProject = computed<IMenuItem>(() => ({
+	id: 'addProject',
+	label: locale.baseText('projects.menu.addProject'),
+	icon: 'plus',
+	disabled:
+		!isComponentMounted.value || isCreatingProject.value || !projectsStore.canCreateProjects,
+	isLoading: isCreatingProject.value,
+}));
+
+const getProjectMenuItem = (project: ProjectListItem) => ({
+	id: project.id,
+	label: project.name,
+	route: {
+		to: {
+			name: VIEWS.PROJECTS_WORKFLOWS,
+			params: { projectId: project.id },
+		},
+	},
+});
+
+const homeClicked = () => {};
+const projectClicked = () => {};
+const addProjectClicked = async () => {
+	isCreatingProject.value = true;
+
+	try {
+		const newProject = await projectsStore.createProject({
+			name: locale.baseText('projects.settings.newProjectName'),
+		});
+		await router.push({ name: VIEWS.PROJECT_SETTINGS, params: { projectId: newProject.id } });
+		toast.showMessage({
+			title: locale.baseText('projects.settings.save.successful.title', {
+				interpolate: { projectName: newProject.name ?? '' },
+			}),
+			type: 'success',
+		});
+	} catch (error) {
+		toast.showError(error, locale.baseText('projects.error.title'));
+	} finally {
+		isCreatingProject.value = false;
+	}
+};
+
+const displayProjects = computed(() => {
+	return projectsStore.myProjects
+		.filter((p) => p.type === 'team')
+		.toSorted((a, b) => {
+			if (!a.name || !b.name) {
+				return 0;
+			}
+			if (a.name > b.name) {
+				return 1;
+			} else if (a.name < b.name) {
+				return -1;
+			}
+			return 0;
+		});
+});
+
+const goToUpgrade = async () => {
+	await uiStore.goToUpgrade('rbac', 'upgrade-rbac');
+};
+
+onMounted(async () => {
+	await nextTick();
+	isComponentMounted.value = true;
+});
+</script>
+
+<template>
+	<div :class="$style.projects">
+		<ElMenu :collapse="props.collapsed" class="home">
+			<N8nMenuItem
+				:item="home"
+				:compact="props.collapsed"
+				:handle-select="homeClicked"
+				:active-tab="projectsStore.projectNavActiveId"
+				mode="tabs"
+				data-test-id="project-home-menu-item"
+			/>
+		</ElMenu>
+		<hr
+			v-if="
+				displayProjects.length ||
+				(projectsStore.hasPermissionToCreateProjects && projectsStore.teamProjectsAvailable)
+			"
+			class="mt-m mb-m"
+		/>
+		<ElMenu v-if="displayProjects.length" :collapse="props.collapsed" :class="$style.projectItems">
+			<N8nMenuItem
+				v-for="project in displayProjects"
+				:key="project.id"
+				:item="getProjectMenuItem(project)"
+				:compact="props.collapsed"
+				:handle-select="projectClicked"
+				:active-tab="projectsStore.projectNavActiveId"
+				mode="tabs"
+				data-test-id="project-menu-item"
+			/>
+		</ElMenu>
+		<N8nTooltip placement="right" :disabled="projectsStore.canCreateProjects">
+			<ElMenu
+				v-if="projectsStore.hasPermissionToCreateProjects && projectsStore.teamProjectsAvailable"
+				:collapse="props.collapsed"
+				class="pl-xs pr-xs"
+			>
+				<N8nMenuItem
+					:item="addProject"
+					:compact="props.collapsed"
+					:handle-select="addProjectClicked"
+					mode="tabs"
+					data-test-id="add-project-menu-item"
+				/>
+			</ElMenu>
+			<template #content>
+				<i18n-t keypath="projects.create.limitReached">
+					<template #planName>{{ props.planName }}</template>
+					<template #limit>
+						{{
+							locale.baseText('projects.create.limit', {
+								adjustToNumber: projectsStore.teamProjectsLimit,
+								interpolate: { num: String(projectsStore.teamProjectsLimit) },
+							})
+						}}
+					</template>
+					<template #link>
+						<a :class="$style.upgradeLink" href="#" @click="goToUpgrade">
+							{{ locale.baseText('projects.create.limitReached.link') }}
+						</a>
+					</template>
+				</i18n-t>
+			</template>
+		</N8nTooltip>
+		<hr
+			v-if="
+				displayProjects.length ||
+				(projectsStore.hasPermissionToCreateProjects && projectsStore.teamProjectsAvailable)
+			"
+			class="mt-m mb-m"
+		/>
+	</div>
+</template>
+
+<style lang="scss" module>
+.projects {
+	display: grid;
+	grid-auto-rows: auto;
+	width: 100%;
+	overflow: hidden;
+	align-items: start;
+}
+
+.projectItems {
+	height: 100%;
+	padding: 0 var(--spacing-xs) var(--spacing-s);
+	overflow: auto;
+}
+
+.upgradeLink {
+	color: var(--color-primary);
+	cursor: pointer;
+}
+</style>
+
+<style lang="scss" scoped>
+.home {
+	padding: 0 var(--spacing-xs);
+
+	:deep(.el-menu-item) {
+		padding: var(--spacing-m) var(--spacing-xs) !important;
+	}
+}
+</style>