[Tagging] New Tag Sidebar Widget - Unit Page (in MFE)

[bradenmacdonald]

"As a course author, I want to easily see what tags a unit has when editing it in Studio"

Design: See "Unit Page" in Figma "Content Tagging MVP"

Acceptance Criteria:

1. Although the Figma mockups show the legacy UI (in edx-platform), for this ticket we are only going to be making changes in the Course Authoring MFE. Do not modify the legacy UI (in edx-platform).
2. Implement the new sidebar tag widget in the Course Authoring MFE Unit Page. (Note: we need to wait until at least the basic sidebar has been implemented on that page, if it hasn't already.)
3. Heading is "Unit Tags"
4. Widget is not collapsible
5. Parent tags are not collapsible
6. Only the taxonomies are collapsible
7. Taxonomy names are bolded
8. Implicit and explicit tags share the same styling
9. The count in the grey circle has been updated to match the count styling elsewhere (i.e. tag icon + count)
10. Tags are styled in the same way as they are in the tag drawer
11. Clicking "Manage Tags" opens the tag drawer. It does not use an iframe.
12. When changes are made in the tag drawer and saved, this widget is instantly refreshed to show the updated tags and count.
13. If the tag name is long, it wraps to the next line as shown in the designs.

Developer notes:

1. The inner part of the tags widget (below the taxonomy name) should be a re-usable component that we can also use in the refined tag drawer. Note that in both cases it displays a read-only hierarchical list of tags, but when "edit mode" is toggled on, each tag has an (X) delete button next to it. Otherwise, they are the same.

   Unit page sidebar	Tag drawer, in edit mode

2. The tag widget must use React Query to load the data, so that when edits are made in the tag drawer using React Query mutations, the sidebar will be instantly refreshed to match. It should not use the temporary messages from feat: Send message after update tags on content [FC-0036] frontend-app-authoring#800 .

[ChrisChV]

@ali-hugo @bradenmacdonald Whats happens if the count of tags is 0? Should I hide the tag count?

[ali-hugo]

@ChrisChV The tag count should display even if it is zero. The "tag icon + 0" element should be displayed at 40% opacity. See an example next to "Education Level" in the image below. Let me know if you have any questions.