find occurence of time, improve time formatting js (#1799)

* find occurence of time, improve time formatting js * fix tests * missed a few spots
cds-snc · Apr 15, 2024 · 61ff00e · 61ff00e
1 parent e8d577c
commit 61ff00e
Show file tree

Hide file tree

Showing 19 changed files with 67 additions and 57 deletions.
diff --git a/app/__init__.py b/app/__init__.py
@@ -496,8 +496,8 @@ def _getStatusByBounceSubtype():
 def format_notification_status_as_time(status, created, updated):
     return dict.fromkeys(
         {"created", "pending", "sending"},
-        " " + _("since") + ' <span class="local-datetime-short">{}</span>'.format(created),
-    ).get(status, '<span class="local-datetime-short">{}</span>'.format(updated))
+        " " + _("since") + ' <time class="local-datetime-short">{}</time>'.format(created),
+    ).get(status, '<time class="local-datetime-short">{}</time>'.format(updated))
 
 
 def format_notification_status_as_field_status(status, notification_type):

diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
@@ -1,69 +1,79 @@
 window.formatAllDates = function () {
   $(".local-datetime-short").each(function (index) {
-    let datetime = new Date($(this).text().trim());
+    let datetimeRaw = $(this).text().trim();
+    let datetime = new Date(datetimeRaw);
     let locale = window.APP_LANG == "fr" ? "fr-CA" : "en-US";
 
     if (datetime instanceof Date && !isNaN(datetime)) {
-      $(this).text(
-        datetime.toLocaleString(locale, {
-          month: "short",
-          day: "numeric",
-          hour: "numeric",
-          minute: "2-digit",
-        }),
-      );
+      $(this)
+        .attr("datetime", datetimeRaw)
+        .text(
+          datetime.toLocaleString(locale, {
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "2-digit",
+          }),
+        );
     }
   });
 
   $(".local-datetime-short-year").each(function (index) {
-    let datetime = new Date($(this).text().trim());
+    let datetimeRaw = $(this).text().trim();
+    let datetime = new Date(datetimeRaw);
     let locale = window.APP_LANG == "fr" ? "fr-CA" : "en-US";
 
     if (datetime instanceof Date && !isNaN(datetime)) {
-      $(this).text(
-        datetime.toLocaleString(locale, {
-          month: "short",
-          day: "numeric",
-          year: "numeric",
-        }),
-      );
+      $(this)
+        .attr("datetime", datetimeRaw)
+        .text(
+          datetime.toLocaleString(locale, {
+            month: "short",
+            day: "numeric",
+            year: "numeric",
+          }),
+        );
     }
   });
 
   $(".local-datetime-full").each(function (index) {
-    let datetime = new Date($(this).text().trim());
+    let datetimeRaw = $(this).text().trim();
+    let datetime = new Date(datetimeRaw);
     let locale = window.APP_LANG == "fr" ? "fr-CA" : "en-US";
 
     if ($(this).text().trim() === "None") {
       $(this).text(window.APP_PHRASES["never"]);
     }
 
     if (datetime instanceof Date && !isNaN(datetime)) {
-      $(this).text(
-        datetime.toLocaleDateString(locale, { dateStyle: "long" }) +
-          ", " +
-          datetime.toLocaleTimeString(locale, { timeStyle: "short" }),
-      );
+      $(this)
+        .attr("datetime", datetimeRaw)
+        .text(
+          datetime.toLocaleDateString(locale, { dateStyle: "long" }) +
+            ", " +
+            datetime.toLocaleTimeString(locale, { timeStyle: "short" }),
+        );
     }
   });
 
   $(".relative-time-past").each(function (index) {
-    let timeRaw = new Date($(this).text().trim());
+    let datetimeRaw = $(this).text().trim();
+    let datetime = new Date($(this).text().trim());
     let locale = window.APP_LANG == "fr" ? "fr-CA" : "en-US";
-    let time = moment(timeRaw);
+    let time = moment(datetime);
 
     if (time.isValid() && window.APP_LANG) {
       let isToday = moment().isSame(time, "day");
       let dayStr = "";
-      let timeStr = timeRaw.toLocaleTimeString(locale, { timeStyle: "short" });
+      let timeStr = datetime.toLocaleTimeString(locale, { timeStyle: "short" });
 
       if (isToday && window.APP_PHRASES) {
         dayStr = window.APP_PHRASES["today"];
       } else {
-        dayStr = timeRaw.toLocaleDateString(locale, { dateStyle: "long" });
+        dayStr = datetime.toLocaleDateString(locale, { dateStyle: "long" });
       }
 
-      $(this).text(`${dayStr}, ${timeStr}`);
+      $(this).attr("datetime", datetimeRaw).text(`${dayStr}, ${timeStr}`);
     }
   });
 };

diff --git a/app/templates/partials/jobs/notifications_header.html b/app/templates/partials/jobs/notifications_header.html
@@ -24,7 +24,7 @@
         {% else %}
           <a href="{{ download_link }}" download class="text-smaller leading-tight font-bold">{{ _('Download this report') }}</a>
           <div class="mt-2 text-small leading-tight font-normal">
-            {{ _("Available until") }} <span id="time-left" class="local-datetime-short-year">{{ available_until_date }}</span>
+            {{ _("Available until") }} <time id="time-left" class="local-datetime-short-year">{{ available_until_date }}</time>
           </div>
         {% endif %}
       </div>

diff --git a/app/templates/partials/jobs/status.html b/app/templates/partials/jobs/status.html
@@ -12,7 +12,7 @@
         </div>
         <div class="pb-4">
           {{ _('Started:') }}
-          <span class="local-datetime-short">{{ job.created_at }}</span>
+          <time class="local-datetime-short">{{ job.created_at }}</time>
         </div>
         <div class="pb-4">
           {% if job.api_key %}

diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
@@ -99,7 +99,7 @@ <h3 class="api-notifications-item-recipient">
                 ] %}
                   {% if notification[key] %}
                     <dt>{{ key }}:</dt>
-                    <dd class="api-notifications-item-data-item local-datetime-full">{{ notification[key] }}</dd>
+                    <dd class="api-notifications-item-data-item"><time class="local-datetime-full">{{ notification[key] }}</time></dd>
                   {% endif %}
                 {% endfor %}
                 {% if notification.status not in ('pending-virus-check', 'virus-scan-failed') %}

diff --git a/app/templates/views/api/keys.html b/app/templates/views/api/keys.html
@@ -64,19 +64,19 @@ <h2 class="heading-small">
             {% endif %}
           </div>
             <div class="hint">
-              {{ _('Created:') }} <span class="local-datetime-full">{{ item.created_at }}</span>
+              {{ _('Created:') }} <time class="local-datetime-full">{{ item.created_at }}</time>
             </div>
             <div class="hint">
-              {{ _('Expires:') }} <span class="local-datetime-full">{{ item.expiry_date }}</span>
+              {{ _('Expires:') }} <time class="local-datetime-full">{{ item.expiry_date }}</time>
             </div>
             <div class="hint">
-              {{ _('Last used:') }} <span class="local-datetime-full">{{ item.last_send }}</span>
+              {{ _('Last used:') }} <time class="local-datetime-full">{{ item.last_send }}</time>
             </div>
         </div>
       {% endcall %}
       {% if item.expiry_date %}
         {% call field(align='right') %}
-          <span class='hint'>{{ _('Revoked') }} <span class="local-datetime-short">{{ item.expiry_date }}</span></span>
+          <span class='hint'>{{ _('Revoked') }} <time class="local-datetime-short">{{ item.expiry_date }}</time></span>
         {% endcall %}
       {% else %}
         {% call field(align='right', status='error') %}

diff --git a/app/templates/views/dashboard/_jobs.html b/app/templates/views/dashboard/_jobs.html
@@ -22,9 +22,9 @@
         <a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
         <span class="file-list-hint">
           {{ _('Sent') }}
-            <span class="local-datetime-short">
+            <time class="local-datetime-short">
               {{item.scheduled_for if item.scheduled_for else item.created_at}}
-            </span>
+            </time>
         </span>
       </div>
     {% endcall %}

diff --git a/app/templates/views/dashboard/_upcoming.html b/app/templates/views/dashboard/_upcoming.html
@@ -20,7 +20,7 @@
           <div class="file-list">
             <a class="file-list-filename" href="{{ url_for('.view_job', service_id=current_service.id, job_id=item.id) }}">{{ item.original_file_name }}</a>
             <span class="file-list-hint">
-              {{ _("Starting") }} <span class="local-datetime-short">{{ item.scheduled_for }}</span>
+              {{ _("Starting") }} <time class="local-datetime-short">{{ item.scheduled_for }}</time>
             </span>
           </div>
         {% endcall %}

diff --git a/app/templates/views/jobs/job.html b/app/templates/views/jobs/job.html
@@ -35,7 +35,7 @@ <h1 class="heading-large">
           {{ _('Scheduled for') }}
         </div>
         <div class="w-full sm:w-3/4 border-solid border-b-1 border-gray-600-1 pt-4 pb-4">
-          <span class="local-datetime-short">{{ job.scheduled_for }}</span>
+          <time class="local-datetime-short">{{ job.scheduled_for }}</time>
         </div>
         <div class="w-full sm:w-1/4 border-solid font-bold sm:font-normal sm:border-b-1 border-gray-600-1 pt-4 pb-4">
           {% if job.api_key %}
@@ -82,7 +82,7 @@ <h1 class="heading-large">
       {% else %}
 
       {{ empty_list(
-          _("GC Notify disposed of the information in this report on <span class='local-datetime-short'>{}</span>").format(job.updated_at), 
+          _("GC Notify disposed of the information in this report on <time class='local-datetime-short'>{}</time>").format(job.updated_at), 
           _('After {} days, we keep only non-identifying statistics.').format(svc_retention_days), 
           'emptyBirdHole'
         ) 

diff --git a/app/templates/views/login_events.html b/app/templates/views/login_events.html
@@ -17,7 +17,7 @@ <h1 class="heading-large">{{ _('Sign-in history') }}</h1>
           <tr>
             <td>
               <strong style="font-weight:bold">
-                <span class="relative-time-past">{{ event.created_at }}</span>
+                <time class="relative-time-past">{{ event.created_at }}</time>
               </strong>
             </td>
             <td class="format-ua">

diff --git a/app/templates/views/notifications/invalid_precompiled_letter.html b/app/templates/views/notifications/invalid_precompiled_letter.html
@@ -9,7 +9,7 @@
     <h1 class="heading-large">Letter</h1>
 
     <p>
-      Provided as PDF on <span class="local-datetime-short">{{ created_at }}</span>
+      Provided as PDF on <time class="local-datetime-short">{{ created_at }}</time>
     </p>
     <p class="notification-status-cancelled">
       Validation failed – this isn’t a PDF file that Notification can read

diff --git a/app/templates/views/notifications/notification.html b/app/templates/views/notifications/notification.html
@@ -44,14 +44,14 @@
         {% elif created_by %}
           {{ _('by') }} {{ created_by.name }}
         {% endif %}
-        {{ _('on') }} <span class="local-datetime-short">{{ created_at }}</span>
+        {{ _('on') }} <time class="local-datetime-short">{{ created_at }}</time>
       </p>
     </div>
 
     {% if template.template_type == 'letter' %}
       {% if notification_status in ('permanent-failure', 'cancelled') %}
         <p class="notification-status-cancelled">
-          Cancelled <span class="local-datetime-short">{{ updated_at }}</span>
+          Cancelled <time class="local-datetime-short">{{ updated_at }}</time>
         </p>
       {% elif notification_status == 'validation-failed' %}
         <p class="notification-status-cancelled">

diff --git a/app/templates/views/platform-admin/complaints.html b/app/templates/views/platform-admin/complaints.html
@@ -29,7 +29,7 @@ <h1 class="heading-large">
 
       {{ text_field(item.complaint_type) }}
 
-      <span class="local-datetime-short">{{ text_field(item.complaint_date if item.complaint_date else None) }}</span>
+      <time class="local-datetime-short">{{ text_field(item.complaint_date if item.complaint_date else None) }}</time>
 
   {% endcall %}
 

diff --git a/app/templates/views/providers/provider.html b/app/templates/views/providers/provider.html
@@ -29,7 +29,7 @@
         {{ text_field(item.version) }}
 
         {% if item.updated_at %}
-          <span class="local-datetime-short">{{ text_field(item.updated_at) }}</span>
+          <time class="local-datetime-short">{{ text_field(item.updated_at) }}</time>
         {% else %}
             {{ text_field('None') }}
         {% endif %}

diff --git a/app/templates/views/providers/providers.html b/app/templates/views/providers/providers.html
@@ -30,7 +30,7 @@ <h2 class="heading-medium">SMS</h2>
       {{ text_field(item.active) }}
 
       {% if item.updated_at %}
-        <span class="local-datetime-short">{{ text_field(item.updated_at) }}</span>
+        <time class="local-datetime-short">{{ text_field(item.updated_at) }}</time>
       {% else %}
           {{ text_field('None') }}
       {% endif %}
@@ -59,7 +59,7 @@ <h2 class="heading-medium">Email</h2>
       {{ text_field(item.active) }}
 
       {% if item.updated_at %}
-        <span class="local-datetime-short">{{ text_field(item.updated_at) }}</span>
+        <time class="local-datetime-short">{{ text_field(item.updated_at) }}</time>
       {% else %}
           {{ text_field('None') }}
       {% endif %}
@@ -88,7 +88,7 @@ <h1 class="heading-large">International SMS Providers</h1>
       {{ text_field(item.active) }}
 
       {% if item.updated_at %}
-        <span class="local-datetime-short">{{ text_field(item.updated_at) }}</span>
+        <time class="local-datetime-short">{{ text_field(item.updated_at) }}</time>
       {% else %}
           {{ text_field('None') }}
       {% endif %}

diff --git a/app/templates/views/templates/_template.html b/app/templates/views/templates/_template.html
@@ -3,7 +3,7 @@
 <div>
   {% if template._template.archived %}
     <p class="hint">
-      {{ _('This template was deleted') }} <span class="relative-time-past">{{ template._template.updated_at }}</span>.
+      {{ _('This template was deleted') }} <time class="relative-time-past">{{ template._template.updated_at }}</time>.
     </p>
   {% elif not current_user.has_permissions('send_messages', 'manage_api_keys', 'manage_templates', 'manage_service') or not user_has_template_permission %}
     <p class="mt-4 block {% if template.template_type != 'sms' %}mb-12{% endif %}">

diff --git a/app/templates/views/templates/_template_history.html b/app/templates/views/templates/_template_history.html
@@ -7,10 +7,10 @@ <h2 class="message-name">{{ template.name }}</h2>
       {{ _("Version {}").format(template.get_raw('version', 1)) }}{{ _(": ")}}
     {% endif %}
     {% if template.get_raw('version', 1) > 1 %}
-      {{ _('Edit made') }} {% if template.get_raw('updated_at', None) %}<span class="local-datetime-full">{{ template.get_raw('updated_at') }}</span>{% endif %}
+      {{ _('Edit made') }} {% if template.get_raw('updated_at', None) %}<time class="local-datetime-full">{{ template.get_raw('updated_at') }}</time>{% endif %}
     {% else %}
       {{ _('Created') }}
-      {% if template.get_raw('created_at', None) %}<span class="local-datetime-full">{{ template.get_raw('created_at') }}</span>{% endif %}
+      {% if template.get_raw('created_at', None) %}<time class="local-datetime-full">{{ template.get_raw('created_at') }}</time>{% endif %}
     {% endif %}
     {{ _('by') }} {{ template.get_raw('created_by').name }}
   </p>

diff --git a/app/translations/csv/fr.csv b/app/translations/csv/fr.csv
@@ -1794,7 +1794,7 @@
 "Started:","Début&nbsp;:"
 "Spreadsheet:","Feuille de calcul&nbsp;:"
 "API request name:","Nom de la requête API&nbsp;:"
-"GC Notify disposed of the information in this report on <span class='local-datetime-short'>{}</span>","Notification GC a supprimé les renseignements de ce rapport le <span class='local-datetime-short'>{}</span>"
+"GC Notify disposed of the information in this report on <time class='local-datetime-short'>{}</time>","Notification GC a supprimé les renseignements de ce rapport le <time class='local-datetime-short'>{}</time>"
 "After {} days, we keep only non-identifying statistics.","Après {} jours, nous ne conservons que des statistiques anonymes qui ne permettent pas d’identifier les destinataires."
 "{} is not on our list of government domains. If it’s a government email address, <a href='{}'>{}</a>.","{} ne figure pas sur notre liste de domaines gouvernementaux. S’il s’agit d’une adresse courriel gouvernementale, <a href='{}'>{}</a>."
 "System status","État du système"

diff --git a/tests/app/main/views/test_jobs.py b/tests/app/main/views/test_jobs.py
@@ -202,7 +202,7 @@ def test_should_show_page_for_one_job(
         status=status_argument,
     )
     assert csv_link.text == "Download this report"
-    assert page.find("span", {"id": "time-left"}).text.split(" ")[0] == "2016-01-09"
+    assert page.find("time", {"id": "time-left"}).text.split(" ")[0] == "2016-01-09"
 
     assert normalize_spaces(page.select_one("tbody tr").text) == normalize_spaces(
         "6502532222 " "template content " "No " "Delivered 11:10:00.061258"
@@ -231,7 +231,7 @@ def test_should_show_page_for_one_job_with_flexible_data_retention(
     mock_get_service_data_retention.side_effect = [[{"days_of_retention": 10, "notification_type": "sms"}]]
     page = client_request.get("main.view_job", service_id=SERVICE_ONE_ID, job_id=fake_uuid, status="delivered")
 
-    assert page.find("span", {"id": "time-left"}).text.split(" ")[0] == "2016-01-12"
+    assert page.find("time", {"id": "time-left"}).text.split(" ")[0] == "2016-01-12"
     assert "Cancel sending these letters" not in page