diff --git a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx b/airbyte-webapp/src/hooks/services/useDestinationHook.tsx index 78a90187f16d..a4142b8c60df 100644 --- a/airbyte-webapp/src/hooks/services/useDestinationHook.tsx +++ b/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 = ( }); }; +export const useInvalidateDestination = (destinationId: T): (() => void) => { + const queryClient = useQueryClient(); + + return useCallback(() => { + queryClient.invalidateQueries(destinationsKeys.detail(destinationId ?? "")); + }, [queryClient, destinationId]); +}; + const useCreateDestination = () => { const service = useDestinationService(); const queryClient = useQueryClient(); diff --git a/airbyte-webapp/src/hooks/services/useSourceHook.tsx b/airbyte-webapp/src/hooks/services/useSourceHook.tsx index 06576a4dda6a..0a8e357b661f 100644 --- a/airbyte-webapp/src/hooks/services/useSourceHook.tsx +++ b/airbyte-webapp/src/hooks/services/useSourceHook.tsx @@ -64,6 +64,14 @@ const useGetSource = ( }); }; +export const useInvalidateSource = (sourceId: T): (() => void) => { + const queryClient = useQueryClient(); + + return useCallback(() => { + queryClient.invalidateQueries(sourcesKeys.detail(sourceId ?? "")); + }, [queryClient, sourceId]); +}; + const useCreateSource = () => { const service = useSourceService(); const queryClient = useQueryClient(); diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx index 42df9e6854f5..a58ac3d46ccd 100644 --- a/airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceSettings.tsx +++ b/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 = ({ 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 = ({ currentSource, connecti selectedConnectorDefinitionSpecification={sourceDefinitionSpecification} selectedConnectorDefinitionId={sourceDefinitionSpecification.sourceDefinitionId} connector={currentSource} + reloadConfig={reloadSource} onSubmit={onSubmit} onDeleteClick={onDeleteClick} /> diff --git a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx b/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx index bac93e312ec5..54fa7649472c 100644 --- a/airbyte-webapp/src/pages/destination/DestinationSettingsPage/DestinationSettingsPage.tsx +++ b/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} /> diff --git a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx b/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx index 55a474a0c17d..c8f1bad0f692 100644 --- a/airbyte-webapp/src/views/Connector/ConnectorCard/ConnectorCard.tsx +++ b/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; + reloadConfig?: () => void; onDeleteClick?: () => void; onConnectorDefinitionSelect?: (id: string) => void; availableConnectorDefinitions: ConnectorDefinition[]; @@ -72,6 +73,7 @@ export const ConnectorCard: React.FC { const [errorStatusRequest, setErrorStatusRequest] = useState(null); @@ -129,8 +131,9 @@ export const ConnectorCard: React.FC { 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