mirror of
https://github.com/supabase/supabase.git
synced 2026-05-22 17:00:43 +08:00
f7bf7d7ce4
Feature / Refactor ## What is the current behavior? Data API docs live at the `/api` route as a standalone page. Old links point to the previous location. ## What is the new behavior? Data API docs are moved to the integrations section with a dedicated docs tab and settings tab. Old links are cleaned up, a mobile menu is added for data API docs navigation, and minor code review fixes are applied. ## Additional context Resolves FE-2517 ## Summary by CodeRabbit * **New Features** * Revamped API docs UI with reusable section layout, language toggle (JS/Bash), API key selection, and improved code snippets * Added Data API docs tab, mobile navigation, and dedicated loading/error/disabled states * **Navigation Updates** * Moved API docs and related links into the Integrations/Data API area and added redirects to new routes * Updated various internal links to the new Data API settings and overview locations * **Tests** * Added comprehensive unit tests for Data API utilities
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
import { useParams } from 'common'
|
|
|
|
import CodeSnippet from './CodeSnippet'
|
|
import { DocSection } from './DocSection'
|
|
import PublicSchemaNotEnabledAlert from './PublicSchemaNotEnabledAlert'
|
|
import Snippets from '@/components/interfaces/Docs/Snippets'
|
|
import { InlineLink } from '@/components/ui/InlineLink'
|
|
import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
|
|
import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
|
|
|
|
interface Props {
|
|
selectedLang: 'bash' | 'js'
|
|
}
|
|
|
|
export default function Introduction({ selectedLang }: Props) {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
const { data: settings } = useProjectSettingsV2Query({ projectRef })
|
|
const { data: config, isSuccess } = useProjectPostgrestConfigQuery({ projectRef })
|
|
|
|
const protocol = settings?.app_config?.protocol ?? 'https'
|
|
const hostEndpoint = settings?.app_config?.endpoint
|
|
const endpoint = `${protocol}://${hostEndpoint ?? ''}`
|
|
|
|
const isPublicSchemaEnabled = config?.db_schema
|
|
.split(',')
|
|
.map((name) => name.trim())
|
|
.includes('public')
|
|
|
|
return (
|
|
<DocSection
|
|
title="Connect to your project"
|
|
content={
|
|
<>
|
|
<p>
|
|
All projects have a RESTful endpoint that you can use with your project's API key to
|
|
query and manage your database. These can be obtained from the{' '}
|
|
<InlineLink href={`/project/${projectRef}/integrations/data_api/overview`}>
|
|
API settings
|
|
</InlineLink>
|
|
.
|
|
</p>
|
|
<p>
|
|
You can initialize a new Supabase client using the <code>createClient()</code> method.
|
|
The Supabase client is your entrypoint to the rest of the Supabase functionality and is
|
|
the easiest way to interact with everything we offer within the Supabase ecosystem.
|
|
</p>
|
|
</>
|
|
}
|
|
snippets={
|
|
<>
|
|
<CodeSnippet selectedLang={selectedLang} snippet={Snippets.init(endpoint)} />
|
|
{isSuccess && !isPublicSchemaEnabled && <PublicSchemaNotEnabledAlert />}
|
|
</>
|
|
}
|
|
/>
|
|
)
|
|
}
|