Change Details

ATM the "remove" menu item in Active Blocks links to `Special:Unblock/username` Update this to link to `Special:Unblock/?id=<blockid>`, and in the Vue app capture the link click, and when it is clicked * use the unblock api to edit the block * update the active block table when the api request is successful * if the api request is not successful, display an error https://www.figma.com/design/3PthdmimQ8FiuhGIsLhmZi/Multiblock?node-id=2523-35800&t=V3XzVft9pkiozqit-4

ATM the "remove" menu item in Active Blocks links to `Special:Unblock/username` Update this to link to `Special:Unblock/?id=<blockid>`, and in the Vue app capture the link click, and when it is clicked * use the unblock api to edit the block * update the active block table when the api request is successful * if the api request is not successful, display an error https://www.figma.com/design/3PthdmimQ8FiuhGIsLhmZi/Multiblock?node-id=2523-35800&t=V3XzVft9pkiozqit-4 **Derived Requirement:** Update the "remove" menu item in Active Blocks to link to Special:Unblock/?id=<blockid> instead of Special:Unblock/username. In the Vue app, implement the following functionality: - Capture the link click event. - Use the unblock API to edit the block. - Update the Active Blocks table when the unblock API request is successful. - Display an error message if the unblock API request fails. ====Test Steps __Test Case 1: Ensure "Remove" Menu Item Links to Correct URL__ 1. Open the Active Blocks page. 2. Locate the "remove" menu item next to an active block. 3. Click the "remove" menu item. 4. ✅❓❌⬜ **AC1:** Verify that the URL is updated to Special:Unblock/?id=<blockid>. __Test Case 2: Ensure API is Called to Unblock a User__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Capture the network request. 4. ✅❓❌⬜ **AC2:** Confirm that the unblock API is called with the appropriate block ID. __Test Case 3: Ensure Active Block Table is Updated After Successful API Request__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Wait for the API request to complete successfully. 4. ✅❓❌⬜ **AC3:** Verify that the active block table is updated to reflect the successful unblock. __Test Case 4: Ensure Error is Displayed After Failed API Request__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Simulate a failed API request. 4. ✅❓❌⬜ **AC4:** Ensure an error message is displayed when the API request fails.

ATM the "remove" menu item in Active Blocks links to `Special:Unblock/username` Update this to link to `Special:Unblock/?id=<blockid>`, and in the Vue app capture the link click, and when it is clicked * use the unblock api to edit the block * update the active block table when the api request is successful * if the api request is not successful, display an error https://www.figma.com/design/3PthdmimQ8FiuhGIsLhmZi/Multiblock?node-id=2523-35800&t=V3XzVft9pkiozqit-4 **Derived Requirement:** Update the "remove" menu item in Active Blocks to link to Special:Unblock/?id=<blockid> instead of Special:Unblock/username. In the Vue app, implement the following functionality: - Capture the link click event. - Use the unblock API to edit the block. - Update the Active Blocks table when the unblock API request is successful. - Display an error message if the unblock API request fails. ====Test Steps __Test Case 1: Ensure "Remove" Menu Item Links to Correct URL__ 1. Open the Active Blocks page. 2. Locate the "remove" menu item next to an active block. 3. Click the "remove" menu item. 4. ✅❓❌⬜ **AC1:** Verify that the URL is updated to Special:Unblock/?id=<blockid>. __Test Case 2: Ensure API is Called to Unblock a User__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Capture the network request. 4. ✅❓❌⬜ **AC2:** Confirm that the unblock API is called with the appropriate block ID. __Test Case 3: Ensure Active Block Table is Updated After Successful API Request__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Wait for the API request to complete successfully. 4. ✅❓❌⬜ **AC3:** Verify that the active block table is updated to reflect the successful unblock. __Test Case 4: Ensure Error is Displayed After Failed API Request__ 1. Open the Active Blocks page. 2. Locate and click the "remove" menu item next to an active block. 3. Simulate a failed API request. 4. ✅❓❌⬜ **AC4:** Ensure an error message is displayed when the API request fails.