[FE] Display Competency ID on the Competency Management page

[thelmick-unicon]

[FE] Build the Competency Management page: competency tree with Competency IDs

Subtasks:

• [FE] Add "Apply Competencies" entry point to the taxonomy card menu and footer, with a placeholder Competency Management page #663 — the "Apply Competencies" entry-point (taxonomy card menu item + card-footer button) that navigates to this page. Sequenced after this page build: it is blocked by [BE] Implement CBE core data models (CompetencyTaxonomy, criteria, learner status) #613 and downstream backend work, whereas this page can be built and reached by its route independently.
• [Placeholder for FE] Import Competency Framework button on the Competency Management page #706 — the "Import Competency Framework" button on this page (its own ticket; launches the import workflow with Taxonomy Type defaulted to Competency). Out of this ticket's direct build scope.
• [FE] Guard the Competency Management route by taxonomy type (redirect non-Competency taxonomies) #707 — the frontend taxonomy-type guard on this route: check the taxonomy type, render this page if it is a Competency taxonomy, otherwise redirect the user to where they can view that taxonomy. Keeps the non-competency case out of this ticket so [FE] Display Competency ID on the Competency Management page #680 stays the competency-taxonomy render.

This ticket creates the page. The route /taxonomy/:taxonomyId/competencies and the Competency Management page component do not exist yet, so #680 creates both. There is no backend, API, or data-layer work: the backend already returns the Competency ID (external_id) and the MFE data layer already carries it (see Current state).

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.

Description

Current state

No Competency Management page exists yet: there is no /taxonomy/:taxonomyId/competencies route or page component in the code. This ticket creates both. The Competency ID is a tag's external_id (ADR 0010, PR #637; a competency is a Tag in a competency taxonomy). The backend already returns it (the taxonomy-tags GET returns each tag's external_id; that task was closed as already-satisfied), and the MFE data layer already carries it end-to-end: TagData.externalId (src/taxonomy/data/types.ts), populated by camelCaseObject in useTagListData (src/taxonomy/data/apiHooks.ts), preserved onto nested tree rows by TagTree (src/taxonomy/tag-list/tagTree.ts). Studio's existing taxonomy detail page already renders a taxonomy's tags as an expand/collapse tree table (TagListTable over tree-table/NestedRows), but that is the tag-editing surface, not this competency-scoped page.

Requested change

Build the Competency Management page's content:

1. Render the selected competency taxonomy's competencies as an accordion tree — the taxonomy's tags as nested rows (taxonomy root → groups → sub-competencies) with expand/collapse (including Expand All / Collapse All), reusing the existing tag tree-table rendering.
2. Show each competency's Competency ID (external_id) alongside its row, at every level of the tree (group nodes and leaf competencies each show their own ID). Read-only.
3. Empty-ID treatment — when a competency's external_id is empty (common for manually created tags), show the defined empty treatment, never undefined.
4. Create the page and its route /taxonomy/:taxonomyId/competencies (neither exists yet). The entry-point button that navigates here is subtask [FE] Add "Apply Competencies" entry point to the taxonomy card menu and footer, with a placeholder Competency Management page #663.

Figma Link

Explicitly out of scope

• Editing the Competency ID — editing external_id is import-based; this page shows it read-only, no editing.
• Any backend, API, or data-layer change — external_id is already returned and already carried by TagData.externalId.
• The criteria-groups and association interactions that also live on this page — those are [Placeholder for FE] Build the create / remove Competency Criteria Group interactions #671 (groups) and [Placeholder for FE] Build the select / deselect gradeable-subsection association interactions #672 (associations); they build on this page once it exists.
• The rule-profile defaults management (that lives on the taxonomy editing page, [Placeholder for UXD] Build UX for Competency Rule Profiles #646).
• The "Import Competency Framework" button ([Placeholder for FE] Import Competency Framework button on the Competency Management page #706, a separate subtask).
• The taxonomy-type guard/redirect for a non-Competency taxonomy at this route ([FE] Guard the Competency Management route by taxonomy type (redirect non-Competency taxonomies) #707) — this ticket renders the competency case; the type check and redirect are [FE] Guard the Competency Management route by taxonomy type (redirect non-Competency taxonomies) #707.
• Sorting / filtering / reordering competencies by ID.

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: 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

Technical Notes

Files to Create

File	Purpose
src/taxonomy/competency-management/CompetencyManagementPage.tsx	The Competency Management page: fetch the taxonomy's tags via useTagListData and render the competency tree with read-only Competency IDs.
src/taxonomy/competency-management/CompetencyTree.tsx	(optional, if cleaner than inlining) the competency accordion tree, reusing TagTree/tree-table recursion.
src/taxonomy/competency-management/messages.ts	i18n (page/tree labels, Expand/Collapse All, an aria-label for the Competency ID).
src/taxonomy/competency-management/index.ts	Public interface for the feature folder.
co-located RTL tests	tree renders with expand/collapse; Competency ID at every level matching source; empty-ID handling; read-only.

Files to Modify

File	Nature
the taxonomy route config (where taxonomy routes are registered)	Register the /taxonomy/:taxonomyId/competencies route → CompetencyManagementPage. Confirm the exact router file.

Implementation Notes

Fetch the taxonomy's tags with useTagListData(taxonomyId) (the taxonomy id comes from the /taxonomy/:taxonomyId/competencies route). Render them as a nested expand/collapse tree by reusing the existing tag tree-table (src/taxonomy/tag-list/ over src/taxonomy/tree-table/NestedRows), which already provides the accordion behavior; strip the tag-CRUD affordances since this competency view is read-only. external_id is already on each tree row (TagData.externalId, preserved by TagTree), so the Competency ID is purely rendering: show row.externalId on each competency row (a right-aligned code pill per the design), handling empty at the cell boundary (render nothing / a muted placeholder, never undefined). This ticket renders the competency-taxonomy case; the type check and redirect for a non-Competency taxonomy at this route are #707. No backend, API, or data-layer change; no ADR. The entry-point button that navigates here is subtask #663, sequenced later (blocked by #613 and downstream backend work) — this page is reachable by its route without it.

Example Resolution Prompt

In frontend-app-authoring, create the Competency Management page (src/taxonomy/competency-management/CompetencyManagementPage.tsx) and register its route /taxonomy/:taxonomyId/competencies (neither exists yet — #623 was closed as a duplicate of #663 and created neither). Fetch the taxonomy's tags with useTagListData(taxonomyId) (src/taxonomy/data/apiHooks.ts) and render them as a nested expand/collapse (accordion) tree, reusing the existing tag tree-table (src/taxonomy/tag-list/ over src/taxonomy/tree-table/NestedRows) with its tag-CRUD affordances stripped for this read-only, competency-scoped view. On each competency row — group and leaf — render its Competency ID (external_id) read-only as a right-aligned code pill matching the signed-off design; external_id is already present on each row via TagData.externalId (src/taxonomy/data/types.ts), preserved onto tree rows by TagTree (src/taxonomy/tag-list/tagTree.ts), so this is display-only with no data-layer or backend change. Handle empty external_id at the cell boundary (render nothing or a muted placeholder, never undefined). No edit affordance (editing the ID is import-based, ticket 4.4). Add RTL tests: tree renders with working expand/collapse, Competency ID appears at every level and equals the tag's external_id, empty-ID rows handled, the view is read-only. The entry-point button that reaches this page is subtask #663 (sequenced later, blocked by #613 and backend work); this page is reachable by its route independently.