feat: display all child tags in the "bare bones" taxonomy detail page

src/generic/Loading.jsx

@@ -2,27 +2,30 @@ import React from 'react';
 import { Spinner } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
+
+export const LoadingSpinner = () => (
+  <Spinner
+    animation="border"
+    role="status"
+    variant="primary"
+    screenReaderText={(
+      <FormattedMessage
+        id="authoring.loading"
+        defaultMessage="Loading..."
+        description="Screen-reader message for when a page is loading."
+      />
+    )}
+  />
+);
+
 const Loading = () => (
   <div
     className="d-flex justify-content-center align-items-center flex-column"
     style={{
       height: '100vh',
     }}
   >
-    <Spinner
-      animation="border"
-      role="status"
-      variant="primary"
-      screenReaderText={(
-        <span className="sr-only">
-          <FormattedMessage
-            id="authoring.loading"
-            defaultMessage="Loading..."
-            description="Screen-reader message for when a page is loading."
-          />
-        </span>
-      )}
-    />
+    <LoadingSpinner />
   </div>
 );
 

src/taxonomy/tag-list/TagListTable.jsx

@@ -1,14 +1,38 @@
 // ts-check
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  DataTable,
-} from '@edx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@edx/paragon';
 import _ from 'lodash';
 import Proptypes from 'prop-types';
 import { useState } from 'react';
 
+import { LoadingSpinner } from '../../generic/Loading';
 import messages from './messages';
 import { useTagListDataResponse, useTagListDataStatus } from './data/apiHooks';
+import { useSubTags } from './data/api';
+
+const SubTagsExpanded = ({ taxonomyId, parentTagValue }) => {
+
+  const subTagsData = useSubTags(taxonomyId, parentTagValue);
+
+  if (subTagsData.isLoading) {
+    return <LoadingSpinner />;
+  } else if (subTagsData.isError) {
+    return <FormattedMessage {...messages.tagListError} />
+  }
+
+  return <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-light-900">{tagData.childCount > 0 ? `(${tagData.childCount})` : null}</span>
+      </li>
+    )}
+  </ul>;
+};
+
+SubTagsExpanded.propTypes = {
+  taxonomyId: Proptypes.number.isRequired,
+  parentTagValue: Proptypes.string.isRequired,
+};
 
 const TagListTable = ({ taxonomyId }) => {
   const intl = useIntl();
@@ -46,11 +70,24 @@ const TagListTable = ({ taxonomyId }) => {
       itemCount={tagList?.count || 0}
       pageCount={tagList?.numPages || 0}
       initialState={options}
+      isExpandable
+      // This is a temporary "bare bones" solution for brute-force loading all the child tags. In future we'll match
+      // the Figma design and do something more sophisticated.
+      renderRowSubComponent={({ row }) => <SubTagsExpanded taxonomyId={taxonomyId} parentTagValue={row.values.value} />}
       columns={[
         {
           Header: intl.formatMessage(messages.tagListColumnValueHeader),
           accessor: 'value',
         },
+        {
+          id: 'expander',
+          Header: DataTable.ExpandAll,
+          Cell: ({row}) => row.values.childCount > 0 ? <DataTable.ExpandRow row={row} /> : null,
+        },
+        {
+          Header: intl.formatMessage(messages.tagListColumnChildCountHeader),
+          accessor: 'childCount',
+        },
       ]}
     >
       <DataTable.TableControlBar />
@@ -62,7 +99,7 @@ const TagListTable = ({ taxonomyId }) => {
 };
 
 TagListTable.propTypes = {
-  taxonomyId: Proptypes.string.isRequired,
+  taxonomyId: Proptypes.number.isRequired,
 };
 
 export default TagListTable;

src/taxonomy/tag-list/data/api.js

@@ -24,3 +24,21 @@ export const useTagListData = (taxonomyId, options) => {
       .then(camelCaseObject),
   });
 };
+
+/**
+ * @param {number} taxonomyId
+ * @param {string} parentTagValue
+ * @returns {import('@tanstack/react-query').UseQueryResult<import('./types.mjs').TagData>}
+ */
+export const useSubTags = (taxonomyId, parentTagValue) => {
+  return useQuery({
+    queryKey: ['subtagsList', taxonomyId, parentTagValue],
+    queryFn: async () => {
+      const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl());
+      url.searchParams.set("full_depth_threshold", "10000");  // Load as deeply as we can
+      url.searchParams.set("parent_tag", parentTagValue);
+      const response = await getAuthenticatedHttpClient().get(url.href);
+      return camelCaseObject(response.data);
+    },
+  });
+};

src/taxonomy/tag-list/messages.js

@@ -9,6 +9,14 @@ const messages = defineMessages({
     id: 'course-authoring.tag-list.column.value.header',
     defaultMessage: 'Value',
   },
+  tagListColumnChildCountHeader: {
+    id: 'course-authoring.tag-list.column.value.header',
+    defaultMessage: '# child tags',
+  },
+  tagListError: {
+    id: 'course-authoring.tag-list.error',
+    defaultMessage: 'Error: unable to load child tags',
+  },
 });
 
 export default messages;

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx

@@ -20,7 +20,8 @@ import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from './da
 
 const TaxonomyDetailPage = () => {
   const intl = useIntl();
-  const { taxonomyId } = useParams();
+  const { taxonomyId: taxonomyIdString } = useParams();
+  const taxonomyId = Number(taxonomyIdString);
 
   const useTaxonomyDetailData = () => {
     const { isError, isFetched } = useTaxonomyDetailDataStatus(taxonomyId);