Repository navigation
[FE] Display Competency ID on the Competency Management page #680
Description
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.
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 stringundefinedcan 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/competencieswith 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 |
Activity
[-][Placeholder for FE] Display Competency ID on the Competency Management page[/-][+][FE] Display Competency ID on the Competency Management page[/+]bradenmacdonald commentedon Aug 4, 2026
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)
bradenmacdonald commentedon Aug 4, 2026
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" ?
arbrandes commentedon Aug 5, 2026
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.
jmakowski1123 commentedon Aug 7, 2026
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.
thelmick-unicon commentedon Aug 10, 2026
@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.
30 remaining items
dvarenikqaconsultant commentedon Sep 15, 2026
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
TC-680-03: Expand All / Collapse All
Steps: on taxonomy
test2, click "Expand All", confirm the whole tree unfolds down to itsdeepest 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.
dvarenikqaconsultant commentedon Sep 15, 2026
@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.