refactor: replace TeamDialog with TeamSheet and improve teams table layout

[impoiler]

Summary

Replaces the team create/edit Dialog with a Sheet (slide-over panel) to provide a more spacious, scrollable editing experience. Also improves the teams table layout to fill the viewport height and updates the pagination controls to a more compact style.

Changes

• Renamed teamDialog.tsx → teamSheet.tsx and replaced the Dialog component with a Sheet, giving the form a full-height side panel with a sticky header and sticky footer action bar.
• Replaced the generic FormFooter component with inline Cancel and Submit buttons inside the sheet footer, adding a Tooltip to surface validation errors and permission warnings directly on the disabled submit button.
• Added isFetching from useGetTeamsQuery and passed it down as isLoading to TeamsTable, preventing a premature empty state render while data is still loading.
• Updated the outer container in TeamsView to use h-[calc(100vh_-_50px)] flex flex-col overflow-y-auto so the table fills the available viewport height.
• Made the teams table layout flex/grow so the table body expands to fill available space, with a sticky TableHeader and a grow table container.
• Reworked pagination into a compact style using ghost icon-only prev/next buttons and a "Page X of Y" indicator with localized entry counts.

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (React)
• Docs

How to test

cd ui
pnpm i || npm i
pnpm build || npm run build

1. Navigate to the Governance → Teams page.
2. Verify the teams table fills the viewport height with a sticky header and compact pagination footer.
3. Click Create Team — confirm a sheet slides in from the right instead of a modal dialog.
4. Attempt to submit with invalid data — confirm the tooltip on the disabled submit button shows the relevant validation error.
5. Click outside the sheet — confirm it does not close (interaction outside is prevented).
6. Press Escape or click Cancel — confirm the sheet closes correctly.
7. Edit an existing team and save — confirm the sheet closes and the table refreshes.

Screenshots/Recordings

Before/after screenshots recommended showing the dialog → sheet transition and the updated table layout.

Breaking changes

• No

Related issues

Security considerations

None.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

Warning

Review limit reached

@impoiler, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 3 minutes and 43 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8b1a1f52-52e3-4718-8e34-7f48831a95e6

📥 Commits

Reviewing files that changed from the base of the PR and between 0ed3e1e and f91817e.

📒 Files selected for processing (3)

• ui/app/_fallbacks/enterprise/components/user-groups/teamsView.tsx
• ui/app/workspace/governance/views/teamSheet.tsx
• ui/app/workspace/governance/views/teamsTable.tsx

📝 Walkthrough

Walkthrough

This PR refactors the team management interface by migrating from a Dialog-based modal to a Sheet-based side panel. It introduces loading state propagation from query hooks through the component hierarchy, replaces the shared FormFooter with inline sticky action controls, and redesigns the pagination UI with updated button styling and accessibility attributes.

Changes

Teams Sheet Redesign and Loading State

Layer / File(s)	Summary
TeamSheet component contract and imports ui/app/workspace/governance/views/teamSheet.tsx	TeamSheetProps interface replaces TeamDialogProps; imports for Sheet, Button, and tooltip components are added; FormFooter import is removed.
Sheet modal implementation and sticky footer ui/app/workspace/governance/views/teamSheet.tsx	Dialog wrapper is replaced with Sheet + SheetContent structure; FormFooter is replaced with inline sticky bottom action bar containing Submit and Cancel buttons; button disabled state is driven by loading, validator validity, and RBAC permission.
Badge calculation and validator formatting ui/app/workspace/governance/views/teamSheet.tsx	Validator conditionals and "Current Usage" badge percentage calculations for budgets, tokens, and requests are reformatted; underlying logic and behavior remain unchanged.
TeamsTable Sheet integration and pagination rework ui/app/workspace/governance/views/teamsTable.tsx	TeamsTable imports and mounts TeamSheet instead of TeamDialog; optional isLoading prop is added to TeamsTableProps and used to gate empty-state rendering; pagination UI is reworked from a simpler layout to a compact flex layout with updated button props, aria-labels, and text formatting.
TeamsView loading state wiring ui/app/_fallbacks/enterprise/components/user-groups/teamsView.tsx	isFetching is destructured from useGetTeamsQuery; page layout div is updated to flex column with explicit height and vertical scrolling; isFetching is passed as isLoading prop to TeamsTable.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• akshaydeo

Poem

🐰 A Sheet replaces the Dialog's fold,
With sticky feet and buttons bold,
Through TeamsView flows the loading state,
Pagination UI, redesigned and great!
Side panels now the teams await. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main changes: replacing TeamDialog with TeamSheet and improving the teams table layout.
Description check	✅ Passed	The description is comprehensive and well-structured, covering all template sections with clear explanations of changes, testing steps, and accurate type/area selections.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 05-26-chore_moved_team_creation_from_popup_to_sheet

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[impoiler]

• feat: replace enabled badge with toggle switch and add edit action in MCP clients table #3809
• fix: exclude sonner toast elements from sheet outside-click detection #3805
• refactor: reuse SheetNavigationButtons component and useSheetNavigation hook #3804
• refactor: extract dashboard tab data-fetching into dedicated TabView components #3797
• feat: add GetDimensionRankings API and dashboard tabs for team, customer, BU, and user rankings #3766
• refactor: replace TeamDialog with TeamSheet and improve teams table layout #3757 👈 (View in Graphite)
• feat: add SearchSelect component with sync and async support #3752
• fix: persist customers pagination/search in URL state and improve table layout #3751
• feat: add prev/next navigation to RoutingRuleInfoSheet #3745
• feat: add prev/next navigation to MCPClientSheet #3744
• feat: add keyboard navigation and URL state for virtual key detail sheet #3740
• feat: add useSheetNavigation hook and SheetNavigationButtons component #3739
• refactor: replace CustomerDialog with CustomerSheet for customer create/edit #3726
• feat: log database type when connecting in NewConfigStore #3724
• dev

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Confidence Score: 5/5

Safe to merge — purely a UI refactor with no changes to data-fetching logic, auth, or backend contracts.

All three changed files are UI-only. The Dialog → Sheet swap is self-contained, the isLoading guard prevents a known premature empty-state flash, and the layout changes are confined to flex/grow utilities. The SheetContent's custom-scrollbar utility supplies overflow:auto so sticky header and footer positioning work correctly.

No files require special attention.

Important Files Changed

Filename	Overview
ui/app/workspace/governance/views/teamSheet.tsx	Dialog replaced with Sheet; inline footer with validation tooltip added; mostly formatting/indentation changes; sticky header/footer layout is correct given SheetContent's custom-scrollbar utility applies overflow:auto
ui/app/workspace/governance/views/teamsTable.tsx	Updated to use TeamSheet, adds isLoading guard on empty-state check, compact pagination, flex/grow table layout
ui/app/_fallbacks/enterprise/components/user-groups/teamsView.tsx	Adds isFetching from useGetTeamsQuery and passes it as isLoading to TeamsTable; viewport-height container class added

_{Reviews (5): Last reviewed commit: "chore: moved team creation from popup to..." | Re-trigger Greptile}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

ui/app/workspace/governance/views/teamSheet.tsx (1)

225-287: 🛠️ Refactor suggestion | 🟠 Major | 🏗️ Heavy lift

Add a Zod schema as the source-of-truth for TeamSheet form validation

ui/app/workspace/governance/views/teamSheet.tsx builds validation via the custom Validator (useMemo) and blocks submit with validator.isValid()/toast.error(...) (lines ~225-287, ~296-303), with no Zod schema (no zod/Zod/zodResolver imports/usages) present for this form. Introduce a Zod schema for this form’s validation contract (including the cross-row unique resetDuration rule and the token/request rate-limit rules) and use it as the single source of truth for handleSubmit.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/app/workspace/governance/views/teamSheet.tsx` around lines 225 - 287,
Replace the ad-hoc Validator logic in the useMemo (validator) with a Zod schema
that becomes the single source-of-truth for TeamSheet form validation: import
zod, define a schema that mirrors formData (name, budgets array with maxLimit
and resetDuration, tokenMaxLimit/tokenResetDuration,
requestMaxLimit/requestResetDuration), add refinements for per-budget min values
and a .superRefine or refine to enforce cross-row uniqueness of resetDuration
among budgets with maxLimit present, and add conditional refinements so
tokenResetDuration is required when tokenMaxLimit is set (and similarly for
requestResetDuration/requestMaxLimit) and enforce minLimit >= 1 for
token/request limits; then wire schema validation into handleSubmit (use
zod.safeParse or a zodResolver if using react-hook-form) to block submit and
surface errors instead of calling validator.isValid(), and remove or deprecate
the existing Validator usage (function names to locate: validator, formData,
useMemo block, tokenMaxLimitNum, requestMaxLimitNum, handleSubmit).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@ui/app/workspace/governance/views/teamSheet.tsx`:
- Around line 756-763: The Cancel footer Button in teamSheet.tsx is missing a
stable data-testid which breaks E2E tests; update the Button JSX (the Cancel
action using props onCancel and disabled={loading}) to include a consistent
data-testid attribute (e.g., data-testid="team-sheet-cancel-button") so test
harnesses can reliably select it; ensure the attribute is added to the same
Button element that renders the Cancel action and matches the naming convention
used elsewhere in this form.

---

Outside diff comments:
In `@ui/app/workspace/governance/views/teamSheet.tsx`:
- Around line 225-287: Replace the ad-hoc Validator logic in the useMemo
(validator) with a Zod schema that becomes the single source-of-truth for
TeamSheet form validation: import zod, define a schema that mirrors formData
(name, budgets array with maxLimit and resetDuration,
tokenMaxLimit/tokenResetDuration, requestMaxLimit/requestResetDuration), add
refinements for per-budget min values and a .superRefine or refine to enforce
cross-row uniqueness of resetDuration among budgets with maxLimit present, and
add conditional refinements so tokenResetDuration is required when tokenMaxLimit
is set (and similarly for requestResetDuration/requestMaxLimit) and enforce
minLimit >= 1 for token/request limits; then wire schema validation into
handleSubmit (use zod.safeParse or a zodResolver if using react-hook-form) to
block submit and surface errors instead of calling validator.isValid(), and
remove or deprecate the existing Validator usage (function names to locate:
validator, formData, useMemo block, tokenMaxLimitNum, requestMaxLimitNum,
handleSubmit).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8ec2001c-86a9-432e-bf8f-dbc2b05b7035

📥 Commits

Reviewing files that changed from the base of the PR and between 051f5c7 and 0ed3e1e.

📒 Files selected for processing (3)

• ui/app/_fallbacks/enterprise/components/user-groups/teamsView.tsx
• ui/app/workspace/governance/views/teamSheet.tsx
• ui/app/workspace/governance/views/teamsTable.tsx

[akshaydeo]

Merge activity

• May 27, 1:44 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• May 27, 1:55 PM UTC: @akshaydeo merged this pull request with Graphite.