feat(ui): Add warning signpost for old snaps

[gajeshbhat]

Done

Adds a warning notification on snap detail pages for snaps that haven't been updated in over 2 years, helping users identify potentially outdated or unmaintained snaps.

Fixes #2988

Changes

• Backend Logic: Added is_snap_old() function to detect snaps older than 2 years
• Date Formatting: Added convert_date_month_year() for cleaner "Month Year" format
• UI Component: Added warning notification in snap details sidebar with orange left border
• Styling: Custom CSS for clean notification appearance (no borders except orange left border)
• Testing: Comprehensive test coverage for date logic and edge cases

Implementation Details

• Threshold: Configurable (default: 2 years)
• Message: "This snap in this channel hasn't been updated since [Month Year]. Contact the developer to ask for an update."
• Positioning: Appears after "Last Updated" section in sidebar
• Styling: Uses Vanilla CSS p-notification--caution with custom .old-snap-warning class

How to QA

Unit Testing

• All existing tests pass
• New tests added for is_snap_old() function
• New tests added for convert_date_month_year() function
• Manual testing completed on local development server

Prerequisites

• Checkout to my Branch: feat/signpost-old-snaps-2988
• Run the development server locally: dotrun

Test Cases

Snaps that SHOULD show the warning (2+ years old):

• Visit http://localhost:8004/mumble - Should show a warning
• Visit http://localhost:8004/hello - Should show a warning
• Visit http://localhost:8004/wekan - Should show a warning

Snaps that should NOT show the warning (recently updated):

• Visit http://localhost:8004/vault - Should NOT show warning
• Visit http://localhost:8004/microk8s - Should NOT show warning

What to Look For

1. Warning Appearance:

   • Orange left border (no other borders)
   • Warning icon
   • Clean, minimal styling
   • Horizontal line below for consistency

2. Message Format:

   • "This snap in this channel hasn't been updated since [Month Year]. Contact the developer to ask for an update."
   • Month and year only (no specific day)

3. Positioning:

   • Appears in right sidebar
   • After "Last Updated" section
   • Before "Contact" section (if present)

Edge Cases to Test

• Try snaps with different update dates
• Verify warning only appears for snaps 2+ years old
• Check that recent snaps don't show the warning

Screenshots

Screenshots are attached below showing:

Warning displayed on old snaps (mumble, hello, wekan)

No warning on recently updated snaps (vault, microk8s)

Notes

• The feature is backward compatible and doesn't affect existing functionality
• Uses timezone-aware datetime functions to avoid deprecation warnings
• Follows existing design patterns and styling conventions
• The message can be easily customized by modifying the template

[webteam-app]

gajeshbhat is not a collaborator of the repo

[bartaz]

Thanks again @gajeshbhat. I'll pass it through copilot first and we'll add it to our maintenance review list.

With feature requests like this, we usually get them through UX first, before even starting implementation. While your suggestion is OK, it hasn't been decided where such notification should be added, what should it say, how old snap needs to be for it to show up.

That said, we can use your PR to discuss these with UX during review.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (b8b6b55) to head (5d57e46).
⚠️ Report is 487 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #5352       +/-   ##
==========================================
- Coverage   66.80%       0   -66.81%     
==========================================
  Files         113       0      -113     
  Lines        3714       0     -3714     
  Branches      965       0      -965     
==========================================
- Hits         2481       0     -2481     
+ Misses       1098       0     -1098     
+ Partials      135       0      -135     

see 65 files with indirect coverage changes

🚀 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 adds a warning notification system for snap packages that haven't been updated in over 2 years, helping users identify potentially outdated or unmaintained snaps.

• Added backend logic to detect old snaps and format dates appropriately
• Implemented UI notification component in the snap details sidebar
• Added comprehensive test coverage for the new functionality

Reviewed Changes

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

Show a summary per file

File	Description
webapp/store/snap_details_views.py	Integrates old snap detection into snap details context
webapp/store/logic.py	Implements core functions for detecting old snaps and date formatting
tests/store/tests_public_logic.py	Adds comprehensive test coverage for new date and old snap logic
templates/store/snap-details/_details.html	Adds warning notification UI component to snap details sidebar
static/sass/styles.scss	Adds custom styling for the old snap warning notification

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The calculation uses a fixed 365 days per year while line 248 correctly uses 365.25 to account for leap years. This inconsistency could cause edge cases where years_diff and is_old don't align. Use (old_threshold_years * 365.25) for consistency.

Suggested change

	is_old = days_diff >= (old_threshold_years * 365)
	is_old = days_diff >= (old_threshold_years * 365.25)

[gajeshbhat]

Updated! Changed to use (old_threshold_years * 365.25) for consistency with the leap year calculation on line 248. Updated tests accordingly to handle the more precise calculation.

[bartaz]

Not sure what's the reasoning behind this. Ideally we would not want to modify existing Vanilla patterns like that. Especially the use of !important is a bad practice in CSS.

Notification does have a "borderless" variant if you were aiming at something like that: https://vanillaframework.io/docs/patterns/notification#appearance

[gajeshbhat]

Thank you. I will look into the variant in the docs linked above. I was trying to style the box. My CSS knowledge is definitely below average so I will research and update.

[gajeshbhat]

Thank you for the link. Removed the custom CSS with !important and switched to using Vanilla Framework's borderless variant: p-notification--caution is-borderless

[gajeshbhat]

Kindly note that the orange line on the left in the screenshot is gone, as is-borderless class removes all borders. I will update the screenshots. I think we can leave it like that as the caution symbol still conveys the message and looks cleaner. I will wait for comments from UX before I make any other modifications.

[gajeshbhat]

Thanks again @gajeshbhat. I'll pass it through copilot first and we'll add it to our maintenance review list.

With feature requests like this, we usually get them through UX first, before even starting implementation. While your suggestion is OK, it hasn't been decided where such notification should be added, what should it say, how old snap needs to be for it to show up.

That said, we can use your PR to discuss these with UX during review.

Thanks for taking a look @bartaz . Yes, I do remember seeing the Dev Ready label on some issues where the UX had been discussed, but as this is a minor change, I assumed that could be done during the PR review. Apologies for not checking early. Happy to work with UX to decide the place, the message and duration to display the warning. Will resolve other comments and wait for the suggestions on this. Thanks for pointing it out. Cheers.

[gajeshbhat]

Hey @bartaz , Hope you have been well. Any chance we can get a review from UI/UX for this PR ?

[gajeshbhat]

Retriggerd CI using git commit --amend --no-edit && git push --forceand the Inclusive naming check passes now.