mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-04 00:18:01 +01:00
feat: connect sdk concepts (#8079)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
48ddd255d6
commit
ba8d043f3c
@ -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>
|
||||
);
|
||||
|
||||
@ -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[];
|
||||
|
||||
99
frontend/src/component/onboarding/UnleashConcepts.tsx
Normal file
99
frontend/src/component/onboarding/UnleashConcepts.tsx
Normal file
@ -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>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user