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

studio/contentcuration/contentcuration/frontend/channelList/router.js

Lines 14 to 19 in a8476ad

	{
	name: RouteNames.CHANNELS_EDITABLE,
	path: '/my-channels',
	component: ChannelList,
	props: { listType: ChannelListTypes.EDITABLE },
	},

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