[FC-0009] Show a preview of what will be pasted with new Paste Component Button

[bradenmacdonald]

Description

This continues the work from #31969 and implements ticket openedx/modular-learning#13

Affects: course authors [for now, only those who will be participating in the beta test]

Screenshot of the "Paste Component" button with the new preview:

Supporting information

See tickets linked above.

Testing instructions

1. Go to (studio)/admin/waffle/flag/ and enable contentstore.enable_copy_paste_feature for Everyone, if you haven't already.
2. Use the new Actions menu to select Copy. You should see an animation and the "Paste Component" button should appear.
3. Hover over the "What's in my clipboard" as shown in the screenshot. Click on it to be taken to the original source location in Studio.
4. Delete the original source XBlock and refresh the page.
5. The "What's in my clipboard?" should still work, but will no longer be clickable.
6. Note that the "What's in my clipboard" appears on hover and will also stay on click. It's also keyboard accessible as simply tabbing onto "What's in my clipboard" will make it appear and you can then tab onto the popup from there.

Deadline

"None" if there's no rush, or provide a specific date or event (and reason) if there is one.

TODOs

• Hide the popup until hover/click
• Merge the PR that this one depends on and then rebase it, to make the diff smaller.

Other information

Private ref: MNG-3637

[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.

[bradenmacdonald]

@Agrendalath @ormsbee This is ready for review.

[Agrendalath]

👍

• I tested this: checked that the preview behaves as described (even when the parent of the source XBlock is removed)
• I read through the code
• I checked for accessibility issues
• Includes documentation: n/a
• I made sure any change in configuration variables is reflected in the corresponding client's configuration-secure repository: n/a

[bradenmacdonald]

Thanks for the review @Agrendalath. I addressed your comments.

[Agrendalath]

@ormsbee, would you like to review this before we merge?

[ormsbee]

@Agrendalath: No, it's fine. Please go ahead.

[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.