diff --git a/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md b/workspaces/orchestrator/.changeset/mui-v5-orchestrator.md new file mode 100644 index 0000000000..5629d9f17d --- /dev/null +++ b/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. diff --git a/workspaces/orchestrator/eslint.frontend-shared.cjs b/workspaces/orchestrator/eslint.frontend-shared.cjs new file mode 100644 index 0000000000..73e3db265e --- /dev/null +++ b/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, + ); 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-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 15c7e15d8b..0000000000 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoFull.tsx +++ /dev/null @@ -1,45 +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 { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 30, - }, - path: { - fill: '#7df3e1', - }, -}); -const LogoFull = () => { - const classes = useStyles(); - - 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 8ddd4f8040..0000000000 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/LogoIcon.tsx +++ /dev/null @@ -1,46 +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 { makeStyles } from '@mui/styles'; - -const useStyles = makeStyles({ - svg: { - width: 'auto', - height: 28, - }, - path: { - fill: '#7df3e1', - }, -}); - -const LogoIcon = () => { - const classes = useStyles(); - - 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 c83fd32bc6..9236cc839f 100644 --- a/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx +++ b/workspaces/orchestrator/packages/app-legacy/src/components/Root/Root.tsx @@ -39,38 +39,41 @@ 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 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'; - -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, - }, -}); +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; 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..493ce7565d 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,6 @@ * See the License for the specific language governing permissions and * 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/package.json b/workspaces/orchestrator/packages/app/package.json index 4d844c4bcf..762b040f9d 100644 --- a/workspaces/orchestrator/packages/app/package.json +++ b/workspaces/orchestrator/packages/app/package.json @@ -30,10 +30,11 @@ "@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:^", + "@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 6b6a1bd8c1..0000000000 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoFull.tsx +++ /dev/null @@ -1,43 +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 { 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 deleted file mode 100644 index 87024b08c2..0000000000 --- a/workspaces/orchestrator/packages/app/src/modules/nav/LogoIcon.tsx +++ /dev/null @@ -1,43 +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 { 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..8bfa1e9aeb 100644 --- a/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/packages/app/src/modules/nav/SidebarLogo.tsx @@ -18,34 +18,37 @@ 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, - }, -}); +import Box from '@mui/material/Box'; +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; 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..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-react/.eslintrc.js @@ -1 +1,17 @@ -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); diff --git a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js index 9184408ae4..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator-form-widgets/.eslintrc.js @@ -13,4 +13,5 @@ * See the License for the specific language governing permissions and * 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/plugins/orchestrator/.eslintrc.js b/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js index e2a53a6ad2..4283aec969 100644 --- a/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js +++ b/workspaces/orchestrator/plugins/orchestrator/.eslintrc.js @@ -1 +1,17 @@ -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); diff --git a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx index d8d952ed17..1a133abbbd 100644 --- a/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx +++ b/workspaces/orchestrator/plugins/orchestrator/dev/nav/SidebarLogo.tsx @@ -14,36 +14,44 @@ * limitations under the License. */ -import { Link, sidebarConfig } from '@backstage/core-components'; +import { + Link, + sidebarConfig, + useSidebarOpenState, +} from '@backstage/core-components'; -import { makeStyles } from '@material-ui/core'; -import Typography from '@mui/material/Typography'; +import Box from '@mui/material/Box'; -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, - }, -}); +import { + LogoFull, + LogoIcon, +} from '@red-hat-developer-hub/backstage-plugin-theme'; export const SidebarLogo = () => { - const classes = useSidebarLogoStyles(); + const { isOpen } = useSidebarOpenState(); return ( -
- - - Backstage - + + + {isOpen ? : } -
+ ); }; diff --git a/workspaces/orchestrator/plugins/orchestrator/package.json b/workspaces/orchestrator/plugins/orchestrator/package.json index 8ccd08cb9d..22ae5991cb 100644 --- a/workspaces/orchestrator/plugins/orchestrator/package.json +++ b/workspaces/orchestrator/plugins/orchestrator/package.json @@ -77,8 +77,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,10 +104,8 @@ "@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", + "@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/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..907f3eb718 100644 --- a/workspaces/orchestrator/yarn.lock +++ b/workspaces/orchestrator/yarn.lock @@ -13472,15 +13472,14 @@ __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:^" "@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" @@ -13532,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 @@ -18643,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" @@ -18689,10 +18690,11 @@ __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:^" + "@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"