Add latest changes from gitlab-org/gitlab@15-8-stable-eev15.8.0-rc42

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