Description

Wires the "Manage & Apply Competencies" page up so a course author can see a competency's existing criteria associations and create new ones. Selecting a leaf competency in the left-hand tree populates a new "Competency Criteria Associations" block above the existing course-search panel: each course that already has an association renders as a card ("From within {course name} ..."), holding one or more bottom-tier groups ("By completing any/all of the following"), each holding one or more rule boxes ("With a score of X% or higher") and the chips already associated with it. Below that, in the existing "Courses & Content" panel, every gradable subsection now shows whether it's already associated with the active competency and, where the signed-in author has tagging permission for that course, a control to associate it — clicking it adds the subsection as a criterion under whichever group/rule box currently has focus.

This builds on the course-search/browse panel from openedx-core#670 (merged as #3235) and the competency tree from openedx-core#680 (merged as #3218).

• New "Competency Criteria Associations" block (criteria-groups/): four states (loading, failed, empty, content), each course-level group's name and its subsections' names resolved from the same useCourseOutlineIndex call the content panel below already uses — so a course the author can't actually read never renders a group for it at all, not even with a placeholder name, and a competency whose only associations are in such courses shows the same empty state as one with no associations at all.
• Focus mechanics: exactly one bottom-tier group, and within it exactly one rule box, is "in focus" at a time — it's what the next subsection click targets. Clicking a group or rule box moves focus; expanding a course that already has a group for this competency moves focus there automatically; a single group/rule box is focused automatically with nothing to click. Switching between two competencies resets focus, but deliberately does not reset the course-search panel's own search/filter state (that's still #670's, and remains untouched here).
• Competency selection is leaf-only again. #670's PR made every row (leaf or group) selectable; this PR restores the original leaf-only design (a group's own children roll up to it for mastery, so a group is never itself a direct association target) — a group row keeps its expand/collapse chevron but is no longer clickable/selectable.
• New authz permission: courses.manage_tags, added to COURSE_PERMISSIONS, gates the subsection select control per course (an already-associated subsection is still marked even where the control is withheld). This mirrors the same oel_tagging.can_tag_object course-authz check the (not-yet-merged) create endpoint enforces server-side; see Other information for the coordination this needs.

Supporting information

• Closes [FE] Manage & Apply Competencies: select gradeable-subsection associations and target a competency's active group openedx-core#672
• Builds on: [FE] Build the competency-selection tree, Course Search, and gradeable-subsection browse UI for Competency Criteria Associations openedx-core#670 (merged as feat competency-selection tree, Course Search, and gradeable-subsection browse UI for Competency Criteria Associations #3235); [FE] Display Competency ID on the Competency Management page openedx-core#680 (merged as feat: add Competency Tree on the Competency Management page #3218).
• Blocked by, none yet shipped: [BE] Build endpoint for creating Competency Criteria openedx-core#665 (only its own prerequisite, openedx-platform#39112, is up so far); [BE] Enforce competency-hierarchy dominance openedx-core#666; [BE] Build GET endpoint to fetch Competency Criteria Groups and Criteria openedx-core#681; [BE] Read the rule profiles an instance defines openedx-core#773 (open PR, not yet merged: javoconsultant/openedx-core#9).

Testing instructions

None of the four backend endpoints this PR depends on are deployed anywhere yet, so there's no way to exercise the full create-a-criterion flow against a live backend today. What you can verify:

1. Enable the ENABLE_TAGGING_TAXONOMY_PAGES feature flag.
2. Have (or create) a competency taxonomy with a nested tag tree at least 2 levels deep, with external_ids set on some tags.
3. As a course author, navigate to /taxonomy/:taxonomyId/competencies.
4. Confirm a group row (one with children) is no longer clickable/selectable — only its own expand/collapse chevron responds — while a leaf row still selects normally. This is the one behavior change from [ROLES-26] Helper function for ingesting permission data #670's already-merged version.
5. Select a leaf competency and confirm the new "Competency Criteria Associations" block appears above "Courses & Content", and — since the backend endpoints 404 — shows its inline failed-to-load state rather than a blank panel or a state that looks like "no associations."
6. To see the block actually render content (course cards, rule boxes, chips) rather than the error state, mock the three endpoints' responses — either via your browser's devtools (Network tab → right-click a request → override its response) or a short local script; point a mocked course-level group at a real course/subsection in your devstack so the (real, unmocked) outline lookup resolves actual names. I verified this exact way against a local devstack with Playwright route interception; happy to share the script if useful for review.
7. With the block showing real content, confirm: a course-level group's bottom-tier groups are connected pairwise with an Or/And label matching the group's own combining choice; a rule box's chips read the real subsection names (not a raw usage key or "Content unavailable"); a gradable subsection already covered by a mocked criterion shows a badge with the competency's own external id plus a marker icon in the content panel below.
8. Click a gradable subsection that isn't yet associated (with your mocked POST handler returning a plausible response) and confirm a request fires with the currently-focused group/rule box's fields, or no group_id/rule fields at all when nothing in that course is focused yet.
9. Click an already-associated subsection again and confirm no request fires — an informational toast instead.

Other information

• Does this depend on other changes elsewhere? Yes — see the four blocked-by issues above. data/api.ts's URL-building helpers carry inline comments recording exactly which literal paths were confirmed against which of those tickets' actual text/code (not guessed), including one now-resolved inconsistency between chore(deps-dev): bump semver from 5.7.1 to 5.7.2 #665's and fix: total file count update on add and delete #681's own ticket text about the shared /api/cbe/v1/ prefix.
• New cross-ticket dependency this PR surfaces, not yet tracked anywhere: the courses.manage_tags authz action this PR adds only means something once the same action string is registered on the backend side of chore(deps-dev): bump semver from 5.7.1 to 5.7.2 #665. I checked this against chore(deps-dev): bump semver from 5.7.1 to 5.7.2 #665's own actual authorization-service prerequisite PR (openedx-platform#39112, for openedx-core#795) and the string matches exactly (courses.manage_tags, confirmed in the openedx-authz package), so this should compose cleanly once chore(deps-dev): bump semver from 5.7.1 to 5.7.2 #665 ships — but it's a real dependency to keep in view.
• Separately, a real audience mismatch worth a second look: refactor: replace @edx/paragon and @edx/frontend-build #773's rule-profiles endpoint (needed here to resolve any criterion with no per-criterion override — i.e. most of them) is gated by is_taxonomy_admin, which in the actual openedx_tagging code is a plain alias for Django's is_staff. This page's own user story is written entirely as "As a course author...", and an ordinary course author (via CourseInstructorRole/CourseStaffRole, the standard non-staff way to get Studio access) won't have is_staff — so as things stand today, this PR's associations block would show a permanent error for most of its intended audience once refactor: replace @edx/paragon and @edx/frontend-build #773 ships. Flagging this on refactor: replace @edx/paragon and @edx/frontend-build #773 directly rather than silently working around it here, since it's that endpoint's permission model to decide, not this PR's.
• Accessibility: the associations block's collapse toggles and the subsection select control follow the same IconButton/accessible-label pattern already used elsewhere on this page; the leaf-only selection change removes role="button"/tabIndex/keyboard handling from group rows entirely (they were never meant to be a keyboard-focusable target once they stopped being selectable).

Best Practices Checklist

• Any new files are using TypeScript (.ts, .tsx).
• Avoid propTypes and defaultProps in any new or modified code.
• Tests should use the helpers in src/testUtils.tsx (specifically initializeMocks).
• Do not add new fields to the Redux state/store. Use React Context to share state among multiple components.
• Use React Query to load data from REST APIs. See any apiHooks.ts in this repo for examples.
• All new i18n messages in messages.ts files have a description for translators to use.
• Avoid using ../ in import paths. To import from parent folders, use @src.

🤖 Generated with Claude Code