feat(orchestrator): migrate from Material UI v4 to MUI v5 (#3195)

* feat(orchestrator): migrate from Material UI v4 to MUI v5

Replace @material-ui imports with @mui across the orchestrator plugin
and app shells, add StylesProvider with orchestrator JSS seed, shared
ESLint ban on v4 imports, and fix sidebar logo spacing plus workflow
table action icon sizing in NFS and legacy apps.

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore(orchestrator): add changesets for form-react and form-widgets

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor(orchestrator): use MUI Box sx for sidebar logo styling

Replace inline styles with Box and sx on sidebar logo wrappers and SVG
logos in NFS app, legacy app, and plugin dev shell per review feedback.

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor(orchestrator): move shared ESLint config to workspace root

Centralize frontend ESLint rules in eslint.frontend-shared.cjs and wire
packages via relative require with documented no-relative-monorepo-imports
exceptions. Remove plugin package export and form-package devDependencies.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(orchestrator): use RHDH logos from backstage-plugin-theme

Import LogoFull and LogoIcon from @red-hat-developer-hub/backstage-plugin-theme
(requires ^0.14.0) and remove local Backstage SVG copies in app shells.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(orchestrator): avoid clipping in run variables values

Keep TextCodeBlock content from being clipped by RHDH Paper rounded-child styles
and align app/dev wiring updates for the run variables dialog rendering path.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix(orchestrator): prefix MUI v5 class names to avoid RHDH theme collisions

Configure ClassNameGenerator with the v5- prefix so RHDH MuiPaper overrides
do not strip Alert severity styles inside Backstage v4 InfoCard shells.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: lokanandaprabhu

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

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

workspaces/orchestrator/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 orchestrator workspace.
+ */
+module.exports = packageDir =>
+  require('@backstage/cli/config/eslint-factory')(
+    packageDir,
+    materialUiMigrationEslintConfig,
+  );

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

@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config
+module.exports = require('../../eslint.frontend-shared.cjs')(__dirname);

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

@@ -52,7 +52,7 @@
     "@mui/styles": "5.18.0",
     "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^",
     "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^",
-    "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0",
+    "@red-hat-developer-hub/backstage-plugin-theme": "^0.14.0",
     "custom-authentication-provider-module": "workspace:^",
     "history": "^5.3.0",
     "react": "^18.0.2",