fix backstage plugin recommendations table

[ccasher]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

With the recent updates to the backstage plugin - the recommendations table is difficult to see. There may have been a UI related problem with mui when we updated the ccf client package to React 18.

Expected Behavior

When loading the ccf backstage plugin and going to the recommendations page, i should be able to clearly see the table.

Actual Behavior

The table component renders, but is difficult to see with the UI styling

To Reproduce

Create a backstage instance, add the ccf plugin and navigate to the recommendations page

Screenshots

© 2021 Thoughtworks, Inc.

[tudi2d]

hej @ccasher - some context on this: Backstage is not yet compatible with React 18 (but hopefully will be soon backstage/backstage#18243). Looking at your RecommendationsTable it seems like you are using @mui/x-data-grid, which depends on @mui/material (Docs). For a better support maybe try the following:

• Upgrade Backstage to v1.17.0
• Use the UnifiedTheme Provider to support Material UI v4 and v5 at the same time
• Allow React 17 for compatibility & see if that would work for CCF

  "peerDependencies": {
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
  },

Also: Always feel free to reach out (here or on Discord/Slack) whenever you run into problems with Backstage while developing this plugin. Happy to help out.

[4upz]

Thanks @tudi2d! We'll give this a try and see if that helps resolve the issue. We'll definitely reach out if we still run into any trouble