diff options
Diffstat (limited to 'app')
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> |