chore: refactor frontend to allow test step on mrf actions

Author: pregnantboy

packages/backend/src/helpers/get-app.ts

@@ -79,10 +79,9 @@ function addStaticSubsteps(
       name: 'Set up step',
       arguments: step.arguments,
     })
+  } else {
+    computedStep.substeps.push(testStep)
   }
-
-  computedStep.substeps.push(testStep)
-
   return computedStep
 }
 

packages/frontend/src/components/ChooseConnectionSubstep/index.tsx

@@ -67,6 +67,7 @@ function ChooseConnectionSubstep(
       flowId: supportsConnectionRegistration ? step.flowId : undefined,
     },
     skip: !connection?.id,
+    fetchPolicy: 'cache-first',
   })
 
   const isTestStepValid = useMemo(() => {

packages/frontend/src/components/EditorRightDrawer/Step.tsx

@@ -67,6 +67,7 @@ export default function Step(props: StepProps): React.ReactElement | null {
   return (
     <>
       <Flex w="100%" flexDir="column">
+        {/* {JSON.stringify(substeps)} */}
         <StepExecutionsProvider priorExecutionSteps={priorExecutionSteps}>
           <Form
             key={`${step.id}-${resetTimestamp}`}
@@ -91,8 +92,7 @@ export default function Step(props: StepProps): React.ReactElement | null {
                 substep.key &&
                 // NOTE: webhook trigger is a special case where we want to show the step configuration immediately
                 ((step.appKey === 'webhook' && step?.webhookUrl) ||
-                  ['chooseConnection', 'testStep'].includes(substep.key) ===
-                    false) && (
+                  ['chooseConnection'].includes(substep.key) === false) && (
                   <FlowSubstep
                     key={substep.key}
                     hasConnection={hasConnection}

packages/frontend/src/components/FlowStepTestController/CheckAgainButton.tsx

@@ -28,9 +28,15 @@ export function CheckAgainButton(props: CheckAgainButtonProps) {
   const { isUnstyledInfobox, onClick, isLoading, isDisabled, step } = props
   const isFormSgTrigger =
     step.appKey === 'formsg' && step.key === 'newSubmission'
+  const isFormSgAction =
+    step.appKey === 'formsg' && step.key === 'mrfSubmission'
+
   if (isFormSgTrigger) {
     return <FormSGCheckAgainButton {...props} />
   }
+  if (isFormSgAction) {
+    return <FormSGCheckAgainButton {...props} />
+  }
   return (
     <Button
       variant={isUnstyledInfobox ? 'solid' : 'outline'}

packages/frontend/src/components/FlowStepTestController/index.tsx

@@ -108,8 +108,13 @@ export default function FlowStepTestController(
   } = useContext(EditorContext)
   const formContext = useFormContext()
 
-  const { isIfThenStep, isTrigger, selectedActionOrTrigger, substeps } =
-    useStepMetadata(allApps, step)
+  const {
+    isIfThenStep,
+    isTrigger,
+    isMrfStep,
+    selectedActionOrTrigger,
+    substeps,
+  } = useStepMetadata(allApps, step)
 
   const {
     isTestSuccessful,
@@ -305,8 +310,8 @@ export default function FlowStepTestController(
                     </Button>
                   )}
                 </Flex>
-                {shouldShowSaveButton ? (
-                  <Flex>
+                <Flex>
+                  {shouldShowSaveButton && (
                     <Button
                       variant="outline"
                       // cant use responsive value for variant for some reason
@@ -321,16 +326,7 @@ export default function FlowStepTestController(
                     >
                       {!isDirty ? 'Saved' : 'Save without checking'}
                     </Button>
-                    <CheckAgainButton
-                      isUnstyledInfobox={isStepUnchecked}
-                      onClick={handleSaveAndTest}
-                      isLoading={isTestExecuting}
-                      isDisabled={!isValid || readOnly}
-                      step={step}
-                      executionStepMetadata={currentTestExecutionStep?.metadata}
-                    />
-                  </Flex>
-                ) : (
+                  )}
                   <CheckAgainButton
                     isUnstyledInfobox={isStepUnchecked}
                     onClick={handleSaveAndTest}
@@ -339,7 +335,7 @@ export default function FlowStepTestController(
                     step={step}
                     executionStepMetadata={currentTestExecutionStep?.metadata}
                   />
-                )}
+                </Flex>
               </Flex>
             </Infobox>
             <TestResult
@@ -359,7 +355,7 @@ export default function FlowStepTestController(
               </Box>
             )}
             <HStack w="100%" justifyContent="flex-end">
-              {!step.webhookUrl && (
+              {!step.webhookUrl && !isMrfStep && (
                 <Button
                   isDisabled={readOnly || isSaving || !isDirty}
                   isLoading={isSaving}

packages/frontend/src/components/FlowSubstep/index.tsx

@@ -22,7 +22,7 @@ type FlowSubstepProps = {
 }
 
 function FlowSubstep(props: FlowSubstepProps): JSX.Element {
-  const { isTrigger, substep, step, selectedActionOrTrigger } = props
+  const { substep, step, selectedActionOrTrigger } = props
   const { getFlagValue } = useContext(LaunchDarklyContext)
   const formContext = useFormContext()
   const {
@@ -133,18 +133,24 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
   const handleSaveAndTest = useCallback(
     async (testRunMetadata?: Record<string, unknown>) => {
       try {
-        await saveStep()
+        if (
+          !selectedActionOrTrigger ||
+          !('hiddenFromUser' in selectedActionOrTrigger) ||
+          selectedActionOrTrigger.hiddenFromUser !== true
+        ) {
+          await saveStep()
+        }
         await executeTestStep({ testRunMetadata })
       } catch (error) {
         console.error('Error saving and test step')
       }
     },
-    [saveStep, executeTestStep],
+    [selectedActionOrTrigger, executeTestStep, saveStep],
   )
 
   return (
     <Box position="relative" display="flex" flexDirection="column">
-      {(!isTrigger || argsToDisplay.length > 0) && (
+      {argsToDisplay.length > 0 && (
         <Box flex="1" p={0} pb={4}>
           <Stack w="100%" spacing={4}>
             {argsToDisplay.map((argument) => (

packages/frontend/src/hooks/useStepMetadata.ts

@@ -18,6 +18,7 @@ interface UseStepMetadataResult {
   stepName: string
   substeps: ISubstep[]
   shouldShowDragHandle?: boolean
+  isMrfStep: boolean
 }
 
 export function useStepMetadata(
@@ -31,6 +32,7 @@ export function useStepMetadata(
   const isCompleted = step?.status === 'completed'
   const isTrigger = step?.type === 'trigger'
   const isIfThenStep = step ? checkIfThenStep(step) : false
+  const isMrfStep = step?.key === 'mrfSubmission'
 
   const apps: IApp[] = allApps?.filter((app: IApp) =>
     isTrigger ? !!app.triggers?.length : !!app.actions?.length,
@@ -88,6 +90,7 @@ export function useStepMetadata(
     hasConnection,
     isCompleted,
     isIfThenStep,
+    isMrfStep,
     isTrigger,
     position: step?.position ?? 0,
     stepName: step?.config?.stepName