Migrate the old JS to a modern frontend JS

[syphax-bouazzouni]

Context

In release 2.7.0 , we did major work on migrating some old JS code to either a new native JS code or converting it to Ruby, harmonizing and modernizing our code base.

Which makes us more of a ruby project

than before

But still, we, have not yet fully migrated, below are listed our current dependencies that we need to remove or update

From vendor.js (external dependencies)

//= require jquery2
//= require jquery-migrate-1.3.0.min
//= require jquery_ujs
//= require jquery-ui
//= require popper
//= require bootstrap-sprockets 
//= require jquery.dataTables 
//= require chosen.jquery  //removed  ✅
//= require autocomplete
//= require alertify 
//= require jquery.readyselector
//= require trumbowyg
//= require jquery.tooltip //removed  ✅ 
//= require Chart.min  
//= require select2  //removed  ✅ 
//= require jquery.hoverIntent //removed  ✅ 
//= require jquery.simple.tree //removed  ✅ 
//= require jquery.scrollTo-1.4.0-min //removed  ✅ 
//= require jquery.rating.pack //removed  ✅ 
//= require history/jquery.history  //removed  ✅ 
//= require ajax-chosen //removed  ✅ 
//= require jquery.cookie //removed  ✅ 
//= require jquery.blockUI //removed  ✅ 
//= require facebox  //removed  ✅ 
//= require thickbox //removed  ✅ 
//= require fg.menu //removed  ✅ 
//= require jquery.tools.min //removed  ✅ 
//= require dataTables.fixedHeader //removed  ✅ 

From application.js (our old js code)

//= require bioportal
//= require admin/licenses
//= require bp_ajax_controller
//= require bp_notes
//= require bp_form_complete
//= require bp_mappings  //removed  ✅ 
//= require bp_admin
//= require concepts
//= require_tree ./helpers //removed  ✅ 
//= require_tree ./components //removed  ✅ 
//= require projects
//= require application_esbuild
//= require bp_reviews //removed  ✅ 
//= require bp_ontolobridge //removed  ✅ 
//= require bp_analytics //removed  ✅ 
//= require bp_search //removed  ✅ 
//= require bp_recommender //removed  ✅ 
//= require bp_property_tree //removed  ✅ 
//= require home //removed  ✅ 
customElements.define('data-table-loader', DataTableLoader ); //removed  ✅ 
customElements.define('data-table', DataTable ); //removed  ✅ 
customElements.define('instances-table', InstancesTable ); //removed  ✅ 

TODO

• [ ] See the usage of these dependencies,
• [ ] Remove the unused
• [ ] Migrate the used

[syphax-bouazzouni]

The first easy iteration done here https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/429

[syphax-bouazzouni]

The second iteration done here https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/307

[syphax-bouazzouni]

The third iteration done here https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/430

[syphax-bouazzouni]

The fourth iteration done here https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/431

[syphax-bouazzouni]

The 5th iteration done here #412

[syphax-bouazzouni]

The 6th iteration is done here https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/433

[syphax-bouazzouni]

The 7th removed the instance JS code here #550

[syphax-bouazzouni]

Removed bp_mapping.js file in https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/733

[syphax-bouazzouni]

Remoded chosen dependency in https://github.com/ontoportal-lirmm/bioportal_web_ui/pull/734

[syphax-bouazzouni]

This are things remaining to remove/migrate, @Bilelkihal do you think you can migrate to esbuild the following: datatables, alertify (used in admin page) and trumbowyg (not really used but can be useful in the futur) ?

// application.js file 
//= require bioportal
//= require admin/licenses
//= require bp_ajax_controller
//= require bp_notes
//= require bp_form_complete
//= require bp_admin
//= require concepts
//= require projects
//= require Chart.min
//= require application_esbuild

// vendor.js file
// Jquery 2 dependencies
//= require jquery2
//= require jquery-migrate-1.3.0.min
//= require jquery_ujs
//= require jquery-ui
// popper is required by bootstrap 4
//= require popper
//= require bootstrap-sprockets
// Other
//= require jquery.dataTables
//= require autocomplete
// Alertify is used the admin page
//= require alertify
//= require jquery.readyselector
// can be removed used only in the ontology bridge form
//= require trumbowyg

[Bilelkihal]

@syphax-bouazzouni For:

• Alertify there are some alternatives like: SweetAlert2 (https://github.com/carlweis/sweetalert2-rails) or we can do something simple custom using a stimulus controller.
• Trumbowyg: We can delete it for now and the day we need it we can use something like Quilljs (https://github.com/abhinavmathur/quilljs-rails)

The real challenge is in datatables since we use it in many parts of the app, and I couldn't find any alternatives with the same features that doesn't require jquery.

[syphax-bouazzouni]

@syphax-bouazzouni For:

* Alertify there are some alternatives like: SweetAlert2 (https://github.com/carlweis/sweetalert2-rails) or we can do something simple custom using a stimulus controller.

* Trumbowyg: We can delete it for now and the day we need it we can use something like Quilljs (https://github.com/abhinavmathur/quilljs-rails)

The real challenge is in datatables since we use it in many parts of the app, and I couldn't find any alternatives with the same features that doesn't require jquery.

• Ok for Trumbowyg, but need to find its usage and remove it, see the screenshot below

• For Alertify, no need to change it, you need to just to migrate to work in esbuild. (adding it in the package.json and having a dedicated stimulus controller or using https://www.stimulus-components.com/docs/stimulus-dialog), see usages in the screenshot below

• For Datatable, same no need to change, make it work using esbuild, I think you started already the work with the stimulus controllertable_component_controller.js, you need to migrate the remaining usage of the old datatable code, see the screenshot below