From b2f8ea7918d7e10e91db0e04ef5b7ad40a5bdbb5 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Wed, 3 Jul 2024 14:18:47 +0200
Subject: [PATCH] feat(editor): Add docs sidebar to credential modal (#9914)

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>
---
 .../CredentialEdit/CredentialConfig.vue       |  697 ++++---
 .../CredentialEdit/CredentialDocs.vue         |  160 ++
 .../CredentialEdit/CredentialEdit.vue         | 1783 ++++++++---------
 .../src/components/CredentialEdit/docs.ts     |    7 +
 .../editor-ui/src/components/Feedback.vue     |    6 +-
 .../src/plugins/i18n/locales/en.json          |    5 +
 6 files changed, 1385 insertions(+), 1273 deletions(-)
 create mode 100644 packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
 create mode 100644 packages/editor-ui/src/components/CredentialEdit/docs.ts

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index afe70638b75c9..a2de471f7f0c4 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -1,396 +1,373 @@
 <template>
-	<div :class="$style.container" data-test-id="node-credentials-config-container">
-		<Banner
-			v-show="showValidationWarning"
-			theme="danger"
-			:message="
-				$locale.baseText(
-					`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
-						credentialPermissions.update ? '' : '.sharee'
-					}`,
-					{ interpolate: { owner: credentialOwnerName } },
-				)
-			"
-		/>
-
-		<Banner
-			v-if="authError && !showValidationWarning"
-			theme="danger"
-			:message="
-				$locale.baseText(
-					`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
-						credentialPermissions.update ? '' : '.sharee'
-					}`,
-					{ interpolate: { owner: credentialOwnerName } },
-				)
-			"
-			:details="authError"
-			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			button-loading-label="Retrying"
-			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:button-loading="isRetesting"
-			@click="$emit('retest')"
-		/>
-
-		<Banner
-			v-show="showOAuthSuccessBanner && !showValidationWarning"
-			theme="success"
-			:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
-			:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
-			:button-title="$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')"
-			data-test-id="oauth-connect-success-banner"
-			@click="$emit('oauth')"
-		>
-			<template v-if="isGoogleOAuthType" #button>
-				<p
-					:class="$style.googleReconnectLabel"
-					v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
-				/>
-				<GoogleAuthButton @click="$emit('oauth')" />
-			</template>
-		</Banner>
-
-		<Banner
-			v-show="testedSuccessfully && !showValidationWarning"
-			theme="success"
-			:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
-			:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-			:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
-			:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-			:button-loading="isRetesting"
-			data-test-id="credentials-config-container-test-success"
-			@click="$emit('retest')"
-		/>
-
-		<template v-if="credentialPermissions.update">
-			<n8n-notice v-if="documentationUrl && credentialProperties.length" theme="warning">
-				{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
-				<span class="ml-4xs">
-					<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
-						{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
-					</n8n-link>
-				</span>
-			</n8n-notice>
-
-			<AuthTypeSelector
-				v-if="showAuthTypeSelector && isNewCredential"
-				:credential-type="credentialType"
-				@auth-type-changed="onAuthTypeChange"
+	<div>
+		<div :class="$style.config" data-test-id="node-credentials-config-container">
+			<Banner
+				v-show="showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
+				"
 			/>
 
-			<CopyInput
-				v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
-				:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
-				:value="oAuthCallbackUrl"
-				:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
-				:hint="
-					$locale.baseText('credentialEdit.credentialConfig.subtitle', { interpolate: { appName } })
+			<Banner
+				v-if="authError && !showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
 				"
-				:toast-title="
-					$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
+				:details="authError"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				button-loading-label="Retrying"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				@click="$emit('retest')"
+			/>
+
+			<Banner
+				v-show="showOAuthSuccessBanner && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
+				:button-title="
+					$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')
 				"
-				:redact-value="true"
+				data-test-id="oauth-connect-success-banner"
+				@click="$emit('oauth')"
+			>
+				<template v-if="isGoogleOAuthType" #button>
+					<p
+						:class="$style.googleReconnectLabel"
+						v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
+					/>
+					<GoogleAuthButton @click="$emit('oauth')" />
+				</template>
+			</Banner>
+
+			<Banner
+				v-show="testedSuccessfully && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				data-test-id="credentials-config-container-test-success"
+				@click="$emit('retest')"
 			/>
-		</template>
-		<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
-			<div>
-				<n8n-info-tip :bold="false">
-					{{
-						$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
-							interpolate: { credentialOwnerName },
+
+			<template v-if="credentialPermissions.update">
+				<n8n-notice v-if="documentationUrl && credentialProperties.length && !docs" theme="warning">
+					{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
+					<span class="ml-4xs">
+						<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
+							{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
+						</n8n-link>
+					</span>
+				</n8n-notice>
+
+				<AuthTypeSelector
+					v-if="showAuthTypeSelector && isNewCredential"
+					:credential-type="credentialType"
+					@auth-type-changed="onAuthTypeChange"
+				/>
+
+				<CopyInput
+					v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
+					:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
+					:value="oAuthCallbackUrl"
+					:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
+					:hint="
+						$locale.baseText('credentialEdit.credentialConfig.subtitle', {
+							interpolate: { appName },
 						})
-					}}
-				</n8n-info-tip>
-			</div>
-		</EnterpriseEdition>
-
-		<CredentialInputs
-			v-if="credentialType && credentialPermissions.update"
-			:credential-data="credentialData"
-			:credential-properties="credentialProperties"
-			:documentation-url="documentationUrl"
-			:show-validation-warnings="showValidationWarning"
-			@update="onDataChange"
-		/>
-
-		<OauthButton
-			v-if="
-				isOAuthType && requiredPropertiesFilled && !isOAuthConnected && credentialPermissions.update
-			"
-			:is-google-o-auth-type="isGoogleOAuthType"
-			data-test-id="oauth-connect-button"
-			@click="$emit('oauth')"
-		/>
-
-		<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
-			{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
-		</n8n-text>
-
-		<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
-			<template #fallback>
-				<n8n-info-tip class="mt-s">
-					{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
-					<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
-						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
-					</n8n-link>
-				</n8n-info-tip>
+					"
+					:toast-title="
+						$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
+					"
+					:redact-value="true"
+				/>
 			</template>
-		</EnterpriseEdition>
+			<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
+				<div>
+					<n8n-info-tip :bold="false">
+						{{
+							$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
+								interpolate: { credentialOwnerName },
+							})
+						}}
+					</n8n-info-tip>
+				</div>
+			</EnterpriseEdition>
+
+			<CredentialInputs
+				v-if="credentialType && credentialPermissions.update"
+				:credential-data="credentialData"
+				:credential-properties="credentialProperties"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarning"
+				@update="onDataChange"
+			/>
+
+			<OauthButton
+				v-if="
+					isOAuthType &&
+					requiredPropertiesFilled &&
+					!isOAuthConnected &&
+					credentialPermissions.update
+				"
+				:is-google-o-auth-type="isGoogleOAuthType"
+				data-test-id="oauth-connect-button"
+				@click="$emit('oauth')"
+			/>
+
+			<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
+				{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
+			</n8n-text>
+
+			<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
+				<template #fallback>
+					<n8n-info-tip class="mt-s">
+						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
+						<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
+							{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</template>
+			</EnterpriseEdition>
+		</div>
+		<CredentialDocs
+			v-if="docs"
+			:credential-type="credentialType"
+			:documentation-url="documentationUrl"
+			:docs="docs"
+			:class="$style.docs"
+		>
+		</CredentialDocs>
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
+import { computed, onBeforeMount, watch } from 'vue';
 
+import { getAppNameFromCredType, isCommunityPackageName } from '@/utils/nodeTypesUtils';
 import type {
 	ICredentialDataDecryptedObject,
 	ICredentialType,
 	INodeProperties,
-	INodeTypeDescription,
 } from 'n8n-workflow';
-import { getAppNameFromCredType, isCommunityPackageName } from '@/utils/nodeTypesUtils';
 
-import Banner from '../Banner.vue';
-import CopyInput from '../CopyInput.vue';
-import CredentialInputs from './CredentialInputs.vue';
-import OauthButton from './OauthButton.vue';
-import { addCredentialTranslation } from '@/plugins/i18n';
+import type { IUpdateInformation } from '@/Interface';
+import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
+import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
 import { BUILTIN_CREDENTIALS_DOCS_URL, DOCS_DOMAIN, EnterpriseEditionFeature } from '@/constants';
 import type { PermissionsMap } from '@/permissions';
-import type { CredentialScope } from '@n8n/permissions';
+import { addCredentialTranslation } from '@/plugins/i18n';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useRootStore } from '@/stores/root.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useRootStore } from '@/stores/root.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import { useCredentialsStore } from '@/stores/credentials.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import type { ICredentialsResponse, IUpdateInformation } from '@/Interface';
-import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
+import type { CredentialScope } from '@n8n/permissions';
+import Banner from '../Banner.vue';
+import CopyInput from '../CopyInput.vue';
+import CredentialInputs from './CredentialInputs.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
-import EnterpriseEdition from '@/components/EnterpriseEdition.ee.vue';
+import OauthButton from './OauthButton.vue';
+import CredentialDocs from './CredentialDocs.vue';
+import { CREDENTIAL_MARKDOWN_DOCS } from './docs';
 
-export default defineComponent({
-	name: 'CredentialConfig',
-	components: {
-		EnterpriseEdition,
-		AuthTypeSelector,
-		Banner,
-		CopyInput,
-		CredentialInputs,
-		OauthButton,
-		GoogleAuthButton,
-	},
-	props: {
-		credentialType: {
-			type: Object as PropType<ICredentialType>,
-			required: true,
-		},
-		credentialProperties: {
-			type: Array as PropType<INodeProperties[]>,
-			required: true,
-		},
-		parentTypes: {
-			type: Array as PropType<string[]>,
-			default: () => [],
-		},
-		credentialData: {
-			type: Object as PropType<ICredentialDataDecryptedObject>,
-			required: true,
-		},
-		credentialId: {
-			type: String,
-			default: '',
-		},
-		showValidationWarning: {
-			type: Boolean,
-			default: false,
-		},
-		authError: {
-			type: String,
-		},
-		testedSuccessfully: {
-			type: Boolean,
-		},
-		isOAuthType: {
-			type: Boolean,
-		},
-		allOAuth2BasePropertiesOverridden: {
-			type: Boolean,
-		},
-		isOAuthConnected: {
-			type: Boolean,
-		},
-		isRetesting: {
-			type: Boolean,
-		},
-		credentialPermissions: {
-			type: Object as PropType<PermissionsMap<CredentialScope>>,
-			default: () => ({}) as PermissionsMap<CredentialScope>,
-		},
-		requiredPropertiesFilled: {
-			type: Boolean,
-		},
-		mode: {
-			type: String,
-			required: true,
-		},
-		showAuthTypeSelector: {
-			type: Boolean,
-		},
-	},
-	data() {
-		return {
-			EnterpriseEditionFeature,
-		};
-	},
-	async beforeMount() {
-		if (this.rootStore.defaultLocale === 'en') return;
-
-		this.uiStore.activeCredentialType = this.credentialType.name;
-
-		const key = `n8n-nodes-base.credentials.${this.credentialType.name}`;
-
-		if (this.$locale.exists(key)) return;
-
-		const credTranslation = await this.credentialsStore.getCredentialTranslation(
-			this.credentialType.name,
-		);
-
-		addCredentialTranslation(
-			{ [this.credentialType.name]: credTranslation },
-			this.rootStore.defaultLocale,
-		);
-	},
-	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNDVStore,
-			useNodeTypesStore,
-			useRootStore,
-			useUIStore,
-			useWorkflowsStore,
-		),
-		activeNodeType(): INodeTypeDescription | null {
-			const activeNode = this.ndvStore.activeNode;
-
-			if (activeNode) {
-				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
-			}
-			return null;
-		},
-		appName(): string {
-			if (!this.credentialType) {
-				return '';
-			}
-
-			const appName = getAppNameFromCredType(this.credentialType.displayName);
-
-			return (
-				appName ||
-				this.$locale.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo')
-			);
-		},
-		credentialTypeName(): string {
-			return this.credentialType?.name;
-		},
-		credentialOwnerName(): string {
-			return this.credentialsStore.getCredentialOwnerNameById(`${this.credentialId}`);
-		},
-		documentationUrl(): string {
-			const type = this.credentialType;
-			const activeNode = this.ndvStore.activeNode;
-			const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
-
-			const documentationUrl = type?.documentationUrl;
-
-			if (!documentationUrl) {
-				return '';
-			}
-
-			let url: URL;
-			if (documentationUrl.startsWith('https://') || documentationUrl.startsWith('http://')) {
-				url = new URL(documentationUrl);
-				if (url.hostname !== DOCS_DOMAIN) return documentationUrl;
-			} else {
-				// Don't show documentation link for community nodes if the URL is not an absolute path
-				if (isCommunityNode) return '';
-				else url = new URL(`${BUILTIN_CREDENTIALS_DOCS_URL}${documentationUrl}/`);
-			}
-
-			if (url.hostname === DOCS_DOMAIN) {
-				url.searchParams.set('utm_source', 'n8n_app');
-				url.searchParams.set('utm_medium', 'credential_settings');
-				url.searchParams.set('utm_campaign', 'create_new_credentials_modal');
-			}
-
-			return url.href;
-		},
-		isGoogleOAuthType(): boolean {
-			return (
-				this.credentialTypeName === 'googleOAuth2Api' ||
-				this.parentTypes.includes('googleOAuth2Api')
-			);
-		},
-		oAuthCallbackUrl(): string {
-			const oauthType =
-				this.credentialTypeName === 'oAuth2Api' || this.parentTypes.includes('oAuth2Api')
-					? 'oauth2'
-					: 'oauth1';
-			return this.rootStore.OAuthCallbackUrls[oauthType as keyof {}];
-		},
-		showOAuthSuccessBanner(): boolean {
-			return (
-				this.isOAuthType &&
-				this.requiredPropertiesFilled &&
-				this.isOAuthConnected &&
-				!this.authError
-			);
-		},
-		isMissingCredentials(): boolean {
-			return this.credentialType === null;
-		},
-		isNewCredential(): boolean {
-			return this.mode === 'new' && !this.credentialId;
-		},
-	},
-	methods: {
-		getCredentialOptions(type: string): ICredentialsResponse[] {
-			return this.credentialsStore.allUsableCredentialsByType[type];
-		},
-		onDataChange(event: IUpdateInformation): void {
-			this.$emit('update', event);
-		},
-		onDocumentationUrlClick(): void {
-			this.$telemetry.track('User clicked credential modal docs link', {
-				docs_link: this.documentationUrl,
-				credential_type: this.credentialTypeName,
-				source: 'modal',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-		onAuthTypeChange(newType: string): void {
-			this.$emit('authTypeChanged', newType);
-		},
-	},
-	watch: {
-		showOAuthSuccessBanner(newValue, oldValue) {
-			if (newValue && !oldValue) {
-				this.$emit('scrollToTop');
-			}
-		},
-	},
+type Props = {
+	mode: string;
+	credentialType: ICredentialType;
+	credentialProperties: INodeProperties[];
+	credentialData: ICredentialDataDecryptedObject;
+	credentialId?: string;
+	credentialPermissions?: PermissionsMap<CredentialScope>;
+	parentTypes?: string[];
+	showValidationWarning?: boolean;
+	authError?: string;
+	testedSuccessfully?: boolean;
+	isOAuthType?: boolean;
+	allOAuth2BasePropertiesOverridden?: boolean;
+	isOAuthConnected?: boolean;
+	isRetesting?: boolean;
+	requiredPropertiesFilled?: boolean;
+	showAuthTypeSelector?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	parentTypes: () => [],
+	credentialId: '',
+	authError: '',
+	showValidationWarning: false,
+	credentialPermissions: () => ({}) as PermissionsMap<CredentialScope>,
+});
+const emit = defineEmits<{
+	(event: 'update', value: IUpdateInformation): void;
+	(event: 'authTypeChanged', value: string): void;
+	(event: 'scrollToTop'): void;
+	(event: 'retest'): void;
+	(event: 'oauth'): void;
+}>();
+
+const credentialsStore = useCredentialsStore();
+const ndvStore = useNDVStore();
+const rootStore = useRootStore();
+const uiStore = useUIStore();
+const workflowsStore = useWorkflowsStore();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+onBeforeMount(async () => {
+	if (rootStore.defaultLocale === 'en') return;
+
+	uiStore.activeCredentialType = props.credentialType.name;
+
+	const key = `n8n-nodes-base.credentials.${props.credentialType.name}`;
+
+	if (i18n.exists(key)) return;
+
+	const credTranslation = await credentialsStore.getCredentialTranslation(
+		props.credentialType.name,
+	);
+
+	addCredentialTranslation(
+		{ [props.credentialType.name]: credTranslation },
+		rootStore.defaultLocale,
+	);
+});
+
+const appName = computed(() => {
+	if (!props.credentialType) {
+		return '';
+	}
+
+	return (
+		getAppNameFromCredType(props.credentialType.displayName) ||
+		i18n.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo')
+	);
+});
+const credentialTypeName = computed(() => props.credentialType?.name);
+const credentialOwnerName = computed(() =>
+	credentialsStore.getCredentialOwnerNameById(`${props.credentialId}`),
+);
+const documentationUrl = computed(() => {
+	const type = props.credentialType;
+	const activeNode = ndvStore.activeNode;
+	const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
+
+	const docUrl = type?.documentationUrl;
+
+	if (!docUrl) {
+		return '';
+	}
+
+	let url: URL;
+	if (docUrl.startsWith('https://') || docUrl.startsWith('http://')) {
+		url = new URL(docUrl);
+		if (url.hostname !== DOCS_DOMAIN) return docUrl;
+	} else {
+		// Don't show documentation link for community nodes if the URL is not an absolute path
+		if (isCommunityNode) return '';
+		else url = new URL(`${BUILTIN_CREDENTIALS_DOCS_URL}${docUrl}/`);
+	}
+
+	if (url.hostname === DOCS_DOMAIN) {
+		url.searchParams.set('utm_source', 'n8n_app');
+		url.searchParams.set('utm_medium', 'credential_settings');
+		url.searchParams.set('utm_campaign', 'create_new_credentials_modal');
+	}
+
+	return url.href;
+});
+
+const isGoogleOAuthType = computed(
+	() =>
+		credentialTypeName.value === 'googleOAuth2Api' || props.parentTypes.includes('googleOAuth2Api'),
+);
+
+const oAuthCallbackUrl = computed(() => {
+	const oauthType =
+		credentialTypeName.value === 'oAuth2Api' || props.parentTypes.includes('oAuth2Api')
+			? 'oauth2'
+			: 'oauth1';
+	return rootStore.OAuthCallbackUrls[oauthType as keyof {}];
+});
+
+const showOAuthSuccessBanner = computed(() => {
+	return (
+		props.isOAuthType &&
+		props.requiredPropertiesFilled &&
+		props.isOAuthConnected &&
+		!props.authError
+	);
+});
+
+const isMissingCredentials = computed(() => props.credentialType === null);
+
+const isNewCredential = computed(() => props.mode === 'new' && !props.credentialId);
+
+const docs = computed(() => CREDENTIAL_MARKDOWN_DOCS[props.credentialType.name]);
+
+function onDataChange(event: IUpdateInformation): void {
+	emit('update', event);
+}
+
+function onDocumentationUrlClick(): void {
+	telemetry.track('User clicked credential modal docs link', {
+		docs_link: documentationUrl.value,
+		credential_type: credentialTypeName.value,
+		source: 'modal',
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+
+function onAuthTypeChange(newType: string): void {
+	emit('authTypeChanged', newType);
+}
+
+watch(showOAuthSuccessBanner, (newValue, oldValue) => {
+	if (newValue && !oldValue) {
+		emit('scrollToTop');
+	}
 });
 </script>
 
 <style lang="scss" module>
-.container {
+.config {
 	--notice-margin: 0;
+	flex-grow: 1;
+
 	> * {
 		margin-bottom: var(--spacing-l);
 	}
+
+	&:has(+ .docs) {
+		padding-right: 320px;
+	}
 }
+
+.docs {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	max-width: 320px;
+}
+
 .googleReconnectLabel {
 	margin-right: var(--spacing-3xs);
 }
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
new file mode 100644
index 0000000000000..18db06c938195
--- /dev/null
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
@@ -0,0 +1,160 @@
+<template>
+	<div :class="$style.docs">
+		<div :class="$style.header">
+			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
+			<n8n-link
+				:class="$style.docsLink"
+				theme="text"
+				new-window
+				:to="documentationUrl"
+				@click="onDocumentationUrlClick"
+			>
+				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
+				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
+			</n8n-link>
+		</div>
+		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
+		<Feedback
+			:class="$style.feedback"
+			:model-value="submittedFeedback"
+			@update:model-value="onFeedback"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Feedback from '@/components/Feedback.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import type { ICredentialType } from 'n8n-workflow';
+import { ref } from 'vue';
+import VueMarkdown from 'vue-markdown-render';
+
+type Props = {
+	credentialType: ICredentialType;
+	docs: string;
+	documentationUrl: string;
+};
+
+const props = defineProps<Props>();
+
+const workflowsStore = useWorkflowsStore();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const submittedFeedback = ref<'positive' | 'negative'>();
+
+function onFeedback(feedback: 'positive' | 'negative') {
+	submittedFeedback.value = feedback;
+	telemetry.track('User gave feedback on credential docs', {
+		feedback,
+		docs_link: props.documentationUrl,
+		credential_type: props.credentialType.name,
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+
+function onDocumentationUrlClick(): void {
+	telemetry.track('User clicked credential modal docs link', {
+		docs_link: props.documentationUrl,
+		credential_type: props.credentialType.name,
+		source: 'modal-docs-sidebar',
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+</script>
+
+<style lang="scss" module>
+.docs {
+	background-color: var(--color-background-light);
+	border-left: var(--border-base);
+	padding: var(--spacing-s);
+	height: 100%;
+	overflow-y: auto;
+}
+
+.title {
+	font-size: var(--font-size-m);
+	font-weight: var(--font-weight-bold);
+}
+
+.header {
+	display: flex;
+	gap: var(--spacing-2xs);
+	justify-content: space-between;
+	align-items: center;
+	border-bottom: var(--border-base);
+	padding-bottom: var(--spacing-s);
+	margin-bottom: var(--spacing-s);
+}
+
+.docsLink {
+	color: var(--color-text-light);
+
+	&:hover .externalIcon {
+		color: var(--color-primary);
+	}
+}
+
+.externalIcon {
+	color: var(--color-text-light);
+	padding-left: var(--spacing-4xs);
+}
+
+.feedback {
+	border-top: var(--border-base);
+	padding-top: var(--spacing-s);
+	margin-top: var(--spacing-s);
+}
+
+.markdown {
+	color: var(--color-text-base);
+	font-size: var(--font-size-xs);
+	line-height: var(--font-line-height-xloose);
+
+	h2 {
+		font-size: var(--font-size-s);
+		color: var(--color-text-base);
+		font-weight: var(--font-weight-bold);
+		margin-top: var(--spacing-s);
+		margin-bottom: var(--spacing-2xs);
+	}
+
+	ul,
+	ol {
+		margin: var(--spacing-2xs) 0;
+		margin-left: var(--spacing-m);
+	}
+
+	ol ol {
+		list-style-type: lower-alpha;
+	}
+
+	li > ul,
+	li > ol {
+		margin: var(--spacing-4xs) 0;
+		margin-left: var(--spacing-xs);
+	}
+
+	li + li {
+		margin-top: var(--spacing-4xs);
+	}
+
+	a {
+		color: var(--color-text-base);
+		text-decoration: underline;
+	}
+
+	p {
+		line-height: var(--font-line-height-xloose);
+		margin-bottom: var(--spacing-2xs);
+	}
+
+	img {
+		width: 100%;
+		padding: var(--spacing-4xs) 0;
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 5fdb78fbd704b..d6cef425a7c8c 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -48,7 +48,6 @@
 					/>
 				</div>
 			</div>
-			<hr />
 		</template>
 		<template #content>
 			<div :class="$style.container" data-test-id="credential-edit-dialog">
@@ -62,7 +61,7 @@
 				</div>
 				<div
 					v-if="activeTab === 'connection' && credentialType"
-					ref="content"
+					ref="contentRef"
 					:class="$style.mainContent"
 				>
 					<CredentialConfig
@@ -114,1060 +113,1022 @@
 	</Modal>
 </template>
 
-<script lang="ts">
-import { mapStores } from 'pinia';
-import { defineComponent, type PropType } from 'vue';
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
 
-import type { ICredentialsDecryptedResponse, ICredentialsResponse, IUser } from '@/Interface';
+import type {
+	ICredentialsDecryptedResponse,
+	ICredentialsResponse,
+	IUpdateInformation,
+} from '@/Interface';
 
+import CredentialIcon from '@/components/CredentialIcon.vue';
 import type {
 	CredentialInformation,
 	ICredentialDataDecryptedObject,
 	ICredentialsDecrypted,
-	ICredentialType,
 	INode,
-	INodeCredentialDescription,
 	INodeParameters,
 	INodeProperties,
-	INodeTypeDescription,
 	ITelemetryTrackProperties,
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
-import CredentialIcon from '@/components/CredentialIcon.vue';
 
-import { useToast } from '@/composables/useToast';
-import { useNodeHelpers } from '@/composables/useNodeHelpers';
-import { useMessage } from '@/composables/useMessage';
 import CredentialConfig from '@/components/CredentialEdit/CredentialConfig.vue';
 import CredentialInfo from '@/components/CredentialEdit/CredentialInfo.vue';
 import CredentialSharing from '@/components/CredentialEdit/CredentialSharing.ee.vue';
-import SaveButton from '@/components/SaveButton.vue';
-import Modal from '@/components/Modal.vue';
+import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import InlineNameEdit from '@/components/InlineNameEdit.vue';
+import Modal from '@/components/Modal.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import { useMessage } from '@/composables/useMessage';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { useToast } from '@/composables/useToast';
 import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
-import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import type { PermissionsMap } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
-import type { IMenuItem } from 'n8n-design-system';
-import { createEventBus } from 'n8n-design-system/utils';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNDVStore } from '@/stores/ndv.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
+import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { ProjectSharingData } from '@/types/projects.types';
 import { assert } from '@/utils/assert';
+import type { IMenuItem } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system/utils';
 
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useProjectsStore } from '@/stores/projects.store';
+import { isExpression, isTestableExpression } from '@/utils/expressions';
 import {
 	getNodeAuthOptions,
 	getNodeCredentialForSelectedAuthType,
 	updateNodeAuthType,
 } from '@/utils/nodeTypesUtils';
-import { isValidCredentialResponse, isCredentialModalState } from '@/utils/typeGuards';
-import { isExpression, isTestableExpression } from '@/utils/expressions';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { useProjectsStore } from '@/stores/projects.store';
+import { isCredentialModalState, isValidCredentialResponse } from '@/utils/typeGuards';
 import type { CredentialScope } from '@n8n/permissions';
 
-export default defineComponent({
-	name: 'CredentialEdit',
-	components: {
-		CredentialSharing,
-		CredentialConfig,
-		CredentialIcon,
-		CredentialInfo,
-		InlineNameEdit,
-		Modal,
-		SaveButton,
-		FeatureComingSoon,
-	},
-	props: {
-		modalName: {
-			type: String,
-			required: true,
-		},
-		activeId: {
-			type: [String, Number],
-			required: false,
-			default: undefined,
-		},
-		mode: {
-			type: String as PropType<'new' | 'edit'>,
-			default: 'new',
-		},
-	},
-	setup() {
-		const nodeHelpers = useNodeHelpers();
-
-		return {
-			externalHooks: useExternalHooks(),
-			...useToast(),
-			...useMessage(),
-			nodeHelpers,
-		};
-	},
-	data() {
-		return {
-			activeTab: 'connection',
-			authError: '',
-			credentialId: '',
-			credentialName: '',
-			credentialData: {} as ICredentialDataDecryptedObject,
-			currentCredential: null as ICredentialsResponse | ICredentialsDecryptedResponse | null,
-			modalBus: createEventBus(),
-			isDeleting: false,
-			isSaving: false,
-			isTesting: false,
-			hasUnsavedChanges: false,
-			loading: true,
-			showValidationWarning: false,
-			testedSuccessfully: false,
-			isRetesting: false,
-			EnterpriseEditionFeature,
-			selectedCredential: '',
-			requiredCredentials: false, // Are credentials required or optional for the node
-			hasUserSpecifiedName: false,
-			isSharedWithChanged: false,
-		};
-	},
-	computed: {
-		...mapStores(
-			useCredentialsStore,
-			useNDVStore,
-			useSettingsStore,
-			useUIStore,
-			useUsersStore,
-			useWorkflowsStore,
-			useNodeTypesStore,
-			useProjectsStore,
-		),
-		activeNodeType(): INodeTypeDescription | null {
-			const activeNode = this.ndvStore.activeNode;
-
-			if (activeNode) {
-				return this.nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
-			}
-			return null;
-		},
-		selectedCredentialType(): INodeCredentialDescription | null {
-			if (this.mode !== 'new') {
-				return null;
-			}
+type Props = {
+	modalName: string;
+	activeId?: string;
+	mode?: 'new' | 'edit';
+};
+
+const props = withDefaults(defineProps<Props>(), { mode: 'new', activeId: undefined });
+
+const credentialsStore = useCredentialsStore();
+const ndvStore = useNDVStore();
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const projectsStore = useProjectsStore();
+
+const nodeHelpers = useNodeHelpers();
+const externalHooks = useExternalHooks();
+const toast = useToast();
+const message = useMessage();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const activeTab = ref('connection');
+const authError = ref('');
+const credentialId = ref('');
+const credentialName = ref('');
+const selectedCredential = ref('');
+const credentialData = ref<ICredentialDataDecryptedObject>({});
+const currentCredential = ref<ICredentialsResponse | ICredentialsDecryptedResponse | null>(null);
+const modalBus = ref(createEventBus());
+const isDeleting = ref(false);
+const isSaving = ref(false);
+const isTesting = ref(false);
+const hasUnsavedChanges = ref(false);
+const loading = ref(false);
+const showValidationWarning = ref(false);
+const testedSuccessfully = ref(false);
+const isRetesting = ref(false);
+const hasUserSpecifiedName = ref(false);
+const isSharedWithChanged = ref(false);
+const requiredCredentials = ref(false); // Are credentials required or optional for the node
+const contentRef = ref<HTMLDivElement>();
+
+const activeNodeType = computed(() => {
+	const activeNode = ndvStore.activeNode;
+
+	if (activeNode) {
+		return nodeTypesStore.getNodeType(activeNode.type, activeNode.typeVersion);
+	}
+	return null;
+});
 
-			// If there is already selected type, use it
-			if (this.selectedCredential !== '') {
-				return this.credentialsStore.getCredentialTypeByName(this.selectedCredential) ?? null;
-			} else if (this.requiredCredentials) {
-				// Otherwise, use credential type that corresponds to the first auth option in the node definition
-				const nodeAuthOptions = getNodeAuthOptions(this.activeNodeType);
-				// But only if there is zero or one auth options available
-				if (nodeAuthOptions.length > 0 && this.activeNodeType?.credentials) {
-					return getNodeCredentialForSelectedAuthType(
-						this.activeNodeType,
-						nodeAuthOptions[0].value,
-					);
-				} else {
-					return this.activeNodeType?.credentials ? this.activeNodeType.credentials[0] : null;
-				}
-			}
+const selectedCredentialType = computed(() => {
+	if (props.mode !== 'new') {
+		return null;
+	}
 
-			return null;
-		},
-		currentUser(): IUser | null {
-			return this.usersStore.currentUser;
-		},
-		credentialTypeName(): string | null {
-			if (this.mode === 'edit') {
-				if (this.currentCredential) {
-					return this.currentCredential.type;
-				}
+	// If there is already selected type, use it
+	if (selectedCredential.value !== '') {
+		return credentialsStore.getCredentialTypeByName(selectedCredential.value) ?? null;
+	} else if (requiredCredentials.value) {
+		// Otherwise, use credential type that corresponds to the first auth option in the node definition
+		const nodeAuthOptions = getNodeAuthOptions(activeNodeType.value);
+		// But only if there is zero or one auth options available
+		if (nodeAuthOptions.length > 0 && activeNodeType.value?.credentials) {
+			return getNodeCredentialForSelectedAuthType(activeNodeType.value, nodeAuthOptions[0].value);
+		} else {
+			return activeNodeType.value?.credentials ? activeNodeType.value.credentials[0] : null;
+		}
+	}
 
-				return null;
-			}
-			if (this.selectedCredentialType) {
-				return this.selectedCredentialType.name;
-			}
-			return `${this.activeId}`;
-		},
-		credentialType(): ICredentialType | null {
-			if (!this.credentialTypeName) {
-				return null;
-			}
+	return null;
+});
 
-			const type = this.credentialsStore.getCredentialTypeByName(this.credentialTypeName);
+const credentialType = computed(() => {
+	if (!credentialTypeName.value) {
+		return null;
+	}
 
-			if (!type) {
-				return null;
-			}
+	const type = credentialsStore.getCredentialTypeByName(credentialTypeName.value);
 
-			return {
-				...type,
-				properties: this.getCredentialProperties(this.credentialTypeName),
-			};
-		},
-		isCredentialTestable(): boolean {
-			if (this.isOAuthType || !this.requiredPropertiesFilled) {
-				return false;
-			}
+	if (!type) {
+		return null;
+	}
 
-			const hasUntestableExpressions = Object.values(this.credentialData).reduce(
-				(accu: boolean, value: CredentialInformation) =>
-					accu ||
-					(typeof value === 'string' && isExpression(value) && !isTestableExpression(value)),
-				false,
-			);
-			if (hasUntestableExpressions) {
-				return false;
-			}
+	return {
+		...type,
+		properties: getCredentialProperties(credentialTypeName.value),
+	};
+});
 
-			const nodesThatCanTest = this.nodesWithAccess.filter((node) => {
-				if (node.credentials) {
-					// Returns a list of nodes that can test this credentials
-					const eligibleTesters = node.credentials.filter((credential) => {
-						return credential.name === this.credentialTypeName && credential.testedBy;
-					});
-					// If we have any node that can test, return true.
-					return !!eligibleTesters.length;
-				}
-				return false;
+const credentialTypeName = computed(() => {
+	if (props.mode === 'edit') {
+		if (currentCredential.value) {
+			return currentCredential.value.type;
+		}
+
+		return null;
+	}
+	if (selectedCredentialType.value) {
+		return selectedCredentialType.value.name;
+	}
+	return `${props.activeId}`;
+});
+
+const isCredentialTestable = computed(() => {
+	if (isOAuthType.value || !requiredPropertiesFilled.value) {
+		return false;
+	}
+
+	const hasUntestableExpressions = Object.values(credentialData.value).reduce(
+		(accu: boolean, value: CredentialInformation) =>
+			accu || (typeof value === 'string' && isExpression(value) && !isTestableExpression(value)),
+		false,
+	);
+	if (hasUntestableExpressions) {
+		return false;
+	}
+
+	const nodesThatCanTest = nodesWithAccess.value.filter((node) => {
+		if (node.credentials) {
+			// Returns a list of nodes that can test this credentials
+			const eligibleTesters = node.credentials.filter((credential) => {
+				return credential.name === credentialTypeName.value && credential.testedBy;
 			});
+			// If we have any node that can test, return true.
+			return !!eligibleTesters.length;
+		}
+		return false;
+	});
 
-			return !!nodesThatCanTest.length || (!!this.credentialType && !!this.credentialType.test);
-		},
-		nodesWithAccess(): INodeTypeDescription[] {
-			if (this.credentialTypeName) {
-				return this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
-			}
+	return !!nodesThatCanTest.length || (!!credentialType.value && !!credentialType.value.test);
+});
 
-			return [];
-		},
-		parentTypes(): string[] {
-			if (this.credentialTypeName) {
-				return this.getParentTypes(this.credentialTypeName);
-			}
+const nodesWithAccess = computed(() => {
+	if (credentialTypeName.value) {
+		return credentialsStore.getNodesWithAccess(credentialTypeName.value);
+	}
 
-			return [];
-		},
-		isOAuthType(): boolean {
-			return (
-				!!this.credentialTypeName &&
-				(((this.credentialTypeName === 'oAuth2Api' || this.parentTypes.includes('oAuth2Api')) &&
-					(this.credentialData.grantType === 'authorizationCode' ||
-						this.credentialData.grantType === 'pkce')) ||
-					this.credentialTypeName === 'oAuth1Api' ||
-					this.parentTypes.includes('oAuth1Api'))
-			);
-		},
-		allOAuth2BasePropertiesOverridden() {
-			if (this.credentialType?.__overwrittenProperties) {
-				return (
-					this.credentialType.__overwrittenProperties.includes('clientId') &&
-					this.credentialType.__overwrittenProperties.includes('clientSecret')
-				);
-			}
+	return [];
+});
+
+const parentTypes = computed(() => {
+	if (credentialTypeName.value) {
+		return getParentTypes(credentialTypeName.value);
+	}
+
+	return [];
+});
+
+const isOAuthType = computed(() => {
+	return (
+		!!credentialTypeName.value &&
+		(((credentialTypeName.value === 'oAuth2Api' || parentTypes.value.includes('oAuth2Api')) &&
+			(credentialData.value.grantType === 'authorizationCode' ||
+				credentialData.value.grantType === 'pkce')) ||
+			credentialTypeName.value === 'oAuth1Api' ||
+			parentTypes.value.includes('oAuth1Api'))
+	);
+});
+
+const allOAuth2BasePropertiesOverridden = computed(() => {
+	if (credentialType.value?.__overwrittenProperties) {
+		return (
+			credentialType.value.__overwrittenProperties.includes('clientId') &&
+			credentialType.value.__overwrittenProperties.includes('clientSecret')
+		);
+	}
+	return false;
+});
+
+const isOAuthConnected = computed(() => isOAuthType.value && !!credentialData.value.oauthTokenData);
+const credentialProperties = computed(() => {
+	const type = credentialType.value;
+	if (!type) {
+		return [];
+	}
+
+	const properties = type.properties.filter((propertyData: INodeProperties) => {
+		if (!displayCredentialParameter(propertyData)) {
 			return false;
-		},
-		isOAuthConnected(): boolean {
-			return this.isOAuthType && !!this.credentialData.oauthTokenData;
-		},
-		credentialProperties(): INodeProperties[] {
-			if (!this.credentialType) {
-				return [];
-			}
+		}
+		return (
+			!type.__overwrittenProperties || !type.__overwrittenProperties.includes(propertyData.name)
+		);
+	});
+
+	/**
+	 * If after all credentials overrides are applied only "notice"
+	 * properties are left, do not return them. This will avoid
+	 * showing notices that refer to a property that was overridden.
+	 */
+	if (properties.every((p) => p.type === 'notice')) {
+		return [];
+	}
 
-			const credentialType = this.credentialType;
-			const properties = credentialType.properties.filter((propertyData: INodeProperties) => {
-				if (!this.displayCredentialParameter(propertyData)) {
-					return false;
-				}
-				return (
-					!credentialType.__overwrittenProperties ||
-					!credentialType.__overwrittenProperties.includes(propertyData.name)
-				);
-			});
+	return properties;
+});
 
-			/**
-			 * If after all credentials overrides are applied only "notice"
-			 * properties are left, do not return them. This will avoid
-			 * showing notices that refer to a property that was overridden.
-			 */
-			if (properties.every((p) => p.type === 'notice')) {
-				return [];
-			}
+const requiredPropertiesFilled = computed(() => {
+	for (const property of credentialProperties.value) {
+		if (property.required !== true) {
+			continue;
+		}
 
-			return properties;
-		},
-		requiredPropertiesFilled(): boolean {
-			for (const property of this.credentialProperties) {
-				if (property.required !== true) {
-					continue;
-				}
-
-				const credentialProperty = this.credentialData[property.name];
-
-				if (property.type === 'string' && !credentialProperty) {
-					return false;
-				}
-
-				if (property.type === 'number') {
-					const containsExpression =
-						typeof credentialProperty === 'string' && credentialProperty.startsWith('=');
-
-					if (typeof credentialProperty !== 'number' && !containsExpression) {
-						return false;
-					}
-				}
-			}
-			return true;
-		},
-		credentialPermissions(): PermissionsMap<CredentialScope> {
-			if (this.loading) {
-				return {} as PermissionsMap<CredentialScope>;
-			}
+		const credentialProperty = credentialData.value[property.name];
 
-			return getCredentialPermissions(
-				(this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse,
-			);
-		},
-		sidebarItems(): IMenuItem[] {
-			const menuItems: IMenuItem[] = [
-				{
-					id: 'connection',
-					label: this.$locale.baseText('credentialEdit.credentialEdit.connection'),
-					position: 'top',
-				},
-				{
-					id: 'sharing',
-					label: this.$locale.baseText('credentialEdit.credentialEdit.sharing'),
-					position: 'top',
-				},
-				{
-					id: 'details',
-					label: this.$locale.baseText('credentialEdit.credentialEdit.details'),
-					position: 'top',
-				},
-			];
-
-			return menuItems;
-		},
-		isSharingAvailable(): boolean {
-			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
-		},
-		defaultCredentialTypeName(): string {
-			let credentialTypeName = this.credentialTypeName;
-			if (!credentialTypeName || credentialTypeName === 'null') {
-				if (this.activeNodeType?.credentials) {
-					credentialTypeName = this.activeNodeType.credentials[0].name;
-				}
+		if (property.type === 'string' && !credentialProperty) {
+			return false;
+		}
+
+		if (property.type === 'number') {
+			const containsExpression =
+				typeof credentialProperty === 'string' && credentialProperty.startsWith('=');
+
+			if (typeof credentialProperty !== 'number' && !containsExpression) {
+				return false;
 			}
-			return credentialTypeName ?? '';
-		},
-		showSaveButton(): boolean {
-			return (
-				(this.hasUnsavedChanges || !!this.credentialId) &&
-				(this.credentialPermissions.create || this.credentialPermissions.update)
-			);
+		}
+	}
+	return true;
+});
+
+const credentialPermissions = computed<PermissionsMap<CredentialScope>>(() => {
+	if (loading.value) {
+		return {} as PermissionsMap<CredentialScope>;
+	}
+
+	return getCredentialPermissions(
+		(credentialId.value ? currentCredential.value : credentialData.value) as ICredentialsResponse,
+	);
+});
+
+const sidebarItems = computed(() => {
+	const menuItems: IMenuItem[] = [
+		{
+			id: 'connection',
+			label: i18n.baseText('credentialEdit.credentialEdit.connection'),
+			position: 'top',
 		},
-		showSharingMenu(): boolean {
-			return !this.$route.params.projectId;
+		{
+			id: 'sharing',
+			label: i18n.baseText('credentialEdit.credentialEdit.sharing'),
+			position: 'top',
 		},
-		showSharingContent(): boolean {
-			return this.activeTab === 'sharing' && !!this.credentialType;
+		{
+			id: 'details',
+			label: i18n.baseText('credentialEdit.credentialEdit.details'),
+			position: 'top',
 		},
-	},
-	async mounted() {
-		this.requiredCredentials =
-			isCredentialModalState(this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY]) &&
-			this.uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;
-
-		if (this.mode === 'new' && this.credentialTypeName) {
-			this.credentialName = await this.credentialsStore.getNewCredentialName({
-				credentialTypeName: this.defaultCredentialTypeName,
-			});
+	];
 
-			const { currentProject, personalProject } = this.projectsStore;
-			const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
-			const homeProject = currentProject ?? personalProject ?? {};
+	return menuItems;
+});
 
-			this.credentialData = {
-				...this.credentialData,
-				scopes,
-				homeProject,
-			};
-		} else {
-			await this.loadCurrentCredential();
+const defaultCredentialTypeName = computed(() => {
+	let defaultName = credentialTypeName.value;
+	if (!defaultName || defaultName === 'null') {
+		if (activeNodeType.value?.credentials) {
+			defaultName = activeNodeType.value.credentials[0].name;
 		}
+	}
+	return defaultName ?? '';
+});
 
-		if (this.credentialType) {
-			for (const property of this.credentialType.properties) {
-				if (
-					!this.credentialData.hasOwnProperty(property.name) &&
-					!this.credentialType.__overwrittenProperties?.includes(property.name)
-				) {
-					this.credentialData = {
-						...this.credentialData,
-						[property.name]: property.default as CredentialInformation,
-					};
-				}
-			}
-		}
+const showSaveButton = computed(() => {
+	return (
+		(hasUnsavedChanges.value || !!credentialId.value) &&
+		(credentialPermissions.value.create || credentialPermissions.value.update)
+	);
+});
+
+const showSharingContent = computed(() => activeTab.value === 'sharing' && !!credentialType.value);
+
+onMounted(async () => {
+	requiredCredentials.value =
+		isCredentialModalState(uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY]) &&
+		uiStore.modals[CREDENTIAL_EDIT_MODAL_KEY].showAuthSelector === true;
 
-		await this.externalHooks.run('credentialsEdit.credentialModalOpened', {
-			credentialType: this.credentialTypeName,
-			isEditingCredential: this.mode === 'edit',
-			activeNode: this.ndvStore.activeNode,
+	if (props.mode === 'new' && credentialTypeName.value) {
+		credentialName.value = await credentialsStore.getNewCredentialName({
+			credentialTypeName: defaultCredentialTypeName.value,
 		});
 
-		setTimeout(async () => {
-			if (this.credentialId) {
-				if (!this.requiredPropertiesFilled && this.credentialPermissions.update) {
-					// sharees can't see properties, so this check would always fail for them
-					// if the credential contains required fields.
-					this.showValidationWarning = true;
-				} else {
-					await this.retestCredential();
-				}
-			}
-		}, 0);
-
-		this.loading = false;
-	},
-	methods: {
-		async beforeClose() {
-			let keepEditing = false;
-
-			if (this.hasUnsavedChanges) {
-				const displayName = this.credentialType ? this.credentialType.displayName : '';
-				const confirmAction = await this.confirm(
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.message',
-						{ interpolate: { credentialDisplayName: displayName } },
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline',
-					),
-					{
-						cancelButtonText: this.$locale.baseText(
-							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
-						),
-						confirmButtonText: this.$locale.baseText(
-							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
-						),
-					},
-				);
-				keepEditing = confirmAction === MODAL_CONFIRM;
-			} else if (this.isOAuthType && !this.isOAuthConnected) {
-				const confirmAction = await this.confirm(
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.message',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline',
-					),
-					{
-						cancelButtonText: this.$locale.baseText(
-							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
-						),
-						confirmButtonText: this.$locale.baseText(
-							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
-						),
-					},
-				);
-				keepEditing = confirmAction === MODAL_CONFIRM;
-			}
+		const { currentProject, personalProject } = projectsStore;
+		const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
+		const homeProject = currentProject ?? personalProject ?? {};
 
-			if (!keepEditing) {
-				return true;
-			} else if (!this.requiredPropertiesFilled) {
-				this.showValidationWarning = true;
-				this.scrollToTop();
-			} else if (this.isOAuthType) {
-				this.scrollToBottom();
-			}
+		credentialData.value = {
+			...credentialData.value,
+			scopes,
+			homeProject,
+		};
+	} else {
+		await loadCurrentCredential();
+	}
 
-			return false;
-		},
-		displayCredentialParameter(parameter: INodeProperties): boolean {
-			if (parameter.type === 'hidden') {
-				return false;
+	if (credentialType.value) {
+		for (const property of credentialType.value.properties) {
+			if (
+				!credentialData.value.hasOwnProperty(property.name) &&
+				!credentialType.value.__overwrittenProperties?.includes(property.name)
+			) {
+				credentialData.value = {
+					...credentialData.value,
+					[property.name]: property.default as CredentialInformation,
+				};
 			}
+		}
+	}
 
-			if (parameter.displayOptions?.hideOnCloud && this.settingsStore.isCloudDeployment) {
-				return false;
+	await externalHooks.run('credentialsEdit.credentialModalOpened', {
+		credentialType: credentialTypeName.value,
+		isEditingCredential: props.mode === 'edit',
+		activeNode: ndvStore.activeNode,
+	});
+
+	setTimeout(async () => {
+		if (credentialId.value) {
+			if (!requiredPropertiesFilled.value && credentialPermissions.value.update) {
+				// sharees can't see properties, so this check would always fail for them
+				// if the credential contains required fields.
+				showValidationWarning.value = true;
+			} else {
+				await retestCredential();
 			}
+		}
+	}, 0);
 
-			if (parameter.displayOptions === undefined) {
-				// If it is not defined no need to do a proper check
-				return true;
-			}
+	loading.value = false;
+});
 
-			return this.nodeHelpers.displayParameter(
-				this.credentialData as INodeParameters,
-				parameter,
-				'',
-				null,
-			);
-		},
-		getCredentialProperties(name: string): INodeProperties[] {
-			const credentialTypeData = this.credentialsStore.getCredentialTypeByName(name);
+async function beforeClose() {
+	let keepEditing = false;
+
+	if (hasUnsavedChanges.value) {
+		const displayName = credentialType.value ? credentialType.value.displayName : '';
+		const confirmAction = await message.confirm(
+			i18n.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.message', {
+				interpolate: { credentialDisplayName: displayName },
+			}),
+			i18n.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline'),
+			{
+				cancelButtonText: i18n.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
+				),
+				confirmButtonText: i18n.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
+				),
+			},
+		);
+		keepEditing = confirmAction === MODAL_CONFIRM;
+	} else if (isOAuthType.value && !isOAuthConnected.value) {
+		const confirmAction = await message.confirm(
+			i18n.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.message'),
+			i18n.baseText('credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline'),
+			{
+				cancelButtonText: i18n.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
+				),
+				confirmButtonText: i18n.baseText(
+					'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
+				),
+			},
+		);
+		keepEditing = confirmAction === MODAL_CONFIRM;
+	}
 
-			if (!credentialTypeData) {
-				return [];
-			}
+	if (!keepEditing) {
+		return true;
+	} else if (!requiredPropertiesFilled.value) {
+		showValidationWarning.value = true;
+		scrollToTop();
+	} else if (isOAuthType.value) {
+		scrollToBottom();
+	}
 
-			if (credentialTypeData.extends === undefined) {
-				return credentialTypeData.properties;
-			}
+	return false;
+}
 
-			const combineProperties = [] as INodeProperties[];
-			for (const credentialsTypeName of credentialTypeData.extends) {
-				const mergeCredentialProperties = this.getCredentialProperties(credentialsTypeName);
-				NodeHelpers.mergeNodeProperties(combineProperties, mergeCredentialProperties);
-			}
+function displayCredentialParameter(parameter: INodeProperties): boolean {
+	if (parameter.type === 'hidden') {
+		return false;
+	}
 
-			// The properties defined on the parent credentials take precedence
-			NodeHelpers.mergeNodeProperties(combineProperties, credentialTypeData.properties);
+	if (parameter.displayOptions?.hideOnCloud && settingsStore.isCloudDeployment) {
+		return false;
+	}
 
-			return combineProperties;
-		},
+	if (parameter.displayOptions === undefined) {
+		// If it is not defined no need to do a proper check
+		return true;
+	}
 
-		async loadCurrentCredential() {
-			this.credentialId = (this.activeId ?? '') as string;
-
-			try {
-				const currentCredentials = await this.credentialsStore.getCredentialData({
-					id: this.credentialId,
-				});
-
-				if (!currentCredentials) {
-					throw new Error(
-						this.$locale.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') +
-							':' +
-							this.credentialId,
-					);
-				}
-
-				this.currentCredential = currentCredentials;
-
-				this.credentialData = (currentCredentials.data as ICredentialDataDecryptedObject) || {};
-				if (currentCredentials.sharedWithProjects) {
-					this.credentialData = {
-						...this.credentialData,
-						sharedWithProjects: currentCredentials.sharedWithProjects,
-					};
-				}
-				if (currentCredentials.homeProject) {
-					this.credentialData = {
-						...this.credentialData,
-						homeProject: currentCredentials.homeProject,
-					};
-				}
-
-				this.credentialName = currentCredentials.name;
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
-				);
-				this.closeDialog();
-
-				return;
-			}
-		},
-		onTabSelect(tab: string) {
-			this.activeTab = tab;
-			const tabName: string = tab.replaceAll('coming-soon/', '');
-			const credType: string = this.credentialType ? this.credentialType.name : '';
-			const activeNode: INode | null = this.ndvStore.activeNode;
-
-			this.$telemetry.track('User viewed credential tab', {
-				credential_type: credType,
-				node_type: activeNode ? activeNode.type : null,
-				tab: tabName,
-				workflow_id: this.workflowsStore.workflowId,
-				credential_id: this.credentialId,
-				sharing_enabled: EnterpriseEditionFeature.Sharing,
-			});
-		},
-		onChangeSharedWith(sharedWithProjects: ProjectSharingData[]) {
-			this.credentialData = {
-				...this.credentialData,
-				sharedWithProjects,
-			};
-			this.isSharedWithChanged = true;
-			this.hasUnsavedChanges = true;
-		},
+	return nodeHelpers.displayParameter(credentialData.value as INodeParameters, parameter, '', null);
+}
 
-		onDataChange({ name, value }: { name: string; value: CredentialInformation }) {
-			// skip update if new value matches the current
-			if (this.credentialData[name] === value) return;
+function getCredentialProperties(name: string): INodeProperties[] {
+	const credentialTypeData = credentialsStore.getCredentialTypeByName(name);
 
-			this.hasUnsavedChanges = true;
+	if (!credentialTypeData) {
+		return [];
+	}
 
-			const { oauthTokenData, ...credData } = this.credentialData;
+	if (credentialTypeData.extends === undefined) {
+		return credentialTypeData.properties;
+	}
 
-			this.credentialData = {
-				...credData,
-				[name]: value,
-			};
-		},
-		closeDialog() {
-			this.modalBus.emit('close');
-		},
+	const combineProperties = [] as INodeProperties[];
+	for (const credentialsTypeName of credentialTypeData.extends) {
+		const mergeCredentialProperties = getCredentialProperties(credentialsTypeName);
+		NodeHelpers.mergeNodeProperties(combineProperties, mergeCredentialProperties);
+	}
 
-		getParentTypes(name: string): string[] {
-			const credentialType = this.credentialsStore.getCredentialTypeByName(name);
+	// The properties defined on the parent credentials take precedence
+	NodeHelpers.mergeNodeProperties(combineProperties, credentialTypeData.properties);
 
-			if (credentialType?.extends === undefined) {
-				return [];
-			}
+	return combineProperties;
+}
 
-			const types: string[] = [];
-			for (const typeName of credentialType.extends) {
-				types.push(typeName);
-				types.push.apply(types, this.getParentTypes(typeName)); // eslint-disable-line prefer-spread
-			}
+async function loadCurrentCredential() {
+	credentialId.value = props.activeId ?? '';
 
-			return types;
-		},
+	try {
+		const currentCredentials = await credentialsStore.getCredentialData({
+			id: credentialId.value,
+		});
 
-		onNameEdit(text: string) {
-			this.hasUnsavedChanges = true;
-			this.hasUserSpecifiedName = true;
-			this.credentialName = text;
-		},
+		if (!currentCredentials) {
+			throw new Error(
+				i18n.baseText('credentialEdit.credentialEdit.couldNotFindCredentialWithId') +
+					':' +
+					credentialId.value,
+			);
+		}
 
-		scrollToTop() {
-			setTimeout(() => {
-				const contentRef = this.$refs.content as Element | undefined;
-				if (contentRef) {
-					contentRef.scrollTop = 0;
-				}
-			}, 0);
-		},
+		currentCredential.value = currentCredentials;
 
-		scrollToBottom() {
-			setTimeout(() => {
-				const contentRef = this.$refs.content as Element | undefined;
-				if (contentRef) {
-					contentRef.scrollTop = contentRef.scrollHeight;
-				}
-			}, 0);
-		},
+		credentialData.value = (currentCredentials.data as ICredentialDataDecryptedObject) || {};
+		if (currentCredentials.sharedWithProjects) {
+			credentialData.value = {
+				...credentialData.value,
+				sharedWithProjects: currentCredentials.sharedWithProjects,
+			};
+		}
+		if (currentCredentials.homeProject) {
+			credentialData.value = {
+				...credentialData.value,
+				homeProject: currentCredentials.homeProject,
+			};
+		}
 
-		async retestCredential() {
-			if (!this.isCredentialTestable || !this.credentialTypeName) {
-				this.authError = '';
-				this.testedSuccessfully = false;
+		credentialName.value = currentCredentials.name;
+	} catch (error) {
+		toast.showError(
+			error,
+			i18n.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
+		);
+		closeDialog();
 
-				return;
-			}
+		return;
+	}
+}
 
-			const { ownedBy, sharedWithProjects, ...credentialData } = this.credentialData;
-			const details: ICredentialsDecrypted = {
-				id: this.credentialId,
-				name: this.credentialName,
-				type: this.credentialTypeName,
-				data: credentialData,
-			};
+function onTabSelect(tab: string) {
+	activeTab.value = tab;
+	const tabName: string = tab.replaceAll('coming-soon/', '');
+	const credType: string = credentialType.value ? credentialType.value.name : '';
+	const activeNode: INode | null = ndvStore.activeNode;
+
+	telemetry.track('User viewed credential tab', {
+		credential_type: credType,
+		node_type: activeNode ? activeNode.type : null,
+		tab: tabName,
+		workflow_id: workflowsStore.workflowId,
+		credential_id: credentialId.value,
+		sharing_enabled: EnterpriseEditionFeature.Sharing,
+	});
+}
 
-			this.isRetesting = true;
-			await this.testCredential(details);
-			this.isRetesting = false;
-		},
+function onChangeSharedWith(sharedWithProjects: ProjectSharingData[]) {
+	credentialData.value = {
+		...credentialData.value,
+		sharedWithProjects,
+	};
+	isSharedWithChanged.value = true;
+	hasUnsavedChanges.value = true;
+}
 
-		async testCredential(credentialDetails: ICredentialsDecrypted) {
-			const result = await this.credentialsStore.testCredential(credentialDetails);
-			if (result.status === 'Error') {
-				this.authError = result.message;
-				this.testedSuccessfully = false;
-			} else {
-				this.authError = '';
-				this.testedSuccessfully = true;
-			}
+function onDataChange({ name, value }: IUpdateInformation) {
+	// skip update if new value matches the current
+	if (credentialData.value[name] === value) return;
 
-			this.scrollToTop();
-		},
+	hasUnsavedChanges.value = true;
 
-		async saveCredential(): Promise<ICredentialsResponse | null> {
-			if (!this.requiredPropertiesFilled) {
-				this.showValidationWarning = true;
-				this.scrollToTop();
-			} else {
-				this.showValidationWarning = false;
-			}
+	const { oauthTokenData, ...credData } = credentialData.value;
 
-			this.isSaving = true;
+	credentialData.value = {
+		...credData,
+		[name]: value as CredentialInformation,
+	};
+}
 
-			// Save only the none default data
-			assert(this.credentialType);
-			const data = NodeHelpers.getNodeParameters(
-				this.credentialType.properties,
-				this.credentialData as INodeParameters,
-				false,
-				false,
-				null,
-			);
+function closeDialog() {
+	modalBus.value.emit('close');
+}
 
-			assert(this.credentialTypeName);
-			const credentialDetails: ICredentialsDecrypted = {
-				id: this.credentialId,
-				name: this.credentialName,
-				type: this.credentialTypeName,
-				data: data as unknown as ICredentialDataDecryptedObject,
-			};
+function getParentTypes(name: string): string[] {
+	const type = credentialsStore.getCredentialTypeByName(name);
 
-			if (
-				this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) &&
-				this.credentialData.sharedWithProjects
-			) {
-				credentialDetails.sharedWithProjects = this.credentialData
-					.sharedWithProjects as ProjectSharingData[];
-			}
+	if (type?.extends === undefined) {
+		return [];
+	}
 
-			let credential: ICredentialsResponse | null = null;
+	const types: string[] = [];
+	for (const typeName of type.extends) {
+		types.push(typeName);
+		types.push.apply(types, getParentTypes(typeName)); // eslint-disable-line prefer-spread
+	}
 
-			const isNewCredential = this.mode === 'new' && !this.credentialId;
+	return types;
+}
 
-			if (isNewCredential) {
-				credential = await this.createCredential(
-					credentialDetails,
-					this.projectsStore.currentProjectId,
-				);
+function onNameEdit(text: string) {
+	hasUnsavedChanges.value = true;
+	hasUserSpecifiedName.value = true;
+	credentialName.value = text;
+}
 
-				let toastTitle = this.$locale.baseText('credentials.create.personal.toast.title');
-				let toastText = '';
+function scrollToTop() {
+	setTimeout(() => {
+		if (contentRef.value) {
+			contentRef.value.scrollTop = 0;
+		}
+	}, 0);
+}
 
-				if (!credentialDetails.sharedWithProjects) {
-					toastText = this.$locale.baseText('credentials.create.personal.toast.text');
-				}
+function scrollToBottom() {
+	setTimeout(() => {
+		if (contentRef.value) {
+			contentRef.value.scrollTop = contentRef.value.scrollHeight;
+		}
+	}, 0);
+}
 
-				if (this.projectsStore.currentProject) {
-					toastTitle = this.$locale.baseText('credentials.create.project.toast.title', {
-						interpolate: { projectName: this.projectsStore.currentProject.name ?? '' },
-					});
+async function retestCredential() {
+	if (!isCredentialTestable.value || !credentialTypeName.value) {
+		authError.value = '';
+		testedSuccessfully.value = false;
 
-					toastText = this.$locale.baseText('credentials.create.project.toast.text', {
-						interpolate: { projectName: this.projectsStore.currentProject.name ?? '' },
-					});
-				}
+		return;
+	}
 
-				this.showMessage({
-					title: toastTitle,
-					message: toastText,
-					type: 'success',
-				});
-			} else {
-				if (this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
-					credentialDetails.sharedWithProjects = this.credentialData
-						.sharedWithProjects as ProjectSharingData[];
-				}
+	const { ownedBy, sharedWithProjects, ...otherCredData } = credentialData.value;
+	const details: ICredentialsDecrypted = {
+		id: credentialId.value,
+		name: credentialName.value,
+		type: credentialTypeName.value,
+		data: otherCredData,
+	};
+
+	isRetesting.value = true;
+	await testCredential(details);
+	isRetesting.value = false;
+}
 
-				credential = await this.updateCredential(credentialDetails);
-			}
+async function testCredential(credentialDetails: ICredentialsDecrypted) {
+	const result = await credentialsStore.testCredential(credentialDetails);
+	if (result.status === 'Error') {
+		authError.value = result.message;
+		testedSuccessfully.value = false;
+	} else {
+		authError.value = '';
+		testedSuccessfully.value = true;
+	}
 
-			this.isSaving = false;
-			if (credential) {
-				this.credentialId = credential.id;
-				this.currentCredential = credential;
-
-				if (this.isCredentialTestable) {
-					this.isTesting = true;
-					// Add the full data including defaults for testing
-					credentialDetails.data = this.credentialData;
-
-					credentialDetails.id = this.credentialId;
-
-					await this.testCredential(credentialDetails);
-					this.isTesting = false;
-				} else {
-					this.authError = '';
-					this.testedSuccessfully = false;
-				}
-
-				const usesExternalSecrets = Object.entries(credentialDetails.data || {}).some(
-					([, value]) =>
-						typeof value !== 'object' && /=.*\{\{[^}]*\$secrets\.[^}]+}}.*/.test(`${value}`),
-				);
-
-				const trackProperties: ITelemetryTrackProperties = {
-					credential_type: credentialDetails.type,
-					workflow_id: this.workflowsStore.workflowId,
-					credential_id: credential.id,
-					is_complete: !!this.requiredPropertiesFilled,
-					is_new: isNewCredential,
-					uses_external_secrets: usesExternalSecrets,
-				};
+	scrollToTop();
+}
 
-				if (this.isOAuthType) {
-					trackProperties.is_valid = !!this.isOAuthConnected;
-				} else if (this.isCredentialTestable) {
-					trackProperties.is_valid = !!this.testedSuccessfully;
-				}
+async function saveCredential(): Promise<ICredentialsResponse | null> {
+	if (!requiredPropertiesFilled.value) {
+		showValidationWarning.value = true;
+		scrollToTop();
+	} else {
+		showValidationWarning.value = false;
+	}
 
-				if (this.ndvStore.activeNode) {
-					trackProperties.node_type = this.ndvStore.activeNode.type;
-				}
+	isSaving.value = true;
+
+	// Save only the none default data
+	assert(credentialType.value);
+	const data = NodeHelpers.getNodeParameters(
+		credentialType.value.properties,
+		credentialData.value as INodeParameters,
+		false,
+		false,
+		null,
+	);
+
+	assert(credentialTypeName.value);
+	const credentialDetails: ICredentialsDecrypted = {
+		id: credentialId.value,
+		name: credentialName.value,
+		type: credentialTypeName.value,
+		data: data as unknown as ICredentialDataDecryptedObject,
+	};
+
+	if (
+		settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) &&
+		credentialData.value.sharedWithProjects
+	) {
+		credentialDetails.sharedWithProjects = credentialData.value
+			.sharedWithProjects as ProjectSharingData[];
+	}
 
-				if (this.authError && this.authError !== '') {
-					trackProperties.authError = this.authError;
-				}
+	let credential: ICredentialsResponse | null = null;
 
-				this.$telemetry.track('User saved credentials', trackProperties);
-				await this.externalHooks.run('credentialEdit.saveCredential', trackProperties);
-			}
+	const isNewCredential = props.mode === 'new' && !credentialId.value;
 
-			return credential;
-		},
+	if (isNewCredential) {
+		credential = await createCredential(credentialDetails, projectsStore.currentProjectId);
 
-		async createCredential(
-			credentialDetails: ICredentialsDecrypted,
-			projectId?: string,
-		): Promise<ICredentialsResponse | null> {
-			let credential;
-
-			try {
-				credential = await this.credentialsStore.createNewCredential(credentialDetails, projectId);
-				this.hasUnsavedChanges = false;
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
-				);
-
-				return null;
-			}
+		let toastTitle = i18n.baseText('credentials.create.personal.toast.title');
+		let toastText = '';
 
-			await this.externalHooks.run('credential.saved', {
-				credential_type: credentialDetails.type,
-				credential_id: credential.id,
-				is_new: true,
+		if (!credentialDetails.sharedWithProjects) {
+			toastText = i18n.baseText('credentials.create.personal.toast.text');
+		}
+
+		if (projectsStore.currentProject) {
+			toastTitle = i18n.baseText('credentials.create.project.toast.title', {
+				interpolate: { projectName: projectsStore.currentProject.name ?? '' },
 			});
 
-			this.$telemetry.track('User created credentials', {
-				credential_type: credentialDetails.type,
-				credential_id: credential.id,
-				workflow_id: this.workflowsStore.workflowId,
+			toastText = i18n.baseText('credentials.create.project.toast.text', {
+				interpolate: { projectName: projectsStore.currentProject.name ?? '' },
 			});
+		}
 
-			return credential;
-		},
+		toast.showMessage({
+			title: toastTitle,
+			message: toastText,
+			type: 'success',
+		});
+	} else {
+		if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
+			credentialDetails.sharedWithProjects = credentialData.value
+				.sharedWithProjects as ProjectSharingData[];
+		}
 
-		async updateCredential(
-			credentialDetails: ICredentialsDecrypted,
-		): Promise<ICredentialsResponse | null> {
-			let credential: ICredentialsResponse | null = null;
-			try {
-				if (this.credentialPermissions.update) {
-					credential = await this.credentialsStore.updateCredential({
-						id: this.credentialId,
-						data: credentialDetails,
-					});
-				}
-				if (
-					this.credentialPermissions.share &&
-					this.isSharedWithChanged &&
-					credentialDetails.sharedWithProjects
-				) {
-					credential = await this.credentialsStore.setCredentialSharedWith({
-						credentialId: credentialDetails.id,
-						sharedWithProjects: credentialDetails.sharedWithProjects,
-					});
-					this.isSharedWithChanged = false;
-				}
-				this.hasUnsavedChanges = false;
-
-				if (credential) {
-					await this.externalHooks.run('credential.saved', {
-						credential_type: credentialDetails.type,
-						credential_id: credential.id,
-						is_new: false,
-					});
-				}
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
-				);
-
-				return null;
-			}
+		credential = await updateCredential(credentialDetails);
+	}
 
-			// Now that the credentials changed check if any nodes use credentials
-			// which have now a different name
-			this.nodeHelpers.updateNodesCredentialsIssues();
+	isSaving.value = false;
+	if (credential) {
+		credentialId.value = credential.id;
+		currentCredential.value = credential;
 
-			return credential;
-		},
+		if (isCredentialTestable.value) {
+			isTesting.value = true;
+			// Add the full data including defaults for testing
+			credentialDetails.data = credentialData.value;
 
-		async deleteCredential() {
-			if (!this.currentCredential) {
-				return;
-			}
+			credentialDetails.id = credentialId.value;
 
-			const savedCredentialName = this.currentCredential.name;
+			await testCredential(credentialDetails);
+			isTesting.value = false;
+		} else {
+			authError.value = '';
+			testedSuccessfully.value = false;
+		}
 
-			const deleteConfirmed = await this.confirm(
-				this.$locale.baseText(
-					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
-					{ interpolate: { savedCredentialName } },
-				),
-				this.$locale.baseText(
-					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
-				),
-				{
-					confirmButtonText: this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-					),
-				},
-			);
+		const usesExternalSecrets = Object.entries(credentialDetails.data ?? {}).some(
+			([, value]) =>
+				typeof value !== 'object' && /=.*\{\{[^}]*\$secrets\.[^}]+}}.*/.test(`${value}`),
+		);
+
+		const trackProperties: ITelemetryTrackProperties = {
+			credential_type: credentialDetails.type,
+			workflow_id: workflowsStore.workflowId,
+			credential_id: credential.id,
+			is_complete: !!requiredPropertiesFilled.value,
+			is_new: isNewCredential,
+			uses_external_secrets: usesExternalSecrets,
+		};
 
-			if (deleteConfirmed !== MODAL_CONFIRM) {
-				return;
-			}
+		if (isOAuthType.value) {
+			trackProperties.is_valid = !!isOAuthConnected.value;
+		} else if (isCredentialTestable.value) {
+			trackProperties.is_valid = !!testedSuccessfully.value;
+		}
 
-			try {
-				this.isDeleting = true;
-				await this.credentialsStore.deleteCredential({ id: this.credentialId });
-				this.hasUnsavedChanges = false;
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
-				);
-				this.isDeleting = false;
-
-				return;
-			}
+		if (ndvStore.activeNode) {
+			trackProperties.node_type = ndvStore.activeNode.type;
+		}
+
+		if (authError.value && authError.value !== '') {
+			trackProperties.authError = authError.value;
+		}
 
-			this.isDeleting = false;
-			// Now that the credentials were removed check if any nodes used them
-			this.nodeHelpers.updateNodesCredentialsIssues();
-			this.credentialData = {};
+		telemetry.track('User saved credentials', trackProperties);
+		await externalHooks.run('credentialEdit.saveCredential', trackProperties);
+	}
+
+	return credential;
+}
+
+async function createCredential(
+	credentialDetails: ICredentialsDecrypted,
+	projectId?: string,
+): Promise<ICredentialsResponse | null> {
+	let credential;
+
+	try {
+		credential = await credentialsStore.createNewCredential(credentialDetails, projectId);
+		hasUnsavedChanges.value = false;
+	} catch (error) {
+		toast.showError(
+			error,
+			i18n.baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
+		);
+
+		return null;
+	}
+
+	await externalHooks.run('credential.saved', {
+		credential_type: credentialDetails.type,
+		credential_id: credential.id,
+		is_new: true,
+	});
 
-			this.showMessage({
-				title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
-				type: 'success',
+	telemetry.track('User created credentials', {
+		credential_type: credentialDetails.type,
+		credential_id: credential.id,
+		workflow_id: workflowsStore.workflowId,
+	});
+
+	return credential;
+}
+
+async function updateCredential(
+	credentialDetails: ICredentialsDecrypted,
+): Promise<ICredentialsResponse | null> {
+	let credential: ICredentialsResponse | null = null;
+	try {
+		if (credentialPermissions.value.update) {
+			credential = await credentialsStore.updateCredential({
+				id: credentialId.value,
+				data: credentialDetails,
 			});
-			this.closeDialog();
-		},
+		}
+		if (
+			credentialPermissions.value.share &&
+			isSharedWithChanged.value &&
+			credentialDetails.sharedWithProjects
+		) {
+			credential = await credentialsStore.setCredentialSharedWith({
+				credentialId: credentialDetails.id,
+				sharedWithProjects: credentialDetails.sharedWithProjects,
+			});
+			isSharedWithChanged.value = false;
+		}
+		hasUnsavedChanges.value = false;
 
-		async oAuthCredentialAuthorize() {
-			let url;
+		if (credential) {
+			await externalHooks.run('credential.saved', {
+				credential_type: credentialDetails.type,
+				credential_id: credential.id,
+				is_new: false,
+			});
+		}
+	} catch (error) {
+		toast.showError(
+			error,
+			i18n.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
+		);
 
-			const credential = await this.saveCredential();
-			if (!credential) {
-				return;
-			}
+		return null;
+	}
 
-			const types = this.parentTypes;
-
-			try {
-				const credData = { id: credential.id, ...this.credentialData };
-				if (this.credentialTypeName === 'oAuth2Api' || types.includes('oAuth2Api')) {
-					if (isValidCredentialResponse(credData)) {
-						url = await this.credentialsStore.oAuth2Authorize(credData);
-					}
-				} else if (this.credentialTypeName === 'oAuth1Api' || types.includes('oAuth1Api')) {
-					if (isValidCredentialResponse(credData)) {
-						url = await this.credentialsStore.oAuth1Authorize(credData);
-					}
-				}
-			} catch (error) {
-				this.showError(
-					error,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message',
-					),
-				);
-
-				return;
-			}
+	// Now that the credentials changed check if any nodes use credentials
+	// which have now a different name
+	nodeHelpers.updateNodesCredentialsIssues();
 
-			const params =
-				'scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700';
-			const oauthPopup = window.open(url, 'OAuth Authorization', params);
+	return credential;
+}
 
-			this.credentialData = {
-				...this.credentialData,
-				oauthTokenData: null as unknown as CredentialInformation,
-			};
+async function deleteCredential() {
+	if (!currentCredential.value) {
+		return;
+	}
 
-			const oauthChannel = new BroadcastChannel('oauth-callback');
-			const receiveMessage = (event: MessageEvent) => {
-				if (event.data === 'success') {
-					oauthChannel.removeEventListener('message', receiveMessage);
-
-					// Set some kind of data that status changes.
-					// As data does not get displayed directly it does not matter what data.
-					this.credentialData = {
-						...this.credentialData,
-						oauthTokenData: {} as CredentialInformation,
-					};
-
-					// Close the window
-					if (oauthPopup) {
-						oauthPopup.close();
-					}
-				}
-			};
-			oauthChannel.addEventListener('message', receiveMessage);
+	const savedCredentialName = currentCredential.value.name;
+
+	const deleteConfirmed = await message.confirm(
+		i18n.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.message', {
+			interpolate: { savedCredentialName },
+		}),
+		i18n.baseText('credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline'),
+		{
+			confirmButtonText: i18n.baseText(
+				'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+			),
 		},
-		async onAuthTypeChanged(type: string): Promise<void> {
-			if (!this.activeNodeType?.credentials) {
-				return;
-			}
-			const credentialsForType = getNodeCredentialForSelectedAuthType(this.activeNodeType, type);
-			if (credentialsForType) {
-				this.selectedCredential = credentialsForType.name;
-				this.resetCredentialData();
-				// Update current node auth type so credentials dropdown can be displayed properly
-				updateNodeAuthType(this.ndvStore.activeNode, type);
-				// Also update credential name but only if the default name is still used
-				if (this.hasUnsavedChanges && !this.hasUserSpecifiedName) {
-					const newDefaultName = await this.credentialsStore.getNewCredentialName({
-						credentialTypeName: this.defaultCredentialTypeName,
-					});
-					this.credentialName = newDefaultName;
-				}
+	);
+
+	if (deleteConfirmed !== MODAL_CONFIRM) {
+		return;
+	}
+
+	try {
+		isDeleting.value = true;
+		await credentialsStore.deleteCredential({ id: credentialId.value });
+		hasUnsavedChanges.value = false;
+	} catch (error) {
+		toast.showError(
+			error,
+			i18n.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
+		);
+		isDeleting.value = false;
+
+		return;
+	}
+
+	isDeleting.value = false;
+	// Now that the credentials were removed check if any nodes used them
+	nodeHelpers.updateNodesCredentialsIssues();
+	credentialData.value = {};
+
+	toast.showMessage({
+		title: i18n.baseText('credentialEdit.credentialEdit.showMessage.title'),
+		type: 'success',
+	});
+	closeDialog();
+}
+
+async function oAuthCredentialAuthorize() {
+	let url;
+
+	const credential = await saveCredential();
+	if (!credential) {
+		return;
+	}
+
+	const types = parentTypes.value;
+
+	try {
+		const credData = { id: credential.id, ...credentialData.value };
+		if (credentialTypeName.value === 'oAuth2Api' || types.includes('oAuth2Api')) {
+			if (isValidCredentialResponse(credData)) {
+				url = await credentialsStore.oAuth2Authorize(credData);
 			}
-		},
-		resetCredentialData(): void {
-			if (!this.credentialType) {
-				return;
+		} else if (credentialTypeName.value === 'oAuth1Api' || types.includes('oAuth1Api')) {
+			if (isValidCredentialResponse(credData)) {
+				url = await credentialsStore.oAuth1Authorize(credData);
 			}
-			for (const property of this.credentialType.properties) {
-				if (!this.credentialType.__overwrittenProperties?.includes(property.name)) {
-					this.credentialData = {
-						...this.credentialData,
-						[property.name]: property.default as CredentialInformation,
-					};
-				}
+		}
+	} catch (error) {
+		toast.showError(
+			error,
+			i18n.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title'),
+			i18n.baseText('credentialEdit.credentialEdit.showError.generateAuthorizationUrl.message'),
+		);
+
+		return;
+	}
+
+	const params =
+		'scrollbars=no,resizable=yes,status=no,titlebar=noe,location=no,toolbar=no,menubar=no,width=500,height=700';
+	const oauthPopup = window.open(url, 'OAuth Authorization', params);
+
+	credentialData.value = {
+		...credentialData.value,
+		oauthTokenData: null as unknown as CredentialInformation,
+	};
+
+	const oauthChannel = new BroadcastChannel('oauth-callback');
+	const receiveMessage = (event: MessageEvent) => {
+		if (event.data === 'success') {
+			oauthChannel.removeEventListener('message', receiveMessage);
+
+			// Set some kind of data that status changes.
+			// As data does not get displayed directly it does not matter what data.
+			credentialData.value = {
+				...credentialData.value,
+				oauthTokenData: {} as CredentialInformation,
+			};
+
+			// Close the window
+			if (oauthPopup) {
+				oauthPopup.close();
 			}
+		}
+	};
+	oauthChannel.addEventListener('message', receiveMessage);
+}
 
-			const { currentProject, personalProject } = this.projectsStore;
-			const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
-			const homeProject = currentProject ?? personalProject ?? {};
+async function onAuthTypeChanged(type: string): Promise<void> {
+	if (!activeNodeType.value?.credentials) {
+		return;
+	}
+	const credentialsForType = getNodeCredentialForSelectedAuthType(activeNodeType.value, type);
+	if (credentialsForType) {
+		selectedCredential.value = credentialsForType.name;
+		resetCredentialData();
+		// Update current node auth type so credentials dropdown can be displayed properly
+		updateNodeAuthType(ndvStore.activeNode, type);
+		// Also update credential name but only if the default name is still used
+		if (hasUnsavedChanges.value && !hasUserSpecifiedName.value) {
+			const newDefaultName = await credentialsStore.getNewCredentialName({
+				credentialTypeName: defaultCredentialTypeName.value,
+			});
+			credentialName.value = newDefaultName;
+		}
+	}
+}
 
-			this.credentialData = {
-				...this.credentialData,
-				scopes: scopes as unknown as CredentialInformation,
-				homeProject,
+function resetCredentialData(): void {
+	if (!credentialType.value) {
+		return;
+	}
+	for (const property of credentialType.value.properties) {
+		if (!credentialType.value.__overwrittenProperties?.includes(property.name)) {
+			credentialData.value = {
+				...credentialData.value,
+				[property.name]: property.default as CredentialInformation,
 			};
-		},
-	},
-});
+		}
+	}
+
+	const { currentProject, personalProject } = projectsStore;
+	const scopes = currentProject?.scopes ?? personalProject?.scopes ?? [];
+	const homeProject = currentProject ?? personalProject ?? {};
+
+	credentialData.value = {
+		...credentialData.value,
+		scopes: scopes as unknown as CredentialInformation,
+		homeProject,
+	};
+}
 </script>
 
 <style module lang="scss">
 .credentialModal {
-	--dialog-max-width: 900px;
+	--dialog-max-width: 1200px;
 	--dialog-close-top: 31px;
+	--dialog-max-height: 750px;
+
+	:global(.el-dialog__header) {
+		padding-bottom: 0;
+		border-bottom: var(--border-base);
+	}
+
+	:global(.el-dialog__body) {
+		padding-top: var(--spacing-l);
+		position: relative;
+	}
 }
 
 .mainContent {
diff --git a/packages/editor-ui/src/components/CredentialEdit/docs.ts b/packages/editor-ui/src/components/CredentialEdit/docs.ts
new file mode 100644
index 0000000000000..62f4ab51d057b
--- /dev/null
+++ b/packages/editor-ui/src/components/CredentialEdit/docs.ts
@@ -0,0 +1,7 @@
+import { i18n } from '../../plugins/i18n';
+
+export const CREDENTIAL_MARKDOWN_DOCS: Record<string, string> = {
+	aws: i18n.baseText('credentialEdit.docs.aws'),
+	gmailOAuth2: i18n.baseText('credentialEdit.docs.gmailOAuth2'),
+	openAiApi: i18n.baseText('credentialEdit.docs.openAiApi'),
+};
diff --git a/packages/editor-ui/src/components/Feedback.vue b/packages/editor-ui/src/components/Feedback.vue
index 3b6d8a4bed8af..30b4ddef6573e 100644
--- a/packages/editor-ui/src/components/Feedback.vue
+++ b/packages/editor-ui/src/components/Feedback.vue
@@ -52,11 +52,13 @@ function onFeedback(feedback: 'positive' | 'negative') {
 .feedback {
 	display: flex;
 	align-items: center;
+	gap: var(--spacing-4xs);
 
 	.feedback-button {
 		cursor: pointer;
-		width: var(--spacing-2xl);
-		height: var(--spacing-2xl);
+		width: var(--spacing-l);
+		height: var(--spacing-l);
+		color: var(--color-text-light);
 		display: flex;
 		justify-content: center;
 		align-items: center;
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index ead985dcd2d53..9e541e9324957 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -543,6 +543,8 @@
 	"credentialEdit.credentialInfo.created": "Created",
 	"credentialEdit.credentialInfo.id": "ID",
 	"credentialEdit.credentialInfo.lastModified": "Last modified",
+	"credentialEdit.credentialEdit.setupGuide": "Setup guide",
+	"credentialEdit.credentialEdit.docs": "Docs",
 	"credentialEdit.oAuthButton.connectMyAccount": "Connect my account",
 	"credentialEdit.oAuthButton.signInWithGoogle": "Sign in with Google",
 	"credentialEdit.credentialSharing.info.owner": "Sharing a credential allows people to use it in their workflows. They cannot access credential details.",
@@ -554,6 +556,9 @@
 	"credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText": "Remove",
 	"credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText": "Cancel",
 	"credentialEdit.credentialSharing.role.user": "User",
+	"credentialEdit.docs.aws": "Configure this credential:\n\n- Select your AWS **Region**.\n- Log in to your <a href=\"https://aws.amazon.com/\" target=\"_blank\">AWS</a> account.\n- Generate your access key pair:\n  - Open the AWS <a href=\"https://console.aws.amazon.com/iam\" target=\"_blank\">IAM console</a> and open your user menu.\n  - Select **Security credentials**.\n  - Create a new access key pair in the **Access Keys** section.\n  - Reveal the **Access Key ID** and **Secret Access Key** and enter them in n8n.\n- To use a **temporary security credential**, turn this option on and add a **Session token**.\n- If you use Amazon Virtual Private Cloud <a href=\"https://aws.amazon.com/vpc/\" target=\"_blank\">VPC</a> to host n8n, you can establish a connection between your VPC and some apps. Use **Custom Endpoints** to enter relevant custom endpoint(s) for this connection.\n\nClick the docs link above for more detailed instructions.",
+	"credentialEdit.docs.gmailOAuth2": "Configure this credential:\n\n- Log in to your <a href=\"https://cloud.google.com/\" target=\"_blank\">Google Cloud</a> account.\n- Go to <a href=\"https://console.cloud.google.com/apis/credentials\" target=\"_blank\">Google Cloud Console / APIs and services</a> and choose the project you want to use from the select at the top left (or create a new one and select it).\n- If you haven't used OAuth in this Google Cloud project before, <a href=\"https://developers.google.com/workspace/guides/configure-oauth-consent\" target=\"_blank\">configure the OAuth consent screen</a>.\n- In Credentials, select **+ CREATE CREDENTIALS > OAuth client ID**.\n- In the **Application type** dropdown, select **Web application**.\n- Under **Authorized redirect URIs**, select **+ ADD URI**. Paste in the OAuth redirect URL from n8n.\n- Select **Create**.\n- In Enabled APIs and services, select **+ ENABLE APIS AND SERVICES**.\n- Select and enable the Gmail API.\n- Back to Credentials, click on the credential in OAuth 2.0 Client IDs, and on the credential page, you will find the Client ID and Client Secret.\n\nClick the docs link above for more detailed instructions.",
+	"credentialEdit.docs.openAiApi": "Configure this credential:\n\n- Log in to your <a href=\"https://openai.com/\" target=\"_blank\">OpenAI</a> account.\n- Open your OpenAI <a href=\"https://platform.openai.com/api-keys\" target=\"_blank\">API keys</a> page to create an **API key**.\n- Enter an **Organization ID** if you belong to multiple organizations; otherwise, leave blank. Open your OpenAI <a href=\"https://platform.openai.com/account/organization\" target=\"_blank\">Organization Settings</a> page to get your Organization ID.\n\nClick the docs link above for more detailed instructions.",
 	"credentialSelectModal.addNewCredential": "Add new credential",
 	"credentialSelectModal.continue": "Continue",
 	"credentialSelectModal.searchForApp": "Search for app...",