Library Components: Component sidebar

[ChrisChV]

✅ In Scope:

1. Clicking on any component tile once will open the component sidebar.
2. If the Library sidebar or the Collection sidebar is already opened, it will close and be replaced by the Component sidebar, once the component tile is clicked.
3. The Component sidebar contains three tabs: Preview, Manage and Details. Preview always opens by default when the Sidebar is first opened. [note the designs have "organize" instead of "manage", but we use "manage" on the collections sidebar and I'd prefer to keep it consistent]
4. Users can close the Sidebar by clicking the "x" in the upper right corner. When the sidebar is closed, the number of content tiles is responsive and occupies the space instead.
5. The Component Info header allows users to change the collection name (but only show the pencil icon if the user has permission to edit the library)
6. The header contains two buttons - Edit and Publish. Clicking Edit opens the requisite editor window for the component (won't be functional until Epic 4, so can just add the empty button for now). Clicking Publish opens the confirmation modal (won't be functional until later, so can just add the empty button for now).
7. The 3-dot menu should contain the same actions as the three-dot menu on the component cards: https://github.com/openedx/frontend-app-course-authoring/issues/1105

Each tab in the component sidebar contains specific functionality and will be defined in separate stories under Epic 3.

[bradenmacdonald]

@ChrisChV This will be part of another epic (3, not 1). Epic 3 will be building various sidebars. The only sidebar we'll build in epic 1 is the "Library Info Sidebar" to rename the library.

[ChrisChV]

This will be part of another epic (3, not 1). Epic 3 will be building various sidebars. The only sidebar we'll build in epic 1 is the "Library Info Sidebar" to rename the library.

@bradenmacdonald Ok. So https://github.com/openedx/frontend-app-course-authoring/issues/1042 is not part of the epic 1?

[bradenmacdonald]

@ChrisChV At the moment it's not part of the epic, but we may add it back in.

[rpenido]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox!

[lizc577]

Couple of notes (see screenshot)-

1. When I made the title long, the hover state on the edit icon is getting skewed
2. At this breakpoint, the 3 dot menu is falling below the edit/publish buttons, can we make it so that the 3 dot menu is never on its own line?

Not in screenshot - It looks like we are showing "More... " in the tab menu when there is still room to fit "Details". I'm also not sure about the need for "More" when there is just one tab in the menu, I think we should always keep it as Details when it is the only tab being cut off, and if needed truncate the word Details. Move to "More.." menu when the breakpoint requires more than 1 tab to be in the "More" menu item drop down. (cc @sdaitzman, lmk if you have any thoughts here)

[bradenmacdonald]

It looks like we are showing "More... " in the tab menu when there is still room to fit "Details". I'm also not sure about the need for "More" when there is just one tab in the menu, I think we should always keep it as Details when it is the only tab being cut off, and if needed truncate the word Details. Move to "More.." menu when the breakpoint requires more than 1 tab to be in the "More" menu item drop down. (cc @sdaitzman, lmk if you have any thoughts here)

We opened a separate issue for that: https://github.com/openedx/paragon/issues/3200

[rpenido]

Hi @lizc577! Sorry for missing your comments!

1. When I made the title long, the hover state on the edit icon is getting skewed

I'm fixing it as part of https://github.com/openedx/frontend-app-authoring/pull/1293

2. At this breakpoint, the 3 dot menu is falling below the edit/publish buttons, can we make it so that the 3 dot menu is never on its own line?

I didn't find a way to fix this in the current component, but we added a fixed width that prevents this from happening (at least on English)

[jmakowski1123]

1. There some weird spillover of the tag counts when the sidebar is opened and the tile text seems to hit a threshold length (not sure what that is).

2. I'm getting an error message when I click on the pencil icon to edit a component title from the sidebar. I can edit the text field, but the update doesn't save.

[rpenido]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts The issues mentioned here should be fixed in the sandbox

[jmakowski1123]

It looks like another UI bug was introduced with the 3-dot fix - now the expand button overlays on top of the 3-dot menu when it's expanded. I've created a separate bug ticket https://github.com/openedx/frontend-app-authoring/issues/1390