-
Notifications
You must be signed in to change notification settings - Fork 286
Comments
[Remove Vuetify from Studio] Buttons, dropdowns, and dialog in channel editor root page #5668
[Remove Vuetify from Studio] Buttons, dropdowns, and dialog in channel editor root page #5668vtushar06 wants to merge 3 commits intolearningequality:unstable from
Conversation
👋 Thanks for contributing!
We will assign a reviewer within the next two weeks. In the meantime, please ensure that:
- You ran
pre-commitlocally - 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! 😊
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
commented
Jan 29, 2026
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
Show resolved
Hide resolved
contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
Show resolved
Hide resolved
contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
Show resolved
Hide resolved
MisRob
commented
Jan 29, 2026
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.
...tcuration/contentcuration/frontend/channelEdit/views/TreeView/__tests__/TreeViewBase.spec.js
Show resolved
Hide resolved
MisRob
commented
Jan 29, 2026
Before we assign a maintainer, I will first try inviting the community review ;)
📢 ✨ Community Review guidance for both authors and reviewers.
vtushar06
commented
Jan 30, 2026
Hii @MisRob! Thank you,
I've tested both approaches you suggested:
- Emoji Approach:
Screenshot showing "Edit channel details⚠️ " and warning appears after the text and more noticeable due to colored emoji..
...
...
- 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
commented
Feb 1, 2026
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
commented
Feb 1, 2026
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.
abhiraj75
commented
Feb 1, 2026
Thanks @vtushar06 !
MisRob
commented
Feb 2, 2026
Hi @vtushar06
I've tested both approaches you suggested:
Thanks for following-up, appreciated! And meanwhile similar issues showed up in other places. I'm now coordinating a decision on how to proceed. Will let you know soon.
MisRob
commented
Feb 2, 2026
@vtushar06 we will update KDS to allow for easier dropdown item customization. Tracking here learningequality/kolibri-design-system#1200. As soon as it's done I will install the new KDS version in Studio, and then you can use it :) In any case, thanks for raising that and also thinking through options. I prefer KDS update because it will be useful in more places and in general, and will allow us to use KDS icons as usual.
vtushar06
commented
Feb 3, 2026
sure @MisRob, please let me know If I can help there too, I would like to work on that issue in KDS..
Summary
Migrated channel editor toolbar from Vuetify to KDS components, replacing
VTooltip,VBtn,VList, andBaseMenuwith KDS equivalents.Changes:
VTooltipwithKTooltip(error count + publish button tooltips)VBtnwithKButtonfor Publish buttonBaseMenu + VListwithKButton + KDropdownMenufor Share dropdownVBtn + BaseMenu + VListwithKIconButton + KDropdownMenufor three-dots menushareMenuOptionsandchannelMenuOptionscomputed propertieshandleShareMenuSelectandhandleChannelMenuSelectmethodsScreenshots:
Screenshot 2026年01月28日 at 5 56 43 PM
...
Screenshot 2026年01月28日 at 5 55 55 PM
...
Screenshot 2026年01月28日 at 5 55 47 PM
...
Screenshot 2026年01月28日 at 5 54 45 PM
...
Screenshot 2026年01月28日 at 5 55 39 PM
...
Screenshot 2026年01月28日 at 5 54 34 PM
...
Screenshot 2026年01月28日 at 5 55 32 PM
...
Screenshot 2026年01月28日 at 5 54 15 PM
...
Screenshot 2026年01月28日 at 5 54 52 PM
...
References
Closes #5597
...
Reviewer guidance
a@a.com/a...