remove-vuetify-usage-from-content-library

[sunkireddy-Barath]

Summary
This pr removes vuetify from the content library filter bar by replacing vcontainer with a custom flexbox layout and vchip with the studiochip component. the ui and behavior remain unchanged.

Changes:
replaced vcontainer with custom div layout
replaced vchip with studiochip
ensured filter interactions work as before
updated tests using @testing-library/vue

Manual verification:
login with user@a.com / a, go to channels > content library, apply filters, remove chips, and verify clear all works.

Reference:
#5746
AI Usage:
I used an AI agent only to debug and fix a few errors. After applying those fixes, I manually reviewed the code and verified that all filter interactions and tests work correctly to ensure everything functions as expected.

[learning-equality-bot]

👋 Thanks for contributing!

We will assign a reviewer within the next two weeks. In the meantime, please ensure that:

• You ran pre-commit locally
• All issue requirements are satisfied
• The contribution is aligned with our Contributing guidelines. Pay extra attention to Using generative AI. Pull requests that don't follow the guidelines will be closed.

We'll be in touch! 😊

[Copilot]

Pull request overview

This PR removes Vuetify dependencies from the Channels > Content Library filter bar by replacing VContainer/VChip with a custom flexbox container and StudioChip, while keeping filter behavior and UI interactions the same.

Changes:

• Replaced VContainer with a custom .filter-bar-container + flex layout.
• Replaced VChip with StudioChip and updated close handling (@close) and notranslate behavior.
• Updated unit tests to close chips via StudioChip’s remove button ([data-test="remove-chip"]).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogFilterBar.vue	Removes Vuetify components from the filter bar UI by switching to StudioChip and a custom flexbox container.
contentcuration/contentcuration/frontend/channelList/views/Channel/tests/catalogFilterBar.spec.js	Updates chip-closing test helper to target StudioChip’s remove button selector.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

In closeChipByText, chip.closest(...) can return null, which would cause chipContainer.querySelector(...) to throw a TypeError before the expect(closeButton) assertion runs. Adding an explicit assertion that chipContainer is truthy (or using optional chaining and a clearer failure message) would make test failures more actionable.

Suggested change

	const chipContainer = chip.closest('[data-test^="filter-chip"]');
	const chipContainer = chip.closest('[data-test^="filter-chip"]');
	expect(chipContainer).toBeTruthy();

[MisRob]

Please see the guidelines