Skip to content

refactor(site): replace leftover MUI form controls inside dialogs - #27523

Closed
jakehwll wants to merge 11 commits into
mainfrom
jakehwll/demui-dialog-form-controls
Closed

refactor(site): replace leftover MUI form controls inside dialogs#27523
jakehwll wants to merge 11 commits into
mainfrom
jakehwll/demui-dialog-form-controls

Conversation

@jakehwll

Copy link
Copy Markdown
Contributor

🤖 This PR was written by Coder Agents on behalf of Jake Howell.

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 to main once #27506 merges.

What changed

  • FileDialog (create + rename): MUI TextField → internal Input + Label with inline error text.
  • AnnouncementBannerDialog: MUI multiline TextField → internal Textarea with helper text.
  • PublishTemplateVersionDialog: TextFieldFormField (version name) and Textarea (message); Checkbox + FormControlLabel → internal Checkbox with a <label>. Removed the stale disablePortal workaround on the help popover now that the shell is radix rather than MUI.
  • SingleSignOnSection: the confirm-password field inside the "Change login type" dialog uses Input + Label with inline error. It intentionally does not use PasswordField, which runs debounced password-strength validation meant for new passwords.
  • Ported the AnnouncementBannerDialog story to fn() 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/Link in SingleSignOnSection is page-body, not dialog content.

Testing

  • pnpm run lint:types, knip, Biome check, and pnpm build all pass.
  • Unit: TemplateVersionEditorPage.test.tsx (21) and SecurityPage.test.tsx (4) pass; the publish test exercises the migrated name/message/promote controls.
  • Storybook: AnnouncementBannerDialog.stories.tsx passes, including the new message-edit interaction.
  • Manual dogfood sighting of each affected dialog is tracked as a followup on this PR before it leaves draft.
Implementation plan

Scope

  1. FileDialog.tsx (CreateFileDialog + RenameFileDialog): MUI TextField (local useState, error/helper, Enter-to-confirm, autoFocus) → internal Input + Label + error <span>, preserving the error/aria-invalid behaviour.
  2. AnnouncementBannerDialog.tsx: multiline TextField (formik) → Textarea + helper text, keeping the Markdown helper and aria-label="Message". Port the existing story.
  3. PublishTemplateVersionDialog.tsx: name → FormField; message → Textarea + Label; Checkbox + FormControlLabel → internal Checkbox + <label>. Evaluate and remove the disablePortal workaround.
  4. SingleSignOnSection.tsx: in-dialog password TextFieldInput type="password" + Label + error text.

Non-goals

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/material inside dialog content for the in-scope files; all automated checks green; affected dialogs visually verified.

jakehwll added 9 commits July 27, 2026 03:40
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.
Base automatically changed from jakehwll/demui-dialogs to main July 31, 2026 03:23
@github-actions github-actions Bot added the stale This issue is like stale bread. label Aug 18, 2026
@jakehwll

Copy link
Copy Markdown
Contributor Author

deMUI-ification happened elsewhere. This is dead 🙂 🥳

@jakehwll jakehwll closed this Aug 20, 2026
@github-actions github-actions Bot locked and limited conversation to collaborators Aug 20, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

stale This issue is like stale bread.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant