🪟🎉 Connector form: Reload config if updated during connection check (#21839)

* reload config if flag indicates it

* remove debug stuff

* fix

Author: Joe Reuter

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

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { useMutation, useQueryClient } from "react-query";
 
 import { Action, Namespace } from "core/analytics";
@@ -60,6 +61,14 @@ const useGetDestination = <T extends string | undefined | null>(
   });
 };
 
+export const useInvalidateDestination = <T extends string | undefined | null>(destinationId: T): (() => void) => {
+  const queryClient = useQueryClient();
+
+  return useCallback(() => {
+    queryClient.invalidateQueries(destinationsKeys.detail(destinationId ?? ""));
+  }, [queryClient, destinationId]);
+};
+
 const useCreateDestination = () => {
   const service = useDestinationService();
   const queryClient = useQueryClient();

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

@@ -64,6 +64,14 @@ const useGetSource = <T extends string | undefined | null>(
   });
 };
 
+export const useInvalidateSource = <T extends string | undefined | null>(sourceId: T): (() => void) => {
+  const queryClient = useQueryClient();
+
+  return useCallback(() => {
+    queryClient.invalidateQueries(sourcesKeys.detail(sourceId ?? ""));
+  }, [queryClient, sourceId]);
+};
+
 const useCreateSource = () => {
   const service = useSourceService();
   const queryClient = useQueryClient();

airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx

@@ -5,7 +5,7 @@ import { ConnectionConfiguration } from "core/domain/connection";
 import { SourceRead, WebBackendConnectionListItem } from "core/request/AirbyteClient";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
-import { useDeleteSource, useUpdateSource } from "hooks/services/useSourceHook";
+import { useDeleteSource, useInvalidateSource, useUpdateSource } from "hooks/services/useSourceHook";
 import { useDeleteModal } from "hooks/useDeleteModal";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
 import { useGetSourceDefinitionSpecification } from "services/connector/SourceDefinitionSpecificationService";
@@ -36,6 +36,7 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
   const sourceDefinitionSpecification = useGetSourceDefinitionSpecification(currentSource.sourceDefinitionId);
 
   const sourceDefinition = useSourceDefinition(currentSource.sourceDefinitionId);
+  const reloadSource = useInvalidateSource(currentSource.sourceId);
 
   const onSubmit = async (values: {
     name: string;
@@ -82,6 +83,7 @@ const SourceSettings: React.FC<SourceSettingsProps> = ({ currentSource, connecti
         selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
         selectedConnectorDefinitionId={sourceDefinitionSpecification.sourceDefinitionId}
         connector={currentSource}
+        reloadConfig={reloadSource}
         onSubmit={onSubmit}
         onDeleteClick={onDeleteClick}
       />

airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx

@@ -5,7 +5,11 @@ import { useOutletContext } from "react-router-dom";
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
 import { useFormChangeTrackerService, useUniqueFormId } from "hooks/services/FormChangeTracker";
 import { useConnectionList } from "hooks/services/useConnectionHook";
-import { useDeleteDestination, useUpdateDestination } from "hooks/services/useDestinationHook";
+import {
+  useDeleteDestination,
+  useInvalidateDestination,
+  useUpdateDestination,
+} from "hooks/services/useDestinationHook";
 import { useDeleteModal } from "hooks/useDeleteModal";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useGetDestinationDefinitionSpecification } from "services/connector/DestinationDefinitionSpecificationService";
@@ -20,6 +24,7 @@ export const DestinationSettingsPage: React.FC = () => {
   const { connections: connectionsWithDestination } = useConnectionList({ destinationId: [destination.destinationId] });
   const destinationSpecification = useGetDestinationDefinitionSpecification(destination.destinationDefinitionId);
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
+  const reloadDestination = useInvalidateDestination(destination.destinationId);
   const { mutateAsync: updateDestination } = useUpdateDestination();
   const { mutateAsync: deleteDestination } = useDeleteDestination();
   const formId = useUniqueFormId();
@@ -74,6 +79,7 @@ export const DestinationSettingsPage: React.FC = () => {
         selectedConnectorDefinitionSpecification={destinationSpecification}
         selectedConnectorDefinitionId={destinationSpecification.destinationDefinitionId}
         connector={destination}
+        reloadConfig={reloadDestination}
         onSubmit={onSubmitForm}
         onDeleteClick={onDeleteClick}
       />

airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx

@@ -33,6 +33,7 @@ interface ConnectorCardBaseProps {
   jobInfo?: SynchronousJobRead | null;
   additionalSelectorComponent?: React.ReactNode;
   onSubmit: (values: ConnectorCardValues) => Promise<void> | void;
+  reloadConfig?: () => void;
   onDeleteClick?: () => void;
   onConnectorDefinitionSelect?: (id: string) => void;
   availableConnectorDefinitions: ConnectorDefinition[];
@@ -72,6 +73,7 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   additionalSelectorComponent,
   selectedConnectorDefinitionId,
   fetchingConnectorError,
+  reloadConfig,
   ...props
 }) => {
   const [errorStatusRequest, setErrorStatusRequest] = useState<Error | null>(null);
@@ -129,8 +131,9 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
   const testConnectorWithTracking = async (connectorCardValues?: ConnectorCardValues) => {
     trackTestConnectorStarted(selectedConnectorDefinition);
     try {
-      await testConnector(connectorCardValues);
+      const response = await testConnector(connectorCardValues);
       trackTestConnectorSuccess(selectedConnectorDefinition);
+      return response;
     } catch (e) {
       trackTestConnectorFailure(selectedConnectorDefinition);
       throw e;
@@ -161,8 +164,12 @@ export const ConnectorCard: React.FC<ConnectorCardCreateProps | ConnectorCardEdi
     };
 
     try {
-      await testConnectorWithTracking(connectorCardValues);
-      onSubmit(connectorCardValues);
+      const response = await testConnectorWithTracking(connectorCardValues);
+      if (response.jobInfo.connectorConfigurationUpdated && reloadConfig) {
+        reloadConfig();
+      } else {
+        onSubmit(connectorCardValues);
+      }
     } catch (e) {
       setErrorStatusRequest(e);
       setIsFormSubmitting(false);