[Remove Vuetify from Studio] Buttons, dropdowns, and dialog in channel editor root page

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

Summary

Remove Vuetify from the following buttons, dropdowns, and dialog in Channels > Edit channel.

VBtn, VList..., BaseMenu and MessageDialog built with several Vuetify components, are currently used.

Remove these dependencies on Vuetify in these specific locations by:

• Replace BaseMenu + VList... dropdown by KButton with KDropdownMenu
• Replace MessageDialog by KModal
• Replace VBtn with the most suitable KDS button or link components
• Replace VTooltip with KTooltip

Pay attention to how Share and Publish options collapse into the three dots dropdown on small screens and preserve this experience. Don't remove $vuetify.breakpoint usage.

Ensure that all interactions are functional as before. Do not modify MessageDialog or BaseMenu. Do not refactor any other areas.

How to get there

• Login as a@a.com with password a
• Go to Channels > Published Channel

Guidance

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

Out of Scope

• Do not modify MessageDialog or BaseMenu
• Don't remove $vuetify.breakpoint usage
• 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

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

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

[kart-u]

hello @MisRob!
May I work on this, I would love to contribute

[MisRob]

Thank you @kart-u, yes

[vednarvekar]

@MisRob As the orginal assignee has not made any progress, I would love if you assignee this issue to me. I would solve this quickly.

[kart-u]

@MisRob As the orginal assignee has not made any progress, I would love if you assignee this issue to me. I would solve this quickly.

@vednarvekar001 i am currently working on it and will raise a PR soon

[DiaaMohammed911]

Hi @MisRob , I’ve read the contributing guidelines and I’m interested in working on this issue if it’s still available.

[kanishkaanarang]

Hi! I’ve read the Contributing Guidelines and the “Using generative AI” policy carefully.

I’d love to work on this issue if it’s still available. I’m comfortable with Vue and frontend UI work, and I’m happy to follow the KDS guidelines, a11y, and testing requirements described here.

Please let me know if I can be assigned. Thanks!