🎉 advanced auth impl (airbytehq#8345)

* Add advanced auth impl * Refactor ServiceForm for advanced auth flow * Add auth field filter * Add input params to customSchema * Fix casing and values sent to backend * Fix onDone dependency list * Fix feature set * Refactor feature service to be part of config * Minor codestyle fix * Fix tests
schlattk · Jan 4, 2022 · 2ce7c5d · 2ce7c5d
1 parent 95ed69b
commit 2ce7c5d
Show file tree

Hide file tree

Showing 39 changed files with 838 additions and 468 deletions.
diff --git a/airbyte-webapp/.storybook/withProvider.tsx b/airbyte-webapp/.storybook/withProvider.tsx
@@ -10,6 +10,7 @@ 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";
+import { ServicesProvider } from "../src/core/servicesProvider";
 
 interface Props {
   theme?: Theme;
@@ -25,21 +26,23 @@ class WithProviders extends React.Component<Props> {
     const { children } = this.props;
 
     return (
-      <Router history={createMemoryHistory()}>
-        <FeatureService>
-          <IntlProvider messages={messages} locale={"en"}>
-            <ThemeProvider theme={theme}>
-              <ConfigServiceProvider
-                defaultConfig={defaultConfig}
-                providers={[]}
-              >
-                <GlobalStyle />
-                {children}
-              </ConfigServiceProvider>
-            </ThemeProvider>
-          </IntlProvider>
-        </FeatureService>
-      </Router>
+      <ServicesProvider>
+        <Router history={createMemoryHistory()}>
+          <FeatureService features={[{ id: "ALLOW_OAUTH_CONNECTOR" }]}>
+            <IntlProvider messages={messages} locale={"en"}>
+              <ThemeProvider theme={theme}>
+                <ConfigServiceProvider
+                  defaultConfig={defaultConfig}
+                  providers={[]}
+                >
+                  <GlobalStyle />
+                  {children}
+                </ConfigServiceProvider>
+              </ThemeProvider>
+            </IntlProvider>
+          </FeatureService>
+        </Router>
+      </ServicesProvider>
     );
   }
 }

diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json
diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json
@@ -27,6 +27,7 @@
     "lodash.get": "^4.4.2",
     "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.2",
+    "lodash.pick": "^4.4.0",
     "query-string": "^6.13.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
@@ -67,6 +68,7 @@
     "@types/lodash.get": "^4.4.6",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.merge": "^4.6.6",
+    "@types/lodash.pick": "^4.4.6",
     "@types/node": "^12.0.0",
     "@types/query-string": "^6.3.0",
     "@types/react": "17.0.2",

diff --git a/airbyte-webapp/src/App.tsx b/airbyte-webapp/src/App.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from "react";
 import { ThemeProvider } from "styled-components";
 import { IntlProvider } from "react-intl";
 import { CacheProvider } from "rest-hooks";
-import { QueryClientProvider, QueryClient } from "react-query";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 import en from "./locales/en.json";
 import GlobalStyle from "./global-styles";
@@ -14,30 +14,19 @@ import ApiErrorBoundary from "./components/ApiErrorBoundary";
 import NotificationService from "hooks/services/Notification";
 import { AnalyticsProvider } from "views/common/AnalyticsProvider";
 import { usePickFirstWorkspace } from "hooks/services/useWorkspace";
-import { Feature, FeatureItem, FeatureService } from "hooks/services/Feature";
+import { FeatureService } from "hooks/services/Feature";
 import { OnboardingServiceProvider } from "hooks/services/Onboarding";
 import { ServicesProvider } from "core/servicesProvider";
 import { useApiServices } from "core/defaultServices";
-import { envConfigProvider, windowConfigProvider } from "./config";
 import {
   Config,
   ConfigServiceProvider,
   defaultConfig,
+  envConfigProvider,
   ValueProvider,
+  windowConfigProvider,
 } from "./config";
 
-const Features: Feature[] = [
-  {
-    id: FeatureItem.AllowUploadCustomImage,
-  },
-  {
-    id: FeatureItem.AllowCustomDBT,
-  },
-  {
-    id: FeatureItem.AllowUpdateConnectors,
-  },
-];
-
 const StyleProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={theme}>
     <GlobalStyle />
@@ -92,7 +81,7 @@ const App: React.FC = () => {
               >
                 <AnalyticsProvider>
                   <ApiErrorBoundary>
-                    <FeatureService features={Features}>
+                    <FeatureService>
                       <NotificationService>
                         <AppServices>
                           <OnboardingServiceProvider>

diff --git a/airbyte-webapp/src/config/defaultConfig.ts b/airbyte-webapp/src/config/defaultConfig.ts
@@ -1,5 +1,19 @@
 import { Config } from "./types";
 import { uiConfig } from "./uiConfig";
+import { Feature } from "hooks/services/Feature";
+import { FeatureItem } from "hooks/services/Feature/types";
+
+const features: Feature[] = [
+  {
+    id: FeatureItem.AllowUploadCustomImage,
+  },
+  {
+    id: FeatureItem.AllowCustomDBT,
+  },
+  {
+    id: FeatureItem.AllowUpdateConnectors,
+  },
+];
 
 const defaultConfig: Config = {
   ui: uiConfig,
@@ -10,6 +24,7 @@ const defaultConfig: Config = {
   integrationUrl: "/docs",
   oauthRedirectUrl: `${window.location.protocol}//${window.location.host}`,
   isDemo: false,
+  features,
 };
 
 export { defaultConfig };
diff --git a/airbyte-webapp/src/config/types.ts b/airbyte-webapp/src/config/types.ts
@@ -1,5 +1,6 @@
 import { SegmentAnalytics } from "core/analytics/types";
 import { UiConfig } from "./uiConfig";
+import { Feature } from "hooks/services/Feature";
 
 declare global {
   interface Window {
@@ -21,6 +22,7 @@ declare global {
 
 export type Config = {
   ui: UiConfig;
+  features: Feature[];
   segment: { token: string; enabled: boolean };
   apiUrl: string;
   oauthRedirectUrl: string;

diff --git a/airbyte-webapp/src/core/domain/connector/types.ts b/airbyte-webapp/src/core/domain/connector/types.ts
@@ -5,17 +5,40 @@ import { DestinationDefinition } from "core/resources/DestinationDefinition";
 
 export type ConnectorDefinition = SourceDefinition | DestinationDefinition;
 
+type AuthFlowTypes = "oauth2.0";
+
+interface AuthSpecification {
+  type: AuthFlowTypes;
+  oauth2Specification: {
+    rootObject?: string[];
+    oauthFlowInitParameters?: string[][];
+    oauthFlowOutputParameters?: string[][];
+  };
+}
+
+type AdvancedAuthInput = {
+  properties: {
+    [key: string]: { path_in_connector_config: string[] };
+  };
+};
+
+interface AdvancedAuth {
+  authFlowType: AuthFlowTypes;
+  predicateKey: string[];
+  predicateValue: string;
+  oauthConfigSpecification: {
+    completeOAuthOutputSpecification?: AdvancedAuthInput;
+    completeOAuthServerInputSpecification?: AdvancedAuthInput;
+    completeOAuthServerOutputSpecification?: AdvancedAuthInput;
+    oauthUserInputFromConnectorConfigSpecification?: AdvancedAuthInput;
+  };
+}
+
 interface ConnectorDefinitionSpecificationBase {
   connectionSpecification: ConnectionSpecification;
   documentationUrl: string;
-  authSpecification?: {
-    type: "oauth2.0";
-    oauth2Specification: {
-      rootObject?: string[];
-      oauthFlowInitParameters?: string[][];
-      oauthFlowOutputParameters?: string[][];
-    };
-  };
+  authSpecification?: AuthSpecification;
+  advancedAuth?: AdvancedAuth;
 }
 
 export type ConnectorDefinitionSpecification =
@@ -39,10 +62,12 @@ export interface SourceGetConsentPayload {
   redirectUrl: string;
   sourceDefinitionId: string;
   workspaceId: string;
+  oAuthInputConfiguration: Record<string, unknown>;
 }
 
 export interface DestinationGetConsentPayload {
   redirectUrl: string;
   destinationDefinitionId: string;
   workspaceId: string;
+  oAuthInputConfiguration: Record<string, unknown>;
 }
diff --git a/airbyte-webapp/src/core/form/uiWidget.test.ts b/airbyte-webapp/src/core/form/uiWidget.test.ts
@@ -162,7 +162,9 @@ test("should select correct key for enum", () => {
     },
     "key.provider.reader_impl": {},
     "key.provider.service_account_json": {},
-    "key.provider.storage": {},
+    "key.provider.storage": {
+      const: "GCS",
+    },
     "key.reader_options": {},
     "key.url": {},
   });

diff --git a/airbyte-webapp/src/core/form/uiWidget.ts b/airbyte-webapp/src/core/form/uiWidget.ts
@@ -1,6 +1,7 @@
 import get from "lodash.get";
 import { buildYupFormForJsonSchema } from "core/jsonSchema/schemaToYup";
 import { FormBlock, WidgetConfigMap } from "./types";
+import { isDefined } from "utils/common";
 
 export const buildPathInitialState = (
   formBlock: FormBlock[],
@@ -15,14 +16,21 @@ export const buildPathInitialState = (
           formValues,
           widgetStateBuilder
         );
-      case "formItem":
-        widgetStateBuilder[formItem.path] = {};
+      case "formItem": {
+        const resultObject: Record<string, unknown> = {};
+
+        if (isDefined(formItem.const)) {
+          resultObject.const = formItem.const;
+        }
+
+        widgetStateBuilder[formItem.path] = resultObject;
         return widgetStateBuilder;
-      case "formCondition":
+      }
+      case "formCondition": {
         const defaultCondition = Object.entries(formItem.conditions).find(
           ([key, subConditionItems]) => {
             switch (subConditionItems._type) {
-              case "formGroup":
+              case "formGroup": {
                 const selectedValues = get(formValues, subConditionItems.path);
 
                 const subPathSchema = buildYupFormForJsonSchema({
@@ -34,6 +42,7 @@ export const buildPathInitialState = (
                   return key;
                 }
                 return null;
+              }
               case "formItem":
                 return key;
             }
@@ -56,6 +65,7 @@ export const buildPathInitialState = (
             widgetStateBuilder
           );
         }
+      }
     }
 
     return widgetStateBuilder;

diff --git a/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts b/airbyte-webapp/src/core/jsonSchema/schemaToUiWidget.ts
@@ -1,5 +1,6 @@
 import { FormBlock } from "core/form/types";
 import { AirbyteJSONSchemaDefinition, AirbyteJSONSchema } from "./types";
+import { isDefined } from "../../utils/common";
 
 /**
  * Returns {@link FormBlock} representation of jsonSchema
@@ -153,7 +154,11 @@ const pickDefaultFields = (
   ) {
     partialSchema.enum = schema.items.enum;
   } else if (schema.enum) {
-    partialSchema.enum = schema.enum;
+    if (schema.enum?.length === 1 && isDefined(schema.default)) {
+      partialSchema.const = schema.default;
+    } else {
+      partialSchema.enum = schema.enum;
+    }
   }
 
   return partialSchema;

diff --git a/airbyte-webapp/src/core/jsonSchema/utils.ts b/airbyte-webapp/src/core/jsonSchema/utils.ts
@@ -69,9 +69,9 @@ function applyFuncAt(
   schema: JSONSchema7Definition,
   path: (string | number)[],
   f: (schema: JSONSchema7Definition) => JSONSchema7
-): JSONSchema7 {
+): JSONSchema7Definition {
   if (typeof schema === "boolean") {
-    return schema as any;
+    return schema;
   }
 
   const [pathElem, ...restPath] = path;