Fix unable to collapse/expand board list on mobile

What does this MR do?

This fixes issue #32064 (closed) where clicking on the arrow button doesn't collapse/expand a board list on mobile device.

Root Cause

The arrow button that toggles the board list has a css class of no-drag and this class is being filtered by SortableJS when we init the board to be sortable.

When an element is filtered it will be preventDefault() by default, as per SortableJS' doc.

	filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
	preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`

Thus, the collapse toggle button will not emit any event on click when it's being filtered.

Solution

The fix is to simply set preventOnFilter: false to allow the click event to fire. There are two places I could insert the fix:

• app/assets/javascripts/boards/mixins/sortable_default_options.js where the default sortable options are being defined for any board, or
• app/assets/javascripts/boards/components/board.js where each board is init'ed to be sortable

I've decided to add it to the first file because it seems more natural to have preventOnFilter: false right next to the filter: '.no-drag' option as preventOnFilter acts on selectors in filter.

Note: However this doesn't explain why the button was clickable on desktop but not on mobile in the first place. Perhaps something to do with click vs. touch event handling in SortableJS' codebase. Below are a few fixes on the SortableJS side that might be related, but even after carefully reading through them I still don't quite understand why this only happens on mobile.

• https://github.com/SortableJS/Sortable/pull/441
• https://github.com/SortableJS/Sortable/pull/411
• https://github.com/SortableJS/Sortable/issues/250

Screenshots

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry
• [-] Documentation created/updated or follow-up review issue created
• Code review guidelines
• [-] Merge request performance guidelines
• Style guides
• [-] Database guides
• [-] Separation of EE specific content

Availability and Testing

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.
• Tested in all supported browsers

Desktop

• Chrome
• Firefox
• IE 11
• Edge
• Safari

Mobile

• Safari (iOS)
• Chrome (Android)

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

• [-] Label as security and @ mention @gitlab-com/gl-security/appsec
• [-] The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• [-] Security reports checked/validated by a reviewer from the AppSec team

Closes #32064 (closed)