From cf3e95fe32b7d2922cbb01ea8e8d625bd556f6a6 Mon Sep 17 00:00:00 2001 From: Lokananda Prabhu Date: Thu, 21 May 2026 11:54:00 +0530 Subject: [PATCH 1/5] 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 --- .../.changeset/mui-v5-orchestrator.md | 5 ++ .../src/components/Root/LogoFull.tsx | 17 +------ .../src/components/Root/LogoIcon.tsx | 18 +------ .../app-legacy/src/components/Root/Root.tsx | 38 +++++++------- .../orchestrator/packages/app/.eslintrc.js | 7 ++- .../orchestrator/packages/app/package.json | 2 +- .../packages/app/src/modules/nav/LogoFull.tsx | 17 +------ .../packages/app/src/modules/nav/LogoIcon.tsx | 17 +------ .../app/src/modules/nav/SidebarLogo.tsx | 38 +++++++------- .../orchestrator-form-react/.eslintrc.js | 19 ++++++- .../orchestrator-form-react/package.json | 1 + .../orchestrator-form-widgets/.eslintrc.js | 4 +- .../orchestrator-form-widgets/package.json | 1 + .../plugins/orchestrator/.eslintrc.js | 19 ++++++- .../orchestrator/dev/nav/SidebarLogo.tsx | 39 +++++++-------- .../orchestrator/eslint.frontend-shared.cjs | 43 ++++++++++++++++ .../plugins/orchestrator/package.json | 8 +-- .../OrchestratorPage/OrchestratorPage.tsx | 2 +- .../OrchestratorPage/WorkflowsTable.tsx | 21 +++----- .../orchestrator/src/components/Router.tsx | 50 +++++++++++-------- .../WorkflowInstancePage/WorkflowResult.tsx | 3 +- .../WorkflowRunDetails.tsx | 2 +- .../components/WorkflowPage/WorkflowPage.tsx | 2 +- .../catalogComponents/CatalogWorkflowPage.tsx | 2 +- .../ui/WorkflowInstanceStatusIndicator.tsx | 2 +- workspaces/orchestrator/yarn.lock | 7 +-- 26 files changed, 210 insertions(+), 174 deletions(-) create mode 100644 workspaces/orchestrator/.changeset/mui-v5-orchestrator.md create mode 100644 workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs diff --git a/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md b/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md new file mode 100644 index 0000000000..9384e7f747 --- /dev/null +++ b/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md @@ -0,0 +1,5 @@ +--- +'@red-hat-developer-hub/backstage-plugin-orchestrator': patch +--- + +Replace Material UI v4 imports with MUI v5 and scope JSS class names to prevent style collisions. diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx index 15c7e15d8b..c51a4a11bd 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx @@ -14,28 +14,15 @@ * limitations under the License. */ -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 30, - }, - path: { - fill: '#7df3e1', - }, -}); const LogoFull = () => { - const classes = useStyles(); - return ( diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx index 8ddd4f8040..a1dbd26423 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx @@ -14,29 +14,15 @@ * limitations under the License. */ -import { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 28, - }, - path: { - fill: '#7df3e1', - }, -}); - const LogoIcon = () => { - const classes = useStyles(); - return ( diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx index c83fd32bc6..1c5d1230cb 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx @@ -39,35 +39,35 @@ import LibraryBooks from '@mui/icons-material/LibraryBooks'; import MenuIcon from '@mui/icons-material/Menu'; import GroupIcon from '@mui/icons-material/People'; import SearchIcon from '@mui/icons-material/Search'; -import { makeStyles } from '@mui/styles'; import { OrchestratorIcon } from '@red-hat-developer-hub/backstage-plugin-orchestrator'; import { NotificationsSidebarItem } from '@backstage/plugin-notifications'; import { Administration } from '@backstage-community/plugin-rbac'; import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; -const useSidebarLogoStyles = makeStyles({ - root: { - width: sidebarConfig.drawerWidthClosed, - height: 3 * sidebarConfig.logoHeight, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - marginBottom: -14, - }, - link: { - width: sidebarConfig.drawerWidthClosed, - marginLeft: 24, - }, -}); - const SidebarLogo = () => { - const classes = useSidebarLogoStyles(); const { isOpen } = useSidebarOpenState(); return ( -
- +
+ {isOpen ? : }
diff --git a/workspaces/orchestrator/packages/app/.eslintrc.js b/workspaces/orchestrator/packages/app/.eslintrc.js index 8bd689af97..9b5192fa03 100644 --- a/workspaces/orchestrator/packages/app/.eslintrc.js +++ b/workspaces/orchestrator/packages/app/.eslintrc.js @@ -1,5 +1,5 @@ /* - * Copyright 2024 The Backstage Authors + * 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. @@ -13,4 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); + +module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( + __dirname, +); diff --git a/workspaces/orchestrator/packages/app/package.json b/workspaces/orchestrator/packages/app/package.json index 4d844c4bcf..94a9f9ca16 100644 --- a/workspaces/orchestrator/packages/app/package.json +++ b/workspaces/orchestrator/packages/app/package.json @@ -30,8 +30,8 @@ "@backstage/plugin-catalog": "^2.0.1", "@backstage/plugin-user-settings": "^0.9.1", "@backstage/ui": "^0.13.2", - "@material-ui/core": "^4.12.4", "@mui/icons-material": "^5.17.1", + "@mui/material": "^5.17.1", "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^", "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^", "react": "^18.0.2", diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx index 6b6a1bd8c1..07ee3365b5 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx @@ -13,29 +13,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 30, - }, - path: { - fill: '#7df3e1', - }, -}); export const LogoFull = () => { - const classes = useStyles(); - return ( diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx index 87024b08c2..3f15663b3b 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx @@ -13,29 +13,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { makeStyles } from '@material-ui/core'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 28, - }, - path: { - fill: '#7df3e1', - }, -}); export const LogoIcon = () => { - const classes = useStyles(); - return ( diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx index 0085b75fce..6124f70432 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx @@ -18,32 +18,32 @@ import { sidebarConfig, useSidebarOpenState, } from '@backstage/core-components'; -import { makeStyles } from '@material-ui/core'; import { LogoFull } from './LogoFull'; import { LogoIcon } from './LogoIcon'; -const useSidebarLogoStyles = makeStyles({ - root: { - width: sidebarConfig.drawerWidthClosed, - height: 3 * sidebarConfig.logoHeight, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - marginBottom: -14, - }, - link: { - width: sidebarConfig.drawerWidthClosed, - marginLeft: 24, - }, -}); - export const SidebarLogo = () => { - const classes = useSidebarLogoStyles(); const { isOpen } = useSidebarOpenState(); return ( -
- +
+ {isOpen ? : }
diff --git a/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js index e2a53a6ad2..f909c3336b 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-react/.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. + */ +module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( + __dirname, +); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-react/package.json b/workspaces/orchestrator/plugins/orchestrator-form-react/package.json index df2693be68..bb5cd595e5 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-react/package.json +++ b/workspaces/orchestrator/plugins/orchestrator-form-react/package.json @@ -52,6 +52,7 @@ }, "devDependencies": { "@backstage/cli": "^0.36.0", + "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^", "@types/json-schema": "7.0.15", "@types/lodash": "^4.14.151", "@types/react": "^18.2.58", diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js index 9184408ae4..f909c3336b 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js @@ -13,4 +13,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@backstage/cli/config/eslint-factory')(__dirname); +module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( + __dirname, +); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json b/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json index 53e2e5b9bc..4f43350cab 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json @@ -98,6 +98,7 @@ "@backstage/dev-utils": "^1.1.21", "@backstage/test-utils": "^1.7.16", "@janus-idp/cli": "3.7.0", + "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.0.0", diff --git a/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js index e2a53a6ad2..f909c3336b 100644 --- a/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator/.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. + */ +module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( + __dirname, +); diff --git a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx index d8d952ed17..c2f9321a50 100644 --- a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx @@ -16,30 +16,29 @@ import { Link, sidebarConfig } from '@backstage/core-components'; -import { makeStyles } from '@material-ui/core'; import Typography from '@mui/material/Typography'; -const useSidebarLogoStyles = makeStyles({ - root: { - width: sidebarConfig.drawerWidthClosed, - height: 3 * sidebarConfig.logoHeight, - display: 'flex', - flexFlow: 'row nowrap', - alignItems: 'center', - marginBottom: -14, - }, - link: { - width: sidebarConfig.drawerWidthClosed, - marginLeft: 24, - }, -}); - export const SidebarLogo = () => { - const classes = useSidebarLogoStyles(); - return ( -
- +
+ Backstage diff --git a/workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs b/workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs new file mode 100644 index 0000000000..02cb00ae23 --- /dev/null +++ b/workspaces/orchestrator/plugins/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/*'], +}; + +/** + * ESLint config for frontend packages in this workspace (MUI v4 migration guards). + */ +module.exports = packageDir => + require('@backstage/cli/config/eslint-factory')( + packageDir, + materialUiMigrationEslintConfig, + ); diff --git a/workspaces/orchestrator/plugins/orchestrator/package.json b/workspaces/orchestrator/plugins/orchestrator/package.json index 8ccd08cb9d..233a837084 100644 --- a/workspaces/orchestrator/plugins/orchestrator/package.json +++ b/workspaces/orchestrator/plugins/orchestrator/package.json @@ -7,6 +7,7 @@ "exports": { ".": "./src/index.ts", "./alpha": "./src/alpha.tsx", + "./eslint.frontend-shared.cjs": "./eslint.frontend-shared.cjs", "./package.json": "./package.json" }, "typesVersions": { @@ -77,8 +78,9 @@ "@backstage/plugin-permission-common": "^0.9.7", "@backstage/plugin-permission-react": "^0.4.41", "@backstage/types": "^1.2.2", - "@material-ui/core": "^4.12.4", - "@material-ui/lab": "^4.0.0-alpha.61", + "@mui/icons-material": "^5.17.1", + "@mui/material": "^5.17.1", + "@mui/styles": "5.18.0", "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^", "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^", "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^", @@ -103,8 +105,6 @@ "@backstage/test-utils": "^1.7.16", "@backstage/ui": "^0.13.2", "@janus-idp/cli": "3.7.0", - "@mui/icons-material": "^5.17.1", - "@mui/material": "^5.17.1", "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^", "@red-hat-developer-hub/backstage-plugin-theme": "^0.12.0", "@testing-library/dom": "^10.0.0", diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/OrchestratorPage.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/OrchestratorPage.tsx index 05170b40c3..ba7c6cddae 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/OrchestratorPage.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/OrchestratorPage.tsx @@ -16,7 +16,7 @@ import { TabbedLayout } from '@backstage/core-components'; -import { Box } from '@material-ui/core'; +import Box from '@mui/material/Box'; import { makeStyles } from 'tss-react/mui'; import { useTranslation } from '../../hooks/useTranslation'; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowsTable.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowsTable.tsx index c5fd9e80fc..2179b7542a 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowsTable.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/WorkflowsTable.tsx @@ -21,12 +21,10 @@ import { Link, TableColumn, TableProps } from '@backstage/core-components'; import { useRouteRef, useRouteRefParams } from '@backstage/core-plugin-api'; import { usePermission } from '@backstage/plugin-permission-react'; -// Workaround since we use the newer @mui library but Backstage still uses deprecated @material-ui -import { SvgIcon } from '@material-ui/core'; -import DeveloperModeOutlinedMui from '@mui/icons-material/DeveloperModeOutlined'; -import FormatListBulletedMui from '@mui/icons-material/FormatListBulleted'; +import DeveloperModeOutlined from '@mui/icons-material/DeveloperModeOutlined'; +import FormatListBulleted from '@mui/icons-material/FormatListBulleted'; import OpenInNewIcon from '@mui/icons-material/OpenInNew'; -import PlayArrowMui from '@mui/icons-material/PlayArrow'; +import PlayArrow from '@mui/icons-material/PlayArrow'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import MuiLink from '@mui/material/Link'; @@ -63,13 +61,6 @@ export interface WorkflowsTableProps { items: WorkflowOverviewDTO[]; } -// Workaround -type SvgIconComponent = typeof SvgIcon; -const PlayArrow = PlayArrowMui as unknown as SvgIconComponent; -const FormatListBulleted = FormatListBulletedMui as unknown as SvgIconComponent; -const DeveloperModeOutlined = - DeveloperModeOutlinedMui as unknown as SvgIconComponent; - const usePermittedToUseBatch = ( items: WorkflowOverviewDTO[], ): { allowed: boolean[] } => { @@ -225,7 +216,7 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => { const actions = useMemo(() => { const actionItems: TableProps['actions'] = [ rowData => ({ - icon: PlayArrow, + icon: () => , tooltip: t('table.actions.run'), disabled: !canExecuteWorkflow(rowData.id), onClick: () => handleExecute(rowData), @@ -235,13 +226,13 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => { if (!entityRef) actionItems.push( rowData => ({ - icon: FormatListBulleted, + icon: () => , tooltip: t('table.actions.viewRuns'), disabled: !canViewWorkflow(rowData.id), onClick: () => handleViewVariables(rowData), }), rowData => ({ - icon: DeveloperModeOutlined, + icon: () => , tooltip: t('table.actions.viewInputSchema'), disabled: !canViewWorkflow(rowData.id), onClick: () => handleViewInputSchema(rowData), diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/Router.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/Router.tsx index 30c7406405..3bd7ee28de 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/Router.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/Router.tsx @@ -16,6 +16,8 @@ import { Route, Routes } from 'react-router-dom'; +import { createGenerateClassName, StylesProvider } from '@mui/styles'; + import { entityInstanceRouteRef, entityWorkflowRouteRef, @@ -29,28 +31,34 @@ import { OrchestratorPage } from './OrchestratorPage/OrchestratorPage'; import { WorkflowInstancePage } from './WorkflowInstancePage/WorkflowInstancePage'; import { WorkflowPage } from './WorkflowPage/WorkflowPage'; +const generateClassName = createGenerateClassName({ + seed: 'orchestrator', +}); + export const Router = () => { return ( - // relative to orchestrator/ - - } /> - } /> - } - /> - } - /> - } - /> - } - /> - + + {/* relative to orchestrator/ */} + + } /> + } /> + } + /> + } + /> + } + /> + } + /> + + ); }; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx index ccf09bd65e..967ac42dc7 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx @@ -25,7 +25,8 @@ import { import { RouteFunc, useApi, useRouteRef } from '@backstage/core-plugin-api'; import { AboutField } from '@backstage/plugin-catalog'; -import { Alert, AlertTitle } from '@material-ui/lab'; +import Alert from '@mui/material/Alert'; +import AlertTitle from '@mui/material/AlertTitle'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowRunDetails.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowRunDetails.tsx index 1c70a5e820..5699a6fc52 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowRunDetails.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowRunDetails.tsx @@ -21,7 +21,7 @@ import { CopyTextButton, Link } from '@backstage/core-components'; import { useApi, useRouteRef } from '@backstage/core-plugin-api'; import { AboutField } from '@backstage/plugin-catalog'; -import { Box } from '@material-ui/core'; +import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import { makeStyles } from 'tss-react/mui'; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx index 8c3ecb22c5..e3cb23ebd3 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowPage/WorkflowPage.tsx @@ -19,7 +19,7 @@ import { useAsync } from 'react-use'; import { TabbedLayout } from '@backstage/core-components'; import { useApi, useRouteRefParams } from '@backstage/core-plugin-api'; -import { Box } from '@material-ui/core'; +import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import { makeStyles } from 'tss-react/mui'; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/catalogComponents/CatalogWorkflowPage.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/catalogComponents/CatalogWorkflowPage.tsx index a09396b870..d6573941cf 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/catalogComponents/CatalogWorkflowPage.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/catalogComponents/CatalogWorkflowPage.tsx @@ -19,7 +19,7 @@ import { useAsync } from 'react-use'; import { Content } from '@backstage/core-components'; import { useApi, useRouteRefParams } from '@backstage/core-plugin-api'; -import { Grid } from '@material-ui/core'; +import Grid from '@mui/material/Grid'; import { orchestratorApiRef } from '../../api'; import { entityWorkflowRouteRef } from '../../routes'; diff --git a/workspaces/orchestrator/plugins/orchestrator/src/components/ui/WorkflowInstanceStatusIndicator.tsx b/workspaces/orchestrator/plugins/orchestrator/src/components/ui/WorkflowInstanceStatusIndicator.tsx index 15fe339550..8c63db16c8 100644 --- a/workspaces/orchestrator/plugins/orchestrator/src/components/ui/WorkflowInstanceStatusIndicator.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/src/components/ui/WorkflowInstanceStatusIndicator.tsx @@ -16,10 +16,10 @@ import { Link } from '@backstage/core-components'; -import { Box } from '@material-ui/core'; import CheckCircleOutlined from '@mui/icons-material/CheckCircleOutlined'; import ErrorOutlineOutlined from '@mui/icons-material/ErrorOutlineOutlined'; import HourglassEmptyOutlined from '@mui/icons-material/HourglassEmptyOutlined'; +import Box from '@mui/material/Box'; import CircularProgress from '@mui/material/CircularProgress'; import { diff --git a/workspaces/orchestrator/yarn.lock b/workspaces/orchestrator/yarn.lock index 18a7b30e57..0ff3158313 100644 --- a/workspaces/orchestrator/yarn.lock +++ b/workspaces/orchestrator/yarn.lock @@ -13374,6 +13374,7 @@ __metadata: "@backstage/core-plugin-api": "npm:^1.12.4" "@backstage/types": "npm:^1.2.2" "@mui/material": "npm:^5.17.1" + "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@rjsf/core": "npm:^5.21.2" @@ -13413,6 +13414,7 @@ __metadata: "@mui/icons-material": "npm:^5.17.1" "@mui/material": "npm:^5.17.1" "@mui/styles": "npm:5.18.0" + "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^" @@ -13472,10 +13474,9 @@ __metadata: "@backstage/types": "npm:^1.2.2" "@backstage/ui": "npm:^0.13.2" "@janus-idp/cli": "npm:3.7.0" - "@material-ui/core": "npm:^4.12.4" - "@material-ui/lab": "npm:^4.0.0-alpha.61" "@mui/icons-material": "npm:^5.17.1" "@mui/material": "npm:^5.17.1" + "@mui/styles": "npm:5.18.0" "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^" @@ -18689,8 +18690,8 @@ __metadata: "@backstage/plugin-user-settings": "npm:^0.9.1" "@backstage/test-utils": "npm:^1.7.16" "@backstage/ui": "npm:^0.13.2" - "@material-ui/core": "npm:^4.12.4" "@mui/icons-material": "npm:^5.17.1" + "@mui/material": "npm:^5.17.1" "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^" "@testing-library/dom": "npm:^9.0.0" From f5339ede5a649f2ff6aaadc1bc913d3929c5af5b Mon Sep 17 00:00:00 2001 From: Lokananda Prabhu Date: Thu, 21 May 2026 12:21:26 +0530 Subject: [PATCH 2/5] chore(orchestrator): add changesets for form-react and form-widgets Co-authored-by: Cursor --- workspaces/orchestrator/.changeset/mui-v5-orchestrator.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md b/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md index 9384e7f747..5629d9f17d 100644 --- a/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md +++ b/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md @@ -1,5 +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. From 5cdc01dd04eb7acb4a86498df27d441b5dd83650 Mon Sep 17 00:00:00 2001 From: Lokananda Prabhu Date: Thu, 21 May 2026 13:36:12 +0530 Subject: [PATCH 3/5] 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 --- .../app-legacy/src/components/Root/LogoFull.tsx | 14 +++++++------- .../app-legacy/src/components/Root/LogoIcon.tsx | 14 +++++++------- .../app-legacy/src/components/Root/Root.tsx | 9 +++++---- .../packages/app/src/modules/nav/LogoFull.tsx | 14 +++++++------- .../packages/app/src/modules/nav/LogoIcon.tsx | 14 +++++++------- .../packages/app/src/modules/nav/SidebarLogo.tsx | 10 ++++++---- .../plugins/orchestrator/dev/nav/SidebarLogo.tsx | 9 +++++---- 7 files changed, 44 insertions(+), 40 deletions(-) diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx index c51a4a11bd..528b209f80 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ +import Box from '@mui/material/Box'; + const LogoFull = () => { return ( - - - + + ); }; diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx index a1dbd26423..da742fa1b8 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx @@ -14,18 +14,18 @@ * limitations under the License. */ +import Box from '@mui/material/Box'; + const LogoIcon = () => { return ( - - - + + ); }; diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx index 1c5d1230cb..74ea228335 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx @@ -39,6 +39,7 @@ import LibraryBooks from '@mui/icons-material/LibraryBooks'; import MenuIcon from '@mui/icons-material/Menu'; import GroupIcon from '@mui/icons-material/People'; import SearchIcon from '@mui/icons-material/Search'; +import Box from '@mui/material/Box'; import { OrchestratorIcon } from '@red-hat-developer-hub/backstage-plugin-orchestrator'; import { NotificationsSidebarItem } from '@backstage/plugin-notifications'; import { Administration } from '@backstage-community/plugin-rbac'; @@ -49,14 +50,14 @@ const SidebarLogo = () => { const { isOpen } = useSidebarOpenState(); return ( -
{ > {isOpen ? : } -
+ ); }; diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx index 07ee3365b5..8bc5d23167 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx @@ -14,17 +14,17 @@ * limitations under the License. */ +import Box from '@mui/material/Box'; + export const LogoFull = () => { return ( - - - + + ); }; diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx index 3f15663b3b..586d32c8a0 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx @@ -14,17 +14,17 @@ * limitations under the License. */ +import Box from '@mui/material/Box'; + export const LogoIcon = () => { return ( - - - + + ); }; diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx index 6124f70432..a358766561 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx @@ -18,6 +18,8 @@ import { sidebarConfig, useSidebarOpenState, } from '@backstage/core-components'; +import Box from '@mui/material/Box'; + import { LogoFull } from './LogoFull'; import { LogoIcon } from './LogoIcon'; @@ -25,14 +27,14 @@ export const SidebarLogo = () => { const { isOpen } = useSidebarOpenState(); return ( -
{ > {isOpen ? : } -
+ ); }; diff --git a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx index c2f9321a50..df67132f00 100644 --- a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx @@ -16,18 +16,19 @@ import { Link, sidebarConfig } from '@backstage/core-components'; +import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; export const SidebarLogo = () => { return ( -
{ Backstage -
+ ); }; From aed42131114e154a77e564fd670824342fd80f6a Mon Sep 17 00:00:00 2001 From: Lokananda Prabhu Date: Thu, 21 May 2026 14:31:29 +0530 Subject: [PATCH 4/5] 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 --- .../{plugins/orchestrator => }/eslint.frontend-shared.cjs | 2 +- workspaces/orchestrator/packages/app-legacy/.eslintrc.js | 3 ++- workspaces/orchestrator/packages/app/.eslintrc.js | 5 ++--- .../plugins/orchestrator-form-react/.eslintrc.js | 5 ++--- .../plugins/orchestrator-form-react/package.json | 1 - .../plugins/orchestrator-form-widgets/.eslintrc.js | 5 ++--- .../plugins/orchestrator-form-widgets/package.json | 1 - workspaces/orchestrator/plugins/orchestrator/.eslintrc.js | 5 ++--- workspaces/orchestrator/plugins/orchestrator/package.json | 1 - workspaces/orchestrator/yarn.lock | 2 -- 10 files changed, 11 insertions(+), 19 deletions(-) rename workspaces/orchestrator/{plugins/orchestrator => }/eslint.frontend-shared.cjs (93%) diff --git a/workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs b/workspaces/orchestrator/eslint.frontend-shared.cjs similarity index 93% rename from workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs rename to workspaces/orchestrator/eslint.frontend-shared.cjs index 02cb00ae23..73e3db265e 100644 --- a/workspaces/orchestrator/plugins/orchestrator/eslint.frontend-shared.cjs +++ b/workspaces/orchestrator/eslint.frontend-shared.cjs @@ -34,7 +34,7 @@ const materialUiMigrationEslintConfig = { }; /** - * ESLint config for frontend packages in this workspace (MUI v4 migration guards). + * Shared ESLint config for frontend packages in the orchestrator workspace. */ module.exports = packageDir => require('@backstage/cli/config/eslint-factory')( diff --git a/workspaces/orchestrator/packages/app-legacy/.eslintrc.js b/workspaces/orchestrator/packages/app-legacy/.eslintrc.js index e2c39f94df..493ce7565d 100644 --- a/workspaces/orchestrator/packages/app-legacy/.eslintrc.js +++ b/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); diff --git a/workspaces/orchestrator/packages/app/.eslintrc.js b/workspaces/orchestrator/packages/app/.eslintrc.js index 9b5192fa03..493ce7565d 100644 --- a/workspaces/orchestrator/packages/app/.eslintrc.js +++ b/workspaces/orchestrator/packages/app/.eslintrc.js @@ -14,6 +14,5 @@ * limitations under the License. */ -module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( - __dirname, -); +// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config +module.exports = require('../../eslint.frontend-shared.cjs')(__dirname); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js index f909c3336b..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js @@ -13,6 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( - __dirname, -); +// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config +module.exports = require('../../eslint.frontend-shared.cjs')(__dirname); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-react/package.json b/workspaces/orchestrator/plugins/orchestrator-form-react/package.json index bb5cd595e5..df2693be68 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-react/package.json +++ b/workspaces/orchestrator/plugins/orchestrator-form-react/package.json @@ -52,7 +52,6 @@ }, "devDependencies": { "@backstage/cli": "^0.36.0", - "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^", "@types/json-schema": "7.0.15", "@types/lodash": "^4.14.151", "@types/react": "^18.2.58", diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js index f909c3336b..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js @@ -13,6 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( - __dirname, -); +// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config +module.exports = require('../../eslint.frontend-shared.cjs')(__dirname); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json b/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json index 4f43350cab..53e2e5b9bc 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/package.json @@ -98,7 +98,6 @@ "@backstage/dev-utils": "^1.1.21", "@backstage/test-utils": "^1.7.16", "@janus-idp/cli": "3.7.0", - "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.0.0", diff --git a/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js index f909c3336b..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js @@ -13,6 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -module.exports = require('@red-hat-developer-hub/backstage-plugin-orchestrator/eslint.frontend-shared.cjs')( - __dirname, -); +// eslint-disable-next-line @backstage/no-relative-monorepo-imports -- workspace ESLint shared config +module.exports = require('../../eslint.frontend-shared.cjs')(__dirname); diff --git a/workspaces/orchestrator/plugins/orchestrator/package.json b/workspaces/orchestrator/plugins/orchestrator/package.json index 233a837084..fefe53e7d4 100644 --- a/workspaces/orchestrator/plugins/orchestrator/package.json +++ b/workspaces/orchestrator/plugins/orchestrator/package.json @@ -7,7 +7,6 @@ "exports": { ".": "./src/index.ts", "./alpha": "./src/alpha.tsx", - "./eslint.frontend-shared.cjs": "./eslint.frontend-shared.cjs", "./package.json": "./package.json" }, "typesVersions": { diff --git a/workspaces/orchestrator/yarn.lock b/workspaces/orchestrator/yarn.lock index 0ff3158313..8f5b939cf8 100644 --- a/workspaces/orchestrator/yarn.lock +++ b/workspaces/orchestrator/yarn.lock @@ -13374,7 +13374,6 @@ __metadata: "@backstage/core-plugin-api": "npm:^1.12.4" "@backstage/types": "npm:^1.2.2" "@mui/material": "npm:^5.17.1" - "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@rjsf/core": "npm:^5.21.2" @@ -13414,7 +13413,6 @@ __metadata: "@mui/icons-material": "npm:^5.17.1" "@mui/material": "npm:^5.17.1" "@mui/styles": "npm:5.18.0" - "@red-hat-developer-hub/backstage-plugin-orchestrator": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^" From 34a228a1640631d6c175114df635eb2fe510926c Mon Sep 17 00:00:00 2001 From: Lokananda Prabhu Date: Thu, 21 May 2026 15:06:50 +0530 Subject: [PATCH 5/5] 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 --- .../packages/app-legacy/package.json | 2 +- .../src/components/Root/LogoFull.tsx | 32 ------------------- .../src/components/Root/LogoIcon.tsx | 32 ------------------- .../app-legacy/src/components/Root/Root.tsx | 6 ++-- .../orchestrator/packages/app/package.json | 1 + .../packages/app/src/modules/nav/LogoFull.tsx | 30 ----------------- .../packages/app/src/modules/nav/LogoIcon.tsx | 30 ----------------- .../app/src/modules/nav/SidebarLogo.tsx | 7 ++-- .../orchestrator/dev/nav/SidebarLogo.tsx | 18 ++++++++--- .../plugins/orchestrator/package.json | 2 +- workspaces/orchestrator/yarn.lock | 19 ++++++----- 11 files changed, 35 insertions(+), 144 deletions(-) delete mode 100644 workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx delete mode 100644 workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx delete mode 100644 workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx delete mode 100644 workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx diff --git a/workspaces/orchestrator/packages/app-legacy/package.json b/workspaces/orchestrator/packages/app-legacy/package.json index 60e5bffe93..d144a68eb0 100644 --- a/workspaces/orchestrator/packages/app-legacy/package.json +++ b/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", diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx deleted file mode 100644 index 528b209f80..0000000000 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * 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. - */ - -import Box from '@mui/material/Box'; - -const LogoFull = () => { - return ( - - - - ); -}; - -export default LogoFull; diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx deleted file mode 100644 index da742fa1b8..0000000000 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/* - * 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. - */ - -import Box from '@mui/material/Box'; - -const LogoIcon = () => { - return ( - - - - ); -}; - -export default LogoIcon; diff --git a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx index 74ea228335..9236cc839f 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx @@ -43,8 +43,10 @@ import Box from '@mui/material/Box'; import { OrchestratorIcon } from '@red-hat-developer-hub/backstage-plugin-orchestrator'; import { NotificationsSidebarItem } from '@backstage/plugin-notifications'; import { Administration } from '@backstage-community/plugin-rbac'; -import LogoFull from './LogoFull'; -import LogoIcon from './LogoIcon'; +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; const SidebarLogo = () => { const { isOpen } = useSidebarOpenState(); diff --git a/workspaces/orchestrator/packages/app/package.json b/workspaces/orchestrator/packages/app/package.json index 94a9f9ca16..762b040f9d 100644 --- a/workspaces/orchestrator/packages/app/package.json +++ b/workspaces/orchestrator/packages/app/package.json @@ -34,6 +34,7 @@ "@mui/material": "^5.17.1", "@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.14.0", "react": "^18.0.2", "react-dom": "^18.0.2", "react-router": "^6.3.0", diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx deleted file mode 100644 index 8bc5d23167..0000000000 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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. - */ - -import Box from '@mui/material/Box'; - -export const LogoFull = () => { - return ( - - - - ); -}; diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx deleted file mode 100644 index 586d32c8a0..0000000000 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -/* - * 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. - */ - -import Box from '@mui/material/Box'; - -export const LogoIcon = () => { - return ( - - - - ); -}; diff --git a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx index a358766561..8bfa1e9aeb 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx @@ -19,9 +19,10 @@ import { useSidebarOpenState, } from '@backstage/core-components'; import Box from '@mui/material/Box'; - -import { LogoFull } from './LogoFull'; -import { LogoIcon } from './LogoIcon'; +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; export const SidebarLogo = () => { const { isOpen } = useSidebarOpenState(); diff --git a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx index df67132f00..1a133abbbd 100644 --- a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx @@ -14,12 +14,22 @@ * limitations under the License. */ -import { Link, sidebarConfig } from '@backstage/core-components'; +import { + Link, + sidebarConfig, + useSidebarOpenState, +} from '@backstage/core-components'; import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; + +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; export const SidebarLogo = () => { + const { isOpen } = useSidebarOpenState(); + return ( { marginLeft: 24, }} > - - Backstage - + {isOpen ? : } ); diff --git a/workspaces/orchestrator/plugins/orchestrator/package.json b/workspaces/orchestrator/plugins/orchestrator/package.json index fefe53e7d4..22ae5991cb 100644 --- a/workspaces/orchestrator/plugins/orchestrator/package.json +++ b/workspaces/orchestrator/plugins/orchestrator/package.json @@ -105,7 +105,7 @@ "@backstage/ui": "^0.13.2", "@janus-idp/cli": "3.7.0", "@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", "@testing-library/dom": "^10.0.0", "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^15.0.0", diff --git a/workspaces/orchestrator/yarn.lock b/workspaces/orchestrator/yarn.lock index 8f5b939cf8..907f3eb718 100644 --- a/workspaces/orchestrator/yarn.lock +++ b/workspaces/orchestrator/yarn.lock @@ -13479,7 +13479,7 @@ __metadata: "@red-hat-developer-hub/backstage-plugin-orchestrator-form-api": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-react": "workspace:^" "@red-hat-developer-hub/backstage-plugin-orchestrator-form-widgets": "workspace:^" - "@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.12.0" + "@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.14.0" "@testing-library/dom": "npm:^10.0.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^15.0.0" @@ -13531,19 +13531,21 @@ __metadata: languageName: unknown linkType: soft -"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.12.0": - version: 0.12.0 - resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.12.0" +"@red-hat-developer-hub/backstage-plugin-theme@npm:^0.14.0": + version: 0.14.5 + resolution: "@red-hat-developer-hub/backstage-plugin-theme@npm:0.14.5" dependencies: + "@backstage/frontend-plugin-api": "npm:^0.15.1" + "@backstage/plugin-app-react": "npm:^0.2.1" "@mui/icons-material": "npm:^5.17.1" peerDependencies: - "@backstage/core-plugin-api": ^1.12.0 - "@backstage/theme": ^0.7.0 + "@backstage/core-plugin-api": ^1.12.4 + "@backstage/theme": ^0.7.2 "@material-ui/icons": ^4.11.3 "@mui/icons-material": ^5.17.1 "@mui/material": ^5.0.0 react: ^16.13.1 || ^17.0.0 || ^18.0.0 - checksum: 10c0/9ccc7f5360089f5efe98e85eeb68af061e75306b09f2386605306c8b362b67f79855592f90e7ddb63c051dd585dd3bab7d8e5ff300f9f8cc6370ccef18aea983 + checksum: 10c0/a4a9f68f6be841584c20e4d363b72b3ca98976e3d05e4ded24f66a74eb3323aa385364259372631fa688c08fad39109b02a5c38809105af18d1a9413163d52a7 languageName: node linkType: hard @@ -18642,7 +18644,7 @@ __metadata: "@playwright/test": "npm:1.58.2" "@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": "npm:^0.12.0" + "@red-hat-developer-hub/backstage-plugin-theme": "npm:^0.14.0" "@testing-library/dom": "npm:^9.0.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^14.0.0" @@ -18692,6 +18694,7 @@ __metadata: "@mui/material": "npm:^5.17.1" "@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": "npm:^0.14.0" "@testing-library/dom": "npm:^9.0.0" "@testing-library/jest-dom": "npm:^6.0.0" "@testing-library/react": "npm:^14.0.0"