Skip to content

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

Open
isuruRuhu wants to merge 2 commits into
openchoreo:mainfrom
isuruRuhu:feat/home-page-predefined-cards
Open

feat(home): add config-driven predefined home page cards#714
isuruRuhu wants to merge 2 commits into
openchoreo:mainfrom
isuruRuhu:feat/home-page-predefined-cards

Conversation

@isuruRuhu

@isuruRuhu isuruRuhu commented Jul 30, 2026

Copy link
Copy Markdown

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 configurable, predefined layouts for the portal home page.
    • Added a Recent Deployments card showing release status by environment.
    • Added permission-based visibility for platform details.
    • Improved card layout consistency with equal-height cards.
  • Bug Fixes
    • Standardized relative-time display for recently visited items.
    • Added fallback handling when an unavailable home page layout is selected.

@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown

Review Change Stack

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: a51c5d40-f844-4117-92eb-1b238de31eec

📥 Commits

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

📒 Files selected for processing (6)
  • packages/portal-app/src/components/Home/HomePage.test.tsx
  • packages/portal-app/src/components/Home/RecentDeploymentsCard.test.tsx
  • packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx
  • packages/portal-app/src/components/Home/cards/configs.test.ts
  • packages/portal-app/src/components/Home/cards/registry.test.tsx
  • packages/portal-app/src/components/Home/relativeTime.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx

📝 Walkthrough

Walkthrough

The portal home page now renders predefined cards from a configurable layout. A card registry handles component selection and visibility. RecentDeploymentsCard aggregates deployment status across component environments.

Changes

Home card layouts

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, plugins/openchoreo-common/config.d.ts, app-config.yaml, .changeset/home-page-predefined-cards.md
Defines card types, the choreo-default layout, configuration fallback, frontend-visible openchoreo.home.cardConfig settings, and configuration tests.
Card registry and card implementations
packages/portal-app/src/components/Home/cards/registry.tsx, packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx, packages/portal-app/src/components/Home/relativeTime.ts, packages/portal-app/src/components/Home/RecentlyVisitedCard.tsx, packages/portal-app/src/components/Home/styles.ts, packages/portal-app/src/components/Home/RecentDeploymentsCard.test.tsx, packages/portal-app/src/components/Home/cards/registry.test.tsx, packages/portal-app/src/components/Home/relativeTime.test.ts
Registers predefined cards, adds permission-based platform details visibility, implements recent deployment aggregation and rendering, centralizes relative-time formatting, adds card wrapper styling, and validates these behaviors.
Config-driven HomePage rendering
packages/portal-app/src/components/Home/HomePage.tsx, packages/portal-app/src/components/Home/HomePage.test.tsx
Reads the configured layout, resolves registered cards and visibility hooks, and renders configured placements in the home page grid. Tests cover configured and default layouts, visibility, missing cards, and loading.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant HomePage
  participant configApi
  participant getHomeCardConfig
  participant HOME_CARD_REGISTRY
  participant RecentDeploymentsCard
  participant CatalogApi
  participant OpenChoreoApi
  HomePage->>configApi: Read openchoreo.home.cardConfig
  HomePage->>getHomeCardConfig: Resolve named layout
  HomePage->>HOME_CARD_REGISTRY: Resolve configured cardId
  HOME_CARD_REGISTRY-->>HomePage: Return card component and visibility hook
  HomePage->>RecentDeploymentsCard: Render configured placement
  RecentDeploymentsCard->>CatalogApi: Fetch Component entities
  RecentDeploymentsCard->>OpenChoreoApi: Fetch environment deployment data
  OpenChoreoApi-->>RecentDeploymentsCard: Return deployment status and timestamps
  RecentDeploymentsCard-->>HomePage: Render deployment rows
Loading

Possibly related PRs

Suggested reviewers: stefinie123

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description explains the purpose and approach, but it omits several required template sections and testing details. Add Goals, user stories, documentation, training, certification, marketing, samples, related PRs, migrations, test environment, learning, and complete automation and security checks.
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

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 30, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 96.09375% 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!

@isuruRuhu
isuruRuhu force-pushed the feat/home-page-predefined-cards branch from efcc934 to dd3f0e1 Compare July 30, 2026 09:09
Signed-off-by: isuruRuhu <isuru.ruhu@gmail.com>
@isuruRuhu
isuruRuhu force-pushed the feat/home-page-predefined-cards branch from dd3f0e1 to 8c42320 Compare July 30, 2026 09:31

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/portal-app/src/components/Home/RecentDeploymentsCard.tsx Outdated
Signed-off-by: isuruRuhu <isuru.ruhu@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant