[Remove Vuetify from Studio] Saved searches dialogs

[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: Low

Summary

Migrate the following two dialogs in Edit channel > Import from other channels from Vuetify to Kolibri Design System.

Several VList... components, VDivider, and MessageDialog and ActionLink built with several Vuetify components, are currently used.

Remove these dependencies on Vuetify in this specific location by:

• Replace MessageDialog by KModal
• Replace ActionLink with the most suitable KDS button or link components
• Replace VList... and VDivider by custom styles and semantic markup

Ensure that the dialog work exactly as before. Do not modify ActionLink or MessageDialog. Do not refactor any other areas.

How to get there

• Login as [email protected] with password a
• Go to Channels > Imported channel
• Click Add > Import from channels
• Search for "video"
• Click Save search
• Click Saved searches
• Click Delete search icon

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 MessageDialog

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

[vtushar06]

Hii @MisRob, can I work on this issue as well, as of now I am not assigned to any issue, would love to resolve this, Thanks

[MisRob]

Hi @vtushar06 - I've just assigned you another issue. Also, I'm just preparing a medium complexity issue for you that you asked for and will share soon. If you're still interested in it, perhaps we can leave smaller issues for new contributors?

[vtushar06]

Sure thing @MisRob! No problem at all — I completely understand. I’m glad you’re preparing a medium complexity issue.

[JanaKocakova]

Hello! I’d like to contribute to this issue. It looks like a good learning opportunity. Could you please assign me so I can start working on it? Thank you in advance.

[MisRob]

@JanaKocakova Ahoj Jani, zdravím do sousedního Slovenska :)

Happy to assign you. There's plenty of links and guidance in the parent project that will be helpful.

Out of curiosity - have you found us via Hacktoberfest or somehow else?

[JanaKocakova]

Zdravím :).

Thanks I will check parent project / issue for more info.

I just randomly stumbled upon this project via GitHub search when I was looking for some beginner friendly issue.

[MisRob]

Good then, thanks for sharing.

[AnvayKharb]

Is this issue resolved ? can i work on this ?

[JanaKocakova]

Not yet. I am working on it. @AnvayKharb

[vtushar06]

Hii @JanaKocakova, any updates over this?, if you stuck anywhere please let me know if I would able to help you out.

[Prashant-thakur77]

Hii @JanaKocakova, any updates over this?, if you stuck anywhere please let me know if I would able to help you out.

Completely agree with you, @vtushar06 — well said! :)

Do let us know, @JanaKocakova, if you’re facing any issues or need any assistance.

[MisRob]

Hello @Prashant-thakur77 and @vtushar06, Jana mentioned she's working on it just last week.

If you're interested in collaborative experience, that's wonderful - I would suggest you use our Slack #dev-community channel, where after we've assigned you with a new task, you can invite other contributors to co-hack on it and see if someone is interested.

Here on GitHub, I'd like to ask you to be thoughtful about how you use mentions - pinging people frequently and repeatedly on status can create a sense of pressure. Core team members will take care of re-distributing work and check-in with assignees when the time comes. Thank you.

[JanaKocakova]

Thanks for your patience. It took me a bit longer to get my development environment running properly on WSL (Kali). I ran into several issues related to version conflicts between different tools (Redis, Postgres, MinIO, Celery). But it should be ok now and I can now move forward.

[MisRob]

Hi @JanaKocakova - since it's been few weeks from the last message, I'd like to check-in. Do you have work in progress or would it be better to unassign at this point? We typically free up an issue after around a month of inactivity, and recommend contributors to request another issue whenever there's more time. Let me know what works best.

[JanaKocakova]

Hello, thank you for asking, I apologise for the time delay. It was caused mostly by problems with setting up environment on wsl and my health problems.

I do want to continue working on this issue. I’ve now been able to reproduce the dialogs, identify the Vue components involved, and I’ve started migrating them to the KDS equivalents. Once the migration is complete, I want to add a few simple unit tests as well.

I expect to open a PR within the next 7 days. Thank you for your patience!

[learning-equality-bot[bot]]

Season’s greetings! 👋

We’d like to thank everyone for another year of fruitful collaborations, engaging discussions, and for the continued support of our work. Learning Equality will be on holidays from December 22 to January 5. We look forward to much more in the new year and wish you a very happy holiday season!

Are you preparing for Google Summer of Code? See our GSoC guidelines.

[MisRob]

Thanks for quick reply @JanaKocakova - please continue working then, since you have it actively in progress. Thank you!