Bulk Tagger: Move "Create subject" affordance to bottom of menu options scroll container

[QuantuM410]

Closes #8652

Moved the "Create subject" affordance to the bottom of the scroll container for better visibility and prevention of duplicate subjects.

Technical

• Moved the "Create subject" affordance to the bottom of the scroll container.
• The functionality of updating and displaying the affordance remains unchanged and doesn't get affected from the following changes in this PR.
• Ensured that the visibility rules remain unchanged: the affordance is hidden when the subject search input is empty.

Testing

• Search for a subject in bulk tagger component of ILE
• The behavior of displaying create new subject affordance has been updated as per requested whilst ensuring the visibility rules

Screenshot

out2.mp4

Stakeholders

@jimchamp

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (d376947) 16.62% compared to head (08e94dd) 16.56%.
Report is 149 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8776      +/-   ##
==========================================
- Coverage   16.62%   16.56%   -0.06%     
==========================================
  Files          88       89       +1     
  Lines        4698     4715      +17     
  Branches      837      841       +4     
==========================================
  Hits          781      781              
- Misses       3399     3414      +15     
- Partials      518      520       +2     

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

[jimchamp]

I was expecting the HTML string, here, to change. Did that not work?

[QuantuM410]

I was expecting the HTML string, here, to change. Did that not work?

Yeh I thought of that and that works fine too. The only issue I had with that was with its positioning while searching for a subject when it displays content from selected-tag-subjects or whenever the searched subject is matched with less similar subjects and the number of subjects cant fill the scroll container the create-new-subject affordance seems to move just below the last displayed subject making it look weird.
Also once the user scrolls the entire container, even though the affordance is visible it will hide again if he decides to scroll back up making it a bit tedious to scroll down the entire container again. Scrolling once should be enough for him to skim over the existing subjects according to me.

Here is how it functions with the moved HTML string to this selection-container div

openlibrary/openlibrary/plugins/openlibrary/js/bulk-tagger/index.js

Line 20 in 033117b

<div class="selection-container hidden">

out3.mp4

[jimchamp]

I can't view any of the videos that you post here.

The requirement was to move the "create subject" affordance to within the div having class selection-container. The code that you've submitted doesn't do that, and makes the bulk tagger less functional:

I'm now unable to create a subject named "b"

...but can do so in production

I told you the exact solution that I was expecting. Please implement that.

[QuantuM410]

@jimchamp Hey! I made the asked changes. It seems the screen recordings I am uploading are facing some encoding issues in firefox browser.

After Updating the HTML string :

out.mp4

Also my previous solution seems to work on my local system for all cases including typing "b" and others too

I preferred it as it allowed the affordance to display over the searched subjects once the user scrolled the entire container instead of disappearing again if user scrolls back again.

[jimchamp]

I preferred it as it allowed the affordance to display over the searched subjects once the user scrolled the entire container instead of disappearing again if user scrolls back again.

Whenever you have a choice between implementing code as per the requirements and implementing the code that you prefer, I recommend choosing to implement what is required.