[PER-10642] Create edtf date modal component by aasandei-vsp · Pull Request #1052 · PermanentOrg/web-app

aasandei-vsp · 2026-06-09T12:19:13Z

!!! This functionality is hidden under a flag: `edtf-date`. We need to make sure the flag is on only for testing, but not in production.

Manual test cases — EDTF edit modal

Setup (run once before the tests):

Log in or create a new account.
Upload a file.
Click the file.
EXPECTED: The sidebar appears with a Date section.

STEPS TO TEST:

Single date with qualifiers:

Click the Date section, then click "More options" to open the edit modal.
EXPECTED: The modal opens with a Start date card.
Toggle BOTH Approximate and Uncertain in the Start date card.
Enter a date (e.g. April 12, 1985) and a time (e.g. 10:30 AM).
EXPECTED: The EDTF preview at the bottom of the modal reads 1985-04-12T10:30:00%.
Click Save.
EXPECTED: The sidebar shows "April 12, 1985 • 10:30:00 AM" with "Approximate, Uncertain:" in the header.

Single date with unspecified digits:

Open the edit modal.
In the Start date card, type only 198 in the year input, 05 in the month, and leave the day empty.
EXPECTED: The EDTF preview reads 198X-05.
Click Save.
EXPECTED: The sidebar shows "May 198X".

Open interval:

Open the edit modal.
Toggle "Use a date range" at the bottom.
EXPECTED: A second card titled "End date" appears.
Leave the Start card empty and enter June 15, 1990 in the End card.
EXPECTED: The EDTF preview reads ../1990-06-15.
Click Save.
EXPECTED: The sidebar shows two rows with NO From / To labels:
Sometime before
June 15, 1990
Reopen the modal, clear the End card, then enter April 12, 1985 in the Start card and leave the End card empty.
EXPECTED: The EDTF preview reads 1985-04-12/...
Click Save.
EXPECTED: The sidebar shows two rows with NO From / To labels:
Sometime after
April 12, 1985

Unknown interval:

Open the edit modal and turn on "Use a date range".
Toggle Unknown in the Start card and enter February 4, 1990 in the End card.
EXPECTED: The EDTF preview reads /1990-02-04.
Click Save.
EXPECTED: The sidebar shows:
From: Unknown
To: February 04, 1990
EXPECTED: NO qualifier chip appears in the sidebar header.
Reopen the modal, clear the Start card, enter April 12, 1985 in the Start card, then toggle Unknown in the End card.
EXPECTED: The EDTF preview reads 1985-04-12/.
Click Save.
EXPECTED: The sidebar shows:
From: April 12, 1985
To: Unknown

Cancel:

Save any date for a file (e.g. April 12, 1985).
EXPECTED: The sidebar shows "April 12, 1985".
Click the Date section in the sidebar to reopen the modal.
Change the date to June 15, 1990.
Click Cancel.
EXPECTED: The modal closes and the sidebar still shows "April 12, 1985". No changes are persisted.

Start date greater than end date:

Open the edit modal and turn on "Use a date range".
Enter June 15, 1990 in the Start card.
Enter April 12, 1985 in the End card.
EXPECTED: The footer shows an error message indicating the range is invalid ("The date range is not valid. Please make sure the start date is before the end date.").
EXPECTED: The Save button is disabled.

Persistence with refresh:

Open the edit modal and turn on "Use a date range".
In the Start card, toggle Approximate and enter April 12, 1985.
In the End card, toggle Uncertain and enter June 15, 1990.
Click Save.
EXPECTED: The sidebar shows:
From: April 12, 1985
To: June 15, 1990
EXPECTED: The header reads "Approximate, Uncertain:".
Refresh the browser page.
Reselect the file.
EXPECTED: The sidebar still shows the same dates and the same "Approximate, Uncertain:" header.
Click the Date section in the sidebar.
EXPECTED: The edit modal reopens with both cards populated, Approximate toggled in the Start card, and Uncertain toggled in the End card.

codecov · 2026-06-09T12:21:14Z

Codecov Report

❌ Patch coverage is 95.21277% with 9 lines in your changes missing coverage. Please review.
✅ Project coverage is 51.53%. Comparing base (c451946) to head (b6b99b9).

Files with missing lines	Patch %	Lines
...-date-time-modal/edit-date-time-modal.component.ts	92.30%	1 Missing and 6 partials ⚠️
...c/app/shared/services/edtf-service/edtf.service.ts	93.54%	0 Missing and 2 partials ⚠️

Additional details and impacted files

@@                                Coverage Diff                                @@
##           PER-10641-create-edtf-date-dropdpwn-component    #1052      +/-   ##
=================================================================================
+ Coverage                                          50.96%   51.53%   +0.57%     
=================================================================================
  Files                                                352      354       +2     
  Lines                                              11905    12055     +150     
  Branches                                            2122     2166      +44     
=================================================================================
+ Hits                                                6067     6213     +146     
- Misses                                              5613     5618       +5     
+ Partials                                             225      224       -1

☔ 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 · 2026-06-10T19:29:08Z

Same note, but base this on #1047 presumably? That will also make it clear to me / whoever is reviewing what the right order is for review and merge. Thank you!

aasandei-vsp · 2026-06-12T14:36:43Z

Same note, but base this on #1047 presumably? That will also make it clear to me / whoever is reviewing what the right order is for review and merge. Thank you!

@cecilia-donnelly I have managed to do the rebase for this branch as well. Hope this helps!

Copilot

Pull request overview

This PR introduces an EDTF “Edit date and time” modal flow for the file sidebar, expanding EDTF support to handle open/unknown interval endpoints and independent qualifiers on start vs end dates.

Changes:

Extended EdtfService interval parsing/serialization to support empty-slot unknown endpoints (/1990-..., .../) and per-side qualifiers via endQualifiers.
Updated the sidebar date picker display to correctly render open intervals (“Sometime before/after”) and to union qualifiers across both sides.
Added a new EditDateTimeModalComponent + service, and wired the sidebar “More options” action to open it.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/app/shared/services/edtf-service/edtf.service.ts	Adds `endQualifiers` and updates EDTF interval parsing/serialization for unknown/open endpoints.
src/app/shared/services/edtf-service/edtf.service.spec.ts	Updates/extends unit tests for per-side qualifiers and empty-slot intervals.
src/app/file-browser/components/sidebar/sidebar.component.ts	Wires sidebar “More options” to the new edit modal and saves results to `displayTime`.
src/app/file-browser/components/sidebar/sidebar.component.spec.ts	Adds tests for opening the modal and saving/dismissing results.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts	Updates qualifier handling and renders interval rows for open/unknown ranges.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts	Adds tests for new interval display + per-side qualifier behaviors.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html	Refactors template to render dynamic date rows via `rows()` (supports open/unknown layouts).
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.ts	New service wrapper around `DialogCdkService` to open the edit modal.
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.service.spec.ts	Unit tests validating modal open configuration and return type.
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts	New modal component implementing EDTF editing, range support, and qualifiers per side.
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.spec.ts	Unit tests for modal initialization, qualifier toggling, EDTF preview validity, and save/cancel.
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.scss	New styling for the edit modal.
src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.html	New modal UI for start/end date cards, qualifiers, EDTF preview, and actions.

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

slifty

The robot found a change worth making (see above)! I offer a suggestion to DRY but please ignore if you disagree.

slifty

code-wise looks good -- some little DRY / spread operation questions, but I defer to your preferences

In the edtf date dropdown and modal, when year, month or day have undefined digits, replace them with X values for display and leave them as empty in the inputs. PER-10641

In order to be able to input an edtf date, the modal includes components that will help with qualifiers and intervals. Issue: PER-10642

Each date in an interval now has its own Approximate / Uncertain / Unknown toggles. The sidebar reads "Sometime before/after" for open intervals and "Unknown" for unknown sides. Issue: PER-10642

Extract the detault qualifiers into a shared constant. Add a display update in the sidebar when the modal saves a new date. Issue: PER-10642

github-actions · 2026-06-18T08:52:57Z

QA Instructions

QA Testing Instructions

Summary

This PR introduces the edtf-date feature hidden beneath a feature flag. It includes a modal component for editing date and time in the EDTF format, updates the sidebar to reflect the selected dates and qualifiers (e.g., Approximate, Uncertain, Unknown), and adds support for date ranges and unspecified digits in years, months, and days.

When enabled (under the edtf-date feature flag), the following changes should be tested:

New interactions via the "Edit Date and Time" modal.
Correct behavior for single dates with qualifiers, intervals (open and unknown), and unspecified digits.
Proper error handling for invalid inputs (e.g., start date greater than end date).
Persistence of saved modifications after page refresh.
Verification that the feature flag properly controls visibility to the users.

Test Environment Setup

Ensure the edtf-date feature flag is enabled.
Log in to the app or create a new account.
Upload a file.
Open the file to access the sidebar with the Date section.

Test Scenarios

1. Single Date with Qualifiers

Open the edit modal via the Date section in the sidebar.
Toggle the Approximate and Uncertain options under the Start Date card.
Enter April 12, 1985 as the date and 10:30 AM as the time.
Expected: The EDTF preview should display: 1985-04-12T10:30:00%.
Save the changes.
Expected: The sidebar updates to show the values:
- April 12, 1985 • 10:30:00 AM
- Header with Approximate, Uncertain:.

2. Single Date with Unspecified Digits

Open the edit modal and enter 198 (year), 05 (month), leaving day empty.
Expected: The EDTF preview should display: 198X-05.
Save the changes.
Expected: The sidebar shows May 198X.

3. Open Interval

Open the edit modal and enable Use a date range.
Leave the Start Date card empty and enter June 15, 1990 in the End Date card.
Expected: The EDTF preview should display: ../1990-06-15.
Save the changes.
Expected: The sidebar shows:
- Sometime before
- June 15, 1990.
Reopen the modal, clear the End date card, and set the Start Date to April 12, 1985, leaving End Date empty.
Expected: The EDTF preview should display: 1985-04-12/...
Save and ensure the sidebar shows:
- Sometime after
- April 12, 1985.

4. Unknown Interval

In the edit modal, enable Use a date range.
Toggle Unknown in the Start card and enter February 4, 1990 in the End card.
Expected: The EDTF preview should display: /1990-02-04.
Save the changes.
Expected: The sidebar shows:
- From: Unknown
- To: February 4, 1990
Ensure NO qualifier chip appears in the header.

5. Cancel Changes

Set a date (e.g., April 12, 1985), save it, and observe it on the sidebar.
Open the edit modal again and change the date to June 15, 1990.
Click Cancel.
Expected: The modal closes and the sidebar still displays the original date (April 12, 1985). The new changes are not saved.

6. Start Date Greater than End Date

Enable Use a date range in the modal.
Set Start Date to June 15, 1990 and End Date to April 12, 1985.
Expected:
- The footer displays an error: "The date range is not valid. Please make sure the start date is before the end date."
- The Save button is disabled.

7. Persistence after Refresh

Enable Use a date range and set the following in the modal:
- For the Start card, toggle Approximate and select April 12, 1985.
- For the End card, toggle Uncertain and select June 15, 1990.
Save the changes.
Expected: The sidebar shows:
- From: April 12, 1985
- To: June 15, 1990
- Header reads: Approximate, Uncertain:.
Refresh the page and select the file again.
Expected: The sidebar displays the same saved data and header.
Reopen the modal from the Date section in the sidebar.
Expected: The modal displays the previously saved data, with the correct qualifiers toggled.

Regression Risks

Changes may affect the following components:
- SidebarDatePickerComponent: Verify existing date components render correctly.
- EdtfService: Ensure EDTF parsing works consistently and doesn't introduce regressions.
- Existing date-related forms: Validate that these are unaffected.
Ensure existing date formats continue to display correctly, and validation errors behave as expected.

Things to Watch For

Test UI responsiveness and alignment in the edit-date-time-modal.component.html (e.g., spacing between elements, proper rendering of toggles and dropdowns, etc.).
Ensure clarity and correctness in error messages.
Verify handling of all invalid inputs, including edge cases like unexpected characters or partial dates.
Cross-browser/viewport compatibility for the modal and dropdown inputs.
After the edtf-date flag is disabled, confirm no visible UI remains for this functionality, and existing date selectors work as they did before.

Additional Notes

Refer to the files modified in the PR for any specifics about variable names (qualifiers, date, month, etc.).
If any tests are failing, consult edtf.service.spec.ts and sidebar-date-picker.component.spec.ts for expected conditions.

Generated by QA Instructions Action

omnignorant

OK, this is working great with one exception: the test plan implies that approximate and uncertain toggles can be toggled on while the time is not blank. e.g. 1985-04-12T10:30:00% however, when I attempt to do this there's the error "The date entered is not valid. Please check the values and try again." with the save button disabled.

I don't think that has to be a blocker to merging this, but we should correct it in future improvements.

Also, and I am not sure if this is out of scope, but there is no timezone support in this PR.

aasandei-vsp · 2026-06-19T13:23:11Z

OK, this is working great with one exception: the test plan implies that approximate and uncertain toggles can be toggled on while the time is not blank. e.g. 1985-04-12T10:30:00% however, when I attempt to do this there's the error "The date entered is not valid. Please check the values and try again." with the save button disabled.

I don't think that has to be a blocker to merging this, but we should correct it in future improvements.

Also, and I am not sure if this is out of scope, but there is no timezone support in this PR.

Sorry, the test cases are wrong on this one. The behavior defined by you is correct.
It's out of scope, but we have a story to address this: https://permanent.atlassian.net/browse/PER-10623

aasandei-vsp self-assigned this Jun 9, 2026

aasandei-vsp requested review from cecilia-donnelly and slifty June 9, 2026 12:19

aasandei-vsp force-pushed the PER-10642-create-edtf-date-modal-component branch from 2a3db6f to 215f0c0 Compare June 12, 2026 14:33

aasandei-vsp changed the base branch from main to PER-10641-create-edtf-date-dropdpwn-component June 12, 2026 14:35

cecilia-donnelly removed their request for review June 12, 2026 15:08

slifty requested a review from Copilot June 13, 2026 13:58

Copilot started reviewing on behalf of slifty June 13, 2026 13:59 View session

Copilot AI reviewed Jun 13, 2026

View reviewed changes

Comment thread src/app/file-browser/components/sidebar/sidebar.component.ts

slifty requested changes Jun 13, 2026

View reviewed changes

Comment thread src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts Outdated

aasandei-vsp force-pushed the PER-10641-create-edtf-date-dropdpwn-component branch from 9b1c23d to c99bc7c Compare June 16, 2026 08:36

aasandei-vsp force-pushed the PER-10642-create-edtf-date-modal-component branch from 215f0c0 to a71e024 Compare June 16, 2026 13:40

aasandei-vsp requested a review from slifty June 16, 2026 13:43

slifty approved these changes Jun 16, 2026

View reviewed changes

Comment thread src/app/shared/services/edtf-service/edtf.service.ts Outdated

Comment thread src/app/file-browser/components/edit-date-time-modal/edit-date-time-modal.component.ts

aasandei-vsp force-pushed the PER-10642-create-edtf-date-modal-component branch from a71e024 to 3876198 Compare June 17, 2026 12:02

aasandei-vsp force-pushed the PER-10641-create-edtf-date-dropdpwn-component branch from 60d74a5 to c451946 Compare June 18, 2026 08:43

aasandei-vsp added 4 commits June 18, 2026 11:46

Add support for unspecified digits

2e54260

In the edtf date dropdown and modal, when year, month or day have undefined digits, replace them with X values for display and leave them as empty in the inputs. PER-10641

Add the edit date time modal and service for opening it

faeec56

In order to be able to input an edtf date, the modal includes components that will help with qualifiers and intervals. Issue: PER-10642

Add per-side qualifiers to the EDTF date editor

da984ea

Each date in an interval now has its own Approximate / Uncertain / Unknown toggles. The sidebar reads "Sometime before/after" for open intervals and "Unknown" for unknown sides. Issue: PER-10642

Use a default state for qualifiers and update sidebar with modal date

b6b99b9

Extract the detault qualifiers into a shared constant. Add a display update in the sidebar when the modal saves a new date. Issue: PER-10642

aasandei-vsp force-pushed the PER-10642-create-edtf-date-modal-component branch from 3876198 to b6b99b9 Compare June 18, 2026 08:50

aasandei-vsp requested a review from omnignorant June 18, 2026 08:52

aasandei-vsp added the QA This issue is ready for QA / user acceptance testing label Jun 18, 2026

omnignorant approved these changes Jun 19, 2026

View reviewed changes

Base automatically changed from PER-10641-create-edtf-date-dropdpwn-component to main June 19, 2026 13:20

aasandei-vsp merged commit 2d0f4af into main Jun 19, 2026
22 checks passed

aasandei-vsp deleted the PER-10642-create-edtf-date-modal-component branch June 19, 2026 13:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[PER-10642] Create edtf date modal component#1052

[PER-10642] Create edtf date modal component#1052
aasandei-vsp merged 4 commits into
mainfrom
PER-10642-create-edtf-date-modal-component

aasandei-vsp commented Jun 9, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jun 9, 2026 •

edited

Loading

Uh oh!

cecilia-donnelly commented Jun 10, 2026

Uh oh!

aasandei-vsp commented Jun 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

slifty left a comment •

edited

Loading

Uh oh!

Uh oh!

slifty left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 18, 2026

Uh oh!

omnignorant left a comment

Uh oh!

aasandei-vsp commented Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

aasandei-vsp commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

!!! This functionality is hidden under a flag: edtf-date. We need to make sure the flag is on only for testing, but not in production.

Manual test cases — EDTF edit modal

Uh oh!

codecov Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

cecilia-donnelly commented Jun 10, 2026

Uh oh!

aasandei-vsp commented Jun 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

slifty left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

slifty left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jun 18, 2026

QA Instructions

QA Testing Instructions

Summary

Test Environment Setup

Test Scenarios

1. Single Date with Qualifiers

2. Single Date with Unspecified Digits

3. Open Interval

4. Unknown Interval

5. Cancel Changes

6. Start Date Greater than End Date

7. Persistence after Refresh

Regression Risks

Things to Watch For

Additional Notes

Uh oh!

omnignorant left a comment

Choose a reason for hiding this comment

Uh oh!

aasandei-vsp commented Jun 19, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

aasandei-vsp commented Jun 9, 2026 •

edited

Loading

!!! This functionality is hidden under a flag: `edtf-date`. We need to make sure the flag is on only for testing, but not in production.

codecov Bot commented Jun 9, 2026 •

edited

Loading

slifty left a comment •

edited

Loading

slifty left a comment •

edited

Loading