New Additions to the Course Unit Page

This is a stub page to track new additions that are being built to the existing live Course Unit page while the Studio MFE porting work being tracked by the parent article.

Note 1: If testing the existing UI, be sure to have the following waffle flags turned on:

• contentstore.enable_copy_paste_units

• new_studio_mfe.use_tagging_taxonomy_list_page

Note 2: the screenshots below show the old UX. In the new MFE, the UX is expected to look slightly different to match the new re-usable Paragon components (menus, buttons, etc.) and the new design for Studio (Figma). This is just describing the functionality.

Copy & Paste

• Paste Unit from Unit

  • When a unit (vertical) is in the clipboard, a new dropdown menu appears in the units bar at the top of the page. The menu currently has only one option, “Paste as New Unit”, which does what you’d expect. If the clipboard is empty or contains a non-unit, the menu is hidden. A BroadcastChannel is used to keep the status of this menu instantly in sync among all the user’s open tabs.

  • No unit in clipboard:

    Open

    

  • Unit in the clipboard, menu opened by clicking the button:
    
    

    Open

    

• Copy unit button in right sidebar (new).

  • Clicking this button will copy the unit and display a toast.

• Three dots menu
  (This is already mentioned on WBS for Course Unit Page )

  • Most component actions are in the “three dots” menu.

  • It has a “Copy to Clipboard” option that will use the clipboard API to copy that component, and show a toast upon completion.

     

• Paste component button

  • When a component (other than vertical/unit/section/subsection) is in the user’s clipboard, the “Paste Component” button appears in the Add New Component section. A BroadcastChannel is used to keep the status of this button in sync among all the user’s open tabs.

     

  • (related) What’s in my clipboard status. When the “Paste Component” button is visible, a “What’s in my clipboard” widget can be hovered (or keyboard-focused) to display a popup with details of the current clipboard contents. It displays the component’s name, type, and course of origin. Clicking it (or tabbing on and pressing ENTER) takes the user to the original location where it was copied, if it still exists. A BroadcastChannel is used to keep the status of this in sync among all the user’s open tabs.

Tagging & Taxonomies

• Three dots menu

  • Each component’s three dots menu has a “Manage Tags” button that will open the tagging drawer. The tagging drawer is already implemented in the Course Authoring MFE. It should slide in with an animation (not yet implemented) and should not use an iframe as the current version does. (The iframe is only used to embed the MFE in the existing Studio UI.)

     

• Unit Tags widget

  • On the right-hand column, a widget displays the tags that the current unit has. It is collapsed by default but can be expanded. Whether it’s expanded or not should be “remembered” as the user switches between units (not implemented yet). Within the tag tree shown, each non-leaf tag can be collapsed or expanded. Clicking on leaf tags has no effect.

    • TODO: Currently this design is different from the “Tag Drawer”. But if we’re integrating this into the same Course Authoring MFE, we can just re-use a read-only version of the same <ContentTagsCollapsible> widget as the drawer uses. This will not only re-use code and make the implementation faster, but will make the visual design consistent.

  • The Manage Tags button opens the tag drawer (already implemented in the Course Authoring MFE). It should slide in with an animation (not yet implemented) and should not use an iframe as the current version does.

  • The list of tags should be loaded using react-query. That way, when the tag drawer is closed after making changes, the tree will be automatically refreshed to show the new tags. The relevant useQuery hook wrapper should already exist in the Course Authoring MFE.
    
    

    Note: The above design reflects the legacy experience but as mentioned above, the MFE should use the same React components as in the Tag Drawer, which look slightly different.