Tbain/253 add tags count

[tbain]

Description

This implements openedx/modular-learning#253 , the task to add tag usage counts to the tags table under the taxonomies table. The corresponding backend piece is where the aggregation work is done will be in a seperate PR to openedx-core. There are some UX changes that differ from the figmas; namely the figmas show a Cyan/Teal bubble body with black text. The Paragon element we're using does not support this color per se without having to customize it, so were going ahead with using the standard "primary" variant of the bubble tag to keep with Paragon standards, and also this provides better color contrast in support of visual accessibility.

Supporting information

Github issue with AC: openedx/modular-learning#253
Paragon Bubble Tag element used to implement this feature: https://paragon-openedx.netlify.app/components/bubble
Figma Mockup(s): https://www.figma.com/design/yE6wmSFnokNM4FG1naasly/Content-Tagging-MVP?node-id=40000158-73422&t=mL0Gi7JcDX2CL2NM-0

Testing instructions

Refer to the AC in the Github Issue as well as reference the Figma mockups for look and feel guidance.

1. Navigate to the "Studio home" page
2. Navigate into an existing Course (or create a course and navigate into it)
3. In the "Course Outline" page, add tags from an existing taxonomy to the course, module, or section
4. Navigate back to the "Studio home" page
5. Click the "Taxonomies" tab to navigate to the Taxonomies page
6. Navigate into the Taxonomy that corresponds to the tag you added in step 3
7. Observe that, if a tag is used, there is now an additional column on the table named "Usage Count" that is populated with bubbles that display the count of tags usages, if applicable
8. Ensure that the tag you added in Step 3 properly associates the incremented count from its usage

Other information

Include anything else that will help reviewers and consumers understand the change.

• Does this change depend on other changes elsewhere?
  • this ticket is backwards compatible with the current implementation in openedx-core, however the original count methodology does not aggregate the counts as build(deps): bump follow-redirects from 1.14.4 to 1.14.8 openedx/frontend-app-authoring#253 specifies, so the counts will not be accurate according to that AC
• Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
  • none at this time, accessibility concerns have been considered; the visual style of the buttons meets WCAG AAA contrast compliance, and verified that screenreaders (MacOs/Voiceover) work correctly with the new data that is displayed.

[Copilot]

Pull request overview

Adds tag usage counts to the Taxonomy tag list table UI by requesting count data from the tags API and rendering it as an additional table column.

Changes:

• Add a new “Usage Count” column to the tag list table and render non-zero counts in a Paragon <Bubble>.
• Update tag list API URL generation to request count fields (include_counts=true).
• Update tag list table mocks to include usage_count in test responses.

Reviewed changes

Copilot reviewed 4 out of 5 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/taxonomy/tree-table/reactTableMeta.d.ts	Adds a global @tanstack/react-table TableMeta module augmentation for table meta helpers.
src/taxonomy/tag-list/tagColumns.tsx	Introduces the new “Usage Count” column and bubble-based cell renderer.
src/taxonomy/tag-list/messages.ts	Adds i18n message for the new column header.
src/taxonomy/tag-list/TagListTable.test.jsx	Updates mocked API payloads to include usage_count values.
src/taxonomy/data/api.ts	Appends include_counts=true to tag list URL generation (non-paginated branch).

Comments suppressed due to low confidence (1)

src/taxonomy/data/api.ts:70

• include_counts is only added when pageIndex === null. If/when the paginated branch is used, usage counts will silently disappear because the query param isn’t included. Consider adding include_counts to the paginated makeUrl call as well so both code paths return consistent data.

  tagList: (taxonomyId: number, pageIndex: number | null, pageSize: number | null, fullDepthThreshold?: number) => {
    if (pageIndex === null) {
      return makeUrl(`${taxonomyId}/tags/`, { full_depth_threshold: fullDepthThreshold || 0, include_counts: 'true' });
    }
    return makeUrl(`${taxonomyId}/tags/`, {
      page: (pageIndex ?? 0) + 1,
      page_size: pageSize ?? 10,
      full_depth_threshold: fullDepthThreshold || 0,
    });

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

TagListRowData declares usageCount as required, but the underlying TagData/TagTreeNode types mark usageCount as optional. Since this file casts row.original into TagListRowData, the required type can hide missing data and makes the ?? 0 fallback look redundant. Consider making usageCount optional here (or aligning the types) so the UI fallback is accurately reflected in the type system.

Suggested change

	usageCount: number;
	usageCount?: number;

[Copilot]

UsageCountDisplay formatting is inconsistent with the surrounding TypeScript code (indentation and missing semicolons). Please reformat to match the file’s style so linting/formatters don’t produce noisy diffs later.

Suggested change

	const count = asTagListRowData(row).usageCount ?? 0
	return (count > 0 && <Bubble expandable={true}>
	{count}
	</Bubble>)
	const count = asTagListRowData(row).usageCount ?? 0;
	return (
	count > 0 && (
	<Bubble expandable>
	{count}
	</Bubble>
	)
	);

[Copilot]

There are a couple of extra blank lines added between the imports and getApiBaseUrl that don’t appear to serve a purpose and may trip linting/style checks. Please remove the unnecessary empty lines.

Suggested change

[jesperhodge]

Looks great to me! I figured out why the table doesn't show the updated tag count right away, see my comment.
Great work

[jesperhodge]

There's 2 problems with commit lint - one going back to my changes, one new.
This requires changing branch history.
@tbain I fixed this on my original branch - since I can just repeat the steps, please just ping me and I can fix it here too

[jesperhodge]

Looks great, please just delete this one file and ping me for the commit history fix, then I'll approve

[jesperhodge]

Please just remove the file and push. For some reason my own deletion was not registered in git, apparently.

[jesperhodge]

👆