remove unused subblock store op, update search modal to reflect list of triggers

Author: waleed

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/text.tsx

@@ -15,7 +15,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
         className={`rounded-md border bg-card p-4 shadow-sm ${className || ''}`}
       >
         <div
-          className='prose prose-sm dark:prose-invert max-w-none text-sm [&_a]:text-primary [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs [&_strong]:font-semibold [&_ul]:ml-5 [&_ul]:list-disc'
+          className='prose prose-sm dark:prose-invert max-w-none text-sm [&_a]:text-blue-600 [&_a]:underline [&_a]:hover:text-blue-700 [&_a]:dark:text-blue-400 [&_a]:dark:hover:text-blue-300 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs [&_strong]:font-semibold [&_ul]:ml-5 [&_ul]:list-disc'
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/trigger-save/trigger-save.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { AlertCircle, Check, Save, Trash2 } from 'lucide-react'
+import { AlertCircle, Check, Copy, Save, Trash2 } from 'lucide-react'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
   AlertDialog,
@@ -12,6 +12,7 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/utils'
 import { useTriggerConfigAggregation } from '@/hooks/use-trigger-config-aggregation'
@@ -42,6 +43,10 @@ export function TriggerSave({
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
   const [deleteStatus, setDeleteStatus] = useState<'idle' | 'deleting'>('idle')
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [testUrl, setTestUrl] = useState<string | null>(null)
+  const [testUrlExpiresAt, setTestUrlExpiresAt] = useState<string | null>(null)
+  const [isGeneratingTestUrl, setIsGeneratingTestUrl] = useState(false)
+  const [copied, setCopied] = useState<string | null>(null)
 
   const { webhookId, saveConfig, deleteConfig, isLoading } = useWebhookManagement({
     blockId,
@@ -56,6 +61,10 @@ export function TriggerSave({
 
   const triggerDef = triggerId && isTriggerValid(triggerId) ? getTrigger(triggerId) : null
 
+  // Check if trigger supports webhook URLs (has webhookUrlDisplay subblock)
+  const hasWebhookUrlDisplay =
+    triggerDef?.subBlocks.some((sb) => sb.id === 'webhookUrlDisplay') ?? false
+
   const validateRequiredFields = useCallback(
     (
       configToCheck: Record<string, any> | null | undefined
@@ -225,6 +234,38 @@ export function TriggerSave({
     }
   }
 
+  const generateTestUrl = async () => {
+    if (!webhookId) return
+    try {
+      setIsGeneratingTestUrl(true)
+      const res = await fetch(`/api/webhooks/${webhookId}/test-url`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({}),
+      })
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}))
+        throw new Error(err?.error || 'Failed to generate test URL')
+      }
+      const json = await res.json()
+      setTestUrl(json.url)
+      setTestUrlExpiresAt(json.expiresAt)
+    } catch (e) {
+      logger.error('Failed to generate test webhook URL', { error: e })
+      setErrorMessage(
+        e instanceof Error ? e.message : 'Failed to generate test URL. Please try again.'
+      )
+    } finally {
+      setIsGeneratingTestUrl(false)
+    }
+  }
+
+  const copyToClipboard = (text: string, type: string): void => {
+    navigator.clipboard.writeText(text)
+    setCopied(type)
+    setTimeout(() => setCopied(null), 2000)
+  }
+
   const handleDeleteClick = () => {
     if (isPreview || disabled || !webhookId) return
     setShowDeleteDialog(true)
@@ -242,6 +283,8 @@ export function TriggerSave({
         setDeleteStatus('idle')
         setSaveStatus('idle')
         setErrorMessage(null)
+        setTestUrl(null)
+        setTestUrlExpiresAt(null)
 
         logger.info('Trigger configuration deleted successfully', {
           blockId,
@@ -325,6 +368,67 @@ export function TriggerSave({
         </Alert>
       )}
 
+      {webhookId && hasWebhookUrlDisplay && (
+        <div className='mt-2 space-y-1'>
+          <div className='flex items-center justify-between'>
+            <span className='font-medium text-sm'>Test Webhook URL</span>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={generateTestUrl}
+              disabled={isGeneratingTestUrl || isProcessing}
+              className='h-8 rounded-[8px]'
+            >
+              {isGeneratingTestUrl ? (
+                <>
+                  <div className='mr-2 h-3 w-3 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
+                  Generating…
+                </>
+              ) : testUrl ? (
+                'Regenerate'
+              ) : (
+                'Generate'
+              )}
+            </Button>
+          </div>
+          {testUrl ? (
+            <div className='flex items-center gap-2'>
+              <Input
+                readOnly
+                value={testUrl}
+                className='h-9 flex-1 rounded-[8px] font-mono text-xs'
+                onClick={(e: React.MouseEvent<HTMLInputElement>) =>
+                  (e.target as HTMLInputElement).select()
+                }
+              />
+              <Button
+                type='button'
+                size='icon'
+                variant='outline'
+                className='h-9 w-9 rounded-[8px]'
+                onClick={() => copyToClipboard(testUrl, 'testUrl')}
+              >
+                {copied === 'testUrl' ? (
+                  <Check className='h-4 w-4 text-green-500' />
+                ) : (
+                  <Copy className='h-4 w-4' />
+                )}
+              </Button>
+            </div>
+          ) : (
+            <p className='text-muted-foreground text-xs'>
+              Generate a temporary URL that executes this webhook against the live (un-deployed)
+              workflow state.
+            </p>
+          )}
+          {testUrlExpiresAt && (
+            <p className='text-muted-foreground text-xs'>
+              Expires at {new Date(testUrlExpiresAt).toLocaleString()}
+            </p>
+          )}
+        </div>
+      )}
+
       <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
         <AlertDialogContent>
           <AlertDialogHeader>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -230,8 +230,7 @@ export const WorkflowBlock = memo(
 
     // Check if this is a starter block or trigger block
     const isStarterBlock = type === 'starter'
-    const isTriggerBlock = config.category === 'triggers'
-    const isWebhookTriggerBlock = type === 'webhook'
+    const isWebhookTriggerBlock = type === 'webhook' || type === 'generic_webhook'
 
     const reactivateSchedule = async (scheduleId: string) => {
       try {

apps/sim/app/workspace/[workspaceId]/w/components/search-modal/search-modal.tsx

@@ -19,6 +19,7 @@ import { Dialog, DialogOverlay, DialogPortal, DialogTitle } from '@/components/u
 import { Input } from '@/components/ui/input'
 import { useBrandConfig } from '@/lib/branding/branding'
 import { cn } from '@/lib/utils'
+import { getTriggersForSidebar, hasTriggerCapability } from '@/lib/workflows/trigger-utils'
 import { getKeyboardShortcutText } from '@/app/workspace/[workspaceId]/w/hooks/use-keyboard-shortcuts'
 import { getAllBlocks } from '@/blocks'
 import { type NavigationSection, useSearchNavigation } from './hooks/use-search-navigation'
@@ -54,6 +55,7 @@ interface BlockItem {
   icon: React.ComponentType<any>
   bgColor: string
   type: string
+  config?: any // Store block config to check trigger capability
 }
 
 interface ToolItem {
@@ -147,16 +149,13 @@ export function SearchModal({
     return [...regularBlocks, ...specialBlocks].sort((a, b) => a.name.localeCompare(b.name))
   }, [isOnWorkflowPage])
 
-  // Get all available triggers - only when on workflow page
   const triggers = useMemo(() => {
     if (!isOnWorkflowPage) return []
 
-    const allBlocks = getAllBlocks()
-    return allBlocks
-      .filter(
-        (block) =>
-          block.type !== 'starter' && !block.hideFromToolbar && block.category === 'triggers'
-      )
+    const triggerBlocks = getTriggersForSidebar()
+
+    return triggerBlocks
+      .filter((block) => block.type !== 'webhook') // Exclude old webhook block - use generic_webhook instead
       .map(
         (block): BlockItem => ({
           id: block.type,
@@ -166,6 +165,7 @@ export function SearchModal({
           icon: block.icon,
           bgColor: block.bgColor || '#6B7280',
           type: block.type,
+          config: block, // Store config to check trigger capability
         })
       )
       .sort((a, b) => a.name.localeCompare(b.name))
@@ -371,11 +371,12 @@ export function SearchModal({
 
   // Handle block/tool click (same as toolbar interaction)
   const handleBlockClick = useCallback(
-    (blockType: string) => {
+    (blockType: string, enableTriggerMode?: boolean) => {
       // Dispatch a custom event to be caught by the workflow component
       const event = new CustomEvent('add-block-from-toolbar', {
         detail: {
           type: blockType,
+          enableTriggerMode: enableTriggerMode || false,
         },
       })
       window.dispatchEvent(event)
@@ -475,7 +476,9 @@ export function SearchModal({
     const { section, item } = current
 
     if (section.id === 'blocks' || section.id === 'triggers' || section.id === 'tools') {
-      handleBlockClick(item.type)
+      const enableTriggerMode =
+        section.id === 'triggers' && item.config ? hasTriggerCapability(item.config) : false
+      handleBlockClick(item.type, enableTriggerMode)
     } else if (section.id === 'list') {
       switch (item.type) {
         case 'workspace':
@@ -652,7 +655,12 @@ export function SearchModal({
                     {filteredTriggers.map((trigger, index) => (
                       <button
                         key={trigger.id}
-                        onClick={() => handleBlockClick(trigger.type)}
+                        onClick={() =>
+                          handleBlockClick(
+                            trigger.type,
+                            trigger.config ? hasTriggerCapability(trigger.config) : false
+                          )
+                        }
                         data-nav-item={`triggers-${index}`}
                         className={`flex h-auto w-[180px] flex-shrink-0 cursor-pointer flex-col items-start gap-2 rounded-[8px] border p-3 transition-all duration-200 ${
                           isItemSelected('triggers', index)

apps/sim/blocks/blocks/generic_webhook.ts

@@ -19,19 +19,7 @@ export const GenericWebhookBlock: BlockConfig = {
   - Continuing example above, the body can be accessed in downstream block using dot notation. E.g. <webhook1.message> and <webhook1.data.key>
   - Only use when there's no existing integration for the service with triggerAllowed flag set to true.
   `,
-  subBlocks: [
-    // Generic webhook configuration - always visible
-    ...getTrigger('generic_webhook').subBlocks,
-    // Optional input format for structured data including files
-    {
-      id: 'inputFormat',
-      title: 'Input Format',
-      type: 'input-format',
-      layout: 'full',
-      description:
-        'Define the expected JSON input schema for this webhook (optional). Use type "files" for file uploads.',
-    },
-  ],
+  subBlocks: [...getTrigger('generic_webhook').subBlocks],
 
   tools: {
     access: [], // No external tools needed for triggers