[Remove Vuetify from Studio] Cards in Content Library

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

Hi @vtushar06, channel-cards branch has just been updated to the latest version (therefore the conflicts). After the conflict resolution:

• In CatalogList, this PR should only show the changes it's showing now in this PR
• For catalogList.spec.js would you please preserve the exact version from unstable? Because that's what we completed and reviewed here [Remove Vuetify from Studio] Convert Content Library unit tests to Vue Testing Library  #5536 - that way we won't need to review again.

Then you can run pnpm install to get the latest KDS and you should be set up to complete the work here.

Thank a lot.

[vtushar06]

Hi @MisRob,
done, and Ran pnpm install - latest KDS installed
All tests passing
Ready for review. thanks

[MisRob]

Thanks @vtushar06! Let's have a look at few remaining areas.

[vtushar06]

You were right.I initially removed detailsRouteName thinking it was unused, but after checking the actual behavior, I realized that it is useful. becoz When I removed, clicking a catalog card navigated to the full edit page instead of showing a read-only details modal.
now our StudioChannelcard component handles both catalog (modal navigation) and my channels (direct edit page) contexts. The conditional routes based on whether detailsRouteName is provided.
Thanks

[vtushar06]

heyy @MisRob, can you please look into recents changes as per your review.

[MisRob]

I think there's no need to tie this specifically to catalog context. Would suggest

• Rename detailsRouteName prop to to
  • Add prop documentation that this overrides the default navigation to the channel edit page
  • to prop will accept any router object, in this case

  {
      name: RouteNames.CATALOG_DETAILS,
      params: {
        channelId: this.channel.id,
      },
      query: {
        ...this.$route.query,
        last: this.$route.name,
      },
    }

Then you can also remove the comments on context ~ they won't be needed.

This way StudioChannelCard will be flexible and better readable, and we can easily use it in new contextx (when frameworks like Vue and React started, these principles were called pure/base component).

[MisRob]

^ Also this will resolve the issue with one half of the route (name) being defined in one component, and another half (parameters) in another.

[MisRob]

Thanks @vtushar06 ~ I'd like to improve one aspect, then we should be ready