This pull-request implement animations for each of our `<ChevronDown />`
(and a few other chevrons) so that everything is uniform with
`<Autocomplete />`.
Closes#21830
Remove redundant icon sizing across the frontend. Components like
`Button`, `DropdownMenuItem`, and `CommandItem` already control child
SVG sizes via CSS selectors (e.g., `[&>svg]:size-icon-lg`), so explicit
`size` props and `className` overrides on icons nested inside them are
unnecessary. This PR strips those out and lets parent components handle
sizing consistently.
As a bonus, also migrates the `DropdownArrow` component from Emotion
CSS-in-JS to Tailwind utilities, replaces raw `<a>` tags with the `<Link
/>` component in the Premium page, and adds Storybook coverage for
`PremiumPageView`.
This pull-request refactors filter-related dropdown and input components
from MUI to our Tailwind-based design system. This is more inline with
the Figma design, controversially we are changing the button group for
canned filters and input to two seperate components.
- **InputGroup**: Complete rewrite to a compound component pattern
(`InputGroup`, `InputGroupAddon`, `InputGroupInput`, `InputGroupButton`)
using Tailwind and CVA, replacing the old CSS-in-JS approach
- **SearchField**: Migrated from MUI TextField to use the new InputGroup
components, with a simplified API and proper ref forwarding
- **Filter/PresetMenu**: Replaced MUI Menu with our DropdownMenu
component, and updated icon to `SlidersHorizontal`
### Changes
| Component | Before | After |
|-----------|--------|-------|
| InputGroup | CSS-in-JS with MUI margin hacks | Compound component with
Tailwind group states |
| SearchField | MUI TextField + InputAdornment | InputGroup +
InputGroupAddon composition |
| PresetMenu | MUI Menu/MenuItem | DropdownMenu/DropdownMenuItem |
| MenuSearch | Complex CSS overrides | Single Tailwind class |
<img
src="https://github.com/user-attachments/assets/5b819027-2dca-4dcc-b6d6-7096fa3775c0"
/>
When a workspace has multiple agents (e.g., main + devcontainer), the
build timeline was showing all events duplicated under each agent
instead of filtering by the agent they belong to.
Added agentId to the Stage type and filter timings by workspace_agent_id
so each agent section only shows its own events.
Fixes#18002
Provisioner steps broken into smaller granular actions.
Changes:
- `ExtractArchive` moved to `init` request (was in `configure`)
- Writing `tfstate` moved to `plan` (was in `configure`)
- Moved most plan/apply outputs to `GraphComplete`
for #19974
Continuing the train of thought from
https://github.com/coder/coder/pull/20849#issuecomment-3560666271: it's
probably better to do away with a custom tooltip component that's only
used in `ResourcesChart`/`ScriptsChart`/`StagesChart` and only slightly
differs from our base tooltip
Since React 19 supports head tags natively, we no longer need to use
`react-helmet`.
---------
Co-authored-by: ケイラ <mckayla@hey.com>
Co-authored-by: Andrew Aquino <dawneraq@gmail.com>
Relates to https://github.com/coder/coder/issues/15432
* Adds a storybook entry for zero values in provisioner timings.
* Coerces a 'zero' start time to an 'instant'.
* Improves timing chart handling for large timeframes. Previously, this
would have caused the tab to run out of memory when encountering a
`time.Time{}`.
* Render 'instants' as 'invalid' in timing chart.
Fix https://github.com/coder/coder/issues/16409
Since the provisioner timings action is not strongly typed, but it is
typed as a generic string, and we are not using
`noUncheckedIndexedAccess`, we can miss some of the actions returned
from the API, causing type errors. To avoid that, I changed the code to
be extra safe by adding `undefined` into the return type.
Closes https://github.com/coder/coder/issues/16759
## Changes made
- Replaced all instances of `Array.prototype.toSorted` with
`Array.prototype.sort` to provide better support for older browsers
- Updated all `Array.prototype.sort` calls where necessary to remove
risks of mutation render bugs
- Refactored some code (moved things around, added comments) to make it
more clear that certain `.sort` calls are harmless and don't have any
risks
Kayla はな