Chore/webhook json (supabase#30797)

* Enforce json payloads with webhook jobs

* EFs need json as well

* Handle case where the body can be null/undefined.

* Fix url in the child id.

* Fix a redirect for cron.

---------

Co-authored-by: Ivan Vasilov <[email protected]>

Author: saltcod

apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx

@@ -63,7 +63,19 @@ const edgeFunctionSchema = z.object({
   edgeFunctionName: z.string().trim().min(1, 'Please select one of the listed Edge Functions'),
   timeoutMs: z.coerce.number().int().gte(1000).lte(5000).default(1000),
   httpHeaders: z.array(z.object({ name: z.string(), value: z.string() })),
-  httpBody: z.string().trim(),
+  httpBody: z
+    .string()
+    .trim()
+    .optional()
+    .refine((value) => {
+      if (!value) return true
+      try {
+        JSON.parse(value)
+        return true
+      } catch {
+        return false
+      }
+    }, 'Input must be valid JSON'),
 })
 
 const httpRequestSchema = z.object({
@@ -77,7 +89,19 @@ const httpRequestSchema = z.object({
     .refine((value) => value.startsWith('http'), 'Please include HTTP/HTTPs to your URL'),
   timeoutMs: z.coerce.number().int().gte(1000).lte(5000).default(1000),
   httpHeaders: z.array(z.object({ name: z.string(), value: z.string() })),
-  httpBody: z.string().trim(),
+  httpBody: z
+    .string()
+    .trim()
+    .optional()
+    .refine((value) => {
+      if (!value) return true
+      try {
+        JSON.parse(value)
+        return true
+      } catch {
+        return false
+      }
+    }, 'Input must be valid JSON'),
 })
 
 const sqlFunctionSchema = z.object({

apps/studio/components/interfaces/Integrations/CronJobs/CronJobCard.tsx

@@ -69,9 +69,7 @@ export const CronJobCard = ({ job, onEditCronJob, onDeleteCronJob }: CronJobCard
                 onCheckedChange={() => showToggleConfirmationModal(true)}
               />
               <Button type="default" icon={<History />}>
-                <Link href={`/project/${ref}/integrations/cron/cron-jobs/${job.jobname}`}>
-                  History
-                </Link>
+                <Link href={`/project/${ref}/integrations/cron/jobs/${job.jobname}`}>History</Link>
               </Button>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.ts

@@ -9,7 +9,7 @@ export const buildHttpRequestCommand = (
   method: 'GET' | 'POST',
   url: string,
   headers: HTTPHeader[],
-  body: string,
+  body: string | undefined,
   timeout: number
 ) => {
   return `$$
@@ -20,7 +20,7 @@ export const buildHttpRequestCommand = (
             .filter((v) => v.name && v.value)
             .map((v) => `'${v.name}', '${v.value}'`)
             .join(', ')}),
-          ${method === 'POST' ? `body:='${body}',` : ''}
+          ${method === 'POST' && body ? `body:='${body}',` : ''}
           timeout_milliseconds:=${timeout}
       );
     $$`

apps/studio/components/interfaces/Integrations/CronJobs/HttpBodyFieldSection.tsx

@@ -32,9 +32,6 @@ export const HttpBodyFieldSection = ({ form }: HttpBodyFieldSectionProps) => {
                 onChange={field.onChange}
               />
             </FormControl_Shadcn_>
-            <FormDescription_Shadcn_ className="text-foreground-lighter">
-              The content should match the content-type header.
-            </FormDescription_Shadcn_>
             <FormMessage_Shadcn_ />
           </FormItem_Shadcn_>
         )}

apps/studio/components/layouts/Integrations/tabs.tsx

@@ -96,9 +96,7 @@ export const IntegrationTabs = ({ scroll, isSticky }: IntegrationTabsProps) => {
                       >
                         <NavMenuItem active={true} className="flex items-center gap-2">
                           {tab.childIcon}
-                          <Link href={`/project/${project?.ref}/integrations/${tab.route}`}>
-                            {childId}
-                          </Link>
+                          <Link href={`${tabUrl}/${childId}`}>{childId}</Link>
                         </NavMenuItem>
                       </motion.div>
                     </>

apps/studio/next.config.js

@@ -411,8 +411,8 @@ const nextConfig = {
       },
       {
         permanent: true,
-        source: '/project/:ref/.....',
-        destination: '/project/:ref/integrations/cron-jobs',
+        source: '/project/:ref/database/cron-jobs',
+        destination: '/project/:ref/integrations/cron',
       },
       {
         permanent: true,