Edge functions empty state (supabase#33802)

* page components * page component changes * settings but broken saving * rvert * use sheet for provider * styling * remove things * Some refactoring and fixing, added JSDocs to layouts * Smol refactor * Fix * Update JSDocs * updated scaffolding * update edge functions layout * remove params * Clean up * Spelling * Clean up FormFieldWrappers * One last clean up * create edge functon * use component * flag * fix merge errors * fix imports * fix merge issues * fix import * fix flag * remove unused * simple empty * empty state improvements * move templates * re-add flag * use templates * flag * copy functions * feature flag it * Fix issues and clean up * Smol fix * Add comment --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

Author: SaxonF

apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.tsx

@@ -52,7 +52,7 @@ const FormSchema = z.object({
  verify_jwt: z.boolean(),
 })
 
-const EdgeFunctionDetails = () => {
+export const EdgeFunctionDetails = () => {
  const router = useRouter()
  const { ref: projectRef, functionSlug } = useParams()
  const [showDeleteModal, setShowDeleteModal] = useState(false)
@@ -365,5 +365,3 @@ const EdgeFunctionDetails = () => {
  </div>
  )
 }
-
-export default EdgeFunctionDetails

apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx

@@ -14,7 +14,7 @@ interface EdgeFunctionsListItemProps {
  function: EdgeFunctionsResponse
 }
 
-const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) => {
+export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) => {
  const router = useRouter()
  const { ref } = useParams()
  const { project } = useProjectContext()
@@ -46,7 +46,9 @@ const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) =
  </Table.td>
  <Table.td>
  <div className="text-xs text-foreground-light flex gap-2 items-center truncate">
- <p className="font-mono truncate hidden md:inline">{endpoint}</p>
+ <p title={endpoint} className="font-mono truncate hidden md:inline max-w-[30rem]">
+ {endpoint}
+ </p>
  <button
  type="button"
  className="text-foreground-lighter hover:text-foreground transition"
@@ -99,5 +101,3 @@ const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemProps) =
  </Table.tr>
  )
 }
-
-export default EdgeFunctionsListItem

apps/studio/components/interfaces/Functions/Functions.templates.ts

@@ -52,6 +52,37 @@ Deno.serve(async (req) => {
  } catch (err) {
  return new Response(String(err?.message ?? err), { status: 500 })
  }
+})`,
+ },
+ {
+ value: 'storage-upload',
+ name: 'Supabase Storage Upload',
+ description: 'Upload files to Supabase Storage',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import { createClient } from 'jsr:@supabase/supabase-js@2'
+
+const supabase = createClient(
+ Deno.env.get('SUPABASE_URL') ?? '',
+ Deno.env.get('SUPABASE_ANON_KEY') ?? ''
+)
+
+Deno.serve(async (req) => {
+ const formData = await req.formData()
+ const file = formData.get('file')
+ const { data, error } = await supabase
+ .storage
+ .from('your-bucket')
+ .upload(
+ \`files/\${crypto.randomUUID()}\`,
+ file,
+ { contentType: file.type }
+ )
+ if (error) throw error
+ return new Response(
+ JSON.stringify({ data }),
+ { headers: { 'Content-Type': 'application/json' }}
+ )
 })`,
  },
  {
@@ -95,4 +126,177 @@ app.get(/(.*)/, (req, res) => {
 
 app.listen(8000);`,
  },
+ {
+ value: 'openai-completion',
+ name: 'OpenAI Text Completion',
+ description: 'Generate text completions using OpenAI GPT-3',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import { Configuration, OpenAIApi } from 'npm:openai@3.3.0'
+
+const openAi = new OpenAIApi(
+ new Configuration({
+ apiKey: Deno.env.get('OPENAI_API_KEY')
+ })
+)
+
+Deno.serve(async (req) => {
+ const { prompt } = await req.json()
+ const completion = await openAi.createCompletion({
+ model: 'text-davinci-003',
+ prompt,
+ max_tokens: 200
+ })
+ return new Response(
+ JSON.stringify({ text: completion.data.choices[0].text }),
+ { headers: { 'Content-Type': 'application/json' }}
+ )
+})`,
+ },
+ {
+ value: 'stripe-webhook',
+ name: 'Stripe Webhook Example',
+ description: 'Handle Stripe webhook events securely',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import Stripe from 'npm:stripe@12.0.0'
+
+const stripe = new Stripe(Deno.env.get('STRIPE_API_KEY')!)
+const endpointSecret = Deno.env.get('STRIPE_WEBHOOK_SIGNING_SECRET')!
+
+Deno.serve(async (req) => {
+ const signature = req.headers.get('stripe-signature')
+ try {
+ const event = stripe.webhooks.constructEvent(
+ await req.text(),
+ signature!,
+ endpointSecret
+ )
+ switch (event.type) {
+ case 'payment_intent.succeeded':
+ // Handle successful payment
+ break
+ }
+ return new Response(JSON.stringify({ received: true }), {
+ headers: { 'Content-Type': 'application/json' },
+ })
+ } catch (err) {
+ return new Response(
+ JSON.stringify({ error: err.message }), 
+ { status: 400 }
+ )
+ }
+})`,
+ },
+ {
+ value: 'resend-email',
+ name: 'Send Emails',
+ description: 'Send emails using the Resend API',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+
+const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY')!
+
+Deno.serve(async (req) => {
+ const { to, subject, html } = await req.json()
+ const res = await fetch('https://api.resend.com/emails', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: \`Bearer \${RESEND_API_KEY}\`,
+ },
+ body: JSON.stringify({
+ from: 'you@example.com',
+ to,
+ subject,
+ html,
+ }),
+ })
+ const data = await res.json()
+ return new Response(JSON.stringify(data), {
+ headers: { 'Content-Type': 'application/json' },
+ })
+})`,
+ },
+ {
+ value: 'image-transform',
+ name: 'Image Transformation',
+ description: 'Transform images using ImageMagick WASM',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import {
+ ImageMagick,
+ initializeImageMagick,
+} from "npm:@imagemagick/magick-wasm@0.0.30"
+
+await initializeImageMagick()
+
+Deno.serve(async (req) => {
+ const formData = await req.formData()
+ const file = formData.get('file')
+ const content = await file.arrayBuffer()
+ const result = await ImageMagick.read(new Uint8Array(content), (img) => {
+ img.resize(500, 300)
+ img.blur(60, 5)
+ return img.write(data => data)
+ })
+ return new Response(
+ result,
+ { headers: { 'Content-Type': 'image/png' }}
+ )
+})`,
+ },
+ {
+ value: 'discord-bot',
+ name: 'Discord Bot Example',
+ description: 'Build a Slash Command Discord Bot',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+import { verifyDiscordRequest } from './_shared/discord.ts'
+
+Deno.serve(async (req) => {
+ const { valid } = await verifyDiscordRequest(req)
+ if (!valid) {
+ return new Response('Invalid request', { status: 401 })
+ }
+ const message = await req.json()
+ if (message.type === 1) {
+ return new Response(
+ JSON.stringify({ type: 1 }),
+ { headers: { 'Content-Type': 'application/json' }}
+ )
+ }
+ return new Response(
+ JSON.stringify({
+ type: 4,
+ data: { content: 'Hello from Supabase Edge Functions!' }
+ }),
+ { headers: { 'Content-Type': 'application/json' }}
+ )
+})`,
+ },
+ {
+ value: 'websocket-server',
+ name: 'Websocket Server Example',
+ description: 'Create a real-time WebSocket server',
+ content: `// Setup type definitions for built-in Supabase Runtime APIs
+import "jsr:@supabase/functions-js/edge-runtime.d.ts";
+
+Deno.serve((req) => {
+ const upgrade = req.headers.get("upgrade") || ""
+ if (upgrade.toLowerCase() != "websocket") {
+ return new Response("request isn't trying to upgrade to websocket.")
+ }
+ const { socket, response } = Deno.upgradeWebSocket(req)
+ socket.onopen = () => {
+ console.log("client connected!")
+ socket.send('Welcome to Supabase Edge Functions!')
+ }
+ socket.onmessage = (e) => {
+ console.log("client sent message:", e.data)
+ socket.send(new Date().toString())
+ }
+ return response
+})`,
+ },
 ]