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

feat: navigate between all stages (#8080)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-04 13:58:15 +02:00 committed by GitHub
parent ba8d043f3c
commit 5c4d0bf99b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 64 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/component/onboarding/ConnectSdkDialog.tsx
View File

@ -56,10 +56,7 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(3, 8, 3, 8),
}));
type OnboardingStage =
| { name: 'select-sdk' }
| { name: 'generate-api-key' }
| { name: 'test-connection' };
type OnboardingStage = 'select-sdk' | 'generate-api-key' | 'test-connection';
export const ConnectSdkDialog = ({
open,
@ -71,7 +68,14 @@ export const ConnectSdkDialog = ({
const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
const [sdk, setSdk] = useState<Sdk | null>(null);
const [environment, setEnvironment] = useState<string | null>(null);
const [stage, setStage] = useState<OnboardingStage>({ name: 'select-sdk' });
const [apiKey, setApiKey] = useState<string | null>(null);
const [stage, setStage] = useState<OnboardingStage>('select-sdk');
const isSelectSdkStage = stage === 'select-sdk';
const isGenerateApiKeyStage =
stage === 'generate-api-key' && sdk && environment;
const isTestConnectionStage =
stage === 'test-connection' && sdk && environment && apiKey;
useEffect(() => {
if (environments.length > 0) {
@ -83,46 +87,80 @@ export const ConnectSdkDialog = ({
<StyledDialog open={open} onClose={onClose}>
<Box sx={{ display: 'flex' }}>
<ConnectSdk>
{stage.name === 'select-sdk' ? (
{isSelectSdkStage ? (
<SelectSdk
onSelect={(sdk) => {
setSdk(sdk);
setStage({ name: 'generate-api-key' });
setStage('generate-api-key');
}}
/>
) : null}
{stage.name === 'generate-api-key' && sdk && environment ? (
{isGenerateApiKeyStage ? (
<GenerateApiKey
environments={environments}
environment={environment}
project={project}
sdkType={sdk.type}
onEnvSelect={setEnvironment}
onApiKey={(apiKey) => {
setApiKey(apiKey);
}}
/>
) : null}
{isTestConnectionStage ? <div>Last stage</div> : null}
{stage.name === 'generate-api-key' ? (
{stage === 'generate-api-key' ? (
<Navigation>
<NextStepSectionSpacedContainer>
<Button
variant='text'
color='inherit'
onClick={() => {
setStage({ name: 'select-sdk' });
setStage('select-sdk');
}}
>
Back
</Button>
<Button variant='contained'>Next</Button>
<Button
variant='contained'
onClick={() => {
setStage('test-connection');
}}
>
Next
</Button>
</NextStepSectionSpacedContainer>
</Navigation>
) : null}
{isTestConnectionStage ? (
<Navigation>
<NextStepSectionSpacedContainer>
<Button
variant='text'
color='inherit'
onClick={() => {
setStage('generate-api-key');
}}
>
Back
</Button>
<Button
variant='contained'
onClick={() => {
onClose();
}}
>
Finish
</Button>
</NextStepSectionSpacedContainer>
</Navigation>
) : null}
</ConnectSdk>
{isLargeScreen && stage.name === 'select-sdk' ? (
{isLargeScreen && isSelectSdkStage ? (
<SelectSdkConcepts />
) : null}
{isLargeScreen && stage.name === 'generate-api-key' ? (
{isLargeScreen && isGenerateApiKeyStage ? (
<GenrateApiKeyConcepts />
) : null}
</Box>

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

@ -14,6 +14,7 @@ import {
import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
import { ArcherContainer, ArcherElement } from 'react-archer';
import { useEffect } from 'react';
const ChooseEnvironment = ({
environments,
@ -159,11 +160,11 @@ const TokenExplanation = ({
</SecretExplanationDescription>
</ArcherElement>
<ArcherElement
id='secreat-description'
id='secret-description'
relations={[
{
targetId: 'secret',
targetAnchor: 'bottom',
targetAnchor: 'right',
sourceAnchor: 'top',
},
]}
@ -185,6 +186,7 @@ interface GenerateApiKeyProps {
environment: string;
sdkType: 'client' | 'frontend';
onEnvSelect: (env: string) => void;
onApiKey: (apiKey: string | null) => void;
}
export const GenerateApiKey = ({
@ -193,12 +195,18 @@ export const GenerateApiKey = ({
project,
sdkType,
onEnvSelect,
onApiKey,
}: GenerateApiKeyProps) => {
const { tokens, refetch: refreshTokens } = useProjectApiTokens(project);
const { createToken, loading: creatingToken } = useProjectApiTokensApi();
const currentEnvironmentToken = tokens.find(
(token) => token.environment === environment && token.type === sdkType,
);
useEffect(() => {
onApiKey(currentEnvironmentToken?.secret || null);
}, [currentEnvironmentToken]);
const parsedToken = parseToken(currentEnvironmentToken?.secret);
const { setToastApiError } = useToast();

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

@ -15,6 +15,7 @@ import ruby from 'assets/icons/sdks/Logo-ruby.svg';
import rust from 'assets/icons/sdks/Logo-rust.svg';
import svelte from 'assets/icons/sdks/Logo-svelte.svg';
import vue from 'assets/icons/sdks/Logo-vue.svg';
import { formatAssetPath } from 'utils/formatPath';
const SpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(5, 8, 8, 8),
@ -108,7 +109,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
<SdkListSection>
{serverSdks.map((sdk) => (
<SdkTile>
<StyledAvatar src={sdk.icon} />
<StyledAvatar src={formatAssetPath(sdk.icon)} />
<SdkTileContent>
<b>{sdk.name}</b>{' '}
<Link
@ -132,7 +133,7 @@ export const SelectSdk: FC<ISelectSdkProps> = ({ onSelect }) => {
<SdkListSection>
{clientSdks.map((sdk) => (
<SdkTile>
<StyledAvatar src={sdk.icon} />
<StyledAvatar src={formatAssetPath(sdk.icon)} />
<SdkTileContent>
<b>{sdk.name}</b>{' '}
<Link