refactor(site): replace leftover MUI form controls inside dialogs - #27523
Closed
jakehwll wants to merge 11 commits into
Closed
refactor(site): replace leftover MUI form controls inside dialogs#27523jakehwll wants to merge 11 commits into
jakehwll wants to merge 11 commits into
Conversation
The dialog de-MUI branch had accidentally downgraded vite from 8.0.16 to 8.0.10 (with the corresponding pnpm-lock churn) via an unrelated change. Restore site/package.json and site/pnpm-lock.yaml to match main.
…ponent
Replace hand-rolled inline { open; onOpenChange? } / { open; onClose } prop
types with composition of the underlying dialog's props:
- TaskFeedbackDialog composes ComponentProps<typeof Dialog>.
- UpdateBuildParametersDialog and MissingTemplateVariablesDialog compose
MUI DialogProps, matching the components they still render.
This restores the prior DialogProps-style composition and forwards the full
dialog prop surface instead of a fixed subset.
- Stop exporting ConfirmDialogType; it is only used within ConfirmDialog, and the dangling export failed knip (lint job). - Update the WorkspacePage orphan-on-delete test to select the orphan checkbox by test id. The migrated radix Checkbox sets the test id on the role=checkbox button itself, so the previous within(...).getByRole did not match (test-js job).
UpdateBuildParametersDialog and MissingTemplateVariablesDialog were the only
remaining users of MUI Dialog in site/src. Port them to the internal Dialog
primitives (DialogContent/Header/Title/Description/Footer + Button), keeping
the form submit semantics, the loading state, and the public
{ open, onClose, ... } API so call sites are unchanged. radix now wires
aria-labelledby/aria-describedby from the title/description, removing the
duplicated update-build-parameters-title id.
Revert the earlier 8.0.16 restore. vite 8.0.16 breaks the local dev site; 8.0.10 is the working version for this branch. The 8.0.16 bump is handled on a separate branch.
Restore site/package.json and site/pnpm-lock.yaml to match main. The vite version bump is handled on a separate branch and does not belong in the dialog migration.
…oxes Constrain the migrated parameter dialogs to the viewport and make their form regions scrollable so the footer stays reachable for long parameter and variable lists. Feed the schedule dialog checkboxes their checked state so the check icon reflects the selection, and add interaction coverage that exercises the prevention options, submit, and cancel flows.
Swap the Material UI TextField, Checkbox, and FormControlLabel that still lived inside migrated dialogs for the internal Input, Label, Textarea, FormField, and Checkbox primitives: - FileDialog (create/rename): Input + Label + inline error text. - AnnouncementBannerDialog: Textarea + helper text. - PublishTemplateVersionDialog: FormField for the name, Textarea for the message, and the internal Checkbox for the promote toggle. Drop the stale disablePortal workaround now that the shell is radix, not MUI. - SingleSignOnSection: the in-dialog confirm-password field uses Input + Label + inline error. Port the AnnouncementBannerDialog story to fn() with a message-edit interaction.
Contributor
Author
|
deMUI-ification happened elsewhere. This is dead 🙂 🥳 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Followup to #27506. That PR migrated every dialog shell off Material UI; this one removes the MUI form controls that still lived inside those dialogs so the dialogs are fully MUI-free.
Note
Stacked on
jakehwll/demui-dialogs(#27506). The base will be retargeted tomainonce #27506 merges.What changed
FileDialog(create + rename): MUITextField→ internalInput+Labelwith inline error text.AnnouncementBannerDialog: MUI multilineTextField→ internalTextareawith helper text.PublishTemplateVersionDialog:TextField→FormField(version name) andTextarea(message);Checkbox+FormControlLabel→ internalCheckboxwith a<label>. Removed the staledisablePortalworkaround on the help popover now that the shell is radix rather than MUI.SingleSignOnSection: the confirm-password field inside the "Change login type" dialog usesInput+Labelwith inline error. It intentionally does not usePasswordField, which runs debounced password-strength validation meant for new passwords.AnnouncementBannerDialogstory tofn()and added a message-edit interaction.Out of scope
Page-body MUI form fields (for example the Organization settings form) are untouched; this PR only covers controls rendered inside dialog content. The remaining
@mui/material/LinkinSingleSignOnSectionis page-body, not dialog content.Testing
pnpm run lint:types,knip, Biome check, andpnpm buildall pass.TemplateVersionEditorPage.test.tsx(21) andSecurityPage.test.tsx(4) pass; the publish test exercises the migrated name/message/promote controls.AnnouncementBannerDialog.stories.tsxpasses, including the new message-edit interaction.Implementation plan
Scope
FileDialog.tsx(CreateFileDialog+RenameFileDialog): MUITextField(localuseState, error/helper, Enter-to-confirm, autoFocus) → internalInput+Label+ error<span>, preserving the error/aria-invalidbehaviour.AnnouncementBannerDialog.tsx: multilineTextField(formik) →Textarea+ helper text, keeping the Markdown helper andaria-label="Message". Port the existing story.PublishTemplateVersionDialog.tsx: name →FormField; message →Textarea+Label;Checkbox+FormControlLabel→ internalCheckbox+<label>. Evaluate and remove thedisablePortalworkaround.SingleSignOnSection.tsx: in-dialog passwordTextField→Inputtype="password"+Label+ error text.Non-goals
<Dialog />s off MUI #27506 handled those).Validation
Biome,
lint:types,knip,pnpm build, unit suites for the touched areas, the ported story under the storybook vitest project, and manual dogfood sighting of every affected dialog (banner, publish version, create/rename file, change login type).Done criteria
No
@mui/materialinside dialog content for the in-scope files; all automated checks green; affected dialogs visually verified.