[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!

[ChrisChV]

@bradenmacdonald About this item:

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

• Functionality (a) could be added in a new PR or at [FC-0036] Refined tag drawer frontend-app-authoring#939 because depends on it , but is it necessary to add this functionality to the legacy edx-platform screens?
• It is difficult to perform functionality (b) because currently it is not possible to know when you click outside the drawer. I recommend that it be done in other tasks. It can be done in the following ways:
  • Verify that no component of the drawer has been clicked, like this code. All components need to be mapped, it is complicated and susceptible to errors.
  • The Sheet component has a way of knowing if it has been clicked outside. We could add a parameter to use that function publicly

[bradenmacdonald]

@ChrisChV Don't make any further changes to the legacy screens - we're only focusing on the MFEs now.

No problem; could you please just create a separate issue for it in this repo so we can remember to consider it in the future (and tag me on it)? I think it's fine to leave as is for now, as we're getting tight on budget and timeline.

[ChrisChV]

@bradenmacdonald Thanks! Done: #209