[Remove Vuetify from Studio] 'About collections' link and modal in 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: Low

Summary

Remove Vuetify from Learn about collections button/link and About collections modal in Channels > Collections.

ActionLink.vue together with MessageDialog.vue that are built with several Vuetify components are currently used for this link and modal:

studio/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetList.vue

Lines 14 to 38 in a8476ad

	<ActionLink
	:text="$tr('aboutChannelSetsLink')"
	class="mx-2"
	@click="infoDialog = true"
	/>
	<MessageDialog
	v-model="infoDialog"
	:header="$tr('aboutChannelSets')"
	>
	<p>
	{{ $tr('channelSetsDescriptionText') }}
	</p>
	<p>
	{{ $tr('channelSetsInstructionsText') }}
	</p>
	<p class="red--text">
	{{ $tr('channelSetsDisclaimer') }}
	</p>
	<template #buttons>
	<VSpacer />
	<VBtn @click="infoDialog = false">
	{{ $tr('cancelButtonLabel') }}
	</VBtn>
	</template>
	</MessageDialog>

Remove dependencies on Vuetify by:

• Using KButton with basic-link appearance instead of ActionLink
• Using KModal instead of MessageDialog
• Using palette.red.v_500 KDS color for red text instead of red--text

Do not modify ActionLink.vue and MessageDialog.vue.

How to get there

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

Guidance

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

Out of Scope

• Do not modify ActionLink.vue and MessageDialog.vue
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS

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 (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• 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).

[ritoban23]

@MisRob I'd like to take up this issue

[MisRob]

Hi @ritoban23, thank you and welcome. Before my colleagues assign you, I wanted to mention that we require new contributors to read the contributing guidelines, and pay extra attention to Using generative AI section. Links are in the issue header. Would you please confirm you've familiarized yourself with it?

[ritoban23]

@MisRob Hi! Yes, I’ve gone through the contributing guidelines

[LianaHarris360]

Hi @ritoban23 thanks for confirming, I will assign you to this issue. Please let us know if you have questions or need any clarifications :)