fix(orchestrator): fix CSS bugs for variables dialog and input schema dialog (#990)

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

Author: LiorSoffer

workspaces/orchestrator/.changeset/beige-parrots-scream.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
+---
+
+fix CSS bugs for variables dialog and input schema dialog

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

@@ -47,6 +47,11 @@ const useStyles = makeStyles()(theme => ({
     paddingLeft: theme.spacing(3),
     paddingBottom: theme.spacing(2),
   },
+  dialogContent: {
+    '& > div': {
+      backgroundColor: 'transparent',
+    },
+  },
   titleContainer: {
     display: 'flex',
   },
@@ -100,14 +105,13 @@ export const RefForwardingInfoDialog: ForwardRefRenderFunction<
           </IconButton>
         </Box>
       </DialogTitle>
-      <DialogContent>
-        <Box>{children}</Box>
+      <DialogContent className={classes.dialogContent}>
+        {children}
       </DialogContent>
       <DialogActions className={classes.dialogActions}>
         {dialogActions}
       </DialogActions>
     </Dialog>
   );
 };
-
 export const InfoDialog = forwardRef(RefForwardingInfoDialog);

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

@@ -17,21 +17,20 @@
 import React from 'react';
 import { useAsync } from 'react-use';
 
-import {
-  CodeSnippet,
-  Progress,
-  ResponseErrorPanel,
-} from '@backstage/core-components';
+import { Progress, ResponseErrorPanel } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 
 import { InputSchemaResponseDTO } from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
 
 import { orchestratorApiRef } from '../../api/api';
 import { FormattedWorkflowOverview } from '../../dataFormatters/WorkflowOverviewFormatter';
+import { useIsDarkMode } from '../../utils/isDarkMode';
 import { InfoDialog } from '../InfoDialog';
+import { JsonCodeBlock } from '../ui/JsonCodeBlock';
 
 const InputSchemaDialogContent = ({
   inputSchema,
@@ -42,6 +41,8 @@ const InputSchemaDialogContent = ({
   loading: boolean;
   error: Error | undefined;
 }) => {
+  const isDarkMode = useIsDarkMode();
+
   if (loading) return <Progress />;
   if (error)
     return (
@@ -53,16 +54,11 @@ const InputSchemaDialogContent = ({
   return (
     <Box>
       {inputSchema?.inputSchema === undefined ? (
-        'No input schema is defined for this workflow'
+        <Typography>No input schema is defined for this workflow.</Typography>
       ) : (
-        <CodeSnippet
-          text={JSON.stringify(inputSchema, null, 2)}
-          language="json"
-          showLineNumbers
-          showCopyCodeButton
-          customStyle={{
-            padding: '25px 0',
-          }}
+        <JsonCodeBlock
+          isDarkMode={isDarkMode}
+          value={inputSchema?.inputSchema}
         />
       )}
     </Box>

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

@@ -13,9 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
 
-import { CodeSnippet } from '@backstage/core-components';
+import React from 'react';
 
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -26,7 +25,9 @@ import {
   WorkflowDataDTO,
 } from '@red-hat-developer-hub/backstage-plugin-orchestrator-common';
 
+import { useIsDarkMode } from '../../utils/isDarkMode';
 import { InfoDialog } from '../InfoDialog';
+import { JsonCodeBlock } from '../ui/JsonCodeBlock';
 
 export const VariablesDialog = ({
   open,
@@ -37,6 +38,9 @@ export const VariablesDialog = ({
   onClose: () => void;
   instanceVariables: WorkflowDataDTO;
 }) => {
+  const isDarkMode = useIsDarkMode();
+  const hasVariables = Object.keys(instanceVariables).length > 0;
+
   return (
     <InfoDialog
       title="Run Variables"
@@ -49,24 +53,18 @@ export const VariablesDialog = ({
       }
       wideDialog
     >
-      <Box>
-        {Object.entries(instanceVariables).map(([key, value]) => (
-          <div key={key} style={{ marginBottom: '16px' }}>
-            <Typography variant="h6" style={{ marginBottom: '8px' }}>
+      {hasVariables ? (
+        Object.entries(instanceVariables).map(([key, value]) => (
+          <Box key={key} m={2}>
+            <Typography variant="h6" mb={1}>
               {capitalize(key)}
             </Typography>
-            <CodeSnippet
-              text={JSON.stringify(value, null, 2)}
-              language="json"
-              showLineNumbers
-              showCopyCodeButton
-              customStyle={{
-                padding: '25px 0',
-              }}
-            />
-          </div>
-        ))}
-      </Box>
+            <JsonCodeBlock isDarkMode={isDarkMode} value={value} />
+          </Box>
+        ))
+      ) : (
+        <Typography>No variables found for this run.</Typography>
+      )}
     </InfoDialog>
   );
 };

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

@@ -0,0 +1,86 @@
+/*
+ * Copyright Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+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 }) => ({
+    root: {
+      position: 'relative',
+      paddingTop: theme.spacing(2),
+      paddingBottom: theme.spacing(2),
+      backgroundColor: isDarkMode ? '#151515' : '#F0F0F0',
+      maxWidth: 600,
+      marginTop: '0.6rem',
+    },
+    iconButton: {
+      position: 'absolute',
+      top: 8,
+      right: 8,
+    },
+    copyIcon: {
+      color: isDarkMode ? '#B0B0B0' : '#4D4D4D',
+    },
+    pre: {
+      margin: theme.spacing(1),
+      fontFamily: 'Monospace',
+      fontSize: '0.875rem',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      color: isDarkMode ? '#B0B0B0' : '#4D4D4D',
+    },
+  }),
+);
+
+export const JsonCodeBlock = ({
+  value,
+  isDarkMode,
+}: {
+  value: object;
+  isDarkMode: boolean;
+}) => {
+  const jsonString = JSON.stringify(value, null, 2);
+  const [copied, setCopied] = React.useState(false);
+  const { classes } = useStyles({ isDarkMode });
+
+  const handleCopy = async () => {
+    await window.navigator.clipboard.writeText(jsonString);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <Paper elevation={1} className={classes.root}>
+      <Box className={classes.iconButton}>
+        <Tooltip title={copied ? 'Copied!' : 'Copy'}>
+          <IconButton size="large" onClick={handleCopy}>
+            <ContentCopyIcon fontSize="small" className={classes.copyIcon} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+      <Box component="pre" className={classes.pre}>
+        {jsonString}
+      </Box>
+    </Paper>
+  );
+};