[Remove Vuetify from Studio] Content library filter bar

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

Overview

Remove Vuetify from the filter bar in Channels > Content Library.

Complexity: Low

Context

Filter bar in Channels > Content Library:

The Change

Remove Vuetify dependencies from the filter bar in Channels > Content Library by:

• Replace VContainer by custom styles
• Replace VChip with StudioChip

Ensure that all interactions are functional as before. Do not refactor any other areas of the codebase.

How to Get There

• Login as user@a.com with password a
• Go to Channels > Content Library
• Interact with the filters

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

• None

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 regressions in the printing preview
• 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).

References

Sub-issue of #5060

[Swoyamjeetcodes]

can i work on this ?

[Abhinavpatra]

Hey, I'm certain I can finish this and get back to you, are there any other specific pages as well where it shouldn't be visible? @MisRob
If you're okay with me working on this, then you can def assign me this issue

[tannivra]

Can I be assigned to this? I'm a newcomer and have been studying the codebase so I would love to work on a real issue.

[klouds27]

i'd like to work on this issue and can open a pr with tests.

[rajeshuchil]

Hi @MisRob
I’d like to work on this issue.

[deepakmarudi]

Hi @MisRob ,

I have been exploring the codebase and would be happy to work on implementing the changes described here, replacing the Vuetify components in the Content Library filter bar while ensuring that the interactions and UI remain unchanged.

Please let me know if I can be assigned to this issue.

[sunkireddy-Barath]

Hi @MisRob, I have read the guidelines and would like to work on this issue. I plan to replace the vuetify components in the content library filter bar with kolibri design system components while keeping the same behavior. Could you please assign it to me?

[MisRob]

Thanks all. I assigned @Swoyamjeetcodes