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 (
= ({