Use npm to manage external assets

.gitignore

@@ -23,3 +23,4 @@ bin
 .DS_Store
 .tool-versions
 tags
+node_modules

lib/flipper/ui/action.rb

@@ -27,24 +27,7 @@ def feature_name
                                              'delete'.freeze,
                                            ]).freeze
 
-      SOURCES = {
-        bootstrap_css: {
-          src: '/css/bootstrap-4.6.0.min.css'.freeze,
-          hash: 'sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l'.freeze
-        }.freeze,
-        jquery_js: {
-          src: '/js/jquery-3.6.0.slim.js'.freeze,
-          hash: 'sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY='.freeze
-        }.freeze,
-        popper_js: {
-          src: '/js/popper-1.12.9.min.js'.freeze,
-          hash: 'sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q'.freeze
-        }.freeze,
-        bootstrap_js: {
-          src: '/js/bootstrap-4.6.0.min.js'.freeze,
-          hash: 'sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF'.freeze
-        }.freeze
-      }.freeze
+      SOURCES = JSON.parse(File.read(File.expand_path('sources.json', __dir__))).freeze
       CONTENT_SECURITY_POLICY = <<-CSP.delete("\n")
         default-src 'none';
         img-src 'self';
@@ -296,19 +279,22 @@ def write_allowed?
       end
 
       def bootstrap_css
-        SOURCES[:bootstrap_css]
+        asset_hash "/css/bootstrap.min.css"
       end
 
       def bootstrap_js
-        SOURCES[:bootstrap_js]
+        asset_hash "/js/bootstrap.min.js"
       end
 
       def popper_js
-        SOURCES[:popper_js]
+        asset_hash "/js/popper.min.js"
       end
 
-      def jquery_js
-        SOURCES[:jquery_js]
+      def asset_hash(src)
+        {
+          src: "#{src}?v=#{Flipper::VERSION}",
+          hash: SOURCES[src]
+        }
       end
     end
   end

lib/flipper/ui/sources.json

@@ -0,0 +1,5 @@
+{
+  "/css/bootstrap.min.css": "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH",
+  "/js/bootstrap.min.js": "sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy",
+  "/js/popper.min.js": "sha384-wtNlGLUJ2I0nMcuD4N4C2l3SrJdgaRpeu64hbXM9GHBPIEAQZqtmrvsJZAIL10I0"
+}

package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "popper.js": "^1.16.1"
+  },
+  "scripts": {
+    "postinstall": "script/vendor-assets"
+  }
+}

script/vendor-assets

@@ -0,0 +1,22 @@
+#!/usr/bin/env ruby
+
+require 'fileutils'
+require 'digest'
+require 'json'
+
+sources = [
+  "bootstrap/dist/css/bootstrap.min.css",
+  "bootstrap/dist/js/bootstrap.min.js",
+  "popper.js/dist/popper.min.js"
+]
+
+integrity = sources.map do |src|
+  ext = File.extname(src)[1..-1]
+  FileUtils.cp("node_modules/#{src}", "lib/flipper/ui/public/#{ext}/")
+
+  public_path = "/#{ext}/#{File.basename(src)}"
+  digest = "sha384-" + Digest::SHA2.new(384).base64digest(File.binread("node_modules/#{src}"))
+  [public_path, digest]
+end.to_h
+
+File.write "lib/flipper/ui/sources.json", JSON.pretty_generate(integrity)