implement oauth in UI (airbytehq#6385)

* Implement auth

* Implement auth

* Fix wrong changes

* Place authenticate button in the proper place

* Finish oauth implementation

* Temporary ignore test

* Fix stories

* Fix react-widgets UI

* Remove unnecessary mock

* Add support for oneOf case

* Temporary disable test

* Fix path

* Fix lock file

* Do not flush values on auth

* Apply last auth changes

* Move button within section

* Leave comment about dirty tricks

* Call WebBackend endpoints for create instead of core one

airbyte-webapp/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/addons";
+import theme from "./theme";
+
+addons.setConfig({
+  panelPosition: "bottom",
+  theme
+});

airbyte-webapp/.storybook/theme.tsx

@@ -0,0 +1,8 @@
+import { create } from "@storybook/theming/create";
+import Image from "./logo.png";
+
+export default create({
+  brandTitle: "Airbyte",
+  brandUrl: "https://airbyte.com",
+  brandImage: Image,
+});

airbyte-webapp/.storybook/withProvider.tsx

@@ -8,6 +8,8 @@ import { ThemeProvider } from "styled-components";
 import { theme, Theme } from "../src/theme";
 import GlobalStyle from "../src/global-styles";
 import messages from "../src/locales/en.json";
+import { FeatureService } from "../src/hooks/services/Feature";
+import { ConfigServiceProvider, defaultConfig } from "../src/config";
 
 interface Props {
   theme?: Theme;
@@ -24,12 +26,19 @@ class WithProviders extends React.Component<Props> {
 
     return (
       <Router history={createMemoryHistory()}>
-        <IntlProvider messages={messages} locale={"en"}>
-          <ThemeProvider theme={theme}>
-            <GlobalStyle />
-            {children}
-          </ThemeProvider>
-        </IntlProvider>
+        <FeatureService>
+          <IntlProvider messages={messages} locale={"en"}>
+            <ThemeProvider theme={theme}>
+              <ConfigServiceProvider
+                defaultConfig={defaultConfig}
+                providers={[]}
+              >
+                <GlobalStyle />
+                {children}
+              </ConfigServiceProvider>
+            </ThemeProvider>
+          </IntlProvider>
+        </FeatureService>
       </Router>
     );
   }

airbyte-webapp/package.json

@@ -23,8 +23,6 @@
     "@rest-hooks/legacy": "^2.0.5",
     "@sentry/react": "^6.11.0",
     "@sentry/tracing": "^6.11.0",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.2",
     "dayjs": "^1.8.35",
     "firebase": "^9.0.1",
     "flat": "^5.0.2",
@@ -57,6 +55,7 @@
     "@storybook/addon-essentials": "^6.3.6",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.3.2",
+    "@storybook/theming": "^6.3.8",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^7.0.1",

airbyte-webapp/src/components/ContentCard/index.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import ContentCard from "./ContentCard";
 
 export default {
-  title: "Example/ContentCard",
+  title: "Ui/ContentCard",
   component: ContentCard,
 } as ComponentMeta<typeof ContentCard>;
 

airbyte-webapp/src/components/base/Button/index.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import Button from "./Button";
 
 export default {
-  title: "Example/Button",
+  title: "Ui/Button",
   component: Button,
   argTypes: {
     backgroundColor: { control: "color" },

airbyte-webapp/src/components/base/Card/index.stories.tsx

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Card } from "./Card";
 
 export default {
-  title: "Example/Card",
+  title: "Ui/Card",
   component: Card,
 } as ComponentMeta<typeof Card>;
 

airbyte-webapp/src/components/base/Multiselect/Multiselect.tsx

@@ -1,6 +1,7 @@
 import { Multiselect as ReactMultiselect } from "react-widgets";
 import styled from "styled-components";
 import { MultiselectProps as WidgetMultiselectProps } from "react-widgets/lib/Multiselect";
+import "react-widgets/dist/css/react-widgets.css";
 
 type MultiselectProps = {
   disabled?: boolean;

airbyte-webapp/src/config/ConfigServiceProvider.tsx

@@ -26,10 +26,11 @@ export function useConfig<T extends Config>(): T {
 
 const ConfigServiceInner: React.FC<{
   defaultConfig: Config;
-  providers: ValueProvider<Config>;
+  providers?: ValueProvider<Config>;
 }> = ({ children, defaultConfig, providers }) => {
   const { loading, value } = useAsync(
-    async () => applyProviders(defaultConfig, providers),
+    async () =>
+      providers ? applyProviders(defaultConfig, providers) : defaultConfig,
     [providers]
   );
   const config: ConfigContext | null = useMemo(
@@ -38,7 +39,7 @@ const ConfigServiceInner: React.FC<{
   );
   return (
     <configContext.Provider value={config}>
-      {loading ? <LoadingPage /> : children}
+      {loading && providers ? <LoadingPage /> : children}
     </configContext.Provider>
   );
 };

airbyte-webapp/src/config/defaultConfig.ts

@@ -21,6 +21,7 @@ const defaultConfig: Config = {
   },
   version: "",
   apiUrl: `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`,
+  oauthRedirectUrl: `${window.location.protocol}//${window.location.host}`,
   isDemo: false,
 };
 

airbyte-webapp/src/config/types.ts

@@ -32,6 +32,7 @@ export type Config = {
   openreplay: OpenReplayOptions;
   fullstory: Fullstory.SnippetOptions;
   apiUrl: string;
+  oauthRedirectUrl: string;
   healthCheckInterval: number;
   isDemo: boolean;
   version?: string;

airbyte-webapp/src/core/domain/connection/types.ts

@@ -2,15 +2,11 @@ import { SyncSchema } from "core/domain/catalog";
 import { Source } from "core/resources/Source";
 import { Destination } from "core/resources/Destination";
 import { Operation } from "./operation";
+import { AirbyteJSONSchema } from "core/jsonSchema";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ConnectionConfiguration = any;
+type ConnectionConfiguration = unknown;
 
-type ConnectionSpecification = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  properties: any;
-  required: string[];
-};
+type ConnectionSpecification = AirbyteJSONSchema;
 
 export type { ConnectionConfiguration, ConnectionSpecification };
 

airbyte-webapp/src/core/domain/connector/DestinationAuthService.ts

@@ -0,0 +1,30 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { DestinationGetConsentPayload } from "./types";
+
+class DestinationAuthService extends AirbyteRequestService {
+  get url(): string {
+    return "destination_oauths";
+  }
+
+  public getConsentUrl(
+    body: DestinationGetConsentPayload
+  ): Promise<{ consentUrl: string }> {
+    return this.fetch<{ consentUrl: string }>(
+      `${this.url}/get_consent_url`,
+      body
+    );
+  }
+
+  public completeOauth(
+    body: DestinationGetConsentPayload & {
+      queryParams: Record<string, unknown>;
+    }
+  ): Promise<Record<string, unknown>> {
+    return this.fetch<Record<string, unknown>>(
+      `${this.url}/complete_oauth`,
+      body
+    );
+  }
+}
+
+export { DestinationAuthService };

airbyte-webapp/src/core/domain/connector/DestinationDefinitionService.ts

@@ -2,12 +2,12 @@ import { AirbyteRequestService } from "core/request/AirbyteRequestService";
 import { DestinationDefinition } from "core/resources/DestinationDefinition";
 
 class DestinationDefinitionService extends AirbyteRequestService {
-  get url() {
+  get url(): string {
     return "destination_definitions";
   }
 
   public update(body: DestinationDefinition): Promise<DestinationDefinition> {
-    return this.fetch(`${this.url}/update`, body) as any;
+    return this.fetch<DestinationDefinition>(`${this.url}/update`, body);
   }
 }
 

airbyte-webapp/src/core/domain/connector/SourceAuthService.ts

@@ -0,0 +1,30 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { SourceGetConsentPayload } from "./types";
+
+class SourceAuthService extends AirbyteRequestService {
+  get url(): string {
+    return "source_oauths";
+  }
+
+  public getConsentUrl(
+    body: SourceGetConsentPayload
+  ): Promise<{ consentUrl: string }> {
+    return this.fetch<{ consentUrl: string }>(
+      `${this.url}/get_consent_url`,
+      body
+    );
+  }
+
+  public completeOauth(
+    body: SourceGetConsentPayload & {
+      queryParams: Record<string, unknown>;
+    }
+  ): Promise<Record<string, unknown>> {
+    return this.fetch<Record<string, unknown>>(
+      `${this.url}/complete_oauth`,
+      body
+    );
+  }
+}
+
+export { SourceAuthService };

airbyte-webapp/src/core/domain/connector/SourceDefinitionService.ts

@@ -2,12 +2,12 @@ import { AirbyteRequestService } from "core/request/AirbyteRequestService";
 import { SourceDefinition } from "core/resources/SourceDefinition";
 
 class SourceDefinitionService extends AirbyteRequestService {
-  get url() {
+  get url(): string {
     return "source_definitions";
   }
 
   public update(body: SourceDefinition): Promise<SourceDefinition> {
-    return this.fetch(`${this.url}/update`, body) as any;
+    return this.fetch<SourceDefinition>(`${this.url}/update`, body);
   }
 }
 

airbyte-webapp/src/core/domain/connector/SourceService.ts

@@ -1,7 +1,7 @@
 import { AirbyteRequestService } from "core/request/AirbyteRequestService";
 
 class SourceService extends AirbyteRequestService {
-  get url() {
+  get url(): string {
     return "sources";
   }
 }

airbyte-webapp/src/core/domain/connector/connector.ts

@@ -1,12 +1,5 @@
-import { SourceDefinition } from "core/resources/SourceDefinition";
-import { DestinationDefinition } from "core/resources/DestinationDefinition";
-import { isSourceDefinition } from "./source";
-
-export type ConnectorDefinition = SourceDefinition | DestinationDefinition;
-
-export function isConnectorDeprecated(connector: ConnectorDefinition): boolean {
-  return !connector.latestDockerImageTag;
-}
+import { isSourceDefinition, isSourceDefinitionSpecification } from "./source";
+import { ConnectorDefinition, ConnectorDefinitionSpecification } from "./types";
 
 export class Connector {
   static id(connector: ConnectorDefinition): string {
@@ -26,3 +19,11 @@ export class Connector {
     );
   }
 }
+
+export class ConnectorSpecification {
+  static id(connector: ConnectorDefinitionSpecification): string {
+    return isSourceDefinitionSpecification(connector)
+      ? connector.sourceDefinitionId
+      : connector.destinationDefinitionId;
+  }
+}

airbyte-webapp/src/core/domain/connector/index.ts

@@ -1 +1,2 @@
 export * from "./connector";
+export * from "./types";

airbyte-webapp/src/core/domain/connector/source.ts

@@ -1,11 +1,24 @@
 import { SourceDefinition } from "core/resources/SourceDefinition";
-import { ConnectorDefinition } from "./connector";
+import {
+  ConnectorDefinition,
+  ConnectorDefinitionSpecification,
+  SourceDefinitionSpecification,
+} from "./types";
 
 export function isSourceDefinition(
   connector: ConnectorDefinition
 ): connector is SourceDefinition {
   return (connector as SourceDefinition).sourceDefinitionId !== undefined;
 }
 
+export function isSourceDefinitionSpecification(
+  connector: ConnectorDefinitionSpecification
+): connector is SourceDefinitionSpecification {
+  return (
+    (connector as SourceDefinitionSpecification).sourceDefinitionId !==
+    undefined
+  );
+}
+
 // eslint-disable-next-line no-template-curly-in-string
 export const SOURCE_NAMESPACE_TAG = "${SOURCE_NAMESPACE}";

airbyte-webapp/src/core/domain/connector/types.ts

@@ -0,0 +1,48 @@
+import { ConnectionSpecification } from "core/domain/connection";
+import { DestinationSyncMode } from "core/domain/catalog";
+import { SourceDefinition } from "core/resources/SourceDefinition";
+import { DestinationDefinition } from "core/resources/DestinationDefinition";
+
+export type ConnectorDefinition = SourceDefinition | DestinationDefinition;
+
+interface ConnectorDefinitionSpecificationBase {
+  connectionSpecification: ConnectionSpecification;
+  documentationUrl: string;
+  authSpecification?: {
+    type: "oauth2.0";
+    oauth2Specification: {
+      rootObject?: string[];
+      oauthFlowInitParameters?: string[][];
+      oauthFlowOutputParameters?: string[][];
+    };
+  };
+}
+
+export type ConnectorDefinitionSpecification =
+  | DestinationDefinitionSpecification
+  | SourceDefinitionSpecification;
+
+export interface DestinationDefinitionSpecification
+  extends ConnectorDefinitionSpecificationBase {
+  destinationDefinitionId: string;
+  supportedDestinationSyncModes: DestinationSyncMode[];
+  supportsDbt: boolean;
+  supportsNormalization: boolean;
+}
+
+export interface SourceDefinitionSpecification
+  extends ConnectorDefinitionSpecificationBase {
+  sourceDefinitionId: string;
+}
+
+export interface SourceGetConsentPayload {
+  redirectUrl: string;
+  sourceDefinitionId: string;
+  workspaceId: string;
+}
+
+export interface DestinationGetConsentPayload {
+  redirectUrl: string;
+  destinationDefinitionId: string;
+  workspaceId: string;
+}

airbyte-webapp/src/core/form/types.ts

@@ -8,6 +8,8 @@ type FormItem = {
   order?: number;
   title?: string;
   description?: string;
+
+  airbyte_hidden?: boolean;
 };
 
 export type FormBaseItem = {
@@ -23,6 +25,7 @@ type FormGroupItem = {
   jsonSchema: AirbyteJSONSchema;
   properties: FormBlock[];
   isLoading?: boolean;
+  hasOauth?: boolean;
   default?: JSONSchema7Type;
   examples?: JSONSchema7Type;
 } & FormItem;

airbyte-webapp/src/core/jsonSchema/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./schemaToUiWidget";
 export * from "./schemaToYup";
+export * from "./utils";