From dc79d623beac9bc05ceed37e9e5465f68e9cc544 Mon Sep 17 00:00:00 2001
From: Ali BARIN <ali.barin53@gmail.com>
Date: Thu, 1 Sep 2022 22:22:18 +0200
Subject: [PATCH] feat: add no data alert in test substep and execution

---
 packages/backend/src/models/execution.ts      |  2 +-
 packages/backend/src/services/processor.ts    | 11 ++++++++---
 .../web/src/components/EditorLayout/index.tsx |  2 +-
 .../web/src/components/TestSubstep/index.tsx  | 19 ++++++++++++++++++-
 packages/web/src/locales/en.json              |  6 +++++-
 packages/web/src/pages/Execution/index.tsx    | 15 ++++++++++++++-
 6 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/packages/backend/src/models/execution.ts b/packages/backend/src/models/execution.ts
index e952e251..73552bf7 100644
--- a/packages/backend/src/models/execution.ts
+++ b/packages/backend/src/models/execution.ts
@@ -8,7 +8,7 @@ class Execution extends Base {
   id!: string;
   flowId!: string;
   testRun = false;
-  internalId!: string;
+  internalId: string;
   executionSteps: ExecutionStep[] = [];
 
   static tableName = 'executions';
diff --git a/packages/backend/src/services/processor.ts b/packages/backend/src/services/processor.ts
index fc9626fb..da4ddbe2 100644
--- a/packages/backend/src/services/processor.ts
+++ b/packages/backend/src/services/processor.ts
@@ -38,11 +38,16 @@ class Processor {
     if (initialTriggerData.length === 0) {
       const lastInternalId = await this.flow.lastInternalId();
 
-      await Execution.query().insert({
+      const executionData: Partial<Execution> = {
         flowId: this.flow.id,
         testRun: this.testRun,
-        internalId: lastInternalId,
-      });
+      };
+
+      if (lastInternalId) {
+        executionData.internalId = lastInternalId;
+      }
+
+      await Execution.query().insert(executionData);
 
       return;
     }
diff --git a/packages/web/src/components/EditorLayout/index.tsx b/packages/web/src/components/EditorLayout/index.tsx
index a7bbbf23..4103fe05 100644
--- a/packages/web/src/components/EditorLayout/index.tsx
+++ b/packages/web/src/components/EditorLayout/index.tsx
@@ -109,7 +109,7 @@ export default function EditorLayout(): React.ReactElement {
 
       <Snackbar
         open={!!flow?.active}
-        message={formatMessage('flowEditor.publishFlowCannotBeUpdated')}
+        message={formatMessage('flowEditor.publishedFlowCannotBeUpdated')}
         anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}
         ContentProps={{ sx: { fontWeight: 300 }}}
         action={(
diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx
index 4673120a..de921f6e 100644
--- a/packages/web/src/components/TestSubstep/index.tsx
+++ b/packages/web/src/components/TestSubstep/index.tsx
@@ -4,9 +4,11 @@ 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 AlertTitle from '@mui/material/AlertTitle';
 import LoadingButton from '@mui/lab/LoadingButton';
 
 import { EditorContext } from 'contexts/Editor';
+import useFormatMessage from 'hooks/useFormatMessage';
 import JSONViewer from 'components/JSONViewer';
 import { EXECUTE_FLOW } from 'graphql/mutations/execute-flow';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -32,14 +34,21 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
     step,
   } = props;
 
+  const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
-  const [executeFlow, { data, error, loading }] = useMutation(EXECUTE_FLOW, { context: { autoSnackbar: false }});
+  const [executeFlow, { data, error, loading, called, reset }] = useMutation(EXECUTE_FLOW, { context: { autoSnackbar: false }});
   const response = data?.executeFlow?.data;
 
   const {
     name,
   } = substep;
 
+  React.useEffect(function resetTestDataOnSubstepToggle() {
+    if (!expanded) {
+      reset();
+    }
+  }, [expanded, reset])
+
   const handleSubmit = React.useCallback(() => {
     executeFlow({
       variables: {
@@ -64,6 +73,14 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement {
             {error?.graphQLErrors.map((error) => (<>{error.message}<br /></>))}
           </Alert>}
 
+          {called && !response && (
+            <Alert severity="warning" sx={{ mb: 1, width: '100%' }}>
+              <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('flowEditor.noTestDataTitle')}</AlertTitle>
+
+              <Box sx={{ fontWeight: 400 }}>{formatMessage('flowEditor.noTestDataMessage')}</Box>
+            </Alert>
+          )}
+
           {response && (
             <Box sx={{ maxHeight: 400, overflowY: 'auto', width: '100%' }}>
               <JSONViewer data={response} />
diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json
index ea3f0b3b..df6d07f1 100644
--- a/packages/web/src/locales/en.json
+++ b/packages/web/src/locales/en.json
@@ -44,7 +44,9 @@
   "flow.draft": "Draft",
   "flowEditor.publish": "PUBLISH",
   "flowEditor.unpublish": "UNPUBLISH",
-  "flowEditor.publishFlowCannotBeUpdated": "To edit this flow, you must first unpublish it.",
+  "flowEditor.publishedFlowCannotBeUpdated": "To edit this flow, you must first unpublish it.",
+  "flowEditor.noTestDataTitle": "We couldn't find matching data",
+  "flowEditor.noTestDataMessage": "Create a sample in the associated service and test the step again.",
   "flow.createdAt": "created {datetime}",
   "flow.updatedAt": "updated {datetime}",
   "flow.view": "View",
@@ -59,6 +61,8 @@
   "executions.noExecutions": "There is no execution data point to show.",
   "execution.executedAt": "executed {datetime}",
   "execution.test": "Test run",
+  "execution.noDataTitle": "No data",
+  "execution.noDataMessage": "We successfully ran the execution, but there was no new data to process.",
   "profileSettings.title": "My Profile",
   "profileSettings.email": "Email",
   "profileSettings.updateEmail": "Update email",
diff --git a/packages/web/src/pages/Execution/index.tsx b/packages/web/src/pages/Execution/index.tsx
index ee2410d0..7a8bd257 100644
--- a/packages/web/src/pages/Execution/index.tsx
+++ b/packages/web/src/pages/Execution/index.tsx
@@ -2,8 +2,12 @@ import * as React from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import Grid from '@mui/material/Grid';
+import Box from '@mui/material/Box';
+import AlertTitle from '@mui/material/AlertTitle';
+import Alert from '@mui/material/Alert';
 import type { IExecutionStep } from '@automatisch/types';
 
+import useFormatMessage from 'hooks/useFormatMessage';
 import ExecutionHeader from 'components/ExecutionHeader';
 import ExecutionStep from 'components/ExecutionStep';
 import Container from 'components/Container';
@@ -23,8 +27,9 @@ const getLimitAndOffset = (page: number) => ({
 
 export default function Execution(): React.ReactElement {
   const { executionId } = useParams() as ExecutionParams;
+  const formatMessage = useFormatMessage();
   const { data: execution } = useQuery(GET_EXECUTION, { variables: { executionId } });
-  const { data } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
+  const { data, loading } = useQuery(GET_EXECUTION_STEPS, { variables: { executionId, ...getLimitAndOffset(1) } });
 
   const { edges } = data?.getExecutionSteps || {};
   const executionSteps: IExecutionStep[] = edges?.map((edge: { node: IExecutionStep }) => edge.node);
@@ -36,6 +41,14 @@ export default function Execution(): React.ReactElement {
       />
 
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
+        {!loading && !executionSteps?.length && (
+          <Alert severity="warning" sx={{ flex: 1 }}>
+            <AlertTitle sx={{ fontWeight: 700 }}>{formatMessage('execution.noDataTitle')}</AlertTitle>
+
+            <Box sx={{ fontWeight: 400 }}>{formatMessage('execution.noDataMessage')}</Box>
+          </Alert>
+        )}
+
         {executionSteps?.map((executionStep) => (
           <ExecutionStep key={executionStep.id} executionStep={executionStep} step={executionStep.step} />
         ))}