serval-admin: serval-builds: highlight and reset non-default date range

[marksvc]

When the user visits the Serval Builds tab, they are shown a default
date range. If the user adjusts the date range, highlight the control
and show a reset button to set the default range back to the initial
default value. This is similar in behaviour to the Search control
(regarding highlighting and resetting/clearing).

Screenshot of date range picker when the default date range is being used:

Screenshot of date range picker when the date range is changed:

---

Open in Devin Review

---

This change is 

[Copilot]

Pull request overview

This PR updates the Serval Builds date range control so that when a user changes away from the initial default range, the control is visually highlighted and a reset button appears to restore the original default date range (matching the existing “Search” control behavior).

Changes:

• Enables reset/highlight behavior for the Serval Builds date range picker via a new showReset input.
• Tracks the initial default date range and detects when the current selection differs.
• Adds UI (reset suffix button) and styling to highlight the date range control when non-default.

Reviewed changes

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

File	Description
src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-builds.component.html	Enables reset/highlight behavior on the date range picker in Serval Builds.
src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.ts	Adds showReset, tracks default vs current range, and implements reset logic.
src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.html	Adds conditional reset button and active-state class binding.
src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.scss	Styles reset button and applies highlighted form-field styling when active.

---

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

[marksvc]

I think this comment is mistaken.

[codecov]

Codecov Report

❌ Patch coverage is 40.00000% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.87%. Comparing base (f3ccad1) to head (7a72ff3).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...rval-administration/date-range-picker.component.ts	40.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3951      +/-   ##
==========================================
- Coverage   80.88%   80.87%   -0.01%     
==========================================
  Files         634      634              
  Lines       41019    41029      +10     
  Branches     6674     6683       +9     
==========================================
+ Hits        33180    33184       +4     
- Misses       6789     6795       +6     
  Partials     1050     1050              

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

[pmachapman]

@pmachapman reviewed 4 files and all commit messages, made 1 comment, and resolved 1 discussion.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on marksvc and pmachapman).

---

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.html line 8 at r1 (raw file):

  </mat-date-range-input>
  @if (showReset && !isDefaultRange) {
    <button

Can you please make this look and act like the calendar button next to it? (it is black on light theme, and has no hover effect)

I was able to do this by adding matIconButton here, and adding MatIconButton to the imports in the .ts file.

Code quote:

   <button

[marksvc]

@marksvc made 1 comment.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on pmachapman).

---

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/date-range-picker.component.html line 8 at r1 (raw file):

Previously, pmachapman (Peter Chapman) wrote…

Can you please make this look and act like the calendar button next to it? (it is black on light theme, and has no hover effect)

I was able to do this by adding matIconButton here, and adding MatIconButton to the imports in the .ts file.

Thank you for pointing this out! I changed it and now it behaves like the close button in the Search control.

[pmachapman]

Excellent, thank you!

@pmachapman reviewed 3 files and all commit messages, made 1 comment, and resolved 1 discussion.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on marksvc).