From 347c9c94558844f61cebd36ce57e42b979be17f8 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Sun, 14 Aug 2022 18:35:13 +0200
Subject: [PATCH] feat: inline errors in test substep

---
 packages/web/src/components/TestSubstep/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx
index ea65a20a..345acaff 100644
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/packages/web/src/components/TestSubstep/index.tsx
@@ -3,6 +3,7 @@ import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
+import Alert from '@mui/material/Alert';
 import Button from '@mui/material/Button';
 
 import JSONViewer from 'components/JSONViewer';
@@ -30,8 +31,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
     step,
   } = props;
 
-  const [executeFlow, { data }] = useMutation(EXECUTE_FLOW);
-
+  const [executeFlow, { data, error }] = useMutation(EXECUTE_FLOW, { context: { autoSnackbar: false }});
   const response = data?.executeFlow?.data;
 
   const {
@@ -58,6 +58,9 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
       />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem sx={{ pt: 2, pb: 3, flexDirection: 'column', alignItems: 'flex-start' }}>
+          {error?.graphQLErrors?.length && <Alert severity="error" sx={{ mb: 1, fontWeight: 500, width: '100%' }}>
+            {error?.graphQLErrors.map((error) => (<>{error.message}<br /></>))}
+          </Alert>}
 
           {response && (
             <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}>