feat: Add page size to tag list table

openedx · Feb 13, 2024 · a325011 · a325011
1 parent adbe3a9
commit a325011
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 12 deletions.
diff --git a/src/taxonomy/tag-list/TagListTable.jsx b/src/taxonomy/tag-list/TagListTable.jsx
@@ -93,23 +93,22 @@ const TagListTable = ({ taxonomyId }) => {
         renderRowSubComponent={({ row }) => (
           <SubTagsExpanded taxonomyId={taxonomyId} parentTagValue={row.original.value} />
         )}
-        additionalColumns={[
-          {
-            id: 'expander',
-            Header: DataTable.ExpandAll,
-            Cell: OptionalExpandLink,
-          },
-        ]}
         columns={[
           {
             Header: intl.formatMessage(messages.tagListColumnValueHeader),
             Cell: TagValue,
           },
+          {
+            id: 'expander',
+            Header: DataTable.ExpandAll,
+            Cell: OptionalExpandLink,
+          },
         ]}
       >
         <DataTable.Table />
         <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
-        <DataTable.TableFooter />
+        {tagList?.numPages !== undefined && tagList?.numPages > 1
+          && <DataTable.TableFooter />}
       </DataTable>
     </div>
   );

diff --git a/src/taxonomy/tag-list/TagListTable.test.jsx b/src/taxonomy/tag-list/TagListTable.test.jsx
@@ -56,7 +56,16 @@ const mockTagsResponse = {
     },
   ],
 };
-const rootTagsListUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?page=1';
+const mockTagsPaginationResponse = {
+  next: null,
+  previous: null,
+  count: 103,
+  num_pages: 2,
+  current_page: 1,
+  start: 0,
+  results: [],
+};
+const rootTagsListUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?page=1&page_size=100';
 const subTagsResponse = {
   next: null,
   previous: null,
@@ -128,4 +137,20 @@ describe('<TagListTable />', () => {
       expect(result.getByText('the child tag')).toBeInTheDocument();
     });
   });
+
+  it('should not render pagination footer', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    const result = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(result.queryByTestId('table-footer')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should render pagination footer', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsPaginationResponse);
+    const result = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(result.getByTestId('table-footer')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/taxonomy/tag-list/data/api.js b/src/taxonomy/tag-list/data/api.js
@@ -9,8 +9,8 @@ import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
-const getTagListApiUrl = (taxonomyId, page) => new URL(
-  `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page=${page + 1}`,
+const getTagListApiUrl = (taxonomyId, page, pageSize) => new URL(
+  `api/content_tagging/v1/taxonomies/${taxonomyId}/tags/?page=${page + 1}&page_size=${pageSize}`,
   getApiBaseUrl(),
 ).href;
 
@@ -21,10 +21,11 @@ const getTagListApiUrl = (taxonomyId, page) => new URL(
  */
 export const useTagListData = (taxonomyId, options) => {
   const { pageIndex } = options;
+  const pageSize = 100;
   return useQuery({
     queryKey: ['tagList', taxonomyId, pageIndex],
     queryFn: async () => {
-      const { data } = await getAuthenticatedHttpClient().get(getTagListApiUrl(taxonomyId, pageIndex));
+      const { data } = await getAuthenticatedHttpClient().get(getTagListApiUrl(taxonomyId, pageIndex, pageSize));
       return camelCaseObject(data);
     },
   });