diff --git a/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.test.tsx b/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.test.tsx new file mode 100644 index 0000000000..7615e01299 --- /dev/null +++ b/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.test.tsx @@ -0,0 +1,51 @@ +import { screen } from '@testing-library/react'; +import { render } from 'utils/testRenderer'; +import { testServerRoute, testServerSetup } from 'utils/testServer'; +import { Route, Routes } from 'react-router-dom'; +import { ChangeRequests } from './ChangeRequests'; + +const server = testServerSetup(); + +const setupEnterpriseApi = () => { + testServerRoute(server, '/api/admin/ui-config', { + versionInfo: { + current: { enterprise: 'present' }, + }, + }); +}; + +const setupOssApi = () => { + testServerRoute(server, '/api/admin/ui-config', { + versionInfo: { + current: { oss: 'present' }, + }, + }); +}; + +test('Show enterprise hints', async () => { + setupOssApi(); + render( + + } /> + , + { + route: '/projects/default', + }, + ); + + await screen.findByText('Enterprise feature'); +}); + +test('Show change requests info', async () => { + setupEnterpriseApi(); + render( + + } /> + , + { + route: '/projects/default', + }, + ); + + await screen.findByText('To be applied'); +}); diff --git a/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.tsx b/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.tsx index f58109e9cf..aa22bad4d9 100644 --- a/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.tsx +++ b/frontend/src/component/project/Project/ProjectInsights/ChangeRequests/ChangeRequests.tsx @@ -2,10 +2,13 @@ import { Box, styled, Typography } from '@mui/material'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; import { Link } from 'react-router-dom'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; +import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; const Container = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', + gap: theme.spacing(2.5), })); const BoxesContainer = styled(Box)(({ theme }) => ({ @@ -48,6 +51,7 @@ const ColorBox = styled(Box)(({ theme }) => ({ const ApplyBox = styled(ColorBox)(({ theme }) => ({ background: theme.palette.success.light, + marginTop: theme.spacing(2.5), })); const ReviewBox = styled(ColorBox)(({ theme }) => ({ @@ -57,7 +61,6 @@ const ReviewBox = styled(ColorBox)(({ theme }) => ({ const ChangeRequestNavigation = styled(Link)(({ theme }) => ({ display: 'flex', justifyContent: 'space-between', - marginBottom: theme.spacing(2.5), textDecoration: 'none', color: theme.palette.text.primary, })); @@ -80,6 +83,7 @@ const BigNumber = styled(Typography)(({ theme }) => ({ export const ChangeRequests = () => { const projectId = useRequiredPathParam('projectId'); + const { isOss, isPro } = useUiConfig(); const toBeApplied = 12; const toBeReviewed = 3; @@ -87,6 +91,15 @@ export const ChangeRequests = () => { const applied = 28; const rejected = 4; + if (isOss() || isPro()) { + return ( + + Change requests + + + ); + } + return ( = ({