[Remove Vuetify from Studio] Send e-mail dialog

[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 #5060.

Complexity: Medium

Summary

Remove Vuetify from the Send e-mail dialog in Administration > Users (including Draft in progress alert)

The dialog is currently built with several Vuetify components, such as VDialog, VChip, VTextField, and others.

Remove dependencies on Vuetify in this specific location by:

• Replace VDialog and ConfirmationDialog by KModal
• Replace VFlex and VLayout by custom styles
• Replace VForm by <form>
• Replace VTextField and VTextarea by KTextbox
• Replace VTooltip by KTooltip
• Use generateFormMixin for validation
• Create a new custom StudioChip component to replace VChip

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

How to get there

• Login as a@a.com with password a
• Go to Administration > Users
• Select few users in the table
• Click Email

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.
• 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).

[ANAS727189]

HI @MisRob I will solved this issue. Please assign it to me

[MisRob]

Hi @ANAS727189, I've just assigned you another issue, so let's focus on that. After you open a PR, you're welcome to ask for assignment on an another issue. Thanks!

[Prashant-thakur77]

@MisRob i would love to work on this issue.

[MisRob]

Thank you @Prashant-thakur77.

[Prashant-thakur77]

@MisRob
I noticed that our organization pr are showing as Repository not participating. It seems there might be a small typo in the “hacktoberfest” topic on the Learning Equality studio repository, which could be causing it to appear as “not participating.” Could you please take a look when you get a chance?

[MisRob]

Thanks for letting me know about it @Prashant-thakur77. Yes that was a mistake. I've just fixed it.

[Prashant-thakur77]

hey @MisRob can you pls elaborate this Create a new custom StudioChip component to replace VChip task and in which folder do i need to create this component .