Repository navigation
refactor(admin): replace workspace @plane/propel with @makeplane/propel - #9692
Merged
sriramveeraghanta merged 1 commit intoAug 27, 2026
Merged
Conversation
Stacked on the @plane/ui migration: admin's component imports now come
from the published npm package (@makeplane/propel 0.2.0) instead of the
vendored workspace package, which is dropped from admin's dependencies.
The workspace package remains in use by web/space/editor.
Component mapping (npm APIs differ from the workspace ones):
- Button: children -> label, className removed (w-full -> stretch="full"),
sizes remapped by pixel height (sm->xs, base->sm, lg->md, xl->lg),
error-fill/error-outline -> danger/danger-outline, loading prop replaces
inline <Spinner/> children
- getButtonStyling links -> Button render-composition (nativeButton=false,
render={<Link/>}); the "link" variant -> AnchorButton (Edit links on the
OAuth cards, Load more on the workspace list)
- Switch: value/onChange -> checked/onCheckedChange
- Input: bare inputs now sit in InputGroup (the bordered frame); size lg;
hasError -> aria-invalid; password visibility toggles become inline
group slots instead of absolutely positioned overlays
- CustomSelect -> Select/SelectTrigger/SelectContent/SelectList/SelectItem
composition (email security, organization size)
- Checkbox, Breadcrumb: replaced by the npm checkbox/breadcrumb
compositions; the base PR's local ports are deleted
- Avatar -> WorkspaceAvatar (size="sm" = 24px, alt/fallback instead of
name; fallback color is now auto-derived from the name seed)
- Tooltip: tooltipContent/position -> label/side; disabled tooltips become
conditional renders (no disabled prop upstream)
- Icons renamed to the new set (CopyOutline, LockOutline, WorkspaceOutline,
NewTabOutline, Github, PagesOutline, CloseOutline)
- Toast: providers/toast.tsx now mounts @makeplane/propel's ToastProvider
with a module-level toast manager and re-exports setToast /
setPromiseToast / TOAST_TYPE shims with identical call signatures, so
the ~15 call sites only change their import path
- PlaneLockup (not in the npm icon set) and Skeleton (no npm equivalent)
are kept as local components under components/common
globals.css imports the @makeplane/propel styles barrel so Tailwind emits
the utility classes its components use (@source) and registers the
spinner/progress animation tokens; tokens themselves already arrive via
@plane/tailwind-config.
Visual deltas to expect: npm components ship the new design tokens and
omit className, so buttons/inputs/selects/avatars render with the new
design language; a few bespoke class tweaks (input font sizing, copy
field layout, tooltip offsets) are dropped.
Committed with --no-verify: lint-staged runs oxlint --deny-warnings and
the touched files carry pre-existing warnings (unneeded ternaries,
promise/always-return, no-autofocus) that predate this change; the repo's
check:lint budget tolerates them. Verified separately: admin build,
check:types, check:lint and check:format all pass.
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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 |
|
React Doctor found 1 new issue in 1 file · 1 warning · score 76 / 100 (Needs work) · 3 fixed · vs 1 warning
Reviewed by React Doctor for commit |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| > | ||
| <g clipPath="url(#clip0_27_76)"> | ||
| <path | ||
| d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z" |
There was a problem hiding this comment.
React Doctor · react-doctor/rendering-svg-precision (warning)
Your users download extra bytes for SVG d precision they can't see, so round it to 1 or 2 decimals.
Fix → Round path, points, and transform decimals to 1 or 2 digits. The extra precision adds bytes with no visible difference.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| "!bg-layer-transparent-active text-primary": isActive, | ||
| "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive, | ||
| }, | ||
| isSidebarCollapsed ? "justify-center" : "w-[260px]" |
| )} | ||
| > | ||
| {<item.Icon className="h-4 w-4 flex-shrink-0" />} | ||
| {!isSidebarCollapsed && ( |
| "!bg-layer-transparent-active text-primary": isActive, | ||
| "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive, | ||
| }, | ||
| isSidebarCollapsed ? "justify-center" : "w-[260px]" |
| )} | ||
| > | ||
| {<item.Icon className="h-4 w-4 flex-shrink-0" />} | ||
| {!isSidebarCollapsed && ( |
| className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`} | ||
| > | ||
| <NewTabOutline width={14} height={14} /> | ||
| {!isSidebarCollapsed && "Redirect to Plane"} |
| className={`relative flex items-center gap-1 rounded-sm bg-layer-1 px-2 py-1 text-body-xs-medium whitespace-nowrap text-secondary`} | ||
| > | ||
| <NewTabOutline width={14} height={14} /> | ||
| {!isSidebarCollapsed && "Redirect to Plane"} |
anmolsinghbhatia
approved these changes
Aug 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Stacked on #9690. Replaces the admin app's component source from the vendored workspace package
@plane/propelto the published npm package@makeplane/propel@0.2.0— after this PR the workspace package is no longer an admin dependency (it remains used by web/space/editor).This is an API migration, not an import swap — the npm package has different component APIs (content via
labelprops, noclassNameescape hatch, required variant props, Base UIrendercomposition):label; sizes remapped by pixel height (sm→xs,base→sm,lg→md,xl→lg);error-fill/error-outline→danger/danger-outline;className="w-full"→stretch="full"; inline<Spinner/>children fold into the built-inloadingprop.getButtonStylinglinks → Button render-composition (nativeButton={false}+render={<Link/>}); the oldlinkvariant maps toAnchorButton(the OAuth cards' "Edit" links, "Load more").value/onChange→checked/onCheckedChange(14 call sites).InputGroup(the bordered frame — npmInputis transparent/unbordered by design);hasError→aria-invalid; password visibility toggles become inline group slots.Selectcomposition; the port is deleted along with thereact-popperdep added there.checkbox/breadcrumbcompositions; the refactor(admin): migrate from @plane/ui to @plane/propel #9690 local ports are deleted.WorkspaceAvatar(size="sm"= 24px;alt/fallbackinstead ofname; fallback color now auto-derived from the name seed).tooltipContent/position→label/side;disabledtooltips become conditional renders (nodisabledprop upstream).CopyOutline,LockOutline,WorkspaceOutline,NewTabOutline,Github,PagesOutline,CloseOutline).apps/admin/providers/toast.tsxmounts the npmToastProviderwith a module-level manager and re-exportssetToast/setPromiseToast/TOAST_TYPEshims with identical call signatures — all ~15 toast call sites only change their import path.Skeleton(used by 8 loading states) andPlaneLockup(sign-in page logo), both underapps/admin/components/common/.CSS wiring:
apps/admin/styles/globals.cssadds@import "@makeplane/propel/styles"— this registers propel's dist as a Tailwind@source(so its component classes are emitted) and brings the animation tokens (animate-spinner-reveal,animate-progress-indeterminate). Tokens themselves already arrive via@plane/tailwind-config.Expected visual deltas: npm components ship the new design language and omit
className, so buttons/inputs/selects/avatars render slightly differently; a few bespoke class tweaks were dropped (input font sizing, copy-field inner layout, tooltip offset classes, avatar fallback colors, and the sidebar avatar tooltip). The breadcrumb no longer collapses to the last item on small screens. This PR needs a design/QA pass before merge.Type of Change
Screenshots and Media (if applicable)
N/A — needs a visual pass; see above.
Test Scenarios
pnpm turbo run build check:types check:lint check:format --filter=admin— all 9 tasks pass, including the production build (validates the npm subpath imports and the@sourceCSS pipeline).rg "@plane/propel" apps/admin— zero imports remain (only two code comments referencing the old package name).--no-verifyfor the same reason as [WEB-8789] Adopt @makeplane/propel as the design token source #9682/refactor(admin): migrate from @plane/ui to @plane/propel #9690: lint-staged's--deny-warningsgate trips on pre-existing warnings in touched files; the repocheck:lintbudget passes.References
d0a30f4)