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

[vtushar06]

Summary

Migrated channel editor toolbar from Vuetify to KDS components, replacing VTooltip, VBtn, VList, and BaseMenu with KDS equivalents.

Changes:

• Replaced VTooltip with KTooltip (error count + publish button tooltips)
• Replaced VBtn with KButton for Publish button
• Replaced BaseMenu + VList with KButton + KDropdownMenu for Share dropdown
• Replaced VBtn + BaseMenu + VList with KIconButton + KDropdownMenu for three-dots menu
• Added shareMenuOptions and channelMenuOptions computed properties
• Added handleShareMenuSelect and handleChannelMenuSelect methods

Screenshots:

…

…

…

…

…

…

…

…

…

References

Closes #5597
…

Reviewer guidance

1. Login as a@a.com / a
2. Go to Channels > Published Channel > Edit (to enter channel editor)
3. Test Share dropdown (desktop view)
4. Test Publish button
5. Test three-dots menu
6. Test responsive behavior (resize browser to mobile width ~375px)

…

[learning-equality-bot]

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

• You ran pre-commit locally
• All issue requirements are satisfied
• The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

[vtushar06]

hi @MisRob, On small screens, the Edit channel option goes into the three-dots menu. The original code showed a red error icon when the channel has no language set. Since KDropdownMenu only accepts strings for option labels, I am thinking to use an emoji instead:

let label = this.$tr('editChannel');
if (!this.currentChannel.language) {
  label = `${label} ⚠️`;
}

Is this okay, or would you prefer something like "Edit channel (incomplete)"?

[vtushar06]

one more thing I wanted to ask about original code had some duplication where users could access the same thing from both the Share dropdown and three-dots menu:

• "Share token" / "Get token" → both open token modal
• "Invite collaborators" / "Share channel" → both go to share page
  I kept this for backward compatibility. Should I remove the duplicates from the three-dots menu?

[Copilot]

Pull request overview

This PR migrates the channel editor toolbar from Vuetify to KDS (Kolibri Design System) components as part of the larger effort to remove Vuetify from Studio. The changes replace VTooltip, VBtn, VList, and BaseMenu with their KDS equivalents (KTooltip, KButton, KIconButton, and KDropdownMenu).

Changes:

• Replaced Vuetify tooltips, buttons, and dropdown menus with KDS components
• Refactored menu logic into computed properties (shareMenuOptions, channelMenuOptions) and handler methods (handleShareMenuSelect, handleChannelMenuSelect)
• Updated tests to verify computed properties instead of DOM manipulation

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue	Migrated toolbar buttons, dropdowns, and tooltips from Vuetify to KDS components; added computed properties for menu options and handler methods for menu selections
contentcuration/contentcuration/frontend/channelEdit/views/TreeView/tests/TreeViewBase.spec.js	Updated tests to check computed properties directly instead of testing DOM elements; removed obsolete component stubs for BaseMenu and MessageDialog

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[MisRob]

Hi @vtushar06,

On small screens, the Edit channel option goes into the three-dots menu. The original code showed a red error icon when the channel has no language set. Since KDropdownMenu only accepts strings for option labels, I am thinking to use an emoji instead

Emoji sounds creative ;)!

KDropdownMenu can show icons (doc) but yes - not colored ones. Would you please post before/after screenshot of that place with the icon (as supported by KDropdownMenu now)? Then we can see.

one more thing I wanted to ask about original code had some duplication where users could access the same thing from both the Share dropdown and three-dots menu...

Yes, as you mentioned, let's keep the options exactly the same now. I am not sure what was the original decision, it may be intentional - and not exactly in scope of this project.

[MisRob]

Before we assign a maintainer, I will first try inviting the community review ;)

📢 ✨ Community Review guidance for both authors and reviewers.

[vtushar06]

Hii @MisRob! Thank you,
I've tested both approaches you suggested:

1. Emoji Approach:
   Screenshot showing "Edit channel details ⚠️" and warning appears after the text and more noticeable due to colored emoji..
   ...

...

2. Icon Approach (using KDropdownMenu's icon prop):
   Screenshot showing "⚠ Edit channel details" and KDropdownMenu places icons before the label text
   ...

I suggest keeping the emoji approach because the warning appears after the text, which is more natural for an indicator
Please let me know which approach you prefer, and I'll finalize the implementation accordingly.

[abhiraj75]

Hey @vtushar06 ! I am still learning testing , I see the tests now check the computed properties directly
instead of the DOM. Should we also test that handleShareMenuSelect and handleChannelMenuSelect actually get called with the right values when users click? Or is testing the computed properties sufficient?

[vtushar06]

hey @abhiraj75, In our codebase, we're still migrating from old test patterns. The TreeViewBase tests use wrapper.vm computed properties, which is what was approved as not in this PR scope. But best practice going forward is to test user-observable behavior (what appears on screen) rather than internal handler calls.