Add stopPropagation and specs to report abuse link

app/assets/javascripts/issue.js

@@ -100,6 +100,13 @@ export default class Issue {
   initIssueBtnEventListeners() {
     const issueFailMessage = __('Unable to update this issue at this time.');
 
+    $('.report-abuse-link').on('click', e => {
+      // this is needed because of the implementation of
+      // the dropdown toggle and Report Abuse needing to be
+      // linked to another page.
+      e.stopPropagation();
+    });
+
     // NOTE: data attribute seems unnecessary but is actually necessary
     return $('.js-issuable-buttons[data-action="close-reopen"]').on(
       'click',

app/assets/javascripts/merge_request.js

@@ -66,6 +66,14 @@ MergeRequest.prototype.showAllCommits = function() {
 
 MergeRequest.prototype.initMRBtnListeners = function() {
   const _this = this;
+
+  $('.report-abuse-link').on('click', e => {
+    // this is needed because of the implementation of
+    // the dropdown toggle and Report Abuse needing to be
+    // linked to another page.
+    e.stopPropagation();
+  });
+
   return $('.btn-close, .btn-reopen').on('click', function(e) {
     const $this = $(this);
     const shouldSubmit = $this.hasClass('btn-comment');

app/views/shared/issuable/_close_reopen_report_toggle.html.haml

@@ -39,10 +39,8 @@
 
       %li.divider.droplab-item-ignore
 
-      %li.report-item{ data: { text: _('Report abuse'), url: new_abuse_report_path(user_id: issuable.author.id, ref_url: issuable_url(issuable)),
-                       button_class: "#{button_class} btn-close-color", toggle_class: "#{toggle_class} btn-close-color", method: '' } }
-        %button.btn.btn-transparent
-          = icon('check', class: 'icon')
+      %li.report-item{ data: { text: _('Report abuse'), button_class: "#{button_class} btn-close-color", toggle_class: "#{toggle_class} btn-close-color", method: '' } }
+        %a.report-abuse-link{ :href =>  new_abuse_report_path(user_id: issuable.author.id, ref_url: issuable_url(issuable)) }
           .description
             %strong.title= _('Report abuse')
             %p.text

changelogs/unreleased/ss-fix-report-abuse-button.yml

+---
+title: Fix report abuse button in issues and mrs
+merge_request: 40918
+author:
+type: fixed

spec/features/issuables/close_reopen_report_toggle_spec.rb

@@ -3,6 +3,8 @@
 require 'spec_helper'
 
 RSpec.describe 'Issuables Close/Reopen/Report toggle' do
+  include IssuablesHelper
+
   let(:user) { create(:user) }
 
   shared_examples 'an issuable close/reopen/report toggle' do
@@ -27,19 +29,11 @@ RSpec.describe 'Issuables Close/Reopen/Report toggle' do
       expect(container).not_to have_selector('.reopen-item')
     end
 
-    it 'changes the button when an item is selected' do
-      button = container.find('.issuable-close-button')
-
-      container.find('.dropdown-toggle').click
-      container.find('.report-item').click
-
-      expect(container).not_to have_selector('.dropdown-menu')
-      expect(button).to have_content('Report abuse')
-
+    it 'links to Report Abuse' do
       container.find('.dropdown-toggle').click
-      container.find('.close-item').click
+      container.find('.report-abuse-link').click
 
-      expect(button).to have_content("Close #{human_model_name}")
+      expect(page).to have_content('Report abuse to admin')
     end
   end