Display full descendant count on taxonomy tag list page [FC-0036] (#826)

Author: bradenmacdonald

src/taxonomy/tag-list/TagListTable.jsx

@@ -24,7 +24,7 @@ const SubTagsExpanded = ({ taxonomyId, parentTagValue }) => {
     <ul style={{ listStyleType: 'none' }}>
       {subTagsData.data.results.map(tagData => (
         <li key={tagData.id} style={{ paddingLeft: `${(tagData.depth - 1) * 30}px` }}>
-          {tagData.value} <span className="text-secondary-500">{tagData.childCount > 0 ? `(${tagData.childCount})` : null}</span>
+          {tagData.value} <span className="text-secondary-500">{tagData.descendantCount > 0 ? `(${tagData.descendantCount})` : null}</span>
         </li>
       ))}
     </ul>
@@ -48,14 +48,15 @@ OptionalExpandLink.propTypes = DataTable.ExpandRow.propTypes;
 const TagValue = ({ row }) => (
   <>
     <span>{row.original.value}</span>
-    <span className="text-secondary-500">{` (${row.original.childCount})`}</span>
+    <span className="text-secondary-500">{` (${row.original.descendantCount})`}</span>
   </>
 );
 TagValue.propTypes = {
   row: Proptypes.shape({
     original: Proptypes.shape({
       value: Proptypes.string.isRequired,
       childCount: Proptypes.number.isRequired,
+      descendantCount: Proptypes.number.isRequired,
     }).isRequired,
   }).isRequired,
 };

src/taxonomy/tag-list/TagListTable.test.jsx

@@ -3,7 +3,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { render, waitFor } from '@testing-library/react';
+import { render, waitFor, within } from '@testing-library/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import MockAdapter from 'axios-mock-adapter';
 
@@ -35,22 +35,25 @@ const mockTagsResponse = {
   results: [
     {
       ...tagDefaults,
-      value: 'two level tag 1',
+      value: 'root tag 1',
       child_count: 1,
+      descendant_count: 14,
       _id: 1001,
       sub_tags_url: '/request/to/load/subtags/1',
     },
     {
       ...tagDefaults,
-      value: 'two level tag 2',
+      value: 'root tag 2',
       child_count: 1,
+      descendant_count: 10,
       _id: 1002,
       sub_tags_url: '/request/to/load/subtags/2',
     },
     {
       ...tagDefaults,
-      value: 'two level tag 3',
+      value: 'root tag 3',
       child_count: 1,
+      descendant_count: 5,
       _id: 1003,
       sub_tags_url: '/request/to/load/subtags/3',
     },
@@ -75,7 +78,7 @@ const subTagsResponse = {
     },
   ],
 };
-const subTagsUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?full_depth_threshold=10000&parent_tag=two+level+tag+1';
+const subTagsUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?full_depth_threshold=10000&parent_tag=root+tag+1';
 
 describe('<TagListTable />', () => {
   beforeAll(async () => {
@@ -112,10 +115,12 @@ describe('<TagListTable />', () => {
     axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
     const result = render(<RootWrapper />);
     await waitFor(() => {
-      expect(result.getByText('two level tag 1')).toBeInTheDocument();
+      expect(result.getByText('root tag 1')).toBeInTheDocument();
     });
     const rows = result.getAllByRole('row');
     expect(rows.length).toBe(3 + 1); // 3 items plus header
+    expect(within(rows[0]).getAllByRole('columnheader')[0].textContent).toEqual('Tag name');
+    expect(within(rows[1]).getAllByRole('cell')[0].textContent).toEqual('root tag 1 (14)');
   });
 
   it('should render page correctly with subtags', async () => {

src/taxonomy/tag-list/data/types.mjs

@@ -12,6 +12,7 @@
 /**
  * @typedef {Object} TagData
  * @property {number} childCount
+ * @property {number} descendantCount
  * @property {number} depth
  * @property {string} externalId
  * @property {number} id