Refactor: Project Overview fetching (#3035)

frontend/src/component/project/Project/Project.styles.ts

@@ -51,7 +51,7 @@ export const StyledInnerContainer = styled('div')(({ theme }) => ({
     alignItems: 'start',
 }));
 
-export const StyledProjectTitle = styled('h2')(({ theme }) => ({
+export const StyledProjectTitle = styled('span')(({ theme }) => ({
     margin: 0,
     width: '100%',
     fontSize: theme.fontSizes.mainHeader,

frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx

@@ -11,6 +11,8 @@ import {
 import { useProjectChangeRequests } from 'hooks/api/getters/useProjectChangeRequests/useProjectChangeRequests';
 import { WidgetFooterLink } from './WidgetFooterLink';
 
+const LOADING_LABEL = 'change-requests-widget';
+
 interface IChangeRequestsWidgetProps {
     projectId: string;
 }
@@ -60,6 +62,7 @@ const ChangeRequestsLabel = () => (
         variant="body2"
         color="text.secondary"
         lineHeight={1}
+        data-loading={LOADING_LABEL}
     >
         change requests
     </Typography>
@@ -69,7 +72,7 @@ export const ChangeRequestsWidget: FC<IChangeRequestsWidgetProps> = ({
     projectId,
 }) => {
     const { changeRequests, loading } = useProjectChangeRequests(projectId);
-    const loadingRef = useLoading(loading);
+    const loadingRef = useLoading(loading, `[data-loading="${LOADING_LABEL}"]`);
     const toBeApplied = changeRequests?.filter(
         (changeRequest: IChangeRequest) => changeRequest?.state === 'Approved'
     ).length;
@@ -86,7 +89,9 @@ export const ChangeRequestsWidget: FC<IChangeRequestsWidgetProps> = ({
                 >
                     <StyledSubtitle>To be applied</StyledSubtitle>
                     <StyledChangeRequestStatusInfo>
-                        <StyledApprovedCount>{toBeApplied}</StyledApprovedCount>{' '}
+                        <StyledApprovedCount data-loading={LOADING_LABEL}>
+                            {toBeApplied || 0}
+                        </StyledApprovedCount>{' '}
                         <ChangeRequestsLabel />
                     </StyledChangeRequestStatusInfo>
                 </StyledChangeBox>
@@ -95,8 +100,8 @@ export const ChangeRequestsWidget: FC<IChangeRequestsWidgetProps> = ({
                 >
                     <StyledSubtitle>To be reviewed</StyledSubtitle>
                     <StyledChangeRequestStatusInfo>
-                        <StyledInReviewCount>
-                            {toBeReviewed}
+                        <StyledInReviewCount data-loading={LOADING_LABEL}>
+                            {toBeReviewed || 0}
                         </StyledInReviewCount>{' '}
                         <ChangeRequestsLabel />
                     </StyledChangeRequestStatusInfo>

frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx

@@ -1,5 +1,5 @@
 import { Box, styled, useMediaQuery, useTheme } from '@mui/material';
-import { ProjectStatsSchema } from 'openapi/models/projectStatsSchema';
+import type { ProjectStatsSchema } from 'openapi/models/projectStatsSchema';
 import type { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId';
@@ -12,6 +12,7 @@ import { ChangeRequestsWidget } from './ChangeRequestsWidget';
 import { flexRow } from 'themes/themeStyles';
 import { LegacyHealthWidget } from './LegacyHealthWidget';
 import { LegacyProjectMembersWidget } from './LegacyProjectMembersWidget';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 
 interface IProjectInfoProps {
     id: string;
@@ -50,8 +51,10 @@ const ProjectInfo = ({
     const { uiConfig, isEnterprise } = useUiConfig();
     const theme = useTheme();
     const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(id);
 
-    const showChangeRequestsWidget = isEnterprise();
+    const showChangeRequestsWidget =
+        isEnterprise() && isChangeRequestConfiguredInAnyEnv();
     const showProjectMembersWidget = id !== DEFAULT_PROJECT_ID;
     const fitMoreColumns =
         (!showChangeRequestsWidget && !showProjectMembersWidget) ||

frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx

@@ -83,12 +83,11 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => {
         <StyledProjectInfoWidgetContainer
             sx={{ padding: theme => theme.spacing(3) }}
         >
-            <StyledWidgetTitle data-loading>
-                Toggle types used
-            </StyledWidgetTitle>
+            <StyledWidgetTitle>Toggle types used</StyledWidgetTitle>
             {Object.keys(featureTypeStats).map(type => (
                 <ToggleTypesRow
                     type={type}
+                    key={type}
                     Icon={getFeatureTypeIcons(type)}
                     count={
                         featureTypeStats[type as keyof typeof featureTypeStats]

frontend/src/component/project/Project/ProjectStats/StatusBox.tsx

@@ -8,7 +8,7 @@ const StyledTypographyHeader = styled(Typography)(({ theme }) => ({
     marginBottom: theme.spacing(2.5),
 }));
 
-const StyledTypographyCount = styled(Typography)(({ theme }) => ({
+const StyledTypographyCount = styled(Box)(({ theme }) => ({
     fontSize: theme.fontSizes.largeHeader,
 }));
 

frontend/src/hooks/api/getters/useProjectChangeRequests/useProjectChangeRequests.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
-import useUiConfig from '../useUiConfig/useUiConfig';
 import { useEnterpriseSWR } from '../useEnterpriseSWR/useEnterpriseSWR';
 
 const fetcher = (path: string) => {

frontend/src/hooks/useLoading.ts

@@ -2,11 +2,11 @@ import { createRef, useLayoutEffect } from 'react';
 
 type refElement = HTMLDivElement;
 
-const useLoading = (loading: boolean) => {
+const useLoading = (loading: boolean, selector = '[data-loading=true]') => {
     const ref = createRef<refElement>();
     useLayoutEffect(() => {
         if (ref.current) {
-            const elements = ref.current.querySelectorAll('[data-loading]');
+            const elements = ref.current.querySelectorAll(selector);
 
             elements.forEach(element => {
                 if (loading) {

src/lib/services/project-service.ts

@@ -789,25 +789,28 @@ export default class ProjectService {
         archived: boolean = false,
         userId?: number,
     ): Promise<IProjectOverview> {
-        const project = await this.store.get(projectId);
-        const environments = await this.store.getEnvironmentsForProject(
-            projectId,
-        );
-        const features = await this.featureToggleService.getFeatureOverview({
-            projectId,
-            archived,
-            userId,
-        });
-        const members = await this.store.getMembersCountByProject(projectId);
-
-        const favorite = await this.favoritesService.isFavoriteProject({
-            project: projectId,
-            userId,
-        });
-
-        const projectStats = await this.projectStatsStore.getProjectStats(
-            projectId,
-        );
+        const [
+            project,
+            environments,
+            features,
+            members,
+            favorite,
+            projectStats,
+        ] = await Promise.all([
+            this.store.get(projectId),
+            this.store.getEnvironmentsForProject(projectId),
+            this.featureToggleService.getFeatureOverview({
+                projectId,
+                archived,
+                userId,
+            }),
+            this.store.getMembersCountByProject(projectId),
+            this.favoritesService.isFavoriteProject({
+                project: projectId,
+                userId,
+            }),
+            this.projectStatsStore.getProjectStats(projectId),
+        ]);
 
         return {
             stats: projectStats,