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