feat: Redesign Compare Environments page - #7965
Conversation
- Convert CompareEnvironments from JS to TypeScript - Add expandable rows with full diff view (segments, variations) - Add standard table filters (search, tags, owners, groups, sort) - Split results into "Changed features" and "Unchanged features" tables - Add column headers for source/target environments and segment changes - Show environment names in diff view dropdown instead of "Old/New Value" - Add environment name legend with +/- indicators in diff colours - Style improvements: proper table header styling, badge counts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
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:
📝 WalkthroughWalkthroughThe legacy environment comparison module is replaced by a TypeScript comparison flow with typed comparison data, paginated feature-state fetching, filtering and sorting, expandable feature rows, editing, and environment-specific diff rendering. The page compares changed and unchanged features across two selected environments, while Estimated code review effort: 4 (Complex) | ~60 minutes 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. Comment |
github-actions
Bot
added
the
front-end
Docker builds report
|
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Failed testsfirefox › tests/environment-permission-test.pw.ts › Environment Permission Tests › Environment-level permissions control access to features, identities, and segments @enterprise
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: d35e7802-5b0d-4d36-a807-ab7858d6883c
📒 Files selected for processing (4)
frontend/web/components/CompareEnvironments.jsfrontend/web/components/CompareEnvironments.tsxfrontend/web/components/diff/DiffFeature.tsxfrontend/web/styles/3rdParty/_react-diff.scss
💤 Files with no reviewable changes (1)
- frontend/web/components/CompareEnvironments.js
Visual Regression19 screenshots compared. See report for details. |
Add Edit buttons to each environment column that open the CreateFlagModal for editing features directly from the comparison view. The modal handles change requests automatically when required. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
Bot
added
feature
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 2e5c607a-0133-4beb-977e-e3136eda0457
📒 Files selected for processing (1)
frontend/web/components/CompareEnvironments.tsx
talissoncosta
left a comment
talissoncosta
left a comment
There was a problem hiding this comment.
Looks good @kyle-ssg ! Thanks for that!
I just left some suggestions.
If we can break it into small components and get rid of the _data import would be amazing.
Address PR review feedback on the Compare Environments redesign: - Move the single 607-line component into a CompareEnvironments/ folder with a barrel: types.ts, useEnvironmentComparison hook (fetch + diff derivation, now unit-testable), ExpandedRow, CompareFeatureRow, and the layout component. - Replace relative imports with components/ and common/ aliases. - Reuse the shared FlagsmithValue type instead of an inline union. - Surface a fetch error state with a retry action instead of silently swallowing failures and rendering "No differences found". - Guard against stale overlapping comparisons with a request-id check so a slow earlier response can't overwrite a newer one. - Make the row expand toggle keyboard accessible (role, tabIndex, aria-expanded, Enter/Space handling). - Pass the numeric projectId into CreateFlagModal. - Fall back to the left project flag for the right-side edit action so the modal edits the existing feature instead of switching to create mode. - Consolidate duplicated diff header styles into a shared base rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
github-actions
Bot
added
feature
There was a problem hiding this comment.
Actionable comments posted: 8
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 9358fdf4-3fea-4572-8fe1-3a268386a44c
📒 Files selected for processing (7)
frontend/web/components/CompareEnvironments/CompareEnvironments.tsxfrontend/web/components/CompareEnvironments/CompareFeatureRow.tsxfrontend/web/components/CompareEnvironments/ExpandedRow.tsxfrontend/web/components/CompareEnvironments/index.tsfrontend/web/components/CompareEnvironments/types.tsfrontend/web/components/CompareEnvironments/useEnvironmentComparison.tsfrontend/web/styles/3rdParty/_react-diff.scss
…PageGet Export the existing recursivePageGet helper and reuse it in the comparison hook so every list is fetched across all pages, replacing the page_size=999 calls that silently capped results at 999. A small _data.get adapter bridges it to the baseQuery contract the helper expects. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/common/services/useProjectFlag.ts (1)
12-16: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMake
recursivePageGetgeneric
It’s reused for bothProjectFlagandFeatureState, so parameterising the response type will remove the cast inuseEnvironmentComparisonand keep callers type-safe.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: e7b13097-571d-4572-a88c-8cca942142a7
📒 Files selected for processing (2)
frontend/common/services/useProjectFlag.tsfrontend/web/components/CompareEnvironments/useEnvironmentComparison.ts
- Add MaybePromise/QueryReturnValue types to recursivePageGet.ts - Optimise deriveChanges with Map lookups instead of O(n²) .find() - Use semantic CSS variables for dark mode support in diff styles - Update constants.ts comment to reflect current layout - Add aria-label to EnvironmentStateCell for accessibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
Bot
added
feature
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18837 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
🗂️ Previous results✅ oss · depot-ubuntu-latest-arm-16 — run #18837 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18837 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18837 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18836 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18836 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
❌ oss · depot-ubuntu-latest-arm-16 — run #18836 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Failed testsfirefox › tests/segment-test.pw.ts › Segment test 4 - Create ANY rule type segment and verify match changes when rule is updated @oss ✅ oss · depot-ubuntu-latest-16 — run #18836 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18835 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18835 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18835 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18835 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
|
Add FeatureState and ProjectFlag cache invalidation to mutations: - useFeatureState: updateFeatureState - useSegmentOverride: createSegmentOverride - useFeatureSegment: deleteFeatureSegment - useFeatureVersion: createAndSetFeatureVersion, createFeatureVersion, publishFeatureVersion This ensures the CompareEnvironments tables refresh automatically when feature states or segment overrides are modified. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
Bot
added
feature
Use useGetEnvironmentsQuery to fetch environments instead of the legacy ProjectStore. This removes the Flux dependency and gets environment data via RTK Query, consistent with the rest of the hook. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
Bot
added
feature
Create common/utils/filterProjectFlagClientSide.ts with shared logic for client-side filtering of ProjectFlag objects. Use this in CompareEnvironments instead of duplicating filter logic. This utility is for local filtering (e.g. comparing data from multiple environments). For server-side filtering, use buildApiFilterParams instead. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-actions
Bot
added
feature
2 participants
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Please describe.
How did you test this code?
Compared features in production