feat[webhook]: added github webhook (#136)

sim/app/blocks/blocks/starter.ts

@@ -40,7 +40,7 @@ export const StarterBlock: BlockConfig<StarterBlockOutput> = {
       options: [
         { label: 'Generic', id: 'generic' },
         { label: 'WhatsApp', id: 'whatsapp' },
-        // { label: 'GitHub', id: 'github' },
+        { label: 'GitHub', id: 'github' },
         // { label: 'Stripe', id: 'stripe' },
       ],
       value: () => 'generic',

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/providers/github-config.tsx

@@ -1,10 +1,21 @@
-import { Loader2 } from 'lucide-react'
-import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { CopyableField } from '../ui/copyable'
+import { TestResultDisplay } from '../ui/test-result'
 
 interface GithubConfigProps {
   contentType: string
   setContentType: (contentType: string) => void
+  webhookSecret: string
+  setWebhookSecret: (secret: string) => void
+  sslVerification: string
+  setSslVerification: (value: string) => void
   isLoadingToken: boolean
   testResult: {
     success: boolean
@@ -13,50 +24,122 @@ interface GithubConfigProps {
   } | null
   copied: string | null
   copyToClipboard: (text: string, type: string) => void
+  testWebhook: () => Promise<void>
 }
 
 export function GithubConfig({
   contentType,
   setContentType,
+  webhookSecret,
+  setWebhookSecret,
+  sslVerification,
+  setSslVerification,
   isLoadingToken,
   testResult,
+  copied,
+  copyToClipboard,
 }: GithubConfigProps) {
   return (
     <div className="space-y-4">
       <div className="space-y-2">
         <Label htmlFor="github-content-type">Content Type</Label>
-        {isLoadingToken ? (
-          <div className="h-10 px-3 py-2 rounded-md border border-input bg-background flex items-center">
-            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-          </div>
-        ) : (
-          <Input
-            id="github-content-type"
-            value={contentType}
-            onChange={(e) => setContentType(e.target.value)}
-            placeholder="application/json"
-            className="flex-1"
-          />
-        )}
+        <Select value={contentType} onValueChange={setContentType}>
+          <SelectTrigger id="github-content-type">
+            <SelectValue placeholder="Select content type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="application/json">application/json</SelectItem>
+            <SelectItem value="application/x-www-form-urlencoded">
+              application/x-www-form-urlencoded
+            </SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          Format GitHub will use when sending the webhook payload.
+        </p>
       </div>
 
+      <CopyableField
+        id="webhook-secret"
+        label="Webhook Secret (Optional but Recommended)"
+        value={webhookSecret}
+        onChange={setWebhookSecret}
+        placeholder="Enter a secret for GitHub webhook"
+        description="A secret token to validate that webhook deliveries are coming from GitHub."
+        isLoading={isLoadingToken}
+        copied={copied}
+        copyType="github-secret"
+        copyToClipboard={copyToClipboard}
+      />
+
+      <div className="space-y-2">
+        <Label htmlFor="github-ssl-verification">SSL Verification</Label>
+        <Select value={sslVerification} onValueChange={setSslVerification}>
+          <SelectTrigger id="github-ssl-verification">
+            <SelectValue placeholder="Select SSL verification option" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="enabled">Enabled (Recommended)</SelectItem>
+            <SelectItem value="disabled">Disabled (Not recommended)</SelectItem>
+          </SelectContent>
+        </Select>
+        <p className="text-xs text-muted-foreground">
+          GitHub will verify SSL certificates when delivering webhooks.
+        </p>
+      </div>
+
+      <TestResultDisplay
+        testResult={testResult}
+        copied={copied}
+        copyToClipboard={copyToClipboard}
+        showCurlCommand={true}
+      />
+
       <div className="space-y-2">
         <h4 className="font-medium">Setup Instructions</h4>
         <ol className="list-decimal list-inside space-y-1 text-sm">
           <li>Go to your GitHub repository</li>
           <li>Navigate to Settings {'>'} Webhooks</li>
           <li>Click "Add webhook"</li>
-          <li>Enter the Webhook URL shown above</li>
+          <li>Enter the Webhook URL shown above as the "Payload URL"</li>
           <li>Set Content type to "{contentType}"</li>
-          <li>Choose which events you want to trigger the webhook</li>
-          <li>Ensure "Active" is checked and save</li>
+          {webhookSecret && (
+            <li>Enter the same secret shown above in the "Secret" field for validation</li>
+          )}
+          <li>Choose SSL verification</li>
+          <li>
+            Choose which events trigger the webhook (e.g., "Just the push event" or "Send me
+            everything")
+          </li>
+          <li>Ensure "Active" is checked and click "Add webhook"</li>
         </ol>
       </div>
 
+      <div className="bg-blue-50 dark:bg-blue-950 p-3 rounded-md mt-3 border border-blue-200 dark:border-blue-800">
+        <h5 className="text-sm font-medium text-blue-800 dark:text-blue-300">
+          Security Best Practices
+        </h5>
+        <ul className="mt-1 space-y-1">
+          <li className="flex items-start">
+            <span className="text-blue-500 dark:text-blue-400 mr-2">•</span>
+            <span className="text-sm text-blue-700 dark:text-blue-300">
+              Always use a secret token to validate requests from GitHub
+            </span>
+          </li>
+          <li className="flex items-start">
+            <span className="text-blue-500 dark:text-blue-400 mr-2">•</span>
+            <span className="text-sm text-blue-700 dark:text-blue-300">
+              Keep SSL verification enabled unless you have a specific reason to disable it
+            </span>
+          </li>
+        </ul>
+      </div>
+
       <div className="bg-gray-50 dark:bg-gray-800 p-3 rounded-md mt-3 border border-gray-200 dark:border-gray-700">
         <p className="text-sm text-gray-700 dark:text-gray-300 flex items-center">
           <span className="text-gray-400 dark:text-gray-500 mr-2">💡</span>
-          After saving, GitHub will send a ping event to verify your webhook.
+          After saving, GitHub will send a ping event to verify your webhook. You can view delivery
+          details and redeliver events from the webhook settings.
         </p>
       </div>
     </div>

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/copyable.tsx

@@ -33,7 +33,7 @@ export function CopyableField({
   return (
     <div className="space-y-2">
       <Label htmlFor={id}>{label}</Label>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center space-x-2 pr-1">
         {isLoading ? (
           <div className="flex-1 h-10 px-3 py-2 rounded-md border border-input bg-background flex items-center">
             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
@@ -54,6 +54,7 @@ export function CopyableField({
           size="icon"
           onClick={() => copyToClipboard(value, copyType)}
           disabled={isLoading || !value}
+          className="ml-1"
         >
           {copied === copyType ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
         </Button>

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/webhook-footer.tsx

@@ -31,7 +31,7 @@ export function WebhookDialogFooter({
     webhookId && (webhookProvider === 'whatsapp' || webhookProvider === 'generic') && onTest
 
   return (
-    <DialogFooter className="flex justify-between mt-6 sticky bottom-0 py-3 bg-background border-t z-10">
+    <DialogFooter className="flex justify-between sticky bottom-0 py-3 bg-background border-t z-10 mt-auto w-full">
       <div>
         {webhookId && (
           <div className="flex space-x-3">

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/webhook-header.tsx

@@ -13,7 +13,8 @@ export function WebhookDialogHeader({ webhookProvider, webhookId }: WebhookDialo
   // Get provider icon
   const getProviderIcon = () => {
     return provider.icon({
-      className: 'h-5 w-5 text-green-500 dark:text-green-400',
+      className:
+        webhookProvider === 'github' ? 'h-5 w-5' : 'h-5 w-5 text-green-500 dark:text-green-400',
     })
   }
 

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/ui/webhook-url.tsx

@@ -19,7 +19,7 @@ export function WebhookUrlField({
   return (
     <div className="space-y-2">
       <Label htmlFor="webhook-url">Webhook URL</Label>
-      <div className="flex items-center space-x-2">
+      <div className="flex items-center space-x-2 pr-1">
         {isLoadingToken ? (
           <div className="flex-1 h-10 px-3 py-2 rounded-md border border-input bg-background flex items-center">
             <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
@@ -33,6 +33,7 @@ export function WebhookUrlField({
           size="icon"
           onClick={() => copyToClipboard(webhookUrl, 'url')}
           disabled={isLoadingToken}
+          className="ml-1"
         >
           {copied === 'url' ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
         </Button>

sim/app/w/[id]/components/workflow-block/components/sub-block/components/webhook/components/webhook-modal.tsx

@@ -374,10 +374,15 @@ export function WebhookModal({
           <GithubConfig
             contentType={githubContentType}
             setContentType={setGithubContentType}
+            webhookSecret={generalToken}
+            setWebhookSecret={setGeneralToken}
+            sslVerification={requireAuth ? 'enabled' : 'disabled'}
+            setSslVerification={(value) => setRequireAuth(value === 'enabled')}
             isLoadingToken={isLoadingToken}
             testResult={testResult}
             copied={copied}
             copyToClipboard={copyToClipboard}
+            testWebhook={testWebhook}
           />
         )
       case 'stripe':
@@ -414,10 +419,10 @@ export function WebhookModal({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={handleClose}>
-        <DialogContent className="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[675px] max-h-[90vh] overflow-hidden flex flex-col">
           <WebhookDialogHeader webhookProvider={webhookProvider} webhookId={webhookId} />
 
-          <div className="space-y-4 py-2">
+          <div className="space-y-4 py-2 px-2 overflow-y-auto flex-grow pb-6">
             <WebhookUrlField
               webhookUrl={webhookUrl}
               isLoadingToken={isLoadingToken}