[Remove Vuetify from Studio] Send e-mail dialog

[Prashant-thakur77]

Fixes #5425

Summary

This PR completes the removal of Vuetify from the Send Email dialog as part of the larger Vuetify migration effort (#5060). The dialog now uses Kolibri Design System components exclusively while maintaining all existing functionality.

Changes Made:

✅ Replaced VDialog and ConfirmationDialog with KModal

✅ Replaced VFlex and VLayout with custom CSS flex styles

✅ Replaced VForm with native form element

✅ Replaced VTextField and VTextarea with KTextbox

✅ Replaced VTooltip with KTooltip

✅ Implemented form validation using generateFormMixin

✅ Created new StudioChip component to replace VChip

References

Sub-issue of #5060.

Reviewer guidance

Login as [email protected] with password a
Go to Administration > Users
Select few users in the table
Click Email

Visual Changes:

Minor styling differences due to KDS vs Vuetify
Consistent with Kolibri Design System patterns
Maintains all existing functionality

[LianaHarris360]

Thanks so much for updating the EmailUsersDialog component. This is a good start so far. There’s still a couple of Vuetify components that can be removed. The VBtn and VCardText can be replaced with KButton and a div. There’s also a few user-facing strings that still need to be translated. The KModal title, the From and To labels within the form, “Subject line”, “Email body”, and the phrase “Add placeholder to message”, and all of the placeholder labels.

[Prashant-thakur77]

@LianaHarris360

There’s also a few user-facing strings that still need to be translated. The KModal title, the From and To labels within the form, “Subject line”, “Email body”, and the phrase “Add placeholder to message”, and all of the placeholder labels.

I have a doubt related #5426 (comment) this.Here i was told that wrapped strings are not to be used in administraion.So please do tell what i need to do here in this context

[MisRob]

Chiming in with some additional notes.

Overall congratulations on your first more complex issue. Overall nice work. All main features seem to be preserved Thanks for examining the current experience carefully.

[Prashant-thakur77]

Hey @MisRob, just a quick note — when triggering the email dialog from the UserActionDropdown for a specific user, their name doesn’t show up as a chip in the “To” field.
Wanted to check if that’s intentional or an oversight. 🙂
Checked it in unstable.
Screencast From 2025-11-01 22-35-19.webm
I just looked into it a little and its happening because of passing wrong prop insite EmailDialog in UserActionDropdown.

EmailUsersDialog
v-model="emailDialog"
:query="{ ids: [userId] }"

which actually should be

EmailUsersDialog
v-model="emailDialog"
:initialRecipients="[userId]"

[MisRob]

@Prashant-thakur77

Wanted to check if that’s intentional or an oversight

Oversight, I would say.

[Prashant-thakur77]

Should i update it?

[MisRob]

@Prashant-thakur77 That'd be nice, thank you.

[MisRob]

Hi @Prashant-thakur77, just checking in on what's status or if you need re-review from @LianaHarris360.

From brief skim, it seems you've resolved most of the feedback. I only don't see changes related to this comment - is it still work in progress, or some clarification is needed?

[Prashant-thakur77]

I only don't see changes related to this comment - is it still work in progress, or some clarification is needed?

YES @MisRob do i need to make whole area clickable chips for this as in StudioChip component because i have already implemented it using button as you mentioned and this has been updated(the button component is in EmailUsersdialog not in studiochip) and the chips with x button have been implemented with help of kicon button in StudioChip component.And those chips without clear button such as used in (in front of front text )or when just one recepient is present are also in Studiochip.
I just have doubt that do we need to use the Studiochip for the placeholder button too or is it fine the way i have currently implemented it with button in EmailUsersDialog?
(Just a note that the Vchip wasnot used in placeholder button before too).

The chips are working as expected.And you also mentioned to remove the extra computed effects such as(darken on clicking) and will further notify during review :)

[Prashant-thakur77]

r if you need re-review from @LianaHarris360.

apart from it everything else if fine.
Yes , changes are ready for the review.

[MisRob]

Ah I see @Prashant-thakur77. It's good consideration. I think that having <button> related logic in EmailUsersDialog is fine - I am not yet sure if it will be needed at another place or not, so there's no need to abstract those parts into StudioChip yet. I was primarily interested whether the comment is resolved and if we should re-review. I will let @LianaHarris360 to start the next review round :) Thanks both.