mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-31 00:16:47 +01:00
feat: connect sdk step 1 (#8042)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
6030900b40
commit
82f9783fe6
234
frontend/src/component/onboarding/ConnectSDKDialog.tsx
Normal file
234
frontend/src/component/onboarding/ConnectSDKDialog.tsx
Normal file
@ -0,0 +1,234 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
styled,
|
||||||
|
type Theme,
|
||||||
|
Typography,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
|
||||||
|
import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
|
||||||
|
import CodeIcon from '@mui/icons-material/Code';
|
||||||
|
|
||||||
|
interface IConnectSDKDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
onClose: () => void;
|
||||||
|
project: string;
|
||||||
|
environments: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const ConceptsDefinitions = styled('div')(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.background.sidebar,
|
||||||
|
padding: theme.spacing(8),
|
||||||
|
flexBasis: '30%',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const IconStyle = ({ theme }: { theme: Theme }) => ({
|
||||||
|
color: theme.palette.primary.contrastText,
|
||||||
|
fontSize: theme.fontSizes.smallBody,
|
||||||
|
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.fontSizes.smallBody,
|
||||||
|
fontWeight: theme.fontWeight.bold,
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const ConceptDetails = styled('p')(({ theme }) => ({
|
||||||
|
color: theme.palette.primary.contrastText,
|
||||||
|
fontSize: theme.fontSizes.smallerBody,
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const APIKeyGeneration = styled('div')(({ theme }) => ({
|
||||||
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
flexBasis: '70%',
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const SpacedContainer = styled('div')(({ theme }) => ({
|
||||||
|
padding: theme.spacing(5, 8, 3, 8),
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
gap: theme.spacing(3),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledDialog = styled(Dialog)(({ theme }) => ({
|
||||||
|
'& .MuiDialog-paper': {
|
||||||
|
borderRadius: theme.shape.borderRadiusLarge,
|
||||||
|
maxWidth: theme.spacing(170),
|
||||||
|
width: '100%',
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
},
|
||||||
|
padding: 0,
|
||||||
|
'& .MuiPaper-root > section': {
|
||||||
|
overflowX: 'hidden',
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const SectionHeader = styled('div')(({ theme }) => ({
|
||||||
|
fontWeight: theme.fontWeight.bold,
|
||||||
|
marginBottom: theme.spacing(1),
|
||||||
|
fontSize: theme.fontSizes.bodySize,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const SectionDescription = styled('p')(({ theme }) => ({
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
fontSize: theme.fontSizes.smallBody,
|
||||||
|
marginBottom: theme.spacing(2),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const NextStepSection = styled('div')(({ theme }) => ({
|
||||||
|
marginTop: 'auto',
|
||||||
|
borderTop: `1px solid ${theme.palette.divider}}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: theme.spacing(3, 8, 3, 8),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const ConnectSDKDialog = ({
|
||||||
|
open,
|
||||||
|
onClose,
|
||||||
|
environments,
|
||||||
|
}: IConnectSDKDialogProps) => {
|
||||||
|
const [environment, setEnvironment] = useState('');
|
||||||
|
const longestEnv = Math.max(
|
||||||
|
...environments.map((environment) => environment.length),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (environments.length > 0) {
|
||||||
|
setEnvironment(environments[0]);
|
||||||
|
}
|
||||||
|
}, [JSON.stringify(environments)]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StyledDialog open={open} onClose={onClose}>
|
||||||
|
<Box sx={{ display: 'flex' }}>
|
||||||
|
<APIKeyGeneration>
|
||||||
|
<SpacedContainer>
|
||||||
|
<Typography variant='h2'>
|
||||||
|
Connect an SDK to Unleash
|
||||||
|
</Typography>
|
||||||
|
<Box>
|
||||||
|
<SectionHeader>Environment</SectionHeader>
|
||||||
|
<SectionDescription>
|
||||||
|
The environment SDK will connect to in order to
|
||||||
|
retrieve configuration.
|
||||||
|
</SectionDescription>
|
||||||
|
{environments.length > 0 ? (
|
||||||
|
<SingleSelectConfigButton
|
||||||
|
tooltip={{ header: '' }}
|
||||||
|
description='Select the environment where API key will be created'
|
||||||
|
options={environments.map(
|
||||||
|
(environment) => ({
|
||||||
|
label: environment,
|
||||||
|
value: environment,
|
||||||
|
}),
|
||||||
|
)}
|
||||||
|
onChange={(value: any) => {
|
||||||
|
setEnvironment(value);
|
||||||
|
}}
|
||||||
|
button={{
|
||||||
|
label: environment,
|
||||||
|
icon: <EnvironmentsIcon />,
|
||||||
|
labelWidth: `${longestEnv + 5}ch`,
|
||||||
|
}}
|
||||||
|
search={{
|
||||||
|
label: 'Filter project mode options',
|
||||||
|
placeholder: 'Select project mode',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ mt: 3 }}>
|
||||||
|
<SectionHeader>API Key</SectionHeader>
|
||||||
|
<SectionDescription>
|
||||||
|
You currently have no active API keys for this
|
||||||
|
project/environment combination. You'll need to
|
||||||
|
generate and API key in order to proceed with
|
||||||
|
connecting your SDK.
|
||||||
|
</SectionDescription>
|
||||||
|
<Button variant='contained'>
|
||||||
|
Generate API Key
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</SpacedContainer>
|
||||||
|
|
||||||
|
<NextStepSection>
|
||||||
|
<NextStepSectionSpacedContainer>
|
||||||
|
<Box>
|
||||||
|
<b>Next:</b> Choose SDK and connect
|
||||||
|
</Box>
|
||||||
|
<Button variant='contained'>Next</Button>
|
||||||
|
</NextStepSectionSpacedContainer>
|
||||||
|
</NextStepSection>
|
||||||
|
</APIKeyGeneration>
|
||||||
|
<ConceptsDefinitions>
|
||||||
|
<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>
|
||||||
|
</ConceptsDefinitions>
|
||||||
|
</Box>
|
||||||
|
</StyledDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -42,6 +42,7 @@ import { AvatarCell } from './AvatarCell';
|
|||||||
import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
|
import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
|
||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import { styled } from '@mui/material';
|
import { styled } from '@mui/material';
|
||||||
|
import { ConnectSDKDialog } from '../../../onboarding/ConnectSDKDialog';
|
||||||
|
|
||||||
interface IPaginatedProjectFeatureTogglesProps {
|
interface IPaginatedProjectFeatureTogglesProps {
|
||||||
environments: string[];
|
environments: string[];
|
||||||
@ -489,6 +490,13 @@ export const ProjectFeatureToggles = ({
|
|||||||
{rowActionsDialogs}
|
{rowActionsDialogs}
|
||||||
|
|
||||||
{featureToggleModals}
|
{featureToggleModals}
|
||||||
|
|
||||||
|
<ConnectSDKDialog
|
||||||
|
open={false}
|
||||||
|
onClose={() => {}}
|
||||||
|
project={projectId}
|
||||||
|
environments={environments}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</PageContent>
|
</PageContent>
|
||||||
<BatchSelectionActionsBar count={selectedData.length}>
|
<BatchSelectionActionsBar count={selectedData.length}>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user