fix(orchestrator):UI enhancement (#1363)

Signed-off-by: Lior Soffer <liorsoffer1@gmail.com>

Author: LiorSoffer

workspaces/orchestrator/.changeset/strong-readers-rule.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+UI fixes

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

@@ -39,28 +39,34 @@ export type InfoDialogProps = {
 export type ParentComponentRef = HTMLDivElement;
 
 const useStyles = makeStyles()(theme => ({
+  dialogTitle: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  titleContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+  },
+  titleText: {
+    lineHeight: 1,
+    margin: 0,
+  },
   closeBtn: {
     flexShrink: 0,
   },
   dialogActions: {
     justifyContent: 'flex-start',
     paddingLeft: theme.spacing(3),
-    paddingBottom: theme.spacing(2),
+    paddingTop: 0,
+    paddingBottom: theme.spacing(4),
   },
   dialogContent: {
     '& > div': {
       backgroundColor: 'transparent',
     },
   },
-  titleContainer: {
-    display: 'flex',
-  },
-  title: {
-    width: '100%',
-  },
-  titleIcon: {
-    marginRight: theme.spacing(1),
-  },
 }));
 
 export const RefForwardingInfoDialog: ForwardRefRenderFunction<
@@ -89,12 +95,13 @@ export const RefForwardingInfoDialog: ForwardRefRenderFunction<
       }}
     >
       <DialogTitle>
-        <Box className={classes.titleContainer}>
-          {titleIcon && <Box className={classes.titleIcon}>{titleIcon}</Box>}
-
-          <Typography variant="h4" className={classes.title}>
-            <b>{title}</b>
-          </Typography>
+        <Box className={classes.dialogTitle}>
+          <Box className={classes.titleContent}>
+            {titleIcon}
+            <Typography variant="h4" className={classes.titleText}>
+              <b>{title}</b>
+            </Typography>
+          </Box>
 
           <IconButton
             className={classes.closeBtn}

workspaces/orchestrator/plugins/orchestrator/src/components/OrchestratorPage/InputSchemaDialog.tsx

@@ -58,6 +58,7 @@ const InputSchemaDialogContent = ({
       ) : (
         <JsonCodeBlock
           isDarkMode={isDarkMode}
+          maxHeight={400}
           value={inputSchema?.inputSchema}
         />
       )}

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

@@ -53,7 +53,7 @@ export const VariablesDialog = ({
     >
       {hasVariables ? (
         Object.entries(instanceVariables).map(([key, value]) => (
-          <Box key={key} m={2}>
+          <Box key={key} mt={2} mb={2}>
             <Typography variant="h6" mb={1}>
               {capitalize(key)}
             </Typography>

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

@@ -446,7 +446,6 @@ export const WorkflowInstancePage = () => {
                         <ArrowDropDown />
                       ) : null
                     }
-                    style={{ color: 'white' }}
                   >
                     {value.state === ProcessInstanceStatusDTO.Active ? (
                       <>

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

@@ -80,6 +80,11 @@ const useStyles = makeStyles()(() => ({
   cardClassName: {
     overflow: 'auto',
   },
+  titleContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
 }));
 
 export const WorkflowInstancePageContent: React.FC<{
@@ -156,11 +161,15 @@ export const WorkflowInstancePageContent: React.FC<{
       <Grid container spacing={2}>
         <Grid item xs={6}>
           <InfoCard
-            title="Details"
+            title={
+              <div className={classes.titleContainer}>
+                <span>Details</span>
+                {viewVariables}
+              </div>
+            }
             divider={false}
             className={classes.topRowCard}
             cardClassName={classes.cardClassName}
-            icon={viewVariables}
           >
             <WorkflowRunDetails details={details} />
           </InfoCard>

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

@@ -23,8 +23,8 @@ import Paper from '@mui/material/Paper';
 import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from 'tss-react/mui';
 
-const useStyles = makeStyles<{ isDarkMode: boolean }>()(
-  (theme, { isDarkMode }) => ({
+const useStyles = makeStyles<{ isDarkMode: boolean; maxHeight?: number }>()(
+  (theme, { isDarkMode, maxHeight }) => ({
     root: {
       position: 'relative',
       paddingTop: theme.spacing(2),
@@ -36,7 +36,7 @@ const useStyles = makeStyles<{ isDarkMode: boolean }>()(
     iconButton: {
       position: 'absolute',
       top: 8,
-      right: 8,
+      right: maxHeight ? 24 : 8,
     },
     copyIcon: {
       color: isDarkMode ? '#B0B0B0' : '#4D4D4D',
@@ -48,20 +48,25 @@ const useStyles = makeStyles<{ isDarkMode: boolean }>()(
       whiteSpace: 'pre-wrap',
       wordBreak: 'break-word',
       color: isDarkMode ? '#B0B0B0' : '#4D4D4D',
+      maxHeight: maxHeight || 'none',
+      overflowY: maxHeight ? 'auto' : 'visible',
+      overflowX: 'hidden',
     },
   }),
 );
 
 export const JsonCodeBlock = ({
   value,
   isDarkMode,
+  maxHeight,
 }: {
   value: object;
   isDarkMode: boolean;
+  maxHeight?: number;
 }) => {
   const jsonString = JSON.stringify(value, null, 2);
   const [copied, setCopied] = React.useState(false);
-  const { classes } = useStyles({ isDarkMode });
+  const { classes } = useStyles({ isDarkMode, maxHeight });
 
   const handleCopy = async () => {
     await window.navigator.clipboard.writeText(jsonString);