Merge pull request #1254 from ElixirTeSS/copilot/change-js-css-dependency-installation

Replace rails-assets.org gems with yarn/npm packages

Author: fbacall

.github/workflows/deployment-checks.yml

@@ -48,7 +48,14 @@ jobs:
           cp config/secrets.github.yml config/secrets.yml
           cp config/ingestion.example.yml config/ingestion.yml
           bundle exec rake db:setup
-      - run: bundle exec rake assets:precompile
-        name: Run asset compilation
-      - run: bundle exec whenever --update-crontab --set environment="$ENV"
-        name: Run whenever update
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile --non-interactive
+      - name: Run asset compilation
+        run: bundle exec rake assets:precompile
+      - name: Run whenever update
+        run: bundle exec whenever --update-crontab --set environment="$ENV"

.github/workflows/test.yml

@@ -53,5 +53,12 @@ jobs:
           cp config/secrets.github.yml config/secrets.yml
           cp config/ingestion.example.yml config/ingestion.yml
           bundle exec rake db:test:prepare
-      - run: bundle exec rails test
-        name: Run tests
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile --non-interactive
+      - name: Run tests
+        run: bundle exec rails test

.gitignore

@@ -40,4 +40,5 @@ config/ontologies/*.cache
 
 tess.crontab
 
-app-secrets*
+app-secrets*
+node_modules/

Dockerfile

@@ -8,9 +8,11 @@ WORKDIR /code
 
 # install dependencies
 RUN apt-get update \
-    && apt-get install build-essential curl file git gnupg2 imagemagick libpq-dev libyaml-dev nodejs -y \
+    && apt-get install build-essential curl file git gnupg2 imagemagick libpq-dev libyaml-dev nodejs npm -y \
     && apt-get clean
 
+# install yarn to manage JS dependencies
+RUN npm install --global yarn@1.22.22
 
 # install supercronic - a cron alternative
 ENV SUPERCRONIC_URL=https://github.com/aptible/supercronic/releases/download/v0.1.12/supercronic-linux-amd64 \
@@ -41,6 +43,12 @@ COPY Gemfile Gemfile.lock ./
 # install gems
 RUN bundle check || bundle install
 
+# copy package file
+COPY package.json yarn.lock ./
+
+# install js dependencies
+RUN yarn install --frozen-lockfile --non-interactive
+
 # copy code
 COPY . .
 

Gemfile

@@ -74,15 +74,6 @@ gem 'validate_url'
 gem 'whenever', require: false # Work around https://github.com/javan/whenever/issues/831
 gem 'will_paginate'
 
-source 'https://rails-assets.org' do
-  gem 'rails-assets-clipboard', '~> 1.5.12'
-  gem 'rails-assets-devbridge-autocomplete', '~> 1.4.9'
-  gem 'rails-assets-eonasdan-bootstrap-datetimepicker', '~> 4.17.42'
-  gem 'rails-assets-markdown-it', '~> 7.0.1'
-  gem 'rails-assets-moment', '~> 2.30.1'
-  gem 'rails-assets-select2', '~> 4.0.8'
-end
-
 group :development, :test do
   gem 'byebug'
   gem 'pry-byebug'

Gemfile.lock

@@ -6,20 +6,6 @@ GIT
     tess_rdf_extractors (1.1.0)
       linkeddata (~> 3.2.0)
 
-GEM
-  remote: https://rails-assets.org/
-  specs:
-    rails-assets-clipboard (1.5.16)
-    rails-assets-devbridge-autocomplete (1.4.9)
-      rails-assets-jquery (>= 1.7)
-    rails-assets-eonasdan-bootstrap-datetimepicker (4.17.49)
-      rails-assets-jquery (>= 1.8.3)
-      rails-assets-moment (>= 2.10.5)
-    rails-assets-jquery (3.7.0)
-    rails-assets-markdown-it (7.0.1)
-    rails-assets-moment (2.30.1)
-    rails-assets-select2 (4.0.8)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -872,12 +858,6 @@ DEPENDENCIES
   pundit
   rack-cors
   rails (= 7.2.2.2)
-  rails-assets-clipboard (~> 1.5.12)!
-  rails-assets-devbridge-autocomplete (~> 1.4.9)!
-  rails-assets-eonasdan-bootstrap-datetimepicker (~> 4.17.42)!
-  rails-assets-markdown-it (~> 7.0.1)!
-  rails-assets-moment (~> 2.30.1)!
-  rails-assets-select2 (~> 4.0.8)!
   rails-controller-testing
   rails-i18n
   rails_admin

app/assets/javascripts/application.js

@@ -26,8 +26,8 @@
 //= require markdown-it
 //= require URI
 //= require moment
-//= require eonasdan-bootstrap-datetimepicker
-//= require devbridge-autocomplete
+//= require bootstrap-datetimepicker
+//= require jquery.autocomplete
 //= require clipboard
 //= require ardc_vocab_widget_v2
 //= require select2

app/assets/stylesheets/application.scss

@@ -47,7 +47,7 @@
 // Vendor
 @import "cytoscape-panzoom";
 @import "jquery.simplecolorpicker";
-@import "eonasdan-bootstrap-datetimepicker";
+@import "bootstrap-datetimepicker";
 @import "ardc_vocab_widget_v2";
 @import "jquery.qtip.min";
 @import "select2";

config/initializers/assets.rb

@@ -3,8 +3,20 @@
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = "1.0"
 
-# Add additional assets to the asset load path.
-# Rails.application.config.assets.paths << Emoji.images_path
+# Add node_modules subdirectories to the Sprockets asset load path so that
+# JS/CSS packages installed via yarn can be referenced with //= require and @import.
+%w[
+  clipboard/dist
+  devbridge-autocomplete/dist
+  eonasdan-bootstrap-datetimepicker/src/js
+  eonasdan-bootstrap-datetimepicker/build/css
+  markdown-it/dist
+  moment
+  select2/dist/js
+  select2/dist/css
+].each do |path|
+  Rails.application.config.assets.paths << Rails.root.join("node_modules/#{path}")
+end
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets

docs/install.md

@@ -16,11 +16,12 @@ TeSS requires the following system packages to be installed:
 - ImageMagick
 - A Java runtime
 - A JavaScript runtime
+- npm (and yarn)
 - Redis
 
 To install these under an Ubuntu-like OS using apt:
 
-    sudo apt-get install git postgresql libpq-dev imagemagick nodejs redis-server openjdk-11-jdk
+    sudo apt-get install git postgresql libpq-dev imagemagick nodejs npm redis-server openjdk-11-jdk
 
 For Mac OS X:
 
@@ -67,6 +68,18 @@ Once you have Ruby, RVM and bundler installed, from the root folder of the app d
 
 This will install Rails, as well as any other gem that the TeSS app needs as specified in Gemfile (located in the root folder of the TeSS app).
 
+## JS
+
+TeSS uses yarn to manage JS dependencies.
+
+Install it using npm:
+
+    npm install --global yarn@1.22.22
+
+and install JS dependencies using (from the app's root directory):
+
+    yarn install --frozen-lockfile
+
 ## PostgreSQL
 
 Install postgres and add a postgres user called 'tess_user' for the use by the TeSS app (you can name the user any way you like).