build(deps): use jquery v2.2.4 to unblock jquery-ui v1.14.1 upgrade

[jayaddison]

What

The jquery-ui upgrade suggested in #10970 is incompatible with jquery versions earlier than v2.2.0 as it lacks a fix that was applied for jquery/jquery#2466

In our package-lock.json file, it appears that we use jquery v3.7.1 -- but in fact we copy a vendored copy from the foundation UI framework, during the gulpfile.ts copyJs function.

I believe that jquery v2.2.0+ is compatible -- and have tested this locally. Compatibility was restored by jquery/jquery@bf591fb because it ensures that a uniqueSort function (as used by jquery-ui) is available in jquery.

Related issue(s) and discussion

• Unblocks build(deps): bump jquery-ui from 1.13.3 to 1.14.1 in the jquery group across 1 directory #10970.
• Resolves Release v2.45.0 broke the ability to add nutrients and other features are showing issues #10861 (already-closed).

Edit: cleanup pull request description.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 49.25%. Comparing base (795d4e5) to head (9e1ec6e).

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11109   +/-   ##
=======================================
  Coverage   49.25%   49.25%           
=======================================
  Files          78       78           
  Lines       22418    22418           
  Branches     5372     5372           
=======================================
  Hits        11043    11043           
  Misses      10019    10019           
  Partials     1356     1356           

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

[jayaddison]

NB: safe-active-element.js was removed from jquery-ui in jquery/jquery-ui@bb49bd7 (released in v1.14.0).

[jayaddison]

From local testing: jquery v3.7.1 does appear to work OK too. Let's upgrade to that instead.

Edit: subsequent testing uncovered a compatibility problem related to the preferences panel.

[jayaddison]

Note: I have only manually tested the nutrition autosuggest functionality so far (it's the main affected component I'm aware of and familiar with), but I think this pull request is ready for review.

[jayaddison]

I'm encountering a JavaScript error when attempting to close the preferences-edit panel using a build from fd7fb7f.

It seems likely that the foundation code is not forwards-compatible with such a significant jquery version upgrade.

[alexgarel]

@jayaddison thanks for working on this !

[stephanegigandet]

Thank you so much @jayaddison ! I'll do my best to test the PR locally.

[stephanegigandet]

What's the best way to have the gulpfile.ts changes applied in the dev containers? (ideally without running "make dev")

I tried "make front_npm_update", "make front_build" followed by "make restart" but I still have jquery ui 1.13.3

I also tried docker compose up -d --build frontend
but I'm getting an error:

 > [openfoodfacts-server/frontend:dev builder 13/13] RUN npm run build:
#0 0.409 
#0 0.409 > [email protected] build
#0 0.409 > gulp
#0 0.409 
#0 1.030 [11:36:08] Requiring external module ts-node/register
#0 2.230 TypeError: Unknown file extension ".ts" for /opt/product-opener/gulpfile.ts

[jayaddison]

What's the best way to have the gulpfile.ts changes applied in the dev containers? (ideally without running "make dev")

There may be a better way, but so far I have been running make down, make clean and then subsequently SKIP_SAMPLE_IMAGES=1 make dev (I noticed the env var in the Makefile as a way to save some time on each iteration) to bring up a fresh environment. This does also require recreating a user account each time.

[stephanegigandet]

What's the best way to have the gulpfile.ts changes applied in the dev containers? (ideally without running "make dev")

There may be a better way, but so far I have been running make down, make clean and then subsequently SKIP_SAMPLE_IMAGES=1 make dev (I noticed the env var in the Makefile as a way to save some time on each iteration) to bring up a fresh environment. This does also require recreating a user account each time.

Thanks @jayaddison . I did that, but after I'm missing jquery, the file http://static.openfoodfacts.localhost/js/dist/jquery.js does not exist for some reason on my dev environment.

[jayaddison]

Happy New Year - and also, my apologies for the force pushes after PR approval. I wouldn't usually do that, but because I included the contents of branch #10970 in this one originally (so that they would both get merged together), I've been rebasing this branch to follow the rebases on that one (otherwise I worry that the commit history could get confused).

Anyway: I'll re-test this again later today (the behaviour shouldn't have changed since last time, but there's no harm in re-checking).

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud