[Remove Vuetify from Studio] Buttons / links in Related tab

[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 in Edit resource > Related tab from Vuetify to Kolibri Design System.

shared/views/ActionLink that is built with Vuetify components, VBtn, VBtn + Icon + VTooltip are currently used to show them. To remove these Vuetify dependencies, replace them in this specific location with the most suitable KDS button or link components. Ensure that all buttons / links work exactly as before. Do not modify ActionLink or refactor any other areas.

How to get there

• Login as a@a.com with password a
• Go to Channels > Published Channel
• Select Sample video
• Click Edit
• Go to Related tab

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

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

[nishatalam24]

Hello! I have read the contributing guidelines and would like to work on this issue. Could you please assign it to me?

Thank you!

[marcellamaki]

Thank you @nishatalam24, I'll assign you.

[nishatalam24]

I have opened a pull request that resolves this issue:

The fix migrates all buttons and links in the "Related" tab from Vuetify components to the Kolibri Design System (KDS). Specifically:

• <VBtn> has been replaced with <KButton>.
• <ActionLink> has been replaced with <KButton appearance="basic-link">.

All functionality has been tested and verified. The visual style now matches KDS standards.

[marcellamaki]

Thank you @nishatalam24! We will assign the PR to someone on our team for review. Please anticipate that you may not get review comments until next week.

[iyertrisha]

Hello, is this issue still open for contributing? I would like to take it up if it is, thanks!

[MisRob]

Hi @iyertrisha - welcome. There's already a PR submitted. See the contributing guidelines with the link to all issues available for assignment.

[MisRob]

We haven't heard from @nishatalam24 for a long time already. Agreed with @akolson that we will unassign and let someone else to complete this task. For a new assignee - you will need to work in a new branch, but please refer to #5387 and follow existing @akolson's review carefully.