-
-
Notifications
You must be signed in to change notification settings - Fork 736
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
This PR adds a splash screen for segments being open-sourced. It looks like this:  ## 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 <[email protected]> --------- Co-authored-by: Nuno Góis <[email protected]>
- Loading branch information
1 parent
eee40c3
commit fc5a4ca
Showing
6 changed files
with
213 additions
and
3 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
frontend/src/component/splash/SegmentsSplashScreen/SegmentsDialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
129 changes: 129 additions & 0 deletions
129
frontend/src/component/splash/SegmentsSplashScreen/SegmentsSplashScreen.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| }); | ||
| }} | ||
| /> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters