feat: remove active/inactive members (#6654)

![image](https://github.com/Unleash/unleash/assets/964450/769ef8bb-834d-4917-898f-b2ba17a9062b)

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(<ProjectMembers projectId={'default'} members={members} />);
 
-    await screen.findByText('15');
-    await screen.findByText('+13');
     await screen.findByText('10');
-    await screen.findByText('5');
+    await screen.findByText('+2');
 });

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 (
         <StyledProjectInfoWidgetContainer>
             <NavigationBar to={link}>
@@ -122,28 +47,6 @@ export const ProjectMembers = ({
             >
                 <StatusBox boxText={`${currentMembers}`} change={change} />
             </Box>
-            <BarContainer>
-                <ActiveBar percentage={activePercentage} />
-                <InactiveBar percentage={inactivePercentage} />
-            </BarContainer>
-            <CountContainer>
-                <CountRow to={link}>
-                    <StatusWithDot>
-                        <Dot color={theme.palette.success.border} />
-                        <Box>Active</Box>
-                        <StyledCount>{active}</StyledCount>
-                    </StatusWithDot>
-                    <KeyboardArrowRight />
-                </CountRow>
-                <CountRow to={link}>
-                    <StatusWithDot>
-                        <Dot color={theme.palette.warning.border} />
-                        <Box>Inactive</Box>
-                        <StyledCount>{inactive}</StyledCount>
-                    </StatusWithDot>
-                    <KeyboardArrowRight />
-                </CountRow>
-            </CountContainer>
         </StyledProjectInfoWidgetContainer>
     );
 };

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,

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;
 };

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,
             },
         };
 

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',
         },