add Stimulus and importmap

* remove last bits of jquery.  Move all js function into fba.js
* update to ruby 3.1.1

.circleci/config.yml

@@ -6,7 +6,7 @@ version: 2
 jobs:
   build:
     docker:
-       - image: cimg/ruby:3.1.0-browsers
+       - image: cimg/ruby:3.1.1-browsers
          environment:
             RAILS_ENV: test
             PGHOST: 127.0.0.1

Dockerfile

@@ -1,4 +1,4 @@
-FROM ruby:3.1.0-slim
+FROM ruby:3.1.1-slim
 
 RUN apt-get update && apt-get install -y --no-install-recommends \
     build-essential \

Gemfile

@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby '3.1.0'
+ruby '3.1.1'
 
 # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
 gem "rails", "~> 7.0.2", ">= 7.0.2.3"

Gemfile.lock

@@ -326,8 +326,6 @@ GEM
       rack (>= 2.0.0)
     rack-protection (2.2.0)
       rack
-    rack-proxy (0.7.2)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (7.0.2.3)
@@ -430,7 +428,6 @@ GEM
       childprocess (>= 0.5, < 5.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2)
-    semantic_range (3.0.0)
     sidekiq (6.4.2)
       connection_pool (>= 2.2.2)
       rack (~> 2.0)
@@ -544,7 +541,7 @@ DEPENDENCIES
   whenever
 
 RUBY VERSION
-   ruby 3.1.0p0
+   ruby 3.1.1p18
 
 BUNDLED WITH
    2.3.7

app/assets/config/manifest.js

@@ -2,3 +2,5 @@
 //= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
 //= link_directory ../stylesheets .scss
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js

app/javascript/application.js

@@ -1,3 +1,2 @@
-import "./controllers"
-
-console.log("Rails application js");
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+//= require controllers

app/javascript/controllers/application.js

@@ -6,6 +6,6 @@ const application = Application.start()
 application.debug = false
 window.Stimulus   = application
 
-console.log("Stimlus app controller");
+console.log("Stimulus app controller");
 
 export { application }

app/javascript/controllers/hello_controller.js

@@ -2,6 +2,6 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    console.log("Stimulus Hello World!")
+    this.element.textContent = "Hello from Stimulus!"
   }
 }

app/javascript/controllers/index.js

@@ -1,8 +1,11 @@
-// This file is auto-generated by ./bin/rails stimulus:manifest:update
-// Run that command whenever you add a new controller or create them with
-// ./bin/rails generate stimulus controllerName
+// Import and register all your controllers from the importmap under controllers/*
 
-import { application } from "./application"
+import { application } from "controllers/application"
 
-import HelloController from "./hello_controller"
-application.register("hello", HelloController)
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/models/collection.rb

@@ -10,7 +10,7 @@ class Collection < ApplicationRecord
   validates :quarter, presence: true
 
   validates :name, presence: true
-  validates :reflection, length: { maximum: 1000 }
+  validates :reflection, length: { maximum: 5000 }
 
   def omb_control_number
     "omb_control_number"

app/views/components/forms/_custom.html.erb

@@ -101,42 +101,3 @@
     <% end %>
   </div>
 </form>
-<script>
-  // Set 'other' type checkbox option values when associated option text field is updated
-  $('.usa-input.other-option').keyup(function() {
-    // strip commas
-    var val = $(this).val().replace(/,/g, '');
-    // if user has cleared custom text, then reset checkbox value to "other"
-    if (val == '') { val = 'other'; }
-    // set the value of the checkbox option to the custom text as entered
-    var option_selector = "#" + $(this).attr("data-option-id");
-    $(option_selector).prop('checked',true);
-    $(option_selector).val(val);
-  });
-  function showValid(elem) {
-    var questionDiv = $(elem).closest(".question");
-    $(questionDiv).removeClass('usa-form-group--error');
-    var span = questionDiv.find('#input-error-message');
-    $(elem).removeClass("usa-input--error");
-    $(elem).addClass("usa-input--success");
-    $(span).remove();
-  }
-  function showWarning(elem, msg) {
-    var questionDiv = $(elem).closest(".question");
-    $(questionDiv).addClass('usa-form-group--error');
-    var span = questionDiv.find('#input-error-message');
-    var label = questionDiv.find("label");
-    $(elem).addClass("usa-input--error");
-    $(elem).removeClass("usa-input--success");
-    var span = questionDiv.find('#input-error-message');
-    if (span.length == 0) {
-      span = document.createElement('span');
-      span.setAttribute('id', 'input-error-message');
-      span.setAttribute('role','alert');
-      span.setAttribute('class','usa-error-message');
-    }
-    span.innerText = msg;
-    $(span).insertAfter(label)
-    $(this).focus();
-  }
-</script>

app/views/components/forms/question_types/_text_email_field.html.erb

@@ -2,19 +2,3 @@
   <%= render 'components/question_title_label', question: question %>
   <%= text_field_tag question.answer_field.to_sym, nil, type: :email, class: "usa-input", required: question.is_required %>
 </div>
-<script>
-	$('#<%= question.answer_field.to_sym %>').blur(function() {
-		var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-		var email = $.trim($(this).val());
-		if (email.length == 0) {
-			showValid($(this));
-			return;
-		}
-		result = EmailRegex.test(email);
-		if (!result) {
-			showWarning($(this),"Please enter a valid email address");
-		} else {
-			showValid($(this));
-    	}
-	});
-</script>

app/views/components/forms/question_types/_text_phone_field.html.erb

@@ -2,14 +2,3 @@
   <%= render 'components/question_title_label', question: question %>
   <%= telephone_field_tag question.answer_field.to_sym, nil, class: "usa-input", required: question.is_required, maxlength: 10 %>
 </div>
-<script>
-	$('#<%= question.answer_field.to_sym %>').on('input', function() {
-	    var number = $(this).val().replace(/[^\d]/g, '');
-	    if (number.length == 7) {
-	      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
-	    } else if (number.length == 10) {
-	      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
-	    }
-	    $(this).val(number);
-	  });
-</script>

app/views/components/widget/_fba.js.erb

@@ -28,7 +28,6 @@ function FBAform(d, N) {
 		},
 		init: function(options) {
 			this.javscriptIsEnabled();
-
 			this.options = options;
 			<% if form.load_css %>
 			this.loadCss();
@@ -93,12 +92,15 @@ function FBAform(d, N) {
 			d.body.appendChild(this.dialogEl);
 
 			d.querySelector('.fba-modal-close').addEventListener('click', this.handleDialogClose.bind(this), false);
-			var otherElements = d.querySelectorAll(".usa-input.other-option");
-			for (var i = 0; i < otherElements.length; i++) {
-			    otherElements[i].addEventListener('keyup', this.handleOtherOption.bind(this), false);
-			}
 		<% end %>
-
+		var otherElements = d.querySelectorAll(".usa-input.other-option");
+		for (var i = 0; i < otherElements.length; i++) {
+		    otherElements[i].addEventListener('keyup', this.handleOtherOption.bind(this), false);
+		}
+		var phoneElements = d.querySelectorAll("input[type='tel']");
+		for (var i = 0; i < phoneElements.length; i++) {
+		    phoneElements[i].addEventListener('keyup', this.handlePhoneInput.bind(this), false);
+		}
 		<%# add button behaviors for custom-button-modal %>
 		<% if form.delivery_method == "custom-button-modal" %>
 			<% if form.element_selector? %>
@@ -169,6 +171,29 @@ function FBAform(d, N) {
 			option.checked = true;
 			option.value = other_val;
 		},
+		handlePhoneInput: function(e) {
+		    var number = e.srcElement.value.replace(/[^\d]/g, '');
+		    if (number.length == 7) {
+		      number = number.replace(/(\d{3})(\d{4})/, "$1-$2");
+		    } else if (number.length == 10) {
+		      number = number.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
+		    }
+		    e.srcElement.value = number;
+		},
+		handleEmailInput: function(e) {
+			var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+			var email = e.srcElement.value.trim();
+			if (email.length == 0) {
+				return;
+			}
+			result = EmailRegex.test(email);
+			if (!result) {
+				showWarning($(this),"Please enter a valid email address");
+			} else {
+				showValid($(this));
+	    	}
+		    e.srcElement.value = number;
+		},
 		handleSubmitClick: function(e) {
 			e.preventDefault();
 			this.resetErrors();
@@ -493,7 +518,6 @@ function FBAform(d, N) {
 					  }
 						alertErrorElement.removeAttribute("hidden");
 				} else { // SERVER ERROR
-					console.log('failed');
 					alertErrorElement.removeAttribute("hidden");
 					alertErrorElementBody.innerHTML += "Server error. We're sorry, but this submission was not successful. The Product Team has been notified.";
 				}

app/views/layouts/application.html.erb

@@ -16,8 +16,9 @@
     <%= csp_meta_tag %>
     <%= favicon_link_tag asset_path('favicon.ico') %>
     <%= stylesheet_link_tag 'application', media: 'all', integrity: true %>
-    <%= javascript_include_tag 'application', integrity: true %>
+    <%= javascript_include_tag 'app', integrity: true %>
     <%= render 'components/analytics/script_header' %>
+    <%= javascript_importmap_tags %>
   </head>
   <body>
     <%= render 'components/analytics/script_body' %>

bin/importmap

@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+
+require_relative "../config/application"
+require "importmap/commands"

config/importmap.rb

@@ -0,0 +1,6 @@
+# Pin npm packages by running ./bin/importmap
+
+pin "application", preload: true
+pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
+pin_all_from "app/javascript/controllers", under: "controllers"

spec/features/admin/omb_cx_reporting_collections_spec.rb

@@ -73,6 +73,7 @@
 
         travel 14.minutes
         click_on "Update CX Service Detail Report"
+        wait_for_ajax
         expect(find(".usa-alert__text")).to have_content("Omb cx reporting collection was successfully created.")
       end
     end

spec/features/touchpoints_spec.rb

@@ -29,7 +29,7 @@
       context "SPAMBOT" do
         before do
           visit touchpoint_path(form)
-          page.execute_script("$('#fba_directive').val('SPAM Text')")
+          page.execute_script("document.getElementById('fba_directive').value = 'SPAM Text'")
           click_button "Submit"
         end
 
@@ -123,7 +123,6 @@
             all('.usa-checkbox__label').each do |checkbox_label|
               checkbox_label.click
             end
-
             inputs = find_all("input")
             inputs.first.set("hi")
             inputs.last.set("bye")
@@ -299,14 +298,14 @@
 
       it "allows valid email address" do
         fill_in "answer_03", with: "[email protected]"
-        find("#answer_03").native.send_key :tab
-        expect(find("#answer_03").value).to eq("[email protected]")
+        click_button "Submit"
+        expect(page).to have_content("Thank you. Your feedback has been received.")
       end
 
       it "disallows invalid text input" do
         fill_in "answer_03", with: "test@testcom"
-        find("#answer_03").native.send_key :tab
-        expect(page).to have_content("Please enter a valid email")
+        click_button "Submit"
+        expect(page).to have_content("Please enter a valid value: Email")
       end
     end
 

spec/models/collection_spec.rb

@@ -1,5 +1,72 @@
 require 'rails_helper'
 
 RSpec.describe Collection, type: :model do
-  pending "add some examples to (or delete) #{__FILE__}"
+  describe "required attributes" do
+    context "newly created Collection" do
+      before do
+        @collection = Collection.create({})
+      end
+
+      it "requires user" do
+        expect(@collection.errors.messages).to have_key(:user)
+        expect(@collection.errors.messages[:user]).to eq(["must exist"])
+      end
+
+      it "requires organization" do
+        expect(@collection.errors.messages).to have_key(:organization)
+        expect(@collection.errors.messages[:organization]).to eq(["must exist"])
+      end
+
+      it "requires service_provider" do
+        expect(@collection.errors.messages).to have_key(:service_provider)
+        expect(@collection.errors.messages[:service_provider]).to eq(["must exist"])
+      end
+
+      it "requires name" do
+        expect(@collection.errors.messages).to have_key(:name)
+        expect(@collection.errors.messages[:name]).to eq(["can't be blank"])
+      end
+
+      it "requires year" do
+        expect(@collection.errors.messages).to have_key(:year)
+        expect(@collection.errors.messages[:year]).to eq(["can't be blank"])
+      end
+
+      it "requires quarter" do
+        expect(@collection.errors.messages).to have_key(:quarter)
+        expect(@collection.errors.messages[:quarter]).to eq(["can't be blank"])
+      end
+
+    end
+  end
+
+  let(:organization) { FactoryBot.create(:organization) }
+  let(:user) { FactoryBot.create(:user, organization: organization) }
+  let(:service_provider) { FactoryBot.create(:service_provider, organization: organization) }
+
+  describe "a minimally valid Collection" do
+    before do
+      @collection = Collection.create(name: "Test Collection", organization: organization, user: user, service_provider: service_provider, year: 2022, quarter: 2)
+    end
+
+    it "requires user" do
+      expect(@collection.valid?).to eq(true)
+    end
+  end
+
+  describe "reflection text that is too long" do
+    context do
+      before do
+        reflection_text = "longstring" * 600 # 6,000 char string
+        @collection = Collection.create(name: "Test Collection", organization: organization, user: user, service_provider: service_provider, year: 2022, quarter: 2, reflection: reflection_text)
+      end
+
+      it "adds error, indicating 5000 character limit" do
+        expect(@collection.valid?).to eq(false)
+        expect(@collection.errors.messages[:reflection].first).to eq("is too long (maximum is 5000 characters)")
+      end
+
+    end
+  end
+
 end