feat: connect sdk concepts (#8079)

frontend/src/component/onboarding/ConnectSdkDialog.tsx

@@ -6,9 +6,10 @@ import {
     useMediaQuery,
     useTheme,
 } from '@mui/material';
-import { GenrateApiKeyConcepts, GenerateApiKey } from './GenerateApiKey';
+import { GenerateApiKey } from './GenerateApiKey';
 import { useEffect, useState } from 'react';
 import { type Sdk, SelectSdk } from './SelectSdk';
+import { GenrateApiKeyConcepts, SelectSdkConcepts } from './UnleashConcepts';
 
 interface IConnectSDKDialogProps {
     open: boolean;
@@ -38,7 +39,7 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 const Navigation = styled('div')(({ theme }) => ({
-    marginTop: 'auto',
+    marginTop: theme.spacing(16),
     borderTop: `1px solid ${theme.palette.divider}}`,
     display: 'flex',
     justifyContent: 'flex-end',
@@ -118,7 +119,12 @@ export const ConnectSdkDialog = ({
                     ) : null}
                 </ConnectSdk>
 
-                {isLargeScreen ? <GenrateApiKeyConcepts /> : null}
+                {isLargeScreen && stage.name === 'select-sdk' ? (
+                    <SelectSdkConcepts />
+                ) : null}
+                {isLargeScreen && stage.name === 'generate-api-key' ? (
+                    <GenrateApiKeyConcepts />
+                ) : null}
             </Box>
         </StyledDialog>
     );

frontend/src/component/onboarding/GenerateApiKey.tsx

@@ -7,7 +7,6 @@ import {
     Box,
     Button,
     styled,
-    type Theme,
     Typography,
     useMediaQuery,
     useTheme,
@@ -15,8 +14,6 @@ import {
 import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
-import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
-import CodeIcon from '@mui/icons-material/Code';
 
 const ChooseEnvironment = ({
     environments,
@@ -100,43 +97,6 @@ const SpacedContainer = styled('div')(({ theme }) => ({
     gap: theme.spacing(3),
 }));
 
-const ConceptsDefinitionsWrapper = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.background.sidebar,
-    padding: theme.spacing(6),
-    flex: 0,
-    minWidth: '400px',
-}));
-
-const ConceptDetails = styled('p')(({ theme }) => ({
-    color: theme.palette.primary.contrastText,
-    fontSize: theme.typography.caption.fontSize,
-    marginBottom: theme.spacing(2),
-}));
-
-const IconStyle = ({ theme }: { theme: Theme }) => ({
-    color: theme.palette.primary.contrastText,
-    fontSize: theme.typography.body2.fontSize,
-    marginTop: theme.spacing(0.5),
-});
-
-const StyledProjectIcon = styled(ProjectIcon)(IconStyle);
-const StyledEnvironmentsIcon = styled(EnvironmentsIcon)(IconStyle);
-const StyledCodeIcon = styled(CodeIcon)(IconStyle);
-
-const ConceptItem = styled('div')(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(1.5),
-    alignItems: 'flex-start',
-    marginTop: theme.spacing(3),
-}));
-
-const ConceptSummary = styled('div')(({ theme }) => ({
-    color: theme.palette.primary.contrastText,
-    fontSize: theme.typography.body2.fontSize,
-    fontWeight: theme.typography.fontWeightBold,
-    marginBottom: theme.spacing(2),
-}));
-
 const TokenExplanation = ({
     project,
     environment,
@@ -219,46 +179,6 @@ const TokenExplanation = ({
     );
 };
 
-export const GenrateApiKeyConcepts = () => (
-    <ConceptsDefinitionsWrapper>
-        <ConceptItem>
-            <StyledProjectIcon />
-            <Box>
-                <ConceptSummary>Flags live in projects</ConceptSummary>
-                <ConceptDetails>
-                    Projects are containers for feature flags. When you create a
-                    feature flag it will belong to the project you create it in.
-                </ConceptDetails>
-            </Box>
-        </ConceptItem>
-        <ConceptItem>
-            <StyledEnvironmentsIcon />
-            <Box>
-                <ConceptSummary>
-                    Flags have configuration in environments
-                </ConceptSummary>
-                <ConceptDetails>
-                    In Unleash you can have multiple environments. Each feature
-                    flag will have different configuration in every environment.
-                </ConceptDetails>
-            </Box>
-        </ConceptItem>
-        <ConceptItem>
-            <StyledCodeIcon />
-            <Box>
-                <ConceptSummary>
-                    SDKs connect to Unleash to retrieve configuration
-                </ConceptSummary>
-                <ConceptDetails>
-                    When you connect an SDK to Unleash it will use the API key
-                    to deduce which feature flags to retrieve and from which
-                    environment to retrieve configuration.
-                </ConceptDetails>
-            </Box>
-        </ConceptItem>
-    </ConceptsDefinitionsWrapper>
-);
-
 interface GenerateApiKeyProps {
     project: string;
     environments: string[];

frontend/src/component/onboarding/UnleashConcepts.tsx

@@ -0,0 +1,99 @@
+import { Box, styled, type Theme } from '@mui/material';
+import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
+import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
+import CodeIcon from '@mui/icons-material/Code';
+
+const ConceptsDefinitionsWrapper = styled('div')(({ theme }) => ({
+    backgroundColor: theme.palette.background.sidebar,
+    padding: theme.spacing(12, 6, 6, 6),
+    flex: 0,
+    minWidth: '400px',
+}));
+
+const ConceptDetails = styled('p')(({ theme }) => ({
+    color: theme.palette.primary.contrastText,
+    fontSize: theme.typography.caption.fontSize,
+    marginBottom: theme.spacing(2),
+}));
+
+const IconStyle = ({ theme }: { theme: Theme }) => ({
+    color: theme.palette.primary.contrastText,
+    fontSize: theme.typography.body2.fontSize,
+    marginTop: theme.spacing(0.5),
+});
+
+const StyledProjectIcon = styled(ProjectIcon)(IconStyle);
+const StyledEnvironmentsIcon = styled(EnvironmentsIcon)(IconStyle);
+const StyledCodeIcon = styled(CodeIcon)(IconStyle);
+
+const ConceptItem = styled('div')(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1.5),
+    alignItems: 'flex-start',
+    marginTop: theme.spacing(3),
+}));
+
+const ConceptSummary = styled('div')(({ theme }) => ({
+    color: theme.palette.primary.contrastText,
+    fontSize: theme.typography.body2.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: theme.spacing(2),
+}));
+
+export const GenrateApiKeyConcepts = () => (
+    <ConceptsDefinitionsWrapper>
+        <ConceptItem>
+            <StyledProjectIcon />
+            <Box>
+                <ConceptSummary>Flags live in projects</ConceptSummary>
+                <ConceptDetails>
+                    Projects are containers for feature flags. When you create a
+                    feature flag it will belong to the project you create it in.
+                </ConceptDetails>
+            </Box>
+        </ConceptItem>
+        <ConceptItem>
+            <StyledEnvironmentsIcon />
+            <Box>
+                <ConceptSummary>
+                    Flags have configuration in environments
+                </ConceptSummary>
+                <ConceptDetails>
+                    In Unleash you can have multiple environments. Each feature
+                    flag will have different configuration in every environment.
+                </ConceptDetails>
+            </Box>
+        </ConceptItem>
+        <ConceptItem>
+            <StyledCodeIcon />
+            <Box>
+                <ConceptSummary>
+                    SDKs connect to Unleash to retrieve configuration
+                </ConceptSummary>
+                <ConceptDetails>
+                    When you connect an SDK to Unleash it will use the API key
+                    to deduce which feature flags to retrieve and from which
+                    environment to retrieve configuration.
+                </ConceptDetails>
+            </Box>
+        </ConceptItem>
+    </ConceptsDefinitionsWrapper>
+);
+
+export const SelectSdkConcepts = () => (
+    <ConceptsDefinitionsWrapper>
+        <ConceptItem>
+            <StyledCodeIcon />
+            <Box>
+                <ConceptSummary>SDKs and Unleash</ConceptSummary>
+                <ConceptDetails>
+                    SDKs serve to bind your application to Unleash. The SDK will
+                    connect to Unleash via HTTP and retrieve feature flag
+                    configuration that is then cached in your application.
+                    Making sure none of your application data ever leaves your
+                    servers.
+                </ConceptDetails>
+            </Box>
+        </ConceptItem>
+    </ConceptsDefinitionsWrapper>
+);