Add time tag to the date and change some date format to YYYY-MM-DD

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileDate.tsx

@@ -2,14 +2,12 @@ import { FileDate as FileDateModel } from '../../../../../../../files/domain/mod
 import { useTranslation } from 'react-i18next'
 import { DateHelper } from '../../../../../../../shared/helpers/DateHelper'
 
-// TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
-
 export function FileDate({ date }: { date: FileDateModel }) {
   const { t } = useTranslation('files')
   return (
     <div>
       <span>
-        {t(`table.date.${date.type}`)} {DateHelper.toDisplayFormat(date.date)}
+        {t(`table.date.${date.type}`)} <time>{DateHelper.toDisplayFormat(date.date)}</time>
       </span>
     </div>
   )

src/sections/file/file-embargo/FileEmbargoDate.tsx

@@ -12,23 +12,23 @@ interface FileEmbargoDateProps {
 export function FileEmbargoDate({
   embargo,
   datasetPublishingStatus,
-  format = 'short'
+  format = 'YYYY-MM-DD'
 }: FileEmbargoDateProps) {
   const { t } = useTranslation('files')
 
   if (!embargo) {
     return <></>
   }
 
-  // TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
-
   return (
     <div>
       <span>
         {t(embargoTypeOfDate(embargo.isActive, datasetPublishingStatus))}{' '}
-        {format === 'YYYY-MM-DD'
-          ? DateHelper.toDisplayFormatYYYYMMDD(embargo.dateAvailable)
-          : DateHelper.toDisplayFormat(embargo.dateAvailable)}
+        <time data-testid="embargo-date">
+          {format === 'YYYY-MM-DD'
+            ? DateHelper.toISO8601Format(embargo.dateAvailable)
+            : DateHelper.toDisplayFormat(embargo.dateAvailable)}
+        </time>
       </span>
     </div>
   )

src/sections/file/file-metadata/FileMetadata.tsx

@@ -97,24 +97,25 @@ export function FileMetadata({
             <Col sm={3}>
               <strong>{t('metadata.fields.depositDate')}</strong>
             </Col>
-            {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
-            <Col>{DateHelper.toDisplayFormatYYYYMMDD(metadata.depositDate)}</Col>
+            <Col>
+              <time>{DateHelper.toISO8601Format(metadata.depositDate)}</time>
+            </Col>
           </Row>
           {metadata.publicationDate && (
             <Row className={styles.row}>
               <Col sm={3}>
                 <strong>{t('metadata.fields.metadataReleaseDate')}</strong>
               </Col>
-              {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
-              <Col>{DateHelper.toDisplayFormatYYYYMMDD(metadata.publicationDate)}</Col>
+              <Col>
+                <time>{DateHelper.toISO8601Format(metadata.publicationDate)}</time>
+              </Col>
             </Row>
           )}
           {(metadata.publicationDate || metadata.embargo) && (
             <Row className={styles.row}>
               <Col sm={3}>
                 <strong>{t('metadata.fields.publicationDate')}</strong>
               </Col>
-              {/* TODO: use time tag with dateTime attr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time */}
               <Col>
                 {metadata.embargo ? (
                   <FileEmbargoDate
@@ -123,7 +124,10 @@ export function FileMetadata({
                     format="YYYY-MM-DD"
                   />
                 ) : (
-                  DateHelper.toDisplayFormatYYYYMMDD(metadata.publicationDate)
+                  <time>
+                    {metadata.publicationDate &&
+                      DateHelper.toISO8601Format(metadata.publicationDate)}
+                  </time>
                 )}
               </Col>
             </Row>

tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileDate.spec.tsx

@@ -8,6 +8,7 @@ describe('FileDate', () => {
     const date = { type: FileDateType.PUBLISHED, date: fileDate }
     cy.customMount(<FileDate date={date} />)
     const dateString = DateHelper.toDisplayFormat(fileDate)
-    cy.findByText(`Published ` + dateString).should('exist')
+    cy.findByText(`Published`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 })

tests/component/sections/file/file-embargo/FileEmbargoDate.spec.tsx

@@ -8,15 +8,9 @@ describe('FileEmbargoDate', () => {
     const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = DatasetPublishingStatus.RELEASED
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Embargoed until ` + dateString).should('exist')
+    const dateString = embargoDate.toISOString().split('T')[0]
+    cy.findByText(`Embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders the until embargo date when embargo is not active and the file is not released', () => {
@@ -25,15 +19,10 @@ describe('FileEmbargoDate', () => {
     const status = DatasetPublishingStatus.RELEASED
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Was embargoed until ` + dateString).should('exist')
+    const dateString = embargoDate.toISOString().split('T')[0]
+
+    cy.findByText(`Was embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders the draft until embargo date when embargo is active and the file is not released', () => {
@@ -42,23 +31,17 @@ describe('FileEmbargoDate', () => {
     const status = DatasetPublishingStatus.DRAFT
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
-      }
-    )
-    cy.findByText(`Draft: will be embargoed until ` + dateString).should('exist')
+    const dateString = embargoDate.toISOString().split('T')[0]
+
+    cy.findByText(`Draft: will be embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 
   it('renders an empty fragment when embargo is undefined', () => {
     const embargo = undefined
     const status = DatasetPublishingStatus.RELEASED
 
     cy.customMount(<FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} />)
-
     cy.findByText(/Draft: will be embargoed until/).should('not.exist')
     cy.findByText(/Embargoed until/).should('not.exist')
     cy.findByText(/Was embargoed until/).should('not.exist')
@@ -68,17 +51,12 @@ describe('FileEmbargoDate', () => {
     const embargoDate = new Date('2123-09-18')
     const embargo = FileEmbargoMother.create({ dateAvailable: embargoDate })
     const status = DatasetPublishingStatus.RELEASED
+
     cy.customMount(
       <FileEmbargoDate embargo={embargo} datasetPublishingStatus={status} format="YYYY-MM-DD" />
     )
-    const dateString = embargoDate.toLocaleDateString(
-      Intl.DateTimeFormat().resolvedOptions().locale,
-      {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-      }
-    )
-    cy.findByText(`Embargoed until ` + dateString).should('exist')
+    const dateString = embargoDate.toISOString().split('T')[0]
+    cy.findByText(`Embargoed until`).should('exist')
+    cy.get('time').should('have.text', dateString)
   })
 })

tests/component/sections/file/file-metadata/FileMetadata.spec.tsx

@@ -214,9 +214,8 @@ describe('FileMetadata', () => {
         datasetPublishingStatus={file.datasetVersion.publishingStatus}
       />
     )
-
     cy.findByText('Deposit Date').should('exist')
-    cy.findByText(DateHelper.toDisplayFormatYYYYMMDD(file.metadata.depositDate)).should('exist')
+    cy.get('time').contains(DateHelper.toISO8601Format(file.metadata.depositDate)).should('exist')
   })
 
   it('renders the file Metadata Release Date', () => {
@@ -231,9 +230,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Metadata Release Date').should('exist')
-    cy.findAllByText(
-      DateHelper.toDisplayFormatYYYYMMDD(metadataWithPublicationDate.publicationDate)
-    ).should('exist')
+    if (metadataWithPublicationDate.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDate.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('does not render the file Metadata Release Date if the publication date does not exist', () => {
@@ -262,9 +263,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Publication Date').should('exist')
-    cy.findAllByText(
-      DateHelper.toDisplayFormatYYYYMMDD(metadataWithPublicationDate.publicationDate)
-    ).should('exist')
+    if (metadataWithPublicationDate.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDate.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('renders the file Publication Date with embargo', () => {
@@ -280,11 +283,11 @@ describe('FileMetadata', () => {
     )
 
     cy.findByText('Publication Date').should('exist')
-    cy.findByText(
-      `Embargoed until ${DateHelper.toDisplayFormatYYYYMMDD(
-        metadataWithPublicationDateEmbargoed.embargo?.dateAvailable
-      )}`
-    ).should('exist')
+    if (metadataWithPublicationDateEmbargoed.publicationDate) {
+      cy.findAllByText(
+        DateHelper.toISO8601Format(metadataWithPublicationDateEmbargoed.publicationDate)
+      ).should('exist')
+    }
   })
 
   it('does not render the file Publication Date if the publication date and embargo do not exist', () => {

tests/e2e-integration/e2e/sections/dataset/Dataset.spec.tsx

@@ -478,57 +478,39 @@ describe('Dataset', () => {
     })
 
     it('loads the embargoed files', () => {
-      cy.window().then((win) => {
-        // Get the browser's locale from the window object
-        const browserLocale = win.navigator.language
-
-        // Create a moment object in UTC and set the time to 12 AM (midnight)
-        const utcDate = moment.utc().startOf('day')
-
-        // Add 100 years to the UTC date
-        utcDate.add(100, 'years')
-        const dateString = utcDate.format('YYYY-MM-DD')
-
-        // Use the browser's locale to format the date using Intl.DateTimeFormat
-        const options: Intl.DateTimeFormatOptions = {
-          year: 'numeric',
-          month: 'short',
-          day: 'numeric'
-        }
-        const expectedDate = new Intl.DateTimeFormat(browserLocale, options).format(
-          utcDate.toDate()
-        )
+      const utcDate = moment.utc().startOf('day').add(100, 'years')
+      const expectedDate = utcDate.toISOString().split('T')[0]
 
-        cy.wrap(
-          DatasetHelper.createWithFiles(FileHelper.createMany(1)).then((dataset) =>
-            DatasetHelper.embargoFiles(
-              dataset.persistentId,
-              [dataset.files ? dataset.files[0].id : 0],
-              dateString
-            )
+      cy.wrap(
+        DatasetHelper.createWithFiles(FileHelper.createMany(1)).then((dataset) =>
+          DatasetHelper.embargoFiles(
+            dataset.persistentId,
+            [dataset.files ? dataset.files[0].id : 0],
+            expectedDate
           )
         )
-          .its('persistentId')
-          .then((persistentId: string) => {
-            cy.wait(1500) // Wait for the files to be embargoed
+      )
+        .its('persistentId')
+        .then((persistentId: string) => {
+          cy.wait(1500) // Wait for the files to be embargoed
 
-            cy.visit(`/spa/datasets?persistentId=${persistentId}&version=${DRAFT_PARAM}`)
+          cy.visit(`/spa/datasets?persistentId=${persistentId}&version=${DRAFT_PARAM}`)
 
-            cy.wait(1500) // Wait for the files to be loaded
+          cy.wait(1500) // Wait for the files to be loaded
 
-            cy.findByText('Files').should('exist')
+          cy.findByText('Files').should('exist')
 
-            cy.findByText(/Deposited/).should('exist')
-            cy.findByText(`Draft: will be embargoed until ${expectedDate}`).should('exist')
+          cy.findByText(/Deposited/).should('exist')
+          cy.findByText(`Draft: will be embargoed until`).should('exist')
+          cy.findByTestId('embargo-date').should('have.text', expectedDate)
 
-            cy.get('#edit-files-menu').should('exist')
+          cy.get('#edit-files-menu').should('exist')
 
-            cy.findByRole('button', { name: 'Access File' }).as('accessButton')
-            cy.get('@accessButton').should('exist')
-            cy.get('@accessButton').click()
-            cy.findByText('Embargoed').should('exist')
-          })
-      })
+          cy.findByRole('button', { name: 'Access File' }).as('accessButton')
+          cy.get('@accessButton').should('exist')
+          cy.get('@accessButton').click()
+          cy.findByText('Embargoed').should('exist')
+        })
     })
 
     it('applies filters to the Files Table in the correct order', () => {