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.

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;
+};