Add latest changes from gitlab-org/gitlab@master

3 files changed, 100 insertions, 23 deletions

diff --git a/app/assets/javascripts/admin/abuse_reports/components/abuse_report_details.vue b/app/assets/javascripts/admin/abuse_reports/components/abuse_report_details.vue
new file mode 100644
index 00000000000..f49411604f1
--- /dev/null
+++ b/app/assets/javascripts/admin/abuse_reports/components/abuse_report_details.vue
@@ -0,0 +1,66 @@
+<script>
+import { uniqueId } from 'lodash';
+import { GlButton, GlCollapse } from '@gitlab/ui';
+import { getTimeago } from '~/lib/utils/datetime_utility';
+import { __, sprintf } from '~/locale';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+
+export default {
+  components: {
+    GlButton,
+    GlCollapse,
+  },
+  directives: { SafeHtml },
+  props: {
+    report: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isVisible: false,
+      collapseId: uniqueId('abuse-report-detail-'),
+    };
+  },
+  computed: {
+    toggleText() {
+      return this.isVisible ? __('Hide details') : __('Show details');
+    },
+    reportedUserCreatedAt() {
+      const { reportedUser } = this.report;
+      return sprintf(__('User joined %{timeAgo}'), {
+        timeAgo: getTimeago().format(reportedUser.createdAt),
+      });
+    },
+  },
+  methods: {
+    toggleCollapse() {
+      this.isVisible = !this.isVisible;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-flex-direction-column">
+    <gl-collapse :id="collapseId" v-model="isVisible">
+      <dl class="gl-mb-2">
+        <dd>{{ reportedUserCreatedAt }}</dd>
+
+        <dt>{{ __('Message') }}</dt>
+        <dd v-safe-html="report.message"></dd>
+      </dl>
+    </gl-collapse>
+    <div>
+      <gl-button
+        :aria-expanded="`${isVisible}`"
+        :aria-controls="collapseId"
+        size="small"
+        variant="link"
+        @click="toggleCollapse"
+        >{{ toggleText }}
+      </gl-button>
+    </div>
+  </div>
+</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 f3cbf975aab..a9fe59a7b85 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
@@ -1,13 +1,17 @@
 <script>
 import { GlSprintf, GlLink } from '@gitlab/ui';
 import { getTimeago } from '~/lib/utils/datetime_utility';
+import { queryToObject } from '~/lib/utils/url_utility';
 import { __, sprintf } from '~/locale';
 import ListItem from '~/vue_shared/components/registry/list_item.vue';
+import { SORT_UPDATED_AT } from '../constants';
 import AbuseReportActions from './abuse_report_actions.vue';
+import AbuseReportDetails from './abuse_report_details.vue';
 
 export default {
   name: 'AbuseReportRow',
   components: {
+    AbuseReportDetails,
     GlLink,
     GlSprintf,
     AbuseReportActions,
@@ -20,9 +24,14 @@ export default {
     },
   },
   computed: {
-    updatedAt() {
-      const template = __('Updated %{timeAgo}');
-      return sprintf(template, { timeAgo: getTimeago().format(this.report.updatedAt) });
+    displayDate() {
+      const { sort } = queryToObject(window.location.search);
+      const { createdAt, updatedAt } = this.report;
+      const { template, timeAgo } = Object.values(SORT_UPDATED_AT.sortDirection).includes(sort)
+        ? { template: __('Updated %{timeAgo}'), timeAgo: updatedAt }
+        : { template: __('Created %{timeAgo}'), timeAgo: createdAt };
+
+      return sprintf(template, { timeAgo: getTimeago().format(timeAgo) });
     },
     reported() {
       const { reportedUser } = this.report;
@@ -48,7 +57,7 @@ export default {
 <template>
   <list-item data-testid="abuse-report-row">
     <template #left-primary>
-      <div class="gl-font-weight-normal" data-testid="title">
+      <div class="gl-font-weight-normal gl-mb-2" data-testid="title">
         <gl-sprintf :message="title">
           <template #userLink="{ content }">
             <gl-link :href="report.reportedUserPath">{{ content }}</gl-link>
@@ -60,9 +69,12 @@ export default {
       </div>
     </template>
 
-    <template #right-secondary>
-      <div data-testid="updated-at">{{ updatedAt }}</div>
+    <template #left-secondary>
+      <abuse-report-details :report="report" />
+    </template>
 
+    <template #right-secondary>
+      <div data-testid="abuse-report-date">{{ displayDate }}</div>
       <abuse-report-actions :report="report" />
     </template>
   </list-item>
diff --git a/app/assets/javascripts/admin/abuse_reports/constants.js b/app/assets/javascripts/admin/abuse_reports/constants.js
index 8b1045fd531..ee002f269ac 100644
--- a/app/assets/javascripts/admin/abuse_reports/constants.js
+++ b/app/assets/javascripts/admin/abuse_reports/constants.js
@@ -40,25 +40,24 @@ export const FILTERED_SEARCH_TOKEN_STATUS = {
 };
 
 export const DEFAULT_SORT = 'created_at_desc';
-
-export const SORT_OPTIONS = [
-  {
-    id: 10,
-    title: __('Created date'),
-    sortDirection: {
-      descending: DEFAULT_SORT,
-      ascending: 'created_at_asc',
-    },
+export const SORT_UPDATED_AT = Object.freeze({
+  id: 20,
+  title: __('Updated date'),
+  sortDirection: {
+    descending: 'updated_at_desc',
+    ascending: 'updated_at_asc',
   },
-  {
-    id: 20,
-    title: __('Updated date'),
-    sortDirection: {
-      descending: 'updated_at_desc',
-      ascending: 'updated_at_asc',
-    },
+});
+const SORT_CREATED_AT = Object.freeze({
+  id: 10,
+  title: __('Created date'),
+  sortDirection: {
+    descending: DEFAULT_SORT,
+    ascending: 'created_at_asc',
   },
-];
+});
+
+export const SORT_OPTIONS = [SORT_CREATED_AT, SORT_UPDATED_AT];
 
 export const isValidSortKey = (key) =>
   SORT_OPTIONS.some(