Replace KResponseWindow with useKResponseWindow in User Profile plugin

[thesujai]

Summary

For testing:

1. First Identified where ResponsiveWindow elements are are used
2. Then play with CSS class of components that will be used when windowBreakpoint is reached.
3. Then verify that the CSS tweaks is consistent with both KResponsiveWindow and useKResponsiveWindow
4. Roll back the CSS tweaks made while testing

Page Affected:

• en/profile/#/ (Though this page only imported KResponsiveWindow and not used)

…

References

Fixes #11333

…

Reviewer guidance

Would it be possible to add a hacktoberfest-accepted label in this PR?
Here is the link: https://hacktoberfest.com/participation/#maintainers
Its fine if for some reasons you aren't able to do so:)
…

---

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.16.0b6.dev0_git.504.g1b32fc16.pex
Windows Installer (EXE)	kolibri-0.16.0b6.dev0+git.504.g1b32fc16-unsigned.exe
Debian Package	kolibri_0.16.0b6.dev0+git.504.g1b32fc16-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.16.0b6.dev0+git.504.g1b32fc16-0.3.0.dmg
Android Package (APK)	kolibri-0.16.0b6.dev0+git.504.g1b32fc16-0.1.0-debug.apk
TAR file	kolibri-0.16.0b6.dev0+git.504.g1b32fc16.tar.gz
WHL file	kolibri-0.16.0b6.dev0+git.504.g1b32fc16-py2.py3-none-any.whl

[thesujai]

Hey @akolson @AllanOXDi, i am not sure in which page is the component user_profile/assets/src/views/ChangeFacility/MergeFacility.vue is referenced. Please let me know so that I can confirm visual test from my side.

[akolson]

Changes look correct to me! Also, no regressions observed. cc @radinamatic @pcenov

[radinamatic]

@akolson Would it be possible to have more detailed reviewer guidance with verification steps for manual QA? Thank you!

[rtibbles]

The only page that seems to be affected for manual QA here is checking that the Merge Facility workflow renders correctly (and without errors), especially on a small browser window.

No need to test the full workflow, just pressing the 'join facility button' and ensuring nothing errors, and that it looks OK on a small browser window.

[akolson]

Thanks @rtibbles. Yes that should be sufficient.

[akolson]

@thesujai to Merge facility, follow the steps below;

1. Set up your device as "On my own"
2. Once set up is complete, create a new admin user
3. Logout of the superuser account and login with the admin user you just created.
4. Go to http://localhost:8000/en/profile/#/
5. Click on the Change button, and this will take you through the self-guided process to change and a merge facility. Please note that you will need set up another device on your local and add the device during the setup as you unfortunately have no access to Zero tier.

[MisRob]

@akolson I think @rtibbles's guidance was meant for QA team rather than @thesujai?

By the way, @thesujai, if you ever needed to set up the other device, there's a guide for it https://kolibri-dev.readthedocs.io/en/develop/howtos/another_kolibri_instance.html. I think that here, it's fine to leave it for our QA or reviewers to test it out.

[pcenov]

No issues observed while manually testing, good to go!

[thesujai]

@akolson @MisRob Okay thank you

[akolson]

Hi @MisRob. I think @thesujai requested for some visual testing guidance too; I guess he wanted to carry out some visual tests on his end.

Hey @akolson @AllanOXDi, i am not sure in which page is the component user_profile/assets/src/views/ChangeFacility/MergeFacility.vue is referenced. Please let me know so that I can confirm visual test from my side.

[MisRob]

@akolson Ah okay, thank you. I just wanted to clarify that even though it's welcome, it's not a blocker as QA folks will be too jumping in.

[MisRob]

There's a problem with tests though

[rtibbles]

The issue is the window.matchMedia is not a function error, it seems - so rebasing this onto latest develop should resolve the test issue (unless I missed other errors in the tests).