[Remove Vuetify from Studio] Channel collections table

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: Medium

Summary

Remove Vuetify from the collections table in Channels > Collections:

Currently, ChannelSetList built with several Vuetify components is used.

To remove these Vuetify dependencies:

• Create a new component, StudioCollectionsTable
• Examine ChannelSetList and ChannelSetItem and re-implement all features in StudioCollectionsTable
• Use StudioCollectionsTable on this page instead of ChannelSetList

StudioCollectionsTable requirements

• Utilizes KTable for table interface
• Utilizes StudioCopyToken in tokens column
  • StudioCopyToken displays a Token label that shouldn't appear when used in tables - ignore it for now, it will be addressed in a separate task
• Uses same user experience patterns as the table in our other platform Kolibri in Facility > Users (table code):
  • Instead of Options button, has the 'three dots' button dropdown
  • When there is not enough space on the screen, first and last columns become sticky (see Table with sticky columns in KTable docs)
  • Utilizes KPageContainer as table container. On all screen widths, container width is the same as in Kolibri, with maximum 1440px.

Note: Due to these requirements, the new look and experience will notably differ from the current version. This is intended - do not try to override KTable to resemble the original (the goal is a first draft version of the refactored page that a core team member will then take over and complete in cooperation with our designers).

Do not modify ChannelSetList or ChannelSetItem.

How to get there

• Login as a@a.com with password a
• Go to Channels > Collections

Guidance

• How to run Kolibri
• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not refactor any other areas of the codebase
• Do not modify ChannelSetList or ChannelSetItem

Expected UI/UX changes

Many. Details to be clarified later. See the Note in the Summary section.

Acceptance criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• User-facing strings are translated (except in Administration)
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

[MisRob]

Following up on your request for a more complex issue @Prashant-thakur77 - if you'd be interested in this one, let me know.

[MisRob]

Thank you @Prashant-thakur77. I also mentioned you in another issue so if you will be interested in the other too, just address them slowly step by step - there's enough time.

[MisRob]

Ah your comment disappeared @Prashant-thakur77 - not sure if that was intentional. Let me know ;)

[Prashant-thakur77]

@MisRob You can go ahead and assign me this issue .Happy to work on it :)

[Prashant-thakur77]

Thank you @Prashant-thakur77. I also mentioned you in another issue so if you will be interested in the other too, just address them slowly step by step - there's enough time.

Thanks, @MisRob! I’d love to work on that issue too. I’m just not sure if it’s allowed to work on two medium-level issues simultaneously, but if it’s fine, I’d be glad to help with that as well.

[MisRob]

In this case, yes @Prashant-thakur77 - you could start with this one - we won't likely merge it right away because I will need some more time for internal feedback than usual, and so as I'm dealing with it, you could have a look at the other one. That said - ultimately choose the order of work and kinds of issues that make sense in regard to your motivation. We make exceptions when it makes sense - if invited by a core team member, no worries :)

[Prashant-thakur77]

Got it, thanks for clarifying! I’ll start with this one and then check out the other issue as well.