fix oauth values sending (airbytehq#8856)

* Fix values sent to oauth endpoints * Minor fixes
roelsadza · Dec 22, 2021 · 3b8f9f6 · 3b8f9f6
1 parent 5bb1810
commit 3b8f9f6
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 64 deletions.
diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/ServiceForm.tsx
@@ -146,27 +146,32 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
     uiWidgetsInfo
   );
 
+  const getValues = useCallback(
+    (values: ServiceFormValues) =>
+      validationSchema.cast(values, {
+        stripUnknown: true,
+      }),
+    [validationSchema]
+  );
+
   const onFormSubmit = useCallback(
     async (values) => {
-      const valuesToSend = validationSchema.cast(values, {
-        stripUnknown: true,
-      });
+      const valuesToSend = getValues(values);
       return onSubmit(valuesToSend);
     },
-    [onSubmit, validationSchema]
+    [getValues, onSubmit]
   );
 
   const onRetestForm = useCallback(
     async (values) => {
       if (!onRetest) {
         return null;
       }
-      const valuesToSend = validationSchema.cast(values, {
-        stripUnknown: true,
-      });
+      const valuesToSend = getValues(values);
+
       return onRetest(valuesToSend);
     },
-    [onRetest, validationSchema]
+    [onRetest, getValues]
   );
 
   return (
@@ -180,6 +185,7 @@ const ServiceForm: React.FC<ServiceFormProps> = (props) => {
       {({ values, setSubmitting }) => (
         <ServiceFormContextProvider
           widgetsInfo={uiWidgetsInfo}
+          getValues={getValues}
           setUiWidgetsInfo={setUiWidgetsInfo}
           formType={formType}
           selectedConnector={selectedConnector}

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/FetchingConnectorError.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/FetchingConnectorError.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
-import { StatusIcon } from "components/StatusIcon";
+import { StatusIcon } from "components";
 
 const Error = styled(StatusIcon)`
   padding-left: 1px;

diff --git a/...e-webapp/src/views/Connector/ServiceForm/components/Sections/auth/useOauthFlowAdapter.tsx b/...e-webapp/src/views/Connector/ServiceForm/components/Sections/auth/useOauthFlowAdapter.tsx
@@ -11,6 +11,7 @@ import {
   serverProvidedOauthPaths,
 } from "../../../utils";
 import { ServiceFormValues } from "../../../types";
+import { useServiceForm } from "../../../serviceFormContext";
 
 function useFormikOauthAdapter(
   connector: ConnectorDefinitionSpecification
@@ -26,6 +27,8 @@ function useFormikOauthAdapter(
     setFieldTouched,
   } = useFormikContext<ServiceFormValues>();
 
+  const { getValues } = useServiceForm();
+
   const onDone = (completeOauthResponse: Record<string, unknown>) => {
     let newValues: ServiceFormValues;
 
@@ -75,10 +78,12 @@ function useFormikOauthAdapter(
         }
       }
 
+      const preparedValues = getValues(values);
+
       const oauthInputParams = Object.entries(oauthInputProperties).reduce(
         (acc, property) => {
           acc[property[0]] = get(
-            values,
+            preparedValues,
             makeConnectionConfigurationPath(
               property[1].path_in_connector_config
             )

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/components/ShowLoadingMessage.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/components/ShowLoadingMessage.tsx
@@ -19,12 +19,8 @@ const ShowLoadingMessage: React.FC<ShowLoadingMessageProps> = ({
 
   useEffect(() => {
     setLongLoading(false);
-    const timer = setTimeout(() => {
-      setLongLoading(true);
-    }, TIMEOUT_MS);
-    return () => {
-      clearTimeout(timer);
-    };
+    const timer = setTimeout(() => setLongLoading(true), TIMEOUT_MS);
+    return () => clearTimeout(timer);
   }, [connector]);
 
   return longLoading ? (

diff --git a/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx b/airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx
@@ -12,74 +12,81 @@ import {
   makeConnectionConfigurationPath,
   serverProvidedOauthPaths,
 } from "./utils";
+import { ServiceFormValues } from "./types";
 
 type Context = {
   formType: "source" | "destination";
-  selectedService?: ConnectorDefinition;
-  selectedConnector?: ConnectorDefinitionSpecification;
-  isLoadingSchema?: boolean;
-  isEditMode?: boolean;
-  isAuthFlowSelected?: boolean;
-  isRequestConnectorModalOpen: boolean;
+  getValues: (values: ServiceFormValues) => ServiceFormValues;
   widgetsInfo: WidgetConfigMap;
   setUiWidgetsInfo: (path: string, value: Record<string, unknown>) => void;
   unfinishedFlows: Record<string, { startValue: string; id: number | string }>;
   addUnfinishedFlow: (key: string, info?: Record<string, unknown>) => void;
   removeUnfinishedFlow: (key: string) => void;
   resetUiFormProgress: () => void;
+  selectedService?: ConnectorDefinition;
+  selectedConnector?: ConnectorDefinitionSpecification;
+  isLoadingSchema?: boolean;
+  isEditMode?: boolean;
+  isAuthFlowSelected?: boolean;
   authFieldsToHide: string[];
 };
 
-const context: Context = {
-  formType: "source",
-  isRequestConnectorModalOpen: false,
-  widgetsInfo: {},
-  authFieldsToHide: [],
-  setUiWidgetsInfo: (_path: string, _value: Record<string, unknown>) => ({}),
-  unfinishedFlows: {},
-  addUnfinishedFlow: (_key: string, _info?: Record<string, unknown>) => ({}),
-  removeUnfinishedFlow: (_key: string) => ({}),
-  resetUiFormProgress: () => ({}),
-};
-
-const FormWidgetContext = React.createContext<Context>(context);
+const FormWidgetContext = React.createContext<Context | null>(null);
 
-const useServiceForm = (): Context => useContext(FormWidgetContext);
+const useServiceForm = (): Context => {
+  const serviceFormHelpers = useContext(FormWidgetContext);
+  if (!serviceFormHelpers) {
+    throw new Error(
+      "useServiceForm should be used within ServiceFormContextProvider"
+    );
+  }
+  return serviceFormHelpers;
+};
 
 const ServiceFormContextProvider: React.FC<{
   widgetsInfo: WidgetConfigMap;
+  setUiWidgetsInfo: (path: string, value: Record<string, unknown>) => void;
   formType: "source" | "destination";
   isLoadingSchema?: boolean;
+  isEditMode?: boolean;
   serviceType?: string;
   availableServices: ConnectorDefinition[];
+  getValues: (values: ServiceFormValues) => ServiceFormValues;
   selectedConnector?: ConnectorDefinitionSpecification;
-  isEditMode?: boolean;
-  setUiWidgetsInfo: (path: string, value: Record<string, unknown>) => void;
 }> = ({
   availableServices,
   serviceType,
   children,
   widgetsInfo,
   setUiWidgetsInfo,
   selectedConnector,
-  ...props
+  getValues,
+  formType,
+  isLoadingSchema,
+  isEditMode,
 }) => {
-  const selectedService = availableServices.find(
-    (s) => Connector.id(s) === serviceType
+  const { values } = useFormikContext<ServiceFormValues>();
+  const { hasFeature } = useFeatureService();
+
+  const selectedService = useMemo(
+    () => availableServices.find((s) => Connector.id(s) === serviceType),
+    [availableServices, serviceType]
+  );
+
+  const isAuthFlowSelected = useMemo(
+    () =>
+      hasFeature(FeatureItem.AllowOAuthConnector) &&
+      selectedConnector?.advancedAuth &&
+      selectedConnector?.advancedAuth.predicateValue ===
+        getIn(
+          getValues(values),
+          makeConnectionConfigurationPath(
+            selectedConnector?.advancedAuth.predicateKey
+          )
+        ),
+    [selectedConnector, hasFeature, values, getValues]
   );
-  const { values } = useFormikContext();
 
-  const { hasFeature } = useFeatureService();
-  const isAuthFlowSelected =
-    hasFeature(FeatureItem.AllowOAuthConnector) &&
-    selectedConnector?.advancedAuth &&
-    selectedConnector?.advancedAuth.predicateValue ===
-      getIn(
-        values,
-        makeConnectionConfigurationPath(
-          selectedConnector?.advancedAuth.predicateKey
-        )
-      );
   const authFieldsToHide = useMemo(
     () =>
       Object.values(serverProvidedOauthPaths(selectedConnector)).map((f) =>
@@ -94,14 +101,14 @@ const ServiceFormContextProvider: React.FC<{
       widgetsInfo,
       isAuthFlowSelected,
       authFieldsToHide: isAuthFlowSelected ? authFieldsToHide : [],
+      getValues,
       setUiWidgetsInfo,
       selectedService,
       selectedConnector,
-      formType: props.formType,
-      isLoadingSchema: props.isLoadingSchema,
-      isEditMode: props.isEditMode,
-      unfinishedFlows: unfinishedFlows,
-      isRequestConnectorModalOpen: false,
+      formType,
+      isLoadingSchema,
+      isEditMode,
+      unfinishedFlows,
       addUnfinishedFlow: (path, info) =>
         setUiWidgetsInfo("_common.unfinishedFlows", {
           ...unfinishedFlows,
@@ -114,18 +121,20 @@ const ServiceFormContextProvider: React.FC<{
             Object.entries(unfinishedFlows).filter(([key]) => key !== path)
           )
         ),
-      resetUiFormProgress: () => {
-        setUiWidgetsInfo("_common.unfinishedFlows", {});
-      },
+      resetUiFormProgress: () =>
+        setUiWidgetsInfo("_common.unfinishedFlows", {}),
     };
   }, [
-    props,
     widgetsInfo,
-    selectedConnector,
     isAuthFlowSelected,
     authFieldsToHide,
-    selectedService,
+    getValues,
     setUiWidgetsInfo,
+    selectedService,
+    selectedConnector,
+    formType,
+    isLoadingSchema,
+    isEditMode,
   ]);
 
   return (