feat: support multiple actions on wizard hook

Author: marian2js

components/wizards/notifications/NotificationStep.tsx

@@ -92,6 +92,7 @@ export function NotificationStep({ notificationTrigger, readonly }: Props) {
           throw new Error(`Email is required`)
         }
         return {
+          integrationKey: key,
           key: 'sendEmailToYourself',
           inputs: {
             email: inputs.email,
@@ -101,6 +102,7 @@ export function NotificationStep({ notificationTrigger, readonly }: Props) {
         }
       case 'discord':
         return {
+          integrationKey: key,
           key: 'sendMessage',
           inputs: {
             channelId: inputs.channelId,
@@ -110,6 +112,7 @@ export function NotificationStep({ notificationTrigger, readonly }: Props) {
         }
       case 'telegram':
         return {
+          integrationKey: key,
           key: 'sendMessage',
           inputs: {
             text: actionData.message,
@@ -118,6 +121,7 @@ export function NotificationStep({ notificationTrigger, readonly }: Props) {
         }
       case 'xmtp':
         return {
+          integrationKey: key,
           key: 'sendMessageWallet',
           inputs: {
             address,

pages/create/bulkaction/setup.tsx

@@ -212,6 +212,7 @@ function SetupBulkActionPage() {
         },
         actions: [
           {
+            integrationKey: actionIntegration.key,
             key: action.operationKey,
             inputs: {
               ...inputs, // TODO filter only action?
@@ -280,10 +281,10 @@ function SetupBulkActionPage() {
       </Head>
       <PageWrapper title="Create a Bulk Action" extra={<OperationsUsed />}>
         <div className="container px-0 mx-auto lg:px-24">
-          <Card className="w-full flex justify-center">
-            <div className="w-full md:w-fit gap-4 my-8 mx-0 lg:mx-48">
-              <div className="text-center text-2xl font-bold mb-8">Select Data Source and Action</div>
-              <div className="text-center text-lg mb-12">
+          <Card className="flex justify-center w-full">
+            <div className="w-full gap-4 mx-0 my-8 md:w-fit lg:mx-48">
+              <div className="mb-8 text-2xl font-bold text-center">Select Data Source and Action</div>
+              <div className="mb-12 text-lg text-center">
                 To create a Bulk Action, select a data source and an action. The action will be executed for all items
                 in the data source.
               </div>

src/services/WizardHooks.ts

@@ -18,6 +18,8 @@ type OperationData = {
 
 type TriggerData = OperationData & { schedule?: Record<string, any> }
 
+type ActionData = OperationData & { integrationKey: string }
+
 interface CreateWorkflowWithOperations {
   workflowName: string
   triggerIntegration: {
@@ -26,7 +28,7 @@ interface CreateWorkflowWithOperations {
     version?: string
   }
   trigger: TriggerData
-  actions: Array<OperationData>
+  actions: ActionData[]
 }
 
 const integrationFragment = gql`
@@ -47,14 +49,18 @@ const integrationActionFragment = gql`
   fragment WizardHookIntegrationActionFragment on IntegrationAction {
     id
     key
+    integration {
+      id
+      key
+    }
   }
 `
 
 export function useCreateWorkflowWithOperations() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [trigger, setTrigger] = useState<TriggerData>()
-  const [actions, setActions] = useState<Array<OperationData>>()
+  const [actions, setActions] = useState<Array<ActionData>>()
   const [runStarted, setRunStarted] = useState(false)
   const [integrationQuery, setIntegrationQuery] = useState<{ id?: string; key: string; version?: string }>()
   const [workflow, setWorkflow] = useState<Workflow>()
@@ -164,28 +170,36 @@ export function useCreateWorkflowWithOperations() {
         setError((e as Error)?.message)
       }
 
-      // TODO support multiple actions
-      if (integrationActions?.length) {
-        try {
+      try {
+        const workflowActions: WorkflowAction[] = []
+        for (const action of actions) {
+          const integrationAction = integrationActions?.find(
+            (ia) => ia.key === action.key && ia.integration.key === action.integrationKey,
+          )
+          if (!integrationAction) {
+            setError(`Integration action not found`)
+            return
+          }
           const workflowActionRes = await createWorkflowAction({
             variables: {
               input: {
                 workflowAction: {
                   workflow: workflow.id,
-                  integrationAction: integrationActions[0].id,
-                  inputs: actions[0].inputs,
-                  credentials: actions[0].credentialsId,
-                  name: actions[0].name,
+                  integrationAction: integrationAction.id,
+                  inputs: action.inputs,
+                  credentials: action.credentialsId,
+                  name: action.name,
                 },
               },
             },
           })
           if (workflowActionRes.data?.createOneWorkflowAction) {
-            setWorkflowActions([workflowActionRes.data.createOneWorkflowAction])
+            workflowActions.push(workflowActionRes.data.createOneWorkflowAction)
           }
-        } catch (e) {
-          setError((e as Error)?.message)
         }
+        setWorkflowActions(workflowActions)
+      } catch (e) {
+        setError((e as Error)?.message)
       }
 
       runStartedInternal = false