Skip to content

Commit

Permalink
feat: upgrade more environments
Browse files Browse the repository at this point in the history
  • Loading branch information
kwasniew committed Nov 20, 2024
1 parent 20749cf commit 8e4c586
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 0 deletions.
Binary file added frontend/src/assets/img/upgradeEnvironments.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
import useProjectOverview, {
useProjectOverviewNameOrId,
} from 'hooks/api/getters/useProjectOverview/useProjectOverview';
import { UpgradeMoreEnvironments } from './UpgradeMoreEnvironments';

const StyledAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(4),
Expand Down Expand Up @@ -317,6 +318,7 @@ const ProjectEnvironmentList = () => {
/>
}
/>
{isOss() ? <UpgradeMoreEnvironments /> : null}
<EnvironmentHideDialog
environment={selectedEnvironment}
open={hideDialog}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { Box, IconButton, Link, styled, Tooltip } from '@mui/material';
import upgradeEnvironments from 'assets/img/upgradeEnvironments.png';
import { formatAssetPath } from 'utils/formatPath';
import Close from '@mui/icons-material/Close';
import { useLocalStorageState } from '../../../hooks/useLocalStorageState';

const Wrapper = styled(Box)(({ theme }) => ({
marginTop: theme.spacing(3),
width: '100%',
backgroundColor: theme.palette.background.elevation1,
borderRadius: theme.shape.borderRadiusMedium,
padding: theme.spacing(2),
display: 'flex',
justifyContent: 'center',
position: 'relative',
}));

const StyledLink = styled(Link)(({ theme }) => ({
textDecoration: 'none',
fontWeight: theme.typography.fontWeightBold,
}));

const StyledImage = styled('img')(({ theme }) => ({
width: theme.spacing(20),
}));

const StyledCloseButton = styled(IconButton)(({ theme }) => ({
position: 'absolute',
top: theme.spacing(1.25),
right: theme.spacing(1.5),
}));

const MainContent = styled(Box)(({ theme }) => ({
display: 'flex',
gap: theme.spacing(3),
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
}));

const MainText = styled(Box)(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: theme.spacing(1),
maxWidth: theme.spacing(60),
}));

export const UpgradeMoreEnvironments = () => {
const [moreEnvironmentsUpgrade, setMoreEnvironmentsUpgrade] =
useLocalStorageState<'open' | 'closed'>(
'upgrade-environments:v1',
'open',
);

if (moreEnvironmentsUpgrade === 'closed') return null;

return (
<Wrapper>
<MainContent>
<StyledImage
src={formatAssetPath(upgradeEnvironments)}
alt='Multiple environments'
/>
<MainText>
<b>Need more environments?</b>
<p>
You are currently using our open-source version, which
allows for only two environments. With our Enterprise
offering, you can have unlimited environments to better
suit your organization's needs.
</p>
<StyledLink
href='https://www.getunleash.io/upgrade-unleash?umt_source=environments'
target='_blank'
>
View our Enterprise offering
</StyledLink>
</MainText>
</MainContent>
<Tooltip title='Dismiss' arrow>
<StyledCloseButton
aria-label='dismiss'
onClick={() => {
setMoreEnvironmentsUpgrade('closed');
}}
size='small'
>
<Close fontSize='inherit' />
</StyledCloseButton>
</Tooltip>
</Wrapper>
);
};

0 comments on commit 8e4c586

Please sign in to comment.