Skip to content

PER-10637: Show displayTime in file list#1067

Merged
cecilia-donnelly merged 2 commits into
mainfrom
per-10637-file-list-datetime
Jun 24, 2026
Merged

PER-10637: Show displayTime in file list#1067
cecilia-donnelly merged 2 commits into
mainfrom
per-10637-file-list-datetime

Conversation

@cecilia-donnelly

@cecilia-donnelly cecilia-donnelly commented Jun 18, 2026

Copy link
Copy Markdown
Member

Change the date pipe to optionally take displayTime and fall back to displayDT. This depends on https://github.com/PermanentOrg/back-end/pull/889.

@codecov

codecov Bot commented Jun 18, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 91.66667% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 51.66%. Comparing base (f67427b) to head (a3a5de2).
⚠️ Report is 3 commits behind head on main.

Files with missing lines Patch % Lines
...c/app/shared/services/edtf-service/edtf.service.ts 83.33% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1067      +/-   ##
==========================================
+ Coverage   51.64%   51.66%   +0.02%     
==========================================
  Files         354      354              
  Lines       12055    12067      +12     
  Branches     2166     2172       +6     
==========================================
+ Hits         6226     6235       +9     
- Misses       5604     5605       +1     
- Partials      225      227       +2     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@cecilia-donnelly cecilia-donnelly force-pushed the per-10637-file-list-datetime branch 2 times, most recently from d81d1df to 5e5d8d8 Compare June 18, 2026 18:28
@cecilia-donnelly cecilia-donnelly marked this pull request as ready for review June 18, 2026 18:41
@aasandei-vsp

aasandei-vsp commented Jun 19, 2026

Copy link
Copy Markdown
Contributor
image image

@aasandei-vsp aasandei-vsp left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I cannot approve this PR, because I have found some issues. Could you please have a look and check if I am on the right track with these, please?
There is a bug on FE, which I fixed(see latest commit). If a folder is added, the displayTime will be an interval and the pipe does not know how to show it. What I did was to extract the start date from the interval and then feed it to the pipe, so it shows correctly. DisplayDT is also like the start date for folders, so this approach seems correct to me. See the bug in the app in the image bellow:

Image

The second issue I found is related to sorting by date, which I cannot fix on FE, as we get the sorting from /navigateLean. The problem is that the sorting is still happening by displayDT and not by displayTime. This seems a difficult one to solve, as displayDT and displayTime do not seem to be in sync and we are also not sure which one we'll be showing in the list. See the image bellow:

Image

@cecilia-donnelly

Copy link
Copy Markdown
Member Author

Thanks @aasandei-vsp, looks like a great implementation for ranges! I have a back-end PR in progress for sorting: https://github.com/PermanentOrg/back-end/pull/892.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates file-list date rendering to prefer the new backend displayTime field (including EDTF intervals) while improving prDate handling for date-only strings.

Changes:

  • Add EdtfService.getEdtfIntervalStartDate() and tests to extract an interval’s start for display.
  • Update PrDatePipe (and tests) to treat date-only strings (YYYY-MM-DD) as having no time portion.
  • Update file-list item rendering to use displayTime (or interval start) with fallback to displayDT, and add component tests.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file
File Description
src/app/shared/services/edtf-service/edtf.service.ts Adds helper to extract interval start date from an EDTF string.
src/app/shared/services/edtf-service/edtf.service.spec.ts Adds unit tests for the new EDTF interval-start helper.
src/app/shared/pipes/pr-date.pipe.ts Adds special-casing for date-only strings (no time output).
src/app/shared/pipes/pr-date.pipe.spec.ts Adds coverage for date-only inputs (with/without timezone, date vs time part).
src/app/file-browser/components/file-list-item/file-list-item.component.ts Uses EDTF helper to compute a startDisplayTime fallback value.
src/app/file-browser/components/file-list-item/file-list-item.component.spec.ts Adds tests for displayTime precedence and interval-start behavior.
src/app/file-browser/components/file-list-item/file-list-item.component.html Switches displayed date/time to use startDisplayTime instead of displayDT.
Comments suppressed due to low confidence (1)

src/app/file-browser/components/file-list-item/file-list-item.component.ts:264

  • startDisplayTime introduces a new display source (displayTime), but the date field used by the public-archive header is still derived from item.displayDT in ngOnInit(). This can make the public-archive date disagree with the date shown elsewhere for the same item, and date-only values (YYYY-MM-DD) can also be shifted by the viewer’s local timezone when passed through Date/toLocaleString.

Consider deriving date from startDisplayTime, and formatting date-only strings in a timezone-stable way (UTC).

	get startDisplayTime(): string {
		return (
			this.edtfService.getEdtfIntervalStartDate(this.item.displayTime) ||
			this.item.displayDT
		);
	}

	async ngOnInit() {
		this.recordThumbnailUrl = GetThumbnail(this.item);
		const date = new Date(this.item.displayDT);
		this.date = getFormattedDate(date);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +93 to 97
{{ startDisplayTime | prDate: item.TimezoneVO : 'date' }}
@if (item.dataStatus > 0) {
<span @ngIfFadeInAnimation>{{
item.displayDT | prDate: item.TimezoneVO : 'time'
startDisplayTime | prDate: item.TimezoneVO : 'time'
}}</span>
Comment on lines 118 to 121
@if (item.dataStatus > 0) {
<div class="date-bottom" @ngIfFadeInAnimation>
{{ item.displayDT | prDate: item.TimezoneVO : 'time' }}
{{ startDisplayTime | prDate: item.TimezoneVO : 'time' }}
</div>

@slifty slifty left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good -- copilot flagged an edge case that can result in an empty element that may create a visual effect; I defer to @cecilia-donnelly on whether we want to block on that, so I'm approving!

@cecilia-donnelly

Copy link
Copy Markdown
Member Author

@slifty when doing this I didn't test all the possible EDTF types because I expect we'll do a second round of formatting before lifting the feature flag and letting people add uncertain dates. Currently no one can create a date without a time until we release the full feature. I don't think this behaves particularly well for e.g. year-only dates, either. I saw this PR more as a bugfix for the current state (where the date is mysteriously different from one place to the next) and didn't intend it to treat all the ways we'll need to format EDTF dates. I will add a ticket specifically about making sure we're doing formatting well here to the epic, though, so we don't forget! Does that make sense?

@cecilia-donnelly

Copy link
Copy Markdown
Member Author

The promised ticket: https://permanent.atlassian.net/browse/PER-10655

@cecilia-donnelly cecilia-donnelly added the QA This issue is ready for QA / user acceptance testing label Jun 24, 2026
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown
Contributor

QA Instructions

QA Testing Instructions for PR: PER-10637


Summary

This PR modifies the prDate pipe to handle displayTime values in the file list component. Specifically, it adjusts the prDate pipe to format displayTime values (including EDTF intervals), falling back to displayDT when necessary. Additionally, it introduces the EdtfService to decompose EDTF intervals into start dates. Changes impact the file-list-item.component.ts, and related unit tests were added or updated.


Test Environment Setup

  1. Ensure that the backend PR https://github.com/PermanentOrg/back-end/pull/889 is merged, deployed, and available to test against.
  2. Use a valid database setup that contains file list data with variations of displayTime (simple date strings, EDTF intervals, open intervals) and displayDT.
  3. If timezones influence behavior, configure the application timezone settings accordingly.

Test Scenarios

  1. Display displayTime Showing Correct Date:

    • Load the file list page with an item having displayTime populated as a simple date, e.g., '2020-06-10', and a displayDT populated, e.g., '2023-01-01T00:00:00.000Z'.
    • Confirm that the displayed value on the file list shows '2020-06-10' in both the date-top and second-row elements.
    • Confirm that the time parts are empty.
  2. Fallback to displayDT When displayTime is Empty:

    • Load the file list page with an item where displayTime is empty/undefined but displayDT has a valid value, e.g., '2023-01-01T00:00:00.000Z'.
    • Confirm that the displayed values in the file list correctly reflect the displayDT value formatted into a date/time.
  3. EDTF Interval Parsing (Start Date Display):

    • Load the file list page with an item where displayTime contains an EDTF interval, e.g., '2020-06-10/2026-06-15'.
    • Confirm that only the start date (2020-06-10) is displayed, and the end date of the interval (2026-06-15) does not appear.
    • Ensure the fallback to displayDT does not occur when a valid start date is available.
  4. Fallback Behavior for Open Start Date in EDTF Interval:

    • Load the file list page with an item where displayTime contains an EDTF interval with an open start, e.g., '../2026-06-15', and a valid displayDT is provided.
    • Confirm that the displayed value correctly falls back to the formatted displayDT and that no invalid or empty display occurs.
  5. Handling Edge Cases with prDate Pipe:

    • Ensure prDate gracefully handles invalid, unsupported, or empty values:
      • Use displayTime values with unexpected formats (e.g., plain text).
      • Use null or empty string values for displayTime.
      • Ensure no "Invalid Date" or other erroneous text outputs occur on the UI.
  6. Regression Testing – Existing Behavior:

    • Verify saved display functionality with displayDT when displayTime isn't present to ensure there are no regressions in existing file list functionality.
    • Test with various time zones to ensure the prDate pipe correctly handles timezone adjustments as previously expected.
  7. Performance Verification:

    • Observe if loading file lists with the new EdtfService significantly impacts performance when rendering a large number of files.
    • Profile the operations to ensure the getEdtfIntervalStartDate function doesn't introduce excessive latency.

Regression Risks

  1. File List Component Rendering:

    • Since displayTime changes impact multiple locations in the file list UI (second-row, date-top, date-bottom), verify that rendering is correct across all cases.
  2. prDate Pipe Handling:

    • Confirm proper functionality for both displayDT and displayTime inputs across the application.
    • Test sorting and filtering functionality in the file list to ensure the modified prDate pipe doesn't negatively affect any dependent features.

Things to Watch For

  1. Improper Parsing of EDTF Intervals:

    • Confirm that the EdtfService.getEdtfIntervalStartDate() correctly handles all scenarios, especially intervals with empty start dates, malformed strings, and unusual EDTF formats.
  2. Unhandled Edge Cases with prDate:

    • Ensure prDate produces user-friendly outputs for unsupported or malformed displayTime values and does not introduce any UI errors.

These instructions should provide comprehensive coverage for testing this pull request.


Generated by QA Instructions Action

@cecilia-donnelly

Copy link
Copy Markdown
Member Author

My take on asking Claude to write a nontechnical list. It doesn't know that there's no way to clear date or set a range yet, so I removed several of the suggested tests:

Test Setup

Before running these tests, prepare the following items in your archive. You will need edit access to all of them.

Files to prepare:

Item What to set up
File A Upload any file. Do not edit the date at all — leave it as-is.
File C Upload any file. In the info panel, set the Date field to a specific date and time in the past (e.g., June 10, 2020 at 6:58 AM). Do not set an end date.

Folders to prepare:

Item What to set up
Folder A Create a folder. Do not edit the date.
Folder B Create a folder. In the info panel, set the Start date field to a date in the past (e.g., May 20, 1985) and set the End date field to a later date (e.g., June 15, 1990).
Folder C Create a folder. In the info panel, set only the Start date field (e.g., May 20, 1985). Leave the End date blank.

Tests

Test 1: File with no custom date shows the upload date

Item: File A (no custom date set)

Steps:

  1. Navigate to the folder containing File A.
  2. Look at the date shown for File A in the file list.

Expected result: The date shown is the date and time when the file was uploaded to the archive. It should include a time of day.


Test 3: File with a single date and time shows the date and time

Item: File C (custom date set with a specific time)

Steps:

  1. Navigate to the folder containing File C.
  2. Look at the date shown for File C in the file list.

Expected result: The date and time shown match what you entered in the info panel.


Test 7: Folder with no custom date shows the creation date

Item: Folder A (no custom date set)

Steps:

  1. Navigate to the location containing Folder A.
  2. Look at the date shown for Folder A in the file list.

Expected result: A date is shown for the folder (it should reflect when the folder was created or its default date). It should not be blank.


Test 8: The file list updates immediately after editing a date

Item: Any file or folder you have edit access to.

Steps:

  1. Click on the file or folder to select it and open the info panel.
  2. Edit the Date (or Start date) field and save a new date.
  3. Look at the file list without navigating away.

Expected result: The date shown in the file list row updates to match the new date you just entered.


Test 10: Date display is consistent in both list view and grid/thumbnail view

Item: File D (start date and end date both set)

Steps:

  1. Switch to list view and check the date shown for File D.
  2. Switch to grid view (thumbnail view) and check the date shown for File D.

Expected result: In both views, only the start date appears. It is the same date in both views.

@cecilia-donnelly

Copy link
Copy Markdown
Member Author

All of the above look correct to me and I also confirmed that the date is correct on first page load.

cecilia-donnelly and others added 2 commits June 24, 2026 12:32
Folder displayTime values are EDTF intervals (start/end), which the
prDate pipe cannot parse and rendered as "Invalid date". Decompose the
interval and display only the start date, falling back to displayDT when
there is no resolvable start.

Add EdtfService.getEdtfIntervalStartDate to extract the interval start
(returning non-interval values unchanged and an empty string for open
starts), and a startDisplayTime getter on the file list item that uses
it with the displayDT fallback.

Issue: PER-10637
@cecilia-donnelly cecilia-donnelly force-pushed the per-10637-file-list-datetime branch from e6c606e to a3a5de2 Compare June 24, 2026 17:32
@cecilia-donnelly

Copy link
Copy Markdown
Member Author

@omnignorant verbally approved this.

@cecilia-donnelly cecilia-donnelly dismissed aasandei-vsp’s stale review June 24, 2026 17:34

Removing this because @aasandei-vsp addressed some of her own feedback (thank you!) and the sorting was fixed in another PR (https://github.com/PermanentOrg/back-end/pull/892)

@cecilia-donnelly cecilia-donnelly merged commit 88fa6a3 into main Jun 24, 2026
11 checks passed
@cecilia-donnelly cecilia-donnelly deleted the per-10637-file-list-datetime branch June 24, 2026 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

QA This issue is ready for QA / user acceptance testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants