[Remove Vuetify from Studio] Create new folder dialog in Move modal

[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 Create new folder dialog in Edit channel > Move resource, including validation:

VForm, VTextField, Vuetify-based validation, VBtn, and MessageDialog built with several Vuetify components, is currently used.

Remove these dependencies on Vuetify in this specific location by:

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

Do not refactor any other areas. Follow acceptance criteria below.

How to get there

• Login as a@a.com with password a
• Go to Channels > Published Channel
• Select Sample video
• Click Move
• Click Add new folder

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

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS
  • Validation message will persist until the error is resolved

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

[ANAS727189]

Hi @MisRob . Please assign this issue to me. I will fix it.

[MisRob]

Hi @ANAS727189, I've just assigned you another issue, so let's focus on that. After you open a PR, you're welcome to ask for assignment on an another issue. Thanks!

[AadarshM07]

@MisRob, would it be alright if I work on this issue as well?

[MisRob]

Hi @AadarshM07, I'm happy to assign you, thank you.

[AadarshM07]

@MisRob Hey, after migrating everything to KDS, the newTopicModal.spec.js test fails since all the components rendered there are Vuetify-based, including the VBtn, which has specific interaction tests. But now that we’re migrating to KModal, it has built-in props to handle buttons. So if I rewrite the test, I think it can only simulate interactions, not test them through the actual DOM.

One of the options could be to remove this test and instead tweak moveModal.spec.js to ensure proper rendering of KModal on the screen. What do you think about this?

[MisRob]

Hi @AadarshM07,

I think you should be able to click on KModal buttons in unit tests via find(<selector>). Less preferred, but alternative option is to wrapper.findComponent({ name: 'KModal' }).vm.$emit('submit').

On Studio-side, there is no need to test KModal's logic. We'd rather want to cover Studio-specific logic. Questions such as:

• Is the modal hidden when it should be hidden?
• It it displayed when it should be displayed?
• When submit button is clicked, is the correct action performed?

and similar, depending on the context.

[MisRob]

As long as you keep the above in mind, you're welcome to try re-organizing and rewriting tests in whatever way seems to be suitable :) Our current test suites are not always great.