Migrate jira-dashboard from MUI5 to BUI (except tables) - #388
Draft
GabDug wants to merge 23 commits into
Draft
Conversation
Swap direct @mui/material layout/typography primitives for their @backstage/ui equivalents: Typography -> Text, Stack -> Flex, Box -> Flex, Unstable_Grid2 -> Grid. Replace the @mui/styles makeStyles rule with a CSS module, dropping @mui/styles entirely. Divider and Chip stay on MUI (no BUI equivalent in 0.16), as do the @backstage/core-components (InfoCard, Table, Avatar, Link). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> # Conflicts: # yarn.lock
…tage UI Replace three more core-components/MUI usages with @backstage/ui: - TabbedCard/CardTab -> Card + Tabs/TabList/Tab/TabPanel - Chip -> Badge (non-interactive label) - LinkButton -> ButtonLink columns.tsx is now free of @mui/material. Only Divider remains on MUI (no BUI equivalent in 0.16). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace core-components InfoCard with @backstage/plugin-catalog-react's EntityInfoCard (itself built on @backstage/ui Card). fullHeight is baked into EntityInfoCard, so the variant prop is dropped. In JiraTable the title switches to as="span" so it nests validly inside EntityInfoCard's <Text as="h3"> header; the always-undefined headerStyle is dropped. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace core-components InfoCard with EntityInfoCard, rendering the deepLink as a footerActions ButtonLink (variant tertiary) per the upstream pattern (see catalog-graph CatalogGraphCard). fullHeight is built in. Drops BottomLinkProps.onClick forwarding: react-aria ButtonLink's onClick uses a broader FocusableElement event type, incompatible with BottomLinkProps' HTMLAnchorElement signature, and no in-repo caller uses it. The href (the essential deep-link behavior) is preserved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swap core-components Link for @backstage/ui Link across the table cells, assignee cell, and table title: to -> href, and the title's variant="h5" -> variant="title-small" (matching the adjacent non-link title). Internal catalog hrefs still client-navigate via the app's react-aria router; external Jira hrefs render plain anchors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Set standalone on the migrated BUI links (issue-key/summary/priority/ status cells, assignee link, table-title link) so they drop the default underline at rest and only underline on hover. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Rework the dev app into navigable pages so the migrated components can be reviewed visually: multi-project (tabbed), single-project, and Jira Cloud dashboards; JiraTable with filters / without / empty; JiraProjectCard full vs minimal; JiraUserIssuesCard with and without a deep-link footer plus the standalone table. A single mock API dispatches per entity ref so all dashboard variants coexist. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
… header Put the project avatar + name in the EntityInfoCard title (BUI Avatar, size small, decorative) following the upstream org-card pattern (UserProfileCard/GroupProfileCard). Removes the MUI Divider: BUI has no divider component, and the header/body split is the intended separation, consistent with the plugin's other EntityInfoCard cards. This drops the last @mui/material import from shipped code. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The migration removed all @mui/material usage from shipped code; the only remaining reference was a non-load-bearing MUI ThemeProvider wrapper in AssigneeCell.test.tsx. Simplify that render helper to MemoryRouter only and remove @mui/material from the plugin. The plugin is now MUI-free (only Divider had kept it; that moved to the card header). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The project card title rendered "Name | " with a trailing separator when projectTypeKey was empty. Only append " | <type>" when a type is present. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The Link/ButtonLink migration to @backstage/ui dropped the automatic target="_blank" rel="noopener" that core-components applied to external (http/https) links, so every outbound Jira link (issue cells, JQL header link, "Go to project", user-issues footer) navigated the current tab and dropped the user out of Backstage. Restore new-tab behavior explicitly. The internal catalog link in AssigneeCell stays in-tab (SPA nav). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…size The title text was wrapped in a bare <Text> that defaulted to body-medium (14px regular), overriding EntityInfoCard's <h3> styling, so the project title rendered smaller/lighter than its sibling cards. Set it to title-x-small bold to match. Bump the header avatar from small (24px) to large (40px); the original was 48px and small was too faint beside the title. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The hand-rolled CardHeader for the "Jira Projects" tabbed card used title-small regular; align it with EntityInfoCard's title typography (Text as="h3" variant="title-x-small" weight="bold") so custom card headers read consistently with the entity cards. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…card Replace the hand-rolled Card + CardHeader + CardBody + Text header with EntityInfoCard title="Jira Projects". Same titled-card surface with the title typography matched by construction, consistent with every other card. Drops the untested tabbed-card data-testid. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 0d592b2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Awesome, thank you!! Can we add import '@backstage/ui/css/styles.css' to packages/app/src/index.tsx file, so it renders correctly in the example app? :) |
Contributor
Author
|
Hey @fridajac, of course. I had mostly tested with the plugin dev app, and only tested on the main one later. I did notice a few issues, I'll try to fix or highlight changes before undrafting this. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hey, I just made a Pull Request!
Mostly migrate jira-dashboard from MUI 5 to BUI. BUI tables not included here.
Context
We're trying to reduce our bundle sizes, and jira-dashboard is our last dependency using MUI 5, others using a mix of MUI 4 and BUI. Thus, I apologize (again) for not creating an issue first, this was originally meant as patch.
I'd fully understand if you'd like a more gradual migration, or if you're not interested to switching to BUI at this time. While we'll likely keep using the patched version internally, I'd be happy to split this PR if needed, or to drop it altogether.
Changes
Migrate MUI to BUI: Avatar, Links, Grid, Button, Text, Flex, catalog-react BUI based EntityInfoCard, etc.
Tables have been kept for another PR, as changing the tables to BUI tables break the public contract.
=> Having both MUI tables and BUI cards bring some visual inconsistencies. I'd say they are acceptable, and the 2 PRs may be released at once.
Other opportunistic changes
Screenshots
Checklist before requesting a review