find occurence of time, improve time formatting js

[amazingphilippe]

Summary | Résumé

Fixes cds-snc/notification-planning#571

Time strings are all <span> elements. They could be <time> elements.

Docs for <time>

We already transform raw datetime strings on the client side with javascript.

My approach is

• Keep the client-side date formatting
• In templates, we should use <time> wherever this client side formatting runs.
• To avoid repetition in templates, we can set <time>'s datetime attribute with our client side script. It almost looks like a custom component.

Test instructions | Instructions pour tester la modification

1. Find the 3 different types of time strings
2. On a revoked API key item
3. Check the created and expiry date
4. Check the "revoked {date}" on the right
5. On a job report
6. Check the "available until {date}"

[github-actions]

🧪 Review environment

https://5gjxa4uiegd3xwsq7zp3rwg5nu0kwnzh.lambda-url.ca-central-1.on.aws/

[andrewleith]

It looks like you may have missed the datetimes with the .relative-time-past class:

• https://github.com/cds-snc/notification-admin/blob/a11y/time/app/templates/views/login_events.html#L20
• https://github.com/cds-snc/notification-admin/blob/a11y/time/app/templates/views/templates/_template.html#L6

There is also a utility function that seems to be used in the dashboard and on the login landing page that creates a span still:

• https://github.com/cds-snc/notification-admin/blob/a11y/time/app/__init__.py#L496

Other than those, it looks like the datetime display is still behaving the same way it did before.

[andrewleith]

LGTM - works as expected in the PR review environment.