diff --git a/CHANGELOG b/CHANGELOG
index bc5dd81e7..c5e87f14d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,5 +1,6 @@
[v#.#.#] ([month] [YYYY])
- Upgrade to Rails 7.0.8
+ - Add importmap-rails to handle js libraries
- Upgraded gems:
- [gem]
- Bugs fixes:
diff --git a/Gemfile b/Gemfile
index a4e8535af..87b500ee1 100644
--- a/Gemfile
+++ b/Gemfile
@@ -69,6 +69,10 @@ gem 'time', '>= 0.2.2'
gem 'font-awesome-sass', '~> 6.4.0'
+gem 'importmap-rails', '~> 1.2'
+
+gem 'sprockets-rails', '>= 3.0.0'
+
# ------------------------------------------------------ With native extensions
# These require native extensions.
# Ensure Traveling Ruby provides an appropriate version before bumping.
diff --git a/Gemfile.lock b/Gemfile.lock
index 9f1e5ea68..e0aeb2ea2 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -230,6 +230,9 @@ GEM
i18n (1.14.1)
concurrent-ruby (~> 1.0)
image_size (1.3.1)
+ importmap-rails (1.2.1)
+ actionpack (>= 6.0.0)
+ railties (>= 6.0.0)
jbuilder (2.10.0)
activesupport (>= 5.0.0)
jquery-fileupload-rails (0.3.5)
@@ -564,6 +567,7 @@ DEPENDENCIES
guard-rspec
html-pipeline
image_size (~> 1.3.0)
+ importmap-rails (~> 1.2)
jbuilder (~> 2.7)
jquery-fileupload-rails (~> 0.3.4)
jquery-hotkeys-rails
@@ -604,6 +608,7 @@ DEPENDENCIES
simple_form
sinatra (~> 2.2.3)
spring
+ sprockets-rails (>= 3.0.0)
sqlite3
terser (~> 1.1)
thor (~> 1.2.1)
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index b16e53d6d..bdfe922d3 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,3 +1,13 @@
+//= link application.css
+//= link setup/setup.css
+//= link tylium.css
+
+//= link legacy.application.js
+//= link tylium.js
+
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
+
//= link_tree ../images
-//= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
+
+//= link_tree ../../../vendor/assets
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/legacy.application.js
similarity index 100%
rename from app/assets/javascripts/application.js
rename to app/assets/javascripts/legacy.application.js
diff --git a/app/assets/javascripts/tylium.js b/app/assets/javascripts/tylium.js
index a8c80bea5..a447a2131 100644
--- a/app/assets/javascripts/tylium.js
+++ b/app/assets/javascripts/tylium.js
@@ -15,9 +15,6 @@
//= require popper
//= require bootstrap
-//= require vendor/datatables.min
-//= require vendor/stupidtable
-
//= require cable
//= require shared/auto_save/local
diff --git a/app/javascript/application.js b/app/javascript/application.js
new file mode 100644
index 000000000..03422366f
--- /dev/null
+++ b/app/javascript/application.js
@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import 'datatables'
+import 'stupidtable'
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index f2c6ece58..8d9fd7697 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -3,10 +3,11 @@
<%= [content_for(:title), 'Dradis Community Edition'].compact.join(' | ') %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
- <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
+ <%= javascript_include_tag 'legacy.application', 'data-turbolinks-track' => true %>
<%= favicon_link_tag %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
+ <%= javascript_importmap_tags %>
diff --git a/app/views/layouts/tylium.html.erb b/app/views/layouts/tylium.html.erb
index b2f7a9db6..899df6e8b 100644
--- a/app/views/layouts/tylium.html.erb
+++ b/app/views/layouts/tylium.html.erb
@@ -25,6 +25,7 @@
<%= javascript_include_tag 'tylium', 'data-turbolinks-track' => true %>
<%= csrf_meta_tag %>
<%= csp_meta_tag %>
+ <%= javascript_importmap_tags %>
diff --git a/bin/importmap b/bin/importmap
new file mode 100755
index 000000000..05b5f755f
--- /dev/null
+++ b/bin/importmap
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative '../config/application'
+require 'importmap/commands'
diff --git a/config/importmap.rb b/config/importmap.rb
new file mode 100644
index 000000000..848ae586b
--- /dev/null
+++ b/config/importmap.rb
@@ -0,0 +1,6 @@
+# Pin npm packages by running ./bin/importmap
+
+pin 'application', preload: true
+
+pin 'datatables'
+pin 'stupidtable'
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index d2b3d7c36..783549bda 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -6,18 +6,6 @@
# Add additional assets to the asset load path.
# Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
-Rails.application.config.assets.paths << Rails.root.join('node_modules')
-
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added.
-
-# Setup
-Rails.application.config.assets.precompile += %w( setup/setup.css )
-
-# Tylium
-Rails.application.config.assets.precompile += %w( tylium.js tylium.css )
-
-# Include font files
-Rails.application.config.assets.precompile << ["*.svg", "*.eot", "*.woff", "*.ttf"]
diff --git a/app/assets/javascripts/vendor/datatables.min.js b/vendor/javascript/datatables.js
similarity index 100%
rename from app/assets/javascripts/vendor/datatables.min.js
rename to vendor/javascript/datatables.js
diff --git a/app/assets/javascripts/vendor/stupidtable.js b/vendor/javascript/stupidtable.js
similarity index 100%
rename from app/assets/javascripts/vendor/stupidtable.js
rename to vendor/javascript/stupidtable.js