1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/javascripts/projects/merge_requests/components/report_abuse_dropdown_item.vue b/app/assets/javascripts/projects/merge_requests/components/report_abuse_dropdown_item.vue
new file mode 100644
index 00000000000..31890249f41
--- /dev/null
+++ b/app/assets/javascripts/projects/merge_requests/components/report_abuse_dropdown_item.vue
@@ -0,0 +1,41 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { MountingPortal } from 'portal-vue';
+import { s__ } from '~/locale';
+
+import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
+
+export default {
+  name: 'ReportAbuseDropdownItem',
+  components: {
+    GlDropdownItem,
+    MountingPortal,
+    AbuseCategorySelector,
+  },
+  i18n: {
+    reportAbuse: s__('ReportAbuse|Report abuse to administrator'),
+  },
+  data() {
+    return {
+      open: false,
+    };
+  },
+  methods: {
+    openDrawer() {
+      this.open = true;
+    },
+    closeDrawer() {
+      this.open = false;
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <gl-dropdown-item @click="openDrawer">{{ $options.i18n.reportAbuse }}</gl-dropdown-item>
+
+    <mounting-portal mount-to="#js-report-abuse-drawer" name="abuse-category-selector" append>
+      <abuse-category-selector :show-drawer="open" @close-drawer="closeDrawer" />
+    </mounting-portal>
+  </span>
+</template>