feat: Select sdk onboarding pt 1 (#8065)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -6,7 +6,9 @@ import {
     useMediaQuery,
     useTheme,
 } from '@mui/material';
-import { GenrateApiKeyConcepts, GeneratApiKey } from './GenerateApiKey';
+import { GenrateApiKeyConcepts, GenerateApiKey } from './GenerateApiKey';
+import { useState } from 'react';
+import { SelectSdk } from './SelectSdk';
 
 interface IConnectSDKDialogProps {
     open: boolean;
@@ -53,7 +55,12 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3, 8, 3, 8),
 }));
 
-export const ConnectSDKDialog = ({
+type OnboardingStage =
+    | { name: 'select-sdk' }
+    | { name: 'generate-api-key'; sdkType: 'CLIENT' | 'FRONTEND' }
+    | { name: 'test-connection' };
+
+export const ConnectSdkDialog = ({
     open,
     onClose,
     environments,
@@ -61,23 +68,31 @@ export const ConnectSDKDialog = ({
 }: IConnectSDKDialogProps) => {
     const theme = useTheme();
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
+    const [stage, setStage] = useState<OnboardingStage>({ name: 'select-sdk' });
 
     return (
         <StyledDialog open={open} onClose={onClose}>
             <Box sx={{ display: 'flex' }}>
                 <ConnectSdk>
-                    <GeneratApiKey
+                    {stage.name === 'select-sdk' ? <SelectSdk /> : null}
-                        environments={environments}
+                    {stage.name === 'generate-api-key' ? (
-                        project={project}
+                        <GenerateApiKey
-                    />
+                            environments={environments}
-                    <Navigation>
+                            project={project}
-                        <NextStepSectionSpacedContainer>
+                            sdkType={stage.sdkType}
-                            <Button variant='text' color='inherit'>
+                        />
-                                Back
+                    ) : null}
-                            </Button>
+
-                            <Button variant='contained'>Next</Button>
+                    {stage.name === 'generate-api-key' ? (
-                        </NextStepSectionSpacedContainer>
+                        <Navigation>
-                    </Navigation>
+                            <NextStepSectionSpacedContainer>
+                                <Button variant='text' color='inherit'>
+                                    Back
+                                </Button>
+                                <Button variant='contained'>Next</Button>
+                            </NextStepSectionSpacedContainer>
+                        </Navigation>
+                    ) : null}
                 </ConnectSdk>
 
                 {isLargeScreen ? <GenrateApiKeyConcepts /> : null}

frontend/src/component/onboarding/GenerateApiKey.tsx

@@ -260,15 +260,17 @@ export const GenrateApiKeyConcepts = () => (
     </ConceptsDefinitionsWrapper>
 );
 
-interface GeneratApiKeyProps {
+interface GenerateApiKeyProps {
     project: string;
     environments: string[];
+    sdkType: 'CLIENT' | 'FRONTEND';
 }
 
-export const GeneratApiKey = ({
+export const GenerateApiKey = ({
     environments,
     project,
-}: GeneratApiKeyProps) => {
+    sdkType,
+}: GenerateApiKeyProps) => {
     const [environment, setEnvironment] = useState('');
 
     useEffect(() => {
@@ -291,7 +293,7 @@ export const GeneratApiKey = ({
             await createToken(
                 {
                     environment,
-                    type: 'CLIENT',
+                    type: sdkType,
                     projects: [project],
                     username: `api-key-${project}-${environment}`,
                 },

frontend/src/component/onboarding/SelectSdk.tsx

@@ -0,0 +1,27 @@
+import { Box, styled, Typography } from '@mui/material';
+
+const SpacedContainer = styled('div')(({ theme }) => ({
+    padding: theme.spacing(5, 8, 3, 8),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+}));
+
+const SectionHeader = styled('div')(({ theme }) => ({
+    fontWeight: theme.fontWeight.bold,
+    marginBottom: theme.spacing(1),
+    fontSize: theme.fontSizes.bodySize,
+}));
+
+export const SelectSdk = () => {
+    return (
+        <SpacedContainer>
+            <Typography variant='h2'>Connect an SDK to Unleash</Typography>
+            <Box sx={{ mt: 4 }}>
+                <SectionHeader>Select SDK</SectionHeader>
+            </Box>
+        </SpacedContainer>
+    );
+};
+
+export const SelectSdkConcepts = () => {};

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

@@ -42,7 +42,7 @@ import { AvatarCell } from './AvatarCell';
 import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { styled } from '@mui/material';
-import { ConnectSDKDialog } from '../../../onboarding/ConnectSDKDialog';
+import { ConnectSdkDialog } from '../../../onboarding/ConnectSdkDialog';
 
 interface IPaginatedProjectFeatureTogglesProps {
     environments: string[];
@@ -491,7 +491,7 @@ export const ProjectFeatureToggles = ({
 
                     {featureToggleModals}
 
-                    <ConnectSDKDialog
+                    <ConnectSdkDialog
                         open={false}
                         onClose={() => {}}
                         project={projectId}