Add latest changes from gitlab-org/gitlab@master

4 files changed, 81 insertions, 53 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 3aa1289261d..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
@@ -5,7 +5,8 @@ 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,
@@ -21,7 +22,8 @@ export default {
     UserDetails,
     ReportDetails,
     ReportedContent,
-    HistoryItems,
+    ActivityEventsList,
+    ActivityHistoryItem,
   },
   mixins: [glFeatureFlagsMixin()],
   props: {
@@ -75,10 +77,24 @@ export default {
 
     <reported-content :report="abuseReport.report" data-testid="reported-content" />
 
-    <div v-for="report in similarOpenReports" :key="report.id" data-testid="similar-open-reports">
+    <div
+      v-for="report in similarOpenReports"
+      :key="report.id"
+      data-testid="reported-content-similar-open-reports"
+    >
       <reported-content :report="report" />
     </div>
 
-    <history-items :report="abuseReport.report" />
+    <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>
diff --git a/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue b/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue
new file mode 100644
index 00000000000..8c4c1da28b8
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue
@@ -0,0 +1,19 @@
+<script>
+import { HISTORY_ITEMS_I18N } from '../constants';
+
+export default {
+  name: 'ActivityEventsList',
+  i18n: HISTORY_ITEMS_I18N,
+};
+</script>
+
+<template>
+  <!-- The styles `issuable-discussion`, `timeline`, `main-notes-list` and `notes` used below
+       are declared in app/assets/stylesheets/pages/notes.scss -->
+  <section class="gl-pt-6 issuable-discussion">
+    <h2 class="gl-font-lg gl-mt-0 gl-mb-2">{{ $options.i18n.activity }}</h2>
+    <ul class="timeline main-notes-list notes">
+      <slot name="history-items"></slot>
+    </ul>
+  </section>
+</template>
diff --git a/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
new file mode 100644
index 00000000000..5962203c382
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
@@ -0,0 +1,42 @@
+<script>
+import { GlSprintf } from '@gitlab/ui';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
+import { HISTORY_ITEMS_I18N } from '../constants';
+
+export default {
+  name: 'ActivityHistoryItem',
+  components: {
+    GlSprintf,
+    TimeAgoTooltip,
+    HistoryItem,
+  },
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    reporter() {
+      return this.report.reporter;
+    },
+    reporterName() {
+      return this.reporter?.name || this.$options.i18n.deletedReporter;
+    },
+  },
+  i18n: HISTORY_ITEMS_I18N,
+};
+</script>
+
+<template>
+  <history-item icon="warning">
+    <div class="gl-display-flex gl-xs-flex-direction-column">
+      <gl-sprintf :message="$options.i18n.reportedByForCategory">
+        <template #name>{{ reporterName }}</template>
+        <template #category>{{ report.category }}</template>
+      </gl-sprintf>
+      <time-ago-tooltip :time="report.reportedAt" class="gl-text-secondary gl-sm-ml-3" />
+    </div>
+  </history-item>
+</template>
diff --git a/app/assets/javascripts/admin/abuse_report/components/history_items.vue b/app/assets/javascripts/admin/abuse_report/components/history_items.vue
deleted file mode 100644
index 619a8bcfe92..00000000000
--- a/app/assets/javascripts/admin/abuse_report/components/history_items.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-import { GlSprintf } from '@gitlab/ui';
-import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
-import { HISTORY_ITEMS_I18N } from '../constants';
-
-export default {
-  name: 'HistoryItems',
-  components: {
-    GlSprintf,
-    TimeAgoTooltip,
-    HistoryItem,
-  },
-  props: {
-    report: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    reporter() {
-      return this.report.reporter;
-    },
-    reporterName() {
-      return this.reporter?.name || this.$options.i18n.deletedReporter;
-    },
-  },
-  i18n: HISTORY_ITEMS_I18N,
-};
-</script>
-
-<template>
-  <!-- The styles `issuable-discussion`, `timeline`, `main-notes-list` and `notes` used below
-       are declared in app/assets/stylesheets/pages/notes.scss -->
-  <section class="gl-pt-6 issuable-discussion">
-    <h2 class="gl-font-lg gl-mt-0 gl-mb-2">{{ $options.i18n.activity }}</h2>
-    <ul class="timeline main-notes-list notes">
-      <history-item icon="warning">
-        <div class="gl-display-flex gl-xs-flex-direction-column">
-          <gl-sprintf :message="$options.i18n.reportedByForCategory">
-            <template #name>{{ reporterName }}</template>
-            <template #category>{{ report.category }}</template>
-          </gl-sprintf>
-          <time-ago-tooltip :time="report.reportedAt" class="gl-text-secondary gl-sm-ml-3" />
-        </div>
-      </history-item>
-    </ul>
-  </section>
-</template>