feat: Personal dashboard flag created (#8305)

Unleash · Sep 30, 2024 · 6d16fc6 · 6d16fc6
1 parent 50c5af8
commit 6d16fc6
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 3 deletions.
diff --git a/frontend/src/component/personalDashboard/ConnectSDK.tsx b/frontend/src/component/personalDashboard/ConnectSDK.tsx
@@ -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>

diff --git a/frontend/src/component/personalDashboard/PersonalDashboard.tsx b/frontend/src/component/personalDashboard/PersonalDashboard.tsx
@@ -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' &&