[Remove Vuetify from Studio] Cards in View-only channels

[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: High

Summary

Remove Vuetify from the channel cards in Channels > View-only.

Currently, ChannelList and ChannelItem that are built with several Vuetify components are used to display the channel list.

To remove these Vuetify dependencies from View-only:

• Create a new page component channelList/views/StudioViewOnlyChannels.vue and update

https://github.com/learningequality/studio/blob/a8476ad241a5d8fc510adf610052b4d58e85a184/contentcuration/contentcuration/frontend/channelList/router.js#L44-L49

to

  {
      name: RouteNames.CHANNELS_VIEW_ONLY,
      path: '/view-only',
      component: StudioViewOnlyChannels,
    },

Note props: { listType: ChannelListTypes.VIEW_ONLY } removal (in contrast to the current ChannelList, StudioViewOnlyChannels will only have logic related to view-only channels)

• In StudioViewOnlyChannels utilize StudioChannelCard and useChannelList (similarly to StudioMyChannels and StudioStarredChannels)

Examine carefully the current user experience and related code (ChannelList, ChannelItem), and ensure no features are lost. Do not modifify ChannelList and ChannelItem.

How to get there

• Login as user@b.com with password b
• Create a new channel
• Share channel as Can view with user a@a.com
• Logout
• Login as a@a.com with password a
• Go to Channels > View-only

Guidance

• Target channel-cards branch
• 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 ChannelList and ChannelItem

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS
• Aspect ratio and size of card thumbnail area

References

• Builds on [Remove Vuetify from Studio] Cards in My Channels #5227 and [Remove Vuetify from Studio] Cards in Starred channels #5524

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]

If still interested, reserved for @yeshwanth235

[yeshwanth235]

Hi @MisRob
I would like to work on this issue. please assign this to me

[LianaHarris360]

Sure @yeshwanth235 I'll assign you.

[mdrafi28]

Hey just checking in about this issue, If no one is actively working on it right now I can take it up,
Let me know if it's okay for me to proceed.

[akolson]

Hi @yeshwanth235! Just checking in to see if you are actively working on this. Do reach out incase you need support on anything. Thanks!