Webpacker migration - WIP

[benjaminfaure]

Fixes #3185

• Removed webpacker gem
• Added jsbundling-rails
• Updated webpack and its configuration to V5
• Moved app/javascript/packs/application.js to app/javascript/application.js
• Removed ruby-sass gem
• Added cssbundling-rails gem and DartSass JS library
• Updated SASS stylesheets following the migration to the latest version of the sass package (See below).
• Removed font-awesome-sass gem and used @fortawesome/fontawesome-free npm package

You should see some compilation warning for the CSS, they are mainly caused by math functions called by the bootstrap sass files. I think they should disapear once we migrate to Bootstrap 4/5

[github-actions]

	2 Warnings
⚠️	There are code changes, but no corresponding tests. Please include tests if this PR introduces any modifications in behavior. \n Ignore this warning if the PR ONLY contains translation.io synced updates.
⚠️	This PR is too big! Consider breaking it down into smaller PRs.

Generated by 🚫 Danger

[briri]

Thanks for this @benjaminfaure I will review and test later this week.

[benjaminfaure]

I had some issues setting up the font-awesome gem with the sass compiler so replaced it by the npm package.
The CSS inside gems are handled by something called sprockets I think ? I didn't managed to set up this kind of CSS with the new sass compiler.

At the moment some tests are failing because some of the icons are not displayed properly, I'll have to fix them.

[briri]

I got this working but needed to do the following:

• create the app/assets/builds directory otherwise I was getting a "link_tree argument must be a directory" error from Sprockets.
• rails tmp:clear && rails assets:clobber && rails assets:precompile

We'll need to add that info to the release notes when this gets merged.

I looked at the font awesome issues but didn't make much progress. The interesting thing is that it works in some places but not others. For example, the 'Write Plan' page the plus and minus signs for the sections are working, but the sort arrows on the tables are not.

The sort arrows are defined in the app/controllers/concerns/paginable.rb. Maybe there is a timing issue with the way those are pulled into the erb and when the font awesome icons are swapped in? I would think this happens on the browser but am not 100% sure.

In both cases font awesome has inserted a SVG icon, but the sort arrows show the data-icon value as undefined which leads me to believe that the issue is with font awesome. The sort icons are in the free version so not sure why it's unable to find them.
Here is a screenshot of the missing icon:

And one where it was able to find the icon:

[benjaminfaure]

Thank you for your feedback Brian. I'll add a rails task for the assets cleaning & the build folder creation.

The npm version of FontAwesome seems to put placeholder in some cases, when an icon is missing or not included properly (which is nice). In your case, the arrows briefly appear, that's weird.

Right now we're using sprockets that includes CSS/JS contained in gems but it doesn't seem to work with JS/CSSBundling anymore. There's a new official solution called Propshaft (https://github.com/rails/propshaft) but I didn't want to include yet another gem just for FontAwesome, that's why i tried to use the npm package :)

[benjaminfaure]

I managed to fix the missing icon problems. I removed the import of the FontAwesome JS, it wasn't executed with AJAX call. We just need the Sass imports.

[briri]

excellent! I will have a look and test it out next week. Thanks @benjaminfaure!