...
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.