Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: Personal dashboard flag created (#8305)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-09-30 16:09:31 +02:00 committed by GitHub
parent 50c5af8632
commit 6d16fc60ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/component/personalDashboard/ConnectSDK.tsx
View File

@ -1,4 +1,4 @@
import { Button, styled } from '@mui/material';
import { Button, styled, Typography } from '@mui/material';
import type { FC } from 'react';
const TitleContainer = styled('div')(({ theme }) => ({
@ -20,6 +20,22 @@ const NeutralCircleContainer = styled('span')(({ theme }) => ({
borderRadius: '50%',
}));
const MainCircleContainer = styled(NeutralCircleContainer)(({ theme }) => ({
backgroundColor: theme.palette.primary.main,
color: theme.palette.background.paper,
}));
const SuccessContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
fontSize: theme.spacing(1.75),
fontWeight: 'bold',
backgroundColor: theme.palette.success.light,
borderRadius: theme.shape.borderRadiusLarge,
padding: theme.spacing(2, 2, 2, 2),
}));
const ActionBox = styled('div')(({ theme }) => ({
flexBasis: '50%',
padding: theme.spacing(4, 2),
@ -48,6 +64,30 @@ export const CreateFlag: FC<{ project: string }> = ({ project }) => {
);
};
export const ExistingFlag: FC<{ project: string }> = ({ project }) => {
return (
<ActionBox>
<TitleContainer>
<MainCircleContainer>✓</MainCircleContainer>
Create a feature flag
</TitleContainer>
<SuccessContainer>
<Typography fontWeight='bold' variant='body2'>
You have created your first flag
</Typography>
<Typography variant='body2'>
Go to the project to customize the flag further.
</Typography>
</SuccessContainer>
<div>
<Button href={`projects/${project}`} variant='contained'>
Go to project
</Button>
</div>
</ActionBox>
);
};
export const ConnectSDK: FC<{ project: string }> = ({ project }) => {
return (
<ActionBox>

8
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -15,7 +15,7 @@ import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
import React, { type FC, useEffect, useState } from 'react';
import LinkIcon from '@mui/icons-material/Link';
import { Badge } from '../common/Badge/Badge';
import { ConnectSDK, CreateFlag } from './ConnectSDK';
import { ConnectSDK, CreateFlag, ExistingFlag } from './ConnectSDK';
import { WelcomeDialog } from './WelcomeDialog';
import { useLocalStorageState } from 'hooks/useLocalStorageState';
import { ProjectSetupComplete } from './ProjectSetupComplete';
@ -298,9 +298,13 @@ export const PersonalDashboard = () => {
<SpacedGridItem item lg={4} md={1}>
{stage === 'onboarded' ? (
<ProjectSetupComplete project={activeProject} />
) : activeProject ? (
) : null}
{stage === 'onboarding-started' ? (
<CreateFlag project={activeProject} />
) : null}
{stage === 'first-flag-created' ? (
<ExistingFlag project={activeProject} />
) : null}
</SpacedGridItem>
<SpacedGridItem item lg={4} md={1}>
{stage === 'onboarded' &&