feat: Library Home - Paste Content [FC-0059]

[yusuf-musleh]

Description

This PR adds the ability to paste blocks from the clipboard into a v2 Library. It adds a new button "Paste From Clipboard" that appears the user's clipboard contains a block that can be pasted into the library. In the case where the clipboard contains a unit (which cannot be pasted in a library), then the "Paste From Clipboard" button does not appear.

Supporting information

Related Ticket:

• Library Home - Paste Content #1176
• Depends on feat: Library Home Paste Content [FC-0059] edx-platform#35199

Testing instructions

1. Run you devstack on the branch in feat: Library Home Paste Content [FC-0059] edx-platform#35199
2. Run the frontend on this branch
3. Make sure you have a v2 library created, create one if not, and add a bunch of components to it
4. Navigate to the v2 library, and click on the 3-dot menu of a component to copy it to clipboard
5. Then click on the "+ New" button you will notice the "Paste From Clipboard" button appear
6. Click on the "Paste From Clipboard" button and confirm that the copied component is added to the library successfully and matches the content that was copied to clipboard
7. Try copying from course units/blocks, navigate to a course that has units/blocks:
   1. Copy a unit from the course
   2. Navigate to a v2 library, and click on the "+ New" button
   3. Confirm that the "Paste From Clipboard" button does not appear
   4. Navigate back to the course, and copy a block from inside a unit
   5. Navigate back to the v2 library
   6. Confirm that the "Paste From Clipboard" button now appears
8. Click on the "Paste From Clipboard" button and confirm that the copied block is added to the library successfully and matches the content of the block in the clipboard
9. Confirm that a toast message is shown while pasting and when successfully pasted.
10. Confirm that the "Paste From Clipboard" button appears/disappears when blocks/units are copied to clipboard from other browser tabs/windows

---

Private-ref: FAL-3778

[openedx-webhooks]

Thanks for the pull request, @yusuf-musleh!

What's next?

Please work through the following steps to get your changes ready for engineering review:

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

• If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
  • This process (including the steps you'll need to take) is documented here.
• If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

• Dependencies

  This PR must be merged before / after / at the same time as ...

• Blockers

  This PR is waiting for OEP-1234 to be accepted.

• Timeline information

  This PR must be merged by XX date because ...

• Partner information

  This is for a course on edx.org.

• Supporting documentation
• Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

🔘 Let us know that your PR is ready for review:

Who will review my changes?

This repository is currently maintained by @openedx/2u-tnl. Tag them in a comment and let them know that your changes are ready for review.

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

• Overview of Review Process for Community Contributions
• Pull Request Status Guide
• Making changes to your pull request

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

• The size and impact of the changes that it introduces
• The need for product review
• Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

[bradenmacdonald]

(edit: whoops, wrong PR...)

[codecov]

Codecov Report

Attention: Patch coverage is 94.00000% with 3 lines in your changes missing coverage. Please review.

Project coverage is 93.01%. Comparing base (7c59b4a) to head (81fe121).
Report is 1 commits behind head on master.

Files	Patch %	Lines
...rary-authoring/add-content/AddContentContainer.tsx	87.50%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1187      +/-   ##
==========================================
+ Coverage   92.99%   93.01%   +0.02%     
==========================================
  Files         756      756              
  Lines       13653    13695      +42     
  Branches     2953     2966      +13     
==========================================
+ Hits        12696    12739      +43     
+ Misses        921      920       -1     
  Partials       36       36              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ChrisChV]

@yusuf-musleh #1138 and #1197 are Done, could you update your branch and test with copy from a library?

Edit: The copy from a course works well 👍

[yusuf-musleh]

@ChrisChV Thanks for the review! I've updated my branch and tested with copy from library and pasting, it working fine. However, it was missing broadcasting the clipboard data to update whether the "Paste from Clipboard" button appears without refreshing, so I added it here: 44cb93c, I'm working on fixing the broken tests.

[ChrisChV]

@yusuf-musleh The "Paste From Clipboard" doesn't dissapear on paste. https://www.loom.com/share/74030a6a5aae437e9b866971c3a434af?sid=fe67f250-6363-4650-a026-6c717fbe9019

[bradenmacdonald]

@ChrisChV Isn't that expected behavior? Pasting something doesn't remove it from your clipboard, and you are able to paste it multiple times (into the same library or into several different libraries/courses) if you want to.

[ChrisChV]

Isn't that expected behavior?

I don't see anything mentioned. I find it odd that I can paste the same component multiple times. But I'm also fine with copying not removing the item from the clipboard.

[ChrisChV]

@yusuf-musleh Looks good 👍

• I tested this: I copy multiple components from a course and from a library
• I read through the code and considered the security, stability and performance implications of the changes.
• I tested that the UI can be used with a keyboard only (tab order, keyboard controls).
• Includes tests for bugfixes and/or features added.
• Includes documentation

[yusuf-musleh]

@ChrisChV

I don't see anything mentioned. I find it odd that I can paste the same component multiple times. But I'm also fine with copying not removing the item from the clipboard.

It is the same behavior we have when pasting a unit inside a course, the "Paste Unit" remains there and you can continue pasting the same unit from the clipboard.

[bradenmacdonald]

I find it odd that I can paste the same component multiple times.

This clipboard is supposed to work the same way as the "regular" clipboard on your computer. If you copy something, e.g. text in your browser right now or code in VS Code or anything, you can always paste it multiple times.

[ChrisChV]

This clipboard is supposed to work the same way as the "regular" clipboard on your computer. If you copy something, e.g. text in your browser right now or code in VS Code or anything, you can always paste it multiple times.

You're right. Thanks 👍

[bradenmacdonald]

As a general approach, I would prefer we replace the redux code with something that uses React Query, rather than finding a way to make the redux code work better. But this is fine for now.

See recently updated frontend recommendations: https://docs.openedx.org/projects/openedx-proposals/en/latest/best-practices/oep-0067-bp-tools-and-technology.html#frontend-technology-selection

[yusuf-musleh]

Agreed, makes sense, I just wasn't sure if I wanted to do the full refactor to React Query as part of this task/PR, as opposed to a separate PR/task, since it's not specific to pasting in the library.

[openedx-webhooks]

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