refactor: migrate web Tabs to @makeplane/propel - #9752
Conversation
◈ PR Lens
Architecture 
5 components touched across 2 lanes. Inside the changed components — 1 viewComponent view — Web App Tabs Migration Internal view of web app UI modules (analytics dashboard, image picker popover, and page navigation pane) migrating to the updated @makeplane/propel tabs API. 
Data flow No data-flow sequence changed in this PR. Drill down
|
|
React Doctor found 1 new issue in 1 file · 1 warning · score 89 / 100 (Great) · 1 fixed · vs 1 warning
Reviewed by React Doctor for commit |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Team Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughThe web application migrated analytics, image picker, and navigation pane tabs from the old compound API to the new Propel tab components. Flex and grid wrappers now provide full-height tab layouts where the new components do not accept ChangesPropel Tabs API Migration
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: ⚪ Minimal · up to This change migrates tab interfaces to the published Propel components while retaining the existing tab behaviors and layout intent. No concrete merge-blocking risk is identified. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
🟡 Changes recommended
The cover image picker layout changes remove prior panel spacing/padding in a way that likely contradicts the PR’s stated goal of matching the previous picker sizing.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR refactors remaining web call sites to use the published @makeplane/propel/components/tabs API instead of the in-repo @plane/propel/tabs, aligning workspace analytics, the cover image picker, and the page navigation pane with the new tabs primitives and layout constraints (notably around missing className support).
Changes:
- Migrated tab triggers/panels to
Tab/TabsList/TabsPaneland updated props (e.g.,label). - Adjusted fill-height layouts by adding flex/grid wrappers where panels/roots can’t be styled directly.
- Updated the cover image picker tab strip to stretch full-width using wrapper selectors to match prior sizing.
File summaries
| File | Description |
|---|---|
| apps/web/core/components/pages/navigation-pane/tabs-list.tsx | Swaps the list/trigger implementation to TabsList + Tab with label. |
| apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx | Replaces Tabs.Content with TabsPanel and wraps panels in a 1-row grid for fill-height behavior. |
| apps/web/core/components/pages/navigation-pane/root.tsx | Updates tabs root import and adds wrappers to preserve full-height layout with the published Tabs. |
| apps/web/core/components/core/image-picker-popover.tsx | Migrates picker tabs to published components and reworks layout/scrolling and full-width tabs. |
| apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx | Migrates analytics tabs to published components and wraps panels in a 1-row grid for fill-height behavior. |
Review details
- Files reviewed: 5/5 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Replace in-repo @plane/propel/tabs with @makeplane/propel/components/tabs in analytics, the image picker popover, and the page navigation pane. Published Tabs omit className on Tabs and TabsPanel, so fill-height layouts use a flex/grid wrapper instead. Tabs.Trigger, Tabs.Content, and Tabs.Indicator become Tab, TabsList, and TabsPanel.
Published TabsList is inline-flex, so Images/Upload hugged content instead of spanning the 36rem panel. Stretch the list to the previous full-width segmented bar.
preview's lockfile still resolved apps/space to 0.2.0 after the catalog bump, so pnpm install --frozen-lockfile failed in CI.
58c8660 to
dc818f9
Compare
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
Match the previous scroll wrapper inset so thumbnail grid sizing stays aligned with the 36rem picker layout.
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
Description
Replace in-repo
@plane/propel/tabswith published@makeplane/propel/components/tabsat the remaining web call sites: workspace analytics, the cover image picker, and the page navigation pane.Tabs.List/Tabs.Trigger/Tabs.Content/Tabs.Indicatormap toTabsList/Tab/TabsPanel.Tabtakeslabelinstead of children. The sliding indicator is dropped; tabs usevariant="contained".Published
TabsandTabsPanelomitclassName, so fill-height layouts wrap the panel in a one-row grid (analytics and page nav) and the tabs root in a flex container (page nav).Cover picker follow-up: the 36rem shell was unchanged, but published
TabsListisinline-flex, so Images / Upload hugged content (~123px) instead of spanning the panel like the old full-width bar. The list is stretched to full width with equal-width tabs so the picker matches the previous size. Unsplash search, static image pick, and upload behavior are unchanged.Type of Change
Screenshots and Media (if applicable)
Cover image picker (create project → Change cover):
Before (compact tab strip)
After (full-width Images / Upload bar, same 36rem panel)
Test Scenarios
/<workspace>/analytics, switch Overview / Scope / Demand / Supply (and any disabled tabs). Confirm the URL updates, filter actions stay on the right, and the active panel fills remaining height and scrolls.paneTabsurvives pane toggle.References
Summary by CodeRabbit