chore: some cleanups in plumbing for integration connection status (#4716)

frontend/src/hooks/Integrations/useGetIntegrationStatus.ts

@@ -8,13 +8,12 @@ import {
 
 export const useGetIntegrationStatus = ({
 	integrationId,
-	enabled,
 }: GetIntegrationPayloadProps): UseQueryResult<
 	AxiosResponse<GetIntegrationStatusProps>,
 	AxiosError
 > =>
 	useQuery<AxiosResponse<GetIntegrationStatusProps>, AxiosError>({
-		queryKey: ['Integration', integrationId, Date.now()],
+		queryKey: ['integration-connection-status', integrationId],
 		queryFn: () => getIntegrationStatus({ integrationId }),
-		enabled,
+		refetchInterval: 5000,
 	});

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,

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 (
 		<div className="integration-detail-content">
 			<Button
@@ -128,10 +113,10 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
 							description={defaultTo(integrationData?.description, '')}
 							icon={defaultTo(integrationData?.icon, '')}
 							connectionState={connectionStatus}
-							connectionData={defaultTo(
-								integrationStatus?.data.data.connection_status,
-								{ logs: null, metrics: null },
-							)}
+							connectionData={defaultTo(integrationStatus?.data.data, {
+								logs: null,
+								metrics: null,
+							})}
 							refetchIntegrationDetails={refetch}
 						/>
 						<IntegrationDetailContent

frontend/src/types/api/integrations/types.ts

@@ -65,21 +65,19 @@ export interface GetIntegrationProps {
 	data: IntegrationDetailedProps;
 }
 
-export interface IntegrationStatusProps {
-	connection_status: {
-		logs: {
-			last_received_ts_ms: number;
-			last_received_from: string;
-		} | null;
-		metrics: {
-			last_received_ts_ms: number;
-			last_received_from: string;
-		} | null;
-	};
+export interface IntegrationConnectionStatus {
+	logs: {
+		last_received_ts_ms: number;
+		last_received_from: string;
+	} | null;
+	metrics: {
+		last_received_ts_ms: number;
+		last_received_from: string;
+	} | null;
 }
 
 export interface GetIntegrationStatusProps {
-	data: IntegrationStatusProps;
+	data: IntegrationConnectionStatus;
 }
 
 export interface GetIntegrationPayloadProps {