feat(translations): migrate app package from Material UI v4 to MUI v5 (#3607)

* feat(translations): migrate app package from Material UI v4 to MUI v5

Replace @material-ui/core and @material-ui/icons with @mui/material and
@mui/icons-material in the translations workspace app shell. Delete local
LogoFull/LogoIcon components in favor of the shared theme plugin exports.
Add ESLint guard to prevent MUI v4 re-introduction.

Signed-off-by: Mitul Kumar <mitulkumar2000@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

* addressing comments

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

* updating yarn lock

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

---------

Signed-off-by: Mitul Kumar <mitulkumar2000@gmail.com>
Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: its-mitesh-kumar

workspaces/translations/eslint.frontend-shared.cjs

@@ -0,0 +1,48 @@
+/*
+ * 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/icons',
+      message: 'Use @mui/icons-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/*'],
+};
+
+/**
+ * ESLint config for frontend packages in this workspace (MUI v4 migration guards).
+ */
+module.exports = function createEslintConfig(packageDir) {
+  return require('@backstage/cli/config/eslint-factory')(
+    packageDir,
+    materialUiMigrationEslintConfig,
+  );
+};

workspaces/translations/packages/app/.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/translations/packages/app/package.json

@@ -46,9 +46,9 @@
     "@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",
-    "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.14.0",
     "@red-hat-developer-hub/backstage-plugin-translations": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-translations-test": "workspace:^",
     "react": "^18.0.2",