[Tagging] Refined Tag Drawer

[bradenmacdonald]

"As a course author, I want to easily add tags to content in my course"

Design: See the various "Refined Tag Drawer" flows in "Content Tagging MVP"

Depends on #187 and #188 .

Acceptance Criteria

1. Use the new tag widget from #187
2. Use the new "add tags" widget from #188 (should already be in place)
3. The drawer now has a read-only and edit view.
4. A footer with actions has been added to the drawer. In read-only mode it displays "Close" and "Edit Tags". In edit mode, it displays "Cancel" and "Save"
5. When the user selects the "edit tags" button, the drawer enters "edit mode":
   a. X's appear next to deletable tags
   
   b. Any collapsed taxonomies expand
   c. "Add a tag" fields (#188) appear at the bottom of the sections for each taxonomy
   d. Buttons in the footer change to "cancel" and "save"
6. There is no "x" in the top right of the drawer
7. "Manage tags" has been moved down
8. Taxonomies with tags added to them are open by default, and ordered according to the number of tags they contain
9. Taxonomies with no tags are listed alphabetically below the taxonomies with tags
10. Styling of headings has changed
11. Dropdown arrows moved to the left of taxonomy name (Note: this may change, for consistency with [Tagging] New Tag Sidebar Widget - Unit Page (in MFE) #187).
12. Styling has changed for the count of tags per taxonomy
13. The tag count shows as "0" for taxonomies without tags, and is greyed out.
14. Changes are not saved immediately when users Add/Delete tags - they are kept in the local state of the tag drawer during edit mode and only saved when the user clicks save.
15. When the user clicks Save:
    a. Any newly added/deleted tags are persisted. (Use React Query - this should also instantly update any tagging widgets on the Outline/Unit pages)
    b. The drawer changes to Read-Only mode but stays open.
    c. A toast appears in the bottom left of the page saying "N tags added", "N tags removed", or "X tags added, Y tags removed". We can skip the UNDO feature shown in Figma for now (will come post-MVP)
16. If the user clicks on the grey area outside of the tagging drawer AND there are unsaved changes (at least one added/removed tag):
    a. The drawer does not close
    b. The footer of the drawer animates to draw the user's attention to the actions (see Figma). Perhaps like Blink 2 at this link
17. Make sure the drawer scrolls (see note below)

Developer Notes

1. This is a big task! Consider splitting it up into 2-3 smaller PRs if at all possible.

[rpenido]

Hi team!
I just noticed that the component doesn't show a scroll bar if we have a long list of applied tags.

[ChrisChV]

@bradenmacdonald @yusuf-musleh About split this task, I think some UI ans styles points can be done separately:

6. There is no "x" in the top right of the drawer
7. "Manage tags" has been moved down
8. Styling of headings has changed
9. Dropdown arrows moved to the left of taxonomy name
10. Styling has changed for the count of tags per taxonomy
11. The tag count shows as "0" for taxonomies without tags, and is greyed out.
12. Make sure the drawer scrolls (see note below)

[yusuf-musleh]

@ChrisChV These make sense to split them out. Would you like me to work on them? or did you want to handle them yourself separately?

[ChrisChV]

These make sense to split them out. Would you like me to work on them? or did you want to handle them yourself separately?

Yes, it is better that you work on them to be able to meet the deadline 😁

[yusuf-musleh]

@ChrisChV Sounds good! Will take these on.

[yusuf-musleh]

"Manage tags" has been moved down

@bradenmacdonald @ChrisChV For the above point, where should the "Manage tags" option be moved down to in the dropdown? I couldn't find the updated location in the figma, it still shows the same spot:

[bradenmacdonald]

@ali-hugo ^

[ali-hugo]

@yusuf-musleh I can't remember exactly, but I think we decided to keep "manage tags" in the same spot after all. So please ignore number 7 in the description. Sorry for the confusion!

[yusuf-musleh]

@ali-hugo Got it, thanks for the clarification!