1 files changed, 55 insertions, 0 deletions
diff --git a/app/assets/javascripts/users/profile/components/report_abuse_button.vue b/app/assets/javascripts/users/profile/components/report_abuse_button.vue
new file mode 100644
index 00000000000..aabb7fde396
--- /dev/null
+++ b/app/assets/javascripts/users/profile/components/report_abuse_button.vue
@@ -0,0 +1,55 @@
+<script>
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants';
+
+import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
+
+export default {
+  name: 'ReportAbuseButton',
+  components: {
+    GlButton,
+    AbuseCategorySelector,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  i18n: {
+    reportAbuse: __('Report abuse to administrator'),
+  },
+  data() {
+    return {
+      open: false,
+    };
+  },
+  computed: {
+    buttonTooltipText() {
+      return this.$options.i18n.reportAbuse;
+    },
+  },
+  methods: {
+    openDrawer() {
+      this.open = true;
+    },
+    closeDrawer() {
+      this.open = false;
+    },
+    hideTooltips() {
+      this.$root.$emit(BV_HIDE_TOOLTIP);
+    },
+  },
+};
+</script>
+<template>
+  <span>
+    <gl-button
+      v-gl-tooltip="buttonTooltipText"
+      category="primary"
+      :aria-label="buttonTooltipText"
+      icon="error"
+      @click="openDrawer"
+      @mouseout="hideTooltips"
+    />
+    <abuse-category-selector :show-drawer="open" @close-drawer="closeDrawer" />
+  </span>
+</template>