diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/ConnectSdkDialog.tsx
index ec4b9e3305..8fc02e13d7 100644
--- a/frontend/src/component/onboarding/ConnectSdkDialog.tsx
+++ b/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}
- {isLargeScreen ? : null}
+ {isLargeScreen && stage.name === 'select-sdk' ? (
+
+ ) : null}
+ {isLargeScreen && stage.name === 'generate-api-key' ? (
+
+ ) : null}
);
diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/GenerateApiKey.tsx
index 7ee7668e2d..0517e9a441 100644
--- a/frontend/src/component/onboarding/GenerateApiKey.tsx
+++ b/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 = () => (
-
-
-
-
- Flags live in projects
-
- Projects are containers for feature flags. When you create a
- feature flag it will belong to the project you create it in.
-
-
-
-
-
-
-
- Flags have configuration in environments
-
-
- In Unleash you can have multiple environments. Each feature
- flag will have different configuration in every environment.
-
-
-
-
-
-
-
- SDKs connect to Unleash to retrieve configuration
-
-
- 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.
-
-
-
-
-);
-
interface GenerateApiKeyProps {
project: string;
environments: string[];
diff --git a/frontend/src/component/onboarding/UnleashConcepts.tsx b/frontend/src/component/onboarding/UnleashConcepts.tsx
new file mode 100644
index 0000000000..c62e1ebe49
--- /dev/null
+++ b/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 = () => (
+
+
+
+
+ Flags live in projects
+
+ Projects are containers for feature flags. When you create a
+ feature flag it will belong to the project you create it in.
+
+
+
+
+
+
+
+ Flags have configuration in environments
+
+
+ In Unleash you can have multiple environments. Each feature
+ flag will have different configuration in every environment.
+
+
+
+
+
+
+
+ SDKs connect to Unleash to retrieve configuration
+
+
+ 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.
+
+
+
+
+);
+
+export const SelectSdkConcepts = () => (
+
+
+
+
+ SDKs and Unleash
+
+ 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.
+
+
+
+
+);