fix: Fix foreign credentials being shown for new nodes (#4622)

* feat: Extract usedCredentials into separate store entry and fix foreign credentials being shown for new nodes

* chore: adjust spacing

packages/editor-ui/src/Interface.ts

@@ -904,6 +904,13 @@ export interface INodeMetadata {
 	parametersLastUpdatedAt?: number;
 }
 
+export interface IUsedCredential {
+	id: string;
+	name: string;
+	credentialType: string;
+	currentUserHasAccess: boolean;
+}
+
 export interface WorkflowsState {
 	activeExecutions: IExecutionsCurrentSummaryExtended[];
 	activeWorkflows: string[];
@@ -915,6 +922,7 @@ export interface WorkflowsState {
 	finishedExecutionsCount: number;
 	nodeMetadata: NodeMetadataMap;
 	subWorkflowExecutionError: Error | null;
+	usedCredentials: Record<string, IUsedCredential>;
 	workflow: IWorkflowDb;
 	workflowExecutionData: IExecutionResponse | null;
 	workflowExecutionPairedItemMappings: {[itemId: string]: Set<string>};

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -370,12 +370,12 @@ export default mixins(
 		},
 		hasForeignCredential(): boolean {
 			const credentials = (this.activeNode || {}).credentials;
-			const foreignCredentials = this.credentialsStore.foreignCredentialsById;
+			const usedCredentials = this.workflowsStore.usedCredentials;
 
 			let hasForeignCredential = false;
 			if (credentials && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)) {
 				Object.values(credentials).forEach((credential) => {
-					if (credential.id && foreignCredentials[credential.id] && !foreignCredentials[credential.id].currentUserHasAccess) {
+					if (credential.id && usedCredentials[credential.id] && !usedCredentials[credential.id].currentUserHasAccess) {
 						hasForeignCredential = true;
 					}
 				});

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

@@ -49,9 +49,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		getCredentialById() {
 			return (id: string): ICredentialsResponse => this.credentials[id];
 		},
-		foreignCredentialsById(): ICredentialMap {
-			return Object.fromEntries(Object.entries(this.credentials).filter(([_, credential]) => credential.hasOwnProperty('currentUserHasAccess')));
-		},
 		getCredentialByIdAndType() {
 			return (id: string, type: string): ICredentialsResponse | undefined => {
 				const credential = this.credentials[id];
@@ -226,7 +223,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 
 			return credential;
 		},
-		async deleteCredential({ id }: {id: string}): void {
+		async deleteCredential({ id }: {id: string}) {
 			const rootStore = useRootStore();
 			const deleted = await deleteCredential(rootStore.getRestApiContext, id);
 			if (deleted) {
@@ -263,10 +260,10 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 		},
 
 		// Enterprise edition actions
-		setCredentialOwnedBy(payload: { credentialId: string, ownedBy: Partial<IUser> }): void {
+		setCredentialOwnedBy(payload: { credentialId: string, ownedBy: Partial<IUser> }) {
 			Vue.set(this.credentials[payload.credentialId], 'ownedBy', payload.ownedBy);
 		},
-		async setCredentialSharedWith(payload: { sharedWith: IUser[]; credentialId: string; }): void {
+		async setCredentialSharedWith(payload: { sharedWith: IUser[]; credentialId: string; }) {
 			if(useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 				await setCredentialSharedWith(
 					useRootStore().getRestApiContext,

packages/editor-ui/src/stores/workflows.ts

@@ -7,6 +7,7 @@ import {
 	STORES,
 } from "@/constants";
 import {
+	ICredentialMap,
 	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
 	IExecutionsSummary,
@@ -16,6 +17,7 @@ import {
 	IPushDataExecutionFinished,
 	IPushDataNodeExecuteAfter,
 	IUpdateInformation,
+	IUsedCredential,
 	IWorkflowDb,
 	IWorkflowsMap,
 	WorkflowsState,
@@ -37,6 +39,7 @@ import {
 	IWorkflowSettings,
 } from 'n8n-workflow';
 import Vue from "vue";
+
 import {useRootStore} from "./n8nRootStore";
 import {
 	getActiveWorkflows,
@@ -73,6 +76,7 @@ const createEmptyWorkflow = (): IWorkflowDb => ({
 export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 	state: (): WorkflowsState => ({
 		workflow: createEmptyWorkflow(),
+		usedCredentials: {},
 		activeWorkflows: [],
 		activeExecutions: [],
 		currentWorkflowExecutions: [],
@@ -266,6 +270,13 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			this.workflow.id = id === 'new' ? PLACEHOLDER_EMPTY_WORKFLOW_ID : id;
 		},
 
+		setUsedCredentials(data: IUsedCredential[]) {
+			this.usedCredentials = data.reduce<{ [name: string]: IUsedCredential }>((accu, credential) => {
+				accu[credential.id!] = credential;
+				return accu;
+			}, {});
+		},
+
 		setWorkflowName(data: { newName: string, setStateDirty: boolean }): void {
 			if (data.setStateDirty === true) {
 				const uiStore = useUIStore();

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

@@ -870,7 +870,7 @@ export default mixins(
 				}
 
 				if (data.usedCredentials) {
-					this.credentialsStore.addCredentials(data.usedCredentials);
+					this.workflowsStore.setUsedCredentials(data.usedCredentials);
 				}
 
 				const tags = (data.tags || []) as ITag[];
@@ -2409,10 +2409,10 @@ export default mixins(
 					}
 
 					if (newNodeData.credentials && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.WorkflowSharing)) {
-						const foreignCredentials = this.credentialsStore.foreignCredentialsById;
+						const usedCredentials = this.workflowsStore.usedCredentials;
 						newNodeData.credentials = Object.fromEntries(
 							Object.entries(newNodeData.credentials).filter(([_, credential]) => {
-								return credential.id && (!foreignCredentials[credential.id] || foreignCredentials[credential.id]?.currentUserHasAccess);
+								return credential.id && (!usedCredentials[credential.id] || usedCredentials[credential.id]?.currentUserHasAccess);
 							}),
 						);
 					}