Feature/755 make links and dropdowns turbo 8 friendly (#809)

* Use links in people dropdown and make them work with prefetch

* Make language selection dropdown work again

* Increase version number

* Change minor instead of patch version in new version number

* Make links in people search dropdown take in full height and width

* Make slim select only follow link if value is link

* Manually call before change event callback in slim select testhelpers

* Make language dropdown a slim select dropdown to be able to prefetch locales

* Make rubocop happy

* Bring back old language selection

* Make link prefetching work in cv search

* Refactor cv_search_spec

* Fix flaky cv search specs

* Use document.location.href instead of turbo.visit for language dropdown

* Remove obsolete data-html attribute from i18n dropdown data

* Make prefetching of people in skill search results work

* Disable link of selected element in slim select dropdown to allow opening of dropdown

* Disable link prefetching on skills csv export link

* Redisable link prefetching in dev

* Remove unnecessary check in dropdown controller and rename handleChange to navigateOnChange

* Use windows.location instead of document.location

* Remove duplicate logic

Author: RandomTannenbaum

app/assets/stylesheets/styles.scss

@@ -310,6 +310,18 @@ pzsh-topbar {
   opacity: 1;
 }
 
+.dropdown-option-link {
+  width: 100%;
+  display: block;
+  text-decoration: none;
+  color: black;
+  padding: 5px 7px;
+}
+
+.ss-main .dropdown-option-link {
+  padding: 0;
+}
+
 .dropdown-option-highlighted {
   background-color: #2c97a6;
 }

app/helpers/person_helper.rb

@@ -82,6 +82,14 @@ def sorted_people
   end
 
   def people_for_select
-    Person.all.map { |p| [p.name, person_path(p)] }
+    Person.all.map do |p|
+      [
+        p.name, person_path(p),
+        {
+          'data-html': "<a href='#{person_path(p)}' class='dropdown-option-link'>#{p.name}</a>",
+          class: 'p-0'
+        }
+      ]
+    end
   end
 end

app/javascript/controllers/dropdown_controller.js

@@ -8,12 +8,29 @@ export default class extends Controller {
     if (!this.hasDropdownTarget)
       return;
 
-    new SlimSelect({
-          select: this.dropdownTarget
+    const slimSelectDropdown = new SlimSelect({
+      select: this.dropdownTarget,
+      events: {
+        beforeChange: (newVal) => {
+          newVal = newVal[0];
+
+          // Check if dropdown element is a link
+          if(newVal.html.startsWith("<a")) {
+            Turbo.visit(newVal.value);
+
+            return false;
+          }
+        }
+      },
     });
+
+    // Make currently selected element not follow link when clicked on, so opening the dropdown is possible
+    if(slimSelectDropdown.getSelected()[0]?.startsWith("/")) {
+      document.querySelector('.ss-main .dropdown-option-link').href = "javascript:void(0)";
+    }
   }
 
-  handleChange(event) {
+  navigateOnChange(event) {
     window.location.href = event.target.value;
   }
 }

app/javascript/controllers/highlight_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
     connect() {
-        const params = new URLSearchParams(window.location.search);
+        const params = new URL(window.location.href).searchParams;
         if(params.has("q")) {
             window.find(params.get("q"))
         }

app/views/cv_search/index.html.haml

@@ -12,13 +12,13 @@
     - else
       - @cv_search_results.each do |result|
         %div.w-50.d-flex
-          = link_to result[:person][:name], person_path(result[:person][:id]), {class: "bg-skills-green w-50 text-decoration-none text-white ps-1 p-2 rounded-1", "data-turbo": "false"}
+          = link_to result[:person][:name], person_path(result[:person][:id]), {class: "bg-skills-green w-50 text-decoration-none text-white ps-1 p-2 rounded-1", "data-turbo-frame": "_top" }
           %div.w-50.d-flex.justify-content-end.align-items-center
             %div.me-1 
               = ti("search.found_in")
             - url_params = {q: params[:q], rating: found_in_skills?(result)? 1: nil}
             - person_id = result[:person][:id]
             - path = person_path(person_id, url_params)
             - path = person_people_skills_path(person_id, url_params) if found_in_skills?(result)
-            = link_to result[:found_in], path, {class: "bg-skills-search-result-blue w-50 text-decoration-none text-white ps-1 p-2 rounded-1 text-center", "data-turbo": "false"}
+            = link_to result[:found_in], path, {class: "bg-skills-search-result-blue w-50 text-decoration-none text-white ps-1 p-2 rounded-1 text-center", "data-turbo-frame": "_top" }
         %br

app/views/layouts/application.html.haml

@@ -21,11 +21,11 @@
             %div.d-flex
               %div.mb-1.mt-1
                 %img{:src=> "/assets/logo.svg",:height=>"32"}
-              %text.d-flex.align-items-end.ms-2.small= "5.0.0"
+              %text.d-flex.align-items-end.ms-2.small= "5.1.0"
           %ul.navbar.text-gray
             -# Language selector
             %li.d-flex.align-items-center.cursor-pointer.border-start.border-end.h-100.ps-2.pe-2{"data-controller": "dropdown"}
-              = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#handleChange"}
+              = select :i18n, :language, language_selector, {}, class: "form-control", data:{action: "change->dropdown#navigateOnChange"}
             -# Devise/Mockdata
             - if Rails.env.development?
               %li.d-flex.align-items-center.cursor-pointer.ps-2.pe-2.border-start.border-end.h-100

app/views/people/_search.html.haml

@@ -2,7 +2,7 @@
   %div.d-flex.col-9.gap-3
     %span.col-6{"data-controller": "dropdown"}
       - selected_path = model_path_or_nil(person)
-      = select :person_id, :person, options_for_select(sorted_people, select_when_available(selected_path)), {prompt: person.nil?}, {data:{"dropdown-target": "dropdown" , action: "change->dropdown#handleChange"}}
+      = select :person_id, :person, options_for_select(sorted_people, select_when_available(selected_path)), {prompt: person.nil?}, {data:{"dropdown-target": "dropdown"}}
     %div.d-flex.align-items-center.text-gray
       = "#{t '.updated_at'}: #{@person&.last_updated_at.strftime("%d.%m.%Y")}" if @person&.last_updated_at
   %a.d-flex.justify-content-between#new-person-button

app/views/people_skills/index.html.haml

@@ -21,7 +21,7 @@
         - entries.each do | filtered_entry |
           %div.d-flex.flex-row.w-100.border-bottom
             %div.d-flex.flex-column.mt-2.mb-2.person-filter-container.justify-content-start
-              = link_to filtered_entry[:person].name, person_path(filtered_entry[:person]), {"data-turbo"=>false}
+              = link_to filtered_entry[:person].name, person_path(filtered_entry[:person]), {"data-turbo-frame": "_top"}
             %div.d-flex.flex-column.mt-2.mb-2.skills-filter-container
               - filtered_entry[:skills].each do |person_skill|
                 %div.d-flex.flex-row.mb-5

app/views/skills/_header.html.haml

@@ -22,5 +22,5 @@
         %span.text-gray.me-1
           = "#{Category.model_name.human}:"
         = form.collection_select :category, Category.all_parents.order(:title), :id, :title, {prompt: true}, class: "form-select fit-content", onchange: 'this.form.requestSubmit();'
-      = export_action_link  export_skills_path
+      = export_action_link  export_skills_path, "data-turbo-prefetch": false
       = add_action_link_modal

spec/features/cv_search_spec.rb

@@ -35,15 +35,19 @@
     it 'should open person when clicking result' do
       fill_in 'cv_search_field', with: person.projects.first.technology
       check_search_results(Person.human_attribute_name(:projects))
-      first("a", text: person.name).click();
+      # Tests are flaky in firefox
+      sleep 0.3
+      click_link person.name
       expect(page).to have_current_path(person_path(person))
 
       visit(cv_search_index_path)
       education_location = person.educations.first.location
       fill_in 'cv_search_field', with: education_location
       check_search_results(Person.human_attribute_name(:educations))
+      # Tests are flaky in firefox
+      sleep 0.3
       click_link(Person.human_attribute_name(:educations))
-      expect(current_url).to end_with(person_path(person, q: education_location))
+      expect(page).to have_current_path(person_path(person, q: education_location))
     end
 
     it 'should only display results when length of search-text is > 3' do
@@ -68,7 +72,7 @@
 
 def check_search_results(field_name)
   within('turbo-frame#search-results') {
-    expect(page).to have_content(person.name)
-    expect(page).to have_content(field_name)
+    expect(page).to have_link(person.name)
+    expect(page).to have_link(field_name)
   }
 end

spec/support/slimselect_helpers.rb

@@ -1,7 +1,7 @@
 module SlimselectHelpers
   def select_from_slim_select(selector, option_text, create_if_missing=false)
     ss_open(selector)
-    if(create_if_missing)
+    if create_if_missing
       ss_create(selector, option_text)
     else
       ss_select_text(selector, option_text)
@@ -51,6 +51,13 @@ def ss_select_text(selector, option_text)
 
   def ss_select(selector, option_value)
     call(selector, "setSelected", option_value)
+
+    # Manually call the beforeChange event because we manually update the slim select object, which doesn't trigger the event callback
+
+    # Check if option_value is a path
+    if option_value.starts_with? '/'
+      evaluate_script("document.querySelector('#person_id_person').slim.events.beforeChange([{value: '#{option_value}', html: '<a></a>'}])")
+    end
   end
 
   def ss_search(selector, text)