Skip to content

feat: MUI 4 to BUI migration - replace Dialog shell with BUI Dialog #117

Description

@schultzp2020

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

  1. Replace the MUI dialog imports with Dialog, DialogHeader, DialogBody, and DialogFooter from @backstage/ui.
  2. Map open to isOpen.
  3. Rewrite onClose={onClose} to the standard controlled BUI pattern onOpenChange={isOpen => !isOpen && onClose()} when the original handler is a simple local callback.
  4. Move DialogTitle, DialogContent, and DialogActions children into the BUI header/body/footer structure.
  5. Preserve dialog children and local action buttons, allowing other codemods to migrate the button components themselves.
  6. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions