Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-27 13:49:10 +02:00
Code Issues Projects Releases Wiki Activity

feat: onboarding step badges (#8102)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-05 15:21:27 +02:00 committed by GitHub
parent 355b3eb58a
commit 09e55c10c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/onboarding/GenerateApiKey.tsx
View File

@ -15,8 +15,9 @@ import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigBut
import EnvironmentsIcon from '@mui/icons-material/CloudCircle'; import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
import { ArcherContainer, ArcherElement } from 'react-archer'; import { ArcherContainer, ArcherElement } from 'react-archer';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { SectionHeader } from './SharedComponents'; import { SectionHeader, StepperBox } from './SharedComponents';
import { Stepper } from './Stepper'; import { Stepper } from './Stepper';
import { Badge } from '../common/Badge/Badge';
const ChooseEnvironment = ({ const ChooseEnvironment = ({
environments, environments,
@ -227,7 +228,10 @@ export const GenerateApiKey = ({
return ( return (
<SpacedContainer> <SpacedContainer>
<Typography variant='h2'>Connect an SDK to Unleash</Typography> <Typography variant='h2'>Connect an SDK to Unleash</Typography>
<StepperBox>
<Stepper active={1} steps={3} /> <Stepper active={1} steps={3} />
<Badge color='secondary'>2/3 - Generate API Key</Badge>
</StepperBox>
<Box sx={{ mt: 2 }}> <Box sx={{ mt: 2 }}>
<SectionHeader>Environment</SectionHeader> <SectionHeader>Environment</SectionHeader>
<SectionDescription> <SectionDescription>

7
frontend/src/component/onboarding/SelectSdk.tsx
View File

@ -1,9 +1,10 @@
import { Avatar, Box, Link, styled, Typography } from '@mui/material'; import { Avatar, Box, Link, styled, Typography } from '@mui/material';
import type { FC } from 'react'; import type { FC } from 'react';
import { formatAssetPath } from 'utils/formatPath'; import { formatAssetPath } from 'utils/formatPath';
import { SectionHeader } from './SharedComponents'; import { SectionHeader, StepperBox } from './SharedComponents';
import { clientSdks, type Sdk, serverSdks } from './sharedTypes'; import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
import { Stepper } from './Stepper'; import { Stepper } from './Stepper';
import { Badge } from '../common/Badge/Badge';
const SpacedContainer = styled('div')(({ theme }) => ({ const SpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(5, 8, 8, 8), padding: theme.spacing(5, 8, 8, 8),
@ -60,7 +61,11 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
return ( return (
<SpacedContainer> <SpacedContainer>
<Typography variant='h2'>Connect an SDK to Unleash</Typography> <Typography variant='h2'>Connect an SDK to Unleash</Typography>
<StepperBox>
<Stepper active={0} steps={3} /> <Stepper active={0} steps={3} />
<Badge color='secondary'>1/3 - Choose SDK</Badge>
</StepperBox>
<Box sx={{ mt: 2 }}> <Box sx={{ mt: 2 }}>
<SectionHeader>Select SDK</SectionHeader> <SectionHeader>Select SDK</SectionHeader>
<SecondarySectionHeader> <SecondarySectionHeader>

7
frontend/src/component/onboarding/SharedComponents.tsx
View File

@ -5,3 +5,10 @@ export const SectionHeader = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
fontSize: theme.typography.body1.fontSize, fontSize: theme.typography.body1.fontSize,
})); }));
export const StepperBox = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginTop: theme.spacing(2),
}));

1
frontend/src/component/onboarding/Stepper.tsx
View File

@ -4,7 +4,6 @@ import type { FC } from 'react';
const StepContainer = styled('div')(({ theme }) => ({ const StepContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(1),
marginTop: theme.spacing(2),
})); }));
const Step = styled('div')(({ theme }) => ({ const Step = styled('div')(({ theme }) => ({

6
frontend/src/component/onboarding/TestSdkConnection.tsx
View File

@ -8,7 +8,7 @@ import {
Tooltip, Tooltip,
Typography, Typography,
} from '@mui/material'; } from '@mui/material';
import { SectionHeader } from './SharedComponents'; import { SectionHeader, StepperBox } from './SharedComponents';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { allSdks, type Sdk } from './sharedTypes'; import { allSdks, type Sdk } from './sharedTypes';
import { import {
@ -21,6 +21,7 @@ import useToast from 'hooks/useToast';
import CopyIcon from '@mui/icons-material/FileCopy'; import CopyIcon from '@mui/icons-material/FileCopy';
import { formatAssetPath } from '../../utils/formatPath'; import { formatAssetPath } from '../../utils/formatPath';
import { Stepper } from './Stepper'; import { Stepper } from './Stepper';
import { Badge } from '../common/Badge/Badge';
const SpacedContainer = styled('div')(({ theme }) => ({ const SpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(5, 8, 2, 8), padding: theme.spacing(5, 8, 2, 8),
@ -116,7 +117,10 @@ export const TestSdkConnection: FC<ITestSdkConnectionProps> = ({
return ( return (
<SpacedContainer> <SpacedContainer>
<Typography variant='h2'>Connect an SDK to Unleash</Typography> <Typography variant='h2'>Connect an SDK to Unleash</Typography>
<StepperBox>
<Stepper active={2} steps={3} /> <Stepper active={2} steps={3} />
<Badge color='secondary'>3/3 - Test connection</Badge>
</StepperBox>
<Box sx={{ mt: 2 }}> <Box sx={{ mt: 2 }}>
<ChangeSdk> <ChangeSdk>
{sdkIcon ? ( {sdkIcon ? (