From 330902ccb3d6cf0ae3623027652f7600df6ebe57 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Tue, 27 Sep 2022 21:52:23 +0200 Subject: [PATCH 1/2] feat(TestSubstep): show continue upon successful test --- packages/web/src/components/TestSubstep/index.tsx | 8 ++++++-- packages/web/src/locales/en.json | 2 ++ 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/web/src/components/TestSubstep/index.tsx b/packages/web/src/components/TestSubstep/index.tsx index 6eb22e7b..740ad7ea 100644 --- a/packages/web/src/components/TestSubstep/index.tsx +++ b/packages/web/src/components/TestSubstep/index.tsx @@ -39,6 +39,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; @@ -73,7 +76,7 @@ function TestSubstep(props: TestSubstepProps): React.ReactElement { {error?.graphQLErrors.map((error) => (<>{error.message}
))} } - {called && !loading && !error && !response && ( + {hasNoOutput && ( {formatMessage('flowEditor.noTestDataTitle')} @@ -96,7 +99,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", From fca140e3c9ce5666e7b68dd6a835ff94d27d6f06 Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Tue, 27 Sep 2022 21:52:49 +0200 Subject: [PATCH 2/2] feat(Editor): toggle next step upon continuing --- packages/web/src/components/Editor/index.tsx | 11 +++++++++-- packages/web/src/components/FlowStep/index.tsx | 4 +++- packages/web/src/components/PowerInput/index.tsx | 4 +--- packages/web/src/components/TestSubstep/index.tsx | 12 ++++++++++-- 4 files changed, 23 insertions(+), 8 deletions(-) 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 740ad7ea..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; @@ -53,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 (