[FE] Display Competency ID on the Competency Management page

Repo: frontend-app-authoring (Studio MFE).

Build a new read-only page in Studio that shows one competency taxonomy's competencies as
an expand/collapse tree, with each competency's Competency ID next to it.

Use Case

As a Platform Administrator, I want to open the Competency Management page for a competency
taxonomy and see its competencies in an expand/collapse (accordion) tree, each with its
Competency ID, so that I can browse and reference the taxonomy's competencies by their
stable IDs as the starting point for applying competency criteria.

Acceptance Criteria

Frontend/QA-testable.

Scenario: The page renders the taxonomy's competencies as a tree
  Given a competency taxonomy with nested competencies
  When a Platform Administrator opens its Competency Management page
  Then the page shows the taxonomy's competencies as a nested tree (root, groups, sub-competencies)

Scenario: The tree opens with the taxonomy's top-level competencies visible
  Given a competency taxonomy with nested competencies
  When a Platform Administrator opens its Competency Management page
  Then the taxonomy root row is expanded, showing its top-level competencies
  And nodes below the top level are collapsed

Scenario: Accordion expand/collapse
  Given the competency tree is displayed
  When the user collapses or expands a node (or uses Expand All / Collapse All)
  Then the node's children hide or show accordingly, with tree indentation intact

Scenario: Competency ID is shown at every level and matches the source data
  Given competencies with external_id values
  When the tree is displayed
  Then each competency row shows its own Competency ID (external_id), on group and leaf nodes alike
  And each displayed ID equals that tag's external_id

Scenario: Competency without an ID
  Given a competency whose external_id is empty or absent
  When the page loads
  Then that row shows no ID
  And no other competency's ID is shown

Scenario: Read-only
  Given a user viewing the page
  Then the Competency Name and ID are read-only and there is no editing on the page

Scenario: Small-screen / responsive
  Given the page at a narrow viewport
  Then the tree and each competency's ID remain readable and correctly associated, and the layout does not break

Description

Current state

There is no Competency Management page and no /taxonomy/:taxonomyId/competencies route in
the MFE.

Requested change

Create the page and its route, and render on it:

The taxonomy's competencies as a nested expand/collapse tree (taxonomy root → groups →
sub-competencies), including Expand All / Collapse All, reusing the existing tag
tree-table rendering.
Each competency's Competency ID next to its row, at every level of the tree, read-only.

Explicitly out of scope

Editing the Competency ID.
Any backend, API, or data-layer change.
Sorting, filtering, or reordering competencies by ID.

Figma Link

Technical Details

Data Structures

Nothing new. A tree row is already a TagTreeNode, which extends TagData and therefore
already carries externalId (the Competency ID) at every level of the tree.

Logic

The page reads the taxonomy id from its route, fetches that taxonomy's tags with the
existing useTagListData hook, and renders them with the existing tag tree-table, which
already provides the nesting and the accordion behavior. Adding the Competency ID is then a
display concern only: render each row's externalId in its own column, styled per the
Figma design.

Four decisions to respect:

Read-only. Strip the tag-CRUD affordances the existing tree-table offers. This page
never edits.
Empty Competency ID renders as nothing. Many tags legitimately have no external_id.
Handle that at the cell boundary so the string undefined can never reach the DOM.
Default expand state. The root row starts expanded, so the taxonomy's top-level
competencies are visible on load; nodes below the top level start collapsed. Set this
explicitly rather than inheriting the tree-table's default, which is fully collapsed. On the
Taxonomy Detail page that default is reasonable because top-level tags are already visible,
but here the collapsed node is the taxonomy root itself, so a first-time visitor would see one
row, the taxonomy's own name, and no competencies at all until they click.
Route ownership. [FE] Add "Apply Competencies" entry point to the taxonomy card menu and footer, with a placeholder Competency Management page #663 also registers /taxonomy/:taxonomyId/competencies with a
placeholder page, but it is sequenced later, so plan on creating the route here. If [FE] Add "Apply Competencies" entry point to the taxonomy card menu and footer, with a placeholder Competency Management page #663
has landed first, reuse its route and replace the placeholder page instead.

Files to create and modify

New files

File	Purpose
`src/taxonomy/competency-management/CompetencyManagementPage.tsx`	The page: fetch the taxonomy's tags and render the competency tree
`src/taxonomy/competency-management/CompetencyTree.tsx`	(optional) the tree itself, if cleaner than inlining it in the page
`src/taxonomy/competency-management/messages.ts`	i18n strings
`src/taxonomy/competency-management/index.ts`	Public interface for the feature folder
co-located RTL tests	Cover the behavior listed in Technical Details

Modified files

File	Nature of modification
`src/index.jsx`	Register `/taxonomy/:taxonomyId/competencies` → `CompetencyManagementPage`, as a sibling of `/taxonomy/:taxonomyId` under the `TaxonomyLayout` route

If we don't have #618 , we can't yet distinguish taxonomy types so I'm assuming this will work with all taxonomies for now? (Not just "competency"-type taxonomies)

The Figma design shows "All Competencies" in the breadcrumbs, but the issue description says that this page will (eventually) be accessed from the "Taxonomies" page, so shouldn't the previous breadcrumb be "All Taxonomies" ?

It seems #618 should be a blocker, here, indeed.

Otherwise, I don't know if I like having the LLM plan as the issue description. It's far too verbose. Let's discuss this in the next meeting, but I think issue descriptions should be for humans, and be very light in implementation details.

Echo the same sentiment, I am also getting a bit lost in this description. Is the ask to simply add/render the blue pill with the competency id next to each competency tag?

If so, can this ticket be simplified?

And the other comment I have is about aligning the taxonomy tree to paragon as much as possible. Which I commented on more broadly here.

@jmakowski1123

@jmakowski1123 I've trimmed a lot of the ticket text that seemed unnecessary. This ticket is a bit more than just rendering the blue pill. This ticket covers building the page, creating the route if #663 hasn't created it yet, rendering the collapsible taxonomy tree view, and adding the blue pill with the competency ID.

feat: add Competency Tree on the Competency Management page (#3218)

Environment: The Master Sandbox, https://apps.master.openedx.io/authoring/taxonomies/
Test user: dmitryvarenikqa (staff)
Taxonomies used: Test (id 1), test2 (id 2), Lightcast (id 5), Issue 758 w/o IDs (id 3),
test3 (id 6), test4 (id 7), Test6 (id 11)
Overall result: All test cases pass. One responsive-layout note was found
(TC-680-08); per current requirements, responsive support for this page is a nice-to-have
rather than a required acceptance criterion, so it does not block sign-off.

Results

Test case	Scenario	Result
TC-680-01	The page renders the taxonomy's competencies as a tree	Pass
TC-680-02	The tree opens with the taxonomy's top-level competencies visible	Pass
TC-680-03	Accordion expand/collapse	Pass
TC-680-04	Competency ID is shown at every level and matches the source data	Pass
TC-680-05	Competency without an ID	Pass
TC-680-07	Read-only	Pass
TC-680-08	Small-screen / responsive	Pass, with a note
TC-680-09	Deep nesting: a tag chain 6 levels deep	Pass

TC-680-03: Expand All / Collapse All

Steps: on taxonomy test2, click "Expand All", confirm the whole tree unfolds down to its
deepest level, then click the same button again (now labeled "Collapse All").

Observed: after Expand All, every node is expanded, down to the deepest level, and the
button label reads "Collapse All". After clicking it again, every node collapses,
including the root row itself, leaving only the taxonomy's own name on screen, and the
button label returns to "Expand All". The requirements do not single out the root row as
an exception, so Collapse All is expected to collapse every node uniformly, root included.
Pass.

TC-680-08: Narrow screen / responsive

At browser widths down to 500px, the tree renders correctly on every taxonomy checked, including one with an intentionally long Competency ID (COMP-002-A1234567890123456789, taxonomy Test6): the tree and every Competency ID stay readable, correctly associated with their row, and within the visible area.

Note: at the extreme low end (320px), the same long-ID badge extends past its row and the tree's outer container by roughly 96px, measured via getBoundingClientRect(). The tree itself keeps rendering, and the ID stays attached to and readable next to its own row, so the page does not break in the sense the acceptance criteria describe. This is recorded as a note rather than a blocking gap, since responsive support for this page is a nice-to-have, not a required acceptance criterion, per current requirements.

@AShatsila

@AShatsila Hello. Please, take a look here. The tag string should have a hover, @illiphilli left a comment in Figma https://www.figma.com/design/VhAdaucNQS49x0Afp9xPZw/Competency-Application?node-id=0-1#1886091068.

Navigation Menu

Repository navigation

[FE] Display Competency ID on the Competency Management page #680

Use Case

Acceptance Criteria

Description

Files to create and modify

27 remaining items

Results

TC-680-03: Expand All / Collapse All

TC-680-08: Narrow screen / responsive

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[FE] Display Competency ID on the Competency Management page #680

Description

Use Case

Acceptance Criteria

Description

Files to create and modify

Activity

bradenmacdonald commented on Aug 4, 2026

bradenmacdonald commented on Aug 4, 2026

arbrandes commented on Aug 5, 2026

jmakowski1123 commented on Aug 7, 2026

thelmick-unicon commented on Aug 10, 2026

27 remaining items

dvarenikqaconsultant commented on Sep 15, 2026

Results

TC-680-03: Expand All / Collapse All

TC-680-08: Narrow screen / responsive

dvarenikqaconsultant commented on Sep 15, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions