Jhodge/create tags

[jesperhodge]

Description

This implements openedx/modular-learning#132, but excludes some of the ACs. Please refer to the following list to test the parts that have been implemented but don't expect the parts that are listed as not yet implemented - they will be done as a followup subtask or later.

Note that the table has been entirely re-created and doesn't use the Paragon table anymore, so the basic table functionality must work really well and needs to meet accessibility standards. However, I'm working on accessibility now, don't expect anything until this PR is out of draft.

Notes about early review and draft stage

• Don't expect the tests to work, I still need to fix them.
• Tests are a mess readability-wise - working on refactoring that, no need to review that.
• I have not done accessibility testing yet. So I wouldn't review accessibility now, and wait with that until this is out of draft stage.
• Toasts look wrong now, will be fixed, don't worry about it

Implemented

• Basic table functionality
• Expanding rows
• Creating tags
• Creating subtags
• After successfully saving new tags, there is an internal "Preview" mode that displays changes to the table in-place without refreshing and resorting data in the backend

Not implemented - will not be part of this PR (some of this I'll do as a quick follow PR or subtask)

• Fix pagination
• Disabling buttons
• Validate while typing
• Column sorting
• Displaying or adding external_id

Supporting information

Ticket: openedx/modular-learning#132 including ACs
Figma: https://www.figma.com/design/yE6wmSFnokNM4FG1naasly/Content-Tagging-MVP?node-id=1221-84140&t=iIWCk9vLq0IcXmAk-0

Testing instructions

• should follow figma
• Add Taxonomy (go to /authoring/home -> export taxonomy template -> import same file)
• Go to taxonomy details
• Click "+" to add top-level tag
• Tag should appear at the top, not in alphabetical order
• Test cancel, save
• click on three dot menu on the row of the tag just created
• add a subtag
• click on three dot menu of the subtag
• add a subtag nested on second level
• test expand / collapse on the new rows
• Refresh
• tag should now be sorted alphabetical (table has refreshed)
• Expand / Collapse all rows via expand all button
• Rows with children should have a three-dot-menu, ability to add a subtag, and an expand button
• Rows without children should not have the expand button
• nested rows 1 level deep should have three-dot-menu, ability to add subtag, and if they have children, also an expand button
• nested rows 2 levels deep should have no menu, no ability to add subtag, and no expand button
• try to save an empty or white-space only tag -> should show error message
• try to save a tag with invalid characters like "<>" -> should show error message
• cause a server error when saving a tag (for example, save a tag, go to chrome dev tools, block the request, try to save another tag, request will be blocked) -> should show an error banner
• in error cases no new tag should appear

Other information

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

• Does this change depend on other changes elsewhere?
• Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.

[jesperhodge]

@mgwozdz-unicon I fixed the tests. They still need refactoring, they are messy; but that should not block this from going into QA.

[Copilot]

Pull request overview

This PR replaces the legacy Paragon DataTable-based taxonomy tag list with a custom TanStack react-table “tree table” to support expanding rows and creating tags/subtags with an in-place “preview” update mode.

Changes:

• Introduces a new src/taxonomy/tree-table/ component set (TableView, body/row rendering, editable/create row UX).
• Rebuilds tag list UI around a TagTree utility + new table columns/actions to create tags/subtags and preview changes without refetching.
• Updates taxonomy tag list API usage (adds full_depth_threshold) and adds a create-tag mutation hook.

Reviewed changes

Copilot reviewed 27 out of 28 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
src/taxonomy/tree-table/types.ts	Adds shared table/type definitions for tree rows, columns, and UI state.
src/taxonomy/tree-table/messages.ts	Adds i18n messages for the new tree table UI.
src/taxonomy/tree-table/index.ts	Exports new tree-table components.
src/taxonomy/tree-table/TableView.tsx	Implements the table shell (headers, expand all, pagination, toast, error banner).
src/taxonomy/tree-table/TableView.scss	Adds layout/indent helpers for nested rows.
src/taxonomy/tree-table/TableBody.tsx	Renders root rows, loading/empty states, and delegates nested rendering.
src/taxonomy/tree-table/NestedRows.tsx	Recursively renders expanded child rows and inline “create subtag” row.
src/taxonomy/tree-table/EditableCell.tsx	Adds an inline editable input with validation display.
src/taxonomy/tree-table/CreateRow.tsx	Adds the inline “create row” UX (input + cancel/save + spinner).
src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx	Passes maxDepth into the tag list table.
src/taxonomy/tag-list/tagTreeError.ts	Adds a custom error type for tag tree integrity errors.
src/taxonomy/tag-list/tagTree.ts	Implements a tree builder/editor to support preview-mode updates.
src/taxonomy/tag-list/tagTree.test.ts	Adds unit tests for TagTree behavior and integrity validation.
src/taxonomy/tag-list/tagColumns.tsx	Defines table columns including action menus for creating tags/subtags.
src/taxonomy/tag-list/mockData.ts	Adds large mock datasets for TagTree tests.
src/taxonomy/tag-list/messages.ts	Adds messages for creation success/error, validation, and expand labels.
src/taxonomy/tag-list/hooks.ts	Introduces table mode state machine + create/update actions wiring.
src/taxonomy/tag-list/constants.ts	Adds table mode constants and tag name validation regex.
src/taxonomy/tag-list/TagListTable.tsx	New TanStack-based TagListTable implementation integrating API/hooks/table.
src/taxonomy/tag-list/TagListTable.test.jsx	Updates and greatly expands UI tests for the new table behaviors.
src/taxonomy/tag-list/TagListTable.scss	Updates styling (e.g., alternating row background).
src/taxonomy/tag-list/TagListTable.jsx	Removes the old Paragon DataTable implementation.
src/taxonomy/tag-list/OptionalExpandLink.tsx	New expand/collapse control matching TanStack row expansion.
src/taxonomy/data/types.ts	Extends query options with an enabled flag for conditional fetching.
src/taxonomy/data/apiHooks.ts	Updates tag list query (depth param + enabled) and adds create-tag mutation hook.
src/taxonomy/data/api.ts	Extends tag list URL builder (full depth threshold) and adds create-tag URL.
package.json	Adds @tanstack/react-table dependency.
package-lock.json	Locks new TanStack table dependencies.

---

💡 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.

[mgwozdz-unicon]

Why is this one skipped?