[Remove Vuetify from Studio] Cards in My 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 https://github.com/learningequality/studio/issues/5060.

Complexity: High

Summary

Remove Vuetify from the channel list in Channels > My Channels.

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

To remove these Vuetify dependencies from My Channels, create a new component channelList/views/StudioMyChannels.vue and then update

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

to

  {
    name: RouteNames.CHANNELS_EDITABLE,
    path: '/my-channels',
    component: StudioMyChannels
  }

Do not modifify ChannelList.vue and ChannelItem.vue.

StudioMyChannels requirements

• Contains button and card list built with:
  • KButton for New channel button
  • KCardGrid with 1-1-1 layout and KCard in horizontal orientation and small thumbnail for cards list
  • KIconButton with KDropdownMenu for card dropdown
  • KModal for Delete this channel dialog
• dir="auto" and notranslate class needs to be applied on channel description and name
• With useKResponsiveWindow detect whether windowIsSmall. If yes, change card layout to vertical. See KCardGrid: Fine-tuning responsiveness.
• Follow KCard: Interactive elements to implement footer info icon as a router link and make Ctrl+click/enter open the channel details in a new tab.
• For footer star icon, use existing ChannelStar.vue
• For thumbnail area, don't use Thumbnail.vue. Use KCard features for managing the thumbnail area. Preserve placeholder icon responsive behavior as browser window resizes. Follow KCard: Thumbnail and KIcon: Responsive
• Use KCardGrid skeleton loaders when channel data is loading
• For JavaScript logic for fetching and ordering channels, and creating a new channel, copy code from ChannelList.vue
  • Note listType prop removal from RouteNames.CHANNELS_EDITABLE route above. In contrast to shared ChannelList that is re-used from multiple pages and requires related conditional logic, StudioMyChannels will be only used from My Channels. Therefore, do not add listType prop to StudioMyChannels. Preserve only logic that was previously related to ChannelListTypes.EDITABLE type. Cleanup copied code to not contain listType conditions and code for other types, such as ChannelListTypes.PUBLIC.
• Not all features (e.g. View channel on Kolibri dropdown option) are always apparent in My Channels, depending on channel type. Examine ChannelItem and migrate all conditional features that are relevant to My Channels.

Guidance

• 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.vue and ChannelItem.vue and their children components
• Skip Copy channel token modal (addressed in another pull request)

Expected UI/UX changes

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

Acceptance criteria

General

• [ ] The specification above is followed.
• [ ] Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• [ ] 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
• [ ] All user-facing strings are translated properly
• [ ] The notranslate class has 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).

[yeshwanth235]

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

[MisRob]

Thanks @yeshwanth235, much appreciated

[yeshwanth235]

Hi @MisRob

Major development is done. Will complete testing and test case writing and raise the PR Please check the below link. Let me know, if there are any changes required. https://drive.google.com/file/d/1PP9cCbMBvK0SMdVNeBtX2_b91gspmaaW/view?usp=sharing

[MisRob]

Hi @yeshwanth235, the preview looks amazing! Thanks a lot.

It seems you also had a look at other tabs, such as Starred. I will definitely welcome that very much - I would just ask you to open first pull request only with code for My Channels tab. It will help us with review process and larger refactoring strategy. We can continue with other tabs after we merge My Channels, and I'd be happy to assign you if you already have code for it.

[yeshwanth235]

Hi @MisRob Need few clarification in channelItem component

Item-1:

• There is dropdown item called copyToken. Which shown when allowEdit && channel.published Line
• The same copyToken is present with !allowEdit && channel.published. which will be shown beside of info icon button. Line

what is difference giving the copy button in dropdown and beside the info button?

Item-2: Reference Here in mounted. Help me to understand this logic.
What does it do? I searched for the mutation link unable find it.

Kindly help to answer these quesitons

[akolson]

Hi @yeshwanth235! Thank you for the questions.

For Item 1, could you please clarify what you mean by "what is difference giving the copy button in dropdown and beside the info button?". Maybe attaching a screenshot and highlighting the buttons of interest could be helpful?

For Item 2, the added property is used in the context of channel invitations, I think--to update the channel currently being viewed.

Do let us know if you have any further questions. Thank you!

[yeshwanth235]

Hi @akolson

Here are the screen shots attached for item 1

Image-1 Image - 2

To show copy feature on card this is the condition !allowEdit && channel.published To show copy feature on card dropdown this is the condition allowEdit && channel.published

My point is that. we can show it in one place. Either in dropdown or in the card footer.

[akolson]

@yeshwanth235 You’re right—they achieve the same outcome, but are mutually exclusive, which makes me think this was intentional for different usage contexts (am not too sure about). I’ll check in with the team to get clarification before we make any changes.

For now, it’s best to stay within the scope of this issue (as clearly outlined), and if needed, we can create an enhancement issue to address it later. Thanks for raising this!

[MisRob]

@yeshwanth235 I only put 'help wanted' here so I can track it a bit better - the assignment still applies of course! Thank you.

[MisRob]

This is resolved on channel-cards branch. Leaving the issue open until we merge it with other work to unstable.

[learning-equality-bot[bot]]

Automatically unassigning @yeshwanth235 due to no comments here, or updates on the associated pull request for 1 month. @yeshwanth235, if you're still interested in this issue or already have work in progress, please message us here, and we'll assign you again. Thank you!