[Remove Vuetify from Studio] Side panel (container only) 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 https://github.com/learningequality/studio/issues/5060.

Complexity: High

Summary

Remove Vuetify from the side panel (container only) in Channels > Content Library:

Currently, VNavigationDrawer is used.

To remove this Vuetify dependency:

• (1) For small screens: Use the existing shared/views/SidePanelModal to display panel content
  • If any SidePanelModal adjustments are needed, check the other places using it and avoid regressions
• (2) For medium/large screens: Don't use SidePanelModal and instead display panel content as a non-modal page section

This will likely require re-organizing related components, such as wrapping inner panel content in a new component to be re-used for both (1) and (2).

Run our other platform Kolibri and refer to its side panel implementation - replicate this user experience in Studio closely.

https://github.com/learningequality/kolibri/blob/b323071d87f2ee03549c220f69dd15add72464c0/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue#L121-L143

On mobile screens, the modal should take the full screen width like it does in Kolibri (unlike the current Studio partial-width behavior).

Pay attention to keyboard navigation and other accessibility features. Ensure there are no regressions in filtering. Do not refactor inner panel contents such as selects and other controls.

How to get there

• Login as [email protected] with password a
• Go to Channels > Content Library

Guidance

• How to run Kolibri
• 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 refactor inner panel contents such as selects and other controls

Expected UI/UX changes

On mobile screens, the modal will take the full screen width unlike the current partial-width behavior.

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)
• [ ] User-facing strings are translated (except in Administration)
• [ ] 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).

[MisRob]

Following up on your request for a more complex issue @Prashant-thakur77 - if you'd be interested in this one, let me know.

[Prashant-thakur77]

If its fine I would like to work on this too :)

[MisRob]

Thank you @Prashant-thakur77, appreciated

[Prashant-thakur77]

Hlo @MisRob I was just going through for the setup of kolibri in my local .I have done the setup normally(without docker) and it is working fine But when i try to setup using docker everthing works fine but the screen is on a single page and the console errors are such Failed to load resource: net::ERR_SOCKET_NOT_CONNECTED

Well the work could be done without docker,I would still like to know what might be causing this?Please do share some insight.

[Prashant-thakur77]

Hlo @MisRob I found that kolibri is using SearchFiltersPanel component for searchng .So do i need to create this component and if so should i create it in shared/views folder?

[MisRob]

@Prashant-thakur77 just try to create meaningful component structure in this Studio context (but don't refactor the current inputs themselves).

This will likely require re-organizing related components, such as wrapping inner panel content in a new component to be re-used for both (1) and (2).

As long as you follow the requirements and guidance in the issue, it should be fine. Then we can fine-tune details in the PR.

[MisRob]

@Prashant-thakur77 I don't know what's causing problems with Docker - you can search Kolibri GitHub Discussions to see if you find similar report with some advice, or report it.

[Prashant-thakur77]

Hello @MisRob, I’ve created the PR. Most of the work is completed—both UI/UX and functionality are done. I’ve raised the PR so we can proceed with fine-tuning simultaneously. Some minor modifications may still be required after the review.

I also need a small clarification: should the test cases be written for the new component itself, or should they be added to the existing CatalogFilters component where the new component is being used?

Let me know your preference.

[LianaHarris360]

Hi @Prashant-thakur77, updating the catalogFilters.spec.js file like you’ve done is perfectly fine. We will assign your PR to be reviewed soon!