Merge branch 'mg-remove-remove-row' into 'master'

Remove legacy main.js behaviors

See merge request gitlab-org/gitlab!58784

app/assets/javascripts/behaviors/deprecated_remove_row_behavior.js

+import $ from 'jquery';
+
+export default function initDeprecatedRemoveRowBehavior() {
+  $('.js-remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
+    $(this).closest('li').addClass('gl-display-none!');
+  });
+
+  $('.js-remove-tr').on('ajax:before', function removeTRAjaxBeforeCallback() {
+    $(this).parent().find('.btn').addClass('disabled');
+  });
+
+  $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
+    $(this).closest('tr').addClass('gl-display-none!');
+  });
+}

app/assets/javascripts/main.js

@@ -109,20 +109,6 @@ function deferredInitialisation() {
 
   addSelectOnFocusBehaviour('.js-select-on-focus');
 
-  $('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
-    tooltips.dispose(this);
-
-    $(this).closest('li').addClass('gl-display-none!');
-  });
-
-  $('.js-remove-tr').on('ajax:before', function removeTRAjaxBeforeCallback() {
-    $(this).hide();
-  });
-
-  $('.js-remove-tr').on('ajax:success', function removeTRAjaxSuccessCallback() {
-    $(this).closest('tr').addClass('gl-display-none!');
-  });
-
   const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
   const delay = glTooltipDelay ? JSON.parse(glTooltipDelay) : 0;
 

app/assets/javascripts/pages/admin/abuse_reports/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 import UsersSelect from '~/users_select';
 import AbuseReports from './abuse_reports';
 
 new AbuseReports(); /* eslint-disable-line no-new */
 new UsersSelect(); /* eslint-disable-line no-new */
+
+document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);

app/assets/javascripts/pages/admin/broadcast_messages/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 import initBroadcastMessagesForm from './broadcast_message';
 
-document.addEventListener('DOMContentLoaded', initBroadcastMessagesForm);
+document.addEventListener('DOMContentLoaded', () => {
+  initBroadcastMessagesForm();
+  initDeprecatedRemoveRowBehavior();
+});

app/assets/javascripts/pages/admin/labels/index/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
+
+document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);

app/assets/javascripts/pages/admin/spam_logs/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
+
+document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);

app/assets/javascripts/pages/projects/branches/index/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
 import AjaxLoadingSpinner from '~/branches/ajax_loading_spinner';
 import BranchSortDropdown from '~/branches/branch_sort_dropdown';
 import DeleteModal from '~/branches/branches_delete_modal';
@@ -12,3 +13,4 @@ const { divergingCountsEndpoint, defaultBranch } = document.querySelector(
 
 initDiverganceGraph(divergingCountsEndpoint, defaultBranch);
 BranchSortDropdown();
+initDeprecatedRemoveRowBehavior();

app/assets/javascripts/pages/projects/path_locks/index.js

+import initDeprecatedRemoveRowBehavior from '~/behaviors/deprecated_remove_row_behavior';
+
+document.addEventListener('DOMContentLoaded', initDeprecatedRemoveRowBehavior);

app/assets/stylesheets/pages/labels.scss

@@ -159,7 +159,7 @@
       color: $blue-600;
     }
 
-    &.remove-row:hover {
+    &.hover-red:hover {
       color: $red-500;
     }
   }

app/views/admin/labels/_label.html.haml

 %li.label-list-item{ id: dom_id(label) }
   = render "shared/label_row", label: label.present(issuable_subject: nil)
   .label-actions-list
-    = link_to edit_admin_label_path(label), class: 'btn gl-button btn-transparent label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
+    = link_to edit_admin_label_path(label), class: 'btn btn-default gl-button btn-default-tertiary label-action has-tooltip', title: _('Edit'), data: { placement: 'bottom' }, aria_label: _('Edit') do
       = sprite_icon('pencil')
-    = link_to admin_label_path(label), class: 'btn gl-button btn-transparent remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
+    = link_to admin_label_path(label), class: 'btn btn-default gl-button btn-default-tertiary hover-red js-remove-row label-action has-tooltip', title: _('Delete'), data: { placement: 'bottom', confirm: "Delete this label? Are you sure?" }, aria_label: _('Delete'), method: :delete, remote: true do
       = sprite_icon('remove')

app/views/projects/branches/_branch.html.haml

@@ -52,11 +52,11 @@
       - if branch.name == @project.repository.root_ref
         - delete_default_branch_tooltip = s_('Branches|The default branch cannot be deleted')
         %span.has-tooltip{ title: delete_default_branch_tooltip }
-          %button{ class: "gl-button btn btn-danger remove-row disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
+          %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_default_branch_tooltip }
             = sprite_icon("remove")
       - elsif protected_branch?(@project, branch)
         - if can?(current_user, :push_to_delete_protected_branch, @project)
-          %button{ class: "gl-button btn btn-danger remove-row has-tooltip",
+          %button{ class: "gl-button btn btn-danger has-tooltip",
             title: s_('Branches|Delete protected branch'),
             data: { toggle: "modal",
               target: "#modal-delete-branch",
@@ -67,11 +67,11 @@
         - else
           - delete_protected_branch_tooltip = s_('Branches|Only a project maintainer or owner can delete a protected branch')
           %span.has-tooltip{ title: delete_protected_branch_tooltip }
-            %button{ class: "gl-button btn btn-danger remove-row  disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
+            %button{ class: "gl-button btn btn-danger disabled", disabled: true, 'aria-label' => delete_protected_branch_tooltip }
               = sprite_icon("remove")
       - else
         = link_to project_branch_path(@project, branch.name),
-          class: "gl-button btn btn-danger remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
+          class: "gl-button btn btn-danger js-remove-row qa-remove-btn js-ajax-loading-spinner has-tooltip",
           title: s_('Branches|Delete branch'),
           method: :delete,
           data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },

app/views/projects/buttons/_remove_tag.html.haml

@@ -2,5 +2,5 @@
 - tag = local_assigns.fetch(:tag, nil)
 - return unless project && tag
 
-%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon remove-row has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
+%button{ type: "button", class: "js-remove-tag js-confirm-modal-button gl-button btn btn-danger btn-icon has-tooltip gl-ml-3 #{protected_tag?(project, tag) ? 'disabled' : ''}", title: s_('TagsPage|Delete tag'), data: { container: 'body', path: project_tag_path(@project, tag.name), modal_attributes: delete_tag_modal_attributes(tag.name) } }
   = sprite_icon("remove")

app/views/shared/_label.html.haml

@@ -38,7 +38,7 @@
                     = _('Promote to group label')
               %li
                 %span
-                  %button.text-danger.remove-row.js-delete-label-modal-button{ type: 'button', data: { label_name: label.name, subject_name: label.subject_name, destroy_path: label.destroy_path } }
+                  %button.text-danger.js-delete-label-modal-button{ type: 'button', data: { label_name: label.name, subject_name: label.subject_name, destroy_path: label.destroy_path } }
                     = _('Delete')
     - if current_user
       %li.inline.label-subscription

ee/app/views/projects/path_locks/_path_lock.html.haml

@@ -6,7 +6,7 @@
 
     .controls
       - if can_unlock?(path_lock)
-        = link_to project_path_lock_path(@project, path_lock), class: 'btn gl-button btn-default remove-row', title: _("Unlock"), method: :delete, data: { confirm: _("Are you sure you want to unlock %{path_lock_path}?") % { path_lock_path: path_lock.path }, container: 'body', qa_selector: 'unlock_button' }, remote: true do
+        = link_to project_path_lock_path(@project, path_lock), class: 'btn gl-button btn-default js-remove-row', title: _("Unlock"), method: :delete, data: { confirm: _("Are you sure you want to unlock %{path_lock_path}?") % { path_lock_path: path_lock.path }, container: 'body', qa_selector: 'unlock_button' }, remote: true do
           = _('Unlock')
 
   = _("locked by %{path_lock_user_name} %{created_at}").html_safe % { path_lock_user_name: path_lock.user.name, created_at: time_ago_with_tooltip(path_lock.created_at) }

spec/features/admin/admin_labels_spec.rb

@@ -36,7 +36,7 @@ RSpec.describe 'admin issues labels' do
 
     it 'deletes all labels', :js do
       page.within '.labels' do
-        page.all('.remove-row').each do |remove|
+        page.all('.js-remove-row').each do |remove|
           accept_confirm { remove.click }
           wait_for_requests
         end

spec/features/projects/labels/user_removes_labels_spec.rb

@@ -22,7 +22,7 @@ RSpec.describe "User removes labels" do
       page.within(".other-labels") do
         page.first(".label-list-item") do
           first('.js-label-options-dropdown').click
-          first(".remove-row").click
+          first('.js-delete-label-modal-button').click
         end
       end