New Additions to Course Content Outline

This is a stub page to track new additions that are being built to the existing live Course Content Outline 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

• Most Unit actions are moved into the three dots menu which includes a new Copy to Clipboard button. Clicking it will copy the unit then display a toast.

  Open

  

   

• If a unit (vertical) is in the clipboard, the Paste Unit button appears below every “New Unit” button (see screenshot above). This button disappears when the clipboard is empty or contains a non-unit. A BroadcastChannel is used to keep the status of this button instantly in sync among all the user’s open tabs.

• (related) What’s in my clipboard status. When the “Paste Unit” button is visible, a “What’s in my clipboard” widget can be hovered over (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.

  Open

  

Tagging & Taxonomy

• For each unit that currently has tags applied, the # of tags is displayed. (There is a REST API for this that provides the counts for all the units in the course at once; don’t load them on a per-unit basis). See the “🏷️10” and “🏷️7” in the screenshot below.

  • Clicking the # of tags 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.

  • When the tag drawer is closed, the # of tags needs to update. This should happen automatically if you use react-query to fetch the # of tags for each unit; we can make sure the react-query mutation updates the cache and/or invalidates it to refresh the numbers whenever the user makes changes to a unit’s tags. Don’t add special-case refresh code (e.g. don’t trigger a refresh when the tag drawer closes), because it’s a wasted API call if no changes were even made.

• Most Unit actions are moved into the three dots menu which includes a new Manage Tags button. Clicking this opens the tag drawer (see requirements just above, same as clicking the # of tags).