From 4035c4431be3bb1dbb4e98b67380dd971d9a26d4 Mon Sep 17 00:00:00 2001
From: Shireen Missi <shireen@n8n.io>
Date: Wed, 4 Sep 2024 09:26:20 +0100
Subject: [PATCH] add A/B testing feature flag

---
 .../CredentialEdit/CredentialConfig.vue           | 15 +++++++++++++--
 packages/editor-ui/src/constants.ts               |  7 ++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index 86e8c65e1cfde..2f2f141d23b59 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -13,7 +13,12 @@ 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 {
+	BUILTIN_CREDENTIALS_DOCS_URL,
+	CREDENTIAL_DOCS_EXPERIMENT,
+	DOCS_DOMAIN,
+	EnterpriseEditionFeature,
+} from '@/constants';
 import type { PermissionsRecord } from '@/permissions';
 import { addCredentialTranslation } from '@/plugins/i18n';
 import { useCredentialsStore } from '@/stores/credentials.store';
@@ -28,6 +33,7 @@ import GoogleAuthButton from './GoogleAuthButton.vue';
 import OauthButton from './OauthButton.vue';
 import CredentialDocs from './CredentialDocs.vue';
 import { CREDENTIAL_MARKDOWN_DOCS } from './docs';
+import { usePostHog } from '@/stores/posthog.store';
 
 type Props = {
 	mode: string;
@@ -162,6 +168,11 @@ const isMissingCredentials = computed(() => props.credentialType === null);
 const isNewCredential = computed(() => props.mode === 'new' && !props.credentialId);
 
 const docs = computed(() => CREDENTIAL_MARKDOWN_DOCS[props.credentialType.name]);
+const showCredentialDocs = computed(
+	() =>
+		usePostHog().getVariant(CREDENTIAL_DOCS_EXPERIMENT.name) ===
+			CREDENTIAL_DOCS_EXPERIMENT.variant && docs.value,
+);
 
 function onDataChange(event: IUpdateInformation): void {
 	emit('update', event);
@@ -335,7 +346,7 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 			</EnterpriseEdition>
 		</div>
 		<CredentialDocs
-			v-if="docs"
+			v-if="showCredentialDocs"
 			:credential-type="credentialType"
 			:documentation-url="documentationUrl"
 			:docs="docs"
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index f44046139ebab..ff09ffd91f3e6 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -694,13 +694,18 @@ export const MORE_ONBOARDING_OPTIONS_EXPERIMENT = {
 };
 
 export const EXECUTION_ANNOTATION_EXPERIMENT = '023_execution_annotation';
-
+export const CREDENTIAL_DOCS_EXPERIMENT = {
+	name: '024_credential_docs',
+	control: 'control',
+	variant: 'variant',
+};
 export const EXPERIMENTS_TO_TRACK = [
 	ASK_AI_EXPERIMENT.name,
 	TEMPLATE_CREDENTIAL_SETUP_EXPERIMENT,
 	CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT.name,
 	AI_ASSISTANT_EXPERIMENT.name,
 	MORE_ONBOARDING_OPTIONS_EXPERIMENT.name,
+	CREDENTIAL_DOCS_EXPERIMENT.name,
 ];
 
 export const MFA_FORM = {