ref: STORIF-187 - Pagination removed from quotas.

Author: dchyrva-akamai

packages/manager/src/features/Account/Quotas/Quotas.test.tsx

@@ -43,6 +43,7 @@ vi.mock('./utils', () => ({
   useGetLocationsForQuotaService: queryMocks.useGetLocationsForQuotaService,
   convertResourceMetric: queryMocks.convertResourceMetric,
   pluralizeMetric: queryMocks.pluralizeMetric,
+  QUOTA_ROW_MIN_HEIGHT: 58,
 }));
 
 describe('Quotas', () => {

packages/manager/src/features/Account/Quotas/QuotasTable/QuotasTable.test.tsx

@@ -16,7 +16,7 @@ const queryMocks = vi.hoisted(() => ({
   },
   useQueries: vi.fn().mockReturnValue([]),
   useQuotaUsageQuery: vi.fn().mockReturnValue({}),
-  useQuotasQuery: vi.fn().mockReturnValue({}),
+  useAllQuotasQuery: vi.fn().mockReturnValue({}),
 }));
 
 vi.mock('@linode/queries', async () => {
@@ -25,7 +25,7 @@ vi.mock('@linode/queries', async () => {
     ...actual,
     quotaQueries: queryMocks.quotaQueries,
     useQuotaUsageQuery: queryMocks.useQuotaUsageQuery,
-    useQuotasQuery: queryMocks.useQuotasQuery,
+    useAllQuotasQuery: queryMocks.useAllQuotasQuery,
   };
 });
 
@@ -81,13 +81,8 @@ describe('QuotasTable', () => {
         isLoading: false,
       },
     ]);
-    queryMocks.useQuotasQuery.mockReturnValue({
-      data: {
-        data: quotas,
-        page: 1,
-        pages: 1,
-        results: 1,
-      },
+    queryMocks.useAllQuotasQuery.mockReturnValue({
+      data: quotas,
       isFetching: false,
     });
     queryMocks.useQuotaUsageQuery.mockReturnValue({

packages/manager/src/features/Account/Quotas/QuotasTable/QuotasTable.tsx

@@ -2,7 +2,6 @@ import { Dialog, ErrorState } from '@linode/ui';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
-import { PaginationFooter } from 'src/components/PaginationFooter/PaginationFooter';
 import { Table } from 'src/components/Table/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell/TableCell';
@@ -46,16 +45,12 @@ export const QuotasTable = (props: QuotasTableProps) => {
 
   const {
     data: quotasWithUsage,
-    quotas,
     errorMessage: quotasErrorMessage,
     queries: quotaUsageQueries,
     isFetching: isFetchingQuotas,
-    pagination,
   } = useGetQuotas(
     selectedLocation?.value,
     selectedService.value,
-    '/quotas',
-    `${collectionName}-table`,
     collectionName,
     isGlobalScope ? true : hasSelectedLocation
   );
@@ -137,18 +132,6 @@ export const QuotasTable = (props: QuotasTableProps) => {
         </TableBody>
       </Table>
 
-      {selectedLocation && !isFetchingQuotas && (
-        <PaginationFooter
-          count={quotas?.results ?? 0}
-          eventCategory="quotas_table"
-          handlePageChange={pagination.handlePageChange}
-          handleSizeChange={pagination.handlePageSizeChange}
-          page={pagination.page}
-          pageSize={pagination.pageSize}
-          sx={{ '&.MuiBox-root': { marginTop: 0 } }}
-        />
-      )}
-
       <Dialog
         onClose={() => setSupportModalOpen(false)}
         open={supportModalOpen}

packages/manager/src/features/Account/Quotas/hooks/useGetQuotas.ts

@@ -1,29 +1,19 @@
-import { quotaQueries, useQueries, useQuotasQuery } from '@linode/queries';
+import { quotaQueries, useAllQuotasQuery, useQueries } from '@linode/queries';
 import * as React from 'react';
 
 import {
   getQuotasFilters,
   getQuotaVisibilityFilter,
 } from 'src/features/Account/Quotas/utils';
-import { usePaginationV2 } from 'src/hooks/usePaginationV2';
 
 import type { Filter, QuotaType } from '@linode/api-v4';
-import type { ToSubOptions } from '@tanstack/react-router';
 
 export const useGetQuotas = (
   selectedLocation: string,
   selectedService: QuotaType,
-  currentRoute: ToSubOptions['to'],
-  paginationPreferenceKey: string,
   collectionName: string,
   enabled = true
 ) => {
-  const pagination = usePaginationV2({
-    currentRoute,
-    initialPage: 1,
-    preferenceKey: paginationPreferenceKey,
-  });
-
   const filters: Filter = getQuotasFilters({
     location: { label: '', value: selectedLocation },
     service: { label: '', value: selectedService },
@@ -36,24 +26,15 @@ export const useGetQuotas = (
     error: quotasError,
     isError: isQuotasError,
     isFetching: isFetchingQuotas,
-  } = useQuotasQuery(
-    selectedService,
-    collectionName,
-    {
-      page: pagination.page,
-      page_size: pagination.pageSize,
-    },
-    filters,
-    enabled
-  );
+  } = useAllQuotasQuery(selectedService, collectionName, {}, filters, enabled);
 
   // Quota Usage Queries
   // For each quota with has_usage == true,
   // fetch the usage in parallel
   // This will only fetch for the paginated set
   const quotaIdsHavingUsage =
-    quotas?.data
-      .filter(
+    quotas
+      ?.filter(
         (quota) => quota.has_usage === true || quota.has_usage === undefined
       )
       .map((quota) => quota.quota_id) ?? [];
@@ -66,8 +47,8 @@ export const useGetQuotas = (
   // Combine the quotas with their usage
   const filteredQuotasWithUsage = React.useMemo(
     () =>
-      quotas?.data
-        .filter((quota) => visiblityFilter.isVisible(quota))
+      quotas
+        ?.filter((quota) => visiblityFilter.isVisible(quota))
         .map((quota, index) => ({
           ...quota,
           usage: quotaUsageQueries?.[index]?.data,
@@ -77,14 +58,12 @@ export const useGetQuotas = (
 
   return {
     data: filteredQuotasWithUsage,
-    quotas,
     queries: quotaUsageQueries,
     errorMessage:
       (quotasError && quotasError[0]?.reason) ||
       quotaUsageQueries.find((query) => query.isError)?.error.message,
     isError: isQuotasError || quotaUsageQueries.some((query) => query.isError),
     isFetching:
       isFetchingQuotas || quotaUsageQueries.some((query) => query.isFetching),
-    pagination,
   };
 };

packages/manager/src/features/ObjectStorage/SummaryLanding/Partials/EndpointSummaryRow.test.tsx

@@ -16,15 +16,15 @@ const queryMocks = vi.hoisted(() => ({
     }),
   },
   useQueries: vi.fn().mockReturnValue([]),
-  useQuotasQuery: vi.fn().mockReturnValue({}),
+  useAllQuotasQuery: vi.fn().mockReturnValue({}),
 }));
 
 vi.mock('@linode/queries', async () => {
   const actual = await vi.importActual('@linode/queries');
   return {
     ...actual,
     quotaQueries: queryMocks.quotaQueries,
-    useQuotasQuery: queryMocks.useQuotasQuery,
+    useAllQuotasQuery: queryMocks.useAllQuotasQuery,
   };
 });
 
@@ -98,7 +98,7 @@ describe('EndpointSummaryRow', () => {
       },
     ]);
 
-    queryMocks.useQuotasQuery.mockReturnValue({
+    queryMocks.useAllQuotasQuery.mockReturnValue({
       data: {
         data: quotasMock,
         page: 1,
@@ -138,7 +138,7 @@ describe('EndpointSummaryRow', () => {
       },
     ]);
 
-    queryMocks.useQuotasQuery.mockReturnValue({
+    queryMocks.useAllQuotasQuery.mockReturnValue({
       isFetching: false,
       isError: true,
       error: errorMock,
@@ -172,7 +172,7 @@ describe('EndpointSummaryRow', () => {
       },
     ]);
 
-    queryMocks.useQuotasQuery.mockReturnValue({
+    queryMocks.useAllQuotasQuery.mockReturnValue({
       data: {
         data: quotasMock,
         page: 1,

packages/manager/src/features/ObjectStorage/SummaryLanding/Partials/EndpointSummaryRow.tsx

@@ -19,14 +19,7 @@ export const EndpointSummaryRow = ({ endpoint }: Props) => {
     data: quotaWithUsage,
     isFetching,
     isError,
-  } = useGetQuotas(
-    endpoint,
-    'object-storage',
-    '/object-storage/summary',
-    'object-storage-summary-table',
-    'quotas',
-    Boolean(endpoint)
-  );
+  } = useGetQuotas(endpoint, 'object-storage', 'quotas', Boolean(endpoint));
 
   if (isFetching) {
     return <TableRowLoading columns={3} />;