fix(editor): Clean up quick connect feature flag and fix first load

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -1948,7 +1948,6 @@
 	"nodeCredentials.createNew": "Create new credential",
 	"nodeCredentials.createNew.permissionDenied": "Your current role does not allow you to create credentials",
 	"nodeCredentials.credentialFor": "Credential for {credentialType}",
-	"nodeCredentials.credentialsLabel": "Credential to connect with",
 	"nodeCredentials.credentialsLabelShort": "Credential",
 	"nodeCredentials.issues": "Issues",
 	"nodeCredentials.selectCredential": "Select Credential",
@@ -1960,6 +1959,7 @@
 	"nodeCredentials.updateCredential.permissionDenied": "Your current role does not allow you to update credentials",
 	"nodeCredentials.deleteCredential": "Delete Credential",
 	"nodeCredentials.deleteCredential.permissionDenied": "Your current role does not allow you to delete credentials",
+	"nodeCredentials.quickConnect.connect": "Connect",
 	"nodeCredentials.quickConnect.connectTo": "Connect to {provider}",
 	"nodeCredentials.quickConnect.or": "or",
 	"nodeCredentials.quickConnect.setupManually": "setup manually",

packages/frontend/editor-ui/src/app/constants/experiments.ts

@@ -97,8 +97,6 @@ export const CODE_WORKFLOW_BUILDER_EXPERIMENT = createExperiment('071_coding_wor
 	codePinData: 'code-pin-data',
 });
 
-export const QUICK_CONNECT_EXPERIMENT = createExperiment('073_quick_connect');
-
 export const AI_BUILDER_SETUP_WIZARD_EXPERIMENT = createExperiment('079_ai_builder_setup_wizard');
 export const AA_EXPERIMENT_CHECK = createExperiment('078_experiment_check_aa');
 
@@ -125,7 +123,6 @@ export const EXPERIMENTS_TO_TRACK = [
 	CODE_WORKFLOW_BUILDER_EXPERIMENT.name,
 	EMPTY_STATE_BUILDER_PROMPT_EXPERIMENT.name,
 	FOCUSED_NODES_EXPERIMENT.name,
-	QUICK_CONNECT_EXPERIMENT.name,
 	AI_BUILDER_REVIEW_CHANGES_EXPERIMENT.name,
 	MERGE_ASK_BUILD_EXPERIMENT.name,
 	AI_BUILDER_SETUP_WIZARD_EXPERIMENT.name,

packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialConfig.test.ts

@@ -48,7 +48,7 @@ const defaultRenderOptions: RenderOptions<typeof CredentialConfig> = {
 	props: {
 		isManaged: true,
 		mode: 'edit',
-		credentialType: {} as ICredentialType,
+		credentialType: mockCredentialType,
 		credentialProperties: [],
 		credentialData: {} as ICredentialDataDecryptedObject,
 		credentialPermissions: {

packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialConfig.vue

@@ -30,7 +30,6 @@ import Banner from '@/app/components/Banner.vue';
 import CopyInput from '@/app/components/CopyInput.vue';
 import CredentialInputs from './CredentialInputs.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
-import OauthButton from './OauthButton.vue';
 import { useChatPanelStore } from '@/features/ai/assistant/chatPanel.store';
 import { useAssistantStore } from '@/features/ai/assistant/assistant.store';
 import FreeAiCreditsCallout from '@/app/components/FreeAiCreditsCallout.vue';
@@ -100,7 +99,7 @@ const chatPanelStore = useChatPanelStore();
 
 const i18n = useI18n();
 const telemetry = useTelemetry();
-const { isQuickConnectEnabled, getQuickConnectOption } = useQuickConnect();
+const { getQuickConnectOption } = useQuickConnect();
 
 onBeforeMount(async () => {
 	uiStore.activeCredentialType = props.credentialType.name;
@@ -123,16 +122,14 @@ onBeforeMount(async () => {
 	);
 });
 
-const appName = computed(() => {
-	if (!props.credentialType) {
-		return '';
-	}
-
-	return (
-		getAppNameFromCredType(props.credentialType.displayName) ||
-		i18n.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo')
-	);
-});
+const serviceName = computed(() =>
+	props.credentialType ? getAppNameFromCredType(props.credentialType.displayName) : '',
+);
+const appName = computed(
+	() =>
+		serviceName.value ||
+		i18n.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo'),
+);
 const credentialTypeName = computed(() => props.credentialType?.name);
 const credentialOwnerName = computed(() =>
 	credentialsStore.getCredentialOwnerNameById(`${props.credentialId}`),
@@ -295,7 +292,7 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 			<template v-if="isQuickConnectMode">
 				<QuickConnectBanner v-if="quickConnectBannerText" :text="quickConnectBannerText" />
 				<QuickConnectButton
-					:service-name="appName"
+					:service-name="serviceName"
 					:credential-type-name="credentialType.name"
 					data-test-id="quick-connect-modal-button"
 					@click="$emit('quickConnect')"
@@ -365,10 +362,10 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 						/>
 						<GoogleAuthButton @click="$emit('oauth')" />
 					</template>
-					<template v-else-if="isQuickConnectEnabled" #button>
+					<template v-else #button>
 						<QuickConnectButton
 							size="small"
-							:service-name="appName"
+							:service-name="serviceName"
 							:credential-type-name="credentialType.name"
 							:label="i18n.baseText('credentialEdit.credentialConfig.reconnect')"
 							data-test-id="quick-connect-reconnect-button"
@@ -469,25 +466,15 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 					@update="onDataChange"
 				/>
 
-				<template v-if="isOAuthType && !isOAuthConnected && canWrite">
-					<QuickConnectButton
-						v-if="isQuickConnectEnabled"
-						:service-name="appName"
-						:credential-type-name="credentialType.name"
-						:disabled="!requiredPropertiesFilled"
-						:disabled-tooltip="
-							i18n.baseText('credentialEdit.credentialConfig.oauthDisabledTooltip')
-						"
-						data-test-id="quick-connect-button"
-						@click="$emit('oauth')"
-					/>
-					<OauthButton
-						v-else-if="requiredPropertiesFilled"
-						:is-google-o-auth-type="isGoogleOAuthType"
-						data-test-id="oauth-connect-button"
-						@click="$emit('oauth')"
-					/>
-				</template>
+				<QuickConnectButton
+					v-if="isOAuthType && !isOAuthConnected && canWrite"
+					:service-name="serviceName"
+					:credential-type-name="credentialType.name"
+					:disabled="!requiredPropertiesFilled"
+					:disabled-tooltip="i18n.baseText('credentialEdit.credentialConfig.oauthDisabledTooltip')"
+					data-test-id="quick-connect-button"
+					@click="$emit('oauth')"
+				/>
 
 				<N8nText v-if="isMissingCredentials" color="text-base" size="medium">
 					{{ i18n.baseText('credentialEdit.credentialConfig.missingCredentialType') }}

packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.test.ts

@@ -21,6 +21,13 @@ vi.mock('vue-router', async () => ({
 	}),
 }));
 
+vi.mock('@/app/composables/useToast', () => ({
+	useToast: () => ({
+		showError: vi.fn(),
+		showMessage: vi.fn(),
+	}),
+}));
+
 const oAuth2Api: ICredentialType = {
 	name: 'oAuth2Api',
 	displayName: 'OAuth2 API',
@@ -381,9 +388,12 @@ describe('CredentialEdit', () => {
 		await retry(() => expect(credentialsStore.getCredentialData).toHaveBeenCalled());
 		await retry(() => expect(getByTestId('credential-edit-dialog')).toBeInTheDocument());
 
-		expect(
-			within(getByTestId('credential-edit-dialog')).getByTestId('oauth-connect-button'),
-		).toBeInTheDocument();
+		await retry(() =>
+			expect(
+				within(getByTestId('credential-edit-dialog')).getAllByLabelText('Sign in with Google')
+					.length,
+			).toBeGreaterThan(0),
+		);
 	});
 
 	describe('external secrets', () => {

packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue

@@ -1261,9 +1261,7 @@ async function onAuthTypeChanged(payload: CredentialModeOption): Promise<void> {
 async function onQuickConnect(): Promise<void> {
 	if (!credentialTypeName.value || !ndvStore.activeNode) return;
 
-	const serviceName =
-		getAppNameFromCredType(credentialType.value?.displayName ?? '') ||
-		i18n.baseText('credentialEdit.credentialConfig.theServiceYouReConnectingTo');
+	const serviceName = getAppNameFromCredType(credentialType.value?.displayName ?? '');
 
 	const credential = await quickConnect({
 		credentialTypeName: credentialTypeName.value,