fix(editor): Design fixes for managed OAuth credentials (#26064)

Author: elsmr

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

@@ -326,4 +326,118 @@ describe('CredentialConfig', () => {
 			expect(screen.getByTestId('dynamic-credentials-toggle')).toBeInTheDocument();
 		});
 	});
+
+	describe('OAuth Redirect URL', () => {
+		const writePermissions = {
+			create: true,
+			update: true,
+			read: true,
+			delete: true,
+			share: true,
+			list: true,
+			move: true,
+		};
+
+		it('should show redirect URL for OAuth credentials without managed OAuth', () => {
+			renderComponent({
+				pinia: createTestingPinia({
+					initialState: {
+						[STORES.SETTINGS]: {
+							settings: { enterprise: { sharing: false, externalSecrets: false } },
+						},
+						[STORES.ROOT]: {
+							oauthCallbackUrls: { oauth2: 'https://example.com/callback' },
+						},
+					},
+				}),
+				props: {
+					isManaged: false,
+					mode: 'new',
+					credentialType: mockCredentialType,
+					credentialProperties: [],
+					credentialData: {} as ICredentialDataDecryptedObject,
+					isOAuthType: true,
+					managedOauthAvailable: false,
+					useCustomOauth: false,
+					credentialPermissions: writePermissions,
+				},
+			});
+
+			expect(screen.getByTestId('copy-input')).toBeInTheDocument();
+		});
+
+		it('should show redirect URL when managed OAuth is available but user chose custom', () => {
+			renderComponent({
+				pinia: createTestingPinia({
+					initialState: {
+						[STORES.SETTINGS]: {
+							settings: { enterprise: { sharing: false, externalSecrets: false } },
+						},
+						[STORES.ROOT]: {
+							oauthCallbackUrls: { oauth2: 'https://example.com/callback' },
+						},
+					},
+				}),
+				props: {
+					isManaged: false,
+					mode: 'new',
+					credentialType: mockCredentialType,
+					credentialProperties: [],
+					credentialData: {} as ICredentialDataDecryptedObject,
+					isOAuthType: true,
+					managedOauthAvailable: true,
+					useCustomOauth: true,
+					credentialPermissions: writePermissions,
+				},
+			});
+
+			expect(screen.getByTestId('copy-input')).toBeInTheDocument();
+		});
+
+		it('should not show redirect URL when using managed OAuth', () => {
+			renderComponent({
+				pinia: createTestingPinia({
+					initialState: {
+						[STORES.SETTINGS]: {
+							settings: { enterprise: { sharing: false, externalSecrets: false } },
+						},
+						[STORES.ROOT]: {
+							oauthCallbackUrls: { oauth2: 'https://example.com/callback' },
+						},
+					},
+				}),
+				props: {
+					isManaged: false,
+					mode: 'new',
+					credentialType: mockCredentialType,
+					credentialProperties: [],
+					credentialData: {} as ICredentialDataDecryptedObject,
+					isOAuthType: true,
+					managedOauthAvailable: true,
+					useCustomOauth: false,
+					credentialPermissions: writePermissions,
+				},
+			});
+
+			expect(screen.queryByTestId('copy-input')).not.toBeInTheDocument();
+		});
+
+		it('should not show redirect URL for non-OAuth credentials', () => {
+			renderComponent({
+				props: {
+					isManaged: false,
+					mode: 'new',
+					credentialType: mockCredentialType,
+					credentialProperties: [],
+					credentialData: {} as ICredentialDataDecryptedObject,
+					isOAuthType: false,
+					managedOauthAvailable: false,
+					useCustomOauth: false,
+					credentialPermissions: writePermissions,
+				},
+			});
+
+			expect(screen.queryByTestId('copy-input')).not.toBeInTheDocument();
+		});
+	});
 });

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

@@ -214,6 +214,10 @@ const canWrite = computed(() => {
 	return canCreate.value || canEdit.value;
 });
 
+const isManagedOAuth = computed(
+	() => props.isOAuthType && props.managedOauthAvailable && !props.useCustomOauth,
+);
+
 function onDataChange(event: IUpdateInformation): void {
 	emit('update', event);
 }
@@ -273,7 +277,7 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 			/>
 
 			<N8nCallout
-				v-if="documentationUrl && credentialProperties.length"
+				v-if="documentationUrl && credentialProperties.length && !isManagedOAuth"
 				:class="$style.docsCallout"
 				theme="custom"
 				iconless
@@ -402,7 +406,7 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 				</div>
 
 				<CopyInput
-					v-if="isOAuthType && useCustomOauth"
+					v-if="isOAuthType && !isManagedOAuth"
 					:label="i18n.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
 					:value="oAuthCallbackUrl"
 					:copy-button-text="i18n.baseText('credentialEdit.credentialConfig.clickToCopy')"

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

@@ -1353,6 +1353,7 @@ const { width } = useElementSize(credNameRef);
 					/>
 					<SaveButton
 						v-if="showSaveButton"
+						:class="$style.saveButton"
 						:disabled="!hasUnsavedChanges && !isTesting && !!credentialId"
 						:is-saving="isSaving || isTesting"
 						:saved="false"
@@ -1378,6 +1379,7 @@ const { width } = useElementSize(credNameRef);
 					/>
 					<SaveButton
 						v-if="showSaveButton"
+						:class="$style.saveButton"
 						:disabled="!hasUnsavedChanges && !isTesting && !!credentialId"
 						:is-saving="isSaving || isTesting"
 						:saved="false"
@@ -1486,4 +1488,8 @@ const { width } = useElementSize(credNameRef);
 	align-items: center;
 	margin-right: var(--spacing--xs);
 }
+
+.saveButton {
+	margin-left: 1px;
+}
 </style>

packages/nodes-base/credentials/GoogleBusinessProfileOAuth2Api.credentials.ts

@@ -24,6 +24,9 @@ export class GoogleBusinessProfileOAuth2Api implements ICredentialType {
 			name: 'notice',
 			type: 'notice',
 			default: '',
+			displayOptions: {
+				hideOnCloud: true,
+			},
 		},
 	];
 }

packages/nodes-base/credentials/GoogleDriveOAuth2Api.credentials.ts

@@ -28,6 +28,9 @@ export class GoogleDriveOAuth2Api implements ICredentialType {
 			name: 'notice',
 			type: 'notice',
 			default: '',
+			displayOptions: {
+				hideOnCloud: true,
+			},
 		},
 	];
 }