[Remove Vuetify from Studio] Content Library catalog page (#5526)

[vtushar06]

Summary

Removes Vuetify from Content Library catalog page and implements with KDS components.

Changes:

• Created StudioCatalogList.vue using KDS components (KCardGrid, KCheckbox, KButton)
• added selection support to StudioChannelCard.vue using KCard #select slot
• Migrated tests to Vue Testing Library (following [Remove Vuetify from Studio] Cards in My Channels #5227, [Remove Vuetify from Studio] Cards in Starred channels #5524, [Remove Vuetify from Studio] Cards in View-only channels #5525 patterns)
• Updated router to use new component
• Fixed layout to match original vertical structure (results count above select controls)

ScreenRecording:

Studio-5526.mp4

Studio-5526-2.mp4

…

References

Fixes #5526
Related PRs

• [Remove Vuetify from Studio] Cards in My Channels #5227 (My Channels)
• [Remove Vuetify from Studio] Cards in Starred channels #5524 (Starred Channels)
• [Remove Vuetify from Studio] Cards in View-only channels #5525 (View-only Channels)
  …

Reviewer guidance

• All 5 tests passing
• Uses Vue Testing Library (not @vue/test-utils)
• Follows reference PR patterns exactly
  …

Verify Tests:

1. Navigate to Content Library page (/channels/catalog)
2. Verify catalog channels display correctly with KDS cards
3. Click "Download a summary of selected channels" button
4. Verify:
   • "Select all" checkbox appears above the card grid
   • All channels are selected by default
   • Selection count shows in bottom toolbar
5. Toggle individual channel selections via checkboxes
6. Click "Cancel" to exit selection mode
7. Test with empty results (no channels found)

Run tests

pnpm run test -- catalogList.spec.js

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[learning-equality-bot]

Season's greetings! 👋

We'd like to thank everyone for another year of fruitful collaborations, engaging discussions, and for the continued support of our work. Learning Equality will be on holidays from December 22 to January 5. We look forward to much more in the new year and wish you a very happy holiday season!

Are you preparing for Google Summer of Code? See our GSoC guidelines.

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

@MisRob I've implemented using KCardGrid with the card's #select slot for selection controls and overall work is done but have few doubts regarding UI.
I've noticed a UI behavior difference from the original:

• Original: Checkboxes are siblings to the cards, so cards don't shift when entering/exiting selection mode
• KDS implementation: Checkboxes use KCard's #select slot, which causes cards to shift slightly when selection mode toggles
  is this how KCard's selection slot is designed to work??
  Should I:

1. Keep the current KCardGrid + #select slot approach (KDS standard pattern)
2. Use a custom layout with external checkboxes (matches original UI exactly, but doesn't use KCardGrid)
   The functionality works correctly in both cases - it's just about the visual layout behavior. Please let me know which approach you prefer

[MisRob]

Hi @vtushar06, thanks! As mentioned elsewhere, I will get back to this work after I am back from vacation later in January.

As for your question - thanks for raising that. Please use the standard KDS pattern KCardGrid and #select slot. It's important to stay with the pattern because under the hood, it takes care of semantics and a11y. I will then have a look at it, and see if we need to adjust KDS.

Also, I noticed that you added a completely new page Studio.. - however in this task, we need to take a different approach from other pages with cards, because we cannot yet migrate the whole page. This will come later and would be far out of scope of work around cards. Would you please revisit the guidance left in #5526 and only replaced the referenced place with the new card in the current CatalogList?

[vtushar06]

Hi @MisRob, thank you for the feedback, I understand you'd like a more minimal approach for this PR.

I followed the pattern from the reference PRs (#5227, #5524, #5525), which all created new complete page components (StudioMyChannels, StudioStarredChannels, StudioViewOnlyChannels). Since the guidance in #5526 said to "replace" the section and "use KCardGrid", I created StudioCatalogList.vue as a complete KDS implementation.

If you prefer a hybrid approach instead, I will make changes accordingly.

[MisRob]

@vtushar06, this issue is a bit different from others for a number of reasons - I think you can just follow the issue's guidance and it should be fine.

[vtushar06]

Yeah @MisRob now I applied changes according to guidance, I got so much into other issue learning that's why I used similar approach.
and cards shift still exists please let me know about after your Holidays.

[vtushar06]

Hii @MisRob, this one is also ready for your review, although I have gone once more in changes so there may not be any issue in review process.

[MisRob]

Thank you @vtushar06, overall looks very good! Only one clarification and one suggestion.

[MisRob]

The test suite looks nice overall, thank you.

After #5536 is in unstable, I will

• Merge unstable to channel-cards
• Then you can merge latest channel-cards to your local channel-cards
• And resolve conflicts if any

Sorry for that - I know that delayed review time contributed to this. I will be ready to support.

But for now, let's wait until we merge #5536.

[vtushar06]

No worries about the delayed review time, I totally understand things come up.
I'll be ready to proceed as soon as #5536 merges

[MisRob]

At this place, we can keep v-model - it will be simpler to maintain.

I think that when you implemented this PR, KCheckbox didn't yet support v-model, but we recently implemented it - you can see the latest documentation. You will need to merge latest unstable to this branch and run pnpm install so that you have access to the latest KDS version.

[MisRob]

Oh sorry, when I was writing this I forgot for a moment that we're targeting channel-cards. So actually let's wait a bit for this update until I do this and then you can resolve it together with test conflicts.

[vtushar06]

Understood, I'll wait for #5536 to merge to unstable, then merge latest channel-cards, update dependencies with pnpm install,and apply the v-model update. Ready to proceed after that.