From dc17cf3a490ea0dc0a3612f41a7d35e2723c15f9 Mon Sep 17 00:00:00 2001
From: Danny Martini <danny@n8n.io>
Date: Wed, 12 Jun 2024 13:06:05 +0200
Subject: [PATCH] fix(editor): Render credentials editable when opening them
 from the node view (#9678)

---
 cypress/e2e/2-credentials.cy.ts               | 19 +++++++++++++++++++
 .../CredentialEdit/CredentialEdit.vue         | 17 +++++++----------
 .../CredentialEdit/CredentialSharing.ee.vue   |  8 ++++++--
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/cypress/e2e/2-credentials.cy.ts b/cypress/e2e/2-credentials.cy.ts
index a9f710bf7c3e2..c96a792218423 100644
--- a/cypress/e2e/2-credentials.cy.ts
+++ b/cypress/e2e/2-credentials.cy.ts
@@ -21,6 +21,7 @@ const workflowPage = new WorkflowPage();
 const nodeDetailsView = new NDV();
 
 const NEW_CREDENTIAL_NAME = 'Something else';
+const NEW_CREDENTIAL_NAME2 = 'Something else entirely';
 
 describe('Credentials', () => {
 	beforeEach(() => {
@@ -180,6 +181,24 @@ describe('Credentials', () => {
 			.nodeCredentialsSelect()
 			.find('input')
 			.should('have.value', NEW_CREDENTIAL_NAME);
+
+		// Reload page to make sure this also works when the credential hasn't been
+		// just created.
+		nodeDetailsView.actions.close();
+		workflowPage.actions.saveWorkflowOnButtonClick();
+		cy.reload();
+		workflowPage.getters.canvasNodes().last().click();
+		cy.get('body').type('{enter}');
+		workflowPage.getters.nodeCredentialsEditButton().click();
+		credentialsModal.getters.credentialsEditModal().should('be.visible');
+		credentialsModal.getters.name().click();
+		credentialsModal.actions.renameCredential(NEW_CREDENTIAL_NAME2);
+		credentialsModal.getters.saveButton().click();
+		credentialsModal.getters.closeButton().click();
+		workflowPage.getters
+			.nodeCredentialsSelect()
+			.find('input')
+			.should('have.value', NEW_CREDENTIAL_NAME2);
 	});
 
 	it('should setup generic authentication for HTTP node', () => {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index c19133e3dee1e..0d7167d33d248 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -118,7 +118,7 @@
 import { mapStores } from 'pinia';
 import { defineComponent, type PropType } from 'vue';
 
-import type { ICredentialsResponse, IUser } from '@/Interface';
+import type { ICredentialsDecryptedResponse, ICredentialsResponse, IUser } from '@/Interface';
 
 import type {
 	CredentialInformation,
@@ -215,6 +215,7 @@ export default defineComponent({
 			credentialId: '',
 			credentialName: '',
 			credentialData: {} as ICredentialDataDecryptedObject,
+			currentCredential: null as ICredentialsResponse | ICredentialsDecryptedResponse | null,
 			modalBus: createEventBus(),
 			isDeleting: false,
 			isSaving: false,
@@ -277,13 +278,6 @@ export default defineComponent({
 		currentUser(): IUser | null {
 			return this.usersStore.currentUser;
 		},
-		currentCredential(): ICredentialsResponse | null {
-			if (!this.credentialId) {
-				return null;
-			}
-
-			return this.credentialsStore.getCredentialById(this.credentialId);
-		},
 		credentialTypeName(): string | null {
 			if (this.mode === 'edit') {
 				if (this.currentCredential) {
@@ -643,9 +637,9 @@ export default defineComponent({
 			this.credentialId = (this.activeId ?? '') as string;
 
 			try {
-				const currentCredentials = (await this.credentialsStore.getCredentialData({
+				const currentCredentials = await this.credentialsStore.getCredentialData({
 					id: this.credentialId,
-				})) as unknown as ICredentialDataDecryptedObject;
+				});
 
 				if (!currentCredentials) {
 					throw new Error(
@@ -655,6 +649,8 @@ export default defineComponent({
 					);
 				}
 
+				this.currentCredential = currentCredentials;
+
 				this.credentialData = (currentCredentials.data as ICredentialDataDecryptedObject) || {};
 				if (currentCredentials.sharedWithProjects) {
 					this.credentialData = {
@@ -875,6 +871,7 @@ export default defineComponent({
 			this.isSaving = false;
 			if (credential) {
 				this.credentialId = credential.id;
+				this.currentCredential = credential;
 
 				if (this.isCredentialTestable) {
 					this.isTesting = true;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index 7c3381b9cce29..69b3f8a79b2a4 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -72,7 +72,11 @@
 </template>
 
 <script lang="ts">
-import type { ICredentialsResponse, IUserListAction } from '@/Interface';
+import type {
+	ICredentialsResponse,
+	ICredentialsDecryptedResponse,
+	IUserListAction,
+} from '@/Interface';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import { useMessage } from '@/composables/useMessage';
@@ -101,7 +105,7 @@ export default defineComponent({
 	},
 	props: {
 		credential: {
-			type: Object as PropType<ICredentialsResponse | null>,
+			type: Object as PropType<ICredentialsResponse | ICredentialsDecryptedResponse | null>,
 			default: null,
 		},
 		credentialId: {