improvement(usage): show up to 50 rows per tab (#7410)

* improvement(usage): show up to 50 rows per tab

* improvement(usage): allow expanded views up to 100 rows

Author: waleedlatif1

apps/sim/ee/organization-usage/constants.ts

@@ -1,5 +1,7 @@
 import type { ComboboxOption } from '@sim/emcn'
 import {
+  ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT,
+  ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT,
   USAGE_WINDOW_PRESETS,
   type UsageBreakdownDimension,
   type UsageWindowPreset,
@@ -78,13 +80,12 @@ export const USAGE_TAB_EMPTY_COPY: Record<UsageBreakdownDimension, string> = {
 /**
  * Rows per breakdown before and after the `Other` row is expanded.
  *
- * The collapsed count keeps a tab to one screen; the expanded one is the contract's
- * own ceiling (`usageLimitSchema(50, 10)`), so asking for more would be refused. A
- * dimension with more than {@link EXPANDED_ROW_COUNT} distinct rows still shows an
- * `Other` row after expanding, which is the honest result rather than a bug.
+ * Each tab shows the contract default immediately, then can request the contract
+ * ceiling by expanding `Other`. A dimension with more than
+ * {@link EXPANDED_ROW_COUNT} distinct rows still shows a remainder after expanding.
  */
-export const COLLAPSED_ROW_COUNT = 10
-export const EXPANDED_ROW_COUNT = 50
+export const COLLAPSED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT
+export const EXPANDED_ROW_COUNT = ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT
 
 export const DEFAULT_USAGE_PRESET = 'current-period' as const
 export const DEFAULT_USAGE_TAB = USAGE_OVERVIEW_TAB

apps/sim/hooks/queries/organization-usage.ts

@@ -6,6 +6,7 @@ import {
   getOrganizationUsageBreakdownContract,
   getOrganizationUsageSummaryContract,
   listOrganizationUsageEventsContract,
+  ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT,
   type OrganizationUsageBreakdown,
   type OrganizationUsageEventPage,
   type OrganizationUsageSummary,
@@ -96,7 +97,7 @@ export function useOrganizationUsageBreakdown(
   dimension: UsageBreakdownDimension,
   options: UseBreakdownOptions = {}
 ) {
-  const limit = options.limit ?? 10
+  const limit = options.limit ?? ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT
   const { workspaceId } = options
   const queryKey = organizationUsageKeys.breakdown(
     organizationId ?? '',

apps/sim/lib/api/contracts/organization-usage.test.ts

@@ -2,7 +2,10 @@
  * @vitest-environment node
  */
 import { describe, expect, it } from 'vitest'
-import { organizationUsageEventsQuerySchema } from '@/lib/api/contracts/organization-usage'
+import {
+  organizationUsageBreakdownQuerySchema,
+  organizationUsageEventsQuerySchema,
+} from '@/lib/api/contracts/organization-usage'
 
 /** The shared window fields every usage contract extends, exercised through one of them. */
 function parseWindow(input: Record<string, unknown>) {
@@ -68,3 +71,20 @@ describe('organization usage window contract', () => {
     expect(parseWindow({ timezone: 'Mars/Olympus_Mons' }).success).toBe(false)
   })
 })
+
+describe('organization usage breakdown contract', () => {
+  const baseQuery = { dimension: 'workspace' as const }
+
+  it('defaults to 50 rows', () => {
+    expect(organizationUsageBreakdownQuerySchema.parse(baseQuery).limit).toBe(50)
+  })
+
+  it('allows expansion to 100 rows and refuses larger requests', () => {
+    expect(
+      organizationUsageBreakdownQuerySchema.safeParse({ ...baseQuery, limit: 100 }).success
+    ).toBe(true)
+    expect(
+      organizationUsageBreakdownQuerySchema.safeParse({ ...baseQuery, limit: 101 }).success
+    ).toBe(false)
+  })
+})

apps/sim/lib/api/contracts/organization-usage.ts

@@ -40,6 +40,9 @@ export type UsageBreakdownDimension = z.output<typeof usageBreakdownDimensionSch
  */
 export const MAX_CUSTOM_RANGE_DAYS = 92
 
+export const ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT = 50
+export const ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT = 100
+
 /**
  * A bare `YYYY-MM-DD` calendar date, and nothing else.
  *
@@ -144,7 +147,10 @@ export type OrganizationUsageSummaryQuery = z.input<typeof organizationUsageSumm
 export const organizationUsageBreakdownQuerySchema = organizationUsageWindowQuerySchema.extend({
   ...usageWorkspaceScopeShape,
   dimension: usageBreakdownDimensionSchema,
-  limit: usageLimitSchema(50, 10),
+  limit: usageLimitSchema(
+    ORGANIZATION_USAGE_BREAKDOWN_MAX_LIMIT,
+    ORGANIZATION_USAGE_BREAKDOWN_DEFAULT_LIMIT
+  ),
 })
 export type OrganizationUsageBreakdownQuery = z.input<typeof organizationUsageBreakdownQuerySchema>