fix(usage): migrate usage breakdown table to universal table DEV-1013 DEV-1247

jsapp/js/UniversalTable/UniversalTableCore.module.scss

@@ -36,6 +36,8 @@ $z-index-spinner: 8;
   overflow-x: auto;
   position: relative;
   border-radius: $universal-table-border-radius-inner;
+  // Hard-coded minimum height that will not cut off dropdowns in header if there are little to no entries in the table
+  min-height: 200px;
 }
 
 // If the footer is displayed, don't round bottom corners

jsapp/js/UniversalTable/index.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react'
 
 import type { UseQueryResult } from '@tanstack/react-query'
+import type { ErrorObject } from 'schema-utils/declarations/validate'
+import type { ErrorDetail } from '#/api/models/errorDetail'
 import UniversalTableCore from './UniversalTableCore'
 import type { UniversalTableColumn } from './UniversalTableCore'
 
@@ -44,7 +46,7 @@ export namespace PaginatedListResponse {
   }
 }
 
-interface UniversalTableProps<Datum, TError = Error> {
+interface UniversalTableProps<Datum, TError = Error | ErrorDetail | ErrorObject> {
   // Below are props from `UniversalTable` that should come from the parent
   // component (these are kind of "configuration" props). The other
   // `UniversalTable` props are being handled here internally.

jsapp/js/account/usage/assetUsage.api.ts

@@ -1,18 +1,11 @@
 import { fetchGet } from '#/api'
+import type { PaginatedResponse } from '#/dataInterface'
 import { PROJECT_FIELDS } from '#/projects/projectViews/constants'
 import type { ProjectFieldName } from '#/projects/projectViews/constants'
 import type { ProjectsTableOrder } from '#/projects/projectsTable/projectsTable'
 
-export interface AssetUsage {
-  count: string
-  next: string | null
-  previous: string | null
-  results: AssetWithUsage[]
-}
-
 export interface AssetWithUsage {
   asset: string
-  uid: string
   asset__name: string
   nlp_usage_current_period: {
     total_nlp_asr_seconds: number
@@ -31,14 +24,16 @@ export interface AssetWithUsage {
 const ORG_ASSET_USAGE_URL = '/api/v2/organizations/:organization_id/asset_usage/'
 
 export async function getOrgAssetUsage(
-  pageNumber: number | string,
+  limit: number,
+  offset: number,
   organizationId: string,
   order?: ProjectsTableOrder,
 ) {
   const apiUrl = ORG_ASSET_USAGE_URL.replace(':organization_id', organizationId)
 
   const params = new URLSearchParams({
-    page: pageNumber.toString(),
+    limit: limit.toString(),
+    offset: offset.toString(),
   })
 
   if (order?.fieldName && order.direction && (order.direction === 'ascending' || order.direction === 'descending')) {
@@ -47,8 +42,11 @@ export async function getOrgAssetUsage(
     params.set('ordering', orderingPrefix + fieldDefinition.apiOrderingName)
   }
 
-  return fetchGet<AssetUsage>(`${apiUrl}?${params}`, {
-    includeHeaders: true,
-    errorMessageDisplay: t('There was an error fetching asset usage data.'),
-  })
+  return {
+    status: 200 as const,
+    data: await fetchGet<PaginatedResponse<AssetWithUsage>>(`${apiUrl}?${params}`, {
+      includeHeaders: true,
+      errorMessageDisplay: t('There was an error fetching asset usage data.'),
+    }),
+  }
 }

jsapp/js/account/usage/usageProjectBreakdown.module.scss

@@ -30,88 +30,7 @@
   padding: 2%;
 }
 
-.root table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-block-end: 60px;
-}
-
-.root table th {
-  padding: 0 8px;
-}
-
-.projects {
-  padding-right: 15%;
-  padding-left: 8px;
-}
-
-.root th {
-  font-weight: 700;
-  font-size: 13px;
-  color: colors.$kobo-gray-700;
-  text-align: initial;
-  padding-block: 1.5%;
-}
-
-.root tr {
-  font-weight: 400;
-  font-size: 16px;
-  color: colors.$kobo-gray-800;
-  border-bottom: 1px solid colors.$kobo-gray-300;
-}
-
-.root td {
-  padding: 18px 8px;
-}
-
 .link {
   color: colors.$kobo-dark-blue;
   font-weight: 600;
 }
-
-.currentMonth {
-  font-weight: 600;
-}
-
-.pagination {
-  font-weight: 400;
-  font-size: 14px;
-  color: colors.$kobo-gray-800;
-  position: fixed;
-  bottom: 20px;
-  background-color: white;
-  border: 1px solid colors.$kobo-gray-400;
-  width: 150px;
-  border-radius: 4px;
-  padding: 5px 0;
-  display: flex;
-  align-items: center;
-  height: 36px;
-}
-
-.root button {
-  background: transparent;
-  border: none;
-  padding: 0 8px;
-  color: colors.$kobo-gray-400;
-  cursor: pointer;
-
-  &.active {
-    color: colors.$kobo-gray-800;
-  }
-}
-
-.range {
-  padding: 6px;
-  border-right: 1px solid colors.$kobo-gray-400;
-  border-left: 1px solid colors.$kobo-gray-400;
-  flex: 1;
-  text-align: center;
-}
-
-.emptyMessage {
-  padding: 40px;
-  font-size: 1.2rem;
-  justify-content: center;
-  text-align: center;
-}