KDS to Studio: Replace ResponsiveDialog by KModal in InfoModal

[MisRob]

Summary

Description of the change(s) you made

Replace ResponsiveDialog by KModal in InfoModal, which affects the following:

• storage request form in settings
• visibility, license, and mastery model dropdowns on resource edit page

Manual verification steps performed

Storage request form in settings

1. Go to "Settings" -> "Storage" tab
2. Click "Open form" in "Request more space" section
3. See the help icon next to "Who can use your content?"
4. Click the icon
5. See the modal with information on licenses to appear
6. Close the modal by clicking "Close" button or by pressing "Escape" key

Visibility dropdown on resource edit page

1. Go to a channel editor for a channel that you can edit
2. Go to the edit page for a resource
3. Navigate to "Audience" section of "Details" tab
4. See the help icon next to "Visible to" dropdown
5. Click the icon
6. See the modal with information on resource visibility to appear
7. Close the modal by clicking "Close" button or by pressing "Escape" key

License dropdown on resource edit page

1. Go to a channel editor for a channel that you can edit
2. Go to the edit page for a resource
3. Navigate to "Source" section of "Details" tab
4. See the help icon next to "License" dropdown
5. Click the icon
6. See the modal with information on licenses to appear
7. Close the modal by clicking "Close" button or by pressing "Escape" key

Mastery model dropdown on resource edit page

1. Go to a channel editor for a channel that you can edit
2. Go to the edit page for an exercise resource
3. Navigate to "Assessment options" section of "Details" tab
4. See the help icon next to "Mastery criteria" dropdown
5. Click the icon
6. See the modal with information on exercises to appear
7. Close the modal by clicking "Close" button or by pressing "Escape" key

Screenshots

Storage request form in settings

Before	After

Visibility dropdown on resource edit page

Before	After

License dropdown on resource edit page

Before	After

Mastery model dropdown on resource edit page

Before	After

Does this introduce any tech-debt items?

Nothing that I am aware of.

---

Reviewer guidance

How can a reviewer test these changes?

Please follow "Manual verification steps"

References

Part of learningequality/kolibri-design-system#157

Comments

An alternative solution would be to get rid of InfoModal altogether and use KModal directly from the places where InfoModal is used. I've decided to keep InfoModal because I find it to be a useful abstraction as it also contains the logic related to the info icon and opening/closing the modal which would otherwise need to be implemented in every component that uses InfoModal.

---

Contributor's Checklist

PR process:

• If this is an important user-facing change, PR or related issue the CHANGELOG label been added to this PR. Note: items with this label will be added to the CHANGELOG at a later time
• If this includes an internal dependency change, a link to the diff is provided
• The docs label has been added if this introduces a change that needs to be updated in the user docs?
• If any Python requirements have changed, the updated requirements.txt files also included in this PR
• Opportunities for using Google Analytics here are noted
• Migrations are safe for a large db

Studio-specifc:

• 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. icons, user-generated text)
• All UI components are LTR and RTL compliant
• Views are organized into pages, components, and layouts directories as described in the docs
• Users' storage used is recalculated properly on any changes to main tree files
• If there new ways this uses user data that needs to be factored into our Privacy Policy, it has been noted.

Testing:

• Code is clean and well-commented
• 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
• Any new interactions have been added to the QA Sheet
• Critical and brittle code paths are covered by unit tests

---

Reviewer's Checklist

This section is for reviewers to fill out.

• 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

[MisRob]

I removed this test because this behavior is the responsibility of InfoModal and is already tested there.

[MisRob]

I removed this test because this behavior is the responsibility of InfoModal and is already tested there.

[marcellamaki]

This looks good @MisRob! And I agree, I think keeping InfoModal is useful in this case to better understand the purpose of the modal.

[pcenov]

Tested at hotfixes.studio.learningequality.org - all looks good.