[#65618] Remove jQuery from core

app/helpers/removed_js_helpers_helper.rb

@@ -45,7 +45,11 @@ def link_to_function(content, function, html_options = {})
   # Execute the callback on click
   def csp_onclick(callback_str, selector, prevent_default: true)
     content_for(:additional_js_dom_ready) do
-      "jQuery('#{selector}').click(function() { #{callback_str}; #{prevent_default ? 'return false;' : ''} });\n".html_safe
+      raw <<~JS # rubocop:disable Rails/OutputSafety
+        document.querySelector('#{selector}')?.addEventListener('click', function(event) {
+          #{callback_str&.delete_suffix(';')};#{"\n  event.preventDefault();" if prevent_default}
+        });
+      JS
     end
   end
 end

app/views/forums/show.html.erb

@@ -27,28 +27,6 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++#%>
 
-<div id="add-message" style="display:none;">
-  <% if authorize_for('messages', 'new') %>
-    <h2><%= link_to h(@forum.name), project_forum_path(@project, @forum) %> &#187; <%= t(:label_message_new) %></h2>
-    <%= labelled_tabular_form_for Message.new(project: @project),
-                                  url: forum_topics_path(@forum),
-                                  html: {
-                                    multipart: true,
-                                    id: "message-form",
-                                    class: "form",
-                                    data: { turbo: false }
-                                  } do |f| %>
-      <%= render partial: "messages/form", locals: { f: f } %>
-
-      <hr class="form--separator">
-      <%= styled_button_tag t(:button_create), class: "-primary -with-icon icon-checkmark" %>
-      <%= link_to t(:button_cancel), "", class: "cancel-add-message-button button -with-icon icon-cancel" %>
-      <% csp_onclick('jQuery("#add-message").hide();', ".cancel-add-message-button") %>
-    <% end %>
-    <div id="preview"></div>
-  <% end %>
-</div>
-
 <%=
   render(Primer::OpenProject::PageHeader.new) do |header|
     header.with_title { @forum.name }
@@ -70,7 +48,6 @@ See COPYRIGHT and LICENSE files for more details.
                                      leading_icon: :plus,
                                      label: t(:label_message_new),
                                      tag: :a,
-                                     class: "add-message-button",
                                      href: url_for({ controller: "/messages", action: "new", forum_id: @forum })) do
           t(:label_message)
         end

app/views/layouts/base.html.erb

@@ -200,14 +200,10 @@ See COPYRIGHT and LICENSE files for more details.
   }
 
   wrapper.style.display = '';
-<% end %>
 
-<%= nonced_javascript_tag do %>
-  (function($) {
-    // Wrapper for page-specific JS from deprecated inline functions
-    // no longer available with CSP.
-    <%= content_for :additional_js_dom_ready %>
-  }(jQuery));
+  // Wrapper for page-specific JS from deprecated inline functions
+  // no longer available with CSP.
+  <%= content_for :additional_js_dom_ready %>
 <% end %>
 <div class="op-wide-autocomplete-wrapper"></div>
 <%= call_hook :view_layouts_base_body_bottom %>

app/views/news/show.html.erb

@@ -47,7 +47,6 @@ See COPYRIGHT and LICENSE files for more details.
         aria: { label: I18n.t(:button_edit) },
         title: I18n.t(:button_edit)
       ) do |button|
-        csp_onclick('jQuery("#edit-news").show()', ".edit-news-button")
         button.with_leading_visual_icon(icon: :pencil)
         t(:button_edit)
       end
@@ -72,16 +71,6 @@ See COPYRIGHT and LICENSE files for more details.
   end
 %>
 
-<% if authorize_for('news', 'edit') %>
-  <div id="edit-news" style="display:none;">
-    <%= labelled_tabular_form_for @news, html: { id: "news-form" } do |f| %>
-      <%= render partial: "form", locals: { f: f } %>
-      <%= styled_button_tag t(:button_save), class: "-primary -with-icon icon-checkmark" %>
-      <%= link_to_function t(:button_cancel), 'jQuery("#edit-news").hide()',
-            class: "button -with-icon icon-cancel" %>
-    <% end %>
-  </div>
-<% end %>
 <% if @news.summary.present? %>
   <div class="summary">
     <%= format_text(@news, :summary) %>

app/views/projects/settings/repository/subversion/_existing.html.erb

@@ -67,10 +67,16 @@ See COPYRIGHT and LICENSE files for more details.
       ) %>
   <%=
     content_for(:additional_js_dom_ready) do
-      "jQuery('#repository-password-placeholder')
-        .change(function() { this.name = 'repository[password]'; })
-        .focus(function() { this.value = ''; this.name = 'repository[password]'; });
-        ".html_safe
+      raw <<~JS
+        const placeholder = document.getElementById('repository-password-placeholder');
+        placeholder?.addEventListener('input', function(event) {
+          placeholder.name = 'repository[password]';
+        });
+        placeholder?.addEventListener('focus', function(event) {
+          placeholder.value = '';
+          placeholder.name = 'repository[password]';
+        });
+      JS
     end
   %>
 </div>

app/views/repositories/_revisions.html.erb

@@ -121,8 +121,9 @@ See COPYRIGHT and LICENSE files for more details.
                                      (line_num == 1),
                                      id: "cb-#{line_num}" %>
                 <% csp_onclick(
-                     "jQuery('#cbto-#{line_num + 1}').attr('checked', true);",
-                     "cb-#{line_num}"
+                     "document.getElementById('cbto-#{line_num + 1}').checked = true;",
+                     "#cb-#{line_num}",
+                     prevent_default: false
                    ) %>
                 <% end %>
               </td>
@@ -134,8 +135,9 @@ See COPYRIGHT and LICENSE files for more details.
                                      (line_num == 2),
                                      id: "cbto-#{line_num}" %>
                   <% csp_onclick(
-                       "if (jQuery('#cb-#{line_num}').attr('checked')) {jQuery('#cb-#{line_num - 1}').attr('checked', true)}",
-                       "cbto-#{line_num}"
+                       "if (document.getElementById('cb-#{line_num}')?.checked) {document.getElementById('cb-#{line_num - 1}').checked = true;}",
+                       "#cbto-#{line_num}",
+                       prevent_default: false
                      ) %>
                 <% end %>
               </td>

app/views/repositories/diff.html.erb

@@ -50,18 +50,16 @@ See COPYRIGHT and LICENSE files for more details.
   end
 %>
 <div class="repository-input-group">
-  <%= form_tag({repo_path: to_path_param(@path)}, method: :get) do %>
-    <%= hidden_field_tag('rev', params[:rev]) if params[:rev] %>
-    <%= hidden_field_tag('rev_to', params[:rev_to]) if params[:rev_to] %>
-    <%= styled_select_tag 'type', options_for_select([[t(:label_diff_inline), "inline"], [t(:label_diff_side_by_side), "sbs"]], @diff_type), id: "repository-diff-type-select" %>
+  <%= form_tag({ repo_path: to_path_param(@path) }, method: :get, data: { controller: "auto-submit" }) do %>
+    <%= hidden_field_tag("rev", params[:rev]) if params[:rev] %>
+    <%= hidden_field_tag("rev_to", params[:rev_to]) if params[:rev_to] %>
+    <%= styled_select_tag "type",
+                          options_for_select(
+                            [[t(:label_diff_inline), "inline"],
+                             [t(:label_diff_side_by_side), "sbs"]], @diff_type
+                          ),
+                          data: { action: "auto-submit#submit" } %>
   <% end %>
-  <%=
-    content_for(:additional_js_dom_ready) do
-      "jQuery('#repository-diff-type-select').change(function() {
-             if (this.value != '') { this.form.submit() }
-          });".html_safe
-    end
-  %>
 </div>
 <% cache(@cache_key) do -%>
   <%= render partial: 'common/diff', locals: { diff: @diff, diff_type: @diff_type } %>

app/views/wiki/destroy.html.erb

@@ -62,7 +62,7 @@ See COPYRIGHT and LICENSE files for more details.
       <%= styled_select_tag "reassign_to_id",
                             options_for_select(wiki_page_options_for_select(@reassignable_to)),
                             { container_class: "-wide" } %>
-      <% csp_onclick("jQuery('#todo_reassign').attr('checked', true)", "#reassign_to_id") %>
+      <% csp_onclick("document.getElementById('todo_reassign').checked = true", "#reassign_to_id") %>
     </div>
   <% end %>
 

app/views/work_packages/bulk/destroy.html.erb

@@ -28,7 +28,16 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 <%= error_messages_for work_packages.first %>
 
-<%= styled_form_tag work_packages_bulk_path, method: :delete, class: "form danger-zone" do %>
+<%=
+  styled_form_tag(
+    work_packages_bulk_path,
+    method: :delete,
+    class: "form danger-zone",
+    data: {
+      controller: "show-when-value-selected"
+    }
+  ) do
+%>
   <%= back_url_hidden_field_tag unless back_url_is_wp_show? %>
   <% work_packages.each do |work_package| %>
     <%= hidden_field_tag "ids[]", work_package.id %>
@@ -49,33 +58,49 @@ See COPYRIGHT and LICENSE files for more details.
       <div class="form--field -trailing-label">
         <%= styled_label_tag :to_do_action_destroy, t(:text_destroy) %>
         <div class="form--field-container">
-          <%= styled_radio_button_tag "to_do[action]", "destroy" %>
+          <%= styled_radio_button_tag "to_do[action]", "destroy", nil,
+                                      data: {
+                                        show_when_value_selected_target: "cause",
+                                        target_name: "action"
+                                      } %>
         </div>
       </div>
       <div class="form--field -trailing-label">
         <%= styled_label_tag "to_do_action_nullify", t(:text_assign_to_project) %>
         <div class="form--field-container">
-          <%= styled_radio_button_tag "to_do[action]", "nullify" %>
+          <%= styled_radio_button_tag "to_do[action]", "nullify", nil,
+                                      data: {
+                                        show_when_value_selected_target: "cause",
+                                        target_name: "action"
+                                      } %>
         </div>
       </div>
       <div class="grid-block">
         <div class="grid-block small-3">
           <div class="form--field -trailing-label">
             <%= styled_label_tag "to_do_action_reassign", t(:text_reassign) %>
             <div class="form--field-container">
-              <%= styled_radio_button_tag "to_do[action]", "reassign" %>
-              <% csp_onclick(
-                   'if(jQuery("#to_do_action_reassign").prop("checked")) { jQuery("#to_do_reassign_to_id").focus(); }',
-                   "#reassign"
-                 ) %>
+              <%= styled_radio_button_tag "to_do[action]", "reassign", nil,
+                                          data: {
+                                            show_when_value_selected_target: "cause",
+                                            target_name: "action"
+                                          } %>
             </div>
           </div>
         </div>
         <div class="grid-block">
           <div class="form--field">
             <div class="form--text-field-container -xslim">
               <%= styled_label_tag "to_do_reassign_to_id", t(:text_reassign), class: "form--label sr-only" %>
-              <%= f.text_field "reassign_to_id", placeholder: WorkPackage.human_attribute_name(:id), value: params[:reassign_to_id], size: 6, onfocus: 'jQuery("#to_do_action_reassign").prop("checked", true);' %>
+              <%= f.text_field "reassign_to_id",
+                               placeholder: WorkPackage.human_attribute_name(:id), value: params[:reassign_to_id],
+                               size: 6,
+                               hidden: true,
+                               data: {
+                                 show_when_value_selected_target: "effect",
+                                 target_name: "action",
+                                 value: "reassign"
+                               } %>
             </div>
           </div>
         </div>

frontend/eslint.config.mjs

@@ -58,8 +58,7 @@ export default defineConfig([
         },
       ],
 
-      // Sometimes we need to shush the TypeScript compiler
-      'no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
+      'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^_', argsIgnorePattern: '^_' }],
 
       // Allow short circuit evaluations
@@ -154,13 +153,6 @@ export default defineConfig([
       '@angular-eslint/template/prefer-control-flow': 'error'
     }
   },
-  {
-    files: ['**/*.d.ts'],
-    rules: {
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': 'off',
-    },
-  },
   {
     files: ['**/*.spec.ts'],
     plugins: { jasmine },

frontend/package.json

@@ -102,6 +102,7 @@
     "@hotwired/stimulus": "^3.2.2",
     "@hotwired/turbo": "^8.0.20",
     "@hotwired/turbo-rails": "^8.0.20",
+    "@knowledgecode/delegate": "^0.8.5",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@mantine/core": "^8.3.6",
     "@mantine/hooks": "^8.3.5",
@@ -137,6 +138,7 @@
     "dom-autoscroller": "^2.2.8",
     "dom-plane": "^1.0.2",
     "dragula": "^3.7.3",
+    "es6-slide-up-down": "^1.0.0",
     "flatpickr": "^4.6.13",
     "glob": "^11.0.3",
     "hammerjs": "^2.0.8",

frontend/src/app/core/current-project/current-project.service.spec.ts

@@ -30,7 +30,7 @@ import { PathHelperService } from 'core-app/core/path-helper/path-helper.service
 import { CurrentProjectService } from './current-project.service';
 
 describe('currentProject service', () => {
-  let element:JQuery;
+  let element:HTMLMetaElement;
   let currentProject:CurrentProjectService;
 
   const apiV3Stub:any = {
@@ -55,12 +55,12 @@ describe('currentProject service', () => {
 
   describe('with a meta value present', () => {
     beforeEach(() => {
-      const html = `
-          <meta name="current_project" data-project-name="Foo 1234" data-project-id="1" data-project-identifier="foobar"/>
-        `;
-
-      element = jQuery(html);
-      jQuery(document.body).append(element);
+      element = document.createElement('meta');
+      element.setAttribute('name', 'current_project');
+      element.dataset.projectName = 'Foo 1234';
+      element.dataset.projectId = '1';
+      element.dataset.projectIdentifier = 'foobar';
+      document.head.appendChild(element);
       currentProject.detect();
     });