From 8b935dc3c85fbe4030564301820d946effa78426 Mon Sep 17 00:00:00 2001
From: Guilherme Caponetto <638737+caponetto@users.noreply.github.com>
Date: Tue, 28 May 2024 12:48:10 -0300
Subject: [PATCH] fix(orchestrator): upgrade to mui v5 (#1727)

* fix(orchestrator): upgrade to mui v5

* fix leftover
---
 plugins/orchestrator/package.json             |   6 +-
 .../ExecuteWorkflowPage.tsx                   |   2 +-
 .../ExecuteWorkflowPage/JsonTextAreaForm.tsx  |  11 +-
 .../ExecuteWorkflowPage/StepperForm.tsx       |  18 +-
 .../src/components/InfoDialog.stories.tsx     |   2 +-
 .../src/components/InfoDialog.tsx             |  57 ++----
 .../src/components/OrchestratorIcon.tsx       |   2 +-
 .../orchestrator/src/components/Paragraph.tsx |   9 +-
 .../orchestrator/src/components/Selector.tsx  |  47 +++--
 .../src/components/SubmitButton.tsx           |   3 +-
 .../WorkflowDefinitionDetailsCard.tsx         |  19 +-
 .../WorkflowDefinitionViewerPage.tsx          |   5 +-
 .../components/WorkflowDescriptionModal.tsx   |  71 +++----
 .../src/components/WorkflowDialog.tsx         |  52 +++--
 .../src/components/WorkflowInstancePage.tsx   |   3 +-
 .../WorkflowInstancePageContent.tsx           | 184 +++++++++---------
 .../WorkflowInstanceStatusIndicator.tsx       |   4 +-
 .../src/components/WorkflowProgressNode.tsx   |  10 +-
 .../components/WorkflowRunDetails.stories.tsx |  28 +--
 .../src/components/WorkflowRunDetails.tsx     |  17 +-
 .../src/components/WorkflowRunsTabContent.tsx |   2 +-
 .../components/WorkflowVariablesViewer.tsx    |   4 +-
 .../src/components/WorkflowsTabContent.tsx    |   2 +-
 .../src/components/WorkflowsTable.tsx         |   8 +-
 .../components/ui/OverrideBackstageTable.tsx  |  15 +-
 .../hooks/useWorkflowInstanceStatusColors.ts  |  38 ++--
 yarn.lock                                     |   2 +-
 27 files changed, 267 insertions(+), 354 deletions(-)

diff --git a/plugins/orchestrator/package.json b/plugins/orchestrator/package.json
index f544f85004..f5611f1dad 100644
--- a/plugins/orchestrator/package.json
+++ b/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",
diff --git a/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx b/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx
index 1b34dda596..20f60a5ef9 100644
--- a/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx
+++ b/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,
diff --git a/plugins/orchestrator/src/components/ExecuteWorkflowPage/JsonTextAreaForm.tsx b/plugins/orchestrator/src/components/ExecuteWorkflowPage/JsonTextAreaForm.tsx
index 26bb073040..299865bf4a 100644
--- a/plugins/orchestrator/src/components/ExecuteWorkflowPage/JsonTextAreaForm.tsx
+++ b/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 },
             }}
diff --git a/plugins/orchestrator/src/components/ExecuteWorkflowPage/StepperForm.tsx b/plugins/orchestrator/src/components/ExecuteWorkflowPage/StepperForm.tsx
index e5ab9c5607..e3f5ff9332 100644
--- a/plugins/orchestrator/src/components/ExecuteWorkflowPage/StepperForm.tsx
+++ b/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';
diff --git a/plugins/orchestrator/src/components/InfoDialog.stories.tsx b/plugins/orchestrator/src/components/InfoDialog.stories.tsx
index 9c0ea98116..6fc3227a38 100644
--- a/plugins/orchestrator/src/components/InfoDialog.stories.tsx
+++ b/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';
 
diff --git a/plugins/orchestrator/src/components/InfoDialog.tsx b/plugins/orchestrator/src/components/InfoDialog.tsx
index 3813b21679..12d7f963be 100644
--- a/plugins/orchestrator/src/components/InfoDialog.tsx
+++ b/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);
diff --git a/plugins/orchestrator/src/components/OrchestratorIcon.tsx b/plugins/orchestrator/src/components/OrchestratorIcon.tsx
index 8b688e192b..1f608dc29b 100644
--- a/plugins/orchestrator/src/components/OrchestratorIcon.tsx
+++ b/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}>
diff --git a/plugins/orchestrator/src/components/Paragraph.tsx b/plugins/orchestrator/src/components/Paragraph.tsx
index f2b8921a3c..4eb97dbeaf 100644
--- a/plugins/orchestrator/src/components/Paragraph.tsx
+++ b/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}
diff --git a/plugins/orchestrator/src/components/Selector.tsx b/plugins/orchestrator/src/components/Selector.tsx
index ab70bea053..776c6d66b1 100644
--- a/plugins/orchestrator/src/components/Selector.tsx
+++ b/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,9 +50,9 @@ 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}
@@ -61,8 +60,8 @@ export const Selector = ({
           margin="dense"
           label={otherProps.label}
         />
-      </div>
-    </div>
+      </SelectDiv>
+    </RootDiv>
   );
 };
 Selector.displayName = 'Selector';
diff --git a/plugins/orchestrator/src/components/SubmitButton.tsx b/plugins/orchestrator/src/components/SubmitButton.tsx
index 1008df8ff6..c67ac7aaff 100644
--- a/plugins/orchestrator/src/components/SubmitButton.tsx
+++ b/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,
diff --git a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx b/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx
index c9072acceb..74f969c498 100644
--- a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionDetailsCard.tsx
+++ b/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>
   );
 };
 
diff --git a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx b/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx
index eb6bc61f17..a08da9316c 100644
--- a/plugins/orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx
+++ b/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 {
diff --git a/plugins/orchestrator/src/components/WorkflowDescriptionModal.tsx b/plugins/orchestrator/src/components/WorkflowDescriptionModal.tsx
index 3976a4c7b3..ea7d731006 100644
--- a/plugins/orchestrator/src/components/WorkflowDescriptionModal.tsx
+++ b/plugins/orchestrator/src/components/WorkflowDescriptionModal.tsx
@@ -1,18 +1,17 @@
-import React, { forwardRef, ForwardRefRenderFunction } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import {
-  Box,
-  Button,
-  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 Button from '@mui/material/Button';
+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';
 
 import { WorkflowOverview } from '@janus-idp/backstage-plugin-orchestrator-common';
 
@@ -25,20 +24,16 @@ export type WorkflowDescriptionModalProps = {
 
 export type ParentComponentRef = HTMLElement;
 
-const useStyles = makeStyles(_theme => ({
-  closeBtn: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
-  },
-}));
+const CloseButton = styled(IconButton)({
+  position: 'absolute',
+  right: 8,
+  top: 8,
+});
 
-export const RefForwardingWorkflowDescriptionModal: ForwardRefRenderFunction<
-  ParentComponentRef,
-  WorkflowDescriptionModalProps
-> = (props, forwardedRef): JSX.Element | null => {
+export const WorkflowDescriptionModal = (
+  props: WorkflowDescriptionModalProps,
+) => {
   const { workflow, open = false, onClose, runWorkflowLink } = props;
-  const classes = useStyles();
   const navigate = useNavigate();
 
   const handleRunWorkflow = () => {
@@ -48,32 +43,22 @@ export const RefForwardingWorkflowDescriptionModal: ForwardRefRenderFunction<
   };
 
   return (
-    <Dialog
-      onClose={_ => onClose}
-      open={open}
-      ref={forwardedRef}
-      maxWidth="sm"
-      fullWidth
-    >
+    <Dialog onClose={_ => onClose} open={open} maxWidth="sm" fullWidth>
       <DialogTitle>
         <Box>
           <Typography variant="h5">{workflow.name}</Typography>
-          <IconButton
-            className={classes.closeBtn}
-            aria-label="close"
-            onClick={onClose}
-          >
+          <CloseButton aria-label="close" onClick={onClose}>
             <CloseIcon />
-          </IconButton>
+          </CloseButton>
         </Box>
       </DialogTitle>
       <DialogContent>
         {workflow.description ? (
-          <Box>{workflow.description}</Box>
+          <DialogContentText>{workflow.description}</DialogContentText>
         ) : (
-          <Box>
+          <DialogContentText>
             <p>Are you sure you want to run this workflow?</p>
-          </Box>
+          </DialogContentText>
         )}
       </DialogContent>
       <DialogActions>
@@ -87,7 +72,3 @@ export const RefForwardingWorkflowDescriptionModal: ForwardRefRenderFunction<
     </Dialog>
   );
 };
-
-export const WorkflowDescriptionModal = forwardRef(
-  RefForwardingWorkflowDescriptionModal,
-);
diff --git a/plugins/orchestrator/src/components/WorkflowDialog.tsx b/plugins/orchestrator/src/components/WorkflowDialog.tsx
index 2bee9afef8..f39b75743b 100644
--- a/plugins/orchestrator/src/components/WorkflowDialog.tsx
+++ b/plugins/orchestrator/src/components/WorkflowDialog.tsx
@@ -1,15 +1,13 @@
 import React, { forwardRef, ForwardRefRenderFunction } from 'react';
 
-import {
-  Box,
-  Dialog,
-  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 DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
 import { WorkflowEditor } from './WorkflowEditor';
 import {
@@ -25,47 +23,41 @@ export type OrchestratorWorkflowDialogProps = {
   dialogActions?: React.ReactNode;
 } & WorkflowEditorView;
 
-const useStyles = makeStyles(_theme => ({
-  editor: {
-    height: '600px',
-    marginBottom: 20,
-  },
-  closeBtn: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
-  },
-}));
+const EditorBox = styled(Box)({
+  height: '600px',
+  marginBottom: 20,
+});
+
+const CloseButton = styled(IconButton)({
+  position: 'absolute',
+  right: 8,
+  top: 8,
+});
 
 export const RefForwardingWorkflowDialog: ForwardRefRenderFunction<
   WorkflowEditorRef,
   OrchestratorWorkflowDialogProps
 > = (props, forwardedRef): JSX.Element | null => {
   const { workflowId, title, open, close } = props;
-  const classes = useStyles();
 
   return (
     <Dialog fullWidth maxWidth="lg" onClose={_ => close()} open={open}>
       <DialogTitle>
         <Box>
           <Typography variant="h5">{title}</Typography>
-          <IconButton
-            className={classes.closeBtn}
-            aria-label="close"
-            onClick={close}
-          >
+          <CloseButton aria-label="close" onClick={close}>
             <CloseIcon />
-          </IconButton>
+          </CloseButton>
         </Box>
       </DialogTitle>
       <DialogContent>
-        <Box className={classes.editor}>
+        <EditorBox>
           <WorkflowEditor
             {...props}
             workflowId={workflowId}
             ref={forwardedRef}
           />
-        </Box>
+        </EditorBox>
       </DialogContent>
       {props.dialogActions}
     </Dialog>
diff --git a/plugins/orchestrator/src/components/WorkflowInstancePage.tsx b/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
index 34e81ab540..567479050c 100644
--- a/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
+++ b/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
@@ -12,7 +12,8 @@ import {
   useRouteRefParams,
 } from '@backstage/core-plugin-api';
 
-import { Button, Grid } from '@material-ui/core';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
 
 import {
   AssessedProcessInstance,
diff --git a/plugins/orchestrator/src/components/WorkflowInstancePageContent.tsx b/plugins/orchestrator/src/components/WorkflowInstancePageContent.tsx
index 4f9bde1f85..05b9c18c02 100644
--- a/plugins/orchestrator/src/components/WorkflowInstancePageContent.tsx
+++ b/plugins/orchestrator/src/components/WorkflowInstancePageContent.tsx
@@ -8,7 +8,10 @@ import {
   useRouteRef,
 } from '@backstage/core-plugin-api';
 
-import { Chip, Grid, makeStyles } from '@material-ui/core';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
 import moment from 'moment';
 
 import {
@@ -61,24 +64,31 @@ export const mapProcessInstanceToDetails = (
   };
 };
 
-const useStyles = makeStyles(_ => ({
-  topRowCard: {
-    height: '20rem',
-  },
-  middleRowCard: {
-    height: 'calc(2 * 20rem)',
-  },
-  bottomRowCard: {
-    height: '100%',
-  },
-  autoOverflow: { overflow: 'auto' },
-  recommendedLabelContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
-  },
-  recommendedLabel: { margin: '0 0.25rem' },
-}));
+const AutoOverflowCardContent = styled(CardContent)({
+  overflow: 'auto',
+});
+
+const TopRowCard = styled(InfoCard)({
+  height: '20rem',
+});
+
+const MiddleRowCard = styled(InfoCard)({
+  height: `calc(2 * 20rem)`,
+});
+
+const BottomRowCard = styled(InfoCard)({
+  height: '100%',
+});
+
+const RecommendedLabelContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+});
+
+const RecommendedLabel = styled(Chip)({
+  margin: '0 0.25rem',
+});
 
 const getNextWorkflows = (
   details: WorkflowRunDetail,
@@ -124,7 +134,6 @@ const getNextWorkflows = (
 export const WorkflowInstancePageContent: React.FC<{
   assessedInstance: AssessedProcessInstance;
 }> = ({ assessedInstance }) => {
-  const styles = useStyles();
   const executeWorkflowLink = useRouteRef(executeWorkflowRouteRef);
   const details = React.useMemo(
     () => mapProcessInstanceToDetails(assessedInstance.instance),
@@ -178,105 +187,86 @@ export const WorkflowInstancePageContent: React.FC<{
     <Content noPadding>
       <Grid container spacing={2}>
         <Grid item xs={6}>
-          <InfoCard
-            title="Details"
-            divider={false}
-            className={styles.topRowCard}
-          >
+          <TopRowCard title="Details" divider={false}>
             <WorkflowRunDetails
               details={details}
               assessedBy={assessedInstance.assessedBy}
             />
-          </InfoCard>
+          </TopRowCard>
         </Grid>
 
         <Grid item xs={6}>
-          <InfoCard
-            title="Results"
-            divider={false}
-            className={styles.topRowCard}
-            cardClassName={styles.autoOverflow}
-          >
-            {nextWorkflows.length === 0 ? (
-              <WorkflowVariablesViewer variables={instanceVariables} />
-            ) : (
-              <Grid container spacing={3}>
-                {nextWorkflows.map(item => (
-                  <Grid item xs={4} key={item.title}>
-                    <div
-                      className={styles.recommendedLabelContainer}
-                      key={item.title}
-                    >
-                      <Link
-                        color="primary"
-                        to="#"
-                        onClick={() => {
-                          openWorkflowDescriptionModal(item.id);
-                        }}
-                      >
-                        {item.title}
-                      </Link>
-                      {item.isRecommended ? (
-                        <Chip
-                          size="small"
-                          label="Recommended"
-                          color="secondary"
-                          className={styles.recommendedLabel}
-                        />
-                      ) : null}
-                    </div>
-                    <WorkflowDescriptionModal
-                      workflow={currentWorkflow}
-                      runWorkflowLink={item.link}
-                      open={item.id === currentOpenedWorkflowDescriptionModalID}
-                      onClose={closeWorkflowDescriptionModal}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            )}
-          </InfoCard>
+          <TopRowCard title="Results" divider={false}>
+            <AutoOverflowCardContent>
+              {nextWorkflows.length === 0 ? (
+                <WorkflowVariablesViewer variables={instanceVariables} />
+              ) : (
+                <Grid container spacing={3}>
+                  {nextWorkflows.map(item => (
+                    <Grid item xs={4} key={item.title}>
+                      <RecommendedLabelContainer key={item.title}>
+                        <Link
+                          color="primary"
+                          to="#"
+                          onClick={() => {
+                            openWorkflowDescriptionModal(item.id);
+                          }}
+                        >
+                          {item.title}
+                        </Link>
+                        {item.isRecommended ? (
+                          <RecommendedLabel
+                            size="small"
+                            label="Recommended"
+                            color="secondary"
+                          />
+                        ) : null}
+                      </RecommendedLabelContainer>
+                      <WorkflowDescriptionModal
+                        workflow={currentWorkflow}
+                        runWorkflowLink={item.link}
+                        open={
+                          item.id === currentOpenedWorkflowDescriptionModalID
+                        }
+                        onClose={closeWorkflowDescriptionModal}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              )}
+            </AutoOverflowCardContent>
+          </TopRowCard>
         </Grid>
 
         <Grid item xs={6}>
-          <InfoCard
-            title="Workflow definition"
-            divider={false}
-            className={styles.middleRowCard}
-          >
+          <MiddleRowCard title="Workflow definition" divider={false}>
             <WorkflowEditor
               workflowId={assessedInstance.instance.processId}
               kind={EditorViewKind.DIAGRAM_VIEWER}
               editorMode="text"
             />
-          </InfoCard>
+          </MiddleRowCard>
         </Grid>
 
         <Grid item xs={6}>
-          <InfoCard
-            title="Workflow progress"
-            divider={false}
-            className={styles.middleRowCard}
-            cardClassName={styles.autoOverflow}
-          >
-            <WorkflowProgress
-              workflowError={assessedInstance.instance.error}
-              workflowNodes={assessedInstance.instance.nodes}
-              workflowStatus={assessedInstance.instance.state}
-            />
-          </InfoCard>
+          <MiddleRowCard title="Workflow progress" divider={false}>
+            <AutoOverflowCardContent>
+              <WorkflowProgress
+                workflowError={assessedInstance.instance.error}
+                workflowNodes={assessedInstance.instance.nodes}
+                workflowStatus={assessedInstance.instance.state}
+              />
+            </AutoOverflowCardContent>
+          </MiddleRowCard>
         </Grid>
 
         {nextWorkflows.length > 0 ? (
           <Grid item xs={12}>
-            <InfoCard
-              title="Variables"
-              divider={false}
-              className={styles.bottomRowCard}
-              cardClassName={styles.autoOverflow}
-            >
-              <WorkflowVariablesViewer variables={instanceVariables} />
-            </InfoCard>
+            <BottomRowCard title="Variables" divider={false}>
+              <AutoOverflowCardContent>
+                <WorkflowVariablesViewer variables={instanceVariables} />
+              </AutoOverflowCardContent>
+            </BottomRowCard>
           </Grid>
         ) : null}
       </Grid>
diff --git a/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx b/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
index 076eb954af..c62b3aff02 100644
--- a/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
+++ b/plugins/orchestrator/src/components/WorkflowInstanceStatusIndicator.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
-import DotIcon from '@material-ui/icons/FiberManualRecord';
+import DotIcon from '@mui/icons-material/FiberManualRecord';
 
 import {
   capitalize,
@@ -30,7 +30,7 @@ export const WorkflowInstanceStatusIndicator = ({
 
   return (
     <>
-      <DotIcon style={{ fontSize: '0.75rem' }} className={iconColor} />{' '}
+      <DotIcon style={{ fontSize: '0.75rem', color: iconColor }} />{' '}
       {lastRunId ? (
         <Link to={workflowInstanceLink({ instanceId: lastRunId })}>
           {capitalize(status)}
diff --git a/plugins/orchestrator/src/components/WorkflowProgressNode.tsx b/plugins/orchestrator/src/components/WorkflowProgressNode.tsx
index b078f0de5d..871600da34 100644
--- a/plugins/orchestrator/src/components/WorkflowProgressNode.tsx
+++ b/plugins/orchestrator/src/components/WorkflowProgressNode.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import Moment from 'react-moment';
 
-import { Tooltip } from '@material-ui/core';
-import CancelIcon from '@material-ui/icons/Cancel';
-import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import PauseCircleIcon from '@mui/icons-material/PauseCircle';
+import Tooltip from '@mui/material/Tooltip';
 
 import { VALUE_UNAVAILABLE } from '../constants';
 import { useWorkflowInstanceStateColors } from '../hooks/useWorkflowInstanceStatusColors';
@@ -27,14 +27,14 @@ const WorkflowProgressNodeIcon: React.FC<{
             'Additional details about this error are not available'
           }
         >
-          <ErrorIcon className={color} />
+          <ErrorIcon style={{ color }} />
         </Tooltip>
       );
     }
     case 'COMPLETED': {
       return (
         <Tooltip title="Completed">
-          <CheckCircleIcon className={color} />
+          <CheckCircleIcon style={{ color }} />
         </Tooltip>
       );
     }
diff --git a/plugins/orchestrator/src/components/WorkflowRunDetails.stories.tsx b/plugins/orchestrator/src/components/WorkflowRunDetails.stories.tsx
index b986e56047..3fb16bdf86 100644
--- a/plugins/orchestrator/src/components/WorkflowRunDetails.stories.tsx
+++ b/plugins/orchestrator/src/components/WorkflowRunDetails.stories.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import { Content, InfoCard } from '@backstage/core-components';
 import { wrapInTestApp } from '@backstage/test-utils';
 
-import { makeStyles } from '@material-ui/core';
-import Grid from '@material-ui/core/Grid/Grid';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { fakeCompletedInstance } from '../__fixtures__/fakeProcessInstance';
@@ -13,11 +13,9 @@ import { veryLongString } from '../__fixtures__/veryLongString';
 import { orchestratorRootRouteRef } from '../routes';
 import { WorkflowRunDetails } from './WorkflowRunDetails';
 
-const useStyles = makeStyles(_ => ({
-  topRowCard: {
-    height: '20rem',
-  },
-}));
+const TopRowCard = styled(InfoCard)({
+  height: '20rem',
+});
 
 const meta = {
   title: 'Orchestrator/WorkflowDetails',
@@ -34,22 +32,14 @@ const meta = {
         <Content noPadding>
           <Grid container spacing={2}>
             <Grid item xs={6}>
-              <InfoCard
-                title="Details"
-                divider={false}
-                className={useStyles().topRowCard}
-              >
+              <TopRowCard title="Details" divider={false}>
                 <Story />
-              </InfoCard>
+              </TopRowCard>
             </Grid>
             <Grid item xs={6}>
-              <InfoCard
-                title="Another card"
-                divider={false}
-                className={useStyles().topRowCard}
-              >
+              <TopRowCard title="Another card" divider={false}>
                 <p>Nothing fancy here...</p>
-              </InfoCard>
+              </TopRowCard>
             </Grid>
           </Grid>
         </Content>,
diff --git a/plugins/orchestrator/src/components/WorkflowRunDetails.tsx b/plugins/orchestrator/src/components/WorkflowRunDetails.tsx
index 742652d82a..def00b2a20 100644
--- a/plugins/orchestrator/src/components/WorkflowRunDetails.tsx
+++ b/plugins/orchestrator/src/components/WorkflowRunDetails.tsx
@@ -4,7 +4,9 @@ import { Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { AboutField } from '@backstage/plugin-catalog';
 
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
 
 import {
   capitalize,
@@ -22,22 +24,19 @@ type WorkflowDetailsCardProps = {
   details: WorkflowRunDetail;
 };
 
-const useStyles = makeStyles({
-  root: {
-    overflowY: 'auto',
-    height: '15rem',
-  },
+const RootGrid = styled(Grid)({
+  overflowY: 'auto',
+  height: '15rem',
 });
 
 export const WorkflowRunDetails: React.FC<WorkflowDetailsCardProps> = ({
   assessedBy,
   details,
 }) => {
-  const styles = useStyles();
   const workflowInstanceLink = useRouteRef(workflowInstanceRouteRef);
 
   return (
-    <Grid container className={styles.root} alignContent="flex-start">
+    <RootGrid container alignContent="flex-start">
       <Grid item md={4} key="Category">
         <AboutField label="Category">
           <Typography variant="subtitle2" component="div">
@@ -104,7 +103,7 @@ export const WorkflowRunDetails: React.FC<WorkflowDetailsCardProps> = ({
           </Typography>
         </AboutField>
       </Grid>
-    </Grid>
+    </RootGrid>
   );
 };
 WorkflowRunDetails.displayName = 'WorkflowDetails';
diff --git a/plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx b/plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx
index d583e02576..16860e44d7 100644
--- a/plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx
+++ b/plugins/orchestrator/src/components/WorkflowRunsTabContent.tsx
@@ -9,7 +9,7 @@ import {
 } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 
-import { Grid } from '@material-ui/core';
+import Grid from '@mui/material/Grid';
 
 import {
   capitalize,
diff --git a/plugins/orchestrator/src/components/WorkflowVariablesViewer.tsx b/plugins/orchestrator/src/components/WorkflowVariablesViewer.tsx
index 855b8a3c72..64ee6483f7 100644
--- a/plugins/orchestrator/src/components/WorkflowVariablesViewer.tsx
+++ b/plugins/orchestrator/src/components/WorkflowVariablesViewer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactJson from 'react-json-view';
 
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material/styles';
 
 import { ProcessInstanceVariables } from '@janus-idp/backstage-plugin-orchestrator-common';
 
@@ -24,7 +24,7 @@ export const WorkflowVariablesViewer: React.FC<ProcessVariablesViewerProps> = ({
     <ReactJson
       src={variables}
       name={false}
-      theme={theme.palette.type === 'dark' ? 'monokai' : 'rjv-default'}
+      theme={theme.palette.mode === 'dark' ? 'monokai' : 'rjv-default'}
     />
   );
 };
diff --git a/plugins/orchestrator/src/components/WorkflowsTabContent.tsx b/plugins/orchestrator/src/components/WorkflowsTabContent.tsx
index 13ed75c5e7..1e584e0c78 100644
--- a/plugins/orchestrator/src/components/WorkflowsTabContent.tsx
+++ b/plugins/orchestrator/src/components/WorkflowsTabContent.tsx
@@ -7,7 +7,7 @@ import {
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
-import Grid from '@material-ui/core/Grid/Grid';
+import Grid from '@mui/material/Grid';
 
 import { WorkflowOverview } from '@janus-idp/backstage-plugin-orchestrator-common';
 
diff --git a/plugins/orchestrator/src/components/WorkflowsTable.tsx b/plugins/orchestrator/src/components/WorkflowsTable.tsx
index 92d77ce809..3182af3cf6 100644
--- a/plugins/orchestrator/src/components/WorkflowsTable.tsx
+++ b/plugins/orchestrator/src/components/WorkflowsTable.tsx
@@ -4,8 +4,8 @@ import { useNavigate } from 'react-router-dom';
 import { Link, TableColumn, TableProps } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
-import Pageview from '@material-ui/icons/Pageview';
-import PlayArrow from '@material-ui/icons/PlayArrow';
+import Pageview from '@mui/icons-material/Pageview';
+import PlayArrow from '@mui/icons-material/PlayArrow';
 
 import {
   capitalize,
@@ -62,13 +62,13 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
   const actions = useMemo(() => {
     const actionItems: TableProps<FormattedWorkflowOverview>['actions'] = [
       {
-        icon: PlayArrow,
+        icon: () => <PlayArrow />,
         tooltip: 'Execute',
         onClick: (_, rowData) =>
           handleExecute(rowData as FormattedWorkflowOverview),
       },
       {
-        icon: Pageview,
+        icon: () => <Pageview />,
         tooltip: 'View',
         onClick: (_, rowData) =>
           handleView(rowData as FormattedWorkflowOverview),
diff --git a/plugins/orchestrator/src/components/ui/OverrideBackstageTable.tsx b/plugins/orchestrator/src/components/ui/OverrideBackstageTable.tsx
index 93914a8015..f47f7d9e62 100644
--- a/plugins/orchestrator/src/components/ui/OverrideBackstageTable.tsx
+++ b/plugins/orchestrator/src/components/ui/OverrideBackstageTable.tsx
@@ -5,29 +5,26 @@ import {
   TableProps,
 } from '@backstage/core-components';
 
-import { makeStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
 
 // Workaround by issue created from overriding the tab theme in the backstage-showcase to add a gray background to disabled tabs.
 // This is achieved by overriding the global Mui-disabled class, which results in the actions column header background turning gray.
 // See https://github.com/janus-idp/backstage-showcase/blob/main/packages/app/src/themes/componentOverrides.ts#L59
 
-const useStyles = makeStyles({
-  orchestratorTable: {
-    '& .Mui-disabled': {
-      backgroundColor: 'transparent',
-    },
+const TableDiv = styled('div')({
+  '& .Mui-disabled': {
+    backgroundColor: 'transparent',
   },
 });
 
 const OverrideBackstageTable = <T extends object>(props: TableProps<T>) => {
-  const classes = useStyles();
   return (
-    <div className={classes.orchestratorTable}>
+    <TableDiv>
       <BackstageTable
         {...props}
         options={{ ...props.options, thirdSortClick: false }}
       />
-    </div>
+    </TableDiv>
   );
 };
 
diff --git a/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts b/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts
index 4258109ec7..1895608395 100644
--- a/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts
+++ b/plugins/orchestrator/src/hooks/useWorkflowInstanceStatusColors.ts
@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core';
+import { useTheme } from '@mui/material/styles';
 
 import {
   ProcessInstanceState,
@@ -8,30 +8,14 @@ import {
 export const useWorkflowInstanceStateColors = (
   value?: ProcessInstanceStateValues,
 ) => {
-  const useStyles = makeStyles(
-    theme =>
-      ({
-        [ProcessInstanceState.Active]: {
-          color: theme.palette.primary.main,
-        },
-        [ProcessInstanceState.Completed]: {
-          color: theme.palette.success.main,
-        },
-        [ProcessInstanceState.Suspended]: {
-          color: theme.palette.warning.main,
-        },
-        [ProcessInstanceState.Aborted]: {
-          color: theme.palette.error.main,
-        },
-        [ProcessInstanceState.Error]: {
-          color: theme.palette.error.main,
-        },
-        [ProcessInstanceState.Pending]: {
-          color: theme.palette.grey[500],
-        },
-      }) as const,
-  );
-
-  const styles = useStyles();
-  return value ? styles[value] : undefined;
+  const theme = useTheme();
+  const colors = {
+    [ProcessInstanceState.Active]: theme.palette.primary.main,
+    [ProcessInstanceState.Completed]: theme.palette.success.main,
+    [ProcessInstanceState.Suspended]: theme.palette.warning.main,
+    [ProcessInstanceState.Aborted]: theme.palette.error.main,
+    [ProcessInstanceState.Error]: theme.palette.error.main,
+    [ProcessInstanceState.Pending]: theme.palette.grey[500],
+  };
+  return value ? colors[value] : undefined;
 };
diff --git a/yarn.lock b/yarn.lock
index 47ef6b446d..51c7859627 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7615,7 +7615,7 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.18.tgz#0f9426409a82f78423bdf504b2a5a3788656d612"
   integrity sha512-/9pVk+Al8qxAjwFUADv4BRZgMpZM4m5E+2Q/20qhVPuIJWqKp4Ie4tGExac6zu93rgPTYVQGgu+1vjiT0E+cEw==
 
-"@mui/icons-material@5.15.17", "@mui/icons-material@^5.15.16", "@mui/icons-material@^5.15.3", "@mui/icons-material@^5.15.8":
+"@mui/icons-material@5.15.17", "@mui/icons-material@^5.15.16", "@mui/icons-material@^5.15.8":
   version "5.15.17"
   resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.17.tgz#518c02354036f7df28c8f9890b1db6a3269fcc2f"
   integrity sha512-xVzl2De7IY36s/keHX45YMiCpsIx3mNv2xwDgtBkRSnZQtVk+Gqufwj1ktUxEyjzEhBl0+PiNJqYC31C+n1n6A==