From 3a91454fc7f34da9700732382c8b1feb7733f559 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Tue, 27 Jul 2021 11:53:10 +0100
Subject: [PATCH 01/13] Feat: enable report abuse button for snippets

Enable report abuse button for snippets

Changelog: added
---
 .../javascripts/snippets/components/show.vue  |  2 +-
 .../snippets/components/snippet_header.vue    | 11 ++++++++++
 .../javascripts/snippets/mixins/snippets.js   |  4 ++++
 app/helpers/snippets_helper.rb                |  4 ++++
 app/views/projects/snippets/show.html.haml    |  2 +-
 app/views/snippets/show.html.haml             |  2 +-
 doc/user/report_abuse.md                      | 12 ++++++++++
 locale/gitlab.pot                             |  3 +++
 .../frontend/snippets/components/edit_spec.js |  3 +++
 .../frontend/snippets/components/show_spec.js |  1 +
 .../components/snippet_header_spec.js         | 22 ++++++++++++++-----
 spec/helpers/snippets_helper_spec.rb          | 12 ++++++++++
 12 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index 46629a569ec373..d0f6cd34b8bc2a 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -50,7 +50,7 @@ export default {
       class="loading-animation prepend-top-20 gl-mb-6"
     />
     <template v-else>
-      <snippet-header :snippet="snippet" />
+      <snippet-header :snippet="snippet" :report-abuse-path="reportAbusePath" />
       <snippet-title :snippet="snippet" />
       <div class="gl-display-flex gl-justify-content-end gl-mb-5">
         <embed-dropdown
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index a8f95748e7ed6e..112d53c6ba0416 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -59,6 +59,10 @@ export default {
       type: Object,
       required: true,
     },
+    reportAbusePath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -105,6 +109,13 @@ export default {
           category: 'secondary',
           cssClass: 'ml-2',
         },
+        {
+          condition: this.reportAbusePath,
+          text: __('Report abuse'),
+          href: this.reportAbusePath,
+          title: __('Report abuse to administrator.'),
+          cssClass: 'ml-2',
+        },
       ];
     },
     editLink() {
diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js
index b72befef56b652..00ac74055cde4a 100644
--- a/app/assets/javascripts/snippets/mixins/snippets.js
+++ b/app/assets/javascripts/snippets/mixins/snippets.js
@@ -35,6 +35,10 @@ export const getSnippetMixin = {
       type: String,
       required: true,
     },
+    reportAbusePath: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 84eb0405c01556..feaa6ec509cd17 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -39,6 +39,10 @@ def snippet_badge_attributes(snippet)
     end
   end
 
+  def snippet_report_abuse_path(snippet)
+    new_abuse_report_path(user_id: snippet.author_id, ref_url: Gitlab::UrlBuilder.build(snippet))
+  end
+
   def embedded_raw_snippet_button(snippet, blob)
     return if blob.empty? || blob.binary? || blob.stored_externally?
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index a296394a2e00ab..8ef53c40b11529 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -3,7 +3,7 @@
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet) } }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 4fdb9e70742dfc..b78208d65fbe34 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -12,7 +12,7 @@
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id} }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet)} }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/doc/user/report_abuse.md b/doc/user/report_abuse.md
index 2b585315326426..7550a6bbc75957 100644
--- a/doc/user/report_abuse.md
+++ b/doc/user/report_abuse.md
@@ -19,6 +19,7 @@ You can report a user through their:
 - [Profile](#reporting-abuse-through-a-users-profile)
 - [Comments](#reporting-abuse-through-a-users-comment)
 - [Issues and Merge requests](#reporting-abuse-through-a-users-issue-or-merge-request)
+- [Snippets](#report-abuse-through-a-snippet)
 
 ## Reporting abuse through a user's profile
 
@@ -62,6 +63,17 @@ NOTE:
 A URL to the reported user's issue or merge request is pre-filled
 in the abuse report's **Message** field.
 
+## Report abuse through a snippet
+
+If a snippet is malicious, or violates the
+[GitLab Code of Conduct](https://about.gitlab.com/community/contribute/code-of-conduct/),
+you can report it as abuse:
+The **Report abuse** button is displayed at the top right of the snippet. With the **Report abuse** button displayed, to submit an abuse report:
+
+1. In the top right corner of the snippet's page, select **Report abuse**.
+1. Submit an abuse report.
+1. Select **Send report**.
+
 ## Managing abuse reports
 
 Admins are able to view and resolve abuse reports.
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 17fe81abd71586..34d967fa82e64b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27814,6 +27814,9 @@ msgstr ""
 msgid "Report abuse to admin"
 msgstr ""
 
+msgid "Report abuse to administrator."
+msgstr ""
+
 msgid "Reported %{timeAgo} by %{reportedBy}"
 msgstr ""
 
diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 4e88ab9504edfa..9751b6b3e85620 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -36,6 +36,8 @@ const TEST_ACTIONS = {
 };
 const TEST_WEB_URL = '/snippets/7';
 const TEST_SNIPPET_GID = 'gid://gitlab/PersonalSnippet/42';
+const TEST_REPORT_ABUSE_PATH =
+  '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1';
 
 const createSnippet = () =>
   merge(createGQLSnippet(), {
@@ -150,6 +152,7 @@ describe('Snippet Edit app', () => {
       },
       propsData: {
         snippetGid: TEST_SNIPPET_GID,
+        reportAbusePath: TEST_REPORT_ABUSE_PATH,
         markdownPreviewPath: 'http://preview.foo.bar',
         markdownDocsPath: 'http://docs.foo.bar',
         ...props,
diff --git a/spec/frontend/snippets/components/show_spec.js b/spec/frontend/snippets/components/show_spec.js
index b7b638b5137f62..a181b1753386d5 100644
--- a/spec/frontend/snippets/components/show_spec.js
+++ b/spec/frontend/snippets/components/show_spec.js
@@ -17,6 +17,7 @@ describe('Snippet view app', () => {
   let wrapper;
   const defaultProps = {
     snippetGid: 'gid://gitlab/PersonalSnippet/42',
+    reportAbusePath: '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1',
   };
   const webUrl = 'http://foo.bar';
   const dummyHTTPUrl = webUrl;
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index e77bae79f68306..a763a5d0fec9bb 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -19,6 +19,8 @@ describe('Snippet header component', () => {
   let errorMsg;
   let err;
   const originalRelativeUrlRoot = gon.relative_url_root;
+  const reportAbusePath =
+    '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1';
 
   const GlEmoji = { template: '<img/>' };
 
@@ -46,6 +48,7 @@ describe('Snippet header component', () => {
     wrapper = mount(SnippetHeader, {
       mocks: { $apollo },
       propsData: {
+        reportAbusePath,
         snippet: {
           ...defaultProps,
         },
@@ -57,9 +60,10 @@ describe('Snippet header component', () => {
     });
   }
 
-  const findAuthorEmoji = () => wrapper.find(GlEmoji);
+  const findAuthorEmoji = () => wrapper.findComponent(GlEmoji);
   const findAuthoredMessage = () => wrapper.find('[data-testid="authored-message"]').text();
-  const buttonCount = () => wrapper.findAll(GlButton).length;
+  const findButtons = () => wrapper.findAllComponents(GlButton);
+  const buttonCount = () => wrapper.findAllComponents(GlButton).length;
 
   beforeEach(() => {
     gon.relative_url_root = '/foo/';
@@ -144,6 +148,11 @@ describe('Snippet header component', () => {
     expect(text).toBe('Authored 1 month ago');
   });
 
+  it('renders a report abuse button for each snippet', () => {
+    createComponent();
+    expect(findButtons().at(2).attributes('href')).toBe(reportAbusePath);
+  });
+
   it('renders action buttons based on permissions', () => {
     createComponent({
       permissions: {
@@ -151,7 +160,8 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(buttonCount()).toEqual(0);
+
+    expect(buttonCount()).toBe(1);
 
     createComponent({
       permissions: {
@@ -159,7 +169,7 @@ describe('Snippet header component', () => {
         updateSnippet: false,
       },
     });
-    expect(buttonCount()).toEqual(1);
+    expect(buttonCount()).toBe(2);
 
     createComponent({
       permissions: {
@@ -167,7 +177,7 @@ describe('Snippet header component', () => {
         updateSnippet: true,
       },
     });
-    expect(buttonCount()).toEqual(2);
+    expect(buttonCount()).toBe(3);
 
     createComponent({
       permissions: {
@@ -179,7 +189,7 @@ describe('Snippet header component', () => {
       canCreateSnippet: true,
     });
     return wrapper.vm.$nextTick().then(() => {
-      expect(buttonCount()).toEqual(3);
+      expect(buttonCount()).toBe(4);
     });
   });
 
diff --git a/spec/helpers/snippets_helper_spec.rb b/spec/helpers/snippets_helper_spec.rb
index 35882c9337b326..d529c0d648b162 100644
--- a/spec/helpers/snippets_helper_spec.rb
+++ b/spec/helpers/snippets_helper_spec.rb
@@ -92,4 +92,16 @@ def download_link(url)
       end
     end
   end
+
+  describe '#snippet_report_abuse_path' do
+    let(:snippet) { public_personal_snippet }
+
+    subject { snippet_report_abuse_path(snippet) }
+
+    context 'when a snippet has a valid web url and user' do
+      it 'returns a report abuse button with a valid URL' do
+        expect(subject).to eq(new_abuse_report_path(user_id: snippet.author.id, ref_url: snippet.web_url))
+      end
+    end
+  end
 end
-- 
GitLab


From 4431c97ca5e6ba8f833d66e1acca91e1eaf75ed1 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 12:04:32 +0100
Subject: [PATCH 02/13] chore: add spam permissions check

---
 app/helpers/snippets_helper.rb                       |  4 ----
 app/views/projects/snippets/show.html.haml           |  3 ++-
 app/views/snippets/show.html.haml                    |  3 ++-
 .../snippets/components/snippet_header_spec.js       |  2 +-
 spec/helpers/snippets_helper_spec.rb                 | 12 ------------
 5 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index feaa6ec509cd17..84eb0405c01556 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -39,10 +39,6 @@ def snippet_badge_attributes(snippet)
     end
   end
 
-  def snippet_report_abuse_path(snippet)
-    new_abuse_report_path(user_id: snippet.author_id, ref_url: Gitlab::UrlBuilder.build(snippet))
-  end
-
   def embedded_raw_snippet_button(snippet, blob)
     return if blob.empty? || blob.binary? || blob.stored_externally?
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 8ef53c40b11529..e0cc163b5d5a1b 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -2,8 +2,9 @@
 - add_to_breadcrumbs _("Snippets"), project_snippets_path(@project)
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
+- abuse_path = @snippet.submittable_as_spam_by?(current_user) && mark_as_spam_snippet_path(@snippet)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet) } }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': abuse_path } }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index b78208d65fbe34..7d2dcce75c6518 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -9,10 +9,11 @@
 - add_to_breadcrumbs _("Snippets"), dashboard_snippets_path
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
+- abuse_path = @snippet.submittable_as_spam_by?(current_user) && mark_as_spam_snippet_path(@snippet)
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet)} }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': abuse_path } }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index a763a5d0fec9bb..be231bf5181fd0 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -20,7 +20,7 @@ describe('Snippet header component', () => {
   let err;
   const originalRelativeUrlRoot = gon.relative_url_root;
   const reportAbusePath =
-    '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1';
+    '/-/snippets/21/mark_as_spam';
 
   const GlEmoji = { template: '<img/>' };
 
diff --git a/spec/helpers/snippets_helper_spec.rb b/spec/helpers/snippets_helper_spec.rb
index d529c0d648b162..35882c9337b326 100644
--- a/spec/helpers/snippets_helper_spec.rb
+++ b/spec/helpers/snippets_helper_spec.rb
@@ -92,16 +92,4 @@ def download_link(url)
       end
     end
   end
-
-  describe '#snippet_report_abuse_path' do
-    let(:snippet) { public_personal_snippet }
-
-    subject { snippet_report_abuse_path(snippet) }
-
-    context 'when a snippet has a valid web url and user' do
-      it 'returns a report abuse button with a valid URL' do
-        expect(subject).to eq(new_abuse_report_path(user_id: snippet.author.id, ref_url: snippet.web_url))
-      end
-    end
-  end
 end
-- 
GitLab


From 3c529d05c39fce195cabecf928960641fa256629 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 12:05:29 +0100
Subject: [PATCH 03/13] chore: apply mixin related patch

---
 app/assets/javascripts/snippets/components/show.vue          | 2 +-
 .../javascripts/snippets/components/snippet_header.vue       | 5 +----
 app/assets/javascripts/snippets/index.js                     | 2 ++
 app/assets/javascripts/snippets/mixins/snippets.js           | 4 ----
 4 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index d0f6cd34b8bc2a..46629a569ec373 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -50,7 +50,7 @@ export default {
       class="loading-animation prepend-top-20 gl-mb-6"
     />
     <template v-else>
-      <snippet-header :snippet="snippet" :report-abuse-path="reportAbusePath" />
+      <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
       <div class="gl-display-flex gl-justify-content-end gl-mb-5">
         <embed-dropdown
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 112d53c6ba0416..abcd8e7dd332f6 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -54,15 +54,12 @@ export default {
       },
     },
   },
+  inject: ['reportAbusePath'],
   props: {
     snippet: {
       type: Object,
       required: true,
     },
-    reportAbusePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
diff --git a/app/assets/javascripts/snippets/index.js b/app/assets/javascripts/snippets/index.js
index 576bfe8756112f..dec8dcec1797f2 100644
--- a/app/assets/javascripts/snippets/index.js
+++ b/app/assets/javascripts/snippets/index.js
@@ -27,6 +27,7 @@ export default function appFactory(el, Component) {
     visibilityLevels = '[]',
     selectedLevel,
     multipleLevelsRestricted,
+    reportAbusePath,
     ...restDataset
   } = el.dataset;
 
@@ -37,6 +38,7 @@ export default function appFactory(el, Component) {
       visibilityLevels: JSON.parse(visibilityLevels),
       selectedLevel: SNIPPET_LEVELS_MAP[selectedLevel] ?? SNIPPET_VISIBILITY_PRIVATE,
       multipleLevelsRestricted: 'multipleLevelsRestricted' in el.dataset,
+      reportAbusePath,
     },
     render(createElement) {
       return createElement(Component, {
diff --git a/app/assets/javascripts/snippets/mixins/snippets.js b/app/assets/javascripts/snippets/mixins/snippets.js
index 00ac74055cde4a..b72befef56b652 100644
--- a/app/assets/javascripts/snippets/mixins/snippets.js
+++ b/app/assets/javascripts/snippets/mixins/snippets.js
@@ -35,10 +35,6 @@ export const getSnippetMixin = {
       type: String,
       required: true,
     },
-    reportAbusePath: {
-      type: String,
-      required: true,
-    },
   },
   data() {
     return {
-- 
GitLab


From 5446883c3ca7aa4886c75c99b88ae19fed10b291 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 12:16:48 +0100
Subject: [PATCH 04/13] chore: apply spec related patch

---
 .../frontend/snippets/components/edit_spec.js |   3 -
 .../frontend/snippets/components/show_spec.js |   1 -
 .../components/snippet_header_spec.js         | 101 +++++++++++-------
 3 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/spec/frontend/snippets/components/edit_spec.js b/spec/frontend/snippets/components/edit_spec.js
index 9751b6b3e85620..4e88ab9504edfa 100644
--- a/spec/frontend/snippets/components/edit_spec.js
+++ b/spec/frontend/snippets/components/edit_spec.js
@@ -36,8 +36,6 @@ const TEST_ACTIONS = {
 };
 const TEST_WEB_URL = '/snippets/7';
 const TEST_SNIPPET_GID = 'gid://gitlab/PersonalSnippet/42';
-const TEST_REPORT_ABUSE_PATH =
-  '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1';
 
 const createSnippet = () =>
   merge(createGQLSnippet(), {
@@ -152,7 +150,6 @@ describe('Snippet Edit app', () => {
       },
       propsData: {
         snippetGid: TEST_SNIPPET_GID,
-        reportAbusePath: TEST_REPORT_ABUSE_PATH,
         markdownPreviewPath: 'http://preview.foo.bar',
         markdownDocsPath: 'http://docs.foo.bar',
         ...props,
diff --git a/spec/frontend/snippets/components/show_spec.js b/spec/frontend/snippets/components/show_spec.js
index a181b1753386d5..b7b638b5137f62 100644
--- a/spec/frontend/snippets/components/show_spec.js
+++ b/spec/frontend/snippets/components/show_spec.js
@@ -17,7 +17,6 @@ describe('Snippet view app', () => {
   let wrapper;
   const defaultProps = {
     snippetGid: 'gid://gitlab/PersonalSnippet/42',
-    reportAbusePath: '/-/abuse_reports/new?ref_url=https://gitlab/PersonalSnippet/42&user_id=1',
   };
   const webUrl = 'http://foo.bar';
   const dummyHTTPUrl = webUrl;
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index be231bf5181fd0..882147d4b4ed07 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -19,8 +19,7 @@ describe('Snippet header component', () => {
   let errorMsg;
   let err;
   const originalRelativeUrlRoot = gon.relative_url_root;
-  const reportAbusePath =
-    '/-/snippets/21/mark_as_spam';
+  const reportAbusePath = '/-/snippets/42/mark_as_spam';
 
   const GlEmoji = { template: '<img/>' };
 
@@ -47,8 +46,10 @@ describe('Snippet header component', () => {
 
     wrapper = mount(SnippetHeader, {
       mocks: { $apollo },
-      propsData: {
+      provide: {
         reportAbusePath,
+      },
+      propsData: {
         snippet: {
           ...defaultProps,
         },
@@ -63,7 +64,14 @@ describe('Snippet header component', () => {
   const findAuthorEmoji = () => wrapper.findComponent(GlEmoji);
   const findAuthoredMessage = () => wrapper.find('[data-testid="authored-message"]').text();
   const findButtons = () => wrapper.findAllComponents(GlButton);
-  const buttonCount = () => wrapper.findAllComponents(GlButton).length;
+  const findButtonsAsModel = () =>
+    findButtons().wrappers.map((x) => ({
+      text: x.text(),
+      href: x.attributes('href'),
+      category: x.props('category'),
+      variant: x.props('variant'),
+      disabled: x.props('disabled'),
+    }));
 
   beforeEach(() => {
     gon.relative_url_root = '/foo/';
@@ -148,49 +156,68 @@ describe('Snippet header component', () => {
     expect(text).toBe('Authored 1 month ago');
   });
 
-  it('renders a report abuse button for each snippet', () => {
+  it('renders a action buttons', () => {
     createComponent();
-    expect(findButtons().at(2).attributes('href')).toBe(reportAbusePath);
-  });
 
-  it('renders action buttons based on permissions', () => {
-    createComponent({
-      permissions: {
-        adminSnippet: false,
-        updateSnippet: false,
+    expect(findButtonsAsModel()).toEqual([
+      {
+        category: 'primary',
+        disabled: false,
+        href: `${snippet.webUrl}/edit`,
+        text: 'Edit',
+        variant: 'default',
       },
-    });
-
-    expect(buttonCount()).toBe(1);
-
-    createComponent({
-      permissions: {
-        adminSnippet: true,
-        updateSnippet: false,
+      {
+        category: 'secondary',
+        disabled: false,
+        text: 'Delete',
+        variant: 'danger',
       },
-    });
-    expect(buttonCount()).toBe(2);
-
-    createComponent({
-      permissions: {
-        adminSnippet: true,
-        updateSnippet: true,
+      {
+        category: 'primary',
+        disabled: false,
+        href: reportAbusePath,
+        text: 'Report abuse',
+        variant: 'default',
       },
-    });
-    expect(buttonCount()).toBe(3);
+    ]);
+  });
 
+  it.each`
+    permissions                                      | buttons
+    ${{ adminSnippet: false, updateSnippet: false }} | ${['Report abuse']}
+    ${{ adminSnippet: true, updateSnippet: false }}  | ${['Delete', 'Report abuse']}
+    ${{ adminSnippet: false, updateSnippet: true }}  | ${['Edit', 'Report abuse']}
+  `('with permissions ($permissions), renders buttons ($buttons)', ({ permissions, buttons }) => {
     createComponent({
       permissions: {
-        adminSnippet: true,
-        updateSnippet: true,
+        ...permissions,
       },
     });
-    wrapper.setData({
-      canCreateSnippet: true,
-    });
-    return wrapper.vm.$nextTick().then(() => {
-      expect(buttonCount()).toBe(4);
-    });
+
+    expect(findButtonsAsModel().map((x) => x.text)).toEqual(buttons);
+  });
+
+  it('with canCreateSnippet permission, renders create button', async () => {
+    createComponent();
+
+    // TODO: we should avoid `wrapper.setData` since they
+    // are component internals. Let's use the apollo mock helpers
+    // in a follow-up.
+    wrapper.setData({ canCreateSnippet: true });
+    await wrapper.vm.$nextTick();
+
+    expect(findButtonsAsModel()).toEqual(
+      expect.arrayContaining([
+        {
+          category: 'secondary',
+          disabled: false,
+          href: `/foo/-/snippets/new`,
+          text: 'New snippet',
+          variant: 'success',
+        },
+      ]),
+    );
   });
 
   it('renders modal for deletion of a snippet', () => {
-- 
GitLab


From 8a245f2299284901e296fce9ff5f1e12dec8c351 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 12:17:59 +0100
Subject: [PATCH 05/13] chore: apply spec related patch

---
 doc/user/report_abuse.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/user/report_abuse.md b/doc/user/report_abuse.md
index 7550a6bbc75957..cf41336df2a97a 100644
--- a/doc/user/report_abuse.md
+++ b/doc/user/report_abuse.md
@@ -71,7 +71,7 @@ you can report it as abuse:
 The **Report abuse** button is displayed at the top right of the snippet. With the **Report abuse** button displayed, to submit an abuse report:
 
 1. In the top right corner of the snippet's page, select **Report abuse**.
-1. Submit an abuse report.
+1. Add a message explaining why the snippet is abusive.
 1. Select **Send report**.
 
 ## Managing abuse reports
-- 
GitLab


From 365091857c81ddcea5e1797783e4eebf8ca1cf45 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 12:21:19 +0100
Subject: [PATCH 06/13] chore: apply class related feedback

---
 .../javascripts/snippets/components/snippet_header.vue      | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index abcd8e7dd332f6..afcbf40ca9faa9 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -94,7 +94,6 @@ export default {
           click: this.showDeleteModal,
           variant: 'danger',
           category: 'secondary',
-          cssClass: 'ml-2',
         },
         {
           condition: this.canCreateSnippet,
@@ -104,14 +103,12 @@ export default {
             : joinPaths('/', gon.relative_url_root, '/-/snippets/new'),
           variant: 'success',
           category: 'secondary',
-          cssClass: 'ml-2',
         },
         {
           condition: this.reportAbusePath,
           text: __('Report abuse'),
           href: this.reportAbusePath,
           title: __('Report abuse to administrator.'),
-          cssClass: 'ml-2',
         },
       ];
     },
@@ -222,7 +219,7 @@ export default {
 
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
-        <template v-for="(action, index) in personalSnippetActions">
+        <template v-for="(action, index) in personalSnippetActions" :class="{ 'gl-ml-3': index > 0 }">
           <div
             v-if="action.condition"
             :key="index"
@@ -250,6 +247,7 @@ export default {
           <gl-dropdown-item
             v-for="(action, index) in personalSnippetActions"
             :key="index"
+            :class="{ 'gl-ml-3': index > 0 }"
             :disabled="action.disabled"
             :title="action.title"
             :href="action.href"
-- 
GitLab


From 4bef0a422cedde8ef5149030d1707be4b92830a3 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 29 Jul 2021 13:27:20 +0100
Subject: [PATCH 07/13] chore: apply class related feedback

---
 .../javascripts/snippets/components/snippet_header.vue       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index afcbf40ca9faa9..c383576cd855fd 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -219,7 +219,10 @@ export default {
 
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
-        <template v-for="(action, index) in personalSnippetActions" :class="{ 'gl-ml-3': index > 0 }">
+        <template
+          v-for="(action, index) in personalSnippetActions"
+          :class="{ 'gl-ml-3': index > 0 }"
+        >
           <div
             v-if="action.condition"
             :key="index"
-- 
GitLab


From 50e1ba2e9511265d6965437ba9d5eff282abbb00 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Tue, 3 Aug 2021 20:10:11 +0100
Subject: [PATCH 08/13] chore: apply class related feedback

---
 .../snippets/components/snippet_header.vue    | 31 +++++++++----------
 app/helpers/snippets_helper.rb                |  6 ++++
 app/views/projects/snippets/show.html.haml    |  3 +-
 app/views/snippets/show.html.haml             |  3 +-
 locale/gitlab.pot                             |  3 --
 spec/helpers/snippets_helper_spec.rb          | 18 +++++++++++
 6 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index c383576cd855fd..c0a29462b2db8b 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -106,9 +106,9 @@ export default {
         },
         {
           condition: this.reportAbusePath,
-          text: __('Report abuse'),
+          text: __('Submit as spam'),
           href: this.reportAbusePath,
-          title: __('Report abuse to administrator.'),
+          title: __('Submit as spam'),
         },
       ];
     },
@@ -219,16 +219,14 @@ export default {
 
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
-        <template
-          v-for="(action, index) in personalSnippetActions"
-          :class="{ 'gl-ml-3': index > 0 }"
-        >
+        <template v-for="(action, index) in personalSnippetActions">
           <div
             v-if="action.condition"
             :key="index"
             v-gl-tooltip
             :title="action.title"
             class="d-inline-block"
+            :class="{ 'gl-ml-3': index > 0 }"
           >
             <gl-button
               :disabled="action.disabled"
@@ -247,16 +245,17 @@ export default {
       </div>
       <div class="d-block d-sm-none dropdown">
         <gl-dropdown :text="__('Options')" block>
-          <gl-dropdown-item
-            v-for="(action, index) in personalSnippetActions"
-            :key="index"
-            :class="{ 'gl-ml-3': index > 0 }"
-            :disabled="action.disabled"
-            :title="action.title"
-            :href="action.href"
-            @click="action.click ? action.click() : undefined"
-            >{{ action.text }}</gl-dropdown-item
-          >
+          <template v-for="(action, index) in personalSnippetActions">
+            <gl-dropdown-item
+              v-if="action.condition"
+              :key="index"
+              :disabled="action.disabled"
+              :title="action.title"
+              :href="action.href"
+              @click="action.click ? action.click() : undefined"
+              >{{ action.text }}</gl-dropdown-item
+            >
+          </template>
         </gl-dropdown>
       </div>
     </div>
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 84eb0405c01556..bfd7d6a008bc80 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -39,6 +39,12 @@ def snippet_badge_attributes(snippet)
     end
   end
 
+  def snippet_report_abuse_path(snippet)
+    return unless snippet.submittable_as_spam_by?
+
+    mark_as_spam_snippet_path(snippet)
+  end
+
   def embedded_raw_snippet_button(snippet, blob)
     return if blob.empty? || blob.binary? || blob.stored_externally?
 
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index e0cc163b5d5a1b..8ef53c40b11529 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -2,9 +2,8 @@
 - add_to_breadcrumbs _("Snippets"), project_snippets_path(@project)
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
-- abuse_path = @snippet.submittable_as_spam_by?(current_user) && mark_as_spam_snippet_path(@snippet)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': abuse_path } }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet) } }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true, api_awards_path: project_snippets_award_api_path(@snippet)
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 7d2dcce75c6518..ca52a1f8f46a13 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -9,11 +9,10 @@
 - add_to_breadcrumbs _("Snippets"), dashboard_snippets_path
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
-- abuse_path = @snippet.submittable_as_spam_by?(current_user) && mark_as_spam_snippet_path(@snippet)
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco', prefetch: true)
 
-#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': abuse_path } }
+#js-snippet-view{ data: {'qa-selector': 'snippet_view', 'snippet-gid': @snippet.to_global_id, 'report-abuse-path': snippet_report_abuse_path(@snippet) } }
 
 .row-content-block.top-block.content-component-block
   = render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 34d967fa82e64b..17fe81abd71586 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -27814,9 +27814,6 @@ msgstr ""
 msgid "Report abuse to admin"
 msgstr ""
 
-msgid "Report abuse to administrator."
-msgstr ""
-
 msgid "Reported %{timeAgo} by %{reportedBy}"
 msgstr ""
 
diff --git a/spec/helpers/snippets_helper_spec.rb b/spec/helpers/snippets_helper_spec.rb
index 35882c9337b326..7f281b788a3921 100644
--- a/spec/helpers/snippets_helper_spec.rb
+++ b/spec/helpers/snippets_helper_spec.rb
@@ -92,4 +92,22 @@ def download_link(url)
       end
     end
   end
+
+  describe '#snippet_report_abuse_path' do
+    let(:snippet) { public_personal_snippet }
+
+    subject { snippet_report_abuse_path(snippet) }
+
+    it 'returns false if the user cannot submit the snippet as spam' do
+      allow(snippet).to receive(:submittable_as_spam_by?).and_return(false)
+
+      expect(subject).to be_falsey
+    end
+
+    it 'returns true if the user can submit the snippet as spam' do
+      allow(snippet).to receive(:submittable_as_spam_by?).and_return(true)
+
+      expect(subject).to be_truthy
+    end
+  end
 end
-- 
GitLab


From b8d19e97b2cc8997a19fe572f6124a49c02e0902 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Wed, 4 Aug 2021 08:11:12 +0100
Subject: [PATCH 09/13] chore: apply helper related feedback

---
 app/helpers/snippets_helper.rb       | 2 +-
 spec/helpers/snippets_helper_spec.rb | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index bfd7d6a008bc80..e9ef9146529328 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -40,7 +40,7 @@ def snippet_badge_attributes(snippet)
   end
 
   def snippet_report_abuse_path(snippet)
-    return unless snippet.submittable_as_spam_by?
+    return unless snippet.submittable_as_spam_by?(current_user)
 
     mark_as_spam_snippet_path(snippet)
   end
diff --git a/spec/helpers/snippets_helper_spec.rb b/spec/helpers/snippets_helper_spec.rb
index 7f281b788a3921..12d791d8710c13 100644
--- a/spec/helpers/snippets_helper_spec.rb
+++ b/spec/helpers/snippets_helper_spec.rb
@@ -95,6 +95,7 @@ def download_link(url)
 
   describe '#snippet_report_abuse_path' do
     let(:snippet) { public_personal_snippet }
+    let(:current_user) { create(:user) }
 
     subject { snippet_report_abuse_path(snippet) }
 
-- 
GitLab


From e050db6e2417d66feab13ca8c37ab497240dd1b4 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Wed, 4 Aug 2021 09:09:16 +0100
Subject: [PATCH 10/13] chore: apply class related feedback

---
 spec/frontend/snippets/components/snippet_header_spec.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 882147d4b4ed07..44c732f419a258 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -177,7 +177,7 @@ describe('Snippet header component', () => {
         category: 'primary',
         disabled: false,
         href: reportAbusePath,
-        text: 'Report abuse',
+        text: 'Submit as spam',
         variant: 'default',
       },
     ]);
@@ -185,9 +185,9 @@ describe('Snippet header component', () => {
 
   it.each`
     permissions                                      | buttons
-    ${{ adminSnippet: false, updateSnippet: false }} | ${['Report abuse']}
-    ${{ adminSnippet: true, updateSnippet: false }}  | ${['Delete', 'Report abuse']}
-    ${{ adminSnippet: false, updateSnippet: true }}  | ${['Edit', 'Report abuse']}
+    ${{ adminSnippet: false, updateSnippet: false }} | ${['Submit as spam']}
+    ${{ adminSnippet: true, updateSnippet: false }}  | ${['Delete', 'Submit as spam']}
+    ${{ adminSnippet: false, updateSnippet: true }}  | ${['Edit', 'Submit as spam']}
   `('with permissions ($permissions), renders buttons ($buttons)', ({ permissions, buttons }) => {
     createComponent({
       permissions: {
-- 
GitLab


From bdb5fba37af33bba251934f1c1f04f7a1a3e2d9a Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 5 Aug 2021 10:59:20 +0100
Subject: [PATCH 11/13] chore: apply window location related feedback

---
 .../javascripts/snippets/components/snippet_header.vue       | 5 ++++-
 spec/frontend/snippets/components/snippet_header_spec.js     | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index c0a29462b2db8b..466b273cae4771 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -112,6 +112,9 @@ export default {
         },
       ];
     },
+    hasPersonalSnippetActions() {
+      return Boolean(this.personalSnippetActions.filter(({ condition }) => condition).length);
+    },
     editLink() {
       return `${this.snippet.webUrl}/edit`;
     },
@@ -217,7 +220,7 @@ export default {
       </div>
     </div>
 
-    <div class="detail-page-header-actions">
+    <div v-if="hasPersonalSnippetActions" class="detail-page-header-actions">
       <div class="d-none d-sm-flex">
         <template v-for="(action, index) in personalSnippetActions">
           <div
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 44c732f419a258..34d4dbd63e6421 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -8,8 +8,6 @@ import { differenceInMilliseconds } from '~/lib/utils/datetime_utility';
 import SnippetHeader from '~/snippets/components/snippet_header.vue';
 import DeleteSnippetMutation from '~/snippets/mutations/deleteSnippet.mutation.graphql';
 
-useMockLocationHelper();
-
 describe('Snippet header component', () => {
   let wrapper;
   let snippet;
@@ -258,6 +256,8 @@ describe('Snippet header component', () => {
     });
 
     describe('in case of successful mutation, closes modal and redirects to correct listing', () => {
+      useMockLocationHelper();
+
       const createDeleteSnippet = (snippetProps = {}) => {
         createComponent({
           snippetProps,
-- 
GitLab


From cb54df22cdc135b287fa5ddf87dc1ac27c9273d6 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Thu, 5 Aug 2021 11:07:57 +0100
Subject: [PATCH 12/13] chore: update documentation

---
 doc/user/report_abuse.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/doc/user/report_abuse.md b/doc/user/report_abuse.md
index cf41336df2a97a..4777401d43b0a8 100644
--- a/doc/user/report_abuse.md
+++ b/doc/user/report_abuse.md
@@ -68,11 +68,9 @@ in the abuse report's **Message** field.
 If a snippet is malicious, or violates the
 [GitLab Code of Conduct](https://about.gitlab.com/community/contribute/code-of-conduct/),
 you can report it as abuse:
-The **Report abuse** button is displayed at the top right of the snippet. With the **Report abuse** button displayed, to submit an abuse report:
+The **Submit as spam** button is displayed at the top right of the snippet. With the **Submit as spam** button displayed, to submit a snippet as spam report:
 
-1. In the top right corner of the snippet's page, select **Report abuse**.
-1. Add a message explaining why the snippet is abusive.
-1. Select **Send report**.
+1. In the top right corner of the snippet's page, select **Submit as spam**.
 
 ## Managing abuse reports
 
-- 
GitLab


From f32a2b304d7b699cf72ed05c56cd4a53fe87d615 Mon Sep 17 00:00:00 2001
From: David O'Regan <doregan@gitlab.com>
Date: Mon, 9 Aug 2021 09:52:06 +0100
Subject: [PATCH 13/13] chore: update docs and apply testing patch

---
 doc/user/report_abuse.md                      | 10 ----
 .../components/snippet_header_spec.js         | 55 ++++++++++++++++++-
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/doc/user/report_abuse.md b/doc/user/report_abuse.md
index 4777401d43b0a8..2b585315326426 100644
--- a/doc/user/report_abuse.md
+++ b/doc/user/report_abuse.md
@@ -19,7 +19,6 @@ You can report a user through their:
 - [Profile](#reporting-abuse-through-a-users-profile)
 - [Comments](#reporting-abuse-through-a-users-comment)
 - [Issues and Merge requests](#reporting-abuse-through-a-users-issue-or-merge-request)
-- [Snippets](#report-abuse-through-a-snippet)
 
 ## Reporting abuse through a user's profile
 
@@ -63,15 +62,6 @@ NOTE:
 A URL to the reported user's issue or merge request is pre-filled
 in the abuse report's **Message** field.
 
-## Report abuse through a snippet
-
-If a snippet is malicious, or violates the
-[GitLab Code of Conduct](https://about.gitlab.com/community/contribute/code-of-conduct/),
-you can report it as abuse:
-The **Submit as spam** button is displayed at the top right of the snippet. With the **Submit as spam** button displayed, to submit a snippet as spam report:
-
-1. In the top right corner of the snippet's page, select **Submit as spam**.
-
 ## Managing abuse reports
 
 Admins are able to view and resolve abuse reports.
diff --git a/spec/frontend/snippets/components/snippet_header_spec.js b/spec/frontend/snippets/components/snippet_header_spec.js
index 34d4dbd63e6421..fb95be3a77c343 100644
--- a/spec/frontend/snippets/components/snippet_header_spec.js
+++ b/spec/frontend/snippets/components/snippet_header_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlModal } from '@gitlab/ui';
+import { GlButton, GlModal, GlDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
@@ -26,6 +26,7 @@ describe('Snippet header component', () => {
     permissions = {},
     mutationRes = mutationTypes.RESOLVE,
     snippetProps = {},
+    provide = {},
   } = {}) {
     const defaultProps = Object.assign(snippet, snippetProps);
     if (permissions) {
@@ -46,6 +47,7 @@ describe('Snippet header component', () => {
       mocks: { $apollo },
       provide: {
         reportAbusePath,
+        ...provide,
       },
       propsData: {
         snippet: {
@@ -70,6 +72,16 @@ describe('Snippet header component', () => {
       variant: x.props('variant'),
       disabled: x.props('disabled'),
     }));
+  const findResponsiveDropdown = () => wrapper.findComponent(GlDropdown);
+  // We can't search by component here since we are full mounting and the attributes are applied to a child of the GlDropdownItem
+  const findResponsiveDropdownItems = () => findResponsiveDropdown().findAll('[role="menuitem"]');
+  const findResponsiveDropdownItemsAsModel = () =>
+    findResponsiveDropdownItems().wrappers.map((x) => ({
+      disabled: x.attributes('disabled'),
+      href: x.attributes('href'),
+      title: x.attributes('title'),
+      text: x.text(),
+    }));
 
   beforeEach(() => {
     gon.relative_url_root = '/foo/';
@@ -181,6 +193,25 @@ describe('Snippet header component', () => {
     ]);
   });
 
+  it('renders responsive dropdown for action buttons', () => {
+    createComponent();
+
+    expect(findResponsiveDropdownItemsAsModel()).toEqual([
+      {
+        href: `${snippet.webUrl}/edit`,
+        text: 'Edit',
+      },
+      {
+        text: 'Delete',
+      },
+      {
+        href: reportAbusePath,
+        text: 'Submit as spam',
+        title: 'Submit as spam',
+      },
+    ]);
+  });
+
   it.each`
     permissions                                      | buttons
     ${{ adminSnippet: false, updateSnippet: false }} | ${['Submit as spam']}
@@ -218,6 +249,28 @@ describe('Snippet header component', () => {
     );
   });
 
+  describe('with guest user', () => {
+    beforeEach(() => {
+      createComponent({
+        permissions: {
+          adminSnippet: false,
+          updateSnippet: false,
+        },
+        provide: {
+          reportAbusePath: null,
+        },
+      });
+    });
+
+    it('does not show any action buttons', () => {
+      expect(findButtons()).toHaveLength(0);
+    });
+
+    it('does not show responsive action dropdown', () => {
+      expect(findResponsiveDropdown().exists()).toBe(false);
+    });
+  });
+
   it('renders modal for deletion of a snippet', () => {
     createComponent();
     expect(wrapper.find(GlModal).exists()).toBe(true);
-- 
GitLab