feat: connect welcome to sdk dialog (#8078)

Now welcome screen is connected to sdk dialog.

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -67,6 +67,7 @@ export const ProjectFeatureToggles = ({
     const onboardingUIEnabled = useUiFlag('onboardingUI');
     const projectId = useRequiredPathParam('projectId');
     const { project } = useProjectOverview(projectId);
+    const [connectSdkOpen, setConnectSdkOpen] = useState(false);
 
     const {
         features,
@@ -402,7 +403,12 @@ export const ProjectFeatureToggles = ({
                     onboardingUIEnabled &&
                     project.onboardingStatus.status !== 'onboarded'
                 }
-                show={<ProjectOnboarding projectId={projectId} />}
+                show={
+                    <ProjectOnboarding
+                        projectId={projectId}
+                        setConnectSdkOpen={setConnectSdkOpen}
+                    />
+                }
             />
             <PageContent
                 disableLoading
@@ -497,8 +503,10 @@ export const ProjectFeatureToggles = ({
                     {featureToggleModals}
 
                     <ConnectSdkDialog
-                        open={false}
+                        open={connectSdkOpen}
-                        onClose={() => {}}
+                        onClose={() => {
+                            setConnectSdkOpen(false);
+                        }}
                         project={projectId}
                         environments={environments}
                     />

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.tsx

@@ -3,6 +3,7 @@ import { WelcomeToProject } from './WelcomeToProject';
 
 interface IProjectOnboardingProps {
     projectId: string;
+    setConnectSdkOpen: (open: boolean) => void;
 }
 
 const Container = styled('div')(({ theme }) => ({
@@ -18,10 +19,16 @@ const SdkExample = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 
-export const ProjectOnboarding = ({ projectId }: IProjectOnboardingProps) => {
+export const ProjectOnboarding = ({
+    projectId,
+    setConnectSdkOpen,
+}: IProjectOnboardingProps) => {
     return (
         <Container>
-            <WelcomeToProject projectId={projectId} />
+            <WelcomeToProject
+                projectId={projectId}
+                setConnectSdkOpen={setConnectSdkOpen}
+            />
             <SdkExample>View SDK example</SdkExample>
         </Container>
     );

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.test.tsx

@@ -17,7 +17,12 @@ test('Project can start onboarding', async () => {
         <Routes>
             <Route
                 path={'/projects/:projectId'}
-                element={<WelcomeToProject projectId={projectId} />}
+                element={
+                    <WelcomeToProject
+                        projectId={projectId}
+                        setConnectSdkOpen={() => {}}
+                    />
+                }
             />
         </Routes>,
         {
@@ -39,7 +44,12 @@ test('Project can connect SDK', async () => {
         <Routes>
             <Route
                 path={'/projects/:projectId'}
-                element={<WelcomeToProject projectId={projectId} />}
+                element={
+                    <WelcomeToProject
+                        projectId={projectId}
+                        setConnectSdkOpen={() => {}}
+                    />
+                }
             />
         </Routes>,
         {

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.tsx

@@ -12,6 +12,7 @@ import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 
 interface IWelcomeToProjectProps {
     projectId: string;
+    setConnectSdkOpen: (open: boolean) => void;
 }
 
 interface IExistingFlagsProps {
@@ -81,7 +82,10 @@ const StyledLink = styled(Link)({
     justifyContent: 'center',
 });
 
-export const WelcomeToProject = ({ projectId }: IWelcomeToProjectProps) => {
+export const WelcomeToProject = ({
+    projectId,
+    setConnectSdkOpen,
+}: IWelcomeToProjectProps) => {
     const { project } = useProjectOverview(projectId);
     const isFirstFlagCreated =
         project.onboardingStatus.status === 'first-flag-created';
@@ -117,7 +121,9 @@ export const WelcomeToProject = ({ projectId }: IWelcomeToProjectProps) => {
                         We have not detected any connected SDKs on this project.
                     </Typography>
                     <ResponsiveButton
-                        onClick={() => {}}
+                        onClick={() => {
+                            setConnectSdkOpen(true);
+                        }}
                         maxWidth='200px'
                         projectId={projectId}
                         Icon={Add}