fix(orchestrator): fix view variables screen (#595)

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

Author: LiorSoffer

workspaces/orchestrator/.changeset/brave-mayflies-melt.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+fix view variables screen

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

@@ -30,45 +30,66 @@ import CloseIcon from '@material-ui/icons/Close';
 
 export type InfoDialogProps = {
   title: React.ReactNode;
+  titleIcon?: React.ReactNode;
   open: boolean;
   onClose?: () => void;
   dialogActions?: React.ReactNode;
   children?: React.ReactNode;
+  wideDialog?: boolean;
 };
 
 export type ParentComponentRef = HTMLElement;
 
-const useStyles = makeStyles(_theme => ({
+const useStyles = makeStyles(theme => ({
   closeBtn: {
     position: 'absolute',
-    right: 8,
-    top: 8,
+    right: theme.spacing(1),
+    top: theme.spacing(1),
   },
   dialogActions: {
     justifyContent: 'flex-start',
-    paddingLeft: _theme.spacing(3),
-    paddingBottom: _theme.spacing(2),
+    paddingLeft: theme.spacing(3),
+    paddingBottom: theme.spacing(2),
   },
-  title: {
-    position: 'absolute',
-    left: 20,
-    top: 20,
+  titleContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  titleIcon: {
+    marginRight: theme.spacing(1),
   },
 }));
 
 export const RefForwardingInfoDialog: ForwardRefRenderFunction<
   ParentComponentRef,
   InfoDialogProps
 > = (props, forwardedRef): JSX.Element | null => {
-  const { title, open = false, onClose, children, dialogActions } = props;
+  const {
+    title,
+    titleIcon,
+    open = false,
+    onClose,
+    children,
+    dialogActions,
+    wideDialog,
+  } = props;
   const classes = useStyles();
 
   return (
-    <Dialog onClose={_ => onClose} open={open} ref={forwardedRef}>
+    <Dialog
+      onClose={_ => onClose}
+      open={open}
+      ref={forwardedRef}
+      maxWidth={wideDialog ? 'xl' : 'sm'}
+      PaperProps={{
+        style: { minWidth: wideDialog ? 500 : 400 },
+      }}
+    >
       <DialogTitle>
-        <Box>
-          <Typography className={classes.title} variant="h5">
-            {title}
+        <Box className={classes.titleContainer}>
+          {titleIcon && <Box className={classes.titleIcon}>{titleIcon}</Box>}
+          <Typography variant="h4">
+            <b>{title}</b>
           </Typography>
           <IconButton
             className={classes.closeBtn}

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

@@ -35,9 +35,7 @@ import {
   Grid,
   IconButton,
   Tooltip,
-  // FLPATH-2135
-  // Menu,
-  // MenuItem,
+  Typography,
 } from '@material-ui/core';
 import Snackbar from '@material-ui/core/Snackbar';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
@@ -81,7 +79,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     modalText: {
-      fontSize: '1.1rem',
+      marginBottom: theme.spacing(2),
     },
     errorColor: {
       color: theme.palette.error.dark,
@@ -104,11 +102,13 @@ const AbortConfirmationDialogContent = ({
   const classes = useStyles();
   return (
     <div>
-      <p className={classes.modalText}>
-        Are you sure you want to abort this workflow run? <br /> <br />
-        Aborting will stop all in-progress and pending steps immediately. Any
-        incomplete tasks will not be saved.
-      </p>
+      <Box className={classes.modalText}>
+        <Typography variant="h6">
+          Are you sure you want to abort this workflow run? <br /> <br />
+          Aborting will stop all in-progress and pending steps immediately. Any
+          incomplete tasks will not be saved.
+        </Typography>
+      </Box>
       {!canAbort && (
         <Box sx={{ width: '100%' }}>
           <Alert severity="info">
@@ -314,15 +314,8 @@ export const WorkflowInstancePage = ({
         <>
           <ContentHeader title="">
             <InfoDialog
-              title={
-                <Box display="flex" alignItems="center">
-                  <ErrorIcon
-                    className={classes.errorColor}
-                    style={{ marginRight: 8 }}
-                  />
-                  <b>Abort workflow run?</b>
-                </Box>
-              }
+              title="Abort workflow run?"
+              titleIcon={<ErrorIcon className={classes.errorColor} />}
               onClose={toggleAbortConfirmationDialog}
               open={isAbortConfirmationDialogOpen}
               dialogActions={

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

@@ -16,22 +16,23 @@
 
 import React, { useState } from 'react';
 import { useAsync } from 'react-use';
+import useObservable from 'react-use/esm/useObservable';
 
 import {
+  CodeSnippet,
   Content,
   InfoCard,
   Link,
-  StructuredMetadataTable,
 } from '@backstage/core-components';
-import { useApi } from '@backstage/core-plugin-api';
+import { appThemeApiRef, useApi } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
-import { Box, Grid, makeStyles, Typography } from '@material-ui/core';
-import InfoIcon from '@material-ui/icons/Info';
+import { Box, Button, Grid, makeStyles, Typography } from '@material-ui/core';
 import moment from 'moment';
 
 import {
   AssessedProcessInstanceDTO,
+  capitalize,
   InputSchemaResponseDTO,
   orchestratorAdminViewPermission,
   ProcessInstanceDTO,
@@ -92,13 +93,36 @@ const VariablesDialogContent = ({
   instanceVariables,
 }: {
   instanceVariables: WorkflowDataDTO;
-}) => (
-  <Box sx={{ maxHeight: 300, marginTop: 20, width: 500, overflow: 'auto' }}>
-    {instanceVariables && (
-      <StructuredMetadataTable dense metadata={instanceVariables} />
-    )}
-  </Box>
-);
+}) => {
+  const appThemeApi = useApi(appThemeApiRef);
+  const activeThemeId = useObservable(
+    appThemeApi.activeThemeId$(),
+    appThemeApi.getActiveThemeId(),
+  );
+
+  return (
+    <Box>
+      {Object.entries(instanceVariables).map(([key, value]) => (
+        <div key={key} style={{ marginBottom: '16px' }}>
+          <Typography variant="h6" style={{ marginBottom: '8px' }}>
+            {capitalize(key)}
+          </Typography>
+          <CodeSnippet
+            text={JSON.stringify(value, null, 2)}
+            language="json"
+            showLineNumbers
+            showCopyCodeButton
+            customStyle={{
+              color: activeThemeId === 'dark' ? '#abb2bf' : 'd3d3d3',
+              backgroundColor: activeThemeId === 'dark' ? '#151515' : '#F0F0F0',
+              padding: '25px 0',
+            }}
+          />
+        </div>
+      ))}
+    </Box>
+  );
+};
 
 export const WorkflowInstancePageContent: React.FC<{
   assessedInstance: AssessedProcessInstanceDTO;
@@ -167,17 +191,22 @@ export const WorkflowInstancePageContent: React.FC<{
   return (
     <Content noPadding>
       <InfoDialog
-        title={
-          <Box display="flex" alignItems="center">
-            <InfoIcon color="primary" style={{ marginRight: 8 }} />
-            <b>Run Variables</b>
-          </Box>
-        }
+        title="Run Variables"
         onClose={toggleVariablesDialog}
         open={isVariablesDialogOpen}
+        dialogActions={
+          <Button
+            color="primary"
+            variant="contained"
+            onClick={toggleVariablesDialog}
+          >
+            Close
+          </Button>
+        }
         children={
           <VariablesDialogContent instanceVariables={instanceVariables} />
         }
+        wideDialog
       />
       <Grid container spacing={2}>
         <Grid item xs={6}>