feat: Sdk snippets in test connection phase

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -8,8 +8,14 @@ import {
 } from '@mui/material';
 import { GenerateApiKey } from './GenerateApiKey';
 import { useEffect, useState } from 'react';
-import { type Sdk, SelectSdk } from './SelectSdk';
-import { GenrateApiKeyConcepts, SelectSdkConcepts } from './UnleashConcepts';
+import { SelectSdk } from './SelectSdk';
+import {
+    ConceptsDefinitionsWrapper,
+    GenrateApiKeyConcepts,
+    SelectSdkConcepts,
+} from './UnleashConcepts';
+import { TestSdkConnection } from './TestSdkConnection';
+import type { Sdk } from './SharedComponents';
 
 interface IConnectSDKDialogProps {
     open: boolean;
@@ -107,7 +113,9 @@ export const ConnectSdkDialog = ({
                             }}
                         />
                     ) : null}
-                    {isTestConnectionStage ? <div>Last stage</div> : null}
+                    {isTestConnectionStage ? (
+                        <TestSdkConnection sdk={sdk} apiKey={apiKey} />
+                    ) : null}
 
                     {stage === 'generate-api-key' ? (
                         <Navigation>
@@ -163,6 +171,9 @@ export const ConnectSdkDialog = ({
                 {isLargeScreen && isGenerateApiKeyStage ? (
                     <GenrateApiKeyConcepts />
                 ) : null}
+                {isLargeScreen && isTestConnectionStage ? (
+                    <ConceptsDefinitionsWrapper />
+                ) : null}
             </Box>
         </StyledDialog>
     );

frontend/src/component/onboarding/GenerateApiKey.tsx

@@ -1,8 +1,8 @@
-import { useProjectApiTokens } from '../../hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
-import useProjectApiTokensApi from '../../hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
+import { useProjectApiTokens } from 'hooks/api/getters/useProjectApiTokens/useProjectApiTokens';
+import useProjectApiTokensApi from 'hooks/api/actions/useProjectApiTokensApi/useProjectApiTokensApi';
 import { parseToken } from './parseToken';
-import useToast from '../../hooks/useToast';
-import { formatUnknownError } from '../../utils/formatUnknownError';
+import useToast from 'hooks/useToast';
+import { formatUnknownError } from 'utils/formatUnknownError';
 import {
     Box,
     Button,
@@ -15,6 +15,7 @@ import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigBut
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
+import { SectionHeader } from './SharedComponents';
 
 const ChooseEnvironment = ({
     environments,
@@ -79,12 +80,6 @@ const TokenExplanationBox = styled(Box)(({ theme }) => ({
     flexWrap: 'wrap',
 }));
 
-const SectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightBold,
-    marginBottom: theme.spacing(1),
-    fontSize: theme.typography.body1.fontSize,
-}));
-
 const SectionDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.secondary,
     fontSize: theme.typography.body2.fontSize,

frontend/src/component/onboarding/SelectSdk.tsx

@@ -16,6 +16,12 @@ import rust from 'assets/icons/sdks/Logo-rust.svg';
 import svelte from 'assets/icons/sdks/Logo-svelte.svg';
 import vue from 'assets/icons/sdks/Logo-vue.svg';
 import { formatAssetPath } from 'utils/formatPath';
+import {
+    type ClientSdkName,
+    type Sdk,
+    SectionHeader,
+    type ServerSdkName,
+} from './SharedComponents';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -24,12 +30,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(3),
 }));
 
-const PrimarySectionHeader = styled('div')(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightBold,
-    marginBottom: theme.spacing(1),
-    fontSize: theme.typography.body1.fontSize,
-}));
-
 const SecondarySectionHeader = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),
@@ -71,7 +71,7 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
     boxShadow: theme.shadows[2],
 }));
 
-const serverSdks = [
+const serverSdks: { name: ServerSdkName; icon: string }[] = [
     { name: 'Node', icon: node },
     { name: 'Golang', icon: go },
     { name: 'Ruby', icon: ruby },
@@ -82,7 +82,7 @@ const serverSdks = [
     { name: 'Python', icon: python },
 ];
 
-const clientSdks = [
+const clientSdks: { name: ClientSdkName; icon: string }[] = [
     { name: 'Javascript', icon: javascript },
     { name: 'React', icon: react },
     { name: 'Vue', icon: vue },
@@ -92,8 +92,6 @@ const clientSdks = [
     { name: 'Flutter', icon: flutter },
 ];
 
-type SdkType = 'client' | 'frontend';
-export type Sdk = { name: string; type: SdkType };
 interface ISelectSdkProps {
     onSelect: (sdk: Sdk) => void;
 }
@@ -102,7 +100,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
             <Box sx={{ mt: 4 }}>
-                <PrimarySectionHeader>Select SDK</PrimarySectionHeader>
+                <SectionHeader>Select SDK</SectionHeader>
                 <SecondarySectionHeader>
                     Server side SDKs
                 </SecondarySectionHeader>
@@ -155,5 +153,3 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
         </SpacedContainer>
     );
 };
-
-export const SelectSdkConcepts = () => {};

frontend/src/component/onboarding/SharedComponents.tsx

@@ -0,0 +1,29 @@
+import { styled } from '@mui/material';
+
+export type SdkType = 'client' | 'frontend';
+export type Sdk = { name: SdkName; type: SdkType };
+
+export const SectionHeader = styled('div')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: theme.spacing(1),
+    fontSize: theme.typography.body1.fontSize,
+}));
+
+export type ServerSdkName =
+    | 'Node'
+    | 'Golang'
+    | 'Ruby'
+    | 'PHP'
+    | 'Rust'
+    | 'DotNet'
+    | 'Java'
+    | 'Python';
+export type ClientSdkName =
+    | 'Javascript'
+    | 'React'
+    | 'Vue'
+    | 'Svelte'
+    | 'Swift'
+    | 'Android'
+    | 'Flutter';
+export type SdkName = ServerSdkName | ClientSdkName;