[Remove Vuetify from Studio] Collection name input and validation in Channels - New collection

[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 the collection name input, including validation, on Channels > New collection page:

VForm, VTextField, and Vuetify-based validation is currently used:

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

Lines 41 to 51 in a8476ad

	<VForm ref="channelsetform">
	<VTextField
	v-model="name"
	:rules="nameRules"
	:label="$tr('titleLabel')"
	maxlength="200"
	counter
	box
	data-test="input-name"
	/>
	</VForm>

Remove dependencies on Vuetify by:

• Replace VForm by <form>
• Replace VTextField by KTextbox
• Use generateFormMixin for validation

Do not refactor any other areas.

How to get there

• Login as user@a.com with password a
• Go to Channels > Collections
• Clikc New collection button

Guidance

• You can see https://github.com/learningequality/studio/pull/5089/files for a successfully finished similar task
• 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

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).

[AadarshM07]

Hey @MisRob ,
Can you assign this to me? I’d be happy to make another contribution!

[akolson]

Hi @AadarshM07! Sure--thank you!

[AadarshM07]

@MisRob , I'm working on this. Sorry for the delay. I will update with a PR at the earliest

[MisRob]

No problem, take your time @AadarshM07. Thanks for the note - that's helpful.