diff --git a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.test.ts b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.test.ts index e65f9c0e9a..5da2af3f7f 100644 --- a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.test.ts +++ b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.test.ts @@ -1,51 +1,55 @@ import { renderHook } from '@testing-library/react-hooks'; import { useFilteredFlagsSummary } from './useFilteredFlagsSummary'; +import type { ExecutiveSummarySchemaUsers } from '../../../openapi'; describe('useFilteredFlagTrends', () => { it('should summarize only last week of project flag trends', () => { const { result } = renderHook(() => - useFilteredFlagsSummary([ - { - week: '2024-01', - project: 'project1', - total: 1, - active: 1, - stale: 0, - potentiallyStale: 0, - users: 1, - date: '', - }, - { - week: '2024-01', - project: 'project2', - total: 2, - active: 2, - stale: 0, - potentiallyStale: 0, - users: 2, - date: '', - }, - { - week: '2024-02', - project: 'project1', - total: 4, - active: 3, - stale: 0, - potentiallyStale: 1, - users: 1, - date: '', - }, - { - week: '2024-02', - project: 'project3', - total: 10, - active: 8, - stale: 2, - potentiallyStale: 0, - users: 3, - date: '', - }, - ]), + useFilteredFlagsSummary( + [ + { + week: '2024-01', + project: 'project1', + total: 1, + active: 1, + stale: 0, + potentiallyStale: 0, + users: 1, + date: '', + }, + { + week: '2024-01', + project: 'project2', + total: 2, + active: 2, + stale: 0, + potentiallyStale: 0, + users: 2, + date: '', + }, + { + week: '2024-02', + project: 'project1', + total: 4, + active: 3, + stale: 0, + potentiallyStale: 1, + users: 1, + date: '', + }, + { + week: '2024-02', + project: 'project3', + total: 10, + active: 8, + stale: 2, + potentiallyStale: 0, + users: 3, + date: '', + }, + ], + { total: 1 } as unknown as ExecutiveSummarySchemaUsers, + ), ); expect(result.current).toEqual({ @@ -55,23 +59,27 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 1, averageUsers: 2, averageHealth: '79', + flagsPerUser: '14.0', }); }); it('should work with project with zero users', () => { const { result, rerender } = renderHook(() => - useFilteredFlagsSummary([ - { - week: '2024-01', - project: 'project1', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - }, - ]), + useFilteredFlagsSummary( + [ + { + week: '2024-01', + project: 'project1', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + }, + ], + { total: 1 } as unknown as ExecutiveSummarySchemaUsers, + ), ); expect(result.current).toEqual({ @@ -81,33 +89,37 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 0, averageHealth: '100', + flagsPerUser: '5.0', }); }); it('should work with projects where some have with zero users', () => { const { result } = renderHook(() => - useFilteredFlagsSummary([ - { - week: '2024-01', - project: 'project1', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - }, - { - week: '2024-01', - project: 'project2', - total: 5, - active: 5, - stale: 0, - potentiallyStale: 0, - users: 3, - date: '', - }, - ]), + useFilteredFlagsSummary( + [ + { + week: '2024-01', + project: 'project1', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + }, + { + week: '2024-01', + project: 'project2', + total: 5, + active: 5, + stale: 0, + potentiallyStale: 0, + users: 3, + date: '', + }, + ], + { total: 1 } as unknown as ExecutiveSummarySchemaUsers, + ), ); expect(result.current).toEqual({ @@ -117,23 +129,27 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 1.5, averageHealth: '100', + flagsPerUser: '10.0', }); }); it('should set health of a project without feature toggles to undefined', () => { const { result } = renderHook(() => - useFilteredFlagsSummary([ - { - week: '2024-01', - project: 'project1', - total: 0, - active: 0, - stale: 0, - potentiallyStale: 0, - users: 0, - date: '', - }, - ]), + useFilteredFlagsSummary( + [ + { + week: '2024-01', + project: 'project1', + total: 0, + active: 0, + stale: 0, + potentiallyStale: 0, + users: 0, + date: '', + }, + ], + { total: 1 } as unknown as ExecutiveSummarySchemaUsers, + ), ); expect(result.current).toEqual({ @@ -143,6 +159,7 @@ describe('useFilteredFlagTrends', () => { potentiallyStale: 0, averageUsers: 0, averageHealth: undefined, + flagsPerUser: 'N/A', }); }); }); diff --git a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts index 8a5a859edb..6e6ece31d0 100644 --- a/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts +++ b/frontend/src/component/executiveDashboard/hooks/useFilteredFlagsSummary.ts @@ -1,13 +1,13 @@ import { useMemo } from 'react'; import type { - ExecutiveSummarySchema, ExecutiveSummarySchemaProjectFlagTrendsItem, + ExecutiveSummarySchemaUsers, } from 'openapi'; // NOTE: should we move project filtering to the backend? export const useFilteredFlagsSummary = ( filteredProjectFlagTrends: ExecutiveSummarySchemaProjectFlagTrendsItem[], - users: ExecutiveSummarySchema['users'], + users: ExecutiveSummarySchemaUsers, ) => useMemo(() => { const lastWeekId = filteredProjectFlagTrends.reduce((prev, current) => { @@ -42,14 +42,14 @@ export const useFilteredFlagsSummary = ( }, ); - const flagsPerUser = - sum.total && users?.total ? sum.total / users.total : 0; + const flagsPerUser = users?.total ? sum.total / users.total : 0; return { ...sum, - flagsPerUser: Number.isNaN(flagsPerUser) - ? 'N/A' - : flagsPerUser.toFixed(2), + flagsPerUser: + Number.isNaN(flagsPerUser) || flagsPerUser === 0 + ? 'N/A' + : flagsPerUser.toFixed(1), averageUsers, averageHealth: sum.total ? ((sum.active / (sum.total || 1)) * 100).toFixed(0)