From 93d693bda0aaa83e2dd243057a1a3194f6bfdec0 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 14:20:30 -0500
Subject: [PATCH 01/10] make sure `isManaged` is always return

also validates that managed credentials cannot be edited
---
 packages/cli/test/integration/shared/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/test/integration/shared/types.ts b/packages/cli/test/integration/shared/types.ts
index 2a789e4f00d0e..c6261c57d143f 100644
--- a/packages/cli/test/integration/shared/types.ts
+++ b/packages/cli/test/integration/shared/types.ts
@@ -69,7 +69,7 @@ export type CredentialPayload = {
 	name: string;
 	type: string;
 	data: ICredentialDataDecryptedObject;
-	isManaged?: boolean;
+	isManaged: boolean;
 };
 
 export type SaveCredentialFunction = (

From 6500400aba2f9c11f732a0b1f9e3a3a1d92927c9 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 14:25:01 -0500
Subject: [PATCH 02/10] make `isManaged` optional

---
 packages/cli/test/integration/shared/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/cli/test/integration/shared/types.ts b/packages/cli/test/integration/shared/types.ts
index c6261c57d143f..2a789e4f00d0e 100644
--- a/packages/cli/test/integration/shared/types.ts
+++ b/packages/cli/test/integration/shared/types.ts
@@ -69,7 +69,7 @@ export type CredentialPayload = {
 	name: string;
 	type: string;
 	data: ICredentialDataDecryptedObject;
-	isManaged: boolean;
+	isManaged?: boolean;
 };
 
 export type SaveCredentialFunction = (

From 09a57688ecc804fe49c3681462422b98c6aa8b69 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 15:29:43 -0500
Subject: [PATCH 03/10] Add free AI credits CTA

---
 .../CredentialEdit/CredentialConfig.vue       |   6 +-
 .../CredentialEdit/CredentialEdit.vue         |  14 +-
 .../src/components/FreeAiCreditsCallout.vue   | 132 ++++++++++++++++++
 .../editor-ui/src/components/NodeSettings.vue |   2 +
 .../src/plugins/i18n/locales/en.json          |   8 +-
 packages/editor-ui/src/plugins/icons/index.ts |   2 +
 6 files changed, 161 insertions(+), 3 deletions(-)
 create mode 100644 packages/editor-ui/src/components/FreeAiCreditsCallout.vue

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index fa754304faed7..45c18028520e1 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -55,6 +55,7 @@ type Props = {
 	isRetesting?: boolean;
 	requiredPropertiesFilled?: boolean;
 	showAuthTypeSelector?: boolean;
+	isManaged?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -235,7 +236,10 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 </script>
 
 <template>
-	<div>
+	<n8n-callout v-if="isManaged" theme="warning" icon="exclamation-triangle">
+		{{ i18n.baseText('freeAi.credits.credentials.edit') }}
+	</n8n-callout>
+	<div v-else>
 		<div :class="$style.config" data-test-id="node-credentials-config-container">
 			<Banner
 				v-show="showValidationWarning"
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index e85184a11c12c..1720cb5e00aed 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -160,6 +160,11 @@ const credentialTypeName = computed(() => {
 	return `${props.activeId}`;
 });
 
+const isEditingManagedCredential = computed(() => {
+	if (!props.activeId) return false;
+	return credentialsStore.getCredentialById(props.activeId)?.isManaged ?? false;
+});
+
 const isCredentialTestable = computed(() => {
 	if (isOAuthType.value || !requiredPropertiesFilled.value) {
 		return false;
@@ -597,6 +602,10 @@ function scrollToBottom() {
 }
 
 async function retestCredential() {
+	if (isEditingManagedCredential.value) {
+		return;
+	}
+
 	if (!isCredentialTestable.value || !credentialTypeName.value) {
 		authError.value = '';
 		testedSuccessfully.value = false;
@@ -1061,7 +1070,9 @@ function resetCredentialData(): void {
 					<InlineNameEdit
 						:model-value="credentialName"
 						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.update || !credentialType"
+						:readonly="
+							!credentialPermissions.update || !credentialType || isEditingManagedCredential
+						"
 						type="Credential"
 						data-test-id="credential-name"
 						@update:model-value="onNameEdit"
@@ -1113,6 +1124,7 @@ function resetCredentialData(): void {
 						:credential-properties="credentialProperties"
 						:credential-data="credentialData"
 						:credential-id="credentialId"
+						:is-managed="isEditingManagedCredential"
 						:show-validation-warning="showValidationWarning"
 						:auth-error="authError"
 						:tested-successfully="testedSuccessfully"
diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
new file mode 100644
index 0000000000000..35267126e4ed7
--- /dev/null
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { claimFreeAiCredits } from '@/api/ai';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
+import { AI_CREDITS_EXPERIMENT } from '@/constants';
+import type { ICredentialsResponse } from '@/Interface';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { usePostHog } from '@/stores/posthog.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { useRootStore } from '@/stores/root.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { computed, ref } from 'vue';
+
+const OPEN_AI_API_CREDENTIAL_TYPE = 'openAiApi';
+
+const LANGCHAIN_NODES_PREFIX = '@n8n/n8n-nodes-langchain.';
+
+const N8N_NODES_PREFIX = '@n8n/n8n-nodes.';
+
+const NODES_WITH_OPEN_AI_API_CREDENTIAL = [
+	`${LANGCHAIN_NODES_PREFIX}openAi`,
+	`${LANGCHAIN_NODES_PREFIX}embeddingsOpenAi`,
+	`${LANGCHAIN_NODES_PREFIX}lmChatOpenAi`,
+	`${N8N_NODES_PREFIX}openAi`,
+];
+
+const showSuccessCallout = ref(false);
+const claimingCredits = ref(false);
+
+const settingsStore = useSettingsStore();
+const postHogStore = usePostHog();
+const credentialsStore = useCredentialsStore();
+const usersStore = useUsersStore();
+const ndvStore = useNDVStore();
+const projectsStore = useProjectsStore();
+const rootStore = useRootStore();
+
+const i18n = useI18n();
+const toast = useToast();
+
+const userHasOpenAiCredentialAlready = computed(
+	() =>
+		!!credentialsStore.allCredentials.filter(
+			(credential) => credential.type === OPEN_AI_API_CREDENTIAL_TYPE,
+		).length,
+);
+
+const userHasClaimedAiCreditsAlready = computed(
+	() => !!usersStore.currentUser?.settings?.userClaimedAiCredits,
+);
+
+const activeNodeHasOpenAiApiCredential = computed(
+	() =>
+		ndvStore.activeNode?.type &&
+		NODES_WITH_OPEN_AI_API_CREDENTIAL.includes(ndvStore.activeNode.type),
+);
+
+const userCanClaimOpenAiCredits = computed(() => {
+	return (
+		settingsStore.isAiCreditsEnabled &&
+		activeNodeHasOpenAiApiCredential.value &&
+		postHogStore.isFeatureEnabled(AI_CREDITS_EXPERIMENT.name) &&
+		!userHasOpenAiCredentialAlready.value &&
+		!userHasClaimedAiCreditsAlready.value
+	);
+});
+
+const onClaimCreditsClicked = async () => {
+	claimingCredits.value = true;
+
+	try {
+		const credentials = await claimFreeAiCredits(rootStore.restApiContext, {
+			projectId: projectsStore.currentProject?.id,
+		});
+
+		credentialsStore.upsertCredential(credentials as unknown as ICredentialsResponse);
+
+		if (usersStore?.currentUser?.settings) {
+			usersStore.currentUser.settings.userClaimedAiCredits = true;
+		}
+
+		showSuccessCallout.value = true;
+	} catch (e) {
+		toast.showError(
+			e,
+			i18n.baseText('freeAi.credits.showError.claim.title'),
+			i18n.baseText('freeAi.credits.showError.claim.message'),
+		);
+	} finally {
+		claimingCredits.value = false;
+	}
+};
+</script>
+<template>
+	<div :class="$style['container']">
+		<n8n-callout
+			v-if="userCanClaimOpenAiCredits && !showSuccessCallout"
+			theme="secondary"
+			icon="exclamation-circle"
+		>
+			{{
+				i18n.baseText('freeAi.credits.callout.claim.title', {
+					interpolate: { credits: settingsStore.aiCreditsQuota },
+				})
+			}}
+			<template #trailingContent>
+				<n8n-button
+					type="tertiary"
+					size="small"
+					:label="i18n.baseText('freeAi.credits.callout.claim.button.label')"
+					:loading="claimingCredits"
+					@click="onClaimCreditsClicked"
+				/>
+			</template>
+		</n8n-callout>
+		<n8n-callout v-else-if="showSuccessCallout" theme="success" icon="check-circle">
+			{{
+				i18n.baseText('freeAi.credits.callout.success.title', {
+					interpolate: { credits: settingsStore.aiCreditsQuota },
+				})
+			}}
+		</n8n-callout>
+	</div>
+</template>
+
+<style lang="scss" module>
+.container {
+	margin-top: var(--spacing-xs);
+}
+</style>
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index c7e41fb00fc3b..49cb19ca71ae2 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -48,6 +48,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 import { importCurlEventBus, ndvEventBus } from '@/event-bus';
 import { ProjectTypes } from '@/types/projects.types';
 import { updateDynamicConnections } from '@/utils/nodeSettingsUtils';
+import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
 
 const props = withDefaults(
 	defineProps<{
@@ -1026,6 +1027,7 @@ onBeforeUnmount(() => {
 					})
 				"
 			/>
+			<FreeAiCreditsCallout />
 			<div v-show="openPanel === 'params'">
 				<NodeWebhooks :node="node" :node-type-description="nodeType" />
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index c599ffd33b677..9f548e5b5296a 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -2803,5 +2803,11 @@
 	"testDefinition.notImplemented": "This feature is not implemented yet!",
 	"testDefinition.viewDetails": "View Details",
 	"testDefinition.editTest": "Edit Test",
-	"testDefinition.deleteTest": "Delete Test"
+	"testDefinition.deleteTest": "Delete Test",
+	"freeAi.credits.callout.claim.title": "Get {credits} free OpenAI API credits",
+	"freeAi.credits.callout.claim.button.label": "Claim credits",
+	"freeAi.credits.callout.success.title": "Claimed {credits} free OpenAI API credits",
+	"freeAi.credits.credentials.edit": "This is a managed credential and cannot be edited.",
+	"freeAi.credits.showError.claim.title": "Free AI credits",
+	"freeAi.credits.showError.claim.message": "Enable to claim credits"
 }
diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts
index 561ad6afbf1c0..7d4ab226718b5 100644
--- a/packages/editor-ui/src/plugins/icons/index.ts
+++ b/packages/editor-ui/src/plugins/icons/index.ts
@@ -162,6 +162,7 @@ import {
 	faStream,
 	faPowerOff,
 	faPaperPlane,
+	faExclamationCircle,
 } from '@fortawesome/free-solid-svg-icons';
 import { faVariable, faXmark, faVault, faRefresh } from './custom';
 import { faStickyNote } from '@fortawesome/free-regular-svg-icons';
@@ -227,6 +228,7 @@ export const FontAwesomePlugin: Plugin = {
 		addIcon(faEquals);
 		addIcon(faEye);
 		addIcon(faExclamationTriangle);
+		addIcon(faExclamationCircle);
 		addIcon(faExpand);
 		addIcon(faExpandAlt);
 		addIcon(faExternalLinkAlt);

From 940d88cea6eb1121cdd2315da732591247330e42 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 15:37:35 -0500
Subject: [PATCH 04/10] fix typing issue

---
 packages/editor-ui/src/Interface.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 1f799a3fa168f..ee54891261a23 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -364,6 +364,7 @@ export interface ICredentialsResponse extends ICredentialsEncrypted {
 	currentUserHasAccess?: boolean;
 	scopes?: Scope[];
 	ownedBy?: Pick<IUserResponse, 'id' | 'firstName' | 'lastName' | 'email'>;
+	isManaged: boolean;
 }
 
 export interface ICredentialsBase {

From 794fa7934ebb6c63c0bd4bc3c94ca05a7afd3a51 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 15:46:15 -0500
Subject: [PATCH 05/10] fix some typing issues

---
 .../editor-ui/src/__tests__/server/factories/credential.ts    | 3 +++
 packages/editor-ui/src/components/CredentialCard.test.ts      | 1 +
 packages/editor-ui/src/components/CredentialCard.vue          | 1 +
 packages/editor-ui/src/views/CredentialsView.test.ts          | 4 ++++
 .../__tests__/setupTemplate.store.testData.ts                 | 1 +
 5 files changed, 10 insertions(+)

diff --git a/packages/editor-ui/src/__tests__/server/factories/credential.ts b/packages/editor-ui/src/__tests__/server/factories/credential.ts
index 1cd28a06e6fac..5612d0d4d9658 100644
--- a/packages/editor-ui/src/__tests__/server/factories/credential.ts
+++ b/packages/editor-ui/src/__tests__/server/factories/credential.ts
@@ -18,4 +18,7 @@ export const credentialFactory = Factory.extend<ICredentialsResponse>({
 	updatedAt() {
 		return '';
 	},
+	isManaged() {
+		return false;
+	},
 });
diff --git a/packages/editor-ui/src/components/CredentialCard.test.ts b/packages/editor-ui/src/components/CredentialCard.test.ts
index 7b3abc6acb54e..e21edf0321ecc 100644
--- a/packages/editor-ui/src/components/CredentialCard.test.ts
+++ b/packages/editor-ui/src/components/CredentialCard.test.ts
@@ -17,6 +17,7 @@ const createCredential = (overrides = {}): ICredentialsResponse => ({
 	type: '',
 	name: '',
 	sharedWithProjects: [],
+	isManaged: false,
 	homeProject: {} as ProjectSharingData,
 	...overrides,
 });
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index c39166f15aa3c..d82c67d83ee87 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -39,6 +39,7 @@ const props = withDefaults(
 			name: '',
 			sharedWithProjects: [],
 			homeProject: {} as ProjectSharingData,
+			isManaged: false,
 		}),
 		readOnly: false,
 	},
diff --git a/packages/editor-ui/src/views/CredentialsView.test.ts b/packages/editor-ui/src/views/CredentialsView.test.ts
index a9104db1dcd61..482cf6e767ca7 100644
--- a/packages/editor-ui/src/views/CredentialsView.test.ts
+++ b/packages/editor-ui/src/views/CredentialsView.test.ts
@@ -59,6 +59,7 @@ describe('CredentialsView', () => {
 				type: 'test',
 				createdAt: '2021-05-05T00:00:00Z',
 				updatedAt: '2021-05-05T00:00:00Z',
+				isManaged: false,
 			},
 		];
 		const projectsStore = mockedStore(useProjectsStore);
@@ -77,6 +78,7 @@ describe('CredentialsView', () => {
 				createdAt: '2021-05-05T00:00:00Z',
 				updatedAt: '2021-05-05T00:00:00Z',
 				scopes: ['credential:update'],
+				isManaged: false,
 			},
 			{
 				id: '2',
@@ -84,6 +86,7 @@ describe('CredentialsView', () => {
 				type: 'test2',
 				createdAt: '2021-05-05T00:00:00Z',
 				updatedAt: '2021-05-05T00:00:00Z',
+				isManaged: false,
 			},
 		];
 		const projectsStore = mockedStore(useProjectsStore);
@@ -124,6 +127,7 @@ describe('CredentialsView', () => {
 					createdAt: '2021-05-05T00:00:00Z',
 					updatedAt: '2021-05-05T00:00:00Z',
 					scopes: ['credential:update'],
+					isManaged: false,
 				},
 			];
 			const { getByTestId } = renderComponent();
diff --git a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/__tests__/setupTemplate.store.testData.ts b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/__tests__/setupTemplate.store.testData.ts
index be05e5b18e37b..b75373f93fa1a 100644
--- a/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/__tests__/setupTemplate.store.testData.ts
+++ b/packages/editor-ui/src/views/SetupWorkflowFromTemplateView/__tests__/setupTemplate.store.testData.ts
@@ -51,5 +51,6 @@ export const newCredential = (
 	updatedAt: faker.date.past().toISOString(),
 	id: faker.string.alphanumeric({ length: 16 }),
 	name: faker.commerce.productName(),
+	isManaged: false,
 	...opts,
 });

From 7809e1c8a1b14e0ee98687e757942a1b7a4733e0 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Tue, 24 Dec 2024 18:38:16 -0500
Subject: [PATCH 06/10] add tests to `FreeAiCreditsCallout` component

---
 .../components/FreeAiCreditsCallout.test.ts   | 186 ++++++++++++++++++
 1 file changed, 186 insertions(+)
 create mode 100644 packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts

diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts b/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts
new file mode 100644
index 0000000000000..c84027c0dc426
--- /dev/null
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts
@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, screen } from '@testing-library/vue';
+import FreeAiCreditsCallout from '@/components/FreeAiCreditsCallout.vue';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useNDVStore } from '@/stores/ndv.store';
+import { usePostHog } from '@/stores/posthog.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { useRootStore } from '@/stores/root.store';
+import { useToast } from '@/composables/useToast';
+import { renderComponent } from '@/__tests__/render';
+import { claimFreeAiCredits } from '@/api/ai';
+
+vi.mock('@/composables/useToast', () => ({
+	useToast: vi.fn(),
+}));
+
+vi.mock('@/stores/settings.store', () => ({
+	useSettingsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/credentials.store', () => ({
+	useCredentialsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/users.store', () => ({
+	useUsersStore: vi.fn(),
+}));
+
+vi.mock('@/stores/ndv.store', () => ({
+	useNDVStore: vi.fn(),
+}));
+
+vi.mock('@/stores/posthog.store', () => ({
+	usePostHog: vi.fn(),
+}));
+
+vi.mock('@/stores/projects.store', () => ({
+	useProjectsStore: vi.fn(),
+}));
+
+vi.mock('@/stores/root.store', () => ({
+	useRootStore: vi.fn(),
+}));
+
+vi.mock('@/api/ai', () => ({
+	claimFreeAiCredits: vi.fn(),
+}));
+
+const assertUserCannotClaimCredits = () => {
+	expect(screen.queryByText('Get 100 free OpenAI API credits')).not.toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).not.toBeInTheDocument();
+};
+
+const assertUserCanClaimCredits = () => {
+	expect(screen.getByText('Get 100 free OpenAI API credits')).toBeInTheDocument();
+	expect(screen.queryByRole('button', { name: 'Claim credits' })).toBeInTheDocument();
+};
+
+const assertUserClaimedCredits = () => {
+	expect(screen.getByText('Claimed 100 free OpenAI API credits')).toBeInTheDocument();
+};
+
+describe('FreeAiCreditsCallout', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: true,
+			aiCreditsQuota: 100,
+		});
+
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [],
+			upsertCredential: vi.fn(),
+		});
+
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: false,
+				},
+			},
+		});
+
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes-langchain.openAi' },
+		});
+
+		(usePostHog as any).mockReturnValue({
+			isFeatureEnabled: vi.fn().mockReturnValue(true),
+		});
+
+		(useProjectsStore as any).mockReturnValue({
+			currentProject: { id: 'test-project-id' },
+		});
+
+		(useRootStore as any).mockReturnValue({
+			restApiContext: {},
+		});
+
+		(useToast as any).mockReturnValue({
+			showError: vi.fn(),
+		});
+	});
+
+	it('should shows the claim callout when the user can claim credits', () => {
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCanClaimCredits();
+	});
+
+	it('should show success callout when credit are claimed', async () => {
+		renderComponent(FreeAiCreditsCallout);
+
+		const claimButton = screen.getByRole('button', {
+			name: 'Claim credits',
+		});
+
+		await fireEvent.click(claimButton);
+
+		expect(claimFreeAiCredits).toHaveBeenCalledWith({}, { projectId: 'test-project-id' });
+		assertUserClaimedCredits();
+	});
+
+	it('should not be able to claim credits is user already claimed credits', async () => {
+		(useUsersStore as any).mockReturnValue({
+			currentUser: {
+				settings: {
+					userClaimedAiCredits: true,
+				},
+			},
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits is user does not have ai credits enabled', async () => {
+		(useSettingsStore as any).mockReturnValue({
+			isAiCreditsEnabled: false,
+			aiCreditsQuota: 0,
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user it is not in experiment', async () => {
+		(usePostHog as any).mockReturnValue({
+			isFeatureEnabled: vi.fn().mockReturnValue(false),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if user already has OpenAiApi credential', async () => {
+		(useCredentialsStore as any).mockReturnValue({
+			allCredentials: [
+				{
+					type: 'openAiApi',
+				},
+			],
+			upsertCredential: vi.fn(),
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+
+	it('should not be able to claim credits if active node it is not a valid node', async () => {
+		(useNDVStore as any).mockReturnValue({
+			activeNode: { type: '@n8n/n8n-nodes.jira' },
+		});
+
+		renderComponent(FreeAiCreditsCallout);
+
+		assertUserCannotClaimCredits();
+	});
+});

From 81c8a2842000197e648758a4513b3b834cd5f349 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 25 Dec 2024 17:38:21 -0500
Subject: [PATCH 07/10] add tests to CredentialConfig

---
 .../src/components/CredentialConfig.test.ts   | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 packages/editor-ui/src/components/CredentialConfig.test.ts

diff --git a/packages/editor-ui/src/components/CredentialConfig.test.ts b/packages/editor-ui/src/components/CredentialConfig.test.ts
new file mode 100644
index 0000000000000..b84fcb3eaeb55
--- /dev/null
+++ b/packages/editor-ui/src/components/CredentialConfig.test.ts
@@ -0,0 +1,56 @@
+import CredentialConfig from './CredentialEdit/CredentialConfig.vue';
+import { screen } from '@testing-library/vue';
+import type { ICredentialDataDecryptedObject, ICredentialType } from 'n8n-workflow';
+import { createTestingPinia } from '@pinia/testing';
+import type { RenderOptions } from '@/__tests__/render';
+import { createComponentRenderer } from '@/__tests__/render';
+import { STORES } from '@/constants';
+
+const defaultRenderOptions: RenderOptions = {
+	pinia: createTestingPinia({
+		initialState: {
+			[STORES.SETTINGS]: {
+				settings: {
+					enterprise: {
+						sharing: false,
+						externalSecrets: false,
+					},
+				},
+			},
+		},
+	}),
+	props: {
+		isManaged: true,
+		mode: 'edit',
+		credentialType: {} as ICredentialType,
+		credentialProperties: [],
+		credentialData: {} as ICredentialDataDecryptedObject,
+		credentialPermissions: {
+			share: false,
+			move: false,
+			create: false,
+			read: false,
+			update: false,
+			delete: false,
+			list: false,
+		},
+	},
+};
+
+const renderComponent = createComponentRenderer(CredentialConfig, defaultRenderOptions);
+
+describe('CredentialConfig', () => {
+	it('should display a warning when isManaged is true', async () => {
+		renderComponent();
+		expect(
+			screen.queryByText('This is a managed credential and cannot be edited.'),
+		).toBeInTheDocument();
+	});
+
+	it('should not display a warning when isManaged is false', async () => {
+		renderComponent({ props: { isManaged: false } }, { merge: true });
+		expect(
+			screen.queryByText('This is a managed credential and cannot be edited.'),
+		).not.toBeInTheDocument();
+	});
+});

From dd335206f60f3399601978637713c5b80231e92f Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 25 Dec 2024 17:58:48 -0500
Subject: [PATCH 08/10] small refactor and update tests

---
 .../components/FreeAiCreditsCallout.test.ts   | 11 ++++----
 .../src/components/FreeAiCreditsCallout.vue   |  7 +----
 .../editor-ui/src/stores/credentials.store.ts | 26 +++++++++----------
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts b/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts
index c84027c0dc426..667b3e3efd42f 100644
--- a/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.test.ts
@@ -10,7 +10,7 @@ import { useProjectsStore } from '@/stores/projects.store';
 import { useRootStore } from '@/stores/root.store';
 import { useToast } from '@/composables/useToast';
 import { renderComponent } from '@/__tests__/render';
-import { claimFreeAiCredits } from '@/api/ai';
+import { mockedStore } from '@/__tests__/utils';
 
 vi.mock('@/composables/useToast', () => ({
 	useToast: vi.fn(),
@@ -44,10 +44,6 @@ vi.mock('@/stores/root.store', () => ({
 	useRootStore: vi.fn(),
 }));
 
-vi.mock('@/api/ai', () => ({
-	claimFreeAiCredits: vi.fn(),
-}));
-
 const assertUserCannotClaimCredits = () => {
 	expect(screen.queryByText('Get 100 free OpenAI API credits')).not.toBeInTheDocument();
 	expect(screen.queryByRole('button', { name: 'Claim credits' })).not.toBeInTheDocument();
@@ -74,6 +70,7 @@ describe('FreeAiCreditsCallout', () => {
 		(useCredentialsStore as any).mockReturnValue({
 			allCredentials: [],
 			upsertCredential: vi.fn(),
+			claimFreeAiCredits: vi.fn(),
 		});
 
 		(useUsersStore as any).mockReturnValue({
@@ -112,6 +109,8 @@ describe('FreeAiCreditsCallout', () => {
 	});
 
 	it('should show success callout when credit are claimed', async () => {
+		const credentialsStore = mockedStore(useCredentialsStore);
+
 		renderComponent(FreeAiCreditsCallout);
 
 		const claimButton = screen.getByRole('button', {
@@ -120,7 +119,7 @@ describe('FreeAiCreditsCallout', () => {
 
 		await fireEvent.click(claimButton);
 
-		expect(claimFreeAiCredits).toHaveBeenCalledWith({}, { projectId: 'test-project-id' });
+		expect(credentialsStore.claimFreeAiCredits).toHaveBeenCalledWith('test-project-id');
 		assertUserClaimedCredits();
 	});
 
diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
index 35267126e4ed7..990182c1f3db8 100644
--- a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -35,7 +35,6 @@ const credentialsStore = useCredentialsStore();
 const usersStore = useUsersStore();
 const ndvStore = useNDVStore();
 const projectsStore = useProjectsStore();
-const rootStore = useRootStore();
 
 const i18n = useI18n();
 const toast = useToast();
@@ -71,11 +70,7 @@ const onClaimCreditsClicked = async () => {
 	claimingCredits.value = true;
 
 	try {
-		const credentials = await claimFreeAiCredits(rootStore.restApiContext, {
-			projectId: projectsStore.currentProject?.id,
-		});
-
-		credentialsStore.upsertCredential(credentials as unknown as ICredentialsResponse);
+		await credentialsStore.claimFreeAiCredits(projectsStore.currentProject?.id);
 
 		if (usersStore?.currentUser?.settings) {
 			usersStore.currentUser.settings.userClaimedAiCredits = true;
diff --git a/packages/editor-ui/src/stores/credentials.store.ts b/packages/editor-ui/src/stores/credentials.store.ts
index 4e87eaaf98567..d04b96242cee7 100644
--- a/packages/editor-ui/src/stores/credentials.store.ts
+++ b/packages/editor-ui/src/stores/credentials.store.ts
@@ -26,6 +26,7 @@ import { computed, ref } from 'vue';
 import { useNodeTypesStore } from './nodeTypes.store';
 import { useRootStore } from './root.store';
 import { useSettingsStore } from './settings.store';
+import * as aiApi from '@/api/ai';
 
 const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
 const DEFAULT_CREDENTIAL_POSTFIX = 'account';
@@ -36,6 +37,8 @@ export type CredentialsStore = ReturnType<typeof useCredentialsStore>;
 export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	const state = ref<ICredentialsState>({ credentialTypes: {}, credentials: {} });
 
+	const rootStore = useRootStore();
+
 	// ---------------------------------------------------------------------------
 	// #region Computed
 	// ---------------------------------------------------------------------------
@@ -252,7 +255,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		if (allCredentialTypes.value.length > 0 && !forceFetch) {
 			return;
 		}
-		const rootStore = useRootStore();
 		const credentialTypes = await credentialsApi.getCredentialTypes(rootStore.baseUrl);
 		setCredentialTypes(credentialTypes);
 	};
@@ -261,8 +263,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		projectId?: string,
 		includeScopes = true,
 	): Promise<ICredentialsResponse[]> => {
-		const rootStore = useRootStore();
-
 		const filter = {
 			projectId,
 		};
@@ -279,8 +279,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	const fetchAllCredentialsForWorkflow = async (
 		options: { workflowId: string } | { projectId: string },
 	): Promise<ICredentialsResponse[]> => {
-		const rootStore = useRootStore();
-
 		const credentials = await credentialsApi.getAllCredentialsForWorkflow(
 			rootStore.restApiContext,
 			options,
@@ -294,7 +292,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	}: {
 		id: string;
 	}): Promise<ICredentialsResponse | ICredentialsDecryptedResponse | undefined> => {
-		const rootStore = useRootStore();
 		return await credentialsApi.getCredentialData(rootStore.restApiContext, id);
 	};
 
@@ -302,7 +299,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		data: ICredentialsDecrypted,
 		projectId?: string,
 	): Promise<ICredentialsResponse> => {
-		const rootStore = useRootStore();
 		const settingsStore = useSettingsStore();
 		const credential = await credentialsApi.createNewCredential(
 			rootStore.restApiContext,
@@ -333,7 +329,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		id: string;
 	}): Promise<ICredentialsResponse> => {
 		const { id, data } = params;
-		const rootStore = useRootStore();
 		const credential = await credentialsApi.updateCredential(rootStore.restApiContext, id, data);
 
 		upsertCredential(credential);
@@ -342,7 +337,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	};
 
 	const deleteCredential = async ({ id }: { id: string }) => {
-		const rootStore = useRootStore();
 		const deleted = await credentialsApi.deleteCredential(rootStore.restApiContext, id);
 		if (deleted) {
 			const { [id]: deletedCredential, ...rest } = state.value.credentials;
@@ -351,19 +345,16 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	};
 
 	const oAuth2Authorize = async (data: ICredentialsResponse): Promise<string> => {
-		const rootStore = useRootStore();
 		return await credentialsApi.oAuth2CredentialAuthorize(rootStore.restApiContext, data);
 	};
 
 	const oAuth1Authorize = async (data: ICredentialsResponse): Promise<string> => {
-		const rootStore = useRootStore();
 		return await credentialsApi.oAuth1CredentialAuthorize(rootStore.restApiContext, data);
 	};
 
 	const testCredential = async (
 		data: ICredentialsDecrypted,
 	): Promise<INodeCredentialTestResult> => {
-		const rootStore = useRootStore();
 		return await credentialsApi.testCredential(rootStore.restApiContext, { credentials: data });
 	};
 
@@ -377,7 +368,6 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 				newName =
 					newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
 			}
-			const rootStore = useRootStore();
 			const res = await credentialsApi.getCredentialsNewName(rootStore.restApiContext, newName);
 			return res.name;
 		} catch (e) {
@@ -407,12 +397,19 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 	};
 
 	const getCredentialTranslation = async (credentialType: string): Promise<object> => {
-		const rootStore = useRootStore();
 		return await makeRestApiRequest(rootStore.restApiContext, 'GET', '/credential-translation', {
 			credentialType,
 		});
 	};
 
+	const claimFreeAiCredits = async (projectId?: string): Promise<ICredentialsResponse> => {
+		const credential = await aiApi.claimFreeAiCredits(rootStore.restApiContext, {
+			projectId,
+		});
+		upsertCredential(credential);
+		return credential;
+	};
+
 	// #endregion
 
 	return {
@@ -449,6 +446,7 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, () => {
 		testCredential,
 		getCredentialTranslation,
 		setCredentialSharedWith,
+		claimFreeAiCredits,
 	};
 });
 

From e38df6fc6cd56974740a6b0482d5841a39a3c878 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Wed, 25 Dec 2024 18:09:38 -0500
Subject: [PATCH 09/10] fix linting issues

---
 packages/editor-ui/src/components/FreeAiCreditsCallout.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
index 990182c1f3db8..084cbca4ec34a 100644
--- a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import { claimFreeAiCredits } from '@/api/ai';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
 import { AI_CREDITS_EXPERIMENT } from '@/constants';
-import type { ICredentialsResponse } from '@/Interface';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { usePostHog } from '@/stores/posthog.store';
 import { useProjectsStore } from '@/stores/projects.store';
-import { useRootStore } from '@/stores/root.store';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useUsersStore } from '@/stores/users.store';
 import { computed, ref } from 'vue';

From f812117b96a2ea8fa16b825109c61ade2a1b71c6 Mon Sep 17 00:00:00 2001
From: Ricardo Espinoza <ricardo@n8n.io>
Date: Fri, 27 Dec 2024 10:27:22 -0500
Subject: [PATCH 10/10] use prebuild mt-xs class

---
 .../editor-ui/src/components/FreeAiCreditsCallout.vue     | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
index 084cbca4ec34a..29f99a0e48c37 100644
--- a/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
+++ b/packages/editor-ui/src/components/FreeAiCreditsCallout.vue
@@ -86,7 +86,7 @@ const onClaimCreditsClicked = async () => {
 };
 </script>
 <template>
-	<div :class="$style['container']">
+	<div class="mt-xs">
 		<n8n-callout
 			v-if="userCanClaimOpenAiCredits && !showSuccessCallout"
 			theme="secondary"
@@ -116,9 +116,3 @@ const onClaimCreditsClicked = async () => {
 		</n8n-callout>
 	</div>
 </template>
-
-<style lang="scss" module>
-.container {
-	margin-top: var(--spacing-xs);
-}
-</style>