Add latest changes from gitlab-org/gitlab@master

1 files changed, 31 insertions, 1 deletions

diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index d32336395dc..63386d2e33d 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -4,12 +4,13 @@ import { GlIcon, GlLink, GlTooltip, GlTooltipDirective, GlButton } from '@gitlab
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import IssueDueDate from '~/boards/components/issue_due_date.vue';
 import { TYPENAME_WORK_ITEM } from '~/graphql_shared/constants';
-import { convertToGraphQLId } from '~/graphql_shared/utils';
+import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { isMetaKey } from '~/lib/utils/common_utils';
 import { setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { sprintf } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
+import AbuseCategorySelector from '~/abuse_reports/components/abuse_category_selector.vue';
 import relatedIssuableMixin from '../mixins/related_issuable_mixin';
 import IssueAssignees from './issue_assignees.vue';
 import IssueMilestone from './issue_milestone.vue';
@@ -26,12 +27,18 @@ export default {
     IssueDueDate,
     GlButton,
     WorkItemDetailModal,
+    AbuseCategorySelector,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
     SafeHtml,
   },
   mixins: [relatedIssuableMixin],
+  inject: {
+    reportAbusePath: {
+      default: '',
+    },
+  },
   props: {
     canReorder: {
       type: Boolean,
@@ -54,6 +61,13 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      isReportDrawerOpen: false,
+      reportedUserId: 0,
+      reportedUrl: '',
+    };
+  },
   computed: {
     stateTitle() {
       return sprintf(
@@ -92,6 +106,14 @@ export default {
         replace: true,
       });
     },
+    toggleReportAbuseDrawer(isOpen, reply = {}) {
+      this.isReportDrawerOpen = isOpen;
+      this.reportedUrl = reply.url;
+      this.reportedUserId = reply.author ? getIdFromGraphQLId(reply.author.id) : 0;
+    },
+    openReportAbuseDrawer(reply) {
+      this.toggleReportAbuseDrawer(true, reply);
+    },
   },
 };
 </script>
@@ -233,6 +255,14 @@ export default {
       :work-item-id="workItemId"
       @close="updateWorkItemIdUrlQuery"
       @workItemDeleted="handleWorkItemDeleted"
+      @openReportAbuse="openReportAbuseDrawer"
+    />
+    <abuse-category-selector
+      v-if="isReportDrawerOpen && reportAbusePath"
+      :reported-user-id="reportedUserId"
+      :reported-from-url="reportedUrl"
+      :show-drawer="isReportDrawerOpen"
+      @close-drawer="toggleReportAbuseDrawer(false)"
     />
   </div>
 </template>