Add latest changes from gitlab-org/gitlab@master

2 files changed, 59 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>
diff --git a/app/assets/javascripts/projects/merge_requests/index.js b/app/assets/javascripts/projects/merge_requests/index.js
new file mode 100644
index 00000000000..25a70121d68
--- /dev/null
+++ b/app/assets/javascripts/projects/merge_requests/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import ReportAbuseDropdownItem from './components/report_abuse_dropdown_item.vue';
+
+export const initReportAbuse = () => {
+  const el = document.getElementById('js-report-abuse-dropdown-item');
+
+  if (!el) return false;
+
+  const { reportAbusePath, reportedUserId, reportedFromUrl } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: { reportAbusePath, reportedUserId, reportedFromUrl },
+    render(createElement) {
+      return createElement(ReportAbuseDropdownItem);
+    },
+  });
+};