diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.test.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.test.tsx index 4540bdcecf..62fa52c47b 100644 --- a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.test.tsx +++ b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.test.tsx @@ -4,15 +4,12 @@ import { ProjectMembers } from './ProjectMembers'; test('Show outdated project members', async () => { const members = { - active: 10, - totalPreviousMonth: 2, - inactive: 5, + currentMembers: 10, + change: 2, }; render(); - await screen.findByText('15'); - await screen.findByText('+13'); await screen.findByText('10'); - await screen.findByText('5'); + await screen.findByText('+2'); }); diff --git a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx index 0de33b3891..f69323b813 100644 --- a/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx +++ b/frontend/src/component/project/Project/ProjectInsights/ProjectMembers/ProjectMembers.tsx @@ -1,5 +1,5 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -import { Box, styled, Typography, useTheme } from '@mui/material'; +import { Box, styled, Typography } from '@mui/material'; import { StatusBox } from '../ProjectInsightsStats/StatusBox'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; import { Link } from 'react-router-dom'; @@ -23,92 +23,17 @@ export const StyledProjectInfoWidgetContainer = styled('div')(({ theme }) => ({ gap: theme.spacing(2.5), })); -export const BarContainer = styled('div')(({ theme }) => ({ - width: '100%', - height: '20px', - display: 'flex', -})); - -const ActiveBar = styled('span', { - shouldForwardProp: (prop) => prop !== 'percentage', -})<{ - percentage: number; -}>(({ theme, percentage }) => ({ - width: `${percentage - 1}%`, - backgroundColor: theme.palette.success.border, - borderRadius: theme.shape.borderRadius, -})); - -const InactiveBar = styled('span', { - shouldForwardProp: (prop) => prop !== 'percentage', -})<{ - percentage: number; -}>(({ theme, percentage }) => ({ - width: `${percentage - 1}%`, - backgroundColor: theme.palette.warning.border, - marginLeft: 'auto', - borderRadius: theme.shape.borderRadius, -})); - -export const CountContainer = styled('div')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(1.5), -})); - -export const CountRow = styled(NavigationBar)(({ theme }) => ({ - display: 'flex', - padding: theme.spacing(0.5, 1, 0, 2), - alignItems: 'center', - gap: theme.spacing(3), - alignSelf: 'stretch', - borderRadius: theme.shape.borderRadiusMedium, - background: '#F7F7FA', -})); - -const StatusWithDot = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: theme.spacing(1), -})); - -const Dot = styled('span', { - shouldForwardProp: (prop) => prop !== 'color', -})<{ - color?: string; -}>(({ theme, color }) => ({ - height: '15px', - width: '15px', - borderRadius: '50%', - display: 'inline-block', - backgroundColor: color, -})); - -export const StyledCount = styled('span')(({ theme }) => ({ - fontSize: theme.typography.h1.fontSize, - fontWeight: theme.typography.fontWeightRegular, - color: theme.palette.text.primary, -})); - export const ProjectMembers = ({ members, projectId, }: IProjectMembersProps) => { const { uiConfig } = useUiConfig(); - const theme = useTheme(); const link = uiConfig?.versionInfo?.current?.enterprise ? `/projects/${projectId}/settings/access` : `/admin/users`; - const { active, totalPreviousMonth, inactive } = members; - - const currentMembers = active + inactive; - const change = currentMembers - (totalPreviousMonth || 0); - - const activePercentage = (active / currentMembers) * 100; - const inactivePercentage = (inactive / currentMembers) * 100; - + const { currentMembers, change } = members; return ( @@ -122,28 +47,6 @@ export const ProjectMembers = ({ > - - - - - - - - - Active - {active} - - - - - - - Inactive - {inactive} - - - - ); }; diff --git a/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts b/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts index 1b80ea4e3f..89d6274287 100644 --- a/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts +++ b/frontend/src/hooks/api/getters/useProjectInsights/useProjectInsights.ts @@ -46,9 +46,8 @@ const placeholderData: ProjectInsightsSchema = { staleCount: 0, }, members: { - active: 0, - inactive: 0, - totalPreviousMonth: 0, + currentMembers: 0, + change: 0, }, changeRequests: { total: 0, diff --git a/frontend/src/openapi/models/projectInsightsSchemaMembers.ts b/frontend/src/openapi/models/projectInsightsSchemaMembers.ts index 736662cea6..bf3df04fbe 100644 --- a/frontend/src/openapi/models/projectInsightsSchemaMembers.ts +++ b/frontend/src/openapi/models/projectInsightsSchemaMembers.ts @@ -8,10 +8,8 @@ * Active/inactive users summary */ export type ProjectInsightsSchemaMembers = { - /** The number of active project members who have used Unleash in the past 60 days */ - active: number; - /** The number of inactive project members who have not used Unleash in the past 60 days */ - inactive: number; - /** The number of total project members in the previous month */ - totalPreviousMonth?: number; + /** The change in the number of project members compared to the previous month */ + change: number; + /** The number of total project members */ + currentMembers: number; }; diff --git a/src/lib/features/project-insights/project-insights-service.ts b/src/lib/features/project-insights/project-insights-service.ts index a2aba73813..69e5a1879d 100644 --- a/src/lib/features/project-insights/project-insights-service.ts +++ b/src/lib/features/project-insights/project-insights-service.ts @@ -104,9 +104,8 @@ export class ProjectInsightsService { async getProjectInsights(projectId: string) { const result = { members: { - active: 20, - inactive: 3, - totalPreviousMonth: 15, + currentMembers: 20, + change: 3, }, }; diff --git a/src/lib/openapi/spec/project-insights-schema.ts b/src/lib/openapi/spec/project-insights-schema.ts index 60fef5e162..f06ce050f3 100644 --- a/src/lib/openapi/spec/project-insights-schema.ts +++ b/src/lib/openapi/spec/project-insights-schema.ts @@ -64,26 +64,19 @@ export const projectInsightsSchema = { }, members: { type: 'object', - required: ['active', 'inactive'], + required: ['currentMembers', 'change'], properties: { - active: { + currentMembers: { type: 'number', - description: - 'The number of active project members who have used Unleash in the past 60 days', + description: 'The number of total project members', example: 10, }, - inactive: { + change: { type: 'number', description: - 'The number of inactive project members who have not used Unleash in the past 60 days', + 'The change in the number of project members compared to the previous month', example: 10, }, - totalPreviousMonth: { - type: 'number', - description: - 'The number of total project members in the previous month', - example: 8, - }, }, description: 'Active/inactive users summary', },