Skip to content

feat: branch deployment previews via @branch path segments#9011

Draft
ericpgreen2 wants to merge 12 commits intomainfrom
ericgreen/branch-selector-ui
Draft

feat: branch deployment previews via @branch path segments#9011
ericpgreen2 wants to merge 12 commits intomainfrom
ericgreen/branch-selector-ui

Conversation

@ericpgreen2
Copy link
Contributor

@ericpgreen2 ericpgreen2 commented Mar 10, 2026

Adds the ability for project admins to preview branch deployments in Rill Cloud. Branches are addressed via @branch path segments in the URL (e.g., /acme/analytics/@eric~revenue-metrics/explore/dashboard).

Closes APP-776

User-facing changes:

  • A branch selector pill in the header breadcrumbs lets admins switch between deployments, showing each branch's status
  • Navigating between pages within a project automatically preserves the active branch
  • Stopped branch deployments show a "Start deployment" button for users with manageDev permission
  • The branch selector remains visible on stopped/errored deployment pages so users can navigate back to production

Implementation:

  • A SvelteKit reroute hook strips @branch before route matching, so all existing routes work transparently
  • Branch names containing / are encoded as ~ (which git disallows), making them safe for URL paths
  • 44 unit tests for branch-utils.ts covering encoding, extraction, injection, navigation interception, and round-trip correctness

Checklist:

  • Covered by tests
  • Ran it and it works as intended
  • Reviewed the diff before requesting a review
  • Checked for unhandled edge cases
  • Linked the issues it closes
  • Checked if the docs need to be updated. If so, create a separate Linear DOCS issue
  • Intend to cherry-pick into the release branch
  • I'm proud of this work!

Developed in collaboration with Claude Code

Add a branch selector chip to the project header that lets admins
switch between branch deployments directly in the cloud UI. Gated
on `readDev` permission.

- New `BranchSelector` component (chip + dropdown, modeled after `ViewAsUserChip`)
- Read `?branch=X` query param in project layout, pass to `GetProject` API
- Warning banner when viewing a non-production branch deployment
- Branch param preserved across tab navigation via `branchSearchSuffix`
- "Start deployment" button for stopped branch deployments
- Deduplicates `ListDeployments` by branch; live status from `GetProject`
- "View As" composes with branch context
Move `BranchSelector` from a standalone header chip into the avatar
button dropdown as a submenu (like "View as"), reducing visual clutter
when viewing branch deployments. Replace `ProjectAccessControls` wrapper
in `AvatarButton` with a `projectPermissions` prop passed from
`ProjectHeader`, eliminating a redundant `GetProject` query. Clean up
branch-related props from `SlimProjectHeader` and `ProjectHeader`.
…ments

Replace `?branch=X` query params with `@branch` path segments for branch
deployment previews (e.g., `/org/project/@feature-x/explore/dashboard`).

- Add `reroute` hook to strip `@branch` before route matching
- Add `beforeNavigate` hook to inject `@branch` into branch-unaware links
- Add `branch-utils.ts` with path manipulation helpers
- Use `~` encoding for `/` in branch names (git disallows `~` in refs)
- Branch menu items render as `<a>` tags for href preview on hover
- Back/forward browser history works correctly (skip injection on popstate)
@ericpgreen2 ericpgreen2 self-assigned this Mar 10, 2026
- Rewrite BranchSelector from avatar dropdown submenu to standalone
  dropdown styled as a compact pill (matching the Chip component's
  dimension style) positioned after the project breadcrumb
- Add `after-project` slot to Breadcrumbs component for the pill
- Remove the yellow branch preview banner (redundant with the pill)
- Show branch selector on all project pages, not just Home
- Branch-centric labels: trigger shows truncated branch name,
  dropdown shows branch names with "production" suffix for primary
- Gate on `readDev` permission
@ericpgreen2 ericpgreen2 changed the title feat: branch deployment selector with @branch path segments feat: branch deployment previews via @branch path segments Mar 11, 2026
- Add TTL-based auto-expiry (500ms) to skip-branch-injection flag to
  prevent stale flags from leaking across navigations
- Extract stopped deployment UI into `BranchDeploymentStopped` component
  using the project's Button and CTA layout patterns
- Show spinner for STOPPING state instead of the "Start deployment" button
- Move `startDeploymentMutation` into the extracted component so it is
  not instantiated on every project page load
- Replace hardcoded "main" fallback with `primaryBranch` from the
  project query
- Add clarifying comments for ISO 8601 string comparison and breadcrumb
  depth assumption
Move branch-related files into a dedicated feature directory and
centralize logic that was scattered across the codebase:

- Move BranchSelector, BranchDeploymentStopped, branch-utils to features/branches/
- Extract `getBranchRedirect` from the project layout's beforeNavigate hook
- Reuse `removeBranchFromPath` in hooks.ts reroute (removes duplicate regex)
Move the beforeNavigate branch injection logic into a single testable
function in branch-utils.ts. The layout's callback becomes a one-liner
that delegates to the feature module.
- Replace BranchSelector's `getStatusColor` with shared `getStatusDotClass`
- Remove duplicate `GetProject` query from BranchSelector; accept
  `primaryBranch` as a prop threaded from the layout
- Change `getBranchRedirect` to accept a `URL` object instead of three
  string parameters
- Reorder `handleBranchNavigation` guards so `activeBranch` is checked
  before consuming the skip flag
- Simplify `consumeSkipBranchInjection` to always-clear-on-read
- Replace redundant integration tests with a search+hash test and add
  prefix-collision edge case for `getBranchRedirect`
`SlimProjectHeader` is rendered when the deployment isn't running.
Without the `BranchSelector`, users on a stopped branch deployment
had no way to switch back to production or another branch.
@ericpgreen2 ericpgreen2 mentioned this pull request Mar 13, 2026
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant