Qeta interface get broken after upgrade

[levanvunam]

Firstly thanks for the awesome plugin.

I'm having issue with qeta after upgrade to: 3.12.3

I see that the html generated in browser now is already have v5 prefix

compare to older version I had in my dev environment

It seems to be because of MuiV5 (not very sure), but I already doing the mui5 update using: https://backstage.io/docs/tutorials/migrate-to-mui5/

Not sure anything is missing here

Thanks for helping

[drodil]

It seems the MUI5 with custom theme breaks everything. Here's a discussion about this; #242

Probably have to rollback to MUI4 unless I can figure out how to make this work. Any ideas are more than welcome, I feel like I am in dead end soon 😄

[levanvunam]

haha thanks. Waiting for your final decision ;)

[drodil]

I tried to create a custom theme to a plain backstage instance (by following this https://backstage.io/docs/getting-started/app-custom-theme/#creating-a-custom-theme) and the Q&A works just fine:

I really don't know what is going on in our instance or with yours @levanvunam and @ahmm16 .. Still need to dig deeper!

[drodil]

At least the Grid component is not styled properly and is missing padding, for example. I have no clue where this comes from, though, as it works with a custom theme in the plain backstage instance.

[drodil]

Hmph, should probably have done a 4.0 version out of this. Now if you want to go back to 3.9.3 with MUI4, you also need to have a resolution of the -react plugin to 3.9.3 in package.json.

Well, I will try to fix the MUI5 somehow. Would be easier if one could actually reproduce this somehow in the development environment or in the plain backstage instance..

[drodil]

At least the menu items in the plugin are messed with the MuiButtonBase-root CSS class that is applied over everything else:

Disabling the styling makes the menu look like it did previously. But I have no clue why that is applied as last and it overrides everything. I mean, yeah it could be as base class for the buttons but now it's applied over everything else.

[drodil]

Hm, some of the issues were fixed by adding "@mui/material": "5.16.7" to package.json resolutions. @levanvunam could you try that?

[levanvunam]

Yes I'm having problem to downgrade to 3.9.3 due to the dependency (react, common) always go latest 3.12.3 now, making it not working

Let me try again with the package you mentioned

[drodil]

Yeah, downgrade also requires use of resolutions :/

[levanvunam]

After checking seems I already use 5.16.7 now for all mui related packages

I can still see the error as previously

I try to look at those that I used for Grid, after migrate to mui5, I use Grid 2 and working ok

But when use Grid instead, the padding seems already a problem

Because of this: https://mui.com/material-ui/migration/migration-grid-v2/#with-material-ui-v5

So I'm not sure how you make the Grid working in your case when migrate to muiv5

Just to share again this is with muiv5 + qeta 3.12.3

Maybe moving to Grid2 would help?

[drodil]

Did you try to put it in the resolutions as follows:

"resolutions": {
  "@mui/material": "5.16.7"
}

For example Backstage itself has "^5.12.2" so the version might be resolved to something different. For us, the resolution worked and fixed both the menu and the grid.

It would make sense to move to Grid2 at some point as the current grid is going to be deprecated in MUI6.

[levanvunam]

Let me try and update again

[levanvunam]

I tried to downgrade the "@mui/material": "5.16.7", but seems no help.

I end up downgrage the package using resolutions for now :'(

[drodil]

There's this RFC in Backstage backstage/backstage#27726 ... Probably best idea is to rollback this plugin to MUI4 and follow that... Will work on this soonish!