Files
supabase/apps/studio/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails.utils.tsx
T
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564)
## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-22 16:19:03 +10:00

120 lines
3.3 KiB
TypeScript

import { getAnchor } from 'ui'
import { EdgeFunction } from '@/data/edge-functions/edge-function-query'
import { DOCS_URL } from '@/lib/constants'
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-primary">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-primary">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-primary">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-primary">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-primary">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-primary">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 }
}
export const getEdgeFunctionErrorDocs = (headers: Record<string, string | string[]>) => {
const header = Object.entries(headers).find(
([name]) => name.toLowerCase() === 'sb-error-code'
)?.[1]
const code = (Array.isArray(header) ? header[0] : header)?.trim()
const anchor = code ? getAnchor(code) : undefined
if (!code || !anchor) return undefined
return {
code,
href: `${DOCS_URL}/guides/functions/error-codes#${anchor}`,
}
}