Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-06 01:15:28 +02:00
Code Issues Projects Releases Wiki Activity

chore: remove splash environment (#1108)

Browse Source 
* chore: remove splash environment

* Remove related images aswell

Co-authored-by: sighphyre <liquidwicked64@gmail.com>
This commit is contained in:
sellinjaanus 2022-06-21 16:31:14 +03:00 committed by GitHub
parent 583d636144
commit 797cd8c28f
10 changed files with 2 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/src/assets/img/envSplash2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 454 KiB

19
frontend/src/assets/img/splashEnv1.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 81 KiB

2
frontend/src/assets/img/splashEnv2.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

3
frontend/src/component/splash/SplashPage/SplashPage.tsx
View File

@ -1,5 +1,4 @@
import { useNavigate, Navigate } from 'react-router-dom'; import { useNavigate, Navigate } from 'react-router-dom';
import { SplashPageEnvironments } from '../SplashPageEnvironments/SplashPageEnvironments';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi'; import useSplashApi from 'hooks/api/actions/useSplashApi/useSplashApi';
import { SplashPageOperators } from 'component/splash/SplashPageOperators/SplashPageOperators'; import { SplashPageOperators } from 'component/splash/SplashPageOperators/SplashPageOperators';
@ -31,8 +30,6 @@ export const SplashPage = () => {
} }
switch (splashId) { switch (splashId) {
case 'environments':
return <SplashPageEnvironments />;
case 'operators': case 'operators':
return <SplashPageOperators />; return <SplashPageOperators />;
default: default:

57
frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.styles.ts
View File

@ -1,57 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
splashContainer: {
position: 'fixed',
},
title: {
textAlign: 'center',
marginBottom: '20px',
lineHeight: '1.3',
[theme.breakpoints.down('sm')]: {
marginTop: '1rem',
},
},
topDescription: {
padding: '0px 40px',
marginBottom: '15px',
fontSize: '17px',
[theme.breakpoints.down('sm')]: {
padding: '0 20px',
},
},
bottomDescription: {
padding: '0px 20px',
fontSize: '17px',
marginTop: '15px',
[theme.breakpoints.down('sm')]: {
padding: '0 20px',
},
},
icon: {
fontSize: '150px',
display: 'block',
margin: 'auto',
[theme.breakpoints.down('sm')]: {
fontSize: '90px',
},
},
logo: {
width: '70%',
height: '60%',
display: 'block',
margin: 'auto',
marginTop: '2rem',
[theme.breakpoints.down('sm')]: {
width: '80%',
height: '80%',
marginTop: '0rem',
},
},
linkList: {
padding: '30px 25px',
},
link: {
color: '#fff',
},
}));

196
frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.tsx
View File

@ -1,196 +0,0 @@
import { SplashPageEnvironmentsContent } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent';
import { SplashPageEnvironmentsContainer } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContainer/SplashPageEnvironmentsContainer';
import { VpnKey, CloudCircle } from '@mui/icons-material';
import { useStyles } from 'component/splash/SplashPageEnvironments/SplashPageEnvironments.styles';
import { ReactComponent as Logo1 } from 'assets/img/splashEnv1.svg';
import { ReactComponent as Logo2 } from 'assets/img/splashEnv2.svg';
import { useNavigate } from 'react-router-dom';
export const SplashPageEnvironments = () => {
const { classes: styles } = useStyles();
const navigate = useNavigate();
const onFinish = () => {
navigate('/');
};
return (
<>
<SplashPageEnvironmentsContent
onFinish={onFinish}
components={[
<SplashPageEnvironmentsContainer
key={1}
title={
<h2 className={styles.title}>
Environments are coming to Unleash!
</h2>
}
topDescription={
<p className={styles.topDescription}>
We are bringing native environment support to
Unleash.{' '}
<b>
Your current configurations won’t be
affected,
</b>{' '}
but you’ll have the option of adding strategies
to specific environments going forward.
</p>
}
bottomDescription={
<p className={styles.bottomDescription}>
By default you will get access to three
environments: <b>default</b>, <b>development</b>{' '}
and<b> production</b>. All of your current
configurations will live in the default
environment and{' '}
<b>
nothing will change until you make a
conscious decision to change.
</b>
</p>
}
image={<CloudCircle className={styles.icon} />}
/>,
<SplashPageEnvironmentsContainer
key={2}
title={
<h2 className={styles.title}>
Strategies live in environments
</h2>
}
topDescription={
<p className={styles.topDescription}>
A feature toggle lives as an entity across
multiple environments, but your strategies will
live in a specific environment. This allows you
to have different configuration per environment
for a feature toggle.
</p>
}
image={<Logo1 className={styles.logo} />}
/>,
<SplashPageEnvironmentsContainer
key={3}
title={
<h2 className={styles.title}>
Environments are turned on per project
</h2>
}
topDescription={
<p className={styles.topDescription}>
In order to enable an environment for a feature
toggle you must first enable the environment in
your project. Navigate to your project settings
and enable the environments you want to be
available. The toggles in that project will get
access to all of the project’s enabled
environments.
</p>
}
image={<Logo2 className={styles.logo} />}
/>,
<SplashPageEnvironmentsContainer
key={4}
title={
<h2 className={styles.title}>
API Keys control which environment you get the
configuration from
</h2>
}
topDescription={
<p className={styles.topDescription}>
When you have set up environments for your
feature toggles and added strategies to the
specific environments, you must create
environment-specific API keys — one for each
environment.
</p>
}
bottomDescription={
<p className={styles.bottomDescription}>
Environment-specific API keys lets the SDK
receive configuration only for the specified
environment.
</p>
}
image={<VpnKey className={styles.icon} />}
/>,
<SplashPageEnvironmentsContainer
key={5}
title={
<h2 className={styles.title}>Want to know more?</h2>
}
topDescription={
<div className={styles.topDescription}>
If you’d like some more info on environments,
check out some of the resources below! The
documentation or the video walkthrough is a
great place to start. If you’d like to try it
out in a risk-free setting first, how about
heading to the demo instance?
<ul className={styles.linkList}>
<li>
<a
href="https://www.loom.com/share/95239e875bbc4e09a5c5833e1942e4b0?t=0"
target="_blank"
rel="noreferrer"
className={styles.link}
>
Video walkthrough
</a>
</li>
<li>
<a
href="https://app.unleash-hosted.com/demo/"
target="_blank"
rel="noreferrer"
className={styles.link}
>
The Unleash demo instance
</a>
</li>
<li>
<a
href="https://docs.getunleash.io/user_guide/environments"
target="_blank"
rel="noreferrer"
className={styles.link}
>
Environments reference documentation
</a>
</li>
<li>
<a
href="https://www.getunleash.io/blog/simplify-rollout-management-with-the-new-environments-feature"
target="_blank"
rel="noreferrer"
className={styles.link}
>
Blog post introducing environments
</a>
</li>
</ul>
</div>
}
bottomDescription={
<p className={styles.bottomDescription}>
If you have any questions or need help, feel
free to ping us on{' '}
<a
target="_blank"
href="https://slack.unleash.run/"
rel="noreferrer"
className={styles.link}
>
slack!
</a>
</p>
}
/>,
]}
/>
</>
);
};

24
frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContainer/SplashPageEnvironmentsContainer.tsx
View File

@ -1,24 +0,0 @@
import React from 'react';
interface ISplashPageEnvironmentsContainerProps {
title: React.ReactNode;
topDescription: React.ReactNode;
image?: React.ReactNode;
bottomDescription?: React.ReactNode;
}
export const SplashPageEnvironmentsContainer = ({
title,
topDescription,
image,
bottomDescription,
}: ISplashPageEnvironmentsContainerProps) => {
return (
<div>
{title}
{topDescription}
{image}
{bottomDescription}
</div>
);
};

96
frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles.ts
View File

@ -1,96 +0,0 @@
import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
splashMainContainer: {
backgroundColor: theme.palette.primary.light,
width: '100%',
minHeight: '100vh',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
padding: '3rem 0',
[theme.breakpoints.down('sm')]: {
padding: '0',
},
},
splashContainer: {
backgroundColor: theme.palette.primary.main,
position: 'relative',
minHeight: '650px',
width: '600px',
padding: '2rem 1.5rem',
borderRadius: '5px',
color: '#fff',
display: 'flex',
overflowX: 'hidden',
flexDirection: 'column',
[theme.breakpoints.down('sm')]: {
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
padding: '2rem 0',
zIndex: 500,
position: 'fixed',
width: '100%',
height: '100%',
borderRadius: 0,
},
},
closeButtonContainer: {
display: 'inline-flex',
justifyContent: 'flex-end',
color: '#fff',
position: 'absolute',
right: '-10px',
top: '5px',
},
closeButton: {
textDecoration: 'none',
right: '10px',
color: '#fff',
'&:hover': {
backgroundColor: 'inherit',
},
},
controllers: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
height: 'inherit',
marginBottom: 5,
marginTop: 'auto',
},
circlesContainer: {
display: 'flex',
justifyContent: 'center',
},
circles: {
display: 'inline-flex',
justifyContent: 'center',
marginTop: 20,
marginBottom: 15,
position: 'relative',
},
buttonsContainer: {
display: 'flex',
justifyContent: 'center',
},
button: {
textDecoration: 'none',
width: '100px',
color: '#fff',
'&:hover': {
backgroundColor: 'inherit',
},
},
nextButton: {
textDecoration: 'none',
width: '100px',
color: theme.palette.primary.light,
backgroundColor: '#fff',
'&:hover': {
backgroundColor: '#fff',
},
},
}));

111
frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx
View File

@ -1,111 +0,0 @@
import React, { Fragment, useState } from 'react';
import { Button, IconButton } from '@mui/material';
import { useStyles } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles';
import {
CloseOutlined,
FiberManualRecord,
FiberManualRecordOutlined,
} from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { CLOSE_SPLASH } from 'utils/testIds';
interface ISplashPageEnvironmentsContentProps {
components: React.ReactNode[];
onFinish: (status: boolean) => void;
}
export const SplashPageEnvironmentsContent: React.FC<
ISplashPageEnvironmentsContentProps
> = ({ components, onFinish }: ISplashPageEnvironmentsContentProps) => {
const { classes: styles } = useStyles();
const [counter, setCounter] = useState(0);
const onNext = () => {
if (counter === components.length - 1) {
onFinish(false);
return;
}
setCounter(counter + 1);
};
const onBack = () => {
setCounter(counter - 1);
};
const onClose = () => {
onFinish(false);
};
const calculatePosition = () => {
if (counter === 0) {
return '0';
}
return counter * 24;
};
const renderCircles = () => {
return components.map((_, index) => {
if (index === 0) {
// Use index as key because the amount of pages will never dynamically change.
return (
<Fragment key={index}>
<FiberManualRecordOutlined />
<FiberManualRecord
style={{
position: 'absolute',
transition: 'transform 0.3s ease',
left: '0',
transform: `translateX(${calculatePosition()}px)`,
}}
/>
</Fragment>
);
}
return <FiberManualRecordOutlined key={index} />;
});
};
return (
<div className={styles.splashMainContainer}>
<div className={styles.splashContainer}>
<div className={styles.closeButtonContainer}>
<IconButton
className={styles.closeButton}
onClick={onClose}
data-testid={CLOSE_SPLASH}
size="large"
>
<CloseOutlined titleAccess="Close" />
</IconButton>
</div>
{components[counter]}
<div className={styles.controllers}>
<div className={styles.circlesContainer}>
<div className={styles.circles}>{renderCircles()}</div>
</div>
<div className={styles.buttonsContainer}>
<ConditionallyRender
condition={counter > 0}
show={
<Button
className={styles.button}
disabled={counter === 0}
onClick={onBack}
>
Back
</Button>
}
/>
<Button className={styles.nextButton} onClick={onNext}>
{counter === components.length - 1
? 'Finish'
: 'Next'}
</Button>
</div>
</div>
</div>
</div>
);
};

4
frontend/src/component/splash/splash.tsx
View File

@ -1,7 +1,7 @@
// All known splash IDs. // All known splash IDs.
export const splashIds = ['environments', 'operators'] as const; export const splashIds = ['operators'] as const;
// Active splash IDs that may be shown to the user. // Active splash IDs that may be shown to the user.
export const activeSplashIds: SplashId[] = ['operators']; export const activeSplashIds: SplashId[] = [];
export type SplashId = typeof splashIds[number]; export type SplashId = typeof splashIds[number];