Feature(challenge): Deleting challenge modal

[otrocadev]

Task IT-Academy-BCN/ita-challenges#251

📍 Context

Deletion is an irreversible action. To prevent accidental data loss, a confirmation modal is required before the deletion is executed. The modal also needs to handle and communicate failure states clearly in case the API call does not succeed, so the mentor is never left without feedback.

Important

This PR follows its previous one #780

🏁 Objective

Build a reusable confirmation modal component that handles three states: idle/confirmation, loading, and error — providing the mentor with a safe and informed deletion experience.

🔧 Changes done

• Create new modal components in the common modal service to manage all cases (Question, success and error)
• Implement three UI states: confirmation prompt, loading/pending, and error message
• Confirmation action emits an event or calls a callback to proceed with deletion
• Cancel action closes the modal without triggering any changes
• Error state displays a clear message and allows the mentor to retry or dismiss

Warning

The current implementation uses mocked data to be able to test the implementation easily. Bear in mind that the next task, solves this. IT-Academy-BCN/ita-challenges#252

❌ Out of Scope

• The actual API call (covered in [FE] Create deleteChallenge function in challenge Service ita-challenges#249 and [FE] Integrate service delete functionality with UI and modals ita-challenges#252)
• Injecting or connecting the service inside this component
• Soft delete or undo functionality
• Any changes outside of the modal component itself

🕹️ Demo

Screen.Recording.2026-03-12.at.12.45.55.mov

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud