fix(orchestrator): multiple visibility issues (#1016)

Author: batzionb

workspaces/orchestrator/plugins/orchestrator-backend/src/service/router.ts

@@ -684,7 +684,7 @@ function setupInternalRoutes(
           inputData = Object.keys(inputSchemaProps)
             .filter(k => k in workflowData)
             .reduce((result, k) => {
-              if (!workflowData[k]) {
+              if (workflowData[k] === undefined) {
                 return result;
               }
               result[k] = workflowData[k];

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

@@ -28,7 +28,8 @@ export const WorkflowInputs: React.FC<{
   value: any;
   loading: any;
   responseError: any;
-}> = ({ className, value, loading, responseError }) => {
+  cardClassName: string;
+}> = ({ className, value, loading, responseError, cardClassName }) => {
   const inputs = value?.data;
   return (
     <InfoCard
@@ -40,6 +41,7 @@ export const WorkflowInputs: React.FC<{
       }
       divider={false}
       className={className}
+      cardClassName={cardClassName}
     >
       {loading ? <Progress /> : null}
 

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

@@ -70,21 +70,19 @@ export const mapProcessInstanceToDetails = (
 const useStyles = makeStyles()(() => ({
   topRowCard: {
     height: '24rem',
-    overflow: 'auto',
-    '& > div:nth-child(2)': {
-      overflow: 'auto',
-    },
   },
   bottomRowCard: {
     height: '42rem',
-    overflow: 'auto',
   },
   recommendedLabelContainer: {
     display: 'flex',
     alignItems: 'center',
     whiteSpace: 'nowrap',
   },
   recommendedLabel: { margin: '0 0.25rem' },
+  cardClassName: {
+    overflow: 'auto',
+  },
 }));
 
 export const WorkflowInstancePageContent: React.FC<{
@@ -164,6 +162,7 @@ export const WorkflowInstancePageContent: React.FC<{
             title="Details"
             divider={false}
             className={classes.topRowCard}
+            cardClassName={classes.cardClassName}
             icon={viewVariables}
           >
             <WorkflowRunDetails
@@ -176,13 +175,15 @@ export const WorkflowInstancePageContent: React.FC<{
         <Grid item xs={6}>
           <WorkflowResult
             className={classes.topRowCard}
+            cardClassName={classes.cardClassName}
             assessedInstance={assessedInstance}
           />
         </Grid>
 
         <Grid item xs={6}>
           <WorkflowInputs
             className={classes.bottomRowCard}
+            cardClassName={classes.cardClassName}
             value={value}
             loading={loading}
             responseError={responseError}
@@ -194,6 +195,7 @@ export const WorkflowInstancePageContent: React.FC<{
             title="Workflow progress"
             divider={false}
             className={classes.bottomRowCard}
+            cardClassName={classes.cardClassName}
           >
             <WorkflowProgress
               workflowError={assessedInstance.instance.error}

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

@@ -340,7 +340,7 @@ export const WorkflowResult: React.FC<{
       className={className}
       cardClassName={cardClassName}
     >
-      <Grid container alignContent="flex-start">
+      <Grid container alignContent="flex-start" spacing="1rem">
         <NextWorkflows
           instanceId={instance.id}
           nextWorkflows={result?.nextWorkflows}

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

@@ -18,6 +18,7 @@ import React from 'react';
 import { Link } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
+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';
@@ -79,17 +80,16 @@ export const WorkflowInstanceStatusIndicator = ({
   }
 
   return (
-    <div
-      style={{ display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
-    >
+    <Box display="flex" alignItems="center">
       {icon}
+      &nbsp;{' '}
       {lastRunId ? (
         <Link to={workflowInstanceLink({ instanceId: lastRunId })}>
           {capitalize(title)}
         </Link>
       ) : (
         <>{capitalize(title)}</>
       )}
-    </div>
+    </Box>
   );
 };

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

@@ -59,7 +59,7 @@ export const WorkflowRunDetails: React.FC<WorkflowDetailsCardProps> = ({
   const workflowPageLink = useRouteRef(workflowRouteRef);
 
   return (
-    <Grid container alignContent="flex-start">
+    <Grid container alignContent="flex-start" spacing="1rem">
       <Grid item md={7} key="Workflow">
         <AboutField label="Workflow">
           <Link to={workflowPageLink({ workflowId: details.workflowId })}>