[Tagging] Display a unit's tags in the tag drawer

[bradenmacdonald]

"As a content author, I can see what tags have been applied to a unit in my course (from the course outline page)"

Acceptance Criteria

1. From the course outline page:
   a. There is a new "Manage Tags" menu item available on each unit (only units, not subsections etc.). Clicking it will open the new tag drawer.
   
   b. For units which have tags, the number of tags that they have appears next to this tag icon. Clicking the number/icon will also open the tag drawer.
   
   c. Both the "Manage Tags" and the tags count should only appear to users who have a feature flag enabled (same feature flag as [Tagging] Create Taxonomies List Page (in Course Authoring MFE) #104)

2. The tag drawer appears on the right, and displays the tags that are applied to the unit, separated by Taxonomy.
   

   

3. Tags are displayed using these criteria:
   

4. A scrollbar appears for long lists (see Figma)

5. For each taxonomy there is a count of tags displayed (see mockups)

6. For this story, we do not implement any editing (no adding nor deleting tags)

7. Everything must be fully keyboard accessible. Checking what tags are applied using a screen reader should be easy and make sense. Pressing ESC should close the drawer.

8. The tag drawer must be implemented in React.

Developer Notes

• The drawer should probably be built in frontend-app-course-authoring and use an iframe to display it in the "old" course authoring experience. If you want to take any other approach please clear it with @bradenmacdonald first.
• Screenshots above are for convenience - Figma is the most up-to-date source for mockups. The scale of UI elements seen in the screenshots above may be incorrect.
• Because of [Tagging] Enforce limit on number of tags per object #99 note that the list of tags on each unit is never paginated. This should simplify things a little bit.

[ali-hugo]

Linking to the Figma conversation for easy reference when the below decision has been made:

(TBD: what exactly appears on the left? Asked on Figma)

[bradenmacdonald]

Note: the above decision has been made :)

[ali-hugo]

@yusuf-musleh @bradenmacdonald Everything seems to be working quite well in the sandbox. I just have a few comments:

• Please change the order of the items in the unit menu to:
  • Configure
  • Manage tags
  • Copy to clipboard
  • Duplicate
  • Delete
• The number next to the taxonomy name in the tag drawer should include all implicit and explicit tags. It only seems to include a count of explicit tags at the moment
• Remove the hover effect from the tags. Only display a hover effect for the X's next to explicit tags (since this is the only part of the tag that is currently clickable)
  • In the design files, the user can expand and collapse parent tags, but I'm interested to see what test users think of the current implementation (i.e. users can only expand and collapse the taxonomy as a whole)

P.s. I will be creating a separate issue with a few additional styling requests, but I will probably wait until the first round of testing has been completed so that I can account for user feedback there too.

[yusuf-musleh]

@ali-hugo Thanks for the feedback, glad to hear things are working well. I will include the suggested changes along with other feedback I get on openedx/frontend-app-authoring#704 once its reviewed. Though the first point (changing the order of items in unit menu would be a different PR in the edx-platform repo)

[bradenmacdonald]

For the order of the menu, I will include it in FAL-3537.

[yusuf-musleh]

@ali-hugo I updated my PR to include the count of the implicit tags and remove the hover effect except for the "X" on the explicit tags. It looks like this now:

[ali-hugo]

@yusuf-musleh Thank you! This looks great :)