diff options
Diffstat (limited to 'app/assets/javascripts/admin/abuse_reports/components')
-rw-r--r-- | app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue | 33 | ||||
-rw-r--r-- | app/assets/javascripts/admin/abuse_reports/components/abuse_report_row.vue | 17 |
2 files changed, 48 insertions, 2 deletions
diff --git a/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue b/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue new file mode 100644 index 00000000000..f05f96d6302 --- /dev/null +++ b/app/assets/javascripts/admin/abuse_reports/components/abuse_category.vue @@ -0,0 +1,33 @@ +<script> +import { GlLabel } from '@gitlab/ui'; +import { ABUSE_CATEGORIES } from '../constants'; + +export default { + name: 'AbuseCategory', + components: { + GlLabel, + }, + props: { + category: { + type: String, + required: true, + }, + }, + computed: { + categoryObject() { + return ABUSE_CATEGORIES[this.category]; + }, + }, +}; +</script> + +<template> + <gl-label + v-if="categoryObject" + size="sm" + :background-color="categoryObject.backgroundColor" + :title="categoryObject.title" + :target="null" + :class="`gl-text-${categoryObject.color}`" + /> +</template> diff --git a/app/assets/javascripts/admin/abuse_reports/components/abuse_report_row.vue b/app/assets/javascripts/admin/abuse_reports/components/abuse_report_row.vue index b8a4640de59..b229dd9e993 100644 --- a/app/assets/javascripts/admin/abuse_reports/components/abuse_report_row.vue +++ b/app/assets/javascripts/admin/abuse_reports/components/abuse_report_row.vue @@ -5,12 +5,14 @@ import { queryToObject } from '~/lib/utils/url_utility'; import { s__, __, sprintf } from '~/locale'; import ListItem from '~/vue_shared/components/registry/list_item.vue'; import { SORT_UPDATED_AT } from '../constants'; +import AbuseCategory from './abuse_category.vue'; export default { name: 'AbuseReportRow', components: { GlLink, ListItem, + AbuseCategory, }, props: { report: { @@ -44,13 +46,24 @@ export default { <template> <list-item data-testid="abuse-report-row"> <template #left-primary> - <gl-link :href="report.reportPath" class="gl-font-weight-normal gl-mb-2" data-testid="title"> + <gl-link + :href="report.reportPath" + class="gl-font-weight-normal gl-pt-4 gl-text-gray-900" + data-testid="abuse-report-title" + > {{ title }} </gl-link> </template> + <template #left-secondary> + <abuse-category + :category="report.category" + class="gl-mt-2 gl-mb-3" + data-testid="abuse-report-category" + /> + </template> <template #right-secondary> - <div data-testid="abuse-report-date">{{ displayDate }}</div> + <div class="gl-mt-7" data-testid="abuse-report-date">{{ displayDate }}</div> </template> </list-item> </template> |