feat: welcome dialog with unleash concepts (#8199)

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -165,7 +165,7 @@ export const PrimaryNavigationList: FC<{
             {personalDashboardUIEnabled ? (
                 <DynamicListItem
                     href='/personal'
-                    text='Personal Dahsboard'
+                    text='Personal Dashboard'
                     onClick={() => onClick('/personal')}
                     selected={activeItem === '/personal'}
                 >

frontend/src/component/personalDashboard/PersonalDashboard.tsx

@@ -18,6 +18,8 @@ import LinkIcon from '@mui/icons-material/Link';
 import { Badge } from '../common/Badge/Badge';
 import { ConnectSDK, CreateFlag } from './ConnectSDK';
 import { PlaceholderFlagMetricsChart } from './FlagMetricsChart';
+import { WelcomeDialog } from './WelcomeDialog';
+import { useLocalStorageState } from 'hooks/useLocalStorageState';
 
 const ScreenExplanation = styled(Typography)(({ theme }) => ({
     marginTop: theme.spacing(1),
@@ -139,6 +141,10 @@ export const PersonalDashboard = () => {
 
     const { projects, activeProject, setActiveProject } = useProjects();
 
+    const [welcomeDialog, setWelcomeDialog] = useLocalStorageState<
+        'seen' | 'not_seen'
+    >('welcome-dialog:v1', 'not_seen');
+
     return (
         <div>
             <Typography component='h2' variant='h2'>
@@ -247,6 +253,10 @@ export const PersonalDashboard = () => {
                     <PlaceholderFlagMetricsChart />
                 </SpacedGridItem>
             </ContentGrid>
+            <WelcomeDialog
+                open={welcomeDialog !== 'seen'}
+                onClose={() => setWelcomeDialog('seen')}
+            />
         </div>
     );
 };

frontend/src/component/personalDashboard/WelcomeDialog.tsx

@@ -0,0 +1,110 @@
+import { Box, Button, Dialog, styled, Typography } from '@mui/material';
+import type { FC } from 'react';
+import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
+import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg';
+import { ThemeMode } from '../common/ThemeMode/ThemeMode';
+import onboardingConcepts from 'assets/img/onboardingConcepts.png';
+import { ScreenReaderOnly } from '../common/ScreenReaderOnly/ScreenReaderOnly';
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: theme.shape.borderRadiusLarge,
+        maxWidth: theme.spacing(140),
+        width: '100%',
+        backgroundColor: 'transparent',
+    },
+    padding: 0,
+    '& .MuiPaper-root > section': {
+        overflowX: 'hidden',
+    },
+}));
+
+const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' });
+
+const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' });
+
+const ContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(4),
+    flexDirection: 'column',
+    padding: theme.spacing(4, 12),
+    alignItems: 'center',
+    backgroundColor: theme.palette.background.paper,
+}));
+
+const WelcomeLine = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+
+const StyledImg = styled('img')({
+    width: '100%',
+});
+
+interface IWelcomeDialogProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const WelcomeDialog: FC<IWelcomeDialogProps> = ({ open, onClose }) => {
+    return (
+        <StyledDialog open={open} onClose={onClose}>
+            <ContentWrapper>
+                <WelcomeLine>
+                    <Typography variant='h2'>Welcome to</Typography>
+                    <ThemeMode
+                        darkmode={<StyledUnleashLogoWhite />}
+                        lightmode={<StyledUnleashLogo />}
+                    />
+                </WelcomeLine>
+                <Box>
+                    Here are the concepts you{' '}
+                    <Typography
+                        component='span'
+                        color='primary'
+                        fontWeight='bold'
+                    >
+                        must understand
+                    </Typography>{' '}
+                    in order to work effectively with Unleash
+                </Box>
+                <StyledImg src={onboardingConcepts} />
+                <ScreenReaderOnly>
+                    <h2>Environments</h2>
+                    <p>
+                        Unleash comes with two global environments. Once you
+                        create a feature flag it will exist in all environments,
+                        but it will hold different configuration per
+                        environment.
+                    </p>
+                    <h2>Projects</h2>
+                    <p>
+                        Feature flags live in projects. When SDKs connect to
+                        Unleash they use an environment /project combination in
+                        order to retrieve the correct configuration. You can
+                        also use projects to control access level for feature
+                        flags.
+                    </p>
+                    <h2>Feature flags</h2>
+                    <p>
+                        Flags live in projects and across all configured
+                        environments. Each flag will have separate configuration
+                        in each environment enabled for the project that they
+                        live in.
+                    </p>
+                    <h2>Activation strategy</h2>
+                    <p>
+                        Activation strategies are rulesets that decide whether
+                        or not a feature flag should be enabled in a specific
+                        environment. You can configure as many rulesets as you
+                        want per environment.
+                    </p>
+                </ScreenReaderOnly>
+                <Button variant='contained' onClick={onClose}>
+                    Got it, let's get started
+                </Button>
+            </ContentWrapper>
+        </StyledDialog>
+    );
+};