Merge pull request #429 from openedx/knguyen2/ent-9546

feat: add manual pagination

Author: katrinan029

src/Configuration/Customers/CustomerDataTable/CustomersPage.jsx

@@ -2,7 +2,6 @@ import React, {
   useMemo,
   useState,
   useCallback,
-  useEffect,
 } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
@@ -28,33 +27,42 @@ const expandAllRowsHandler = ({ getToggleAllRowsExpandedProps }) => (
 );
 
 const CustomersPage = () => {
-  const [enterpriseList, setEnterpriseList] = useState([]);
+  const [enterpriseList, setEnterpriseList] = useState({
+    itemCount: 0,
+    pageCount: 0,
+    results: [],
+  });
   const [isLoading, setIsLoading] = useState(true);
-
-  const fetchData = useCallback(
-    async () => {
-      try {
-        const { data } = await LmsApiService.fetchEnterpriseCustomerSupportTool();
-        const result = camelCaseObject(data);
-        setEnterpriseList(result);
-      } catch (error) {
-        logError(error);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [],
-  );
+  const fetchData = useCallback(async (args) => {
+    try {
+      setIsLoading(true);
+      const options = {};
+      args.filters.forEach((filter) => {
+        const { id, value } = filter;
+        if (id === 'name') {
+          options.user_query = value;
+        }
+      });
+      options.page = args.pageIndex + 1;
+      const { data } = await LmsApiService.fetchEnterpriseCustomerSupportTool(options);
+      const result = camelCaseObject(data);
+      setEnterpriseList({
+        itemCount: result.count,
+        pageCount: result.numPages,
+        results: result.results,
+      });
+    } catch (error) {
+      logError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
 
   const debouncedFetchData = useMemo(() => debounce(
     fetchData,
     300,
   ), [fetchData]);
 
-  useEffect(() => {
-    debouncedFetchData();
-  }, [debouncedFetchData]);
-
   return (
     <Container className="mt-5">
       <h1>Customers</h1>
@@ -67,18 +75,22 @@ const CustomersPage = () => {
           }}
           renderRowSubComponent={({ row }) => <CustomerDetailRowSubComponent row={row} />}
           isPaginated
+          manualPagination
+          manualFilters
           isFilterable
+          fetchData={debouncedFetchData}
           defaultColumnValues={{ Filter: TextFilter }}
-          itemCount={enterpriseList?.length || 0}
-          data={enterpriseList || []}
+          itemCount={enterpriseList.itemCount}
+          pageCount={enterpriseList.pageCount}
+          data={enterpriseList.results || []}
           columns={[
             {
               id: 'expander',
               Header: expandAllRowsHandler,
               Cell: DataTable.ExpandRow,
             },
             {
-              id: 'customer details',
+              id: 'name',
               Header: 'Customer details',
               accessor: 'name',
               Cell: CustomerDetailLink,

src/Configuration/Customers/CustomerDataTable/tests/CustomersPage.test.jsx

@@ -6,25 +6,29 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import CustomersPage from '../CustomersPage';
 import LmsApiService from '../../../../data/services/EnterpriseApiService';
 
-const mockData = [{
-  name: 'Ubuntu',
-  slug: 'test-ubuntu',
-  uuid: 'test-enterprise-uuid',
-  activeIntegrations: [{
-    channelCode: 'test-channel',
-    created: 'jan 1, 1992',
-    modified: 'jan 2, 1992',
-    displayName: 'test channel',
-    active: true,
+const mockData = {
+  count: 1,
+  numPages: 1,
+  results: [{
+    name: 'Ubuntu',
+    slug: 'test-ubuntu',
+    uuid: 'test-enterprise-uuid',
+    activeIntegrations: [{
+      channelCode: 'test-channel',
+      created: 'jan 1, 1992',
+      modified: 'jan 2, 1992',
+      displayName: 'test channel',
+      active: true,
+    }],
+    activeSsoConfigurations: [{
+      created: 'jan 1, 1992',
+      modified: 'jan 2, 1992',
+      displayName: 'test channel',
+      active: true,
+    }],
+    enableGenerationOfApiCredentials: true,
   }],
-  activeSsoConfigurations: [{
-    created: 'jan 1, 1992',
-    modified: 'jan 2, 1992',
-    displayName: 'test channel',
-    active: true,
-  }],
-  enableGenerationOfApiCredentials: true,
-}];
+};
 
 jest.mock('lodash.debounce', () => jest.fn((fn) => fn));
 jest

src/Configuration/Customers/CustomerDetailView/CustomerViewContainer.jsx

@@ -25,8 +25,8 @@ const CustomerViewContainer = () => {
   const fetchData = useCallback(
     async () => {
       try {
-        const response = await getEnterpriseCustomer({ uuid: id });
-        setEnterpriseCustomer(response[0]);
+        const { results } = await getEnterpriseCustomer({ uuid: id });
+        setEnterpriseCustomer(results[0]);
       } catch (error) {
         logError(error);
       } finally {

src/Configuration/Customers/CustomerDetailView/tests/CustomerViewContainer.test.jsx

@@ -23,13 +23,15 @@ jest.mock('../../data/utils', () => ({
 
 describe('CustomerViewContainer', () => {
   it('renders data', async () => {
-    getEnterpriseCustomer.mockReturnValue([{
-      uuid: 'test-id',
-      name: 'Test Customer Name',
-      slug: 'customer-6',
-      created: '2024-07-23T20:02:57.651943Z',
-      modified: '2024-07-23T20:02:57.651943Z',
-    }]);
+    getEnterpriseCustomer.mockReturnValue({
+      results: [{
+        uuid: 'test-id',
+        name: 'Test Customer Name',
+        slug: 'customer-6',
+        created: '2024-07-23T20:02:57.651943Z',
+        modified: '2024-07-23T20:02:57.651943Z',
+      }],
+    });
     formatDate.mockReturnValue('July 23, 2024');
     render(
       <IntlProvider locale="en">