From ef635b6b6048e9ca1efad865e2eb13f974ff5ab8 Mon Sep 17 00:00:00 2001
From: Raj Kamal Singh <1133322+raj-k-singh@users.noreply.github.com>
Date: Thu, 13 Feb 2025 20:02:17 +0530
Subject: [PATCH] Chore: aws integrations UI improvements (#7068)

* chore: handle race between initial setting of ?cloudAccountId and ?service

* chore: invalidate accounts query after successful account connection

* chore: show service status only when enabled and disable save btn only if no change in svc config

* chore: re-trigger CI
---
 .../HeroSection/components/AccountActions.tsx  |  5 +++--
 .../components/CloudAccountSetupModal.tsx      |  9 ++++++++-
 .../ServicesSection/ConfigureServiceModal.tsx  | 18 +++++++++++-------
 .../ServicesSection/ServiceDetails.tsx         |  4 +++-
 .../ServicesSection/ServicesList.tsx           |  7 ++++---
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx
index 09c56e5918..d0cdfce500 100644
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/AccountActions.tsx
@@ -159,8 +159,9 @@ function AccountActions(): JSX.Element {
 	useEffect(() => {
 		if (initialAccount !== null) {
 			setActiveAccount(initialAccount);
-			urlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
-			navigate({ search: urlQuery.toString() });
+			const latestUrlQuery = new URLSearchParams(window.location.search);
+			latestUrlQuery.set('cloudAccountId', initialAccount.cloud_account_id);
+			navigate({ search: latestUrlQuery.toString() });
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [initialAccount]);
diff --git a/frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx b/frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx
index 5f4656dfc2..335aa58551 100644
--- a/frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx
+++ b/frontend/src/container/CloudIntegrationPage/HeroSection/components/CloudAccountSetupModal.tsx
@@ -2,9 +2,11 @@ import './CloudAccountSetupModal.style.scss';
 
 import { Color } from '@signozhq/design-tokens';
 import SignozModal from 'components/SignozModal/SignozModal';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useIntegrationModal } from 'hooks/integrations/aws/useIntegrationModal';
 import { SquareArrowOutUpRight } from 'lucide-react';
 import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
 
 import {
 	ActiveViewEnum,
@@ -18,6 +20,7 @@ import { SuccessView } from './SuccessView';
 function CloudAccountSetupModal({
 	onClose,
 }: IntegrationModalProps): JSX.Element {
+	const queryClient = useQueryClient();
 	const {
 		form,
 		modalState,
@@ -110,7 +113,10 @@ function CloudAccountSetupModal({
 					</div>
 				),
 				block: true,
-				onOk: handleClose,
+				onOk: (): void => {
+					queryClient.invalidateQueries([REACT_QUERY_KEY.AWS_ACCOUNTS]);
+					handleClose();
+				},
 				cancelButtonProps: { style: { display: 'none' } },
 				disabled: false,
 			};
@@ -151,6 +157,7 @@ function CloudAccountSetupModal({
 		activeView,
 		handleClose,
 		setActiveView,
+		queryClient,
 	]);
 
 	const modalConfig = getModalConfig();
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx b/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx
index ad417a29ce..7d510dce0d 100644
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ConfigureServiceModal.tsx
@@ -34,10 +34,19 @@ function ConfigureServiceModal({
 	const [isLoading, setIsLoading] = useState(false);
 
 	// Track current form values
-	const [currentValues, setCurrentValues] = useState({
+	const initialValues = {
 		metrics: initialConfig?.metrics?.enabled || false,
 		logs: initialConfig?.logs?.enabled || false,
-	});
+	};
+	const [currentValues, setCurrentValues] = useState(initialValues);
+
+	const isSaveDisabled = useMemo(
+		() =>
+			// disable only if current values are same as the initial config
+			currentValues.metrics === initialValues.metrics &&
+			currentValues.logs === initialValues.logs,
+		[currentValues, initialValues.metrics, initialValues.logs],
+	);
 
 	const {
 		mutate: updateServiceConfig,
@@ -93,11 +102,6 @@ function ConfigureServiceModal({
 		onClose,
 	]);
 
-	const isSaveDisabled = useMemo(
-		() => currentValues.metrics === false && currentValues.logs === false,
-		[currentValues],
-	);
-
 	const handleClose = useCallback(() => {
 		form.resetFields();
 		onClose();
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
index ccbf6f79f7..392854bd09 100644
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServiceDetails.tsx
@@ -111,7 +111,9 @@ function ServiceDetails(): JSX.Element | null {
 			<div className="service-details__title-bar">
 				<div className="service-details__details-title">Details</div>
 				<div className="service-details__right-actions">
-					<ServiceStatus serviceStatus={serviceDetailsData.status} />
+					{isAnySignalConfigured && (
+						<ServiceStatus serviceStatus={serviceDetailsData.status} />
+					)}
 
 					{!!cloudAccountId && isAnySignalConfigured ? (
 						<Button
diff --git a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx
index e9d86bf00e..e02b48f5c5 100644
--- a/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx
+++ b/frontend/src/container/CloudIntegrationPage/ServicesSection/ServicesList.tsx
@@ -24,10 +24,11 @@ function ServicesList({
 
 	const handleActiveService = useCallback(
 		(serviceId: string): void => {
-			urlQuery.set('service', serviceId);
-			navigate({ search: urlQuery.toString() });
+			const latestUrlQuery = new URLSearchParams(window.location.search);
+			latestUrlQuery.set('service', serviceId);
+			navigate({ search: latestUrlQuery.toString() });
 		},
-		[navigate, urlQuery],
+		[navigate],
 	);
 
 	const filteredServices = useMemo(() => {