mirror of
https://github.com/coder/coder.git
synced 2026-10-25 17:53:46 +08:00
Jake Howell
726e86cef7
> 🤖 This PR was written by Coder Agents on behalf of Jake Howell. Follow-up to #27798. That PR introduced a shared `Drawer` primitive by adding [`vaul`](https://github.com/emilkowalski/vaul) as a dependency. As raised in review, `vaul` is currently unmaintained, and this drawer is the only place in the UI using that concept. This PR takes the [suggested](https://github.com/coder/coder/pull/27798#pullrequestreview-4901095865) route: a dead-simple, self-owned drawer that covers this one case well, built directly on Radix UI's `Dialog` (already a dependency via `radix-ui`) instead of `vaul`. It keeps the same shadcn-style API (`Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription`, `DrawerClose`) so usage stays familiar, and migrates `CreateTemplatePage`'s `BuildLogsDrawer` off MUI onto it. ### What changed - Add `site/src/components/Drawer/Drawer.tsx`: a reusable drawer/sheet built on `radix-ui` `Dialog`. Supports a `direction` prop (`top`/`bottom`/`left`/`right`, default `right`) with slide animations via `tailwindcss-animate`. No new dependencies. - Migrate `BuildLogsDrawer` from `@mui/material/Drawer` to the new component. Desktop panel stays at 800px via `min(800px, 100%)` so it stays within the viewport on mobile. - Storybook coverage with `play()` functions for both the generic `Drawer` (open/close, direction) and `BuildLogsDrawer` (close via the X button and via Escape assert `onClose`), addressing the earlier P1 review note about covering the controlled close path. ### Why Radix instead of vaul - `radix-ui` `Dialog` is already a dependency and provides accessibility, focus management, and open/close state. - No dependency on an unmaintained package for a single-use concept. - `vaul`'s drag-to-dismiss gesture is not needed for this build-logs use case.