[Remove Vuetify from Studio] 'Data export started' alert in Settings - Account

[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 Data export started alert in Settings > Account from Vuetify to Kolibri Design System.

shared/views/Alert that is built with several Vuetify components is used to show this alert. To remove this dependency from Account/index, use KModal instead of Alert.

How to get there

• Login as user@a.com with password a
• Go to Settings > Account
• In code, temporarily modify showExportDataNotice to display the alert

Guidance

• Read the project this issue is part of

Out of Scope

• Do not refactor any other areas of the codebase
• Do not modify Alert

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
• 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

[yeshwanth235]

Hi @MisRob,
Need some clarification.

You mean migrate the Alert component which is using Vuetify components to KModel.
Or
Replace the Alert component with KModel.

[MisRob]

Hi @yeshwanth235.

We don't want to do any chances to Alert (I try to mention guidance like this in "Out of Scope" section).

Just to replace Alert component with KModal, and only at this particular place (nowhere else). So it'll be a small change.

[yeshwanth235]

Hi @MisRob
I would like to work on this issue.

[MisRob]

Good to hear, I will assign you @yeshwanth235