Problem/Motivation

While I was updating the 2.x branch to use Drupal.org's GitLab CI for automated linting and testing, the new eslint lints started identifying a bunch of issues with the JavaScript and/or YAML in the project. At time-of-writing, the most recent set of lints were in job 462178.

I tried automatically fixing the issues identified, but there were some that were non-trivial to fix, and my JS isn't good enough to the best way to fix these, so I have left the file as-is (i.e.: without committing the automatic fixes). Here are the lints left over after the automatic fixes:

web/modules/contrib/multiselect/js/multiselect.js
    5:2   warning  Unexpected unnamed function                     func-names
   34:37  warning  Unexpected unnamed function                     func-names
   40:9   warning  Unexpected unnamed function                     func-names
   46:25  warning  Unexpected unnamed function                     func-names
   54:44  warning  Unexpected unnamed function                     func-names
   62:43  warning  Unexpected unnamed function                     func-names
   70:35  warning  Unexpected unnamed function                     func-names
   79:38  warning  Unexpected unnamed function                     func-names
  103:23  warning  Unexpected unnamed function                     func-names
  104:13  warning  Unexpected unnamed function                     func-names
  116:32  warning  Unexpected unnamed function                     func-names
  117:16  error    Use the rest parameters instead of 'arguments'  prefer-rest-params
  118:13  warning  Unexpected unnamed function                     func-names
  129:29  warning  Unexpected unnamed function                     func-names
  130:16  error    Use the rest parameters instead of 'arguments'  prefer-rest-params
  131:13  warning  Unexpected unnamed function                     func-names
  137:9   warning  Unary operator '--' used                        no-plusplus
  147:23  warning  Unexpected unnamed function                     func-names
  148:18  error    Use the rest parameters instead of 'arguments'  prefer-rest-params
  149:13  warning  Unexpected unnamed function                     func-names
  164:26  warning  Unexpected unnamed function                     func-names
  165:22  error    Use the rest parameters instead of 'arguments'  prefer-rest-params
  166:13  warning  Unexpected unnamed function                     func-names
  169:24  error    Expected '===' and instead saw '=='             eqeqeq

✖ 24 problems (5 errors, 19 warnings)

Steps to reproduce

To reproduce this locally...

  1. Download and install Drupal 10.1.
  2. Make sure that JS packages are installed (one of which is eslint):
    1. cd web/core
    2. yarn install
    3. cd ../..
  3. Install the multiselect module and dependencies, and get it ready for development:
    1. composer require --prefer-install=source "drupal/multiselect"
    2. cd web/modules/contrib/multiselect
    3. git fetch --all -t -p
    4. git checkout 2.x
    5. git pull
    6. (follow the git instructions for this issue)
  4. Set up eslint config files like the GitLab CI job does. Note this ignores the files so they won't accidentally get committed. We probably don't want to commit them so that Drupal core's JS standards can evolve upstream:
    1. cp ../../../core/.prettierrc.json . && echo ".prettierrc.json" | tee -a .git/info/exclude
    2. echo '*.yml' > .prettierignore && echo ".prettierignore" | tee -a .git/info/exclude
  5. Run eslint - this will show all 94 problems, including ones that can be automatically fixed: ../../../core/node_modules/.bin/eslint --no-error-on-unmatched-pattern --ignore-pattern="*.es6.js" --resolve-plugins-relative-to=../../../core --ext=.js,.yml .: this should match what you currently see in GitLab CI, i.e.: in job 462178
  6. Ask eslint to fix the problems it can fix safely: ../../../core/node_modules/.bin/eslint --no-error-on-unmatched-pattern --ignore-pattern="*.es6.js" --resolve-plugins-relative-to=../../../core --ext=.js,.yml . --fix : this will do what it can and write out the problems it can't fix, which will probably match what I pasted in the Problem/Motivation section above.
  7. (fix the errors)
  8. Make sure to run eslint one more time before committing: ../../../core/node_modules/.bin/eslint --no-error-on-unmatched-pattern --ignore-pattern="*.es6.js" --resolve-plugins-relative-to=../../../core --ext=.js,.yml .

Proposed resolution

Fix the errors.

Remaining tasks

  1. Write a patch or merge request.
  2. Review and feedback
  3. RTBC and feedback
  4. Commit

User interface changes

None.

API changes

None.

Data model changes

None.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

mparker17 created an issue. See original summary.

mparker17’s picture

Issue summary: View changes

Whoops I made a small typo in the issue summary.

bobi-mel’s picture

Assigned: Unassigned » bobi-mel

bobi-mel’s picture

Assigned: bobi-mel » Unassigned
Status: Active » Needs review

I've fixed the issue. Please check it.

mparker17’s picture

Status: Needs review » Fixed

Code review looks good; manual testing works; automated tests work. Looks good to me! Thanks very much @bobi-mel!

bobi-mel’s picture

Thanks for the really fast review.

rgpublic’s picture

Um, this commit changed jQuery.fn.selectAll to an arrow function. Due to this change, the selectAll function doesn't seem to work anymore it seems - causing JS errors. I guess the reason is that the semantics of "this" has been changed inadvertently. Using the arrow function, "this" is now pointing to a window and not to the JQuery object anymore.

mparker17’s picture

Status: Fixed » Needs work

@rgpublic, thanks for noticing this issue, and reporting it here! (JavaScript scope resolution is hard!)

I will move this ticket back to "Needs work" so that we fix it before the next release.

bobi-mel’s picture

Assigned: Unassigned » bobi-mel

I'll review and correct these remarks and correct as soon as possible

bobi-mel’s picture

Assigned: bobi-mel » Unassigned
Status: Needs work » Needs review

HI @mparker17 @rgpublic
I have reviewed your remarks and agree with them. I haven't checked whether the data is saved after the form is saved. I fixed it and tested everything works as expected.
@mparker17
No CTA only IFU
I found that the jQuery.fn.removeOption() function is never called, so it probably needs to be removed, I suggest creating a separate issue for this for a deeper investigation.

mparker17’s picture

Status: Needs review » Fixed

The follow-up has been merged; thanks @rgpublic and @bobi-mel!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.