Refactor: Update rails to version 7.0

[syphax-bouazzouni]

Prerequisites

• Refactor: Update rails version from 6 to 6.1 #197
• Fix: unpin activesupport version (for Rails >= 6.1) ontologies_api_ruby_client#11
• ruby >= 2.7
• rails >= 7

Changes

• Done rails app:update (a7132a9)
• Fix the conflicts with rails app:update changes
• install jsbundling-rails with the esbuild option (1f56d3c)
• install stimulus js (e7002ec)
• update the Gemfile to be sync to the rails 7 one (6cc4604)
• Adapt the new js bundling to work with our old system which was the asset pipeline (a7132a9) (see the details below)
• Use the JS compressor (87e809e)
• Use the new SASS compiler (a36924c)

How the new asset pipeline works

The significant change of the rails version is better handling of the javascript and allowing us to use the modern js (ECMAScript 2021). To make this possible this new version comes with esbuild for bundling our js code and stimulus js framework to organize it (and replace all where we can jquery) (see details here #151).

However, our old code will not work directly with this new system. So for some time, I propose to work in a transitional state where our old code will work in parallel with the modern one. The old code will still be in app/assets/javascripts and the modern one will be in the new folder app/javascript

It works like so :

1. The modern js in app/javascript is compiled and bundled to the app/assets/builds as a regular JS code file.
2. The bundled modern js code in app/assets/builds will then be added to the existing asset pipeline that we had before in app/assets/javascripts.

What we need to do next (for the js part of our frontend):

1. Migrate incrementally the old code to the modern JS,
   • First by replacing jquery with Stimulus
   • Second with the using of the modules import/export system
2. Use package.json to set our dependencies and yarn to install it:
   currently we are using app/assets/javascripts/vendor.js to define our dependencies and the folder vendor/assets/javascripts to store their source code. But nowadays the best is to use a package manager (in our case yarn) to handle it for us. We have also to remove the direct include of dependencies from CDN like those in the `app/views/layouts/_header.html.erb' file :

     <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" %>
     <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
     <%= javascript_include_tag "//unpkg.com/split.js/dist/split.min.js" %>

3. in the browse page, replace angular.js because it's deprecated and used nowhere else
4. Think of a better way to handle the app state, and no more use Jquery.data()

     <script>
       jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
       jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};
       jQuery(document).data().bp.submission_latest = <%=@submission_latest.to_json.html_safe%> || {};
       jQuery(document).data().bp.ontolobridge_ontologies = <%=$NEW_TERM_REQUEST_ONTOLOGIES.to_json.html_safe%> || [];
       jQuery(document).data().bp.ont_viewer = {};
       jQuery(document).data().bp.ont_chart = {};
     </script>

5. Remove the js.erb files because it's no more supported by the this new system (esbuild)
6. Include and compile the js code after the page load. It will make the page load more fastly and not wait to load all the js code to begin to show the page.

[jvendetti]

Thanks for the pull request @syphax-bouazzouni. I had a need to break the upgrade into a couple of smaller chunks in our production environment. I'd like to close this request now unless you have objections?

In terms of the future work that you detailed in "What we need to do next (for the js part of our frontend)", I'd prefer to enter a handful of issues so that we can track each of the points separately. Objections?

[syphax-bouazzouni]

Thanks for the pull request @syphax-bouazzouni. I had a need to break the upgrade into a couple of smaller chunks in our production environment. I'd like to close this request now unless you have objections?

In terms of the future work that you detailed in "What we need to do next (for the js part of our frontend)", I'd prefer to enter a handful of issues so that we can track each of the points separately. Objections?

Hello 👋 , Yes fine by me. I saw your release, good work on that.