1 files changed, 42 insertions, 0 deletions
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>