chore: show approval tag, and fix some frontend stuff

Author: pregnantboy

packages/backend/src/apps/formsg/common/get-data-out-metadata.ts

@@ -314,10 +314,13 @@ async function getDataOutMetadata(
 
   let questionIdsToShowForMrf: Set<string> | undefined
 
+  let approvalField: string | null = null
   if (parameters.mrf) {
     questionIdsToShowForMrf = new Set(
       (parameters.mrf as ParsedMrfWorkflowStep).fields,
     )
+    approvalField =
+      (parameters.mrf as ParsedMrfWorkflowStep).approvalField ?? null
   }
 
   const fieldMetadata: IDataOutMetadata = Object.create(null)
@@ -370,6 +373,11 @@ async function getDataOutMetadata(
       isVisible: { isHidden: true },
       isHeader: { isHidden: true },
     }
+
+    if (approvalField && fieldId === approvalField) {
+      fieldMetadata[fieldId].answer.type = 'approval'
+    }
+
     if (isAnswerArrayValid(fieldData)) {
       // table field will have a stringified table object in the answer field
       // so that it can be used in for-each

packages/backend/src/graphql/mutations/create-flow.ts

@@ -14,15 +14,14 @@ const createFlow: MutationResolvers['createFlow'] = async (
     name: trimmedFlowName,
   })
 
+  /**
+   * We do not need to create an empty action since the AddStepButton already looks like an empty step
+   */
   await flow.$relatedQuery('steps').insert([
     {
       type: 'trigger',
       position: 1,
     },
-    {
-      type: 'action',
-      position: 2,
-    },
   ])
 
   return flow

packages/frontend/src/components/Editor/components/AddStepButton.tsx

@@ -29,21 +29,21 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
     step.config.approval?.branch || approvalBranches[step.id]
 
   const { dividerColor, iconBgColor } = useMemo(() => {
-    if (approvalBranch === undefined) {
-      return {
-        dividerColor: 'base.divider.strong',
-        iconBgColor: undefined,
-      }
-    }
     if (approvalBranch === 'approve') {
       return {
         dividerColor: 'green.500',
         iconBgColor: 'green.50',
       }
     }
+    if (approvalBranch === 'reject') {
+      return {
+        dividerColor: 'red.500',
+        iconBgColor: 'red.50',
+      }
+    }
     return {
-      dividerColor: 'red.500',
-      iconBgColor: 'red.50',
+      dividerColor: 'base.divider.strong',
+      iconBgColor: undefined,
     }
   }, [approvalBranch])
 
@@ -58,18 +58,6 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
   })
 
   const shouldShowDisabledMrfStep = isLastStep && disabledMrfStepToDisplay
-  const containerHeight = useMemo(() => {
-    if (showEmptyAction) {
-      return undefined
-    }
-    if (isHidden) {
-      return 12
-    }
-    if (shouldShowDisabledMrfStep) {
-      return 36
-    }
-    return 16
-  }, [showEmptyAction, isHidden, shouldShowDisabledMrfStep])
 
   return (
     <Box
@@ -78,7 +66,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
       flexDir="column"
       alignItems="center"
       alignSelf="stretch"
-      h={containerHeight}
+      h="auto"
       w="100%"
     >
       {isHidden || (isDisabled && !isLastStep) ? (
@@ -104,7 +92,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
             </>
           )}
           {/* Top vertical line */}
-          <Box h={6}>
+          <Box h={4}>
             <Divider orientation="vertical" borderColor={dividerColor} />
           </Box>
           <TouchableTooltip
@@ -136,7 +124,7 @@ export function AddStepButton(props: AddStepButtonProps): JSX.Element {
           </TouchableTooltip>
           {/* Bottom vertical line */}
           {!isLastStep && (
-            <Box h={6}>
+            <Box h={4}>
               <Divider orientation="vertical" borderColor={dividerColor} />
             </Box>
           )}

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

@@ -50,6 +50,11 @@ function VariableTag({
           label: 'Tile Row ID',
           tooltip: `This variable can be used in Tile's Update Single Row action`,
         }
+      case 'approval':
+        return {
+          label: 'Approval',
+          tooltip: 'This variable determines the approval status of this step',
+        }
       default:
         return {
           label: null,

packages/frontend/src/contexts/MrfContext.tsx

@@ -1,6 +1,6 @@
 import { IStep, IStepApprovalBranch } from '@plumber/types'
 
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useEffect, useState } from 'react'
 import get from 'lodash/get'
 
 import { FORMSG_APP_KEY, MRF_ACTION_KEY } from '@/helpers/formsg'
@@ -29,6 +29,15 @@ interface MrfContextProviderProps {
   children: React.ReactNode
 }
 
+function generateDefaultApprovalBranches(
+  mrfApprovalSteps: IStep[],
+): Record<string, IStepApprovalBranch> {
+  return mrfApprovalSteps.reduce((acc, step) => {
+    acc[step.id] = 'approve'
+    return acc
+  }, {} as Record<string, IStepApprovalBranch>)
+}
+
 export const MrfContextProvider = ({ children }: MrfContextProviderProps) => {
   const { flow } = useContext(EditorContext)
 
@@ -45,12 +54,14 @@ export const MrfContextProvider = ({ children }: MrfContextProviderProps) => {
 
   const [approvalBranches, setApprovalBranches] = useState<
     Record<string, IStepApprovalBranch>
-  >({
-    ...mrfApprovalSteps.reduce((acc, step) => {
-      acc[step.id] = 'approve'
-      return acc
-    }, {} as Record<string, IStepApprovalBranch>),
-  })
+  >(generateDefaultApprovalBranches(mrfApprovalSteps))
+
+  /**
+   * We need to reset the state when the mrf approval steps change
+   */
+  // useEffect(() => {
+  //   setApprovalBranches(generateDefaultApprovalBranches(mrfApprovalSteps))
+  // }, [mrfApprovalSteps])
 
   const setApprovalBranch = (stepId: string, branch: IStepApprovalBranch) => {
     setApprovalBranches((prev) => ({

packages/types/index.d.ts

@@ -59,6 +59,7 @@ export type TDataOutMetadatumType =
   | 'array'
   | 'tile_row_id'
   | 'table'
+  | 'approval'
 
 /**
  * This should only be defined on _leaf_ nodes (i.e. **primitive array