Feature/grant extension form v3

[JoeMacl]

Description

This update progresses the Staff Grant Extension feature by integrating the frontend modal with the backend API. Staff users (Admins) can now submit extension requests via the modal form, which sends user input to the /extensions endpoint.

The updated form now:

• Connects the form to the backend API

• Handles both successful and failed responses

• Validates user permissions (only staff can grant extensions)

While the integration is functional, backend interaction is still in early stages. More improvements will come in a later update such as improved error handling, context-aware unit/task selection, student lookup.

Important: To test this functionality, you must pull the backend changes from doubtfire-api PR #56 before running the frontend.

To View the Feature

• Pull the backend code from Feature/Add Staff Grant Extension endpoint doubtfire-api#56
• Make sure you're signed in as administrator
• Choose any unit
• You may need to manually enter the URL, as there’s currently an issue accessing units while signed in as an administrator. As a workaround, you can sign in as a student first, copy the unit URL, then sign in as an admin and paste it into the address bar.
• Find the 'Grant Extension' button form in one of the students tasks
  For Reference:

Locate the 'grant extension' button in any one of the students tasks


Confirm the integration by checking the Network tab in DevTools for a successful POST to /staff-grant-extension with a 201 response.

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Submitted the Grant Extension form as an admin user.

Verified successful backend integration via a 201 response in the Network tab (POST to /staff-grant-extension).

Checked that form validation works correctly for all fields (student selection, reason, duration).

Confirmed success and error messages are displayed appropriately via snackbars.

Testing Checklist:

• Tested in latest Chrome
• Tested in latest Safari
• Tested in latest Firefox

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[SahiruWithanage]

Hey Joe!

I gave this a spin on both the development and 9.x branches, and ran into a few things I wanted to flag.

First off, I hit a 404 Not Found when trying to submit the form. This is because the backend PR needs to be pulled and running, which wasn’t mentioned in the PR notes. Might be worth adding a little heads-up for anyone else testing it.

Also, I noticed that if you leave a required field (like the reason) blank and hit the "Grant Extension" button, there’s no error message. It just sits there without any feedback, which could confuse users.

One more thing – the "Cancel" button currently still submits the extension request if the required fields are filled, which is a pretty big issue. Definitely something to check.

I’m rebasing my backend to 9.x so we will be able to have it compatible there as well, but just wanted to drop these notes in the meantime and yep the Extensions do work and can be accessed by only the correct people as well.

Thanks for the work you’ve put in so far – it’s looking solid overall!

[SahiruWithanage]

Hey Joe,

Great work on the recent changes for the "Cancel" button in the extension submission form. It now correctly prevents submissions when the cancel button is pressed, which is a solid improvement.

I did notice a minor issue, though – when you click the "Grant Extension" button to open the form and then either submit or cancel, the button on the task dashboard sometimes remains in a "pressed" state until you hover over it. This is a small UI quirk and doesn't impact the overall functionality, but I thought it was worth mentioning.

Overall, fantastic job with the fixes – the form is looking solid!

[samindiii]

Hey Joe! Just tested out your code and it looks good to me. The form works and great job on fixing up the review comments given to you!

[b0ink]

Looks good to me, just one note on the modal styling

[JoeMacl]

Looks good to me, just one note on the modal styling

Thanks for the suggestion! Updated to use width: '100%' with maxWidth: '600px' so it scales better on smaller screens.