Unit full-page view (barebones)

[sdaitzman]

Designs: mid/hifi Figma link

Full unit	Empty unit	Unit component overflow menu

Spec

1. Units in a content library have a full-page view. Units can support an empty state, in which case they show an embedded add new / existing block ( hifi designs pending: Add new/existing block interface for new units (high fidelity) #1607).
2. Components in a unit show up as separate blocks. These blocks can be selected, which opens their component info sidebar. Each block has an overflow menu, and displays a preview of its content.
3. Units have a "Unit Info" button which will eventually open their unit info sidebar (Unit Sidebars #1604).
4. Unit pages have breadcrumbs that show their position in the library (either Library >, Library > Subsection, or Library > Section > Subsection).

In scope

1. View a unit page, which has its own URL
2. Components appear within a unit as full previews. Their top bar shows type icon and title on the left, and draft status (if any), tag count, overflow menu, and drag handle on the right.
3. Components have an overflow menu within a unit
4. Components can be selected within a unit
5. When components are selected, the standard component sidebar appears. The preview tab is hidden, since component previews are visible in the main content area.
6. Components within a unit full-page view have hover and selected states

Not in scope

1. Unit cards in library (Unit cards in library #1616)
2. Add new/existing component, reorder unit (Create new component within unit #1619, Add existing component to unit #1620, Reorder components within unit #1621)
3. Rename a unit, or a component, by clicking titles (Rename unit #1624 and Rename component within unit #1626)
4. Unit info sidebar (🚧 Unit sidebar v1 #1617)
5. Search within unit (not planned)

Component States

Hover	Selected	Draft

[bradenmacdonald]

Unit pages have breadcrumbs that show their position in the library (either Library >, Library > Subsection, or Library > Section > Subsection).

Is this always unique or can a unit be "independent" and part of a subsection?

[sdaitzman]

@bradenmacdonald initially, units will always either be independent (Library → Unit) or within a subsection (Library → Subsection → Unit or Library → Section → Subsection → Unit).

Since initial section/subsection support will be read-only (#1612), users won't be able to add a unit to a subsection. All units will either be an independent object, or imported as part of a subsection. Units imported as part of a subsection should still show up in browse/search, but their location is within that subsection (and would show up that way in the breadcrumbs).

Later, when we support editing subsections, I think a unit that is referenced in exactly one subsection in the same library should always show that subsection in the breadcrumbs. If/when we support adding an existing unit to a subsection, we'll have to modify the breadcrumbs to reflect that.

[sdaitzman]

@PhuVyNguyen feel free to add screenshots of XBlock preview variants to this story when they're ready

[PhuVyNguyen]

Full XBlock Preview

Text Preview

Video Preview

Problem Previews

Open Response Preview

[navinkarkera]

@jmakowski1123 @sdaitzman @edschema This is ready for AC testing on the sandbox.
Currently, we don't have any option in frontend to add components to a unit. I'll add some components to a unit via backend tomorrow and update here.

[sdaitzman]

Thanks @navinkarkera!

[jmakowski1123]

Just noting that the "open" button works from the sidebar, but not the tile overflow menus. I don't think I see a requirement for activating the tile overflow "open" button (unless I'm missing it), so just wanted to flag that.