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
- Replace the MUI tab imports with
Tabs, TabList, Tab, and TabPanel from @backstage/ui.
- Map MUI
value identifiers to BUI id props on Tab and TabPanel.
- Rewrite the root selection API to
selectedKey / defaultSelectedKey and onSelectionChange when the mapping is mechanical.
- Move
label text into the Tab children.
- Preserve panel children and ordering.
- 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
Summary
Add a codemod that migrates the common MUI tabs stack to BUI
Tabs,TabList,Tab, andTabPanel.The codemod should handle both the simple core
Tabs+Tabpattern and the Material UI LabTabContext/TabPanelpattern when the selected key model is explicit in the source.Detection Criteria
TabsandTabimports from@material-ui/coreTabContext,TabList, orTabPanelimports from@material-ui/labvalueprops on tabs and panels, plusonChangehandlers that select a tab keyTransformation Logic
Tabs,TabList,Tab, andTabPanelfrom@backstage/ui.valueidentifiers to BUIidprops onTabandTabPanel.selectedKey/defaultSelectedKeyandonSelectionChangewhen the mapping is mechanical.labeltext into theTabchildren.TODO(backstage-codemod): verify custom tab orientation or selection logic manuallyfor vertical tabs, custom a11y wrappers, or complex index-based state.Before / After Example
TabContext-based tabs:
Notes / Edge Cases
InspectEntityDialogand the migration skill examples.Changeset (when implementing)
@backstage/migrate-mui-tabs-to-bui-tabsAdd codemod to migrate mui tabs to bui tabs for the Backstage MUI 4 to BUI migrationImplementation notes
codemods/misc/migrate-mui-tabs-to-bui-tabs/.worktrees/feat/mui4-to-bui/migrate-mui-tabs-to-bui-tabs