[Remove Vuetify from Studio] Copy token input 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: Medium

Blocked by

learningequality/kolibri-design-system#1030

Summary

Migrate copy token input in Settings > Account from Vuetify to Kolibri Design System.

shared/views/CopyToken that is built with VTextField is used for the token. To remove this dependency from Account/index, create a new StudioCopyToken component with:

• KTextbox as basis
• KIconButton copy button and logic
• KCircularLoader for loading state

Then use StudioCopyToken in Account/index instead of CopyToken.

How to get there

• Login as user@a.com with password a
• Go to Settings > Account

Guidance

• Read the project this issue is part of
• When implementing the copy button, pay attention to a11y. Kolibri's search input clear button is a good example.

Out of Scope

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

Expected UI/UX changes

• Minor visual differences naturally stemming from the use of KDS
• When loading, instead of the blue linear loader on the bottom of the input, there will be a circular loader displayed in the place of the input

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 Vue Testing Library.

[NihalShinde4933]

Hi @MisRob 👋,

I’ve carefully read the Contributing Guidelines, including the section on using generative AI. I’d love to contribute to this issue and would like to request it be assigned to me.

I'll ensure the migration follows all design, accessibility, and implementation expectations outlined above. Looking forward to your guidance!

Thanks! 🙌

[MisRob]

Hi @NihalShinde4933, happy to. Thank you!

[MisRob]

@NihalShinde4933 One thing to note, we haven't yet released Kolibri Design System version that has this update learningequality/kolibri-design-system#1030 in it. But I think it will be released this week and then I will make sure Studio is updated so you have readonly available. We'll be in touch. Meanwhile, you can resolve all other work, and temporarily work with KTextbox as is.

[NihalShinde4933]

Thank you for the heads-up, @MisRob! 😊 I’ll move ahead with the implementation using KTextbox as it currently stands. Once the Kolibri Design System update with readonly is released and integrated, I’ll make the necessary adjustments. Looking forward to the update! 🚀