[Remove Vuetify from Studio] Finish button and Incomplete resource 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 Finish button and Incomplete resource found modal in Channels > Edit channel:

VBtn is currently used for the Finish button, and MessageDialog.vue built with several Vuetify components for the modal.

Remove dependencies on Vuetify by:

• Using KModal instead of MessageDialog
• Using the most suitable KDS button or link components for the Finish button

Ensure that all buttons / links work exactly as before. Do not modify MessageDialog.vue or how it's used at another places. Do not refactor any other areas.

How to get there

• Login as a@a.com with password a
• Go to Channels > Published Channel
• Select Sample video
• Click Edit
• Remove information from a required field, e.g. Learning Activity
• Click Finish

Guidance

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

Out of Scope

• Do not modify 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).

[Virajjai]

@MisRob can i work on this sir !!

[nishatalam24]

Hello

I have read the contributing guidelines and would like to work on this issue.

I see another contributor has also shown interest, but since it has not been assigned yet, I wanted to offer my help. If the issue is still available, could you please assign it to me?

Thank you!

[marcellamaki]

Hi @Virajjai - thank you, I'll assign you.

@nishatalam24 - thank you for your interest. I see that you've expressed interest in other issues, and I'll assign you to two of those instead. As noted in the contributor guidelines, we assign up to two active issues per contributor, so please only ask for assignments on two issues at a time.

[Virajjai]

@marcellamaki could u pls help me out which files I have to look into and changes to be done !!

[marcellamaki]

Hi @Virajjai -- this issue lists in detail how to navigate this in the UX, which files are related to this work, and what changes in required in the acceptance criteria. If some parts of this are unclear, I can answer questions you have, but please ask specific questions that indicate that you've read the issue thoroughly, what you understand so far, and what is still confusing. Thank you.