From 0656fddbc46c17eb9438d899e6e55e6941e15d53 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Tue, 7 Feb 2023 08:57:28 +0100 Subject: [PATCH] Refactor: Project Overview fetching (#3035) --- .../project/Project/Project.styles.ts | 2 +- .../ProjectInfo/ChangeRequestsWidget.tsx | 13 ++++-- .../Project/ProjectInfo/ProjectInfo.tsx | 7 +++- .../Project/ProjectInfo/ToggleTypesWidget.tsx | 5 +-- .../Project/ProjectStats/StatusBox.tsx | 2 +- .../useProjectChangeRequests.ts | 1 - frontend/src/hooks/useLoading.ts | 4 +- src/lib/services/project-service.ts | 41 ++++++++++--------- 8 files changed, 42 insertions(+), 33 deletions(-) diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts index 6231c8fdcf..94fd6ec091 100644 --- a/frontend/src/component/project/Project/Project.styles.ts +++ b/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, diff --git a/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx index e86ddf3b79..7348772bf5 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx +++ b/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 @@ -69,7 +72,7 @@ export const ChangeRequestsWidget: FC = ({ 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 = ({ > To be applied - {toBeApplied}{' '} + + {toBeApplied || 0} + {' '} @@ -95,8 +100,8 @@ export const ChangeRequestsWidget: FC = ({ > To be reviewed - - {toBeReviewed} + + {toBeReviewed || 0} {' '} diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx index bfa4844af5..077c48b252 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx +++ b/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) || diff --git a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx index 10d6b7f5d6..494dac8335 100644 --- a/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx +++ b/frontend/src/component/project/Project/ProjectInfo/ToggleTypesWidget.tsx @@ -83,12 +83,11 @@ export const ToggleTypesWidget = ({ features }: IToggleTypesWidgetProps) => { theme.spacing(3) }} > - - Toggle types used - + Toggle types used {Object.keys(featureTypeStats).map(type => ( ({ marginBottom: theme.spacing(2.5), })); -const StyledTypographyCount = styled(Typography)(({ theme }) => ({ +const StyledTypographyCount = styled(Box)(({ theme }) => ({ fontSize: theme.fontSizes.largeHeader, })); diff --git a/frontend/src/hooks/api/getters/useProjectChangeRequests/useProjectChangeRequests.ts b/frontend/src/hooks/api/getters/useProjectChangeRequests/useProjectChangeRequests.ts index ecccc419a8..35609fb0e3 100644 --- a/frontend/src/hooks/api/getters/useProjectChangeRequests/useProjectChangeRequests.ts +++ b/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) => { diff --git a/frontend/src/hooks/useLoading.ts b/frontend/src/hooks/useLoading.ts index cea75f342b..2f58bc27b2 100644 --- a/frontend/src/hooks/useLoading.ts +++ b/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(); useLayoutEffect(() => { if (ref.current) { - const elements = ref.current.querySelectorAll('[data-loading]'); + const elements = ref.current.querySelectorAll(selector); elements.forEach(element => { if (loading) { diff --git a/src/lib/services/project-service.ts b/src/lib/services/project-service.ts index 581f77f27d..e229b34552 100644 --- a/src/lib/services/project-service.ts +++ b/src/lib/services/project-service.ts @@ -789,25 +789,28 @@ export default class ProjectService { archived: boolean = false, userId?: number, ): Promise { - 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,