diff --git a/frontend/src/assets/img/upgradeEnvironments.png b/frontend/src/assets/img/upgradeEnvironments.png new file mode 100644 index 000000000000..5e797e3fa921 Binary files /dev/null and b/frontend/src/assets/img/upgradeEnvironments.png differ diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index 39aadda7e8a3..0e48ee527375 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -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), @@ -317,6 +318,7 @@ const ProjectEnvironmentList = () => { /> } /> + {isOss() ? : null} ({ + 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 ( + + + + + Need more environments? +

+ 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. +

+ + View our Enterprise offering + +
+
+ + { + setMoreEnvironmentsUpgrade('closed'); + }} + size='small' + > + + + +
+ ); +};