PLU-512: auto check step formsg (#1253)

## Changes
- Additional property for AppAuth `autoCheckStep` - now set to `true`
for FormSG
- When `autoCheckStep` is set to true for the app, the `executeTestStep`
will be called automatically when "Save & Continue" is clicked
<img width="310" height="220" alt="image"
src="https://github.com/user-attachments/assets/e64f018c-d037-405e-b694-c2c84e50279b"
/>

- Test results now auto expands when executeTestStep is completed

## Refactors
- `executeTestStep` now accepts `stepId` as a param which defaults to
`currentStepId`. This is to allow executeTestStep to be called when
creating a new pipe and currentStepId is not set yet.
- Expanded TestResult should not render anything for If-Then steps

## How to test
- Add a form sg step --> Test results should appear and expand
- Modify a form sg connection --> Test results should also appear and
expand automatically

## Updated E2E tests
opengovsg/plumber-e2e#34

Author: pregnantboy

packages/backend/src/apps/formsg/auth/index.ts

@@ -11,7 +11,7 @@ import verifyCredentials from './verify-credentials'
 
 const auth: IUserAddedConnectionAuth = {
   connectionType: 'user-added' as const,
-
+  autoCheckStep: true,
   fields: [
     {
       key: 'formId',

packages/backend/src/graphql/schema.graphql

@@ -278,11 +278,11 @@ type ConnectionModalLabel {
 type AppAuth {
   connectionType: String!
   connectionRegistrationType: String
-
   fields: [Field] # Only for user-added connections
   authenticationSteps: [AuthenticationStep]
   reconnectionSteps: [ReconnectionStep]
   connectionModalLabel: ConnectionModalLabel
+  autoCheckStep: Boolean
 }
 
 enum ArgumentEnumType {

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAndAddConnection/index.tsx

@@ -64,8 +64,14 @@ export default function ChooseAndAddConnection(
   props: ChooseAndAddConnectionProps,
 ) {
   const { onClose } = props
-  const { flowId, onCreateStep, onDrawerOpen, onUpdateStep, setCurrentStepId } =
-    useContext(EditorContext)
+  const {
+    flowId,
+    onCreateStep,
+    onDrawerOpen,
+    onUpdateStep,
+    setCurrentStepId,
+    executeTestStep,
+  } = useContext(EditorContext)
   const { modalState, patchModalState, step, prevStepId } = useContext(
     FlowStepConfigurationContext,
   )
@@ -136,6 +142,11 @@ export default function ChooseAndAddConnection(
         onClose()
         onDrawerOpen()
         setCurrentStepId(newStepId)
+        if (selectedApp?.auth?.autoCheckStep && newStepId) {
+          // need to deliberately set the step id because
+          // closure of executeTestStep may still hold reference to old step id
+          executeTestStep({ stepId: newStepId })
+        }
       } catch (error) {
         console.error('Error selecting app and event', error)
       } finally {
@@ -149,10 +160,11 @@ export default function ChooseAndAddConnection(
       prevStepId,
       step,
       onClose,
-      onCreateStep,
-      onUpdateStep,
       onDrawerOpen,
       setCurrentStepId,
+      onCreateStep,
+      onUpdateStep,
+      executeTestStep,
     ],
   )
 

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

@@ -9,7 +9,7 @@ import { EditorContext } from '@/contexts/Editor'
 import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 import type { Variable } from '@/helpers/variables'
 
-import { getForEachDataMessage, getIfThenOutput } from './utils'
+import { getForEachDataMessage } from './utils'
 
 function getNoOutputMessage(
   selectedActionOrTrigger: TestResultsProps['selectedActionOrTrigger'],
@@ -79,13 +79,7 @@ export default function TestResult(props: TestResultsProps): JSX.Element {
     }
 
     if (isIfThenStep) {
-      const isConditionMet = variables?.[0]?.value as boolean
-      const [variant, message] = getIfThenOutput(isConditionMet, step.id)
-      return (
-        <Infobox variant={variant} width="full">
-          <Box>{message}</Box>
-        </Infobox>
-      )
+      return null
     }
 
     return (
@@ -107,6 +101,14 @@ export default function TestResult(props: TestResultsProps): JSX.Element {
   return (
     <Collapse
       in={isOpen}
+      transition={{
+        enter: {
+          type: false,
+        },
+        exit: {
+          type: false,
+        },
+      }}
       style={{
         width: '100%',
         marginTop: 0,

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

@@ -2,7 +2,7 @@ import type { IAction, IStep, ISubstep, ITrigger } from '@plumber/types'
 
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
-import { Box, Stack, useDisclosure } from '@chakra-ui/react'
+import { Box, Stack, useDisclosure, usePrevious } from '@chakra-ui/react'
 import { useToast } from '@opengovsg/design-system-react'
 
 import FlowStepTestController from '@/components/FlowStepTestController'
@@ -11,7 +11,6 @@ import { getInputFlag } from '@/config/flags'
 import { EditorContext } from '@/contexts/Editor'
 import { LaunchDarklyContext } from '@/contexts/LaunchDarkly'
 import { hasDirtyFields, validateSubstep } from '@/helpers/editor'
-import { isIfThenStep } from '@/helpers/toolbox'
 import { validateStepParams } from '@/helpers/validateStepParams'
 
 type FlowSubstepProps = {
@@ -31,6 +30,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
     onUpdateStep,
     setShouldWarnOnLeave,
     testExecutionSteps,
+    isTestExecuting,
   } = useContext(EditorContext)
   const {
     isOpen: isTestResultOpen,
@@ -45,6 +45,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
     validateSubstep(substep, formContext.getValues() as IStep),
   )
   const [hasDeletedVars, setHasDeletedVars] = useState(false)
+  const previousIsTestExecuting = usePrevious(isTestExecuting)
 
   /*
    * NOTE: we use dirtyFields instead of isDirty because dirtyFields only tracks
@@ -73,6 +74,16 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
     [args, step.createdAt, selectedActionOrTrigger, getFlagValue],
   )
 
+  /**
+   * We show the test result right after a chek step is run
+   * i.e. isTestExecuting = true --> isTestExecuting = false
+   */
+  useEffect(() => {
+    if (isTestExecuting === false && previousIsTestExecuting === true) {
+      onTestResultOpen()
+    }
+  }, [isTestExecuting, onTestResultOpen, step, previousIsTestExecuting])
+
   useEffect(() => {
     function validate(step: unknown) {
       const typedStep = step as IStep
@@ -123,15 +134,12 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
     async (testRunMetadata?: Record<string, unknown>) => {
       try {
         await saveStep()
-        await executeTestStep(testRunMetadata)
-        if (!isIfThenStep(step)) {
-          onTestResultOpen()
-        }
+        await executeTestStep({ testRunMetadata })
       } catch (error) {
         console.error('Error saving and test step')
       }
     },
-    [saveStep, executeTestStep, step, onTestResultOpen],
+    [saveStep, executeTestStep],
   )
 
   return (

packages/frontend/src/contexts/Editor.tsx

@@ -50,7 +50,13 @@ interface IEditorContextValue {
   shouldWarnOnLeave: boolean
   stepsWithVars: StepWithVariables[]
   varInfoMap: VariableInfoMap
-  executeTestStep: (testRunMetadata?: Record<string, unknown>) => Promise<void>
+  executeTestStep: ({
+    testRunMetadata,
+    stepId,
+  }: {
+    testRunMetadata?: Record<string, unknown>
+    stepId?: string | null
+  }) => Promise<void>
   onDrawerOpen: () => void
   onDrawerClose: () => void
   setCurrentStepId: (stepId: string | null) => void
@@ -344,12 +350,21 @@ export const EditorProvider = ({
   )
 
   const executeTestStep = useCallback(
-    async (testRunMetadata?: Record<string, unknown>) => {
+    async ({
+      testRunMetadata,
+      stepId = currentStepId,
+    }: {
+      testRunMetadata?: Record<string, unknown>
+      stepId?: string | null
+    }) => {
+      if (!stepId) {
+        throw new Error('Step ID is required')
+      }
       try {
         await executeStep({
           variables: {
             input: {
-              stepId: currentStepId,
+              stepId,
               testRunMetadata,
             },
           },

packages/frontend/src/graphql/queries/get-apps.ts

@@ -32,6 +32,7 @@ export const GET_APPS = gql`
       auth {
         connectionType
         connectionRegistrationType
+        autoCheckStep
         fields {
           key
           label

packages/types/index.d.ts

@@ -648,6 +648,7 @@ interface IBaseAuth {
     $: IGlobalVariable,
   ): Promise<IVerifyConnectionRegistrationOutput>
   connectionModalLabel?: IConnectionModalLabel
+  autoCheckStep?: boolean
 }
 
 interface IUserAddedConnectionAuth extends IBaseAuth {