Repository navigation
[Remove Vuetify from Studio] Alert dialog聽#5472
Description
馃檪 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you鈥檙e requesting an issue, please:
- Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don鈥檛 follow the guidelines won鈥檛 be answered.
- Confirm that you鈥檝e 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
KModalinstead ofAlert - Use
tokens.annotationinstead of currently hardcoded light gray CSS color for "Total storage used: ..." in the "Not enough space" dialog - Remove
Alertfile
Ensure that dialogs interactions are functional as before. Do not refactor any other areas.
How to get there
- Login as
a@a.comwith passworda
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.jsavailableSpacegetter 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
showErrorAlertinThumbnailGeneratortotrue
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-deepor/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 devserversince:hotdoesn't render RTL properly) - All user-facing strings are translated properly
- The
notranslateclass 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-utilsapproach. Instead, use@testing-library/vue(Vue Testing Library).
Activity
durdana3105 commentedon Oct 14, 2025
Hi! 馃憢
I鈥檝e read the contributing guidelines carefully, including the section on using generative AI.
I鈥檇 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 commentedon Oct 14, 2025
Welcome @durdana3105. Thank you, I will assign you.
kart-u commentedon Oct 26, 2025
Hi @MisRob I noticed this issue has been inactive for a while, would it be alright if I took it on?
AlexVelezLl commentedon Oct 27, 2025
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 commentedon Oct 27, 2025
Iam sorry, iam actually busy in exams i won't be able to it!
kart-u commentedon Oct 28, 2025
Hi @AlexVelezLl
As @durdana3105 mentioned they鈥檙e unable to continue due to exams, could you please assign the issue to me?
AlexVelezLl commentedon Oct 28, 2025
Thanks @kart-u! We just assigned this issue to you! If you have any questions, feel free to let us know!
kart-u commentedon Oct 29, 2025
Thank you for assigning this task to me. I鈥檝e completed the work and will open a PR shortly.
However, I noticed something while testing when uploading a large or otherwise invalid file, an alert message correctly appears the first time. But after closing it (using Esc or OK), trying to upload the same invalid file again doesn鈥檛 trigger the alert a second time.
Could you please confirm if this behavior is expected, or if the alert should appear every time such a file is uploaded?
cc @MisRob @AlexVelezLl @AllanOXDi
AlexVelezLl commentedon Oct 30, 2025
Hey @kart-u! It appears that you have discovered a bug in our file uploader. Thanks! You don't need to worry about solving this in your PR. Feel free to ignore it for now. 馃憪
kart-u commentedon Oct 30, 2025
@AlexVelezLl Thank you for clarifying!
I think the issue in
uploader.vuemight be happening because the<input>has an@changeevent, and when we upload the same file again without clearing the previous selection, it doesn鈥檛 detect any change sohandleFilesisn鈥檛 being called.If you don鈥檛 mind, can I also work on this too ??
AlexVelezLl commentedon Oct 30, 2025
Hey @kart-u! I will assign the issue I just created to you. Please feel free to open a PR for that if you find a solution! Just making sure that the fix is in a different PR than the PR that will migrate the Alert Dialog 馃槃.
Could you write a comment on that PR so we can assign it to you? Thanks!
kart-u commentedon Oct 30, 2025
@AlexVelezLl Thanks
I have commented on issue just now!