[AShatsila]

Description

Implements Delete Competency Course & Rule Groups (openedx/openedx-core#709). It builds on <link to the openedx#671 PR>. Until that PR merges, this PR's diff also shows its changes. To review only this PR's own changes, open the last commit, "feat: add delete hooks for group and courses".

Each Course Group and each Rule Group on the Competency Management page's associations panel now has a trash icon. A click deletes the group right away, with no confirmation dialog. openedx/openedx-core#786 adds that dialog later.

• Data layer (data/): deleteCompetencyCriteriaGroup sends DELETE /api/cbe/v1/competencies/<tag_id>/criteria-groups/<group_id>/. useDeleteCompetencyCriteriaGroup refetches the criteria groups after every delete, whether it succeeds or fails. It stays pending until that refetch lands, so the panel only ever shows what the server holds.

  • The backend archives a group instead of removing it when a learner already has recorded progress in it. The page treats both outcomes the same way: the group disappears.
  • A 404 means another author already deleted the group. It counts as a success, and no error is shown.
  • Any other failure shows a toast, and the panel refreshes to match the server.

• Trash controls (criteria-groups/):

  • The Rule Group trash sits beside the card's "By completing…" band, not inside it, so one interactive element never contains another.
  • The Course Group trash sits in the section header, next to the collapse toggle. Its accessible name includes the course name.
  • Both appear only on courses the author can edit.
  • While a delete is in flight, every trash control on the panel and every subsection select control in the content panel are disabled.
  • The trash on an unsaved Rule Group removes it on the client without sending a request.

• Focus after a delete (utils.ts, CompetencyAssociationsContext.tsx): before sending the request, the provider records the page order. Once the refetch lands, the pure helper focusTargetAfterRemoval picks the new focus from that order and the refreshed data:

  • If the Rule Group in focus still exists, focus stays where it is.
  • Otherwise the nearest surviving Rule Group above it in the same Course Group takes focus, or the nearest one below.
  • If that Course Group is gone too, the last Rule Group of the Course Group above takes focus, or the first Rule Group of the Course Group below.
  • If neither is left, the first Rule Group of a Course Group another author has added in the meantime takes focus.
  • If nothing is left at all, nothing is focused, and the panel shows its empty state.

  The newly focused Rule Group's first rule box is the target for the next subsection the author selects. When the deleted group took the browser's keyboard focus with it, keyboard focus moves to the new Rule Group's header, or to the empty-state message when the panel is empty. A collapsed Course Group expands when focus moves into it.

Roles affected: Course Author (Competency Management page).

Supporting information

• Ticket: [FE] Delete Competency Course & Rule Groups openedx/openedx-core#709.
• Backend: [BE] Build endpoint for removing a Competency Criteria Group openedx/openedx-core#675, implemented in feat: add endpoint to delete or archive a CompetencyCriteriaGroup sub… ufedaseyeuconsultant/openedx-core#4.
• Related, out of scope: the confirmation dialog ([FE] Confirm every deletion of a tag association from the Competency Management page openedx/openedx-core#786), deleting a rule box ([FE] Delete a Competency Rule Box openedx/openedx-core#833), deleting an association ([FE] Manage & Apply Competencies: delete a Competency Criteria Association openedx/openedx-core#710).

Testing instructions

These steps need a Studio instance with the openedx-core CBE API, including the DELETE endpoint from ufedaseyeuconsultant/openedx-core#4, and openedx/openedx-platform#39099 applied.

1. Open a competency taxonomy on the Competency Management page and select a leaf competency that has associations in two courses, with more than one Rule Group in at least one of them.
2. Click the trash icon on a Rule Group that is not in focus. It disappears once the server responds. The focused Rule Group stays in focus, and its subsections are no longer marked as associated in the content panel.
3. Click the trash icon on the Rule Group in focus. Focus moves to the Rule Group directly above it, or directly below it when it was the top one.
4. Click the trash icon on a Course Group. The whole section disappears, and focus moves to the nearest Rule Group in the Course Group above or below it.
5. Click "+ Rule Group", then the trash icon on the new empty Rule Group. It disappears without a request, and the Rule Group above it is in focus.
6. Delete groups until none are left. The panel shows its empty state, and a subsection selected afterward is added under a new Course Group.
7. With only the keyboard, tab to a trash icon and press Enter. Keyboard focus lands on the newly focused Rule Group, or on the empty-state message.
8. In the browser's dev tools, block the DELETE request (or make it fail), then click a trash icon. An error toast appears, and the group stays on the panel.
9. Open a course in the content panel that you cannot edit. Its Course Group and Rule Groups show no trash icons.
10. Reload the page. The deleted groups are still gone.

Other information

• Depends on <link to the feat: remove old/duplicate proctoring component openedx/frontend-app-authoring#671 PR> and on feat: add endpoint to delete or archive a CompetencyCriteriaGroup sub… ufedaseyeuconsultant/openedx-core#4, which is still in review.
• This change has not been run against a live backend yet. The DELETE endpoint is not in a released openedx-core, so it is covered by unit tests with a mocked API.
• The Rule Group trash label is the same on every card ("Delete rule group").

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, e.g. import { initializeMocks } from '@src/testUtils'; instead of from '../../../../testUtils'

🤖 Generated with Claude Code