Bulk Tagger updates

[jimchamp]

Closes #8479
Closes #8435
Closes #8584

Updates the bulk tagger to display the selected works' subjects. The bulk tagger can also remove subjects from works.

UI

The bulk tagger has four important parts.

1. Search bar: Filters menu options and performs subject tag searches.
2. Menu Options: Represent subject tags and number of selected works which have the tag.
3. Create Tag Buttons: Creates new subject tags and stages them for submission.
4. Submit Button: Prepares form with staged tag data, then POSTs the form.

The Menu Options

Each option represents a subject tag, and can have one of three possible states:

1. All selected works share this tag (denoted by check mark).
   

2. At least one selected work, but not all, share this tag (denoted by dash).
   

3. None of the selected works have this tag (no indicator for this state).
   

Menu options are represented by the MenuOption class, which is responsible for the following:

• Rendering a menu option affordance
• Controlling the affordance's visibility
• Removing the affordance from the DOM
• Holding state:
  • rootElement : Reference to the affordance's root element.
  • tag : Object representing a subject tag, with a name and type. Intended for read only.
  • optionState : Integer value representing one of the three aforementioned states.
  • worksTagged : The total number of selected works that share this tag.
• Updating the UI state indicator on optionState change.

The actions taken when a menu option is clicked are dependent on the option's state:

Option State	On Click
All works tagged	1.If tag staged for addition, unstage 2. Stage tag for removal 3. Change state to "No works tagged"
Some works tagged	1. Stage tag for addition 2. Change state to "All works tagged"
No works tagged	1. If tag staged for removal, unstage 2. Stage tag for addition 3. Change state to "All works tagged"

The Menu Option Containers

Menu options are placed in one of two containers:

1. The "Existing Tags" container holds options for tags that are already attached to one or more selected work, and tags that are staged for addition or removal.
2. The "Search Results" container holds options for tags that have been fetched using the search API.

Each container is represented by a SortedMenuOptionContainer object, which does the following:

• Maintains an alphabetically ordered array of menu options that are in the container.
• Provides methods for adding or removing menu options.
  • Menu options are attached to the DOM in the correct order when added.
• Provides methods for searching for menu options

Create Tag Options

Provides means for librarian to create a new subject tag using the contents of the search field. This affordance is hidden whenever the search field's trimmed value is an empty string.

Submit Button

This button is always present, but only enabled if there are tags staged for submission.

---

Technical

Testing

Stakeholders

[mekarpeles]

This is incredible progress. Here are a few things that may make the experience a bit more consistent + intuitive + useful

Edit:

• Hotfix: Should be able to select just 1 book
• On Select, Keep Position: If you activate a neutral (deselected) item, show ✅ but don't move location
• Click Out Confirm:~ In any of the cases where we reach the code that would close the Tagger, if there are pending changes (i.e. submit has not been performed) then show a message: You have unsaved tag changes pending. You must *cancel* or *submit* the current tag changes before selecting additional works. [Cancel] [Submit]~
  • Tags staged for submission are not removed until the form is submitted. No work will be lost by closing the tagger and selecting different works.
• Check Performance: More aggressive debouncing to avoid lots of requests
  • Debouncing is fixed.
• Standardize Results: Make the search results all the same design [-/+] Title [label]
• Alphabetical Ordering: active tags alphabetized first, then inactive tags alphabetized after
• Use Github Symbols: Use ➖ if only partial, + --> ✅ if added and, nothing if not present (like github)
  • Don't hide de-selected items. If we deactivate a ➖ or ✅, show it in the default list unless there's a search/filter
• Loading Indicator: Spin / tomb stones / skeleton until subjects fetched
• Standardize CTA Btns: Full width, submit should be blue + standard CTA (maybe with --size override)
• 🤷 Z-index? (Search bar)
• 🤷 Deprioritize & Standardize "Create New": Create new Subject should just be the last card in search results as opposed to sticky (for force patron to look through all options)
  • If a menu option for a tag already exists, new tag creation will fail.
• Track submissions, tags added, and tags removed

[jimchamp]

One more TODO:

• Track submissions, tags added, and tags removed

[codecov-commenter]

Codecov Report

Attention: 369 lines in your changes are missing coverage. Please review.

Comparison is base (baad3d8) 16.65% compared to head (b372873) 16.68%.
Report is 99 commits behind head on master.

Files	Patch %	Lines
...y/plugins/openlibrary/js/bulk-tagger/BulkTagger.js	0.00%	198 Missing and 25 partials ⚠️
...penlibrary/js/bulk-tagger/BulkTagger/MenuOption.js	0.00%	51 Missing and 3 partials ⚠️
...ulk-tagger/BulkTagger/SortedMenuOptionContainer.js	0.00%	36 Missing and 4 partials ⚠️
...y/plugins/openlibrary/js/bulk-tagger/models/Tag.js	0.00%	27 Missing and 10 partials ⚠️
openlibrary/plugins/openlibrary/js/ile/index.js	0.00%	11 Missing and 1 partial ⚠️
...ibrary/plugins/openlibrary/js/bulk-tagger/index.js	0.00%	2 Missing ⚠️
.../js/ile/utils/SelectionManager/SelectionManager.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8575      +/-   ##
==========================================
+ Coverage   16.65%   16.68%   +0.02%     
==========================================
  Files          85       88       +3     
  Lines        4406     4680     +274     
  Branches      765      835      +70     
==========================================
+ Hits          734      781      +47     
- Misses       3191     3383     +192     
- Partials      481      516      +35     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mekarpeles]

LGTM

[mekarpeles]

Would be great to add statsd for:

• # of tags added
• # of tags removed
• # of bulk tag submissions (how often has tool be used)