[deploy] Make profile settings save button sticky when modified (#9378)

* Make profile settings save button sticky when modified

* Replace querySelector with class selector, add newlines to end of files

* Make profile settings save button sticky when modified

* Replace querySelector with class selector, add newlines to end of files

* Add rspec test for sticky footer

* Move visit method to before block

app/assets/stylesheets/settings.scss

@@ -139,3 +139,9 @@ $input-width: 650px;
 .crayons-notice--danger h3 {
   color: var(--accent-danger-darker);
 }
+
+.sticky-save-footer {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  bottom: 0;
+}

app/javascript/packs/stickySaveFooter.js

@@ -0,0 +1,6 @@
+const form = document.querySelector('.edit_user');
+
+form.addEventListener('change', () => {
+    const saveFooter = document.getElementsByClassName('save-footer');
+    saveFooter && saveFooter[0] && saveFooter[0].classList.add('sticky-save-footer');
+});

app/views/users/_profile.html.erb

@@ -1,4 +1,4 @@
-<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", defer: true %>
+<%= javascript_packs_with_chunks_tag "colorPreview", "validateFileInputs", "stickySaveFooter", defer: true %>
 
 <%= render "users/additional_authentication" %>
 
@@ -186,7 +186,7 @@
     </div>
   </div>
 
-  <div class="mb-6 grid gap-6 p-6">
+  <div class="save-footer crayons-card mb-6 grid gap-6 p-6">
     <%= f.hidden_field :tab, value: @tab %>
     <div>
       <button type="submit" class="crayons-btn">Save</button>

spec/system/user/user_edits_profile_spec.rb

@@ -5,16 +5,25 @@ RSpec.describe "User edits their profile", type: :system do
 
   before do
     sign_in user
+    visit "/settings/profile"
   end
 
   describe "visiting /settings/profile" do
     it "renders an error if the username contains spaces and thus is invalid" do
-      visit "/settings/profile"
-
       fill_in "user[username]", with: "a b c"
       click_button "Save"
 
       expect(page).to have_text("Username is invalid")
     end
+
+    it "makes the 'Save Button' footer sticky once a field is filled in", js: true do
+      expect(page).not_to have_css(".sticky-save-footer")
+
+      fill_in "user[website_url]", with: "example.com"
+
+      find("#user_website_url").native.send_keys :tab # this un-focuses the filled-in field
+
+      expect(page).to have_css(".sticky-save-footer")
+    end
   end
 end