mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
Joshen Lim
90d3b56db0
## Context Main fix is to adjust the new home page + connect dialog (and connect sheet) to render the project's custom domain if available <img width="471" height="255" alt="image" src="https://github.com/user-attachments/assets/3a208b2e-bdeb-43f5-a2e7-3495881dbaaa" /> <img width="1065" height="233" alt="image" src="https://github.com/user-attachments/assets/2a7b8f81-8c0b-4803-bf0a-fc16a2f1e0e1" /> ## Changes involved - Created a `useProjectApiUrl` hook that will return the API URL depending if custom domains is available, otherwise default to default project API URL - Refactored all the other places that were manually deriving the project's endpoint - Storage Explorer -> copy URL - Edge Functions - Integrations -> Data API + API Docs - Auth Providers -> Callback URL - Also updated the copy CTA for the addons page - Instead of just "Change xxx", make it a bit more actionable - For add ons with binary states (Custom domains, IPv4) - If not enabled yet, "Enable xxx", otherwise "Toggle xxx" - For PITR - If not enabled yet, "Enable PITR", otherwise "Change recovery duration" - Also added "Edit custom domain" CTA if enabled <img width="1144" height="518" alt="image" src="https://github.com/user-attachments/assets/4f152ea5-0cc7-412c-95e8-ad5bb37c19c3" /> ## To test - [ ] Verify that for a project with custom domain set up, all the affected UI mentioned in the above section look correct
77 lines
2.5 KiB
TypeScript
77 lines
2.5 KiB
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { useParams } from 'common'
|
|
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
|
import { AlertCircle, ExternalLink, Loader2 } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import type { ReactNode } from 'react'
|
|
import { Button } from 'ui'
|
|
import { Input } from 'ui-patterns/DataInputs/Input'
|
|
|
|
import type { projectKeys } from './Connect.types'
|
|
|
|
function KeyRow({ label, value }: { label: ReactNode; value: string }) {
|
|
return (
|
|
<div className="flex flex-col gap-5 lg:grid lg:grid-cols-12">
|
|
<div className="col-span-4">
|
|
<h3 className="text-sm text-foreground">{label}</h3>
|
|
</div>
|
|
<div className="col-span-8">
|
|
<Input readOnly copy className="font-mono" value={value} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function ApiKeysTabContent({ projectKeys }: { projectKeys: projectKeys }) {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
const { isLoading: isLoadingPermissions, can: canReadAPIKeys } = useAsyncCheckPermissions(
|
|
PermissionAction.SECRETS_READ,
|
|
'*'
|
|
)
|
|
|
|
if (isLoadingPermissions) {
|
|
return (
|
|
<div className="flex items-center justify-center py-8 space-x-2">
|
|
<Loader2 className="animate-spin" size={16} strokeWidth={1.5} />
|
|
<p className="text-sm text-foreground-light">Retrieving API keys</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!canReadAPIKeys) {
|
|
return (
|
|
<div className="flex items-center py-8 space-x-2">
|
|
<AlertCircle size={16} strokeWidth={1.5} />
|
|
<p className="text-sm text-foreground-light">You don't have permission to view API keys.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<KeyRow label="Project URL" value={projectKeys.apiUrl ?? ''} />
|
|
|
|
<KeyRow label="Publishable Key" value={projectKeys.publishableKey ?? ''} />
|
|
|
|
<KeyRow
|
|
label={
|
|
<>
|
|
Anon Key <span className="text-foreground-lighter font-normal">(Legacy)</span>
|
|
</>
|
|
}
|
|
value={projectKeys.anonKey ?? ''}
|
|
/>
|
|
|
|
<div className="gap-5 lg:grid lg:grid-cols-12">
|
|
<div className="col-start-5 col-span-8 pl-2 flex items-center justify-between">
|
|
<p className="text-xs text-foreground-lighter">For secret keys, see API settings.</p>
|
|
<Button asChild type="default" icon={<ExternalLink size={14} />}>
|
|
<Link href={`/project/${projectRef}/settings/api-keys`}>API settings</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|