feat: change sdk action (#8098)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -121,6 +121,9 @@ export const ConnectSdkDialog = ({
                             sdk={sdk}
                             apiKey={apiKey}
                             feature={feature}
+                            onSdkChange={() => {
+                                setStage('select-sdk');
+                            }}
                         />
                     ) : null}
 

frontend/src/component/onboarding/SelectSdk.tsx

@@ -1,23 +1,8 @@
 import { Avatar, Box, Link, styled, Typography } from '@mui/material';
 import type { FC } from 'react';
-import android from 'assets/icons/sdks/Logo-android.svg';
-import dotnet from 'assets/icons/sdks/Logo-net.svg';
-import flutter from 'assets/icons/sdks/Logo-flutter.svg';
-import go from 'assets/icons/sdks/Logo-go.svg';
-import swift from 'assets/icons/sdks/Logo-swift.svg';
-import java from 'assets/icons/sdks/Logo-java.svg';
-import javascript from 'assets/icons/sdks/Logo-javascript.svg';
-import node from 'assets/icons/sdks/Logo-node.svg';
-import php from 'assets/icons/sdks/Logo-php.svg';
-import python from 'assets/icons/sdks/Logo-python.svg';
-import react from 'assets/icons/sdks/Logo-react.svg';
-import ruby from 'assets/icons/sdks/Logo-ruby.svg';
-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 { SectionHeader } from './SharedComponents';
-import type { ClientSdkName, Sdk, ServerSdkName } from './sharedTypes';
+import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -67,27 +52,6 @@ const StyledAvatar = styled(Avatar)(({ theme }) => ({
     boxShadow: theme.shadows[2],
 }));
 
-export const serverSdks: { name: ServerSdkName; icon: string }[] = [
-    { name: 'Node', icon: node },
-    { name: 'Golang', icon: go },
-    { name: 'Ruby', icon: ruby },
-    { name: 'PHP', icon: php },
-    { name: 'Rust', icon: rust },
-    { name: 'DotNet', icon: dotnet },
-    { name: 'Java', icon: java },
-    { name: 'Python', icon: python },
-];
-
-export const clientSdks: { name: ClientSdkName; icon: string }[] = [
-    { name: 'Javascript', icon: javascript },
-    { name: 'React', icon: react },
-    { name: 'Vue', icon: vue },
-    { name: 'Svelte', icon: svelte },
-    { name: 'Swift', icon: swift },
-    { name: 'Android', icon: android },
-    { name: 'Flutter', icon: flutter },
-];
-
 interface ISelectSdkProps {
     onSelect: (sdk: Sdk) => void;
 }

frontend/src/component/onboarding/TestSdkConnection.tsx

@@ -1,8 +1,16 @@
 import type { FC } from 'react';
-import { Box, IconButton, styled, Tooltip, Typography } from '@mui/material';
+import {
+    Avatar,
+    Box,
+    IconButton,
+    Link,
+    styled,
+    Tooltip,
+    Typography,
+} from '@mui/material';
 import { SectionHeader } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import type { Sdk } from './sharedTypes';
+import { allSdks, type Sdk } from './sharedTypes';
 import {
     checkFlagCodeSnippets,
     initializeCodeSnippets,
@@ -11,6 +19,7 @@ import {
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 import CopyIcon from '@mui/icons-material/FileCopy';
+import { formatAssetPath } from '../../utils/formatPath';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -58,15 +67,26 @@ const CopyBlock: FC<{ title: string; code: string }> = ({ title, code }) => {
     );
 };
 
+const ChangeSdk = styled('div')(({ theme }) => ({
+    display: 'inline-flex',
+    gap: theme.spacing(3),
+    padding: theme.spacing(1, 2),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(3),
+}));
+
 interface ITestSdkConnectionProps {
     sdk: Sdk;
     apiKey: string;
     feature: string;
+    onSdkChange: () => void;
 }
 export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
     sdk,
     apiKey,
     feature,
+    onSdkChange,
 }) => {
     const { uiConfig } = useUiConfig();
 
@@ -89,11 +109,24 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
         '<YOUR_FLAG>',
         feature,
     );
+    const sdkIcon = allSdks.find((item) => item.name === sdk.name)?.icon;
 
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
             <Box sx={{ mt: 4 }}>
+                <ChangeSdk>
+                    {sdkIcon ? (
+                        <Avatar
+                            variant='circular'
+                            src={formatAssetPath(sdkIcon)}
+                            alt={sdk.name}
+                        />
+                    ) : null}
+                    <Link onClick={onSdkChange} component='button'>
+                        Change SDK
+                    </Link>
+                </ChangeSdk>
                 <SectionHeader>Setup the SDK</SectionHeader>
                 <p>1. Install the SDK</p>
                 <CopyBlock title='Copy command' code={installCommand} />

frontend/src/component/onboarding/sharedTypes.ts

@@ -1,3 +1,19 @@
+import node from '../../assets/icons/sdks/Logo-node.svg';
+import go from '../../assets/icons/sdks/Logo-go.svg';
+import ruby from '../../assets/icons/sdks/Logo-ruby.svg';
+import php from '../../assets/icons/sdks/Logo-php.svg';
+import rust from '../../assets/icons/sdks/Logo-rust.svg';
+import dotnet from '../../assets/icons/sdks/Logo-net.svg';
+import java from '../../assets/icons/sdks/Logo-java.svg';
+import python from '../../assets/icons/sdks/Logo-python.svg';
+import javascript from '../../assets/icons/sdks/Logo-javascript.svg';
+import react from '../../assets/icons/sdks/Logo-react.svg';
+import vue from '../../assets/icons/sdks/Logo-vue.svg';
+import svelte from '../../assets/icons/sdks/Logo-svelte.svg';
+import swift from '../../assets/icons/sdks/Logo-swift.svg';
+import android from '../../assets/icons/sdks/Logo-android.svg';
+import flutter from '../../assets/icons/sdks/Logo-flutter.svg';
+
 export type SdkType = 'client' | 'frontend';
 export type Sdk = { name: SdkName; type: SdkType };
 export type ServerSdkName =
@@ -18,3 +34,26 @@ export type ClientSdkName =
     | 'Android'
     | 'Flutter';
 export type SdkName = ServerSdkName | ClientSdkName;
+
+export const serverSdks: { name: ServerSdkName; icon: string }[] = [
+    { name: 'Node', icon: node },
+    { name: 'Golang', icon: go },
+    { name: 'Ruby', icon: ruby },
+    { name: 'PHP', icon: php },
+    { name: 'Rust', icon: rust },
+    { name: 'DotNet', icon: dotnet },
+    { name: 'Java', icon: java },
+    { name: 'Python', icon: python },
+];
+export const clientSdks: { name: ClientSdkName; icon: string }[] = [
+    { name: 'Javascript', icon: javascript },
+    { name: 'React', icon: react },
+    { name: 'Vue', icon: vue },
+    { name: 'Svelte', icon: svelte },
+    { name: 'Swift', icon: swift },
+    { name: 'Android', icon: android },
+    { name: 'Flutter', icon: flutter },
+];
+
+export const allSdks: { name: ClientSdkName | ServerSdkName; icon: string }[] =
+    [...serverSdks, ...clientSdks];

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

@@ -2,7 +2,7 @@ import { type SelectChangeEvent, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import Select from 'component/common/select';
 import { useState } from 'react';
-import { clientSdks, serverSdks } from '../../../../onboarding/SelectSdk';
+import { allSdks } from '../../../../onboarding/sharedTypes';
 
 const Container = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -34,8 +34,6 @@ const StyledLink = styled(Link)({
 });
 
 export const SdkExample = () => {
-    const allSdks = [...serverSdks, ...clientSdks];
-
     const sdkOptions = allSdks.map((sdk) => ({
         key: sdk.name,
         label: sdk.name,