add functionality to change event for step

Author: m0nggh

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

@@ -30,7 +30,9 @@ const updateStep: MutationResolvers['updateStep'] = async (
     }
 
     const shouldInvalidate =
-      step.key !== input.key || step.appKey !== input.appKey
+      step.key !== input.key ||
+      step.appKey !== input.appKey ||
+      step.connectionId !== input.connection.id
 
     return await Step.query(trx)
       .patchAndFetchById(input.id, {

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

@@ -40,7 +40,9 @@ import { GET_FLOW } from '@/graphql/queries/get-flow'
 import { replacePlaceholdersForHelpMessage } from '@/helpers/flow-templates'
 
 import EmptyFlowStepHeader from '../EmptyFlowStepHeader'
-import FlowStepConfigurationModal from '../FlowStepConfigurationModal'
+import FlowStepConfigurationModal, {
+  type ModalScreen,
+} from '../FlowStepConfigurationModal'
 import { infoboxMdComponents } from '../MarkdownRenderer/CustomMarkdownComponents'
 
 type FlowStepProps = {
@@ -123,6 +125,7 @@ export default function FlowStep(
   const displayOverrides = useContext(StepDisplayOverridesContext)?.[step.id]
 
   const [currentSubstep, setCurrentSubstep] = useState<number | null>(0)
+  const [initialScreen, setInitialScreen] = useState<ModalScreen>('choose-app')
 
   const { data } = useQuery(GET_APPS)
 
@@ -195,6 +198,16 @@ export default function FlowStep(
     [deleteStep, step.id],
   )
 
+  const isEditable = actionsOrTriggers.length > 1
+  const onEditEvent = useCallback<MouseEventHandler>(
+    (e) => {
+      e.stopPropagation()
+      setInitialScreen('choose-event')
+      onModalOpen()
+    },
+    [onModalOpen],
+  )
+
   // define caption description based on app and step
   let caption = ''
   if (selectedActionOrTrigger?.name) {
@@ -252,7 +265,10 @@ export default function FlowStep(
         {!app || !selectedActionOrTrigger ? (
           <EmptyFlowStepHeader
             isTrigger={isTrigger}
-            onModalOpen={onModalOpen}
+            onModalOpen={() => {
+              setInitialScreen('choose-app')
+              onModalOpen()
+            }}
           />
         ) : (
           <FlowStepHeader
@@ -271,6 +287,7 @@ export default function FlowStep(
             demoVideoUrl={app?.demoVideoDetails?.url}
             demoVideoTitle={app?.demoVideoDetails?.title}
             isInfoboxPresent={shouldShowInfobox}
+            onEditEvent={isEditable ? onEditEvent : undefined}
           >
             <StepExecutionsProvider priorExecutionSteps={priorExecutionSteps}>
               <Form
@@ -286,7 +303,10 @@ export default function FlowStep(
                     <ChooseConnectionSubstep
                       step={step}
                       application={app}
-                      onReconnect={onModalOpen}
+                      onReconnect={() => {
+                        setInitialScreen('choose-connection')
+                        onModalOpen()
+                      }}
                     />
                   )}
 
@@ -346,6 +366,7 @@ export default function FlowStep(
           step={step}
           app={app}
           event={selectedActionOrTrigger}
+          initialScreen={initialScreen}
         />
       )}
     </>

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

@@ -6,7 +6,10 @@ import { useMutation, useQuery } from '@apollo/client'
 import { Flex, ModalBody, ModalHeader } from '@chakra-ui/react'
 import { Button, ModalCloseButton } from '@opengovsg/design-system-react'
 
-import { ModalState } from '@/components/FlowStepConfigurationModal'
+import type {
+  ModalScreen,
+  ModalState,
+} from '@/components/FlowStepConfigurationModal'
 import { EditorContext } from '@/contexts/Editor'
 import { REGISTER_CONNECTION } from '@/graphql/mutations/register-connection'
 import { TEST_CONNECTION } from '@/graphql/queries/test-connection'
@@ -28,6 +31,7 @@ interface ChooseConnectionProps {
   handleSubmit: () => void
   mockStep?: IStep
   step?: IStep
+  initialScreen?: ModalScreen
 }
 
 export default function ChooseConnection(
@@ -43,6 +47,7 @@ export default function ChooseConnection(
     handleSubmit,
     mockStep,
     step,
+    initialScreen,
   } = props
   const editorContext = useContext(EditorContext)
   const supportsConnectionRegistration =
@@ -106,9 +111,8 @@ export default function ChooseConnection(
 
   return (
     <>
-      {/* Hide back button only if step has both the key and appKey */}
       <ModalHeader>
-        {(!step?.key || !step?.appKey) && (
+        {initialScreen !== 'choose-connection' && (
           <Button
             variant="clear"
             colorScheme="secondary"

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

@@ -7,9 +7,9 @@ import { useMutation, useQuery } from '@apollo/client'
 import { GET_OR_CREATE_MOCK_STEP } from '@/graphql/mutations/get-or-create-mock-step'
 import { GET_APP_CONNECTIONS } from '@/graphql/queries/get-app-connections'
 
+import type { ModalScreen, ModalState } from '..'
 import { EXCEL_APP_KEY } from '../constants'
 import InvalidModalScreen from '../InvalidModalScreen'
-import { type ModalState } from '..'
 
 import AddConnection from './AddConnection'
 import ChooseConnection from './ChooseConnection'
@@ -26,6 +26,7 @@ interface ChooseAndAddConnectionProps {
     connectionId?: string,
   ) => Promise<IStep>
   step?: IStep
+  initialScreen?: ModalScreen
 }
 
 export type ConnectionDropdownOption = {
@@ -76,6 +77,7 @@ export default function ChooseAndAddConnection(
     step,
     onUpdateStep,
     onCreateStep,
+    initialScreen,
   } = props
   const { currentScreen, selectedApp, selectedEvent, selectedConnectionId } =
     modalState
@@ -250,6 +252,7 @@ export default function ChooseAndAddConnection(
         handleSubmit={handleSubmit}
         mockStep={mockStep ?? undefined}
         step={step}
+        initialScreen={initialScreen}
       />
     )
   } else if (selectedApp && currentScreen === 'add-connection') {

packages/frontend/src/components/FlowStepConfigurationModal/ChooseAppAndEvent/ChooseEvent.tsx

@@ -14,6 +14,8 @@ import {
   useIsIfThenSelectable,
 } from '@/helpers/toolbox'
 
+import { type ModalScreen } from '..'
+
 import FeedbackFooter from './FeedbackFooter'
 
 interface ChooseEventProps {
@@ -22,10 +24,18 @@ interface ChooseEventProps {
   isLastStep: boolean
   onSelectAppEvent: (app: IApp, event: ITrigger | IAction) => void
   onBack: () => void
+  initialScreen?: ModalScreen
 }
 
 export default function ChooseEvent(props: ChooseEventProps): JSX.Element {
-  const { selectedApp, isTrigger, isLastStep, onSelectAppEvent, onBack } = props
+  const {
+    selectedApp,
+    isTrigger,
+    isLastStep,
+    onSelectAppEvent,
+    onBack,
+    initialScreen,
+  } = props
 
   const launchDarkly = useContext(LaunchDarklyContext)
   const [_, isInitializingIfThen] = useIfThenInitializer()
@@ -57,18 +67,22 @@ export default function ChooseEvent(props: ChooseEventProps): JSX.Element {
     <>
       <ModalHeader>
         <Flex gap={2} flexDir="column" alignItems="flex-start">
-          <Button
-            variant="clear"
-            colorScheme="secondary"
-            size="xs"
-            onClick={onBack}
-            leftIcon={<BiChevronLeft />}
-            ml={-4}
-          >
-            Back
-          </Button>
-          <Text textStyle="h3-semibold">{selectedApp.name}</Text>
-          <Text textStyle="body-1">{selectedApp.description}</Text>
+          {initialScreen !== 'choose-event' && (
+            <Button
+              variant="clear"
+              colorScheme="secondary"
+              size="xs"
+              onClick={onBack}
+              leftIcon={<BiChevronLeft />}
+              ml={-4}
+            >
+              Back
+            </Button>
+          )}
+          <Box mt={2}>
+            <Text textStyle="h3-semibold">{selectedApp.name}</Text>
+            <Text textStyle="body-1">{selectedApp.description}</Text>
+          </Box>
         </Flex>
       </ModalHeader>
       <ModalCloseButton mt={2} size="xs" />

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

@@ -11,9 +11,9 @@ import {
   useIfThenInitializer,
 } from '@/helpers/toolbox'
 
+import type { ModalScreen, ModalState } from '..'
 import { APP_ALLOWING_EMPTY_CONNECTION, EXCEL_APP_KEY } from '../constants'
 import InvalidModalScreen from '../InvalidModalScreen'
-import { type ModalState } from '..'
 
 import ChooseApp from './ChooseApp'
 import ChooseEvent from './ChooseEvent'
@@ -31,6 +31,7 @@ type ChooseAppAndEventProps = {
     connectionId?: string,
   ) => Promise<IStep>
   step?: IStep
+  initialScreen?: ModalScreen
 }
 
 export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
@@ -43,6 +44,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
     onUpdateStep,
     onCreateStep,
     step,
+    initialScreen,
   } = props
   const { currentScreen, selectedApp } = modalState
 
@@ -180,6 +182,7 @@ export default function ChooseAppAndEvent(props: ChooseAppAndEventProps) {
             currentScreen: 'choose-app',
           })
         }}
+        initialScreen={initialScreen}
       />
     )
   } else {

packages/frontend/src/components/FlowStepConfigurationModal/InvalidModalScreen.tsx

@@ -8,7 +8,7 @@ export default function InvalidModalScreen(): JSX.Element {
       <Flex flexDir="column" textAlign="center" gap={2}>
         <Text textStyle="h4">Error</Text>
         <Text textStyle="body-1">
-          This should not appear, please take a screenshot and submit to{' '}
+          This should not appear, please send a screenshot with the pipe id to{' '}
           <Text as="a" href={SUPPORT_FORM_LINK} target="_blank">
             {SUPPORT_FORM_LINK}
           </Text>

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

@@ -27,6 +27,7 @@ interface FlowStepConfigurationModalProps {
   step?: IStep
   app?: IApp
   event?: ITrigger | IAction
+  initialScreen?: ModalScreen
 }
 
 export type ModalScreen =
@@ -47,12 +48,20 @@ export type ModalState = {
 export default function FlowStepConfigurationModal(
   props: FlowStepConfigurationModalProps,
 ): JSX.Element {
-  const { onClose, isTrigger, isLastStep, onCreateStep, step, app, event } =
-    props
+  const {
+    onClose,
+    isTrigger,
+    isLastStep,
+    onCreateStep,
+    step,
+    app,
+    event,
+    initialScreen,
+  } = props
   const { flowId } = useParams()
   // Remember to always clear the selectedConnectionId when the modal is back to the first screen
   const [modalState, setModalState] = useState<ModalState>({
-    currentScreen: app && event ? 'choose-connection' : 'choose-app',
+    currentScreen: initialScreen ?? 'choose-app',
     selectedApp: app ?? null,
     selectedEvent: event ?? null,
     selectedConnectionId: step?.connection?.id ?? '',
@@ -106,6 +115,7 @@ export default function FlowStepConfigurationModal(
           onUpdateStep={onUpdateStep}
           onCreateStep={onCreateStep}
           step={step}
+          initialScreen={initialScreen}
         />
       )
     } else if (
@@ -121,6 +131,7 @@ export default function FlowStepConfigurationModal(
           onUpdateStep={onUpdateStep}
           onCreateStep={onCreateStep}
           step={step}
+          initialScreen={initialScreen}
         />
       )
     } else {
@@ -135,6 +146,7 @@ export default function FlowStepConfigurationModal(
     onUpdateStep,
     onCreateStep,
     step,
+    initialScreen,
   ])
 
   return (

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

@@ -8,6 +8,7 @@ import {
 } from 'react'
 import {
   BiArrowFromRight,
+  BiEdit,
   BiHelpCircle,
   BiSolidCheckCircle,
   BiSolidErrorCircle,
@@ -52,6 +53,7 @@ interface FlowStepHeaderProps {
   demoVideoUrl?: string
   demoVideoTitle?: string
   isInfoboxPresent?: boolean
+  onEditEvent?: MouseEventHandler
 }
 
 const LOCAL_STORAGE_DEMO_TOOLTIP_KEY = 'demo-tooltip-clicked'
@@ -73,6 +75,7 @@ export default function FlowStepHeader(
     demoVideoUrl,
     demoVideoTitle,
     isInfoboxPresent,
+    onEditEvent,
   } = props
 
   const handleClick = useCallback(() => {
@@ -237,11 +240,27 @@ export default function FlowStepHeader(
             </Flex>
           </Flex>
 
-          {/*
-           * Delete step button
-           */}
-          {onDelete && (
-            <Flex ml="auto">
+          <Flex ml="auto" gap={2}>
+            {onEditEvent && (
+              <Tooltip
+                label="Change event"
+                placement="top-start"
+                openDelay={300}
+                gutter={0}
+              >
+                <IconButton
+                  onClick={onEditEvent}
+                  variant="clear"
+                  aria-label="Edit Event"
+                  icon={<BiEdit />}
+                />
+              </Tooltip>
+            )}
+
+            {/*
+             * Delete step button
+             */}
+            {onDelete && (
               <IconButton
                 onClick={(event) => {
                   onDialogOpen()
@@ -251,8 +270,8 @@ export default function FlowStepHeader(
                 aria-label="Delete Step"
                 icon={<BiTrashAlt />}
               />
-            </Flex>
-          )}
+            )}
+          </Flex>
         </Flex>
 
         {/*