Chore: Migrate Tubolinks to Turbo

Gemfile

@@ -53,7 +53,7 @@ gem 'sprockets-rails'
 gem 'telegraf'
 gem 'terser', require: false
 gem 'tubesock', github: 'openhpi/tubesock'
-gem 'turbolinks'
+gem 'turbo-rails'
 gem 'webauthn'
 gem 'zxcvbn-ruby', require: 'zxcvbn'
 

Gemfile.lock

@@ -617,9 +617,6 @@ GEM
     turbo-rails (2.0.13)
       actionpack (>= 7.1.0)
       railties (>= 7.1.0)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (3.1.4)
@@ -749,7 +746,7 @@ DEPENDENCIES
   telegraf
   terser
   tubesock!
-  turbolinks
+  turbo-rails
   web-console
   webauthn
   webmock
@@ -992,8 +989,6 @@ CHECKSUMS
   tpm-key_attestation (0.14.0) sha256=d05cc52b397f89c36a7307407e0e84d3ea1c7afce50e0a70b146f8ab17d2bf4b
   tubesock (0.2.9)
   turbo-rails (2.0.13) sha256=c40ac0a3ccd57c129925c8ac524a5dfd1e17fad080906e2d32135721a8bba22f
-  turbolinks (5.2.1) sha256=5fea5889c4e2a78a5bd9abda3860c565342b50c6e2593697d5558a08e15cce9c
-  turbolinks-source (5.2.0) sha256=362a41fa851a22b0f15cf8f944b6c7c5788f645dc1f61ae25478bb25c3bc85d4
   tzinfo (2.0.6) sha256=8daf828cc77bcf7d63b0e3bdb6caa47e2272dcfaf4fbfe46f8c3a9df087a829b
   unicode-display_width (3.1.4) sha256=8caf2af1c0f2f07ec89ef9e18c7d88c2790e217c482bfc78aaa65eadd5415ac1
   unicode-emoji (4.0.4) sha256=2c2c4ef7f353e5809497126285a50b23056cc6e61b64433764a35eff6c36532a

app/assets/javascripts/application.js

@@ -10,7 +10,6 @@
 // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
 // about supported directives.
 //
-//= require turbolinks
 //= require rails-timeago
 //= require locales/jquery.timeago.de.js
 //

app/assets/javascripts/base.js

@@ -4,7 +4,7 @@ Array.prototype.includes = function(element) {
 
 window.CodeOcean = {
   refresh: function() {
-    Turbolinks.visit(window.location.pathname);
+    Turbo.visit(window.location.pathname);
   }
 };
 
@@ -24,7 +24,7 @@ $.fn.scrollTo = function(selector) {
   }, ANIMATION_DURATION);
 };
 
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     // Update all CSRF tokens on the page to reduce InvalidAuthenticityToken errors
     // See https://github.com/rails/jquery-ujs/issues/456 for details
     $.rails.refreshCSRFTokens();
@@ -66,9 +66,6 @@ $(document).on('turbolinks:load', function() {
         });
     }
 
-    // Enable all tooltips
-    $('[data-bs-toggle="tooltip"]').tooltip();
-
     // Enable sorttable again, as it is disabled otherwise by Turbolinks
     if (sorttable) {
         sorttable.init.done = false;

app/assets/javascripts/bootstrap-dropdown-submenu.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
 
   var subMenusSelector = 'ul.dropdown-menu [data-bs-toggle=dropdown]';
 

app/assets/javascripts/channels/la_exercises.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     if ($.isController('exercises') && $('.teacher_dashboard').isPresent()) {
 
         const exercise_id = $('.teacher_dashboard').data().exerciseId;

app/assets/javascripts/channels/pg_matching_channel.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
 
     if ($.isController('programming_groups') && window.location.pathname.includes('programming_groups/new')) {
         const matching_page = $('#matching');

app/assets/javascripts/channels/synchronized_editor_channel.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
 
   if (window.location.pathname.includes('/implement')) {
     var editor = $('#editor');

app/assets/javascripts/codeharbor_link.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     if($.isController('codeharbor_links')) {
         if ($('.edit_codeharbor_link, .new_codeharbor_link').isPresent()) {
 

app/assets/javascripts/community_solution.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
 
     if ($.isController('community_solutions') && $('#community-solution-editor').isPresent()) {
         CodeOceanEditor.sendEvents = false;

app/assets/javascripts/dashboard.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   var CHART_START = window.vis ? vis.moment().add(-1, 'minute') : undefined;
   var DEFAULT_REFRESH_INTERVAL = 5000;
 

app/assets/javascripts/editor.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function(event) {
+$(document).on('turbo:load', function(event) {
 
   //Merge all editor components.
   $.extend(
@@ -13,7 +13,7 @@ $(document).on('turbolinks:load', function(event) {
       CodeOceanEditorRequestForComments
   );
 
-  if ($('#editor').isPresent() && CodeOceanEditor && event.originalEvent.data.url.includes("/implement")) {
+  if ($('#editor').isPresent() && CodeOceanEditor && event.originalEvent.detail.url.includes("/implement")) {
     // This call will (amon other things) initializeEditors and load the content except for the last line
     // It must not be called during page navigation. Otherwise, content will be duplicated!
     // Search for insertFullLines and Turbolinks reload / cache control

app/assets/javascripts/editor/editor.js.erb

@@ -935,10 +935,6 @@ var CodeOceanEditor = {
         $('#output_sidebar').removeClass('output-col').addClass('output-col-collapsed');
     },
 
-    initializeSideBarTooltips: function () {
-        $('[data-bs-toggle="tooltip"]').tooltip()
-    },
-
     initializeDescriptionToggle: function () {
         $('#exercise-headline').on('click', this.toggleDescriptionCard.bind(this));
         $('a#toggle').on('click', this.toggleDescriptionCard.bind(this));
@@ -1095,7 +1091,6 @@ var CodeOceanEditor = {
         this.initializeSideBarCollapse();
         this.initializeOutputBarToggle();
         this.initializeDescriptionToggle();
-        this.initializeSideBarTooltips();
         this.initializeInterventionTimer();
         this.initPrompt();
         this.renderScore();
@@ -1105,10 +1100,10 @@ var CodeOceanEditor = {
         this.initializeDeadlines();
         CodeOceanEditorTips.initializeEventHandlers();
 
-        window.addEventListener("turbolinks:before-render", App.synchronized_editor?.disconnect.bind(App.synchronized_editor));
+        window.addEventListener("turbo:before-render", App.synchronized_editor?.disconnect.bind(App.synchronized_editor));
         window.addEventListener("beforeunload", App.synchronized_editor?.disconnect.bind(App.synchronized_editor));
 
-        window.addEventListener("turbolinks:before-render", this.autosaveIfChanged.bind(this));
+        window.addEventListener("turbo:before-render", this.autosaveIfChanged.bind(this));
         window.addEventListener("beforeunload", this.autosaveIfChanged.bind(this));
         // create autosave when the editor is opened the first time
         this.autosave();

app/assets/javascripts/error_templates.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     if ($.isController('error_templates')) {
         const button = $('#add-attribute').find('button')
         button.on('click', function () {

app/assets/javascripts/exercise_collections.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   if ($.isController('exercise_collections')) {
     var dataElement = $('#data');
     var exerciseList = $('#exercise-list');

app/assets/javascripts/exercise_graphs.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     // /exercises/38/statistics good for testing
 
     if ($.isController('exercises') && $('.graph-functions-2').isPresent()) {

app/assets/javascripts/exercises.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
     const TAB_KEY_CODE = 9;
 
     let execution_environments;
@@ -571,4 +571,4 @@ $(document).on('turbolinks:load', function () {
     }
 
 
-});
+});

app/assets/javascripts/external_users.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   const grid = $('#tag-grid');
 
   if ($.isController('external_users') && grid.isPresent()) {

app/assets/javascripts/file_types.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   if ($.isController('file_types')) {
     const select_tag = $('#file_type_editor_mode');
 

app/assets/javascripts/forms.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   var CHOSEN_OPTIONS = {
     allow_single_deselect: true,
     disable_search_threshold: 5,
@@ -50,6 +50,6 @@ $(document).on('turbolinks:load', function() {
 });
 
 // Remove some elements before going back to an older site. Otherwise, they might not work.
-$(document).on('turbolinks:before-cache', function() {
+$(document).on('turbo:before-cache', function() {
     $('.chosen-container').remove();
 });

app/assets/javascripts/markdown_editor.js

@@ -192,7 +192,7 @@ const setResizeBtn = (formInput, editor) => {
   });
 };
 
-$(document).on("turbolinks:load", function () {
+$(document).on("turbo:load", function () {
   initializeMarkdownEditors();
   disableImageUpload();
 });

app/assets/javascripts/programming_groups.js

@@ -26,7 +26,7 @@ var ProgrammingGroups = {
     }
 };
 
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
     const modal = $('#modal-info-pair-programming');
     if (modal.isPresent()) {
         ProgrammingGroups.initializeEventHandler();

app/assets/javascripts/request_for_comments.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
     const exerciseCaption = $('#exercise_caption');
 
     if (!$.isController('request_for_comments') || !exerciseCaption.isPresent()) {

app/assets/javascripts/shell.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function () {
+$(document).on('turbo:load', function () {
     const ENTER_KEY_CODE = 13;
 
     const clearOutput = function () {

app/assets/javascripts/statistics_activity_history.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
 
   function manageActivityHistory(prefix) {
     var containerId = prefix + '-activity-history';

app/assets/javascripts/statistics_graphs.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   if ($.isController('statistics') && $('.graph#user-activity').isPresent()) {
 
     function manageGraph(containerId, url, refreshAfter) {

app/assets/javascripts/submission_statistics.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function(event) {
+$(document).on('turbo:load', function(event) {
   var currentSubmission = 0;
   var active_file = undefined;
   var fileTrees = [];
@@ -60,7 +60,7 @@ $(document).on('turbolinks:load', function(event) {
     $(fileTrees[index]).show();
   };
 
-  if ($.isController('exercises') && $('#timeline').isPresent() && event.originalEvent.data.url.includes("/statistics")) {
+  if ($.isController('exercises') && $('#timeline').isPresent() && event.originalEvent.detail.url.includes("/statistics")) {
 
     var slider = $('#submissions-slider>input');
     var submissions = $('#data').data('submissions');

app/assets/javascripts/working_time_graphs.js

@@ -1,4 +1,4 @@
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
     // /38/statistics good for testing
 
   if ($.isController('exercises') && $('.working-time-graphs').isPresent()) {

app/javascript/application.js

@@ -8,6 +8,7 @@
 // layout file, like app/views/layouts/application.html.slim
 
 // JS
+import '@hotwired/turbo-rails'
 import 'jquery';
 import 'jquery-ujs'
 import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
@@ -17,6 +18,7 @@ import * as _ from 'underscore';
 import * as d3 from 'd3';
 import * as Sentry from '@sentry/browser';
 import 'sorttable';
+import 'tooltip';
 window.bootstrap = bootstrap; // Publish bootstrap in global namespace
 window._ = _; // Publish underscore's `_` in global namespace
 window.d3 = d3; // Publish d3 in global namespace

app/javascript/tooltip.js

@@ -0,0 +1,25 @@
+const tooltipMap = new Map();
+
+function manageTooltips() {
+  const selector = '[data-bs-toggle="tooltip"]';
+  const currentElements = new Set(document.querySelectorAll(selector));
+
+  // Dispose tooltips for elements no longer in the DOM
+  for (const [element, tooltipInstance] of tooltipMap.entries()) {
+    if (!currentElements.has(element)) {
+      tooltipInstance.dispose();
+      tooltipMap.delete(element);
+    }
+  }
+
+  // Initialize tooltips for new elements
+  currentElements.forEach((element) => {
+    if (!tooltipMap.has(element)) {
+      const instance = new bootstrap.Tooltip(element);
+      tooltipMap.set(element, instance);
+    }
+  });
+}
+
+window.addEventListener('turbo:load', manageTooltips);
+window.addEventListener('turbo:frame-load', manageTooltips);

app/javascript/webauthn.js

@@ -23,7 +23,7 @@ async function getCredential(publicKey) {
   return await get(options);
 }
 
-$(document).on('turbolinks:load', function() {
+$(document).on('turbo:load', function() {
   if ($.isController('webauthn_credentials')) {
     form = $('form#new_webauthn_credential');
     credentialMethod = createCredential;

app/views/admin/dashboard/show.html.slim

@@ -1,7 +1,7 @@
 - content_for :head do
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, the global variable `vis` might be uninitialized in the assets (race condition)
-  meta name='turbolinks-visit-control' content='reload'
+  meta name='turbo-visit-control' content='reload'
   - append_javascript_pack_tag('vis')
   - append_stylesheet_pack_tag('vis')
 

app/views/application/_locale_selector.html.slim

@@ -4,4 +4,4 @@ li.nav-item.dropdown
     span.caret
   ul.dropdown-menu.p-0.mt-1 role='menu'
     - I18n.available_locales.sort_by {|locale| t("locales.#{locale}") }.each do |locale|
-      li = link_to(t("locales.#{locale}"), AuthenticatedUrlHelper.add_query_parameters(request.url, locale:), 'data-turbolinks': 'false', class: 'dropdown-item')
+      li = link_to(t("locales.#{locale}"), AuthenticatedUrlHelper.add_query_parameters(request.url, locale:), 'data-turbo': 'false', class: 'dropdown-item')

app/views/application/_navigation.html.slim

@@ -6,8 +6,8 @@
         span.caret
       ul.dropdown-menu.p-0.mt-1 role='menu'
         - if current_user.admin?
-          li = link_to(t('breadcrumbs.dashboard.show'), admin_dashboard_path, class: 'dropdown-item', 'data-turbolinks': 'false') if policy(%i[admin dashboard]).show?
-          li = link_to(t('breadcrumbs.rails_admin.show'), rails_admin.dashboard_path, class: 'dropdown-item', 'data-turbolinks': 'false') if policy(%i[admin dashboard]).show?
+          li = link_to(t('breadcrumbs.dashboard.show'), admin_dashboard_path, class: 'dropdown-item', 'data-turbo': 'false') if policy(%i[admin dashboard]).show?
+          li = link_to(t('breadcrumbs.rails_admin.show'), rails_admin.dashboard_path, class: 'dropdown-item', 'data-turbo': 'false') if policy(%i[admin dashboard]).show?
           li = link_to(t('breadcrumbs.statistics.show'), statistics_path, class: 'dropdown-item') if policy(:statistics).show?
           li.dropdown-divider role='separator'
         = render('navigation_submenu', title: Exercise.model_name.human(count: :other),

app/views/community_solutions/edit.html.slim

@@ -1,6 +1,6 @@
 - content_for :head do
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
-  meta name='turbolinks-visit-control' content='reload'
+  meta name='turbo-visit-control' content='reload'
 
 == render 'form'

app/views/execution_environments/_form.html.slim

@@ -1,7 +1,7 @@
 - content_for :head do
   // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
      Otherwise, code might not be highlighted correctly (race condition)
-  meta name='turbolinks-visit-control' content='reload'
+  meta name='turbo-visit-control' content='reload'
   - append_javascript_pack_tag('toast-ui')
   - append_stylesheet_pack_tag('toast-ui')
 

app/views/execution_environments/show.html.slim

@@ -5,7 +5,7 @@ h1.d-inline-block = @execution_environment
   ul.dropdown-menu.dropdown-menu-end role='menu'
     li = link_to(t('execution_environments.index.synchronize.button'), sync_to_runner_management_execution_environment_path(@execution_environment), method: :post, class: 'dropdown-item') if policy(@execution_environment).sync_to_runner_management?
     li = link_to(t('execution_environments.index.shell'), shell_execution_environment_path(@execution_environment), class: 'dropdown-item') if policy(@execution_environment).shell?
-    li = link_to(t('shared.statistics'), statistics_execution_environment_path(@execution_environment), 'data-turbolinks': 'false', class: 'dropdown-item') if policy(@execution_environment).statistics?
+    li = link_to(t('shared.statistics'), statistics_execution_environment_path(@execution_environment), 'data-turbo': 'false', class: 'dropdown-item') if policy(@execution_environment).statistics?
     li = link_to(t('shared.destroy'), @execution_environment, data: {confirm: t('shared.confirm_destroy')}, method: :delete, class: 'dropdown-item') if policy(@execution_environment).destroy?
 
 = row(label: 'execution_environment.name', value: @execution_environment.name)

app/views/execution_environments/statistics.html.slim

@@ -21,7 +21,7 @@ h1 = @execution_environment
         - if wts then average_time = wts['average_time'] else 0 # rubocop:disable Lint/ElseLayout
         - if wts then stddev_time = wts['stddev_time'] else 0 # rubocop:disable Lint/ElseLayout
         tr
-          td = link_to_if policy(exercise).statistics?, exercise.title, controller: 'exercises', action: 'statistics', id: exercise.id, 'data-turbolinks': 'false'
+          td = link_to_if policy(exercise).statistics?, exercise.title, controller: 'exercises', action: 'statistics', id: exercise.id, 'data-turbo': 'false'
           td = us['contributors']
           td = us['average_score'].to_f.round(4)
           td = us['maximum_score'].to_f.round(2)