From 428b0b370bce2baefce504de1d714c1139e08f11 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Fri, 13 Dec 2024 09:41:49 +0100
Subject: [PATCH] fix: only call project overview from connect dialog when open
 (#8977)

Fixes a bug where we'd call the project overview every second when on a
project page.

The reason this happens is that the connect SDK dialog sets up a fetcher
to re-fetch it every second.

The request should only be fired when the dialog is open, but because of
the way it's set up, we we're setting up the repeated fetch regardless
of whether the dialog was open or not.

This PR moves the dialog and all it's content into a nested component
that's only rendered if the dialog should be opened.
---
 .../onboarding/dialog/ConnectSdkDialog.tsx         | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx
index a036223b076d..cf19f321fe6c 100644
--- a/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx
+++ b/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx
@@ -64,14 +64,13 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
 
 type OnboardingStage = 'select-sdk' | 'generate-api-key' | 'test-connection';
 
-export const ConnectSdkDialog = ({
-    open,
+const InnerDialog = ({
     onClose,
     onFinish,
     environments,
     project: projectId,
     feature,
-}: IConnectSDKDialogProps) => {
+}: Omit<IConnectSDKDialogProps, 'open'>) => {
     const theme = useTheme();
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
     const [sdk, setSdk] = useState<Sdk | null>(null);
@@ -98,7 +97,7 @@ export const ConnectSdkDialog = ({
     }, [JSON.stringify(environments)]);
 
     return (
-        <StyledDialog open={open} onClose={onClose}>
+        <StyledDialog open={true} onClose={onClose}>
             <Box sx={{ display: 'flex' }}>
                 <ConnectSdk>
                     {isSelectSdkStage ? (
@@ -199,3 +198,10 @@ export const ConnectSdkDialog = ({
         </StyledDialog>
     );
 };
+
+export const ConnectSdkDialog = ({
+    open,
+    ...props
+}: IConnectSDKDialogProps) => {
+    return open ? <InnerDialog {...props} /> : null;
+};