[Remove Vuetify from Studio] Add / remove admin privileges dialogs

[rishabhjain1712]

Fixes https://github.com/learningequality/studio/issues/5441

Summary

This PR refactors the User Privilege Modal to remove dependency on Vuetify (v-dialog, v-form, etc.) and migrate it to use Kolibri Design System (KDS) components such as KModal, KTextbox, and KButton.

• Replaced v-dialog with KModal for modal rendering.
• Removed v-form in favor of generateFormMixin for validation handling.
• Updated modal actions (Add/Remove privilege, Cancel) to work with KDS event handling (@submit, @cancel).
• Ensured all existing logic (confirmAction, close, onSubmit) and state management remain functional.
• Confirmed that the modal opens and closes correctly, validates input, and performs privilege actions as before.
• Minor visual differences are expected due to use of KDS, but no functional regressions.

Manual Verification

• Opened the User Privilege Modal in the Admin > Users section.

• Verified that:

  • Modal renders without freezing or layout issues.
  • Input field validation works correctly via generateFormMixin.
  • “Cancel” and “Add/Remove Privilege” buttons perform expected actions.
  • Confirmed no console errors and all API calls are working.

Screenshots: (Already included above 👆)

---

References

• Related issue: Refactor Vuetify usage in user privilege modal to KDS equivalents (#5441 )(https://github.com/learningequality/studio/issues/5441)

• Internal discussion: Migration to KDS components and removal of Vuetify dependencies

• Component references:

  • kolibri-design-system v5.2.2
  • vue v2.7.16

Reviewer Guidance

To test these changes:

1. Navigate to the User Management section in the app.

2. Open a user’s privilege modal.

3. Verify:

   • Modal opens normally with no freezing.
   • Input validation behaves as expected.
   • Cancel and Confirm buttons close or submit the modal correctly.
   • Snackbar notifications appear after successful actions.

4. Ensure no UI regressions or console errors occur.

[MisRob]

Thank you @rishabhjain1712, we will assign a reviewer next week.

Meanwhile see my note on user experience, and also I noticed that tests check is failing - needs to be fixed.

[rishabhjain1712]

@MisRob hey i have removed the snackbar and also all the test cases are passing on local check the lastest commit.

[rishabhjain1712]

@marcellamaki if you make a new pr let me know what changes you make, so i can learn. this is my first contribution so a lot to learn

[MisRob]

@rishabhjain1712 Marcella won't make a new PR - her assignment means that she will review your pull request :)

[MisRob]

@rishabhjain1712 @marcellamaki Not 100% sure, just noticed from the screenshots that text centering problems look similar to some issues we observed elsewhere where Studio styles were unexpectedly inherited by KModal. This was recently fixed by another contributor in KDS version that is already installed in the latest unstable. So as a first step, @rishabhjain1712, merge unstable to this branch, and run pnpm install. Then see if it helped with some issues, and fix the remaining ones.

[marcellamaki]

Ah, thank you for adding that extra info, @MisRob :)

[rishabhjain1712]

@marcellamaki completed all the changes left alignment, text and spacing. you can merge and close this now. cc: @MisRob

[MisRob]

Thanks @rishabhjain1712 - we will re-review. We have more internal commitments this and next week so it may take longer than usual.

[rishabhjain1712]

@MisRob Understood, let me know if further changes are required. Thanks!

[rishabhjain1712]

@marcellamaki sincere apologies i just saw this, was dealing with a few interview rejections :laughing: :cry: .. will look this up in a day or two. Thankyou

[MisRob]

Hi @rishabhjain1712, apologies for late response. I wanted to note that Learning Equality will be on holidays from December 22 to January 5. We noticed your latest changes and will get back to you next year. Thank you and happy holidays!