[feat] Consolidate project + org into one bottom-docked sidebar switcher - #5738
Conversation
- Implemented AuthUpgradeHost to manage organization authentication upgrades. - Integrated AuthUpgradeHost into the main layout for rendering. - Created ProjectOrgSwitcher component for switching between projects and organizations. - Added SidebarLogo component for branding in the sidebar. - Updated SidebarShell to render additional components in the sidebar. - Enhanced sidebar scopes to include new components and functionality. - Introduced hooks for managing project and organization switching logic. - Added functionality to copy organization and project IDs in settings. - Established state management for authentication upgrade prompts.
dosubot
Bot
added
the
size:XL
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
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: Organization UI 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:
📝 WalkthroughSummary by CodeRabbit
WalkthroughThe change adds a shared project and organization switcher, integrates it into both sidebar scopes, adds app-level authentication-upgrade handling, moves live chat into Help & Docs, and adds organization and project ID copy controls. ChangesSidebar and auth-upgrade integration
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectOrgSwitcher
participant useProjectOrgSwitcher
participant authUpgradeAtom
participant AuthUpgradeHost
participant AuthUpgradeModal
User->>ProjectOrgSwitcher: select organization
ProjectOrgSwitcher->>useProjectOrgSwitcher: request organization switch
useProjectOrgSwitcher->>authUpgradeAtom: store upgrade context
AuthUpgradeHost->>AuthUpgradeModal: render upgrade prompt
AuthUpgradeModal->>AuthUpgradeHost: complete or cancel upgrade
AuthUpgradeHost->>authUpgradeAtom: reset upgrade state
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
web/oss/src/state/org/authUpgrade.ts (1)
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winMove
AuthUpgradeDetailout of the component module.The state module imports a type from a Sidebar component. This inverts the dependency direction: state now depends on a UI component file. Any consumer of
authUpgradeAtompulls the component module path into its type graph.Declare
AuthUpgradeDetailinweb/oss/src/state/org/authUpgrade.ts(or a shared types module) and letAuthUpgradeModalimport it from there.web/oss/src/components/Sidebar/hooks/useProjectOrgSwitcher.ts (1)
65-72: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low value
safeOrganizationListdefeats thecurrentOrgmemo.Line 65 builds a new array on every render when
organizationListis an array. TheuseMemoon line 66 lists it as a dependency, so the memo recomputes on every render.Memoize the normalization.
♻️ Proposed refactor
- const safeOrganizationList = Array.isArray(organizationList) ? organizationList : [] + const safeOrganizationList = useMemo( + () => (Array.isArray(organizationList) ? organizationList : []), + [organizationList], + )As per coding guidelines: "Minimize React re-renders with
useMemo,useCallback, andReact.memowhere appropriate; avoid unstable inline functions and objects".Source: Coding guidelines
web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx (1)
166-173: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd an accessible name to the icon-only close button.
The button contains only an
Xicon.titlesupplies an accessible name only as a last-resort fallback, and screen reader support for it is inconsistent. Addaria-label.♿ Proposed fix
<button type="button" + aria-label="Close" title="Close" onClick={close}
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f81e7971-dd2b-453a-b54c-82d421fde7e9
📒 Files selected for processing (13)
web/oss/src/components/Layout/AuthUpgradeHost.tsxweb/oss/src/components/Layout/Layout.tsxweb/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsxweb/oss/src/components/Sidebar/components/SidebarLogo.tsxweb/oss/src/components/Sidebar/engine/SidebarShell.tsxweb/oss/src/components/Sidebar/engine/types.tsweb/oss/src/components/Sidebar/hooks/useProjectOrgSwitcher.tsweb/oss/src/components/Sidebar/scopes/bottomSection.tsxweb/oss/src/components/Sidebar/scopes/mainScope.tsxweb/oss/src/components/Sidebar/scopes/settingsScope.tsxweb/oss/src/components/pages/settings/Organization/General.tsxweb/oss/src/components/pages/settings/Projects/index.tsxweb/oss/src/state/org/authUpgrade.ts
Railway Preview Environment
Updated at 2026-08-05T11:46:54.319Z |
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)
web/oss/src/components/Sidebar/scopes/bottomSection.tsx (1)
7-7: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winRemove the standalone
Invite Teammaterow.The PR objective removes this row.
inviteItemis still included in both branches at Line [149] and Line [150]. Eligible users will still see it. Remove it from both arrays, then remove its unused definition and related references.Proposed fix
items: includeSettingsLink - ? [settingsLink, inviteItem, ...sharedItems] - : [inviteItem, ...sharedItems], + ? [settingsLink, ...sharedItems] + : sharedItems,As per PR objectives, the standalone “Invite Teammate” row is removed.
Also applies to: 19-22, 37-38, 72-83, 145-154
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c0aae551-fe11-456f-9dd0-f72c3c6ed0e9
📒 Files selected for processing (1)
web/oss/src/components/Sidebar/scopes/bottomSection.tsx
2 participants
Context
Switching organizations lived in a dropdown at the top of the sidebar (
ListOfOrgs), project switching lived separately, and the auth-upgrade modal was buried inside that sidebar selector. There was also no way to copy an org or project ID from the UI. This reorganizes the sidebar so project and org live in a single switcher docked at the bottom of the rail, puts the brand logo at the top, and surfaces the IDs in Settings.Implements the proposal in #5730. Design: https://claude.ai/code/artifact/35620381-537c-4969-b89e-e15bd67b86d7
Changes
One switcher, docked at the bottom. New
ProjectOrgSwitchershows the current project over its org, like a workspace switcher. Clicking it opens a projects panel (projects in the current org, active one checked); "Switch organization" slides to an orgs panel; both panels also host create-project / create-org / org-settings / logout. It renders through a newafterBottomsidebar slot so it pins below everything else in both the main and settings scopes. The old top-of-sidebarListOfOrgsdropdown is no longer used by these scopes (it stays in the repo because EE's post-signup header still imports it).Before: org dropdown at the top of the rail; project switching elsewhere.
After:
[avatar] Project / Org ⌄pinned at the bottom, expanding into projects ↔ orgs panels.Auth-upgrade flow lifted out of the sidebar. The switch/create/logout logic is consolidated into a new
useProjectOrgSwitcherhook. When switching an org returnsAUTH_UPGRADE_REQUIRED/AUTH_SSO_DENIED, the hook now only sets a new app-levelauthUpgradeAtom; a singleAuthUpgradeHostmounted inLayoutowns rendering and teardown of the modal.Before: the modal and its success-detection effect lived inside the sidebar selector component.
After: any entry point sets
authUpgradeAtom;AuthUpgradeHostrenders it once at the app level and clears it (plus its localStorage keys) when the target org becomes active or the user cancels.Brand logo header. New
SidebarLogosits at the top: full wordmark when expanded, symbol when collapsed. Dark mode uses the yellow accent variant.Copy IDs in Settings. Organization → General gains an "Organization ID" field with a Copy button. The Projects table gains a per-row copy button next to the project ID.
Bottom-section cleanup. Removed the standalone "Invite Teammate" row and moved "Live Chat Support" into the Help submenu (its divider now only renders when the row actually shows).
Tests / notes
pnpm linton@agenta/osspasses (only pre-existing unrelated warnings inDrives/useDriveTreeViewport).authUpgradeOrgId,authUpgradeSessionIdentities) are still read by the auth-redirect flow (state/url/auth.ts,fetchClient.ts,axiosConfig.ts); shared constants now live instate/org/authUpgrade.ts.ListOfOrgs/ListOfProjectsare intentionally left in place for EE'sPostSignupHeader; retiring them is a follow-up.What to QA
Preview
Click to expand
References