[Remove Vuetify from Studio] Channel details in Channels - content

[vtushar06]

Summary

Migrates ChannelDetailsModal from Vuetify to Kolibri Design System (KDS).

Components

• StudioDetailsRow.vue - CSS Grid layout replacing VLayout/VFlex
• StudioDetailsPanel.vue - Complete KDS migration with KImg, KTooltip, semantic HTML
• Uses existing StudioChip from unstable

Key Changes

• Replaced Vuetify components (VCard, VLayout, VChip, VTooltip) with KDS equivalents
• KImg with 16:9 aspect ratio for thumbnails + placeholder

Testing

• 13 tests passing
• StudioDetailsPanel: 8 tests (basic rendering, data-present, data-absent)
• StudioDetailsRow: 5 tests (rendering, tooltip behavior)
• Following VTL best practices - user-facing behavior only
• Removed redundant edge-case tests per ISSUE [Remove Vuetify from Studio] Convert Content Library unit tests to Vue Testing Library  #5536 learnings

Screen-Recording:

Channel.details.modal.mp4

…

References

fixes : #5530
…

Reviewer guidance

1. Check RTL language support
2. Run unit tests: npm test StudioChip StudioDetailsRow StudioDetailsPanel

…

[MisRob]

Hi @vtushar06, thank you. As for the structure of components, and very high-level, looks as expected 👍

Before we dive into full review though, let's revisit approach to testing. This will help a reviewer too - they will be able to recognize whether the logic behaves as expected for channels with/without all sorts of data.

Also, the guidance I left is quite general. I know you have more PRs open - would you please check if there are some similar patterns to be addressed there as well?

[vtushar06]

Hii @MisRob,
I’ve updated the tests to Tests and refined them so they now only check what actually matters.
Please let me know if this looks good to you or if anything else needs to be adjusted.

[vtushar06]

One more thing when I tested this in 'rtl' I can see that notranslate class doesn't follow that on official website and same on localhost, what should I do to that??

[MisRob]

Hi @vtushar06,

We will assign reviewer here week or two later, some time after we've merged few other PRs, one of them yours, that will be good to have in place before we check these changes.

Meanwhile you can revisit:

(1) The use of stubs and possible simplification of the test suite setup according to notes I left today on your other PRs, if relevant.

(2) As for your note:

Data-present vs data-absent scenarios for all fields.

I don't yet see this in StudioDetailsPanel.spec.js - would definitely be helpful since this component has lots of conditional logic. This will take some effort - take your time.

[MisRob]

One more thing when I tested this in 'rtl' I can see that notranslate class doesn't follow that on official website and same on localhost, what should I do to that??

I don't quite understand the question - would you post a screenshot, or rephrase?

[MisRob]

Hi @vtushar06, I wanted to mention that I've just merged another PR that introduces StudioChip and I think it'd be best to re-use the existing implementation rather than having two components. Sorry for this timing, I didn't realize it was already work in progress elsewhere when I assigned you this issue.

I think it'd be easiest if you rebased this PR on top of the latest unstable branch, and then fully accept the incoming unstable's StudioChip, and use it for your work here, rather than adding new one. No worries about slightly different round corners - just use StudioChip as is and then we will see if some adjustments are needed. This will also resolve the conflict.

[vtushar06]

Hi @MisRob, I've completed all the requested changes - tests now follow VTL principles with data-present/absent scenarios, and I'm using the contributor's StudioChip from unstable. About RTL/notranslate: The notranslate class is for excluding user content from translation services, not for text direction. The dir="auto" attribute handles RTL direction. Is this the expected behavior? and all 41 tests passing. Now it is ready for review .

[vtushar06]

Hii @MisRob, Please give me some time I am going through all the files line by line to see any cleanups require or any other change referencing to my other PRs.

[MisRob]

Much appreciated @vtushar06 - and take all the time you need, no rush. We need to finish other reviews at first anyway.

[MisRob]

@vtushar06, before you revisit it, would you also merge the latest unstable here and resolved conflicts? Hopefully it will be straightforward - I think the conflicting lines come from the other PR from you that we recently merged.

[vtushar06]

yeah sure @MisRob, I will and work is almost done, last commit will be pushed very soon.

[Copilot]

Pull request overview

This pull request migrates the Channel Details functionality from Vuetify components to the Kolibri Design System (KDS), continuing the broader effort to remove Vuetify dependencies from Studio. The migration introduces two new KDS-based components (StudioDetailsRow and StudioDetailsPanel) that replace the Vuetify-based DetailsPanel, ensuring consistent design patterns across the application.

Key changes:

• Created StudioDetailsRow.vue with CSS Grid layout replacing Vuetify's VLayout/VFlex
• Created StudioDetailsPanel.vue with full KDS component migration (KImg, KIcon, KTooltip)
• Updated ChannelDetailsModal.vue to use the new StudioDetailsPanel component
• Added comprehensive unit tests for both new components (41 tests total)

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
StudioDetailsRow.vue	New component implementing responsive grid layout for detail rows with label-value pairs, including accessibility support via HelpTooltip
StudioDetailsPanel.vue	New component replacing DetailsPanel with KDS equivalents, displaying channel/content metadata with KImg thumbnails, StudioChip tags, and KTooltip descriptions
ChannelDetailsModal.vue	Updated imports and component references to use StudioDetailsPanel instead of DetailsPanel
StudioDetailsRow.spec.js	Test suite for StudioDetailsRow (13 tests) covering rendering, slots, and tooltip behavior
StudioDetailsPanel.spec.js	Test suite for StudioDetailsPanel (28 tests) covering published/unpublished channels and data presence/absence scenarios
StudioChip.spec.js	Removed tests (existing component from unstable, tests likely consolidated elsewhere)
EmailUsersDialog.vue	Import ordering correction: moved vuex imports before local imports per codebase convention

---

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

[vtushar06]

Hi @MisRob, I have merged the latest unstable and resolved all conflicts.Now PR is ready for review.

[MisRob]

Hi @vtushar06, I'm sorry for delay - I will review after I'm back from my vacation. It'll be quite a long time - just in case you wouldn't be around later in January or February, I can just push requested changes, if I locate any, too. Thanks!

[vtushar06]

sure @MisRob, I will be there waiting for your review and you can push changes if exists.

[MisRob]

Thanks for your patience @vtushar06. Take care and see you in the new year :)!

[vtushar06]

Hii @MisRob, once you are free, can you review this PR.Thanks

[MisRob]

Hi @vtushar06, thanks for the reminder - it's on my schedule for this week!

Again sorry for delay - was catching up after vacation, and then needed to attend to high-priority tasks.

[vtushar06]

No worries at all @MisRob, I understand priorities and urgent tasks come first. I'm excited about
the medium and hard level issues you mentioned, and I'm ready to tackle them whenever you have them available.

[MisRob]

Hi @vtushar06, I started reviewing and testing.

I have some technical difficulties in downloading production-like channels for testing and it may take some time for us to fix it. But meanwhile I will be gradually posting whatever I notice from code or from development-only channels.

[MisRob]

Hi @vtushar06, I was able to preview on our QA channel - and overall it's pretty solid! There's a problem with the channel thumbnail (may be related to my question around encoding) and few smaller visual regressions (spacing, help icon alignment, the bottom sample content section). Could you compare and fix what you can? (3) is just for reference. For now, you'd want to align (1) to (2).

(1) this PR	(2) current unstable branch - localhost	(3) current unstable branch - cloud (link)

[MisRob]

Here is How to preview QA channel in Studio localhost. After you have that, the most efficient way to preview before/after I figured out was to

// switch before your changes
git stash // stash temporarily added QA channel logic
git checkout da5fb15cbbb9642a8e1cdb9291b649186bccbf11 // the latest commit before your commits
git stash apply //  re-apply temporarily added QA channel logic

// switch back to your changes
git stash
git switch -
git stash apply

This way you won't need to stop and re-run the development server ;)

Or, to make it even simpler and avoid having to use stash, feel free to commit the QA-related temporary changes in a separate commit and then we will revert it shortly before merging.

[MisRob]

Apart from those visual matters, I haven't noticed any missing data, sections, etc. - so I want to say good work! This was a bit more complex than I originally anticipated.

Let me know if you had any questions. It may also be good to merge latest unstable from time to time.

Please take your time and try to align everything carefully and let me know after you're finished. Be ready for some more feedback coming after that, but I would expected that to be last fine-tuning.