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

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of https://github.com/learningequality/studio/issues/5060.

Complexity: Low

Summary

Remove Vuetify from Add / remove admin privileges dialogs in Administration > Users, including validation:

VForm, VTextField, Vuetify-based validation, VBtn, and MessageDialog built with several Vuetify components, are currently used.

Remove these dependencies on Vuetify in this specific location by:

• Replace MessageDialog by KModal
• Replace VForm by <form>
• Replace VTextField by KTextbox
• Use generateFormMixin for validation

Ensure that the dialog work exactly as before. Do not refactor any other areas.

How to get there

• Login as [email protected] with password a
• Go to Administration > Users
• Click Actions dropdown in the last column of the table
• Click Add / remove admin privileges

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

Acceptance criteria

General

• [ ] The specification above is followed.
• [ ] Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• [ ] There are no ::v-deep or /deep/ selectors.
• [ ] All user interactions are manually tested with no regressions.
• [ ] Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• [ ] Implementation meets a11y standards
• [ ] All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• [ ] All user-facing strings are translated properly
• [ ] The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• [ ] Mobile experience is reasonable

Unit tests

• [ ] If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• [ ] If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

[Prashant-thakur77]

Hi @MisRob I would love to work on this issue

[rishabhjain1712]

hi @MisRob i would like to work on this issue. i have read the contribution guidelines

[MisRob]

Hi @Prashant-thakur77, since you still have a larger issue in progress, and @rishabhjain1712 has no issue yet, I will assign @rishabhjain1712.

However, as you may have noticed, new batch of issues will come next week and in weeks to come :) Thanks both.

[rishabhjain1712]

Hey @MisRob , I replaced the old message dialog with KModal for the Add/Remove Admin Privileges modal. After rebuilding and running the dev server, the UI loads fine until I click Administration → Users, where the page becomes completely unresponsive. The /api/admin-users call returns a blank response (no data or error), and the browser eventually freezes. Has anyone else faced this issue or knows what might be causing it?

[rishabhjain1712]

@MisRob submitted PR - #5469 , ready to review.

[MisRob]

Thank you @rishabhjain1712, we will have a look

[MisRob]

@rishabhjain1712

I replaced the old message dialog with KModal for the Add/Remove Admin Privileges modal...

Is this happening on the unstable branch too, or only your local branch?