[Remove Vuetify from Studio] Upload in progress and Save failed dialogs

[ANAS727189]

Replace upload progress and save failed dialogs with KModal components. Maintains existing functionality and adds unit tests.

Fixes #5422

How to test these changes:

1. Login as [email protected] with password a
2. Go to Channels > Published Channel
3. Select any video resource for editing
4. To test upload progress dialog:
   • Temporarily set promptUploading: true in EditModal.vue data()
   • Verify dialog appears with correct styling and buttons
   • Test both "Cancel" and "Exit" buttons work properly
5. To test save failed dialog:
   • Temporarily set promptFailed: true in EditModal.vue data()
   • Verify dialog appears with correct styling and buttons
   • Test both "OK" and "Close without saving" buttons work properly
6. Run unit tests: pnpm test -- editModal.kmodal.spec.js

Imp Note: The existing MessageDialog for "invalid nodes found" was intentionally left unchanged as it was not intended in this issue by issuer.

Summary

This PR migrates two specific dialogs in EditModal from Vuetify's MessageDialog to Kolibri Design System's KModal as part of the effort to remove Vuetify dependencies from Studio (#5060).

Changes made:

• Replaced "Upload in progress" dialog with KModal
• Replaced "Save failed" dialog with KModal
• Maintained all existing functionality and button behaviors
• Preserved data-test="canceluploads" attribute for testing compatibility
• Added comprehensive unit tests using Vue Test Utils

Manual verification performed:

• Tested both dialogs display correctly with proper styling
• Verified all button actions work as expected (dismiss, cancel uploads, close without saving)
• Confirmed dialogs close properly via both button clicks and cancel events
• Ran all unit tests - 11 tests passing

Screenshots:

…

References

…

Reviewer guidance

• Fixes [Remove Vuetify from Studio] Upload in progress and Save failed dialogs #5422 - [Remove Vuetify from Studio] Upload in progress and Save failed dialogs
• Parent issue: Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System #5060 - Open-Source Community Project: Remove Vuetify from Studio in favor of Kolibri Design System
• KDS Documentation: Kolibri Design System KModal

…

[ANAS727189]

@MisRob Please look into this PR

[MisRob]

Thanks @ANAS727189, we will assign a reviewer.

[akolson]

Hi @ANAS727189! Good start so far! I have left a general comment in the implementation that we'll need to address. Thanks

[ANAS727189]

@MisRob @akolson I rewrote the whole test file using VTL principles, loaded the actual EditModal instead of mocking and used KModal built-in buttons in EditModal.

It got pretty complex with all the child components, but I fixed it and it passes all test cases.
Now it mounts the real EditModal, uses DOM-focused queries (screen.getByRole() + fireEvent), and leverages Test KModal’s built-in buttons.

[MisRob]

Thanks @ANAS727189, let's make exception and skip the unit test acceptance criteria in this PR. Thank you that you followed the issue requirements and sorry if it was a hassle - but as you mentioned too tests are very complex now and I think it would be difficult to take care of. We will try taking a different approach - more details above.

[ANAS727189]

Thanks @ANAS727189, let's make exception and skip the unit test acceptance criteria in this PR. Thank you that you followed the issue requirements and sorry if it was a hassle - but as you mentioned too tests are very complex now and I think it would be difficult to take care of. We will try taking a different approach - more details above.

@MisRob Thank you for the feedback! Just to clarify, should I remove the test file from this PR entirely?

I can either:

1. Remove the editModal.kmodal.spec.js file completely from this PR to keep it focused on just the KModal implementation
2. Or keep the current implementation as-is

Let me know your preference and I'll update accordingly.
Also the changes were not a hassle, I learnt many new things doing them even though they were complex.
Looking forward to the separate VTL migration issue you mentioned for a cleaner approach to testing. Thanks for the learning experience 🙏

[MisRob]

@ANAS727189 thanks for humble approach. Yes, let's remove the new spec file completely from this PR. But feel free to keep local copy - in case you'd like to work on the follow-up issue some time later, I'm glad to reserve it for you, so you can still use at least some of those pieces of code :)

[MisRob]

I only looked into the tests, and am happy to proceed now. @akolson after you've finished your review, feel free to merge :)

[akolson]

Changes look correct to me! Thanks @ANAS727189