[Remove Vuetify from Studio] Buttons/links and dropdown in Content library

[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 buttons/links and dropdown in Channels > Content library from Vuetify to Kolibri Design System.

VBtn, VList..., BaseMenu and ActionLink built with several Vuetify components, are currently used.

Remove these dependencies on Vuetify in this specific location by:

• Replace VBtn and ActionLink with the most suitable KDS button or link components
• Replace BaseMenu + VList... dropdown by KButton with KDropdownMenu

Don't remove $vuetify.breakpoint usage.

Ensure that button/link and dropdown interactions are functional as before. Do not modify ActionLink or BaseMenu. Do not refactor any other areas.

How to get there

• Login as a@a.com with password a
• Go to Channels > Content library
• Check/uncheck Starred
• Click Download a summary of selected channels
• Resize the screen to small

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
• Do not modify ActionLink or BaseMenu

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).

[Prashant-thakur77]

@MisRob I would like to work on it

[MisRob]

Hi @Prashant-thakur77, thank you. Before taking on more tasks, I wanted to check on what's status of #5425? Do you still plan to work on it?

[Prashant-thakur77]

@MisRob I am currently working on the email issue and plan to raise the PR by the end of this week. I was occupied with my exams earlier, but there has been steady progress on the issue. The work is actively in progress.

[MisRob]

That's fine @Prashant-thakur77 - take all the time you need. I was asking to better understand whether it's suitable to assign an another issue. Especially for medium and higher complexity tasks, I'd recommend to open a PR first, and then get assigned another issue - that way, you won't be under pressure in case the current task takes longer than expected, and it's also easier for maintainers. Thank you.

[yeshwanth235]

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

[MisRob]

Thank you @yeshwanth235