[PER-10641] Create edtf date dropdown component

[aasandei-vsp]

!!! 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 — sidebar date dropdown

Setup (run once before the tests):

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

STEPS TO TEST:
FLAG ON:

Date and time:

1. Open the dropdown.

2. Enter April 12, 1985 in the date input.

3. In the time input, enter 02:30:00 and toggle the meridian to PM.

4. Click Save.
   EXPECTED: The sidebar shows "April 12, 1985 • 02:30:00 PM" with the browser timezone abbreviation appended (e.g. "EST").

5. Open the dropdown.

6. Click the date picker button and select 22 May 2025.

7. Click the time picker button and enter 10:22:33 and toggle the meridian to AM.

8. Click Save.
   EXPECTED: The sidebar shows "May 22, 2025 • 10:22:33 AM" with the browser timezone abbreviation appended (e.g. "EST").

Date with unspecified digits:

1. Open the dropdown.
2. Type 1988 in the year input, leave the month empty, and 15 in the day.
3. Click Save.
   EXPECTED: The sidebar shows "1988-XX-15".

Cancel:

1. With a date already saved (e.g. April 12, 1985), click the Date section to reopen the dropdown.
   EXPECTED: The dropdown reopens with the saved date and time pre-filled.
2. Change the year to 1990.
3. Click Cancel.
   EXPECTED: The dropdown closes and the sidebar still shows "April 12, 1985". No changes are persisted.

Check the updated date persisted:

1. With a date already saved (e.g. April 12, 1985), click the Date section.
2. Change the day to 20.
3. Click Save.
   EXPECTED: The sidebar updates to "April 20, 1985".
4. Refresh the page.
   EXPECTED: The sidebar still shows "April 20, 1985".

FLAG OFF:

1. Select a record.

2. Click the date.
   EXPECTED: The datepicker dropdown appears.

3. Modify the date and time.

4. Click the SAVE button.
   EXPECTED: The newly selected date and time are shown in the sidebar.

5. Refresh the browser.
   EXPECTED: The date that has bin filled is still present.

6. Select a folder.

7. Click the START date.
   EXPECTED: The datepicker dropdown appears.

8. Modify the date and time.

9. Click the SAVE button.

10. Click the END date.
    EXPECTED: The datepicker dropdown appears.

11. Modify the date and time.

12. Click the SAVE button.
    EXPECTED: The newly selected date and time for START and END date are shown in the sidebar.

13. Refresh the browser.
    EXPECTED: The date that has been filled is still present.

[codecov]

Codecov Report

❌ Patch coverage is 81.21827% with 37 lines in your changes missing coverage. Please review.
✅ Project coverage is 50.96%. Comparing base (179c76d) to head (c451946).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...debar-date-picker/sidebar-date-picker.component.ts	84.24%	11 Missing and 12 partials ⚠️
...c/app/shared/services/edtf-service/edtf.service.ts	56.52%	2 Missing and 8 partials ⚠️
...le-browser/components/sidebar/sidebar.component.ts	86.36%	3 Missing ⚠️
src/app/core/services/edit/edit.service.ts	83.33%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1047      +/-   ##
==========================================
+ Coverage   50.39%   50.96%   +0.56%     
==========================================
  Files         351      352       +1     
  Lines       11714    11905     +191     
  Branches     2058     2122      +64     
==========================================
+ Hits         5903     6067     +164     
- Misses       5608     5613       +5     
- Partials      203      225      +22     

☔ 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.

[Copilot]

Pull request overview

This PR introduces new EDTF-focused date/time UI building blocks (date picker, time picker, timezone dropdown) and wires an EDTF date picker into the file-browser sidebar behind a feature flag, supported by a substantial expansion/refactor of the shared EdtfService.

Changes:

• Added reusable date/time input components and a sidebar EDTF date picker UI (feature-flagged).
• Refactored EdtfService parsing/serialization and expanded validation helpers + test coverage.
• Added displayTime mapping support to the record repo + improved edit-service error handling/revert behavior.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/styles/_mixins.scss	Adds new SCSS mixins used by the new date/time components.
src/styles/_colors.scss	Adds PR blue shade tokens used by the new component styles.
src/app/shared/services/edtf-service/edtf.service.ts	Major refactor/expansion of EDTF parsing, formatting, validation, and timezone-display helpers.
src/app/shared/services/edtf-service/edtf.service.spec.ts	Updates and expands unit tests for the new EDTF behavior and helper methods.
src/app/shared/services/api/record.repo.ts	Adds optional displayTime support in Stela record mapping.
src/app/shared/services/api/record.repo.spec.ts	Adds tests verifying displayTime mapping behavior.
src/app/shared/components/timezone-dropdown/timezone-dropdown.component.ts	Adds standalone timezone dropdown component sourcing IANA zones via Intl.
src/app/shared/components/timezone-dropdown/timezone-dropdown.component.spec.ts	Adds unit tests for timezone dropdown behavior.
src/app/shared/components/timezone-dropdown/timezone-dropdown.component.scss	Styles for the timezone dropdown.
src/app/shared/components/timezone-dropdown/timezone-dropdown.component.html	Template for timezone dropdown UI.
src/app/shared/components/timepicker-input/timepicker-input.component.ts	Adds standalone time input + ng-bootstrap timepicker dropdown behavior.
src/app/shared/components/timepicker-input/timepicker-input.component.spec.ts	Adds unit tests for timepicker input interactions/validation.
src/app/shared/components/timepicker-input/timepicker-input.component.scss	Styles for the timepicker input.
src/app/shared/components/timepicker-input/timepicker-input.component.html	Template for timepicker input UI.
src/app/shared/components/datepicker-input/datepicker-input.component.ts	Adds standalone date input + ng-bootstrap datepicker dropdown behavior.
src/app/shared/components/datepicker-input/datepicker-input.component.spec.ts	Adds unit tests for datepicker input interactions/validation.
src/app/shared/components/datepicker-input/datepicker-input.component.scss	Styles for the datepicker input.
src/app/shared/components/datepicker-input/datepicker-input.component.html	Template for datepicker input UI.
src/app/file-browser/file-browser-components.module.ts	Imports the new sidebar date picker component into the file-browser module.
src/app/file-browser/components/sidebar/sidebar.component.ts	Integrates EDTF date picker into the sidebar behind edtf-date feature flag; adds save handler.
src/app/file-browser/components/sidebar/sidebar.component.spec.ts	Updates sidebar tests for feature flag handling and new dependencies.
src/app/file-browser/components/sidebar/sidebar.component.scss	Switches to Sass @use for variables import.
src/app/file-browser/components/sidebar/sidebar.component.html	Feature-flagged switch between legacy inline date edit and new EDTF picker UI.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.ts	Adds the sidebar EDTF date picker component and related formatting logic.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.spec.ts	Adds unit tests for sidebar date picker rendering and interactions.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.scss	Styles for the sidebar date picker dropdown/panel.
src/app/file-browser/components/sidebar-date-picker/sidebar-date-picker.component.html	Template for the sidebar date picker UI.
src/app/core/services/edit/edit.service.ts	Improves error handling: reverts property on failure and shows error messages.
src/app/core/services/edit/edit.service.spec.ts	Adds tests ensuring revert + error messaging behavior on save failures.

---

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

[cecilia-donnelly]

Can you base this PR on #1029? That will make it much simpler to review without accidentally looking at the same code twice, and it'll automatically switch to main once #1029 gets merged in. Thank you!

[aasandei-vsp]

Can you base this PR on #1029? That will make it much simpler to review without accidentally looking at the same code twice, and it'll automatically switch to main once #1029 gets merged in. Thank you!

That makes more sense, yes. I have been working on this today, but I got some conflicts that didn't manage to fix yet.(Some commits SHAs have diverted, not sure why) I should have this rebased on the correct branch tomorrow, as I am almost done with rebasing them correctly locally.

[aasandei-vsp]

Can you base this PR on #1029? That will make it much simpler to review without accidentally looking at the same code twice, and it'll automatically switch to main once #1029 gets merged in. Thank you!

That makes more sense, yes. I have been working on this today, but I got some conflicts that didn't manage to fix yet.(Some commits SHAs have diverted, not sure why) I should have this rebased on the correct branch tomorrow, as I am almost done with rebasing them correctly locally.

@cecilia-donnelly Success! I have managed to create the right history, so now it only shows the changes specific to this branch.

[cecilia-donnelly]

Thanks much @aasandei-vsp ! @slifty and I are splitting these up so he also has an idea of what's going on, so that's why I removed myself. :)

[aasandei-vsp]

@slifty Just wanted to mention that the last commit is a bug fix. The review fixes are in the commit: "Improve EDTF sidebar date handling"

[slifty]

Looks like my feedback is addressed ty!

[github-actions]

QA Instructions

Summary

This PR introduces a new sidebar date dropdown component for handling EDTF (Extended Date/Time Format) date inputs. The feature is guarded by the edtf-date feature flag to ensure changes do not impact production until fully tested and enabled. It provides enhanced date and time input capabilities, including support for unspecified date segments (e.g., "2023-XX-15") and improved error handling for date save failures. The display format now also includes normalized timezone offsets.

---

Test Environment Setup

1. Ensure the edtf-date feature flag is enabled for testing.
2. Deploy the application locally or in a staging environment as needed.

---

Test Scenarios

A. FLAG ON - EDTF Date Dropdown

1. Date and Time Input Handling

1. Navigate to the file sidebar.
2. Open the new date dropdown.
3. Input the following:
   • Date: April 12, 1985
   • Time: 02:30:00 PM
4. Click Save.

• Expected Result: The sidebar displays the saved date and time as April 12, 1985 • 02:30:00 PM (e.g., EST).

1. Open the date dropdown again.
2. Use the date picker to select May 22, 2025.
3. Use the time picker to set 10:22:33 AM.
4. Click Save.

• Expected Result: The sidebar displays the saved date and time as May 22, 2025 • 10:22:33 AM (e.g., EST).

2. Date with Unspecified Digits

1. Open the date dropdown.
2. Enter:
   • Year: 1988
   • Leave Month: empty
   • Day: 15
3. Click Save.

• Expected Result: The sidebar shows 1988-XX-15.

3. Cancel Functionality

1. Save a valid date (e.g., April 12, 1985) in the date field.
2. Open the date dropdown and update the year to 1990.
3. Click Cancel.

• Expected Result: The dropdown closes without applying changes. The sidebar still shows April 12, 1985.

4. Persistence

1. Save a valid date, e.g., April 12, 1985.
2. Update the day to 20 and click Save.
3. Refresh the page.

• Expected Result: The sidebar still shows April 20, 1985.

B. FLAG OFF - Standard Datepicker

1. Modify and Save Date

1. Select a record or folder.
2. Open a date field and modify the date and time using the standard datepicker.
3. Click Save.

• Expected Result: The sidebar reflects the modified date and time.

4. Refresh the browser.

• Expected Result: The changes persist in the sidebar.

2. Handling START and END Dates

1. Select a folder or item with START and END dates enabled.
2. Open the START date field, update the date and time, and click Save.
3. Open the END date field, update the date and time, and click Save.
4. Refresh the browser.

• Expected Result: Both START and END dates persist in the sidebar with the updated values.

---

Regression Risks

1. Date/Time Parsing:

   • Ensure the edtf-date format does not interfere with standard datepickers when the feature flag is off.
   • Verify time zone formatting adheres to GMT+HH:MM offset style consistently.

2. Error Handling:

   • Test scenarios where saving the date fails (e.g., malformed input or server errors). Ensure:
     • The original values are reverted, and the correct error message is displayed (error.generic.update_fail).

3. Edge Case Dates:

   • Test partial and invalid inputs (e.g., year only, partial months, invalid days) to validate robust input handling.

4. Backward Compatibility:

   • Validate that existing functionality unrelated to the date dropdown remains unaffected.

---

Things to Watch For

• Time Zone Calculations: Ensure the browser correctly accounts for local time zones across different regions.
• UI Responsiveness: Ensure the dropdown adapts gracefully to different resolutions and retains input consistency.
• Error Logging: Check that failed API calls log errors with sufficient detail in the developer console.

---

These instructions should cover validation of the new feature as well as any associated risks from the changes introduced.

---

Generated by QA Instructions Action

[omnignorant]

This appears to be working as expected! However, two notes:

• I don't see any way to modify timezone. Presumably this is out of scope for this PR.
• I am not able to toggle the feature flag status on dev, so I could only test it ON

[aasandei-vsp]

This appears to be working as expected! However, two notes:

• I don't see any way to modify timezone. Presumably this is out of scope for this PR.
• I am not able to toggle the feature flag status on dev, so I could only test it ON

• There is no way to modify the timezone ATM, because we wanted to create a more user friendly one, which meant creating a new story just for that: https://permanent.atlassian.net/browse/PER-10623
• I toggled the feature flag on dev and did a few tests. It seems to work as expected