Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Select sdk onboarding pt 1 #8065

Merged
merged 2 commits into from
Sep 3, 2024
Merged

feat: Select sdk onboarding pt 1 #8065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
faeca71
feat: select sdk stage
kwasniew Sep 3, 2024
f9d8d0b
feat: select sdk stage
kwasniew Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 29 additions & 14 deletions ...component/onboarding/ConnectSDKDialog.tsx → ...component/onboarding/ConnectSdkDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ import {
useMediaQuery,
useTheme,
} from '@mui/material';
import { GenrateApiKeyConcepts, GeneratApiKey } from './GenerateApiKey';
import { GenrateApiKeyConcepts, GenerateApiKey } from './GenerateApiKey';
import { useState } from 'react';
import { SelectSdk } from './SelectSdk';

interface IConnectSDKDialogProps {
open: boolean;
Expand Down Expand Up @@ -53,31 +55,44 @@ const NextStepSectionSpacedContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(3, 8, 3, 8),
}));

export const ConnectSDKDialog = ({
type OnboardingStage =
| { name: 'select-sdk' }
| { name: 'generate-api-key'; sdkType: 'CLIENT' | 'FRONTEND' }
| { name: 'test-connection' };

export const ConnectSdkDialog = ({
open,
onClose,
environments,
project,
}: IConnectSDKDialogProps) => {
const theme = useTheme();
const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
const [stage, setStage] = useState<OnboardingStage>({ name: 'select-sdk' });

return (
<StyledDialog open={open} onClose={onClose}>
<Box sx={{ display: 'flex' }}>
<ConnectSdk>
<GeneratApiKey
environments={environments}
project={project}
/>
<Navigation>
<NextStepSectionSpacedContainer>
<Button variant='text' color='inherit'>
Back
</Button>
<Button variant='contained'>Next</Button>
</NextStepSectionSpacedContainer>
</Navigation>
{stage.name === 'select-sdk' ? <SelectSdk /> : null}
{stage.name === 'generate-api-key' ? (
<GenerateApiKey
environments={environments}
project={project}
sdkType={stage.sdkType}
/>
) : null}

{stage.name === 'generate-api-key' ? (
<Navigation>
<NextStepSectionSpacedContainer>
<Button variant='text' color='inherit'>
Back
</Button>
<Button variant='contained'>Next</Button>
</NextStepSectionSpacedContainer>
</Navigation>
) : null}
</ConnectSdk>

{isLargeScreen ? <GenrateApiKeyConcepts /> : null}
Expand Down
10 changes: 6 additions & 4 deletions frontend/src/component/onboarding/GenerateApiKey.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,15 +260,17 @@ export const GenrateApiKeyConcepts = () => (
</ConceptsDefinitionsWrapper>
);

interface GeneratApiKeyProps {
interface GenerateApiKeyProps {
project: string;
environments: string[];
sdkType: 'CLIENT' | 'FRONTEND';
}

export const GeneratApiKey = ({
export const GenerateApiKey = ({
environments,
project,
}: GeneratApiKeyProps) => {
sdkType,
}: GenerateApiKeyProps) => {
const [environment, setEnvironment] = useState('');

useEffect(() => {
Expand All @@ -291,7 +293,7 @@ export const GeneratApiKey = ({
await createToken(
{
environment,
type: 'CLIENT',
type: sdkType,
projects: [project],
username: `api-key-${project}-${environment}`,
},
Expand Down
27 changes: 27 additions & 0 deletions frontend/src/component/onboarding/SelectSdk.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { Box, styled, Typography } from '@mui/material';

const SpacedContainer = styled('div')(({ theme }) => ({
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copied from the GenerateApiKey stage so may create common abstraction in another PR

padding: theme.spacing(5, 8, 3, 8),
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(3),
}));

const SectionHeader = styled('div')(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
marginBottom: theme.spacing(1),
fontSize: theme.fontSizes.bodySize,
}));

export const SelectSdk = () => {
return (
<SpacedContainer>
<Typography variant='h2'>Connect an SDK to Unleash</Typography>
<Box sx={{ mt: 4 }}>
<SectionHeader>Select SDK</SectionHeader>
</Box>
</SpacedContainer>
);
};

export const SelectSdkConcepts = () => {};
4 changes: 2 additions & 2 deletions ...nd/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ import { AvatarCell } from './AvatarCell';
import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
import { useUiFlag } from 'hooks/useUiFlag';
import { styled } from '@mui/material';
import { ConnectSDKDialog } from '../../../onboarding/ConnectSDKDialog';
import { ConnectSdkDialog } from '../../../onboarding/ConnectSdkDialog';

interface IPaginatedProjectFeatureTogglesProps {
environments: string[];
Expand Down Expand Up @@ -491,7 +491,7 @@ export const ProjectFeatureToggles = ({

{featureToggleModals}

<ConnectSDKDialog
<ConnectSdkDialog
open={false}
onClose={() => {}}
project={projectId}
Expand Down
Loading