diff --git a/packages/web/src/components/Editor/index.tsx b/packages/web/src/components/Editor/index.tsx index aa0afd55..7b8969c9 100644 --- a/packages/web/src/components/Editor/index.tsx +++ b/packages/web/src/components/Editor/index.tsx @@ -3,7 +3,7 @@ import { useMutation } from '@apollo/client'; import Box from '@mui/material/Box'; import IconButton from '@mui/material/IconButton'; import AddIcon from '@mui/icons-material/Add'; -import type { IFlow } from '@automatisch/types'; +import type { IFlow, IStep } from '@automatisch/types'; import { GET_FLOW } from 'graphql/queries/get-flow'; import { CREATE_STEP } from 'graphql/mutations/create-step'; @@ -96,6 +96,12 @@ export default function Editor(props: EditorProps): React.ReactElement { [createStep, flow.id] ); + const openNextStep = React.useCallback((nextStep: IStep) => { + return () => { + setCurrentStepId(nextStep?.id); + }; + }, []); + return ( - {flow?.steps?.map((step, index) => ( + {flow?.steps?.map((step, index, steps) => ( setCurrentStepId(step.id)} onClose={() => setCurrentStepId(null)} onChange={onStepChange} + onContinue={openNextStep(steps[index + 1])} /> addStep(step.id)} color="primary" disabled={creationInProgress || flow.active}> diff --git a/packages/web/src/components/FlowStep/index.tsx b/packages/web/src/components/FlowStep/index.tsx index 6418b2f2..16ad7713 100644 --- a/packages/web/src/components/FlowStep/index.tsx +++ b/packages/web/src/components/FlowStep/index.tsx @@ -42,6 +42,7 @@ type FlowStepProps = { onOpen?: () => void; onClose?: () => void; onChange: (step: IStep) => void; + onContinue?: () => void; }; const validIcon = ; @@ -99,7 +100,7 @@ function generateValidationSchema(substeps: ISubstep[]) { export default function FlowStep( props: FlowStepProps ): React.ReactElement | null { - const { collapsed, onChange } = props; + const { collapsed, onChange, onContinue } = props; const editorContext = React.useContext(EditorContext); const contextButtonRef = React.useRef(null); const step: IStep = props.step; @@ -273,6 +274,7 @@ export default function FlowStep( onCollapse={() => toggleSubstep(index + 1)} onSubmit={expandNextStep} onChange={handleChange} + onContinue={onContinue} step={step} /> )} diff --git a/packages/web/src/components/PowerInput/index.tsx b/packages/web/src/components/PowerInput/index.tsx index 4ec9ece7..c7c53c0a 100644 --- a/packages/web/src/components/PowerInput/index.tsx +++ b/packages/web/src/components/PowerInput/index.tsx @@ -54,8 +54,6 @@ const PowerInput = (props: PowerInputProps) => { } = props; const priorStepsWithExecutions = React.useContext(StepExecutionsContext); const editorRef = React.useRef(null); - const [target, setTarget] = React.useState(null); - const [index, setIndex] = React.useState(0); const renderElement = React.useCallback(props => , []); const [editor] = React.useState(() => customizeEditor(createEditor())); const [showVariableSuggestions, setShowVariableSuggestions] = React.useState(false); @@ -72,7 +70,7 @@ const PowerInput = (props: PowerInputProps) => { (variable: Pick) => { insertVariable(editor, variable, stepsWithVariables); }, - [index, stepsWithVariables] + [stepsWithVariables] ); return ( diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx index 6eb22e7b..c03b2b0b 100644 --- a/packages/web/src/components/TestSubstep/index.tsx +++ b/packages/web/src/components/TestSubstep/index.tsx @@ -21,6 +21,7 @@ type TestSubstepProps = { onCollapse: () => void; onChange?: ({ step }: { step: IStep }) => void; onSubmit?: () => void; + onContinue?: () => void; step: IStep; }; @@ -31,6 +32,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { onExpand, onCollapse, onSubmit, + onContinue, step, } = props; @@ -39,6 +41,9 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { const [executeFlow, { data, error, loading, called, reset }] = useMutation(EXECUTE_FLOW, { context: { autoSnackbar: false }}); const response = data?.executeFlow?.data; + const isCompleted = !error && called && !loading; + const hasNoOutput = !response && isCompleted; + const { name, } = substep; @@ -50,14 +55,20 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { }, [expanded, reset]) const handleSubmit = React.useCallback(() => { + if (isCompleted) { + onContinue?.(); + + return; + } + executeFlow({ variables: { input: { stepId: step.id, }, }, - }) - }, [onSubmit, step.id]); + }); + }, [onSubmit, onContinue, isCompleted, step.id]); const onToggle = expanded ? onCollapse : onExpand; return ( @@ -73,7 +84,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { {error?.graphQLErrors.map((error) => (<>{error.message}
))} } - {called && !loading && !error && !response && ( + {hasNoOutput && ( {formatMessage('flowEditor.noTestDataTitle')} @@ -96,7 +107,8 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { disabled={editorContext.readOnly} color="primary" > - Test & Continue + {isCompleted && formatMessage('flowEditor.continue')} + {!isCompleted && formatMessage('flowEditor.testAndContinue')} diff --git a/packages/web/src/locales/en.json b/packages/web/src/locales/en.json index e4b7454d..b3c1e9a3 100644 --- a/packages/web/src/locales/en.json +++ b/packages/web/src/locales/en.json @@ -49,6 +49,8 @@ "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.", + "flowEditor.testAndContinue": "Test & Continue", + "flowEditor.continue": "Continue", "flow.createdAt": "created {datetime}", "flow.updatedAt": "updated {datetime}", "flow.view": "View",