improvement(execution): trigger manual execution using mock payloads (#1863)

* fix(err-message): manual run message

* make external triggers start workflow manually too

* improvement(execution): trigger manual execution using mock payloads

* remove redundant code and update generate mock value func

* cleanup code, add to docs

* fix multi trigger injection

* address greptile comments

Author: icecrasher321

apps/docs/content/docs/en/triggers/index.mdx

@@ -39,3 +39,15 @@ Use the Start block for everything originating from the editor, deploy-to-API, o
 
 > Deployments power every trigger. Update the workflow, redeploy, and all trigger entry points pick up the new snapshot. Learn more in [Execution → Deployment Snapshots](/execution).
 
+## Manual Execution Priority
+
+When you click **Run** in the editor, Sim automatically selects which trigger to execute based on the following priority order:
+
+1. **Start Block** (highest priority)
+2. **Schedule Triggers**
+3. **External Triggers** (webhooks, integrations like Slack, Gmail, Airtable, etc.)
+
+If your workflow has multiple triggers, the highest priority trigger will be executed. For example, if you have both a Start block and a Webhook trigger, clicking Run will execute the Start block.
+
+**External triggers with mock payloads**: When external triggers (webhooks and integrations) are executed manually, Sim automatically generates mock payloads based on the trigger's expected data structure. This ensures downstream blocks can resolve variables correctly during testing.
+

apps/sim/app/api/workflows/[id]/execute/route.ts

@@ -29,6 +29,7 @@ const ExecuteWorkflowSchema = z.object({
   stream: z.boolean().optional(),
   useDraftState: z.boolean().optional(),
   input: z.any().optional(),
+  startBlockId: z.string().optional(),
 })
 
 export const runtime = 'nodejs'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components/providers/gmail.tsx

@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react'
 import { Info } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
-import { GmailIcon } from '@/components/icons'
 import {
   Badge,
   Button,
   Checkbox,
   Label,
-  Notice,
   Select,
   SelectContent,
   SelectItem,
@@ -16,7 +14,6 @@ import {
   Skeleton,
 } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import { JSONView } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components'
 import { ConfigSection } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components'
 
 const logger = createLogger('GmailConfig')
@@ -56,76 +53,6 @@ const formatLabelName = (label: GmailLabel): string => {
   return formattedName
 }
 
-const getExampleEmailEvent = (includeRawEmail: boolean) => {
-  const baseExample = {
-    email: {
-      id: '18e0ffabd5b5a0f4',
-      threadId: '18e0ffabd5b5a0f4',
-      subject: 'Monthly Report - April 2025',
-      from: '[email protected]',
-      to: '[email protected]',
-      cc: '[email protected]',
-      date: '2025-05-10T10:15:23.000Z',
-      bodyText:
-        'Hello,\n\nPlease find attached the monthly report for April 2025.\n\nBest regards,\nSender',
-      bodyHtml:
-        '<div><p>Hello,</p><p>Please find attached the monthly report for April 2025.</p><p>Best regards,<br>Sender</p></div>',
-      labels: ['INBOX', 'IMPORTANT'],
-      hasAttachments: true,
-      attachments: [
-        {
-          filename: 'report-april-2025.pdf',
-          mimeType: 'application/pdf',
-          size: 2048576,
-        },
-      ],
-    },
-    timestamp: '2025-05-10T10:15:30.123Z',
-  }
-
-  if (includeRawEmail) {
-    return {
-      ...baseExample,
-      rawEmail: {
-        id: '18e0ffabd5b5a0f4',
-        threadId: '18e0ffabd5b5a0f4',
-        labelIds: ['INBOX', 'IMPORTANT'],
-        snippet: 'Hello, Please find attached the monthly report...',
-        historyId: '123456',
-        internalDate: '1715337323000',
-        payload: {
-          partId: '',
-          mimeType: 'multipart/mixed',
-          filename: '',
-          headers: [
-            { name: 'From', value: '[email protected]' },
-            { name: 'To', value: '[email protected]' },
-            { name: 'Subject', value: 'Monthly Report - April 2025' },
-            { name: 'Date', value: 'Fri, 10 May 2025 10:15:23 +0000' },
-            { name: 'Message-ID', value: '<[email protected]>' },
-          ],
-          body: { size: 0 },
-          parts: [
-            {
-              partId: '0',
-              mimeType: 'text/plain',
-              filename: '',
-              headers: [{ name: 'Content-Type', value: 'text/plain; charset=UTF-8' }],
-              body: {
-                size: 85,
-                data: 'SGVsbG8sDQoNClBsZWFzZSBmaW5kIGF0dGFjaGVkIHRoZSBtb250aGx5IHJlcG9ydA==',
-              },
-            },
-          ],
-        },
-        sizeEstimate: 4156,
-      },
-    }
-  }
-
-  return baseExample
-}
-
 interface GmailConfigProps {
   selectedLabels: string[]
   setSelectedLabels: (labels: string[]) => void
@@ -364,17 +291,6 @@ export function GmailConfig({
           </div>
         </div>
       </ConfigSection>
-
-      <Notice
-        variant='default'
-        className='border-slate-200 bg-white dark:border-border dark:bg-background'
-        icon={<GmailIcon className='mt-0.5 mr-3.5 h-5 w-5 flex-shrink-0 text-red-500' />}
-        title='Gmail Event Payload Example'
-      >
-        <div className='overflow-wrap-anywhere mt-2 whitespace-normal break-normal font-mono text-sm'>
-          <JSONView data={getExampleEmailEvent(includeRawEmail)} />
-        </div>
-      </Notice>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components/providers/outlook.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Info } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
-import { OutlookIcon } from '@/components/icons'
 import {
   Badge,
   Button,
@@ -16,7 +15,6 @@ import {
   Skeleton,
 } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import { JSONView } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components'
 import { ConfigSection } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components'
 
 const logger = createLogger('OutlookConfig')
@@ -40,70 +38,6 @@ const TOOLTIPS = {
 }
 
 // Generate example payload for Outlook
-const generateOutlookExamplePayload = (includeRawEmail: boolean) => {
-  const baseExample: any = {
-    email: {
-      id: 'AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e-T4KzowKTAAAAAAEMAAAiIsqMbYjsT5e-T4KzowKTAAAYbvZDAAA=',
-      conversationId:
-        'AAQkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAQAOH_y8jLzUGIn-HVkHUBrEE=',
-      subject: 'Monthly Report - January 2024',
-      from: '[email protected]',
-      to: '[email protected]',
-      cc: '',
-      date: '2024-01-15T10:30:00Z',
-      bodyText: 'Hello, Please find attached the monthly report for January 2024.',
-      bodyHtml: '<p>Hello,</p><p>Please find attached the monthly report for January 2024.</p>',
-      hasAttachments: true,
-      isRead: false,
-      folderId: 'inbox',
-    },
-    timestamp: '2024-01-15T10:30:15.123Z',
-  }
-
-  if (includeRawEmail) {
-    baseExample.rawEmail = {
-      id: 'AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e-T4KzowKTAAAAAAEMAAAiIsqMbYjsT5e-T4KzowKTAAAYbvZDAAA=',
-      conversationId:
-        'AAQkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAQAOH_y8jLzUGIn-HVkHUBrEE=',
-      subject: 'Monthly Report - January 2024',
-      bodyPreview: 'Hello, Please find attached the monthly report for January 2024.',
-      body: {
-        contentType: 'html',
-        content: '<p>Hello,</p><p>Please find attached the monthly report for January 2024.</p>',
-      },
-      from: {
-        emailAddress: {
-          name: 'John Doe',
-          address: '[email protected]',
-        },
-      },
-      toRecipients: [
-        {
-          emailAddress: {
-            name: 'Jane Smith',
-            address: '[email protected]',
-          },
-        },
-      ],
-      ccRecipients: [],
-      bccRecipients: [],
-      receivedDateTime: '2024-01-15T10:30:00Z',
-      sentDateTime: '2024-01-15T10:29:45Z',
-      hasAttachments: true,
-      isRead: false,
-      isDraft: false,
-      importance: 'normal',
-      parentFolderId: 'inbox',
-      internetMessageId: '<[email protected]>',
-      webLink: 'https://outlook.office365.com/owa/?ItemID=...',
-      createdDateTime: '2024-01-15T10:30:00Z',
-      lastModifiedDateTime: '2024-01-15T10:30:15Z',
-      changeKey: 'CQAAABYAAAAiIsqMbYjsT5e-T4KzowKTAAAYbvZE',
-    }
-  }
-
-  return baseExample
-}
 
 interface OutlookConfigProps {
   selectedLabels: string[]
@@ -368,16 +302,6 @@ export function OutlookConfig({
           </div>
         </div>
       </ConfigSection>
-
-      <ConfigSection>
-        <div className='mb-3 flex items-center gap-2'>
-          <OutlookIcon className='h-4 w-4' />
-          <h3 className='font-medium text-sm'>Outlook Event Payload Example</h3>
-        </div>
-        <div className='rounded-md border bg-muted/50 p-3'>
-          <JSONView data={generateOutlookExamplePayload(includeRawEmail)} />
-        </div>
-      </ConfigSection>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel-new/components/editor/components/sub-block/components/webhook/components/providers/slack.tsx

@@ -1,6 +1,3 @@
-import { SlackIcon } from '@/components/icons'
-import { Notice } from '@/components/ui'
-import { JSONView } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/console/components'
 import {
   ConfigSection,
   InstructionsSection,
@@ -23,24 +20,6 @@ interface SlackConfigProps {
   webhookUrl: string
 }
 
-const exampleEvent = JSON.stringify(
-  {
-    type: 'event_callback',
-    event: {
-      type: 'message',
-      channel: 'C0123456789',
-      user: 'U0123456789',
-      text: 'Hello from Slack!',
-      ts: '1234567890.123456',
-    },
-    team_id: 'T0123456789',
-    event_id: 'Ev0123456789',
-    event_time: 1234567890,
-  },
-  null,
-  2
-)
-
 export function SlackConfig({
   signingSecret,
   setSigningSecret,
@@ -144,20 +123,6 @@ export function SlackConfig({
           <li>Save changes in both Slack and here.</li>
         </ol>
       </InstructionsSection>
-
-      <Notice
-        variant='default'
-        className='border-slate-200 bg-white dark:border-border dark:bg-background'
-        icon={
-          <SlackIcon className='mt-0.5 mr-3.5 h-5 w-5 flex-shrink-0 text-[#611f69] dark:text-[#e01e5a]' />
-        }
-        title='Slack Event Payload Example'
-      >
-        Your workflow will receive a payload similar to this when a subscribed event occurs:
-        <div className='overflow-wrap-anywhere mt-2 whitespace-normal break-normal font-mono text-sm'>
-          <JSONView data={JSON.parse(exampleEvent)} />
-        </div>
-      </Notice>
     </div>
   )
 }