feat: RBAC (#8922)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Val <68596159+valya@users.noreply.github.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Valya Bullions <valya@n8n.io>
Co-authored-by: Danny Martini <danny@n8n.io>
Co-authored-by: Danny Martini <despair.blue@gmail.com>
Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
Co-authored-by: oleg <me@olegivaniv.com>
Co-authored-by: Michael Kret <michael.k@radency.com>
Co-authored-by: Michael Kret <88898367+michael-radency@users.noreply.github.com>
Co-authored-by: Elias Meire <elias@meire.dev>
Co-authored-by: Giulio Andreini <andreini@netseven.it>
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: Ayato Hayashi <go12limchangyong@gmail.com>

packages/editor-ui/src/views/CredentialsView.vue

@@ -10,6 +10,22 @@
 		@click:add="addCredential"
 		@update:filters="filters = $event"
 	>
+		<template #header>
+			<ProjectTabs />
+		</template>
+		<template #add-button="{ disabled }">
+			<div>
+				<n8n-button
+					size="large"
+					block
+					:disabled="disabled"
+					data-test-id="resources-list-add"
+					@click="addCredential"
+				>
+					{{ addCredentialButtonText }}
+				</n8n-button>
+			</div>
+		</template>
 		<template #default="{ data }">
 			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
 		</template>
@@ -53,11 +69,12 @@ import type { ICredentialType } from 'n8n-workflow';
 import { CREDENTIAL_SELECT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui.store';
-import { useUsersStore } from '@/stores/users.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useProjectsStore } from '@/features/projects/projects.store';
+import ProjectTabs from '@/features/projects/components/ProjectTabs.vue';
 import useEnvironmentsStore from '@/stores/environments.ee.store';
 import { useSettingsStore } from '@/stores/settings.store';
 
@@ -68,13 +85,13 @@ export default defineComponent({
 	components: {
 		ResourcesListLayout,
 		CredentialCard,
+		ProjectTabs,
 	},
 	data() {
 		return {
 			filters: {
 				search: '',
-				ownedBy: '',
-				sharedWith: '',
+				homeProject: '',
 				type: '',
 			},
 			sourceControlStoreUnsubscribe: () => {},
@@ -85,9 +102,9 @@ export default defineComponent({
 			useCredentialsStore,
 			useNodeTypesStore,
 			useUIStore,
-			useUsersStore,
 			useSourceControlStore,
 			useExternalSecretsStore,
+			useProjectsStore,
 		),
 		allCredentials(): ICredentialsResponse[] {
 			return this.credentialsStore.allCredentials;
@@ -98,11 +115,19 @@ export default defineComponent({
 		credentialTypesById(): ICredentialTypeMap {
 			return this.credentialsStore.credentialTypesById;
 		},
+		addCredentialButtonText() {
+			return this.projectsStore.currentProject
+				? this.$locale.baseText('credentials.project.add')
+				: this.$locale.baseText('credentials.add');
+		},
 	},
 	watch: {
 		'filters.type'() {
 			this.sendFiltersTelemetry('type');
 		},
+		'$route.params.projectId'() {
+			void this.initialize();
+		},
 	},
 	mounted() {
 		this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
@@ -130,7 +155,9 @@ export default defineComponent({
 			);
 
 			const loadPromises = [
-				this.credentialsStore.fetchAllCredentials(),
+				this.credentialsStore.fetchAllCredentials(
+					this.$route?.params?.projectId as string | undefined,
+				),
 				this.credentialsStore.fetchCredentialTypes(false),
 				this.externalSecretsStore.fetchAllSecrets(),
 				this.nodeTypesStore.loadNodeTypesIfNotLoaded(),
@@ -138,8 +165,6 @@ export default defineComponent({
 			];
 
 			await Promise.all(loadPromises);
-
-			await this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
 		},
 		onFilter(
 			resource: ICredentialsResponse,