Add library content to a course

[jmakowski1123]

User story: As a course author, I want to find a piece of content in my library and add it to my course, without navigating away from my course outline.

Assumptions:

• When Library content is pulled into a course, it remains connected to the Library so that future updates can be synced. Users are not prompted to choose whether to maintain the connection or not; rather, the connection is in place by default.
• When an update is made to the content in the library, the corresponding sync page in the course where the content is used is also updated, and users can accept or reject the sync [see epic 8 for more details]
• Users can opt to disconnect the content from the library for good via the sync page. [see epic 8 for more details].

Requirements:

User clicks on the new "Library Content" tile/block in the Add New Component section on the unit page. See here: #1335

When a user clicks on the tile, then they see the "Select a Library" modal. For the MVP, the modal can simply display a list of all available libraries, displayed alphabetically.

The modal contains a free-text search bar, which enables users to search for libraries by name. This experience can be the same experience as searching for a Library on the Studio Home Library tab.

[Out of scope: The steppers at the top of the modals, and the recently used library section.]

Users may only click one library at a time in the list.

When a user clicks "next" from the "Select a Library" modal, then the selected Library opens in an "Add to [Course]" state. This state is the the same as the Library Home experience, but with a few changes:

• No sidebar is opened by default
• Component tiles have an "add" button instead of the 3-dot menu

Other expected behavior:

• It's possible to click on any component or collection, and the corresponding sidebar will open. The sidebar contains a button that says "Add to Course", which replaces the "Edit" and "Publish" buttons.
• No content is edit-able in this state
• Users can open Collections in this state. The tiles display in collections the same way, with an "add" button instead of the 3-dot menu.

Once a user clicks Add (either from the component tile or from the sidebar), then the Library modal closes and the user is back on the Unit Page in the course. The Library content displays as the newest component in that unit.

[bradenmacdonald]

@jmakowski1123 @sdaitzman This hasn't merged yet but you can start testing it on the sandbox now.

(Two known issues: the icons on the green buttons are missing due to a theming incompatibility that just affects our sandbox, and the Next/Cancel buttons in the dialog are awkward and need to be re-worked)

[jmakowski1123]

Two other small UI nit, but will let @sdaitzman comment - it seems like the spacing is weird between the search bar and the library list?

And the "cancel" button to exit out of the "add to" state without adding content gets hidden. Should that follow the same pattern as the "next" button, big and blue and on the right?

[jmakowski1123]

A question I think we'll want to test in usability testing is whether it's obvious that component tiles can be clicked to open the sidebars in the "add to state".

[jmakowski1123]

In general this is looking fantastic

[rpenido]

Hi @jmakowski1123! CC @sdaitzman

I'm unsure about changing the "Cancel" button, as it is the default for the legacy studio.
i.e.

If you feel we still should do it, just let me know! I have a draft PR for it.

[pomegranited]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for another round of AC testing on the sandbox

[jmakowski1123]

The spacing fix looks good!

Let's not mess with the cancel button, then, if it's the legacy studio default. We can fix it in teak with the new unit page MFE.