diff --git a/frontend/src/hooks/Integrations/useGetIntegrationStatus.ts b/frontend/src/hooks/Integrations/useGetIntegrationStatus.ts index af58f63996..56849d2515 100644 --- a/frontend/src/hooks/Integrations/useGetIntegrationStatus.ts +++ b/frontend/src/hooks/Integrations/useGetIntegrationStatus.ts @@ -8,13 +8,12 @@ import { export const useGetIntegrationStatus = ({ integrationId, - enabled, }: GetIntegrationPayloadProps): UseQueryResult< AxiosResponse, AxiosError > => useQuery, AxiosError>({ - queryKey: ['Integration', integrationId, Date.now()], + queryKey: ['integration-connection-status', integrationId], queryFn: () => getIntegrationStatus({ integrationId }), - enabled, + refetchInterval: 5000, }); diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx index 34f5e612bf..6b2a7b7c34 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx @@ -9,7 +9,7 @@ import { useNotifications } from 'hooks/useNotifications'; import { ArrowLeftRight, Check } from 'lucide-react'; import { useState } from 'react'; import { useMutation } from 'react-query'; -import { IntegrationStatusProps } from 'types/api/integrations/types'; +import { IntegrationConnectionStatus } from 'types/api/integrations/types'; import TestConnection, { ConnectionStates } from './TestConnection'; @@ -20,7 +20,7 @@ interface IntegrationDetailHeaderProps { icon: string; refetchIntegrationDetails: () => void; connectionState: ConnectionStates; - connectionData: IntegrationStatusProps['connection_status']; + connectionData: IntegrationConnectionStatus; } function IntegrationDetailHeader( props: IntegrationDetailHeaderProps, diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx index 3d498a07d8..e9a975001a 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx @@ -9,7 +9,6 @@ import { useGetIntegration } from 'hooks/Integrations/useGetIntegration'; import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus'; import { defaultTo } from 'lodash-es'; import { ArrowLeft, MoveUpRight, RotateCw } from 'lucide-react'; -import { useEffect } from 'react'; import { isCloudUser } from 'utils/app'; import { handleContactSupport } from '../utils'; @@ -41,11 +40,9 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element { const { data: integrationStatus, - refetch: refetchStatus, isLoading: isStatusLoading, } = useGetIntegrationStatus({ integrationId: selectedIntegration, - enabled: false, }); const loading = isLoading || isFetching || isRefetching || isStatusLoading; @@ -54,23 +51,11 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element { const connectionStatus = getConnectionStatesFromConnectionStatus( integrationData?.installation, defaultTo( - integrationStatus?.data.data.connection_status, + integrationStatus?.data.data, defaultTo(integrationData?.connection_status, { logs: null, metrics: null }), ), ); - useEffect(() => { - // we should once get data on load and then keep polling every 5 seconds - refetchStatus(); - const timer = setInterval(() => { - refetchStatus(); - }, 5000); - - return (): void => { - clearInterval(timer); - }; - }, [refetchStatus]); - return (