fix(orchestrator): upgrade to mui v5 (janus-idp#1727)

* fix(orchestrator): upgrade to mui v5

* fix leftover

plugins/orchestrator/package.json

@@ -51,11 +51,9 @@
     "@kie-tools/serverless-workflow-combined-editor": "^0.32.0",
     "@kie-tools/serverless-workflow-language-service": "^0.32.0",
     "@kie-tools/serverless-workflow-service-catalog": "^0.32.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.45",
     "@monaco-editor/react": "^4.6.0",
-    "@mui/icons-material": "^5.15.3",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
     "@rjsf/core": "^5.18.4",
     "@rjsf/mui": "^5.18.4",
     "@rjsf/utils": "^5.18.4",

plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx

@@ -15,7 +15,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { JsonObject } from '@backstage/types';
 
-import { Grid } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
 
 import {
   QUERY_PARAM_ASSESSMENT_INSTANCE_ID,

plugins/orchestrator/src/components/ExecuteWorkflowPage/JsonTextAreaForm.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 
 import { JsonObject } from '@backstage/types';
 
-import { Box, Grid, useTheme } from '@material-ui/core';
-import { Alert, AlertTitle } from '@material-ui/lab';
 import { Editor } from '@monaco-editor/react';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/material/styles';
 
 import SubmitButton from '../SubmitButton';
 
@@ -40,13 +43,13 @@ const JsonTextAreaForm = ({
         </Alert>
       </Grid>
       <Grid item xs={12}>
-        <Box style={{ border: `1px solid ${theme.palette.border}` }}>
+        <Box style={{ border: `1px solid ${theme.palette.divider}` }}>
           <Editor
             value={jsonText}
             language="json"
             onChange={(value: string | undefined) => setJsonText(value ?? '')}
             height="30rem"
-            theme={theme.palette.type === 'dark' ? 'vs-dark' : 'light'}
+            theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
             options={{
               minimap: { enabled: false },
             }}

plugins/orchestrator/src/components/ExecuteWorkflowPage/StepperForm.tsx

@@ -3,16 +3,14 @@ import React from 'react';
 import { Content, StructuredMetadataTable } from '@backstage/core-components';
 import { JsonObject } from '@backstage/types';
 
-import {
-  Box,
-  Button,
-  Paper,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-} from '@material-ui/core';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Step from '@mui/material/Step';
+import StepContent from '@mui/material/StepContent';
+import StepLabel from '@mui/material/StepLabel';
+import Stepper from '@mui/material/Stepper';
+import Typography from '@mui/material/Typography';
 import { FormProps } from '@rjsf/core';
 import Form from '@rjsf/mui';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';

plugins/orchestrator/src/components/InfoDialog.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from '@material-ui/core';
+import Button from '@mui/material/Button';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
 

plugins/orchestrator/src/components/InfoDialog.tsx

@@ -1,16 +1,15 @@
-import React, { forwardRef, ForwardRefRenderFunction } from 'react';
+import React from 'react';
 
-import {
-  Box,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  makeStyles,
-  Typography,
-} from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from '@mui/icons-material/Close';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
 export type InfoDialogProps = {
   title: string;
@@ -20,43 +19,29 @@ export type InfoDialogProps = {
   children?: React.ReactNode;
 };
 
-export type ParentComponentRef = HTMLElement;
+const CloseButton = styled(IconButton)({
+  position: 'absolute',
+  right: 8,
+  top: 8,
+});
 
-const useStyles = makeStyles(_theme => ({
-  closeBtn: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
-  },
-}));
-
-export const RefForwardingInfoDialog: ForwardRefRenderFunction<
-  ParentComponentRef,
-  InfoDialogProps
-> = (props, forwardedRef): JSX.Element | null => {
+export const InfoDialog = (props: InfoDialogProps) => {
   const { title, open = false, onClose, children, dialogActions } = props;
-  const classes = useStyles();
 
   return (
-    <Dialog onClose={_ => onClose} open={open} ref={forwardedRef}>
+    <Dialog onClose={_ => onClose} open={open}>
       <DialogTitle>
         <Box>
           <Typography variant="h5">{title}</Typography>
-          <IconButton
-            className={classes.closeBtn}
-            aria-label="close"
-            onClick={onClose}
-          >
+          <CloseButton aria-label="close" onClick={onClose}>
             <CloseIcon />
-          </IconButton>
+          </CloseButton>
         </Box>
       </DialogTitle>
       <DialogContent>
-        <Box>{children}</Box>
+        <DialogContentText>{children}</DialogContentText>
       </DialogContent>
       <DialogActions>{dialogActions}</DialogActions>
     </Dialog>
   );
 };
-
-export const InfoDialog = forwardRef(RefForwardingInfoDialog);

plugins/orchestrator/src/components/OrchestratorIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 const OrchestratorIcon = (props: SvgIconProps) => (
   <SvgIcon viewBox="0 0 126 166.8" {...props}>

plugins/orchestrator/src/components/Paragraph.tsx

@@ -1,15 +1,12 @@
 import React, { PropsWithChildren } from 'react';
 
-import { Typography } from '@material-ui/core';
-import { Variant } from '@material-ui/core/styles/createTypography';
+import Typography from '@mui/material/Typography';
 
-export const Paragraph = (
-  props: PropsWithChildren<{ variant?: Variant | 'inherit' }>,
-) => {
+export const Paragraph = (props: PropsWithChildren<{}>) => {
   return (
     <Typography
       style={{ marginTop: '14px', marginBottom: '14px' }}
-      variant={props.variant ?? 'body2'}
+      variant="body2"
       component="p"
     >
       {props.children}

plugins/orchestrator/src/components/Selector.tsx

@@ -2,25 +2,26 @@ import React from 'react';
 
 import { Select, SelectedItems } from '@backstage/core-components';
 
-import { makeStyles, Typography } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    alignItems: 'baseline',
-    '& label + div': {
-      marginTop: '0px',
-    },
-  },
-  select: {
-    width: '10rem',
-  },
-  label: {
-    color: theme.palette.text.primary,
-    fontSize: theme.typography.fontSize,
-    paddingRight: '0.5rem',
-    fontWeight: 'bold',
+const RootDiv = styled('div')({
+  display: 'flex',
+  alignItems: 'baseline',
+  '& label + div': {
+    marginTop: '0px',
   },
+});
+
+const SelectDiv = styled('div')({
+  width: '10rem',
+});
+
+const StyledLabel = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontSize: theme.typography.fontSize,
+  paddingRight: '0.5rem',
+  fontWeight: 'bold',
 }));
 
 const ALL_ITEMS = '___all___';
@@ -35,8 +36,6 @@ export const Selector = ({
   includeAll = true,
   ...otherProps
 }: SelectorProps) => {
-  const styles = useStyles();
-
   const selectItems = React.useMemo(
     () =>
       includeAll
@@ -51,18 +50,18 @@ export const Selector = ({
   );
 
   return (
-    <div className={styles.root}>
-      <Typography className={styles.label}>{otherProps.label}</Typography>
-      <div className={styles.select}>
+    <RootDiv>
+      <StyledLabel>{otherProps.label}</StyledLabel>
+      <SelectDiv>
         <Select
           onChange={handleChange}
           items={selectItems}
           selected={otherProps.selected}
           margin="dense"
           label={otherProps.label}
         />
-      </div>
-    </div>
+      </SelectDiv>
+    </RootDiv>
   );
 };
 Selector.displayName = 'Selector';

plugins/orchestrator/src/components/SubmitButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { Button, CircularProgress } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 
 const SubmitButton = ({
   submitting,

plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { InfoCard } from '@backstage/core-components';
 import { AboutField } from '@backstage/plugin-catalog';
 
-import { Grid, makeStyles } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
+import { styled } from '@mui/material/styles';
 
 import {
   ProcessInstanceStateValues,
@@ -15,11 +16,9 @@ import { VALUE_UNAVAILABLE } from '../../constants';
 import WorkflowOverviewFormatter from '../../dataFormatters/WorkflowOverviewFormatter';
 import { WorkflowInstanceStatusIndicator } from '../WorkflowInstanceStatusIndicator';
 
-const useStyles = makeStyles({
-  details: {
-    overflowY: 'auto',
-    height: '15rem',
-  },
+const DetailsInfoCard = styled(InfoCard)({
+  overflowY: 'auto',
+  height: '15rem',
 });
 
 const WorkflowDefinitionDetailsCard = ({
@@ -29,8 +28,6 @@ const WorkflowDefinitionDetailsCard = ({
   loading: boolean;
   workflowOverview?: WorkflowOverview;
 }) => {
-  const classes = useStyles();
-
   const formattedWorkflowOverview = React.useMemo(
     () =>
       workflowOverview
@@ -73,7 +70,7 @@ const WorkflowDefinitionDetailsCard = ({
   );
 
   return (
-    <InfoCard title="Details" className={classes.details}>
+    <DetailsInfoCard title="Details">
       <Grid container spacing={3} alignContent="flex-start">
         <Grid container item md={4} spacing={3} alignContent="flex-start">
           {details?.map(({ label, value, children }) => (
@@ -98,7 +95,7 @@ const WorkflowDefinitionDetailsCard = ({
           </AboutField>
         </Grid>
       </Grid>
-    </InfoCard>
+    </DetailsInfoCard>
   );
 };
 

plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx

@@ -9,8 +9,9 @@ import {
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
 
-import { Button, Grid } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
 
 import { orchestratorApiRef } from '../../api';
 import {