feat(home): add config-driven predefined home page cards

[isuruRuhu]

Purpose

The portal home page currently hard-codes its layout. This adds a config-driven, predefined card system so the set and arrangement of home-page cards can be selected per deployment via app-config, plus one new card (Recent Deployments).

Approach

• Card registry + layout configs (packages/portal-app/src/components/Home/cards/): each card is a registry entry (component, optional permission-gated visibility hook); a named layout config lists the cards and their grid sizes. openchoreo.home.cardConfig (new frontend-visible config key in @openchoreo/backstage-plugin-common) selects the layout, falling back to choreo-default for unknown names.
• Registry cards: search, my-projects, quick-actions, recent-deployments, starred-entities, recently-visited, and platform-details (visible only with namespace permission) — all referencing the existing components.
• New RecentDeploymentsCard: latest release bindings across the user's components with per-environment status, linked to the component entities.
• Shared relativeTime helper extracted from RecentlyVisitedCard (also used by the new card).

Existing deployments keep working with no config change (default layout is choreo-default, matching the current page).

No component redesigns in this PR — the existing widgets render as they are today.

Release note

The home page's cards are now config-driven: openchoreo.home.cardConfig selects a predefined card layout. A Recent Deployments card was added.

Automation tests

• Unit tests: repo tsc clean; lint + prettier clean.
• Manual testing: layout verified live against a populated control plane (real projects/components/deployments data).

Security checks

• Followed secure coding standards? yes
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Summary by CodeRabbit

• New Features
  • Added predefined home page card layouts and a registry for cards such as Search, My Projects, Quick Actions, Recent Deployments, Starred Entities, Recently Visited, and Platform Details.
  • Added a Recent Deployments card showing release status by environment, timestamps, loading states, and expandable results.
  • Added consistent relative-time labels such as “just now,” “5 minutes ago,” and “2 days ago.”
• Documentation
  • Added release notes for the new predefined home page cards.
• Note
  • The current home page layout remains unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 81f0d0b8-c7aa-4c7a-a4b8-69180567478c

📥 Commits

Reviewing files that changed from the base of the PR and between d309990 and 885743c.

📒 Files selected for processing (2)

• .changeset/home-page-predefined-cards.md
• packages/portal-app/src/components/Home/cards/configs.ts

---

📝 Walkthrough

Walkthrough

The portal app adds predefined home-card types, a default layout, a card registry, and RecentDeploymentsCard. It centralizes relative-time formatting and adds tests for layouts, registry visibility, deployment states, and time formatting. The existing home page remains unchanged.

Changes

Home card contracts and layout

Layer / File(s)	Summary
Card contracts and layout configuration packages/portal-app/src/components/Home/cards/types.ts, packages/portal-app/src/components/Home/cards/configs.ts, packages/portal-app/src/components/Home/cards/index.ts, packages/portal-app/src/components/Home/cards/configs.test.ts, .changeset/home-page-predefined-cards.md	Defines card types, registers the choreo-default layout, adds default fallback lookup, exports the card APIs, and adds a patch changeset.

Card implementations and registry

Layer / File(s)	Summary
Deployment card and shared time formatting packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx, packages/portal-app/src/components/Home/RecentDeploymentsCard.test.tsx, packages/portal-app/src/components/Home/relativeTime.ts, packages/portal-app/src/components/Home/relativeTime.test.ts, packages/portal-app/src/components/Home/RecentlyVisitedCard.tsx	Adds deployment loading, filtering, aggregation, sorting, status rendering, expansion, and error states. Shared relative-time formatting is used by deployment and recently visited cards.
Card registry and visibility wiring packages/portal-app/src/components/Home/cards/registry.tsx, packages/portal-app/src/components/Home/cards/registry.test.tsx	Registers predefined card components, adds the styled search card, and controls Platform Details visibility through namespace permissions.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant RecentDeploymentsCard
  participant CatalogApi
  participant OpenChoreoApi
  RecentDeploymentsCard->>CatalogApi: Query Component entities
  CatalogApi-->>RecentDeploymentsCard: Return component entities
  RecentDeploymentsCard->>OpenChoreoApi: Fetch deployment data per environment
  OpenChoreoApi-->>RecentDeploymentsCard: Return statuses and timestamps
  RecentDeploymentsCard->>RecentDeploymentsCard: Filter and sort deployment rows

Loading

Possibly related PRs

• openchoreo/backstage-plugins#672: Changes to deployment environment data relate to RecentDeploymentsCard data handling.
• openchoreo/backstage-plugins#682: Introduces shared loading skeleton behavior used by the deployment card.

Suggested reviewers: kaviththiranga

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains the purpose, approach, release note, testing, and security checks, but omits most required template sections.	Add the missing template sections, including Goals, User stories, Documentation, Training, Certification, Marketing, Samples, Related PRs, Migrations, Test environment, and Learning.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding config-driven predefined home page cards.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[codecov]

Codecov Report

❌ Patch coverage is 95.41284% with 5 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...-app/src/components/Home/RecentDeploymentsCard.tsx	93.75%	5 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx`:
- Around line 232-236: Update the component-loading flow around
catalogApi.getEntities and the components slice so deployment recency is
determined before applying MAX_COMPONENTS. Use a backend recency-ordered
endpoint or query, request only the fields needed for deployment timestamps and
display, then limit the recency-sorted results for the Recent Deployments card.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 037f9490-0fd7-4010-bc1a-a06809f8e287

📥 Commits

Reviewing files that changed from the base of the PR and between 8f378a8 and 8c42320.

📒 Files selected for processing (12)

• .changeset/home-page-predefined-cards.md
• app-config.yaml
• packages/portal-app/src/components/Home/HomePage.tsx
• packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx
• packages/portal-app/src/components/Home/RecentlyVisitedCard.tsx
• packages/portal-app/src/components/Home/cards/configs.ts
• packages/portal-app/src/components/Home/cards/index.ts
• packages/portal-app/src/components/Home/cards/registry.tsx
• packages/portal-app/src/components/Home/cards/types.ts
• packages/portal-app/src/components/Home/relativeTime.ts
• packages/portal-app/src/components/Home/styles.ts
• plugins/openchoreo-common/config.d.ts