Skip to content

feat: MUI 4 to BUI migration - replace MUI Tabs with BUI Tabs #118

Description

@schultzp2020

Summary

Add a codemod that migrates the common MUI tabs stack to BUI Tabs, TabList, Tab, and TabPanel.

The codemod should handle both the simple core Tabs + Tab pattern and the Material UI Lab TabContext / TabPanel pattern when the selected key model is explicit in the source.

Detection Criteria

  • Tabs and Tab imports from @material-ui/core
  • TabContext, TabList, or TabPanel imports from @material-ui/lab
  • static value props on tabs and panels, plus onChange handlers that select a tab key

Transformation Logic

  1. Replace the MUI tab imports with Tabs, TabList, Tab, and TabPanel from @backstage/ui.
  2. Map MUI value identifiers to BUI id props on Tab and TabPanel.
  3. Rewrite the root selection API to selectedKey / defaultSelectedKey and onSelectionChange when the mapping is mechanical.
  4. Move label text into the Tab children.
  5. Preserve panel children and ordering.
  6. Insert TODO(backstage-codemod): verify custom tab orientation or selection logic manually for vertical tabs, custom a11y wrappers, or complex index-based state.

Before / After Example

TabContext-based tabs:

// Before
<TabContext value={tab}>
  <TabList onChange={handleChange}>
    <Tab label="Overview" value="overview" />
  </TabList>
  <TabPanel value="overview">Content</TabPanel>
</TabContext>
// After
<Tabs defaultSelectedKey="overview">
  <TabList>
    <Tab id="overview">Overview</Tab>
  </TabList>
  <TabPanel id="overview">Content</TabPanel>
</Tabs>

Notes / Edge Cases

  • The codemod should not try to preserve index-based helper utilities if the source already exposes stable string values.
  • Vertical and custom-scrollable tab layouts are valid but may need manual follow-up after the structural conversion.
  • Representative Backstage evidence comes from InspectEntityDialog and the migration skill examples.
  • This issue is separate from the dialog-shell codemod even though they often appear in the same files.

Changeset (when implementing)

  • Package: @backstage/migrate-mui-tabs-to-bui-tabs
  • Bump: minor (initial release)
  • Summary example: Add codemod to migrate mui tabs to bui tabs for the Backstage MUI 4 to BUI migration

Implementation notes

  • Target directory: codemods/misc/migrate-mui-tabs-to-bui-tabs/
  • Branch/worktree: .worktrees/feat/mui4-to-bui/migrate-mui-tabs-to-bui-tabs
  • 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