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"
/>
for #19974
Redo of #20027, this time splitting it into multiple PRs + using our
existing `Tooltip` component instead of creating a new component (see
below). This PR covers the most basic usage of the MUI Tooltip, i.e.,
the tooltip content is a string literal.
~~Adds a global `TooltipProvider` to `AppProviders` and our Storybook
decorators, so that we don't have to render a `TooltipProvider` for
every tooltip instance. Removing redundant `TooltipProvider`s will be
another separate PR~~ <- this was done by #20869
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>
## Changes made
- Patched React `CSSProperties` type to add support for custom CSS
properties
- Updated several of the components in the `components` directory to
Tailwind
- Updated most of the `WorkspacePageBuildView` component to Tailwind to
account for CSS specificity changes
- Updated `Search` to address accessibility violation and removed all
MUI logic
- Updated `Search` stories (added new story, decoupled all stories from
single decorator)
- Updated `autoFocus` behavior in `SearchField`
- Updated the styling for `WorkspacePageBuildView` to make sure the tabs
had enough padding
- Fixed layout effect in `WorkspacePageBuildView` to fire correctly
* chore: move schedule controls to the right side of the screen
* chore: add org display to workspace topbar
* fix: force organizations to be readonly array
* fix update type mismatch for organizations again
* refactor: tuck main loading skeleton for filter into base definition
* refactor: give filter files different names to reduce confusion
* refactor: remove separate base filter skeleton
* fix: update responsive logic for audit table filter
* chore: add organizations option group to workspaces table
* refactor: make prop contracts more explicit
* refactor: centralize the organizations dropdown logic
* fix: update imports and formatting
* fix: update quota querying logic to use new endpoint
* fix: add logic for handling long workspace or org names
* chore: add links for workspaces by org
* chore: expand tooltip styling for org
* chore: expand tooltip styling for owner
* refactor: split off breadcrumbs for readability
* fix: display correct template version name in dropdown
* fix: update overflow styling for breadcrumb segments
* fix: favor org display name
* fix: centralize org display name logic
* fix: make sure skeletons stay synced with org feature toggles
* fix: ensure that mock query cache key and component key are properly synced for storybook
* docs: clean up wording on SearchField comment
* fix: shrink mix width threshold for search field
* chore: add navigation test for workspace details page (#14629)
* chore: add tests for WorkspacePage cross-page navigation
* fix: update story to use mock organizations menu
Danielle Maywood