Edit modal - add completion/duration dropdowns and mastery fields

[sairina]

Summary

Description of the change(s) you made

Added new CompletionOptions component, which does the following:

• splits up the former MasteryDropdown component and moves mastery_criteria information into the CompletionOptions component
• Adds a dropdown to determine the type of completion
• Adds a dropdown to determine the type of duration (exact, short, long, or reference)

Manual verification steps performed

1. Completed manual QA of cases. This will need to be flushed out better in further documentation after the tests are written

Screenshots (if applicable)

Video	Document	Exercise

Does this introduce any tech-debt items?

• Yes - there is a part 2 to this PR, which will be the unit tests for each of the new components.
• When practice quizzes are finalized, there will be updates that need to be made to the code, as that flag will no longer be relevant
• There is a fileUpload that currently is just a dummy, static number (for uploading audio and video resources and the "Exact time" dropdown option), but that will need to be updated once we decide on how to determine how to access that number.

---

Reviewer guidance

How can a reviewer test these changes?

Please manually try to break this, as well as suggest code changes; particularly around the states.

Are there any risky areas that deserve extra testing?

Everywhere, but most likely any time we are looking at documents, and having to switch between "All content viewed" and "Complete duration" in the completion dropdown.

References

• Fixes Add new metadata fields to Edit Modal #3205
• Figma for the completion an duration conditions
• There is no more slider for the "minutes input" (ActivityDuration component)
• TODO: I'll have to document all of the changes made to the Figma based on Slack conversations, but in general, the Figma should pretty much be the source of truth

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

[rtibbles]

A little bit of cleanup from a quick read through.

One thing that would be good to keep in mind as you finalize the test suite would be to ensure that the tests focus on the input/output of the components, and don't test the inner state of the components themselves - this will allow us more flexibility if we want to refactor to simplify some of the nested conditionals.

[rtibbles]

Still not a huge fan of the complexity here in terms of the intensely nested if statements, and the use of isSwitchingFromAllContentToCompleteDuration and currentDurationDropdown state.

But let's get the tests in place so that we can refactor for simplification later down the line.

[rtibbles]

Notes from manual testing:
The M of N input boxes displayed for all Goal dropdown selections, not just M of N:

When handling a default value for a video or audio file - the value is presented a bit oddly - shouldn't it be the default value in an input field?

Minor thing - when using the up and down arrows on the input selection, I then had to select the number from the dropdown for it to save the value:

[sairina]

When handling a default value for a video or audio file - the value is presented a bit oddly - shouldn't it be the default value in an input field?

I think I was going with the design (though I didn't center the text). Is this something we should change?

The M of N input boxes displayed for all Goal dropdown selections, not just M of N

Fixed this one (and the subsequent validation errors)!

Minor thing - when using the up and down arrows on the input selection, I then had to select the number from the dropdown for it to save the value

I noticed as well - investigating now!

[rtibbles]

I think I was going with the design (though I didn't center the text). Is this something we should change?

Ah, I had missed that in the spec - let's leave it as is - but yeah the styling update from the spec is definitely better!

[rtibbles]

All issues addressed - there is one more issue where the value for the defaultUploadDuration is presented as a raw number of seconds, which isn't quite to spec, but I'll file a follow up issue.

[rtibbles]

Follow up issue here: #3465

[rtibbles]

Manual testing checks out. Further iteration will be reviewed in the follow up testing PR.