[Remove Vuetify from Studio] Alert dialog

[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

Migrate the following dialogs in Edit channel from Vuetify to Kolibri Design System.

shared/views/Alert built with several Vuetify components is currently used.

Remove dependencies on Vuetify in these specific locations by:

• Use KModal instead of Alert
• Use tokens.annotation instead of currently hardcoded light gray CSS color for "Total storage used: ..." in the "Not enough space" dialog
• Remove Alert file

Ensure that dialogs interactions are functional as before. Do not refactor any other areas.

How to get there

• Login as a@a.com with password a

File upload

• Go to Channels > Published Channel
• Click Add > Upload files
• Try upload a file larger than 210 MB and an unsupported file type
• To simulate full storage, temporarily change shared/vuex/session/index.js availableSpace getter to:

availableSpace(state, getters) {
  return 10;
  // return getters.totalSpace - getters.usedSpace;
},

Thumbnail generation

• Go to Channels > Published Channel
• Select Topic 1
• Click Edit details
• Temporarily change showErrorAlert in ThumbnailGenerator to true

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

Acceptance criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no ::v-deep or /deep/ selectors.
• 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).

[durdana3105]

Hi! 👋
I’ve read the contributing guidelines carefully, including the section on using generative AI.

I’d like to work on this sub-issue of #5060 to migrate the specified dialogs in Edit Channel from Vuetify to Kolibri Design System.
I will ensure that KModal is used instead of Alert, tokens.annotation replaces hardcoded colors, and all dialog interactions remain fully functional without affecting other areas.

Please assign this issue to me. 🚀

[MisRob]

Welcome @durdana3105. Thank you, I will assign you.

[kart-u]

Hi @MisRob I noticed this issue has been inactive for a while, would it be alright if I took it on?

[AlexVelezLl]

Hi @durdana3105! Have you been able to make any progress? No rush, just checking in!

@kart-u! We usually wait a bit longer before unassigning a contributor due to inactivity, so that we won't be unassigning @durdana3105 yet 👐.

[durdana3105]

Hi @durdana3105! Have you been able to make any progress? No rush, just checking in!

@kart-u! We usually wait a bit longer before unassigning a contributor due to inactivity, so that we won't be unassigning @durdana3105 yet 👐.

Iam sorry, iam actually busy in exams i won't be able to it!

[kart-u]

Hi @AlexVelezLl
As @durdana3105 mentioned they’re unable to continue due to exams, could you please assign the issue to me?