feat: frontend only - show approve reject button + refactor

Author: pregnantboy

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

@@ -22,7 +22,11 @@ const createStep: MutationResolvers['createStep'] = async (
       input.key,
     )
 
-    if ('hiddenFromUser' in triggerOrAction && triggerOrAction.hiddenFromUser) {
+    if (!triggerOrAction) {
+      throw new BadUserInputError('No such trigger or action')
+    }
+
+    if (triggerOrAction?.hiddenFromUser) {
       throw new BadUserInputError('Action can only be created by system')
     }
   }

packages/backend/src/models/app.ts

@@ -41,7 +41,7 @@ class App {
   static async findTriggerOrActionByKey(
     appKey: string,
     key: string,
-  ): Promise<ITrigger | IAction> {
+  ): Promise<ITrigger | IAction | null> {
     try {
       const app = await this.findOneByKey(appKey)
       return (

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

@@ -8,6 +8,7 @@ import { Button, Link } from '@opengovsg/design-system-react'
 
 import { EditorContext } from '@/contexts/Editor'
 import { TEST_CONNECTION } from '@/graphql/queries/test-connection'
+import { FORMSG_APP_KEY } from '@/helpers/formsg'
 import useAuthentication from '@/hooks/useAuthentication'
 
 import {
@@ -111,7 +112,7 @@ function ChooseConnectionSubstep(
       const connectionOption = optionGenerator(connection, application.key)
 
       let connectionLink: ConnectionLink | undefined
-      if (application.key === 'formsg') {
+      if (application.key === FORMSG_APP_KEY) {
         connectionLink = {
           url: formLinkGenerator(connectionOption),
           text: '(View form)',

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

@@ -5,6 +5,9 @@ import { useContext, useMemo } from 'react'
 import { EditorContext } from '@/contexts/Editor'
 import { FlowStep } from '@/exports/components'
 import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
+import { useStepMetadata } from '@/hooks/useStepMetadata'
+
+import { ApproveReject } from '../FlowStep/components/ApproveReject'
 
 import { AddStepButton } from './AddStepButton'
 
@@ -23,7 +26,9 @@ export default function FlowStepWithAddButton({
   groupedSteps: IStep[][]
   showAddButton?: boolean
 }) {
-  const { readOnly } = useContext(EditorContext)
+  const { readOnly, allApps } = useContext(EditorContext)
+
+  const { isApprovalStep } = useStepMetadata(allApps, step)
 
   const nonIfThenActionSteps = stepsBeforeGroup.filter(
     (step) => step.type === 'action' && step.key !== TOOLBOX_ACTIONS.IfThen,
@@ -59,12 +64,13 @@ export default function FlowStepWithAddButton({
     <>
       <FlowStep
         step={step}
-        isDeletable={true}
         isLastStep={isLastStep}
         isNested={isNested}
         // only allow reordering if there are more than 1 action steps
         allowReorder={nonIfThenActionSteps.length > 1}
       />
+      {isApprovalStep && <ApproveReject />}
+
       {showAddButton && (
         <AddStepButton {...getAddStepButtonProps(isLastStep, step.id)} />
       )}

packages/frontend/src/components/FlowStep/components/ApproveReject.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import { Flex, Tab, TabList, TabProps, Tabs } from '@chakra-ui/react'
+
+const tabStyle = (primaryColor: string): TabProps => {
+  return {
+    _selected: {
+      color: 'white',
+      bg: primaryColor,
+      _hover: {
+        color: 'white',
+      },
+    },
+    _hover: {
+      color: primaryColor,
+    },
+    letterSpacing: '0',
+    fontWeight: 'medium',
+    textTransform: 'none',
+    px: 4,
+    fontSize: 'medium',
+  }
+}
+
+export function ApproveReject() {
+  const [isApprovedSelected, setIsApprovedSelected] = useState(true)
+
+  return (
+    <Flex mt={4} mx="auto">
+      <Tabs
+        variant="soft-rounded"
+        index={isApprovedSelected ? 0 : 1}
+        backgroundColor="base.divider.medium"
+        borderRadius="full"
+        py={1}
+        px={0.5}
+        onChange={(index) => setIsApprovedSelected(index === 0)}
+      >
+        <TabList gap={2}>
+          <Tab {...tabStyle('green.500')}>If approved</Tab>
+          <Tab {...tabStyle('red.500')}>If rejected</Tab>
+        </TabList>
+      </Tabs>
+    </Flex>
+  )
+}

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

@@ -6,7 +6,6 @@ import { Box, CircularProgress, Flex, useDisclosure } from '@chakra-ui/react'
 import { Infobox } from '@opengovsg/design-system-react'
 
 import { EditorContext } from '@/contexts/Editor'
-import { StepDisplayOverridesContext } from '@/contexts/StepDisplayOverrides'
 import { MarkdownRenderer } from '@/exports/components'
 import { getFlowStepHeaderWidth } from '@/helpers/editor'
 import { replacePlaceholdersForHelpMessage } from '@/helpers/flow-templates'
@@ -31,7 +30,6 @@ import { flowStepStyles } from './styles'
 
 type FlowStepProps = {
   step: IStep
-  isDeletable?: boolean
   isLastStep: boolean
   isNested?: boolean
   allowReorder?: boolean
@@ -70,7 +68,6 @@ export default function FlowStep(
     setCurrentStepId,
     setShouldWarnOnLeave,
   } = useContext(EditorContext)
-  const displayOverrides = useContext(StepDisplayOverridesContext)?.[step.id]
   const {
     app,
     caption,
@@ -79,6 +76,7 @@ export default function FlowStep(
     selectedActionOrTrigger,
     substeps,
     shouldShowDragHandle,
+    isDeletable,
   } = useStepMetadata(
     allApps,
     step,
@@ -99,11 +97,6 @@ export default function FlowStep(
     onProceed: onModalOpen,
   })
 
-  const isDeletable =
-    displayOverrides?.disableDelete === true
-      ? false
-      : !readOnly && props.isDeletable
-
   const { shouldTestStepAgain, isTestSuccessful } = useMemo(
     () => validateStepParams(step, testExecutionSteps, substeps),
     [step, substeps, testExecutionSteps],

packages/frontend/src/components/FlowStepGroup/components/GroupStepWithAddButton.tsx

@@ -4,7 +4,6 @@ import { useContext } from 'react'
 
 import { EditorContext } from '@/contexts/Editor'
 import { FlowStep } from '@/exports/components'
-import { TOOLBOX_ACTIONS } from '@/helpers/toolbox'
 
 import { HoverAddStepButton } from '../Content/IfThen/HoverAddStepButton'
 
@@ -27,20 +26,16 @@ export default function GroupStepWithAddButton(
     isLastStep,
     isOverlay,
     allowReorder,
+
     showEmptyAction,
     canChildStepsReorder,
   } = props
   const { isDrawerOpen, readOnly } = useContext(EditorContext)
 
-  // cannot delete the condition step
-  const isDeletable =
-    step.key !== TOOLBOX_ACTIONS.IfThen && step.key !== TOOLBOX_ACTIONS.ForEach
-
   return (
     <>
       <FlowStep
         step={step}
-        isDeletable={isDeletable}
         // branch steps are always nested
         isNested={true}
         isLastStep={isLastStep}

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

@@ -15,6 +15,12 @@ import {
 } from '@chakra-ui/react'
 import { Button, IconButton, Menu } from '@opengovsg/design-system-react'
 
+import {
+  FORMSG_APP_KEY,
+  FORMSG_TRIGGER_KEY,
+  MRF_ACTION_KEY,
+} from '@/helpers/formsg'
+
 interface CheckAgainButtonProps {
   isUnstyledInfobox: boolean
   onClick: (testRunMetadata?: Record<string, unknown>) => void
@@ -27,9 +33,9 @@ interface CheckAgainButtonProps {
 export function CheckAgainButton(props: CheckAgainButtonProps) {
   const { isUnstyledInfobox, onClick, isLoading, isDisabled, step } = props
   const isFormSgTrigger =
-    step.appKey === 'formsg' && step.key === 'newSubmission'
+    step.appKey === FORMSG_APP_KEY && step.key === FORMSG_TRIGGER_KEY
   const isFormSgAction =
-    step.appKey === 'formsg' && step.key === 'mrfSubmission'
+    step.appKey === FORMSG_APP_KEY && step.key === MRF_ACTION_KEY
 
   if (isFormSgTrigger) {
     return <FormSGCheckAgainButton {...props} />

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

@@ -133,11 +133,7 @@ function FlowSubstep(props: FlowSubstepProps): JSX.Element {
   const handleSaveAndTest = useCallback(
     async (testRunMetadata?: Record<string, unknown>) => {
       try {
-        if (
-          !selectedActionOrTrigger ||
-          !('hiddenFromUser' in selectedActionOrTrigger) ||
-          selectedActionOrTrigger.hiddenFromUser !== true
-        ) {
+        if (!selectedActionOrTrigger?.hiddenFromUser) {
           await saveStep()
         }
         await executeTestStep({ testRunMetadata })