chore: remove segments oss splash (#5359)

This change removes the oss segments splash screen that was introduced
in https://github.com/Unleash/unleash/pull/5053.

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

@@ -15,7 +15,6 @@ 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;
@@ -77,17 +76,12 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({
 
 export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
     ({ children }, ref) => {
-        const { uiConfig, isOss, loading } = useUiConfig();
+        const { uiConfig } = 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 />
@@ -133,10 +127,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                             </MainLayoutContentWrapper>
                             <Footer />
                         </MainLayoutContainer>
-                        <ConditionallyRender
-                            condition={showSegmentSplash}
-                            show={<SegmentsSplashScreen />}
-                        />
                     </>
                 </Demo>
             </>

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

@@ -1,69 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -50,7 +50,6 @@ export type CustomEvents =
     | 'feature-naming-pattern'
     | 'project-mode'
     | 'dependent_features'
-    | 'oss-segments-splash-screen'
     | 'playground_token_input_used';
 
 export const usePlausibleTracker = () => {