fix: When editing nodes only show the credentials in the dropdown that the user is allowed to use in that workflow (#9718)

packages/editor-ui/src/api/credentials.ts

@@ -36,6 +36,15 @@ export async function getAllCredentials(
 	});
 }
 
+export async function getAllCredentialsForWorkflow(
+	context: IRestApiContext,
+	options: { workflowId: string } | { projectId: string },
+): Promise<ICredentialsResponse[]> {
+	return await makeRestApiRequest(context, 'GET', '/credentials/for-workflow', {
+		...options,
+	});
+}
+
 export async function createNewCredential(
 	context: IRestApiContext,
 	data: ICredentialsDecrypted,

packages/editor-ui/src/components/Projects/ProjectSettings.vue

@@ -262,6 +262,7 @@ onBeforeMount(async () => {
 					v-model="formData.name"
 					type="text"
 					name="name"
+					data-test-id="project-settings-name-input"
 					@input="onNameInput"
 				/>
 			</fieldset>

packages/editor-ui/src/stores/credentials.store.ts

@@ -11,6 +11,7 @@ import {
 	createNewCredential,
 	deleteCredential,
 	getAllCredentials,
+	getAllCredentialsForWorkflow,
 	getCredentialData,
 	getCredentialsNewName,
 	getCredentialTypes,
@@ -262,6 +263,15 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 			this.setCredentials(credentials);
 			return credentials;
 		},
+		async fetchAllCredentialsForWorkflow(
+			options: { workflowId: string } | { projectId: string },
+		): Promise<ICredentialsResponse[]> {
+			const rootStore = useRootStore();
+
+			const credentials = await getAllCredentialsForWorkflow(rootStore.getRestApiContext, options);
+			this.setCredentials(credentials);
+			return credentials;
+		},
 		async getCredentialData({
 			id,
 		}: {

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

@@ -398,7 +398,6 @@ import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRunWorkflow } from '@/composables/useRunWorkflow';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { ProjectSharingData } from '@/types/projects.types';
-import { ProjectTypes } from '@/types/projects.types';
 import { useAIStore } from '@/stores/ai.store';
 import { useStorage } from '@/composables/useStorage';
 import { isJSPlumbEndpointElement, isJSPlumbConnection } from '@/utils/typeGuards';
@@ -4798,20 +4797,26 @@ export default defineComponent({
 		},
 		async loadCredentials(): Promise<void> {
 			const workflow = this.workflowsStore.getWorkflowById(this.currentWorkflow);
-			let projectId: string | undefined;
+			let options: { workflowId: string } | { projectId: string };
+
 			if (workflow) {
-				projectId =
-					workflow.homeProject?.type === ProjectTypes.Personal
-						? this.projectsStore.personalProject?.id
-						: workflow?.homeProject?.id ?? this.projectsStore.currentProjectId;
+				options = { workflowId: workflow.id };
 			} else {
 				const queryParam =
 					typeof this.$route.query?.projectId === 'string'
 						? this.$route.query?.projectId
 						: undefined;
-				projectId = queryParam ?? this.projectsStore.personalProject?.id;
+				const projectId = queryParam ?? this.projectsStore.personalProject?.id;
+
+				if (projectId === undefined) {
+					throw new Error(
+						'Could not find projectId in the query nor could I find the personal project in the project store',
+					);
+				}
+
+				options = { projectId };
 			}
-			await this.credentialsStore.fetchAllCredentials(projectId, false);
+			await this.credentialsStore.fetchAllCredentialsForWorkflow(options);
 		},
 		async loadVariables(): Promise<void> {
 			await this.environmentsStore.fetchAllVariables();