Merge branch '336499-corpus-management-date-formats' into 'master'

Change date time formatting for corpus managment

See merge request gitlab-org/gitlab!66947

app/assets/javascripts/vue_shared/components/user_date.vue

 <script>
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
-import { SHORT_DATE_FORMAT } from '../constants';
+import { SHORT_DATE_FORMAT, DATE_FORMATS } from '../constants';
 
 export default {
   props: {
@@ -10,6 +10,12 @@ export default {
       required: false,
       default: null,
     },
+    dateFormat: {
+      type: String,
+      required: false,
+      default: SHORT_DATE_FORMAT,
+      validator: (dateFormat) => DATE_FORMATS.includes(dateFormat),
+    },
   },
   computed: {
     formattedDate() {
@@ -17,7 +23,7 @@ export default {
       if (date === null) {
         return __('Never');
       }
-      return formatDate(new Date(date), SHORT_DATE_FORMAT);
+      return formatDate(new Date(date), this.dateFormat);
     },
   },
 };

app/assets/javascripts/vue_shared/constants.js

@@ -10,6 +10,10 @@ export const FILE_SYMLINK_MODE = '120000';
 
 export const SHORT_DATE_FORMAT = 'd mmm, yyyy';
 
+export const ISO_SHORT_FORMAT = 'yyyy-mm-dd';
+
+export const DATE_FORMATS = [SHORT_DATE_FORMAT, ISO_SHORT_FORMAT];
+
 export const timeRanges = [
   {
     label: __('30 minutes'),

ee/app/assets/javascripts/security_configuration/corpus_management/components/corpus_table.vue

@@ -5,6 +5,7 @@ import Name from 'ee/security_configuration/corpus_management/components/columns
 import Target from 'ee/security_configuration/corpus_management/components/columns/target.vue';
 import { s__ } from '~/locale';
 import UserDate from '~/vue_shared/components/user_date.vue';
+import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
 import deleteCorpusMutation from '../graphql/mutations/delete_corpus.mutation.graphql';
 
 const thClass = 'gl-bg-transparent! gl-border-gray-100! gl-border-b-solid! gl-border-b-1!';
@@ -59,6 +60,7 @@ export default {
       });
     },
   },
+  dateFormat: ISO_SHORT_FORMAT,
 };
 </script>
 <template>
@@ -72,11 +74,11 @@ export default {
     </template>
 
     <template #cell(lastUpdated)="{ item }">
-      <user-date :date="item.lastUpdated" />
+      <user-date :date="item.lastUpdated" :date-format="$options.dateFormat" />
     </template>
 
     <template #cell(lastUsed)="{ item }">
-      <user-date :date="item.lastUsed" />
+      <user-date :date="item.lastUsed" :date-format="$options.dateFormat" />
     </template>
 
     <template #cell(actions)="{ item }">

spec/frontend/admin/users/components/user_date_spec.js

 import { shallowMount } from '@vue/test-utils';
 
 import UserDate from '~/vue_shared/components/user_date.vue';
+import { ISO_SHORT_FORMAT } from '~/vue_shared/constants';
 import { users } from '../mock_data';
 
 const mockDate = users[0].createdAt;
@@ -22,12 +23,15 @@ describe('FormatDate component', () => {
   });
 
   it.each`
-    date         | output
-    ${mockDate}  | ${'13 Nov, 2020'}
-    ${null}      | ${'Never'}
-    ${undefined} | ${'Never'}
-  `('renders $date as $output', ({ date, output }) => {
-    initComponent({ date });
+    date         | dateFormat          | output
+    ${mockDate}  | ${undefined}        | ${'13 Nov, 2020'}
+    ${null}      | ${undefined}        | ${'Never'}
+    ${undefined} | ${undefined}        | ${'Never'}
+    ${mockDate}  | ${ISO_SHORT_FORMAT} | ${'2020-11-13'}
+    ${null}      | ${ISO_SHORT_FORMAT} | ${'Never'}
+    ${undefined} | ${ISO_SHORT_FORMAT} | ${'Never'}
+  `('renders $date as $output', ({ date, dateFormat, output }) => {
+    initComponent({ date, dateFormat });
 
     expect(wrapper.text()).toBe(output);
   });