feat: navigate between all stages (#8080)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -56,10 +56,7 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3, 8, 3, 8),
 }));
 
-type OnboardingStage =
+type OnboardingStage = 'select-sdk' | 'generate-api-key' | 'test-connection';
-    | { name: 'select-sdk' }
-    | { name: 'generate-api-key' }
-    | { name: 'test-connection' };
 
 export const ConnectSdkDialog = ({
     open,
@@ -71,7 +68,14 @@ export const ConnectSdkDialog = ({
     const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
     const [sdk, setSdk] = useState<Sdk | null>(null);
     const [environment, setEnvironment] = useState<string | null>(null);
-    const [stage, setStage] = useState<OnboardingStage>({ name: 'select-sdk' });
+    const [apiKey, setApiKey] = useState<string | null>(null);
+    const [stage, setStage] = useState<OnboardingStage>('select-sdk');
+
+    const isSelectSdkStage = stage === 'select-sdk';
+    const isGenerateApiKeyStage =
+        stage === 'generate-api-key' && sdk && environment;
+    const isTestConnectionStage =
+        stage === 'test-connection' && sdk && environment && apiKey;
 
     useEffect(() => {
         if (environments.length > 0) {
@@ -83,46 +87,80 @@ export const ConnectSdkDialog = ({
         <StyledDialog open={open} onClose={onClose}>
             <Box sx={{ display: 'flex' }}>
                 <ConnectSdk>
-                    {stage.name === 'select-sdk' ? (
+                    {isSelectSdkStage ? (
                         <SelectSdk
                             onSelect={(sdk) => {
                                 setSdk(sdk);
-                                setStage({ name: 'generate-api-key' });
+                                setStage('generate-api-key');
                             }}
                         />
                     ) : null}
-                    {stage.name === 'generate-api-key' && sdk && environment ? (
+                    {isGenerateApiKeyStage ? (
                         <GenerateApiKey
                             environments={environments}
                             environment={environment}
                             project={project}
                             sdkType={sdk.type}
                             onEnvSelect={setEnvironment}
+                            onApiKey={(apiKey) => {
+                                setApiKey(apiKey);
+                            }}
                         />
                     ) : null}
+                    {isTestConnectionStage ? <div>Last stage</div> : null}
 
-                    {stage.name === 'generate-api-key' ? (
+                    {stage === 'generate-api-key' ? (
                         <Navigation>
                             <NextStepSectionSpacedContainer>
                                 <Button
                                     variant='text'
                                     color='inherit'
                                     onClick={() => {
-                                        setStage({ name: 'select-sdk' });
+                                        setStage('select-sdk');
                                     }}
                                 >
                                     Back
                                 </Button>
-                                <Button variant='contained'>Next</Button>
+                                <Button
+                                    variant='contained'
+                                    onClick={() => {
+                                        setStage('test-connection');
+                                    }}
+                                >
+                                    Next
+                                </Button>
+                            </NextStepSectionSpacedContainer>
+                        </Navigation>
+                    ) : null}
+                    {isTestConnectionStage ? (
+                        <Navigation>
+                            <NextStepSectionSpacedContainer>
+                                <Button
+                                    variant='text'
+                                    color='inherit'
+                                    onClick={() => {
+                                        setStage('generate-api-key');
+                                    }}
+                                >
+                                    Back
+                                </Button>
+                                <Button
+                                    variant='contained'
+                                    onClick={() => {
+                                        onClose();
+                                    }}
+                                >
+                                    Finish
+                                </Button>
                             </NextStepSectionSpacedContainer>
                         </Navigation>
                     ) : null}
                 </ConnectSdk>
 
-                {isLargeScreen && stage.name === 'select-sdk' ? (
+                {isLargeScreen && isSelectSdkStage ? (
                     <SelectSdkConcepts />
                 ) : null}
-                {isLargeScreen && stage.name === 'generate-api-key' ? (
+                {isLargeScreen && isGenerateApiKeyStage ? (
                     <GenrateApiKeyConcepts />
                 ) : null}
             </Box>

frontend/src/component/onboarding/GenerateApiKey.tsx

@@ -14,6 +14,7 @@ import {
 import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
+import { useEffect } from 'react';
 
 const ChooseEnvironment = ({
     environments,
@@ -159,11 +160,11 @@ const TokenExplanation = ({
                             </SecretExplanationDescription>
                         </ArcherElement>
                         <ArcherElement
-                            id='secreat-description'
+                            id='secret-description'
                             relations={[
                                 {
                                     targetId: 'secret',
-                                    targetAnchor: 'bottom',
+                                    targetAnchor: 'right',
                                     sourceAnchor: 'top',
                                 },
                             ]}
@@ -185,6 +186,7 @@ interface GenerateApiKeyProps {
     environment: string;
     sdkType: 'client' | 'frontend';
     onEnvSelect: (env: string) => void;
+    onApiKey: (apiKey: string | null) => void;
 }
 
 export const GenerateApiKey = ({
@@ -193,12 +195,18 @@ export const GenerateApiKey = ({
     project,
     sdkType,
     onEnvSelect,
+    onApiKey,
 }: GenerateApiKeyProps) => {
     const { tokens, refetch: refreshTokens } = useProjectApiTokens(project);
     const { createToken, loading: creatingToken } = useProjectApiTokensApi();
     const currentEnvironmentToken = tokens.find(
         (token) => token.environment === environment && token.type === sdkType,
     );
+
+    useEffect(() => {
+        onApiKey(currentEnvironmentToken?.secret || null);
+    }, [currentEnvironmentToken]);
+
     const parsedToken = parseToken(currentEnvironmentToken?.secret);
 
     const { setToastApiError } = useToast();

frontend/src/component/onboarding/SelectSdk.tsx

@@ -15,6 +15,7 @@ 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';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
@@ -108,7 +109,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {serverSdks.map((sdk) => (
                         <SdkTile>
-                            <StyledAvatar src={sdk.icon} />
+                            <StyledAvatar src={formatAssetPath(sdk.icon)} />
                             <SdkTileContent>
                                 <b>{sdk.name}</b>{' '}
                                 <Link
@@ -132,7 +133,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
                 <SdkListSection>
                     {clientSdks.map((sdk) => (
                         <SdkTile>
-                            <StyledAvatar src={sdk.icon} />
+                            <StyledAvatar src={formatAssetPath(sdk.icon)} />
                             <SdkTileContent>
                                 <b>{sdk.name}</b>{' '}
                                 <Link