[#65618] Remove jQuery from core

app/controllers/categories_controller.rb

@@ -40,29 +40,15 @@ def new
     @category = @project.categories.build
   end
 
-  def create # rubocop:disable Metrics/AbcSize
+  def create
     @category = @project.categories.build
     @category.attributes = permitted_params.category
 
     if @category.save
-      respond_to do |format|
-        format.html do
-          flash[:notice] = I18n.t(:notice_successful_create)
-          redirect_to project_settings_categories_path(@project)
-        end
-        format.js do
-          render locals: { project: @project, category: @category }
-        end
-      end
+      flash[:notice] = I18n.t(:notice_successful_create)
+      redirect_to project_settings_categories_path(@project)
     else
-      respond_to do |format|
-        format.html do
-          render action: :new, status: :unprocessable_entity
-        end
-        format.js do
-          render(:update) { |page| page.alert(@category.errors.full_messages.join('\n')) }
-        end
-      end
+      render action: :new, status: :unprocessable_entity
     end
   end
 

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('#{j(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/wiki/edit_parent_page.html.erb

@@ -39,18 +39,19 @@ See COPYRIGHT and LICENSE files for more details.
 <%= error_messages_for "page" %>
 
 <%= labelled_tabular_form_for @page, url: { id: @page, action: "update_parent_page" } do |f| %>
+  <% options_for_select = wiki_page_options_for_select(@parent_pages) %>
   <div class='form--field'>
     <%= f.select :parent_id,
-                 wiki_page_options_for_select(@parent_pages),
-                 { label: WikiPage.human_attribute_name(:parent_title), include_blank: false, container_class: "-wide" } %>
+                 options_for_select,
+                 { label: WikiPage.human_attribute_name(:parent_title), include_blank: false, container_class: "-wide" },
+                 {
+                   size: options_for_select.size + 1,
+                   style: "height:unset",
+                   data: {
+                     controller: "select-autosize",
+                     select_autosize_size_limit_value: 8
+                   }
+                 } %>
   </div>
-
-  <%= nonced_javascript_tag  do -%>
-    jQuery(function() {
-        var parent_select = jQuery('#wiki_page_parent_id');
-        parent_select.attr('size', parent_select.children().length);
-      }
-    ));
-  <% end -%>
   <%= submit_tag t(:button_save), class: "button -primary" %>
 <% 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>