Edit modal - add additional fields to "Basic info" section

[sairina]

Summary

Description of the change(s) you made

1. Added the following fields to the "Basic Information" section of the edit modal:

• "learning activity"
• "level"
• "what you will need"

2. Updated "Basic Information" section to be a 2-column format
3. Moved "Tags" to the 2-column format

Note, this PR does not cover the "Categories" field, and the following issues are to address some specifics with regards to the "Learning Activity" dropdown field and setting defaults based on content kind, which is not covered in this PR.

• "Learning Activities" in DetailsTabView: Set default values on file upload #3373
• learning_activities field: Data migration needed for historic data in backend #3374

Manual verification steps performed

In the edit modal:

1. Added content into every field (description, learning activity, level, what you will need, tags)
2. Clicked Finish
3. Went back into the resource and checked that the content was still there
4. Removed all learning activities (empty field)
5. Checked to see that validation is working for that field (learning activity is required)

Screenshots

Validation working for "Learning activity"

2-column format

As inputs in right column change in height, so does "Description"

Mobile view/1-column

Does this introduce any tech-debt items?

This is a continuation of this issue #3205

---

Reviewer guidance

How can a reviewer test these changes? Please see Gherkin scenarios for additional, specific user interactions

In the edit modal:

1. Added content into every field (description, learning activity, level, what you will need, tags)
2. Clicked Finish
3. Went back into the resource and checked that the content was still there
4. Removed all learning activities (empty field)
5. Checked to see that validation is working for that field (learning activity is required)
6. Check that the tests are accurately reflecting changes made in code

References

Comments

• Figma design for this feature
• Gherkin stories for this feature
• Addresses Add new metadata fields to Edit Modal #3205

---

Contributor's Checklist

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

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

[rtibbles]

A couple of things that could be tweaked, but nothing alarming. I have not yet manually tested.

[rtibbles]

cc @marcellamaki we might want to consolidate this logic somewhere like I think we did on Kolibri?

[sairina]

I think I stole that from Kolibri: https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/src/views/EmbeddedSidePanel/SelectGroup.vue#L139

[rtibbles]

Test could still do more guarantee of behaviour.