hudson-newey commented 9 months ago

Create Date/Time Component

Given we use so many Date/Times formats throughout the client, it can be ambiguous to a user if the date/time is localised to their timezone, and what timezone a date/time is captured in.

Changes

Created new baw-datetime component to show localised instants
Created new baw-zoned-datetime component to show non-localised events
Created new baw-duration component to show times & duration's in sexagesimal, ISO 8601, and humanized formats
Created new baw-time-since component to show what period of time has passed since a date/time (or just pass in a Luxon Duration)
Created admin page to test new date/time components
Created tests for all the above
Changed time mocking in src/app/components/harvest/pages/list/list.component.spec.ts to use the new withDefaultZone helper function (Settings.defaultZone) was not being unset propperly, leaking into other tests and causing them to fail
Added new assertTooltip test helper function that asserts the tooltip contents of an element
Added new withDefaultZone test helper function that mocks the test runners timezone / Settings.defaultZone
Enabled @typescript-eslint/prefer-as-const eslint rule to bring us more into line with the Angular recommended TS rules
Upgrade Luxon dependency from 4.3.3 -> 4.3.4
Upgrade CI workflows (GitHub Actions) to Node.js 18 (in-line with the reset of the client)

Problems

Implementation on live pages was not completed as part of this PR

Issues

Fixes: #2092 Closes: #1736

Visual Changes

Pages

New Date & Time examples admin page

Components

configuration for all visuals under the "Components" section

baw-datetime

Default dotted underline that comes from using our new .has-context CSS class
Notice: 2 hours have been added, because the DateTime object input is from Australia/Perth (UTC+08:00), and these tests were run in Australia/Brisbane (UTC+10:00)

baw-zoned-datetime (Implicit)

Uses the .has-context CSS class
Notice: The dashed underline instead of the dotted underline
Notice: The date/time emitted is the date/time in the original timezone (Australia/Perth) and the date/time has not been localised to the timezone where the tests were run in (Australia/Brisbane, UTC+10:00)

baw-zoned-datetime (Explicit)

Uses the .has-context CSS class
Notice: The dashed underline instead of the dotted underline
Notice: The original implicit dateTime is from Australia/Perth (UTC+08:00), and I have set the site timezone to Australia/Darwin (UTC+09:30. Therefore, the Australia/Perth time has had 01:30 hours added to it.

baw-duration

Uses the .has-context CSS class

baw-time-since

Uses the .has-context CSS class
Dotted underline (default provided by .has-context) using --baw-highlight colour

Final Checklist

[x] Assign reviewers if you have permission
[x] Assign labels if you have permission
[x] Link issues related to PR
[x] Ensure project linter is not producing any warnings (npm run lint)
[x] Ensure build is passing on all browsers (npm run test:all)
[x] Ensure CI build is passing
[ ] Ensure docker container is passing (docs)

hudson-newey commented 8 months ago

The tooltips for the baw-duration components should probably not use the ISO8601 format. Maybe inlcude sexagesimal as well as ISO8601? Or a humanized form? I'm not sure what's best, but although unambiguous, i think most users would find that tooltip does not add much context.

Mock-up of sexagesimal + ISO8601

Mock-up of humanized + ISO8601

I think I prefer sexagesimal + ISO8601

github-actions[bot] commented 7 months ago

Size Change: +9.67 kB (0%)

Total Size: 2.91 MB

Filename	Size	Change
`dist/workbench-client/browser/main.********.js`	1.07 MB	+4.64 kB (0%)
`dist/workbench-client/browser/styles.********.css`	32.3 kB	+16 B (0%)
`dist/workbench-client/server/main.js`	1.79 MB	+5.01 kB (0%)

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `dist/workbench-client/browser/assets/environment.json` | 555 B | | `dist/workbench-client/browser/chunk-7SGCG2G3.js` | 1.08 kB | | `dist/workbench-client/browser/index.html` | 4.1 kB | | `dist/workbench-client/browser/manifest.json` | 150 B | | `dist/workbench-client/browser/polyfills.********.js` | 12.2 kB | | `dist/workbench-client/server/776.js` | 4.2 kB |

_{compressed-size-action}

github-actions[bot] commented 7 months ago

Unit Test Results

        6 files         6 suites 6m 51s :stopwatch: 23 154 tests 22 530 :heavy_check_mark: 624 :zzz: 0 :x: 23 376 runs 22 752 :heavy_check_mark: 624 :zzz: 0 :x:

Results for commit 3eae1198.

QutEcoacoustics / workbench-client