chore: refactor frontend to allow test step on mrf actions

Author: pregnantboy

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

@@ -82,7 +82,6 @@ function addStaticSubsteps(
   } else {
     computedStep.substeps.push(testStep)
   }
-
   return computedStep
 }
 

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

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

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
@@ -322,16 +327,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}
@@ -340,7 +336,7 @@ export default function FlowStepTestController(
                     step={step}
                     executionStepMetadata={currentTestExecutionStep?.metadata}
                   />
-                )}
+                </Flex>
               </Flex>
             </Infobox>
             <TestResult
@@ -362,7 +358,8 @@ export default function FlowStepTestController(
             <HStack w="100%" justifyContent="flex-end">
               {/* gathersg is a special case where there is a webhook url and the save step button
               needs to be shown to save the encryption key */}
-              {(!step.webhookUrl || step.appKey === 'gathersg') && (
+              {((!step.webhookUrl && !isMrfStep) ||
+                step.appKey === 'gathersg') && (
                 <Button
                   isDisabled={readOnly || isSaving || !isDirty}
                   isLoading={isSaving}

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

@@ -21,7 +21,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 {
@@ -125,18 +125,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