Summary
Add a codemod that migrates the common controlled MUI dialog shell to the BUI Dialog structure used in current Backstage migrations.
This issue intentionally targets the dialog shell and its standard title/body/footer structure, not every product-specific dialog behavior. The codemod should scaffold the common case and leave explicit TODOs when dialog semantics need review.
Detection Criteria
Dialog, DialogTitle, DialogContent, and DialogActions imports from @material-ui/core
- controlled dialog props such as
open and onClose
- local button/footer actions nested inside
DialogActions
Transformation Logic
- Replace the MUI dialog imports with
Dialog, DialogHeader, DialogBody, and DialogFooter from @backstage/ui.
- Map
open to isOpen.
- Rewrite
onClose={onClose} to the standard controlled BUI pattern onOpenChange={isOpen => !isOpen && onClose()} when the original handler is a simple local callback.
- Move
DialogTitle, DialogContent, and DialogActions children into the BUI header/body/footer structure.
- Preserve dialog children and local action buttons, allowing other codemods to migrate the button components themselves.
- Insert
TODO(backstage-codemod): verify dialog width, dismiss behavior, or custom close logic manually when the original dialog uses sizing props, transition props, or nontrivial close semantics.
Before / After Example
Controlled dialog shell:
// Before
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';
import DialogActions from '@material-ui/core/DialogActions';
<Dialog open={open} onClose={onClose}>
<DialogTitle>Title</DialogTitle>
<DialogContent>{body}</DialogContent>
<DialogActions>{actions}</DialogActions>
</Dialog>
// After
import { Dialog, DialogHeader, DialogBody, DialogFooter } from '@backstage/ui';
<Dialog isOpen={open} onOpenChange={isOpen => !isOpen && onClose()}>
<DialogHeader>Title</DialogHeader>
<DialogBody>{body}</DialogBody>
<DialogFooter>{actions}</DialogFooter>
</Dialog>
Notes / Edge Cases
- Backstage migration PRs generally use controlled dialogs rather than
DialogTrigger; the codemod should mirror that proven pattern.
- Do not redesign dialog content structure beyond the shell migration.
- If a dialog interleaves tabs or accordions, those families should be migrated by their own codemods after the shell is rewritten.
- Representative Backstage migrations include
DeleteEntityDialog, UnregisterEntityDialog, and InspectEntityDialog.
Changeset (when implementing)
- Package:
@backstage/migrate-mui-dialog-to-bui-dialog
- Bump: minor (initial release)
- Summary example:
Add codemod to migrate mui dialog to bui dialog for the Backstage MUI 4 to BUI migration
Implementation notes
- Target directory:
codemods/misc/migrate-mui-dialog-to-bui-dialog/
- Branch/worktree:
.worktrees/feat/mui4-to-bui/migrate-mui-dialog-to-bui-dialog
- Open PR when ready; one PR per codemod
Summary
Add a codemod that migrates the common controlled MUI dialog shell to the BUI
Dialogstructure used in current Backstage migrations.This issue intentionally targets the dialog shell and its standard title/body/footer structure, not every product-specific dialog behavior. The codemod should scaffold the common case and leave explicit TODOs when dialog semantics need review.
Detection Criteria
Dialog,DialogTitle,DialogContent, andDialogActionsimports from@material-ui/coreopenandonCloseDialogActionsTransformation Logic
Dialog,DialogHeader,DialogBody, andDialogFooterfrom@backstage/ui.opentoisOpen.onClose={onClose}to the standard controlled BUI patternonOpenChange={isOpen => !isOpen && onClose()}when the original handler is a simple local callback.DialogTitle,DialogContent, andDialogActionschildren into the BUI header/body/footer structure.TODO(backstage-codemod): verify dialog width, dismiss behavior, or custom close logic manuallywhen the original dialog uses sizing props, transition props, or nontrivial close semantics.Before / After Example
Controlled dialog shell:
Notes / Edge Cases
DialogTrigger; the codemod should mirror that proven pattern.DeleteEntityDialog,UnregisterEntityDialog, andInspectEntityDialog.Changeset (when implementing)
@backstage/migrate-mui-dialog-to-bui-dialogAdd codemod to migrate mui dialog to bui dialog for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-dialog-to-bui-dialog/.worktrees/feat/mui4-to-bui/migrate-mui-dialog-to-bui-dialog