🐛 copilot: Overall theme is not applied correctly to plugin pages

[ScottGuymer]

Plugin Name

copliot

📜 Description

The plugin seems to use its own theme and styling.

This means that it does not take on the theme from the instance its installed in so it looks out of place.

👍 Expected behavior

It should match the theme of the surrounding backstage app.

👎 Actual Behavior with Screenshots

It should match the theme of the surrounding backstage app.

Some of the styling also bleeds over into other non-related components on other pages outside of this plugin.

👟 Reproduction steps

Install plugin within a themed backstage app.

📃 Provide the context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!

[awanlin]

Hi @ScottGuymer, I did the initial review of this plugin when it was submitted and I tottaly missed the fact there was a ThemeProvider wrapping the entire page:

https://github.com/backstage/community-plugins/blob/7c68b0002c895f547b8304e404ca2bd83a6f345a/workspaces/copilot/plugins/copilot/src/components/Pages/CopilotPage.tsx#L56

The downside of these large reviews is that it's hard to catch everything. Hard to avoid with a net new plugin though!

I'd also mention that during the review they moved everything to MUI v5 seeing as that's really where we want to be heading which may also have some impact on this.

[esw-afabiano]

At the time, I encountered some issues with the theme not updating internally, though I don’t recall the specifics anymore. There is a PR already addressing this, but it may be separated into a new PR for those adjustments. In any case, I’ll attach it here as soon as there’s a resolution.

[O5ten]

I'm ending up with a theme-related error when i interact with this plugin. Sometimes it renders nicely and sometimes this error is thrown. Could this be related to the error above? Because i can also see that the theme isn't the one i expect it to be on our heavily themed backstage deployment.

theme.applyStyles is not a function
TypeError: theme.applyStyles is not a function
    at eval (webpack-internal:///../../node_modules/@mui/x-charts/ChartsAxisHighlight/ChartsAxisHighlight.js:60:14)
    at processStyleArg (webpack-internal:///../../node_modules/@mui/system/createStyled.js:66:67)
    at eval (webpack-internal:///../../node_modules/@mui/system/createStyled.js:172:25)
    at handleInterpolation (webpack-internal:///../../node_modules/@emotion/styled/node_modules/@emotion/serialize/dist/emotion-serialize.development.esm.js:154:24)
    at serializeStyles (webpack-internal:///../../node_modules/@emotion/styled/node_modules/@emotion/serialize/dist/emotion-serialize.development.esm.js:285:15)
    at eval (webpack-internal:///../../node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.development.esm.js:208:91)
    at eval (webpack-internal:///../../node_modules/@emotion/react/dist/emotion-element-7a1343fa.browser.development.esm.js:70:12)
    at renderWithHooks (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:14985:18)
    at updateForwardRef (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:17044:20)
    at beginWork (webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:19098:16)

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.