chore: webapp calls the embedded-specific consent url endpoint when running within the embedded context (#16130)

Co-authored-by: josephkmh <[email protected]>
Co-authored-by: Joey Marshment-Howell <[email protected]>
Co-authored-by: teallarson <[email protected]>

Author: 4 people

airbyte-webapp/STYLEGUIDE.md

@@ -14,7 +14,7 @@ This serves as a living document regarding conventions we have agreed upon as a
 
 The following recommendations are all in service to two broader principles:
 
-- compoonents should be reusable in as many different contexts as possible without changing their "internal" CSS
+- components should be reusable in as many different contexts as possible without changing their "internal" CSS
 - the impact on layout and spacing of adding any component to an existing page should be predictable
 
 If naively following the recommendations ever undermines those principles, by all means

airbyte-webapp/src/core/api/hooks/connectorOAuth.ts

@@ -4,6 +4,7 @@ import {
   completeDestinationOAuth,
   completeSourceOAuth,
   getDestinationOAuthConsent,
+  getEmbeddedSourceOAuthConsent,
   getSourceOAuthConsent,
   revokeSourceOAuthTokens,
   getConnectorBuilderProjectOAuthConsent,
@@ -13,6 +14,7 @@ import {
   CompleteDestinationOAuthRequest,
   CompleteSourceOauthRequest,
   DestinationOauthConsentRequest,
+  EmbeddedSourceOauthConsentRequest,
   RevokeSourceOauthTokensRequest,
   SourceOauthConsentRequest,
   BuilderProjectOauthConsentRequest,
@@ -28,6 +30,9 @@ export function useConsentUrls() {
       getSourceConsentUrl(request: SourceOauthConsentRequest) {
         return getSourceOAuthConsent(request, requestOptions);
       },
+      getEmbeddedSourceConsentUrl(request: EmbeddedSourceOauthConsentRequest) {
+        return getEmbeddedSourceOAuthConsent(request, requestOptions);
+      },
       getDestinationConsentUrl(request: DestinationOauthConsentRequest) {
         return getDestinationOAuthConsent(request, requestOptions);
       },

airbyte-webapp/src/hooks/services/useConnectorAuth.tsx

@@ -12,6 +12,7 @@ import {
   CompleteOAuthResponse,
   CompleteOAuthResponseAuthPayload,
   DestinationOauthConsentRequest,
+  EmbeddedSourceOauthConsentRequest,
   SourceOauthConsentRequest,
   BuilderProjectOauthConsentRequest,
   CompleteConnectorBuilderProjectOauthRequest,
@@ -71,31 +72,43 @@ export function useConnectorAuth(): {
     connector: ConnectorDefinitionSpecificationRead,
     oAuthInputConfiguration: Record<string, unknown>
   ) => Promise<{
-    payload: SourceOauthConsentRequest | DestinationOauthConsentRequest;
+    payload: SourceOauthConsentRequest | EmbeddedSourceOauthConsentRequest | DestinationOauthConsentRequest;
     consentUrl: string;
   }>;
   completeOauthRequest: (
-    params: SourceOauthConsentRequest | DestinationOauthConsentRequest,
+    params: SourceOauthConsentRequest | EmbeddedSourceOauthConsentRequest | DestinationOauthConsentRequest,
     queryParams: Record<string, unknown>
   ) => Promise<CompleteOAuthResponse>;
 } {
   const { formatMessage } = useIntl();
   const workspaceId = useCurrentWorkspaceId();
-  const { getDestinationConsentUrl, getSourceConsentUrl } = useConsentUrls();
+  const { getDestinationConsentUrl, getSourceConsentUrl, getEmbeddedSourceConsentUrl } = useConsentUrls();
   const { completeDestinationOAuth, completeSourceOAuth } = useCompleteOAuth();
   const notificationService = useNotificationService();
   const { connectorId } = useConnectorForm();
+  const isEmbedded = useIsAirbyteEmbeddedContext();
 
   return {
     getConsentUrl: async (
       connector: ConnectorDefinitionSpecificationRead,
       oAuthInputConfiguration: Record<string, unknown>
     ): Promise<{
-      payload: SourceOauthConsentRequest | DestinationOauthConsentRequest;
+      payload: SourceOauthConsentRequest | EmbeddedSourceOauthConsentRequest | DestinationOauthConsentRequest;
       consentUrl: string;
     }> => {
       try {
         if (isSourceDefinitionSpecification(connector)) {
+          if (isEmbedded) {
+            const payload: EmbeddedSourceOauthConsentRequest = {
+              workspaceId,
+              sourceDefinitionId: ConnectorSpecification.id(connector),
+              redirectUrl: OAUTH_REDIRECT_URL,
+              sourceId: connectorId,
+            };
+            const response = await getEmbeddedSourceConsentUrl(payload);
+
+            return { consentUrl: response.consentUrl, payload };
+          }
           const payload: SourceOauthConsentRequest = {
             workspaceId,
             sourceDefinitionId: ConnectorSpecification.id(connector),

airbyte-webapp/src/views/Connector/ConnectorForm/ConnectorForm.test.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 import { getByTestId, screen, waitFor, getByRole, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { BroadcastChannel } from "broadcast-channel";
@@ -11,6 +12,7 @@ import { useCompleteOAuth } from "core/api";
 import { DestinationDefinitionSpecificationRead, OAuthConsentRead } from "core/api/types/AirbyteClient";
 import { ConnectorDefinition, ConnectorDefinitionSpecificationRead } from "core/domain/connector";
 import { AirbyteJSONSchema } from "core/jsonSchema/types";
+import * as EmbeddedContext from "core/services/embedded";
 import { FeatureItem } from "core/services/features";
 import { ConnectorForm } from "views/Connector/ConnectorForm";
 
@@ -1024,6 +1026,7 @@ describe("Connector form", () => {
           });
         },
       });
+      jest.spyOn(EmbeddedContext, "useIsAirbyteEmbeddedContext").mockReturnValue(false);
       const container = await renderNewOAuthForm();
 
       await executeOAuthFlow(container);