Auth Button now shows re-authenticate when it has been authenticated …

…once (airbytehq#15615)

* Auth Button now knows if the connection object is full or empty, and shows the expected value.

* Some types, better oauth finished calculation

* values => preparedValues

* Fixing test

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/FormSection.tsx

@@ -43,7 +43,7 @@ interface FormSectionProps {
   disabled?: boolean;
 }
 
-const FormSection: React.FC<FormSectionProps> = ({ blocks = [], path, skipAppend, hasOauth, disabled }) => {
+export const FormSection: React.FC<FormSectionProps> = ({ blocks = [], path, skipAppend, hasOauth, disabled }) => {
   const sections = useMemo(() => {
     const flattenedBlocks = [blocks].flat();
 
@@ -84,5 +84,3 @@ const FormSection: React.FC<FormSectionProps> = ({ blocks = [], path, skipAppend
     </>
   );
 };
-
-export { FormSection };

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.test.tsx

@@ -73,11 +73,11 @@ describe("auth button", () => {
     const button = screen.getByRole("button", { name: "Authenticate your account" });
     expect(button).toBeInTheDocument();
 
-    //no error message
+    // no error message
     const errorMessage = screen.queryByText(/Authentication required/i);
     expect(errorMessage).not.toBeInTheDocument();
 
-    //no success message
+    // no success message
     const successMessage = screen.queryByText(/Authentication succeeded/i);
     expect(successMessage).not.toBeInTheDocument();
   });
@@ -96,7 +96,7 @@ describe("auth button", () => {
       const done = true;
       const { run, loading } = baseUseFormikOauthAdapterValues;
 
-      return { done, run, loading };
+      return { done, run, loading, hasRun: done };
     });
 
     render(

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/AuthButton.tsx

@@ -43,7 +43,7 @@ export const AuthButton: React.FC = () => {
   const hasAuthError = Object.values(authErrors).includes("form.empty.error");
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const { loading, done, run } = useFormikOauthAdapter(selectedConnector!);
+  const { loading, done, run, hasRun } = useFormikOauthAdapter(selectedConnector!);
 
   if (!selectedConnector) {
     console.error("Entered non-auth flow while no connector is selected");
@@ -66,7 +66,7 @@ export const AuthButton: React.FC = () => {
           <FormattedMessage id={getAuthenticateMessageId(definitionId)} values={{ connector: selectedService?.name }} />
         )}
       </Component>
-      {done && (
+      {done && hasRun && (
         <Text as="div" size="lg" className={messageStyle}>
           <FormattedMessage id="connectorForm.authenticate.succeeded" />
         </Text>

airbyte-webapp/src/views/Connector/ServiceForm/components/Sections/auth/useOauthFlowAdapter.tsx

@@ -3,25 +3,33 @@ import get from "lodash/get";
 import isEmpty from "lodash/isEmpty";
 import merge from "lodash/merge";
 import pick from "lodash/pick";
+import { useMemo, useState } from "react";
 
 import { ConnectorDefinitionSpecification } from "core/domain/connector";
+import { AuthSpecification } from "core/request/AirbyteClient";
 import { useRunOauthFlow } from "hooks/services/useConnectorAuth";
 
 import { useServiceForm } from "../../../serviceFormContext";
 import { ServiceFormValues } from "../../../types";
 import { makeConnectionConfigurationPath, serverProvidedOauthPaths } from "../../../utils";
 
+interface Credentials {
+  credentials: AuthSpecification;
+}
+
 function useFormikOauthAdapter(connector: ConnectorDefinitionSpecification): {
   loading: boolean;
   done?: boolean;
+  hasRun: boolean;
   run: () => Promise<void>;
 } {
-  const { values, setValues, errors, setFieldTouched } = useFormikContext<ServiceFormValues>();
+  const { values, setValues, errors, setFieldTouched } = useFormikContext<ServiceFormValues<Credentials>>();
+  const [hasRun, setHasRun] = useState(false);
 
   const { getValues } = useServiceForm();
 
   const onDone = (completeOauthResponse: Record<string, unknown>) => {
-    let newValues: ServiceFormValues;
+    let newValues: ServiceFormValues<Credentials>;
 
     if (connector.advancedAuth) {
       const oauthPaths = serverProvidedOauthPaths(connector);
@@ -38,13 +46,19 @@ function useFormikOauthAdapter(connector: ConnectorDefinitionSpecification): {
     }
 
     setValues(newValues);
+    setHasRun(true);
   };
 
   const { run, loading, done } = useRunOauthFlow(connector, onDone);
+  const preparedValues = useMemo(() => getValues<Credentials>(values), [getValues, values]);
+  const connectionObjectEmpty = preparedValues?.connectionConfiguration?.credentials
+    ? Object.keys(preparedValues.connectionConfiguration?.credentials).length <= 1
+    : true;
 
   return {
     loading,
-    done,
+    done: done || !connectionObjectEmpty,
+    hasRun,
     run: async () => {
       const oauthInputProperties =
         (
@@ -68,8 +82,6 @@ function useFormikOauthAdapter(connector: ConnectorDefinitionSpecification): {
         }
       }
 
-      const preparedValues = getValues(values);
-
       const oauthInputParams = Object.entries(oauthInputProperties).reduce((acc, property) => {
         acc[property[0]] = get(preparedValues, makeConnectionConfigurationPath(property[1].path_in_connector_config));
         return acc;

airbyte-webapp/src/views/Connector/ServiceForm/serviceFormContext.tsx

@@ -11,7 +11,7 @@ import { makeConnectionConfigurationPath, serverProvidedOauthPaths } from "./uti
 
 interface ServiceFormContext {
   formType: "source" | "destination";
-  getValues: (values: ServiceFormValues) => ServiceFormValues;
+  getValues: <T = unknown>(values: ServiceFormValues<T>) => ServiceFormValues<T>;
   widgetsInfo: WidgetConfigMap;
   setUiWidgetsInfo: (path: string, value: Record<string, unknown>) => void;
   unfinishedFlows: Record<string, { startValue: string; id: number | string }>;
@@ -46,7 +46,7 @@ interface ServiceFormContextProviderProps {
   isLoadingSchema?: boolean;
   isEditMode?: boolean;
   availableServices: ConnectorDefinition[];
-  getValues: (values: ServiceFormValues) => ServiceFormValues;
+  getValues: <T = unknown>(values: ServiceFormValues<T>) => ServiceFormValues<T>;
   selectedConnector?: ConnectorDefinitionSpecification;
   validationSchema: AnySchema;
 }