feat: change request insights for oss and pro (#6608)

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(
+        <Routes>
+            <Route path={'/projects/:projectId'} element={<ChangeRequests />} />
+        </Routes>,
+        {
+            route: '/projects/default',
+        },
+    );
+
+    await screen.findByText('Enterprise feature');
+});
+
+test('Show change requests info', async () => {
+    setupEnterpriseApi();
+    render(
+        <Routes>
+            <Route path={'/projects/:projectId'} element={<ChangeRequests />} />
+        </Routes>,
+        {
+            route: '/projects/default',
+        },
+    );
+
+    await screen.findByText('To be applied');
+});

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 (
+            <Container>
+                <Typography variant='h3'>Change requests</Typography>
+                <PremiumFeature feature='change-requests' />
+            </Container>
+        );
+    }
+
     return (
         <Container>
             <ChangeRequestNavigation

frontend/src/component/project/Project/ProjectInsights/ProjectHealth/ProjectHealthChart.tsx

@@ -105,7 +105,7 @@ export const ProjectHealthChart: React.FC<ProgressComponentProps> = ({
             <text
                 x='50%'
                 y='50%'
-                fill='black'
+                fill={theme.palette.text.primary}
                 fontSize={theme.spacing(2.25)}
                 textAnchor='middle'
                 fontWeight='bold'