[FC-0009] New actions menu for editing components in Studio (behind waffle flag)

[bradenmacdonald]

Description

This is the first PR for the upcoming copy/paste feature in Studio.

This PR implements the following tickets:

• Move existing Studio component actions into a menu modular-learning#50
• Feature flag toggle to enable/disable the display of copy-paste UI modular-learning#11

Currently, we are gating this change behind a feature flag, so this will not be visible yet to most authors.

For course authors and developers who opt-in to test this new feature, they will see the new consolidated "Actions" menu instead of the icons for "Access Settings", "Duplicate", etc. One reason for this is that with the new menu, we can have both a "duplicate" and a "copy" action without confusing anyone, which is harder to do with just icons visible.

This screen recording shows the current UX, then enables the feature flag and shows the new UX for users who opt-in to test this out:

demo.mov

Impacted roles: Course Author (opt-in for now)

The new feature flag is contentstore.enable_copy_paste_feature

Supporting information

See GitHub issues linked above.

Testing instructions

1. Open Studio and check that the current Unit page for editing components in a Unit is unchanged.
2. Go to http://studio.local.overhang.io:8001/admin/waffle/flag/ (or devstack/sandbox equivalent)
3. Add a new flag, contentstore.enable_copy_paste_feature and enable it for Everyone
4. Go to a Unit page in Studio and test the new actions menu. It should work as shown in the video above.

Deadline

None

Other information

• For now, clicking on the "Copy" action just displays an ugly "Not implemented yet" alert. I assume that's fine as nobody will see this for now, except people who are explicitly trying to develop/test it.
• In an effort to minimize the work, this change re-uses existing Studio menu components and icons as much as possible. As a result, one difference from the UX mockups is that there is a line between every menu item, and not just before the delete button. This is consistent with all the other menus in Studio but doesn't match the design.

[openedx-webhooks]

Thanks for the pull request, @bradenmacdonald!

As a core committer in this repo, you can merge this once the pull request is approved per the core committer reviewer requirements and according to the agreement with your edX Champion.

[Agrendalath]

@bradenmacdonald, the code looks great, but there is a minor issue with the z-index of the menu:

[ali-hugo]

@bradenmacdonald Everything looks great to me!

Thanks for mentioning the lines between the menu options. It makes sense to keep things simple for now. We can always revisit this in the future if we find that we need to differentiate "delete" from the other options.

Thanks for the ping :)

[ormsbee]

FYI @jristau1984, @JAAkana, @mondiaz, @connorhaugh

[bradenmacdonald]

@Agrendalath I fixed the z-index issue with f8f71f7cedb34d8f51386fa0774d0455dca7726e

Thanks for catching that.

[Agrendalath]

👍

• I tested this: tested the menu locally
• I read through the code
• I checked for accessibility issues: n/a
• Includes documentation: n/a
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

[ormsbee]

Maybe if you squash your commits and kick it again, the checks will run properly?

[openedx-webhooks]

@bradenmacdonald 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production.

[edx-pipeline-bot]

EdX Release Notice: This PR has been deployed to the production environment.