feat: replace HomePageRecentlyVisited with custom RecentlyVisitedCard

[kaviththiranga]

Built-in Backstage component uses hardcoded color variants that render
custom OpenChoreo kinds (environment, deploymentpipeline, dataplane,
etc.) as dark grey. Custom component uses ENTITY_KIND_COLORS from the
catalog graph for consistent kind coloring, adds kind icons next to
entity names, and overrides non-entity page visits with friendly labels
and sidebar-matching icons instead of raw pathnames.

Fixes: openchoreo/openchoreo#2883

Summary by CodeRabbit

• New Features

  • Home page recently visited panel now shows loading skeletons, empty-state messaging, relative timestamps, and expandable "View more/View less" to reveal additional items.
  • Visit rows include contextual chips, icons, and direct links to entities or pages.

• Refactor

  • Replaced prior recently visited implementation with a local, improved component offering better presentation and state handling.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Replaces the plugin-provided HomePageRecentlyVisited with a locally implemented RecentlyVisitedCard; the new component fetches recent visits, parses entity refs, applies kind-based icons/colors, maps certain page paths to friendly labels/icons, and renders a collapsible recently-visited InfoCard.

Changes

Cohort / File(s)	Summary
HomePage update packages/app/src/components/Home/HomePage.tsx	Removed HomePageRecentlyVisited import from @backstage/plugin-home and now renders the local RecentlyVisitedCard.
RecentlyVisitedCard packages/app/src/components/Home/RecentlyVisitedCard.tsx	New exported component that queries visitsApiRef, resolves entityRef or page overrides to produce kind-colored chips and system icons, shows skeleton/empty states, and supports collapse/expand of the visit list.

Sequence Diagram

sequenceDiagram
    participant HomePage
    participant RecentlyVisitedCard
    participant VisitsAPI as visitsApiRef
    participant Catalog as Catalog API
    participant IconRegistry as app.getSystemIcon
    participant InfoCard

    HomePage->>RecentlyVisitedCard: render
    RecentlyVisitedCard->>VisitsAPI: fetchRecentVisits()
    VisitsAPI-->>RecentlyVisitedCard: visits[]

    loop each visit
        alt visit.entityRef exists
            RecentlyVisitedCard->>Catalog: (parse entityRef) get kind / ref info
            RecentlyVisitedCard->>IconRegistry: request icon for kind
            IconRegistry-->>RecentlyVisitedCard: icon
            RecentlyVisitedCard->>RecentlyVisitedCard: determine kind color & label
        else known pathname (PAGE_OVERRIDES)
            RecentlyVisitedCard->>RecentlyVisitedCard: map pathname -> label, icon, color
        else unknown page
            RecentlyVisitedCard->>RecentlyVisitedCard: use default "other" label & color
        end
    end

    RecentlyVisitedCard->>InfoCard: render rows (chip, icon/link, timestamp)
    InfoCard-->>HomePage: displayed card (collapsible)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• Custom RecentlyVisited card with kind-colored chips, icons, and page overrides openchoreo#2883: Implements the custom RecentlyVisited card behavior described—kind-colored chips, system icons, and page path overrides.

Poem

🐇 I hopped in to show what you sought,
Chips in bright hues and icons well-wrought,
Paths find their names, entities gleam,
Collapse and expand the recent-visit stream,
A rabbit's cheer for this tidy new spot!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	The description explains the problem, solution, and includes a visual demonstration, but lacks structured details from the template such as approach, release notes, testing information, and documentation links.	Consider adding more structured information from the template, particularly approach details, automation test coverage, and documentation impact assessment.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: replacing Backstage's built-in HomePageRecentlyVisited component with a custom RecentlyVisitedCard component.
Linked Issues check	✅ Passed	The implementation successfully addresses all coding objectives from issue #2883: using ENTITY_KIND_COLORS for consistent coloring, displaying kind icons, overriding non-entity pages with friendly labels and icons, using KIND_FULL_LABELS, and implementing fixed-width chips.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the custom RecentlyVisitedCard component as specified in issue #2883; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/app/src/components/Home/RecentlyVisitedCard.tsx`:
- Around line 142-153: The relative-time function getRelativeTime currently uses
Math.round which causes time labels to jump early; change the calculations to
use Math.floor instead: compute seconds = Math.floor((Date.now() - timestamp) /
1000), then minutes = Math.floor(seconds / 60), hours = Math.floor(minutes /
60), days = Math.floor(hours / 24), and keep the same bucket checks (seconds <
60, minutes < 60, hours < 24) so labels use floor-based bucketing and avoid
premature promotion to the next unit.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6cbe477e-15ce-4012-899f-234b681f8b24

📥 Commits

Reviewing files that changed from the base of the PR and between 208b570 and 2884f16.

📒 Files selected for processing (2)

• packages/app/src/components/Home/HomePage.tsx
• packages/app/src/components/Home/RecentlyVisitedCard.tsx