Files
supabase/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
Joshen Lim c3f7318dbc Couple of minor UI nudges in edge functions UI (#44123)
## Context

Just a couple of minor UI nudges as I came across on the edge functions
page

- Added TimestampInfo for hover card + used `text-sm` for font size +
reduce width to match content size
  - Before:
<img width="393" height="271" alt="image"
src="https://github.com/user-attachments/assets/3db351fd-80e8-47a9-b4e9-dff8613163ad"
/>
  - After:
<img width="461" height="233" alt="image"
src="https://github.com/user-attachments/assets/d4ac9edb-58fc-4820-b04f-c7753baf9ef5"
/>

- Use `text-code-inline` in here + avoid `text-brand` in text (use
`text-foreground`) + added some spacing between the 2 sentences
  - Before:
<img width="707" height="153" alt="image"
src="https://github.com/user-attachments/assets/7d6b3acc-8bc6-454b-92ed-ab43227a9e07"
/>
  - After:
<img width="710" height="169" alt="image"
src="https://github.com/user-attachments/assets/b00fbf07-a6a3-4476-b417-d02225f02ce9"
/>

- Invoke code snippet adjust copy button placement + opt to not wrap
lines (was awkward esp when there's no line numbers)
  - Before:
<img width="730" height="278" alt="image"
src="https://github.com/user-attachments/assets/d3c646d9-c893-44cc-8c25-86fc0ddac050"
/>
  - After:
<img width="725" height="223" alt="image"
src="https://github.com/user-attachments/assets/f75c0a28-04e3-48c5-903f-25e9bbe2d879"
/>

- Use `text-brand` consistently here instead of `text-brand-600`
  - Before:
<img width="732" height="315" alt="image"
src="https://github.com/user-attachments/assets/48cdf54f-43e1-44ef-b09b-66d6db351a5b"
/>
  - After:
<img width="736" height="322" alt="image"
src="https://github.com/user-attachments/assets/3f176ccc-ec35-4abb-8491-d9a498933a26"
/>
2026-03-24 19:17:31 +08:00

102 lines
2.8 KiB
TypeScript

import { EdgeFunction } from 'data/edge-functions/edge-function-query'
export const generateCLICommands = ({
selectedFunction,
functionUrl,
anonKey,
}: {
selectedFunction?: EdgeFunction
functionUrl: string
anonKey: string
}) => {
const managementCommands: any = [
{
command: `supabase functions deploy ${selectedFunction?.slug}`,
description: 'This will overwrite the deployed function with your new function',
jsx: () => {
return (
<>
<span className="text-brand">supabase</span> functions deploy {selectedFunction?.slug}
</>
)
},
comment: 'Deploy a new version',
},
{
command: `supabase functions delete ${selectedFunction?.slug}`,
description: 'This will remove the function and all the logs associated with it',
jsx: () => {
return (
<>
<span className="text-brand">supabase</span> functions delete {selectedFunction?.slug}
</>
)
},
comment: 'Delete the function',
},
]
const secretCommands: any = [
{
command: `supabase secrets list`,
description: 'This will list all the secrets for your project',
jsx: () => {
return (
<>
<span className="text-brand">supabase</span> secrets list
</>
)
},
comment: 'View all secrets',
},
{
command: `supabase secrets set NAME1=VALUE1 NAME2=VALUE2`,
description: 'This will set secrets for your project',
jsx: () => {
return (
<>
<span className="text-brand">supabase</span> secrets set NAME1=VALUE1 NAME2=VALUE2
</>
)
},
comment: 'Set secrets for your project',
},
{
command: `supabase secrets unset NAME1 NAME2 `,
description: 'This will delete secrets for your project',
jsx: () => {
return (
<>
<span className="text-brand">supabase</span> secrets unset NAME1 NAME2
</>
)
},
comment: 'Unset secrets for your project',
},
]
const invokeCommands: any = [
{
command: `curl -L -X POST '${functionUrl}' -H 'Authorization: Bearer ${
anonKey ?? '[YOUR ANON KEY]'
}' --data '{"name":"Functions"}'`,
description: 'Invokes the hello function',
jsx: () => {
return (
<>
<span className="text-brand">curl</span> -L -X POST '{functionUrl}'{' '}
{selectedFunction?.verify_jwt
? `-H
'Authorization: Bearer [YOUR ANON KEY]' `
: ''}
{`--data '{"name":"Functions"}'`}
</>
)
},
comment: 'Invoke your function',
},
]
return { managementCommands, secretCommands, invokeCommands }
}