feat(org-lens): org lens project detail page UI (LFXV2-1885)#1028
feat(org-lens): org lens project detail page UI (LFXV2-1885)#1028danoqualls wants to merge 67 commits into
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds an Org Lens project-detail route, API, demo payloads, page rendering logic, and E2E coverage, plus a Valkey JSON cache miss handling tweak. ChangesOrg Project Detail
Valkey typing
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
🚀 Deployment StatusYour branch has been deployed to: https://ui-pr-1028.dev.v2.cluster.linuxfound.info Deployment Details:
The deployment will be automatically removed when this PR is closed. |
There was a problem hiding this comment.
Pull request overview
Adds the Org Lens Project Detail page under /org/projects/:projectSlug, introducing shared payload contracts plus a frontend demo-data seam and new UI (tabs, charts, drawer details) with query-param state. The PR also wires a new org route and updates navigation/telemetry touchpoints, and adds Playwright coverage.
Changes:
- Add shared
OrgLensProjectDetailResponsecontracts and export them from@lfx-one/shared/interfaces. - Implement the Org Project Detail page UI (tabs, influence cards, leaderboards, stacked trend chart, card-detail drawer) backed by demo fixtures and a new Angular service.
- Add org routing + E2E tests; minor Valkey cache read typing tweak.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/shared/src/interfaces/org-lens-project-detail.interface.ts | Adds shared API contracts for Org Lens Project Detail payloads. |
| packages/shared/src/interfaces/index.ts | Re-exports the new Project Detail interfaces from the interfaces barrel. |
| apps/lfx-one/src/server/services/valkey.service.ts | Tightens getJson typing for Valkey reads and null handling. |
| apps/lfx-one/src/app/shared/services/org-lens-project-detail.service.ts | Adds a frontend service seam for loading project detail (currently demo-backed). |
| apps/lfx-one/src/app/shared/services/org-lens-project-detail.demo-data.ts | Adds large deterministic demo fixture generator for the project detail page. |
| apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.ts | Implements page state machine, query-param persistence, leaderboard ranking, and chart dataset construction. |
| apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail.component.html | Implements page shell, hero, tabs, influence cards, leaderboards, trend chart, and drawer markup with testids. |
| apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail-tab-bar.component.ts | Adds the shared tab/metric/range control bar with keyboard navigation. |
| apps/lfx-one/src/app/modules/dashboards/org/org-project-detail/org-project-detail-tab-bar.component.html | Tab bar template (tablist + metric toggle + time-range pills). |
| apps/lfx-one/src/app/modules/dashboards/org/components/org-overview-foundations-and-projects/org-overview-foundations-and-projects.component.ts | Adds telemetry + navigation handlers intended to open project detail from overview rows. |
| apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts | Re-enables “Projects” entry in Org Lens sidebar section. |
| apps/lfx-one/src/app/app.routes.ts | Adds the /org/projects/:projectSlug route entry. |
| apps/lfx-one/e2e/org-project-detail.spec.ts | Adds Playwright E2E coverage for project detail page behaviors and URL persistence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Address review comments from copilot-pull-request-reviewer, copilot-swe-agent: - org-project-detail.component.ts: make scoreColumnLabel dynamic using TIME_RANGE_MONTHS[timeRange()] so Activity column shows correct period for 2y/all ranges, not hard-coded (12mo) (per copilot-pull-request-reviewer) - org-project-detail.component.ts: fix All others stacked trend to use the SUM of scores, not average — average understates the aggregate (per copilot-swe-agent) - org-overview-foundations-and-projects.component.html: restore project row click/keydown handlers now that the detail drilldown page is built; remove the deferred-until-ready comment (per copilot-pull-request-reviewer) - org-lens-project-detail.service.ts: remove Generated-with comment (per copilot-pull-request-reviewer) - e2e/org-project-detail.spec.ts: move project-detail-trend-group assertion to the leaderboards test where it is actually rendered (per copilot-swe-agent) - e2e/org-project-detail.spec.ts: remove stale ?score=/ from JSDoc — only ?metric= is used (per copilot-swe-agent) Resolves 5 review threads; 2 threads addressed via responses only (breadcrumb/CTA route and SSR endpoint are intentional by design). Signed-off-by: daniel qualls <dqualls@linuxfoundation.org>
Review Feedback AddressedChanges Made
Threads Resolved7 of 7 unresolved threads addressed in this iteration. |
- Use barrel import in org-lens-project-detail.constants.ts instead of deep relative paths to ../interfaces/*.interface files - Guard trendSeries() with ?? 0 fallback so ramp() returning [] for zero-influence projects doesn't emit undefined values that violate OrgLensProjectTrendPoint contract - Guard deltaFromSparkline() against empty series arrays to prevent NaN in trendDeltaPct when viewing org has zero influence score - Remove dead lineCardOptions/barCardOptions class properties from OrgProjectDetailComponent; toInfluenceCard() already builds the correct per-card options with valueSuffix via buildBarCardOptions() and buildLineAreaCardOptions()"
Address review comments from copilot-pull-request-reviewer: - controller.ts: treat empty/whitespace orgName as missing, fall back to 'Your Organization' (per copilot-pull-request-reviewer) - demo-data.ts: guard avg-merge-time sparkline with org.prs===0?[] so the jenkins (zero-involvement) seed no longer shows false chart data (per copilot-pull-request-reviewer) - demo-data.ts: use ??0 in trendSeries() so projects with zero influence emit valid numeric 0s instead of undefined when ramp() returns [] (per copilot-pull-request-reviewer) - demo-data.ts: guard deltaFromSparkline() against empty series to prevent NaN in trendDeltaPct for zero-score orgs (per copilot-pull-request-reviewer) - component.ts: remove dead lineCardOptions/barCardOptions class-level fields; toInfluenceCard() already calls the builders directly (per copilot-pull-request-reviewer) - component.html: replace [class.invisible] with [disabled] on all 4 scroll buttons so hidden arrows leave the tab order (a11y fix) (per copilot-pull-request-reviewer) - e2e/org-project-detail.spec.ts: add ?range= URL persistence test — switch to 2y, assert URL contains range=2y and column shows Activity (24mo) (per copilot-pull-request-reviewer) Resolves 10 review threads. Signed-off-by: daniel qualls <dqualls@linuxfoundation.org>
Review Feedback AddressedCommit: 8b0803c Changes Made
Threads Resolved10 of 10 unresolved threads addressed in this iteration. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Dano Qualls <mynameisdano@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Dano Qualls <mynameisdano@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Dano Qualls <mynameisdano@gmail.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: Dano Qualls <mynameisdano@gmail.com>
Address review comments from copilot-pull-request-reviewer: - org-project-detail.component.ts: add drawerTimeRangeLabel computed signal that derives the month count from TIME_RANGE_MONTHS[timeRange()] so the drawer subtitle reflects the active time window (per copilot-pull-request-reviewer) - org-project-detail.component.html: replace hard-coded "Last 12 months" in drawer subtitle with drawerTimeRangeLabel() (per copilot-pull-request-reviewer) - org-project-detail.component.html: change [alt]="row.orgName + ' logo'" to alt="" on both leaderboard org logo images — they are decorative (org name shown as adjacent text) so aria-hidden="true" + empty alt is correct per WCAG; the previous mixed semantics (aria-hidden + non-empty alt) were flagged as inconsistent (per copilot-pull-request-reviewer) Resolves 3 review threads. Signed-off-by: daniel qualls <dqualls@linuxfoundation.org>
Review Feedback AddressedCommit: 200039d Changes Made
Threads Resolved3 of 3 unresolved threads addressed in this iteration. |
Business case: company can view their involvement in a project in a detailed way that adds up to influence in the project and compares influence to other companies. UI only with demo data. Includes both influence detail tab and leaderboards tab.
This pull request introduces the Org Lens Project Detail sub-page (LFXV2-1885) to the application, enabling users to view detailed analytics and leaderboard data for individual projects within an organization. It includes the new route and navigation entry, a complete UI with tabbed navigation, metric and time range toggles, demo data integration, and comprehensive E2E tests. Additionally, it restores interactivity for project rows in the Org Overview, allowing users to drill down into project details.
Org Lens Project Detail Feature Implementation:
/org/projects/:projectSlugroute, navigation entry, and associated metadata, enabling direct navigation to project detail pages. [1] [2]OrgProjectDetailServiceto provide demo data for the project detail page, designed for easy replacement with a real backend API in the future.OrgProjectDetailTabBarComponentfor tabbed navigation, including keyboard accessibility, metric toggles, and time range selection. [1] [2]Org Overview Interactivity Restoration:
Supporting and Miscellaneous Updates:
Summary
/org/projects/:projectSlug, opened from the Overview's Foundations & Projects tableorg-lens-project-detail.demo-data.ts) via a new service + controller + route — demo company data only; real Snowflake integration is a separate story. Note: there is no static JSON fixture; all demo payloads are generated server-side in TypeScript.?tab=,?metric=,?range=)Our Influence tab:
Leaderboards tab:
Shell:
<p-skeleton>loading states andlfx-empty-stateerror/not-found panelsdata-testidattributes; E2E coverage addedPR size rationale
This PR is ~2,500 lines. The branch builds the complete Project Detail page end-to-end (scaffold → hero → influence cards → trend chart → leaderboards → e2e → polish). The intermediate commits are not independently shippable — routing and the data layer land without visible UI until the component is complete. Splitting at a natural seam (e.g., scaffold-only or data-layer-only) would merge dead routes that don't render. The full page is the atomic unit of work here, consistent with how the sibling Membership Detail page (PR #921) was delivered.
Test plan
/org/overview, expand a foundation, click an LF project row → lands on/org/projects/<slug>?tab=and survives page reload?range=query param and persist on reload/org/projectsyarn e2e🤖 Generated with Claude Code