fix(orchestrator-form-react): fix ui styling issues in workflow results page (#2808)

Author: karthikjeeyar

workspaces/orchestrator/.changeset/new-books-matter.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+Fix UI styling issues in worfkflow results page

workspaces/orchestrator/plugins/orchestrator/package.json

@@ -78,6 +78,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",
     "@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:^",

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowDescriptionModal.tsx

@@ -118,7 +118,14 @@ export const RefForwardingWorkflowDescriptionModal: ForwardRefRenderFunction<
       fullWidth
     >
       <DialogTitle>
-        <Box>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'baseline',
+            justifyContent: 'space-between',
+            gap: 1,
+          }}
+        >
           <Typography variant="h5">{workflow.name}</Typography>
           <IconButton
             className={classes.closeBtn}

workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowResult.tsx

@@ -25,8 +25,7 @@ import {
 import { RouteFunc, useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { AboutField } from '@backstage/plugin-catalog';
 
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
+import { Alert, AlertTitle } from '@material-ui/lab';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -433,7 +432,7 @@ export const WorkflowResult: React.FC<{
         className={className}
         cardClassName={cardClassName}
       >
-        <Divider sx={{ mb: 2 }} />
+        <Divider sx={{ '&&': { mb: 2 } }} />
         {logsEnabled && (
           <>
             <Box sx={{ ml: 2 }}>
@@ -452,7 +451,7 @@ export const WorkflowResult: React.FC<{
                 {t('run.logs.viewLogs')}
               </Button>
             </Box>
-            <Divider sx={{ mt: 2, mb: 2 }} />
+            <Divider sx={{ '&&': { my: 2 } }} />
           </>
         )}
         <Grid container alignContent="flex-start" spacing="1rem">

workspaces/orchestrator/plugins/orchestrator/src/components/ui/TextCodeBlock.tsx

@@ -29,9 +29,12 @@ const useStyles = makeStyles<{ isDarkMode: boolean; maxHeight?: number }>()(
       position: 'relative',
       paddingTop: theme.spacing(2),
       paddingBottom: theme.spacing(2),
-      backgroundColor: isDarkMode ? '#151515' : '#F0F0F0',
       maxWidth: 600,
       marginTop: '0.6rem',
+      '&&': {
+        outline: 'unset',
+        backgroundColor: isDarkMode ? '#151515' : '#F0F0F0',
+      },
     },
     iconButton: {
       position: 'absolute',

workspaces/orchestrator/yarn.lock

@@ -12893,6 +12893,7 @@ __metadata:
     "@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"
     "@red-hat-developer-hub/backstage-plugin-orchestrator-common": "workspace:^"