Remove Material-UI dependencies from grafana plugin#7529
Remove Material-UI dependencies from grafana plugin#7529andreahlert wants to merge 1 commit intobackstage:mainfrom
Conversation
Replace MUI components with lighter alternatives: - Alert (MUI lab) replaced with ResponseErrorPanel (core-components) - Tooltip + Typography (MUI core) replaced with native span + title attribute This removes @material-ui/core and @material-ui/lab from the grafana plugin dependencies, contributing to the ongoing MUI migration (backstage#7023). Signed-off-by: André Ahlert <andre@aex.partners>
Missing ChangesetsThe following package(s) are changed by this PR but do not have a changeset:
See CONTRIBUTING.md for more information about how to add changesets. Changed Packages
|
awanlin
left a comment
awanlin
left a comment
There was a problem hiding this comment.
Hi @andreahlert, while we appreciate your contributions these aren't changes that really move us forward in the MUI to BUI migration. You actually never use any of the component from Backstage UI in this change at all!
Once again you wipe out the PR template and I think it would be valuable for you to read our upstream AI Policy: https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md#ai-use-policy-and-guidelines
| return <Progress />; | ||
| } else if (error) { | ||
| return <Alert severity="error">{error.message}</Alert>; | ||
| return <ResponseErrorPanel error={error} />; |
There was a problem hiding this comment.
Did you actually test this? This panel will show up for any error as it's part of the base framework.
This is an Alert component in Backstage UI but it hasn't been released yet, that will happen on February 17th.
There was a problem hiding this comment.
I tested it and it works, but yeah I see your point, it's a full error panel, not a simple inline alert like the original. Didn't think much about the UX difference.
Will wait for the BUI Alert on the 17th.
thanks for the advice
| <Typography variant="h5">{opts.title || 'Dashboards'}</Typography> | ||
| </Tooltip> | ||
| {opts.title || 'Dashboards'} | ||
| </span> |
There was a problem hiding this comment.
Backstage UI has a tooltip, did you take a look? https://ui.backstage.io/
There was a problem hiding this comment.
Not really, I was more focused on getting rid of the MUI deps first. I'll check it properly for the next version.
| return <Progress />; | ||
| } else if (error) { | ||
| return <Alert severity="error">{error.message}</Alert>; | ||
| return <ResponseErrorPanel error={error} />; |
There was a problem hiding this comment.
Again, not the right direction.
There was a problem hiding this comment.
Same as above, got it.
About the template: I had this ready before your feedback and pushed it without adapting. My bad. My idea was to do it in two steps, removing MUI first, then add BUI. but I ended up making a mess of it. Thanks for the guidance, I'll close this and redo it properly with the BUI components once the Alert is out on the 17th. |
3 participants
Summary
@material-ui/coreand@material-ui/labfrom the grafana plugin dependencies<Alert severity="error">(MUI lab) with<ResponseErrorPanel>from@backstage/core-components<Tooltip>+<Typography>(MUI core) with a plain<span>using the nativetitleattributeContributes to #7023.
Test plan
yarn tsc:fullpasses with zero errorsResponseErrorPanelprovides consistent error display with other Backstage plugins