mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-31 13:47:02 +02:00
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.
This commit is contained in:
parent
dab3dca1e1
commit
be699962b1
Binary file not shown.
Before Width: | Height: | Size: 126 KiB |
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 58 KiB |
@ -15,7 +15,6 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
|
|||||||
import { DraftBanner } from './DraftBanner/DraftBanner';
|
import { DraftBanner } from './DraftBanner/DraftBanner';
|
||||||
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
|
import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
|
||||||
import { Demo } from 'component/demo/Demo';
|
import { Demo } from 'component/demo/Demo';
|
||||||
import { SegmentsSplashScreen } from 'component/splash/SegmentsSplashScreen/SegmentsSplashScreen';
|
|
||||||
|
|
||||||
interface IMainLayoutProps {
|
interface IMainLayoutProps {
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
@ -77,17 +76,12 @@ const MainLayoutContentContainer = styled('div')(({ theme }) => ({
|
|||||||
|
|
||||||
export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
||||||
({ children }, ref) => {
|
({ children }, ref) => {
|
||||||
const { uiConfig, isOss, loading } = useUiConfig();
|
const { uiConfig } = useUiConfig();
|
||||||
const projectId = useOptionalPathParam('projectId');
|
const projectId = useOptionalPathParam('projectId');
|
||||||
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
|
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
|
||||||
projectId || '',
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<SkipNavLink />
|
<SkipNavLink />
|
||||||
@ -133,10 +127,6 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
|
|||||||
</MainLayoutContentWrapper>
|
</MainLayoutContentWrapper>
|
||||||
<Footer />
|
<Footer />
|
||||||
</MainLayoutContainer>
|
</MainLayoutContainer>
|
||||||
<ConditionallyRender
|
|
||||||
condition={showSegmentSplash}
|
|
||||||
show={<SegmentsSplashScreen />}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
</Demo>
|
</Demo>
|
||||||
</>
|
</>
|
||||||
|
@ -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;
|
|
@ -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',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
@ -50,7 +50,6 @@ export type CustomEvents =
|
|||||||
| 'feature-naming-pattern'
|
| 'feature-naming-pattern'
|
||||||
| 'project-mode'
|
| 'project-mode'
|
||||||
| 'dependent_features'
|
| 'dependent_features'
|
||||||
| 'oss-segments-splash-screen'
|
|
||||||
| 'playground_token_input_used';
|
| 'playground_token_input_used';
|
||||||
|
|
||||||
export const usePlausibleTracker = () => {
|
export const usePlausibleTracker = () => {
|
||||||
|
Loading…
Reference in New Issue
Block a user