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

[rishabhjain1712]

Fixes #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 ([Remove Vuetify from Studio] Add / remove admin privileges dialogs #5441 )([Remove Vuetify from Studio] Add / remove admin privileges dialogs #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]

Just quickly from the code I don't think that snackbar was displayed before or was it? Please double-check, and if that's the case, remove this logic.

[rishabhjain1712]

Sure, actually I was referring to changeUserPassword.vue so added it. Will remove

[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 :)

[marcellamaki]

Hi @rishabhjain1712 -- thanks for your work on this PR! It looks like it's close to being finished, but needs a few changes first.

First, although you haven't removed the text "Are you sure you want to add admin privileges to the user [username]", because the API of KModal is different, this text doesn't show up in the same way by default.

See the current, production version of Studio

vs. the version seen here in your PR

Second, there are two other small differences you will notice in the modal layout:

1. the button spacing on the production version (some small padding between the two buttons) vs. in the PR (no padding between the buttons).
2. The text is centered in the new version, vs. left aligned in the production version.

Although these are small details, it's good to keep these things as consistent as possible.

Please make sure these changes are applied to both modals. Once these adjustments are made, this should be ready to go!

[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