1 files changed, 42 insertions, 4 deletions
diff --git a/app/assets/javascripts/admin/abuse_report/components/abuse_report_app.vue b/app/assets/javascripts/admin/abuse_report/components/abuse_report_app.vue
index 1490d7e64f5..3c46de7c2be 100644
--- a/app/assets/javascripts/admin/abuse_report/components/abuse_report_app.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/abuse_report_app.vue
@@ -1,9 +1,12 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
+import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import ReportHeader from './report_header.vue';
 import UserDetails from './user_details.vue';
+import ReportDetails from './report_details.vue';
 import ReportedContent from './reported_content.vue';
-import HistoryItems from './history_items.vue';
+import ActivityEventsList from './activity_events_list.vue';
+import ActivityHistoryItem from './activity_history_item.vue';
 
 const alertDefaults = {
   visible: false,
@@ -17,9 +20,12 @@ export default {
     GlAlert,
     ReportHeader,
     UserDetails,
+    ReportDetails,
     ReportedContent,
-    HistoryItems,
+    ActivityEventsList,
+    ActivityHistoryItem,
   },
+  mixins: [glFeatureFlagsMixin()],
   props: {
     abuseReport: {
       type: Object,
@@ -31,6 +37,11 @@ export default {
       alert: { ...alertDefaults },
     };
   },
+  computed: {
+    similarOpenReports() {
+      return this.abuseReport.user?.similarOpenReports || [];
+    },
+  },
   methods: {
     showAlert(variant, message) {
       this.alert.visible = true;
@@ -49,6 +60,7 @@ export default {
     <gl-alert v-if="alert.visible" :variant="alert.variant" class="gl-mt-4" @dismiss="closeAlert">{{
       alert.message
     }}</gl-alert>
+
     <report-header
       v-if="abuseReport.user"
       :user="abuseReport.user"
@@ -56,7 +68,33 @@ export default {
       @showAlert="showAlert"
     />
     <user-details v-if="abuseReport.user" :user="abuseReport.user" />
-    <reported-content :report="abuseReport.report" :reporter="abuseReport.reporter" />
-    <history-items :report="abuseReport.report" :reporter="abuseReport.reporter" />
+
+    <report-details
+      v-if="glFeatures.abuseReportLabels"
+      :report-id="abuseReport.report.globalId"
+      class="gl-mt-6"
+    />
+
+    <reported-content :report="abuseReport.report" data-testid="reported-content" />
+
+    <div
+      v-for="report in similarOpenReports"
+      :key="report.id"
+      data-testid="reported-content-similar-open-reports"
+    >
+      <reported-content :report="report" />
+    </div>
+
+    <activity-events-list>
+      <template #history-items>
+        <activity-history-item :report="abuseReport.report" data-testid="activity" />
+        <activity-history-item
+          v-for="report in similarOpenReports"
+          :key="report.id"
+          :report="report"
+          data-testid="activity-similar-open-reports"
+        />
+      </template>
+    </activity-events-list>
   </section>
 </template>