chore(ui): add splash screen for oss segments (#5053)

This PR adds a splash screen for segments being open-sourced. 

It looks like this:


![image](https://github.com/Unleash/unleash/assets/17786332/bf8766e6-b9cc-4f0b-a6d1-f6e89e21d844)

## About the changes

I've more or less wholesale copied the demo dialog that @nunogois
implemented. I've put it in the `splash` directory for now (because
that's where it seemed most appropriate). The reason for straight
copying it instead of extending existing functionality is primarily that
this should be short-lived and deleted after the next release or so. So
isolating all the changes into a single directory seems like a good
idea.

## Discussion points

Because OSS installations don't connect to Unleash, we can't use feature
flags to control the rollout here. Instead, we must just assume that OSS
users will want to see it. If there is a better way we can control this,
that'd be great. I'd love to be able to use time constraints to not show
this after a certain date, for instance, but I don't think that's
something we can do right now?

The splash is also set to display on any page you're at when you first
load unleash. However, closing the dialog (either by closing or by
asking to see segments) will store that in localstorage, and you won't
be shown the dialog again.

---------

Co-authored-by: Nuno Góis <github@nunogois.com>

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from 'react';
+import { forwardRef, ReactNode } from 'react';
 import { Grid, styled } from '@mui/material';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
@@ -15,6 +15,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { Demo } from 'component/demo/Demo';
+import { SegmentsSplashScreen } from 'component/splash/SegmentsSplashScreen/SegmentsSplashScreen';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -76,12 +77,17 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({
 
 export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
     ({ children }, ref) => {
-        const { uiConfig } = useUiConfig();
+        const { uiConfig, isOss, loading } = useUiConfig();
         const projectId = useOptionalPathParam('projectId');
         const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
             projectId || '',
         );
 
+        // only show segment splash if we're really certain it's OSS.
+        // Otherwise it might lead to flashing the splash to
+        // pro/enterprise users before data has loaded.
+        const showSegmentSplash = !loading && isOss();
+
         return (
             <>
                 <SkipNavLink />
@@ -127,6 +133,10 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             </MainLayoutContentWrapper>
                             <Footer />
                         </MainLayoutContainer>
+                        <ConditionallyRender
+                            condition={showSegmentSplash}
+                            show={<SegmentsSplashScreen />}
+                        />
                     </>
                 </Demo>
             </>

frontend/src/component/splash/SegmentsSplashScreen/SegmentsDialog.tsx

@@ -0,0 +1,69 @@
+import {
+    Dialog,
+    DialogProps,
+    IconButton,
+    Typography,
+    styled,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import confetti from 'assets/img/ossSegmentsConfetti.svg';
+import { formatAssetPath } from 'utils/formatPath';
+
+const StyledDialog = styled(Dialog)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        borderRadius: theme.shape.borderRadiusExtraLarge,
+        maxWidth: theme.spacing(90),
+        padding: theme.spacing(7.5),
+        textAlign: 'center',
+        backgroundImage: `url('${formatAssetPath(confetti)}')`,
+    },
+    zIndex: theme.zIndex.snackbar,
+    '& .MuiModal-backdrop': {
+        background:
+            'linear-gradient(-54deg, rgba(61, 57, 128, 0.80) 0%, rgba(97, 91, 194, 0.80) 26.77%, rgba(106, 99, 224, 0.80) 48.44%, rgba(106, 99, 224, 0.80) 72.48%, rgba(129, 84, 191, 0.80) 99.99%)',
+        backdropFilter: 'blur(2px)',
+    },
+}));
+
+const StyledCloseButton = styled(IconButton)(({ theme }) => ({
+    position: 'absolute',
+    right: theme.spacing(2),
+    top: theme.spacing(2),
+    color: theme.palette.neutral.main,
+}));
+
+const StyledHeader = styled(Typography)(({ theme }) => ({
+    fontSize: theme.fontSizes.largeHeader,
+    fontWeight: theme.fontWeight.bold,
+}));
+
+interface ISegmentsDialogProps extends DialogProps {
+    open: boolean;
+    onClose: () => void;
+    preventCloseOnBackdropClick?: boolean;
+    children: React.ReactNode;
+}
+
+export const SegmentsDialog = ({
+    open,
+    onClose,
+    preventCloseOnBackdropClick,
+    children,
+    ...props
+}: ISegmentsDialogProps) => (
+    <StyledDialog
+        open={open}
+        onClose={(_, r) => {
+            if (preventCloseOnBackdropClick && r === 'backdropClick') return;
+            onClose();
+        }}
+        {...props}
+    >
+        <StyledCloseButton aria-label='close' onClick={onClose}>
+            <CloseIcon />
+        </StyledCloseButton>
+        {children}
+    </StyledDialog>
+);
+
+SegmentsDialog.Header = StyledHeader;

frontend/src/component/splash/SegmentsSplashScreen/SegmentsSplashScreen.tsx

@@ -0,0 +1,129 @@
+import { Button, Typography, styled } from '@mui/material';
+import { SegmentsDialog } from './SegmentsDialog';
+import ossSegmentsImage from 'assets/img/ossSegments.png';
+import { formatAssetPath } from 'utils/formatPath';
+import { Launch } from '@mui/icons-material';
+import { createLocalStorage } from 'utils/createLocalStorage';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+
+const StyledActions = styled('div')(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr',
+    gap: theme.spacing(3),
+    marginBlockStart: theme.spacing(5),
+}));
+
+const StyledButton = styled(Button)(({ theme }) => ({
+    height: theme.spacing(7),
+}));
+
+interface SegmentsSplashScreenProps {
+    open: boolean;
+    onClose: () => void;
+    showSegments: () => void;
+}
+
+const StyledHeader = styled('h2')(({ theme }) => ({
+    fontSize: theme.fontSizes.mainHeader,
+    fontWeight: theme.fontWeight.bold,
+}));
+
+const StyledImage = styled('img')(({ theme }) => ({
+    width: '100%',
+    marginBlockStart: theme.spacing(3),
+}));
+
+const StyledLink = styled('a')(({ theme }) => ({
+    marginBlockStart: theme.spacing(3),
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textDecoration: 'underline',
+    gap: theme.spacing(0.5),
+    '& > svg': {
+        fontSize: theme.fontSizes.bodySize,
+    },
+}));
+
+const SegmentsSplashScreenContent = ({
+    open,
+    onClose,
+    showSegments,
+}: SegmentsSplashScreenProps) => (
+    <>
+        <SegmentsDialog open={open} onClose={onClose}>
+            <StyledHeader>
+                Segments are now available in Open Source!
+            </StyledHeader>
+            <Typography color='textSecondary' sx={{ mt: 2 }}>
+                We are excited to announce that we are releasing an enterprise
+                feature for our open source community.
+            </Typography>
+            <StyledImage
+                src={formatAssetPath(ossSegmentsImage)}
+                alt='The segment creation screen, showing an example segment consisting of three constraints.'
+            />
+            <StyledLink href='https://docs.getunleash.io/reference/segments'>
+                Read all about segments in the documentation
+                <Launch />
+            </StyledLink>
+
+            <StyledActions>
+                <StyledButton
+                    variant='contained'
+                    color='primary'
+                    onClick={showSegments}
+                >
+                    Show me segments
+                </StyledButton>
+                <StyledButton
+                    variant='outlined'
+                    color='primary'
+                    onClick={onClose}
+                >
+                    Close
+                </StyledButton>
+            </StyledActions>
+        </SegmentsDialog>
+    </>
+);
+
+export const SegmentsSplashScreen: React.FC = () => {
+    const { value: localStorageState, setValue: setLocalStorageState } =
+        createLocalStorage('OssSegmentsSplashScreen:v1', { shown: false });
+
+    const [showSegmentSplash, setShowSegmentSplash] = React.useState(true);
+
+    const navigate = useNavigate();
+    const closeSegmentsSplash = () => {
+        setShowSegmentSplash(false);
+        setLocalStorageState({ shown: true });
+    };
+
+    const { trackEvent } = usePlausibleTracker();
+
+    return (
+        <SegmentsSplashScreenContent
+            open={showSegmentSplash && !localStorageState.shown}
+            onClose={() => {
+                closeSegmentsSplash();
+                trackEvent('oss-segments-splash-screen', {
+                    props: {
+                        eventType: 'close splash',
+                    },
+                });
+            }}
+            showSegments={() => {
+                closeSegmentsSplash();
+                navigate(`/segments`);
+                trackEvent('oss-segments-splash-screen', {
+                    props: {
+                        eventType: 'navigate to segments',
+                    },
+                });
+            }}
+        />
+    );
+};

frontend/src/hooks/usePlausibleTracker.ts

@@ -49,7 +49,8 @@ export type CustomEvents =
     | 'open-integration'
     | 'feature-naming-pattern'
     | 'project-mode'
-    | 'dependent_features';
+    | 'dependent_features'
+    | 'oss-segments-splash-screen';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);