feat(scorecard): migrate from Material UI v4 to MUI v5 (#3312)

Author: Eswaraiahsapram

workspaces/scorecard/.changeset/mui-v5-scorecard.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+Replace Material UI v4 imports with MUI v5 and scope JSS class names to prevent style collisions.

workspaces/scorecard/eslint.frontend-shared.cjs

@@ -0,0 +1,43 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const materialUiMigrationEslintConfig = {
+  restrictedImports: [
+    {
+      name: '@material-ui/core',
+      message: 'Use @mui/material instead of Material UI v4.',
+    },
+    {
+      name: '@material-ui/lab',
+      message: 'Use @mui/material instead of Material UI v4.',
+    },
+    {
+      name: '@material-ui/styles',
+      message:
+        'Use @mui/styles, @mui/material (sx/styled), or Backstage UI instead of Material UI v4.',
+    },
+  ],
+  restrictedImportPatterns: ['@material-ui/*'],
+};
+
+/**
+ * Shared ESLint config for frontend packages in the scorecard workspace.
+ */
+module.exports = packageDir =>
+  require('@backstage/cli/config/eslint-factory')(
+    packageDir,
+    materialUiMigrationEslintConfig,
+  );

workspaces/scorecard/packages/app-legacy/.eslintrc.js

@@ -1 +1,18 @@
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
+module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);

workspaces/scorecard/packages/app-legacy/package.json

@@ -46,12 +46,13 @@
     "@backstage/plugin-user-settings": "^0.9.1",
     "@backstage/theme": "^0.7.2",
     "@backstage/ui": "^0.13.2",
-    "@material-ui/core": "^4.12.2",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "5.18.0",
+    "@mui/material": "5.18.0",
+    "@mui/styles": "5.18.0",
     "@openshift/dynamic-plugin-sdk": "^5.0.1",
     "@red-hat-developer-hub/backstage-plugin-dynamic-home-page": "^1.10.2",
     "@red-hat-developer-hub/backstage-plugin-scorecard": "workspace:^",
-    "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.14.0",
     "@roadiehq/backstage-plugin-github-pull-requests": "^3.5.1",
     "@roadiehq/backstage-plugin-jira": "^2.13.1",
     "@scalprum/react-core": "0.11.1",