diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore index 55ab4a6d45ed4..19731c8f0d6f6 100644 --- a/apps/docs/.gitignore +++ b/apps/docs/.gitignore @@ -30,6 +30,8 @@ public/sitemap.xml # llms.txt (generated) public/llms.txt public/llms/ +# Generated guide markdown files +public/docs/ # Copied examples folder /examples/ diff --git a/apps/docs/DEVELOPERS.md b/apps/docs/DEVELOPERS.md index 2d9f7cb3684da..4413ab845776c 100644 --- a/apps/docs/DEVELOPERS.md +++ b/apps/docs/DEVELOPERS.md @@ -22,6 +22,19 @@ For a complete run-down on how all of our tools work together, see the main DEVE 4. Visit http://localhost:3001/docs in your browser - don't forget to append the `/docs` to the end 5. Your local site should look exactly like [https://supabase.com/docs](https://supabase.com/docs) +## AI friendly documentation + +This project generates Markdown files for each page under `/docs/guides/..` path. + +To test locally, within the `apps/docs` directory: + +1. Run `pnpm build:guides-markdown` +2. Run `pnpm dev` + +This creates Markdown files for all routes under the `public/docs/guides` directory, ignored by Git. + +For production this setup runs as a `prebuild` task to allow Vercel to bundle these files with middleware and functions. + ## Contributing For repo organization and style guide, see the [contributing guide](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md). diff --git a/apps/docs/app/api/guides-md/[...slug]/route.ts b/apps/docs/app/api/guides-md/[...slug]/route.ts new file mode 100644 index 0000000000000..f09a7854f25f7 --- /dev/null +++ b/apps/docs/app/api/guides-md/[...slug]/route.ts @@ -0,0 +1,22 @@ +import { promises as fs } from 'fs' +import path from 'path' +import { NextResponse } from 'next/server' + +export async function GET(_request: Request, { params }: { params: Promise<{ slug: string[] }> }) { + const { slug } = await params + const baseDir = path.join(process.cwd(), 'public/docs/guides') + const filePath = path.join(baseDir, `${slug.join('/')}.md`) + + if (!filePath.startsWith(baseDir + path.sep) && filePath !== baseDir) { + return new NextResponse('Not found', { status: 404 }) + } + + try { + const content = await fs.readFile(filePath, 'utf-8') + return new NextResponse(content, { + headers: { 'Content-Type': 'text/markdown; charset=utf-8' }, + }) + } catch { + return new NextResponse('Not found', { status: 404 }) + } +} diff --git a/apps/docs/app/guides/local-development/cli/config/page.tsx b/apps/docs/app/guides/local-development/cli/config/page.tsx index 9ce99b1da788f..341d800b6f82e 100644 --- a/apps/docs/app/guides/local-development/cli/config/page.tsx +++ b/apps/docs/app/guides/local-development/cli/config/page.tsx @@ -1,7 +1,7 @@ import ReactMarkdown from 'react-markdown' import { CodeBlock } from 'ui' import { Heading } from 'ui/src/components/CustomHTMLElements' -import { type TOCHeader } from '~/components/GuidesTableOfContents' +import { type TOCHeader } from '~/components/GuidesSidebar' import { genGuideMeta } from '~/features/docs/GuidesMdx.utils' import { GuideTemplate, newEditLink } from '~/features/docs/GuidesMdx.template' import type { Parameter } from '~/lib/refGenerator/refTypes' diff --git a/apps/docs/components/GuidesSidebar.tsx b/apps/docs/components/GuidesSidebar.tsx new file mode 100644 index 0000000000000..ee4e8c49b4be2 --- /dev/null +++ b/apps/docs/components/GuidesSidebar.tsx @@ -0,0 +1,134 @@ +'use client' + +import { Check, Copy, ExternalLink } from 'lucide-react' +import { usePathname } from 'next/navigation' +import { useState } from 'react' +import { isFeatureEnabled } from 'common' +import { cn } from 'ui' +import { ExpandableVideo } from 'ui-patterns/ExpandableVideo' +import { Toc, TOCItems, TOCScrollArea } from 'ui-patterns/Toc' +import { Feedback } from '~/components/Feedback' +import { useTocAnchors } from '../features/docs/GuidesMdx.state' + +interface TOCHeader { + id?: string + text: string + link: string + level: number +} + +function AiTools({ className }: { className?: string }) { + const [copied, setCopied] = useState(false) + let url = '' + + // Safe check for server side rendering. + try { + const urlParts = new URL(`${window.location}`) + url = urlParts.origin + urlParts.pathname + } catch (error) {} + + async function copyMarkdown() { + const mdUrl = `${url}.md` + + try { + const res = await fetch(mdUrl) + const text = await res.text() + await navigator.clipboard.writeText(text) + setCopied(true) + setTimeout(() => setCopied(false), 2000) + } catch (error) { + console.error('Failed to copy markdown', error) + } + } + + return ( +
+

+ AI Tools +

+
+ + + + Ask ChatGPT + + + + Ask Claude + +
+
+ ) +} + +const GuidesSidebar = ({ + className, + video, + hideToc, +}: { + className?: string + video?: string + hideToc?: boolean +}) => { + const pathname = usePathname() + const { toc } = useTocAnchors() + const showFeedback = isFeatureEnabled('feedback:docs') + const tocVideoPreview = `https://img.youtube.com/vi/${video}/0.jpg` + + return ( +
+
+ {video && ( +
+ +
+ )} + {showFeedback && ( +
+ +
+ )} +
+ +
+ {!hideToc && toc.length !== 0 && ( + +

+ On this page +

+ + + + + )} +
+
+ ) +} + +export default GuidesSidebar +export { GuidesSidebar } +export type { TOCHeader } diff --git a/apps/docs/components/GuidesTableOfContents.tsx b/apps/docs/components/GuidesTableOfContents.tsx deleted file mode 100644 index ebb1fd4158f1e..0000000000000 --- a/apps/docs/components/GuidesTableOfContents.tsx +++ /dev/null @@ -1,55 +0,0 @@ -'use client' - -import { usePathname } from 'next/navigation' -import { isFeatureEnabled } from 'common' -import { cn } from 'ui' -import { ExpandableVideo } from 'ui-patterns/ExpandableVideo' -import { Toc, TOCItems, TOCScrollArea } from 'ui-patterns/Toc' -import { Feedback } from '~/components/Feedback' -import { useTocAnchors } from '../features/docs/GuidesMdx.state' - -interface TOCHeader { - id?: string - text: string - link: string - level: number -} - -const GuidesTableOfContents = ({ className, video }: { className?: string; video?: string }) => { - const pathname = usePathname() - const { toc } = useTocAnchors() - - const showFeedback = isFeatureEnabled('feedback:docs') - - const tocVideoPreview = `https://img.youtube.com/vi/${video}/0.jpg` - - return ( -
-
- {video && ( -
- -
- )} - {showFeedback && ( -
- -
- )} - {toc.length !== 0 && ( - -

- On this page -

- - - - - )} -
-
- ) -} - -export default GuidesTableOfContents -export type { TOCHeader } diff --git a/apps/docs/content/guides/api/rest/auto-generated-docs.mdx b/apps/docs/content/guides/api/rest/auto-generated-docs.mdx index 7357392b58810..dce84addd9cf7 100644 --- a/apps/docs/content/guides/api/rest/auto-generated-docs.mdx +++ b/apps/docs/content/guides/api/rest/auto-generated-docs.mdx @@ -6,13 +6,15 @@ description: 'Supabase provides documentation that updates automatically.' Supabase generates documentation in the [Dashboard](/dashboard) which updates as you make database changes. -1. Go to the [API](/dashboard/project/_/api) page in the Dashboard. -2. Select any table under **Tables and Views** in the sidebar. -3. Switch between the JavaScript and the cURL docs using the tabs. +1. Go to the [Project Settings](/dashboard/project/_/settings/general) page in the Dashboard. +2. Select Data API -> Docs +3. Select any table under **Tables and Views** in the sidebar. +4. Switch between the JavaScript and the cURL docs using the tabs. +5. You may also select the SUPABASE_KEY to use. diff --git a/apps/docs/content/guides/platform/backups.mdx b/apps/docs/content/guides/platform/backups.mdx index 55b43ec5041c0..a08c9585ebfc9 100644 --- a/apps/docs/content/guides/platform/backups.mdx +++ b/apps/docs/content/guides/platform/backups.mdx @@ -1,75 +1,39 @@ --- title: 'Database Backups' -description: 'Learn about the available backup methods for your Supabase project.' +description: 'Learn about backups for your Supabase project.' --- -Database backups are an integral part of any disaster recovery plan. Disasters come in many shapes and sizes. It could be as simple as accidentally deleting a table column, the database crashing, or even a natural calamity wiping out the underlying hardware a database is running on. The risks and impact brought by these scenarios can never be fully eliminated, but only minimized or even mitigated. Having database backups is a form of insurance policy. They are essentially snapshots of the database at various points in time. When disaster strikes, database backups allow the project to be brought back to any of these points in time, therefore averting the crisis. +We automatically back up all Free, Pro, Team, and Enterprise Plan projects on a daily basis. You can find backups in the [**Database** > **Backups**](/dashboard/project/_/database/backups/scheduled) section of the Dashboard. - - -The Supabase team regularly monitors the status of backups. In case of any issues, you can [contact support](/dashboard/support/new). Also you can check out our [status page](https://status.supabase.com/) at any time. - - +Pro Plan projects can access the last 7 days of daily backups. Team Plan projects can access the last 14 days of daily backups, while Enterprise Plan projects can access up to 30 days of daily backups. If you need more frequent backups, consider enabling [Point-in-Time Recovery](#point-in-time-recovery). We recommend that free tier plan projects regularly export their data using the [Supabase CLI `db dump` command](/docs/reference/cli/supabase-db-dump) and maintain off-site backups. - + -Once a project is deleted all associated data will be permanently removed, including any backups stored in S3. This action is irreversible and should be carefully considered before proceeding. +When you delete a project, we permanently remove all associated data, including any backups stored in S3. This action is irreversible, so consider it carefully before proceeding. -## Types of backups - -Database backups can be categorized into two types: **logical** and **physical**. You can learn more about them [here](/blog/postgresql-physical-logical-backups). - - - -To enable physical backups, you have three options: + -- Enable [Point-in-Time Recovery (PITR)](#point-in-time-recovery) -- [Increase your database size](/docs/guides/platform/database-size) to greater than 15GB -- [Create a read replica](/docs/guides/platform/read-replicas) - -Once a project satisfies at least one of the requirements for physical backups then logical backups are no longer made. However, your project may revert back to logical backups if you remove add-ons. +For security purposes, daily backups do not store passwords for custom roles, and you will not find them in downloadable files. If you restore from a daily backup and use custom roles, you will need to reset their passwords after the restoration completes. -You can confirm your project's backup type by navigating to [**Database Backups > Scheduled backups**](/dashboard/project/_/database/backups/scheduled) and if you can download a backup then it is logical, otherwise it is physical. - -However, if your project has the Point-in-Time Recovery (PITR) add-on then the backups are physical and you can view them in [Database Backups > Point in time](/dashboard/project/_/database/backups/pitr). - -## Frequency of backups - -When deciding how often a database should be backed up, the key business metric Recovery Point Objective (RPO) should be considered. RPO is the threshold for how much data, measured in time, a business could lose when disaster strikes. This amount is fully dependent on a business and its underlying requirements. A low RPO would mean that database backups would have to be taken at an increased cadence throughout the day. Each Supabase project has access to two forms of backups, Daily Backups and Point-in-Time Recovery (PITR). The agreed upon RPO would be a deciding factor in choosing which solution best fits a project. - -If you enable PITR, Daily Backups will no longer be taken. PITR provides a finer granularity than Daily Backups, so it's unnecessary to run both. +Database backups do not include objects you store via the Storage API, as the database only includes metadata about these objects. Restoring an old backup does not restore objects you deleted after that backup. - +## Backup and restore process -Database backups do not include objects stored via the Storage API, as the database only includes metadata about these objects. Restoring an old backup does not restore objects that have been deleted since then. +You can access daily backups in the [**Database** > **Backups**](/dashboard/project/_/database/backups/scheduled) section of the Dashboard and restore a project to any of the backups. - +You can restore your project to any of the backups. To generate a logical backup yourself, use the [Supabase CLI `db dump` command](/docs/reference/cli/supabase-db-dump). -## Daily backups +## Managing backups programmatically -All Pro, Team and Enterprise Plan Supabase projects are backed up automatically on a daily basis. In terms of Recovery Point Objective (RPO), Daily Backups would be suitable for projects willing to lose up to 24 hours worth of data if disaster hits at the most inopportune time. If a lower RPO is required, enabling Point-in-Time Recovery should be considered. - - - -For security purposes, passwords for custom roles are not stored in daily backups, and will not be found in downloadable files. As such, if you are restoring from a daily backup and are using custom roles, you will need to set their passwords once more following a completed restoration. - - - -### Backup process [#daily-backups-process] - -The Postgres utility [pg_dumpall](https://www.postgresql.org/docs/current/app-pg-dumpall.html) is used to perform daily backups. An SQL file is generated, zipped up, and sent to our storage servers for safe keeping. - -You can access daily backups in the [Scheduled backups](/dashboard/project/_/database/backups/scheduled) settings in the Dashboard. Pro Plan projects can access the last 7 days' worth of daily backups. Team Plan projects can access the last 14 days' worth of daily backups, while Enterprise Plan projects can access up to 30 days' worth of daily backups. Users can restore their project to any one of the backups. If you wish to generate a logical backup on your own, you can do so through the [Supabase CLI](/docs/reference/cli/supabase-db-dump). - -You can also manage backups programmatically using the Management API: +You can also manage backups programmatically [using the Management API](/docs/reference/api/v1-list-all-backups): ```bash # Get your access token from https://supabase.com/dashboard/account/tokens @@ -80,7 +44,7 @@ export PROJECT_REF="your-project-ref" curl -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \ "https://api.supabase.com/v1/projects/$PROJECT_REF/database/backups" -# Restore from a PITR (not logical) backup (replace ISO timestamp with desired restore point) +# Restore from a PITR backup (replace Unix timestamp with desired restore point) curl -X POST "https://api.supabase.com/v1/projects/$PROJECT_REF/database/backups/restore-pitr" \ -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \ -H "Content-Type: application/json" \ @@ -89,126 +53,87 @@ curl -X POST "https://api.supabase.com/v1/projects/$PROJECT_REF/database/backups }' ``` -#### Backup process for large databases - -Databases larger than 15GB[^1], if they're on a recent build[^2] of the Supabase platform, get automatically transitioned[^3] to use daily physical backups. Physical backups are a more performant backup mechanism that lowers the overhead and impact on the database being backed up, and also avoids holding locks on objects in your database for a long period of time. While restores are unaffected, the backups created using this method cannot be downloaded from the Backups section of the dashboard. - -This class of physical backups only allows for recovery to a fixed time each day, similar to daily backups. You can upgrade to [PITR](#point-in-time-recovery) for access to more granular recovery options. +### Restoration process -Once a database is transitioned to using physical backups, it continues to use physical backups, even if the database size falls back below the threshold for the transition. +When selecting a backup to restore to, choose the closest available backup made before your desired restore point. You can always choose earlier backups, but consider how many days of data you might lose. -[^1]: The threshold for transitioning will be slowly lowered over time. Eventually, all projects will be transitioned to using physical backups. -[^2]: Projects created or upgraded after the 14th of July 2022 are eligible. -[^3]: The transition to physical backups is handled transparently and does not require any user intervention. It involves a single restart of the database to pick up new configuration that can only be loaded at start; the expected downtime for the restart is a few seconds. +The Dashboard prompts you for confirmation before proceeding with the restoration. The project is inaccessible during this process, so plan for downtime beforehand. Downtime depends on the size of the database—the larger it is, the longer the downtime will be. -### Restoration process [#daily-backups-restoration-process] +After you confirm, we trigger the process to restore the desired backup data to your project. The dashboard will display a notification once the restoration completes. -When selecting a backup to restore to, select the closest available one made before the desired point in time to restore to. Earlier backups can always be chosen too but do consider the number of days' worth of data that could be lost. - -The Dashboard will then prompt for a confirmation before proceeding with the restoration. The project will be inaccessible following this. As such, do ensure to allot downtime beforehand. This is dependent on the size of the database. The larger it is, the longer the downtime will be. Once the confirmation has been given, the underlying SQL of the chosen backup is then run against the project. The Postgres utility [psql](https://www.postgresql.org/docs/current/app-psql.html) is used to facilitate the restoration. The Dashboard will display a notification once the restoration completes. - -If your project is using subscriptions or replication slots, you will need to drop them prior to the restoration, and re-create them afterwards. The slot used by Realtime is exempted from this, and will be handled automatically. +If your project uses subscriptions or replication slots, you need to drop them before the restoration and re-create them afterwards. We exempt the slot used by Realtime from this requirement and handle it automatically. {/* screenshot of the Dashboard of the project completing restoration */} ## Point-in-Time recovery -Point-in-Time Recovery (PITR) allows a project to be backed up at much shorter intervals. This provides users an option to restore to any chosen point of up to seconds in granularity. Even with daily backups, a day's worth of data could still be lost. With PITR, backups could be performed up to the point of disaster. +Point-in-Time Recovery (PITR) allows you to back up a project at shorter intervals, giving you the option to restore to any chosen point with up to seconds of granularity. Even with daily backups, you could still lose a day's worth of data. With PITR, you can back up to the point of disaster. Pro, Team and Enterprise Plan projects can enable PITR as an add-on. -Projects interested in PITR will also need to use at least a Small compute add-on, in order to ensure smooth functioning. +Projects that want to use PITR must also use at least a Small compute add-on to ensure smooth functioning. - + +
+ -If you enable PITR, Daily Backups will no longer be taken. PITR provides a finer granularity than Daily Backups, so it's unnecessary to run both. + As [covered in this blog post](/blog/postgresql-physical-logical-backups), a combination of physical backups and [Write Ahead Log (WAL)](https://www.postgresql.org/docs/current/wal-intro.html) file archiving makes PITR possible. Physical backups provide a snapshot of the underlying directory of the database, while WAL files contain records of every change the database processes. - - -When you disable PITR, all new backups will still be taken as physical backups only. Physical backups can still be used for restoration, but they are not available for direct download. If you need to download a backup after PITR is disabled, you’ll need to take a manual [logical backup using the Supabase CLI or pg_dump](/docs/guides/platform/migrating-within-supabase/backup-restore#backup-database-using-the-cli). + We use [WAL-G](https://github.com/wal-g/wal-g), an open source archival and restoration tool, to handle both aspects of PITR. Daily, we take a snapshot of the database and send it to our storage servers. Throughout the day, as database transactions occur, we generate and upload WAL files. - + By default, we back up WAL files at two-minute intervals. If these files exceed a certain file size threshold, we back them up immediately. During periods of high transaction volume, WAL file backups therefore become more frequent. Conversely, when the database has no activity, we do not make WAL file backups. Overall, in the worst case scenario, PITR achieves a Recovery Point Objective (RPO) of two minutes. -If PITR has been disabled, logical backups remain available until they pass the backup retention period for your plan. After that window passes, only physical backups will be shown. + - +
+ -### Backup process [#pitr-backup-process] + -As discussed [here](/blog/postgresql-physical-logical-backups), PITR is made possible by a combination of taking physical backups of a project, as well as archiving [Write Ahead Log (WAL)](https://www.postgresql.org/docs/current/wal-intro.html) files. Physical backups provide a snapshot of the underlying directory of the database, while WAL files contain records of every change made in the database. +If you enable PITR, we will no longer take Daily Backups. PITR provides finer granularity than Daily Backups, so running both is unnecessary. -Supabase uses [WAL-G](https://github.com/wal-g/wal-g), an open source archival and restoration tool, to handle both aspects of PITR. On a daily basis, a snapshot of the database is taken and sent to our storage servers. Throughout the day, as database transactions occur, WAL files are generated and uploaded. + -By default, WAL files are backed up at two minute intervals. If these files cross a certain file size threshold, they are backed up immediately. As such, during periods of high amount of transactions, WAL file backups become more frequent. Conversely, when there is no activity in the database, WAL file backups are not made. Overall, this would mean that at the worst case scenario or disaster, the PITR achieves a Recovery Point Objective (RPO) of two minutes. +### Backup process ![PITR dashboard](/docs/img/backups-pitr-dashboard.png) -You can access PITR in the [Point in Time](/dashboard/project/_/database/backups/pitr) settings in the Dashboard. The recovery period of a project is indicated by the earliest and latest points of recoveries displayed in your preferred timezone. If need be, the maximum amount of this recovery period can be modified accordingly. +You can access PITR in the [Point in Time](/dashboard/project/_/database/backups/pitr) settings in the Dashboard. The recovery period of a project is shown by the earliest and latest recovery points displayed in your preferred timezone. You can change the maximum recovery period if needed. -Note that the latest restore point of the project could be significantly far from the current time. This occurs when there has not been any recent activity in the database, and therefore no WAL file backups have been made recently. This is perfectly fine as the state of the database at the latest point of recovery would still be indicative of the state of the database at the current time given that no transactions have been made in between. +The latest restore point of the project could be significantly behind the current time. This occurs when the database has had no recent activity, and therefore we have not made any recent WAL file backups. However, the state of the database at the latest recovery point still reflects the current state of the database, given that no transactions have occurred in between. -### Restoration process [#pitr-restoration-process] +### Restoration process ![PITR: Calendar view](/docs/img/backups-pitr-calendar-view.png) -A date and time picker will be provided upon pressing the `Start a restore` button. The process will only proceed if the selected date and time fall within the earliest and latest points of recoveries. +A date and time picker appears when you click the **Start a restore** button. The process only proceeds if the selected date and time fall within the earliest and latest recovery points. ![PITR: Confirmation modal](/docs/img/backups-pitr-confirmation-modal.png) -After locking in the desired point in time to recover to, The Dashboard will then prompt for a review and confirmation before proceeding with the restoration. The project will be inaccessible following this. As such, do ensure to allot for downtime beforehand. This is dependent on the size of the database. The larger it is, the longer the downtime will be. Once the confirmation has been given, the latest physical backup available is downloaded to the project and the database is partially restored. WAL files generated after this physical backup up to the specified point-in-time are then downloaded. The underlying records of transactions in these files are replayed against the database to complete the restoration. The Dashboard will display a notification once the restoration completes. +After selecting your desired recovery point, the Dashboard prompts you to review and confirm before proceeding with the restoration. The project is inaccessible during this process, so plan for downtime beforehand. Downtime depends on the size of the database—the larger it is, the longer the downtime will be. After you confirm, we download the latest available physical backup to the project and partially restore the database. We then download the WAL files generated after this physical backup up to your specified point in time. We replay the underlying transaction records in these files against the database to complete the restoration. The Dashboard will display a notification once the restoration completes. <$Show if="billing:all"> <$Partial path="billing/pricing/pricing_pitr.mdx" /> -## Restore to a new project - -See the [Duplicate Project docs](/docs/guides/platform/clone-project). - -## Troubleshooting - -### Logical backups - -#### `search_path` issues - -During the `pg_restore` process, the `search_path` is set to an empty string for predictability, and security. Using unqualified references to functions or relations can cause restorations using logical backups to fail, as the database will not be able to locate the function or relation being referenced. This can happen even if the database functions without issues during normal operations, as the `search_path` is usually set to include several schemas during normal operations. Therefore, you should always use schema-qualified names within your SQL code. - -You can refer to [an example PR](https://github.com/supabase/supabase/pull/28393/files) on how to update SQL code to use schema-qualified names. +### Downloading backups after disabling PITR -#### Invalid check constraints +When you disable PITR, we still take all new backups as physical backups only. You can still use physical backups for restoration, but they are not available for direct download. If you need to download a backup after disabling PITR, you need to take a manual [legacy logical backup using the Supabase CLI or pg_dump](/docs/guides/platform/migrating-within-supabase/backup-restore#backup-database-using-the-cli). -Postgres requires that [check constraints](https://www.postgresql.org/docs/current/ddl-constraints.html#DDL-CONSTRAINTS-CHECK-CONSTRAINTS) be: - -1. immutable -1. not reference table data other than the new or updated row being checked - -Violating these requirements can result in numerous failure scenarios, including during logical restorations. - -Common examples of check constraints that can result in such failures are: - -- validating against the current time, e.g. that the row being inserted references a future event -- validating the contents of a row against the contents of another table - -#### Views that reference themselves - -Views that directly or indirectly reference themselves will cause logical restores to fail due to cyclic dependency errors. These views are also invalid and unusable in Postgres, and any query against them will result in a runtime error. - -**Example:** - -``` --- Direct self-reference -CREATE VIEW my_view AS - SELECT * FROM my_view; - --- Indirect circular reference -CREATE VIEW v1 AS SELECT * FROM v2; -CREATE VIEW v2 AS SELECT * FROM v1; -``` - --- Drop the offending view from your database, or delete them from the logical backup to make it restorable. +## Restore to a new project -Postgres documentation [views](https://www.postgresql.org/docs/current/sql-createview.html) +See the [Duplicate Project docs](/docs/guides/platform/clone-project). diff --git a/apps/docs/content/guides/self-hosting/self-hosted-oauth.mdx b/apps/docs/content/guides/self-hosting/self-hosted-oauth.mdx index 702cdd8756547..4297d06127ce5 100644 --- a/apps/docs/content/guides/self-hosting/self-hosted-oauth.mdx +++ b/apps/docs/content/guides/self-hosting/self-hosted-oauth.mdx @@ -70,11 +70,14 @@ GOOGLE_SECRET=your-client-secret Uncomment the corresponding `GOTRUE_EXTERNAL_` lines in the `auth` service's `environment`: -``` -GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${GOOGLE_ENABLED} -GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID} -GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_SECRET} -GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${GOOGLE_ENABLED} + GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID} + GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_SECRET} + GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback ``` @@ -94,7 +97,7 @@ docker compose up -d --force-recreate --no-deps auth Check that the provider is enabled: ```sh -curl https:///auth/v1/settings +curl -H 'apikey: your-anon-key' https:///auth/v1/settings ``` The response should include your provider under `external`: @@ -141,11 +144,14 @@ GOOGLE_SECRET=your-google-client-secret **`docker-compose.yml`:** -``` -GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${GOOGLE_ENABLED} -GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID} -GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_SECRET} -GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${GOOGLE_ENABLED} + GOTRUE_EXTERNAL_GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID} + GOTRUE_EXTERNAL_GOOGLE_SECRET: ${GOOGLE_SECRET} + GOTRUE_EXTERNAL_GOOGLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback ``` @@ -171,11 +177,14 @@ GITHUB_SECRET=your-github-client-secret **`docker-compose.yml`:** -``` -GOTRUE_EXTERNAL_GITHUB_ENABLED: ${GITHUB_ENABLED} -GOTRUE_EXTERNAL_GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID} -GOTRUE_EXTERNAL_GITHUB_SECRET: ${GITHUB_SECRET} -GOTRUE_EXTERNAL_GITHUB_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_GITHUB_ENABLED: ${GITHUB_ENABLED} + GOTRUE_EXTERNAL_GITHUB_CLIENT_ID: ${GITHUB_CLIENT_ID} + GOTRUE_EXTERNAL_GITHUB_SECRET: ${GITHUB_SECRET} + GOTRUE_EXTERNAL_GITHUB_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback ``` @@ -207,13 +216,16 @@ AZURE_SECRET=your-azure-client-secret **`docker-compose.yml`:** -``` -GOTRUE_EXTERNAL_AZURE_ENABLED: ${AZURE_ENABLED} -GOTRUE_EXTERNAL_AZURE_CLIENT_ID: ${AZURE_CLIENT_ID} -GOTRUE_EXTERNAL_AZURE_SECRET: ${AZURE_SECRET} -GOTRUE_EXTERNAL_AZURE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback -## Optional: uncomment for tenant-specific Azure login -# GOTRUE_EXTERNAL_AZURE_URL: ${AZURE_URL} +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_AZURE_ENABLED: ${AZURE_ENABLED} + GOTRUE_EXTERNAL_AZURE_CLIENT_ID: ${AZURE_CLIENT_ID} + GOTRUE_EXTERNAL_AZURE_SECRET: ${AZURE_SECRET} + GOTRUE_EXTERNAL_AZURE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback + ## Optional: uncomment for tenant-specific Azure login + # GOTRUE_EXTERNAL_AZURE_URL: ${AZURE_URL} ``` @@ -236,11 +248,14 @@ APPLE_SECRET=your-generated-jwt-client-secret **`docker-compose.yml`:** -``` -GOTRUE_EXTERNAL_APPLE_ENABLED: ${APPLE_ENABLED} -GOTRUE_EXTERNAL_APPLE_CLIENT_ID: ${APPLE_CLIENT_ID} -GOTRUE_EXTERNAL_APPLE_SECRET: ${APPLE_SECRET} -GOTRUE_EXTERNAL_APPLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_APPLE_ENABLED: ${APPLE_ENABLED} + GOTRUE_EXTERNAL_APPLE_CLIENT_ID: ${APPLE_CLIENT_ID} + GOTRUE_EXTERNAL_APPLE_SECRET: ${APPLE_SECRET} + GOTRUE_EXTERNAL_APPLE_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback ``` @@ -276,12 +291,15 @@ KEYCLOAK_URL=https://keycloak.example.com/realms/myrealm **`docker-compose.yml` passthrough:** -``` -GOTRUE_EXTERNAL_KEYCLOAK_ENABLED: ${KEYCLOAK_ENABLED} -GOTRUE_EXTERNAL_KEYCLOAK_CLIENT_ID: ${KEYCLOAK_CLIENT_ID} -GOTRUE_EXTERNAL_KEYCLOAK_SECRET: ${KEYCLOAK_SECRET} -GOTRUE_EXTERNAL_KEYCLOAK_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback -GOTRUE_EXTERNAL_KEYCLOAK_URL: ${KEYCLOAK_URL} +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_EXTERNAL_KEYCLOAK_ENABLED: ${KEYCLOAK_ENABLED} + GOTRUE_EXTERNAL_KEYCLOAK_CLIENT_ID: ${KEYCLOAK_CLIENT_ID} + GOTRUE_EXTERNAL_KEYCLOAK_SECRET: ${KEYCLOAK_SECRET} + GOTRUE_EXTERNAL_KEYCLOAK_REDIRECT_URI: ${API_EXTERNAL_URL}/auth/v1/callback + GOTRUE_EXTERNAL_KEYCLOAK_URL: ${KEYCLOAK_URL} ``` @@ -331,7 +349,12 @@ For each provider, you need at minimum `ENABLED`, `CLIENT_ID`, `SECRET`, and `RE ## Test the login flow -You can test OAuth with the following minimal `index.html` served, e.g., via `python -m http.server 3000`: +You can test OAuth with the following minimal HTML page: + +- Save the code below to `index.html` +- Start `python -m http.server 3000` in the same directory +- Make sure `SITE_URL` is set to `http://localhost:3000` in your self-hosted Supabase `.env` configuration +- Open your browser and go to `http://localhost:3000` ```html @@ -373,12 +396,6 @@ You can test OAuth with the following minimal `index.html` served, e.g., via `py ``` - - -Make sure `SITE_URL` or `ADDITIONAL_REDIRECT_URLS` includes the URL where you open this test page. Otherwise the Auth service will reject the redirect after login. - - - For detailed client-side integration, see [Social Login](/docs/guides/auth/social-login). ## Troubleshooting diff --git a/apps/docs/content/guides/self-hosting/self-hosted-phone-mfa.mdx b/apps/docs/content/guides/self-hosting/self-hosted-phone-mfa.mdx index 64d2d13ba748e..30d427e471f72 100644 --- a/apps/docs/content/guides/self-hosting/self-hosted-phone-mfa.mdx +++ b/apps/docs/content/guides/self-hosting/self-hosted-phone-mfa.mdx @@ -42,15 +42,18 @@ SMS_TWILIO_MESSAGE_SERVICE_SID=your-message-service-sid Uncomment the `GOTRUE_SMS_*` lines in the `auth` service's `environment` block: -``` -GOTRUE_SMS_PROVIDER: ${SMS_PROVIDER} -GOTRUE_SMS_OTP_EXP: ${SMS_OTP_EXP} -GOTRUE_SMS_OTP_LENGTH: ${SMS_OTP_LENGTH} -GOTRUE_SMS_MAX_FREQUENCY: ${SMS_MAX_FREQUENCY} -GOTRUE_SMS_TEMPLATE: ${SMS_TEMPLATE} -GOTRUE_SMS_TWILIO_ACCOUNT_SID: ${SMS_TWILIO_ACCOUNT_SID} -GOTRUE_SMS_TWILIO_AUTH_TOKEN: ${SMS_TWILIO_AUTH_TOKEN} -GOTRUE_SMS_TWILIO_MESSAGE_SERVICE_SID: ${SMS_TWILIO_MESSAGE_SERVICE_SID} +```yaml +auth: + environment: + # ... existing variables ... + GOTRUE_SMS_PROVIDER: ${SMS_PROVIDER} + GOTRUE_SMS_OTP_EXP: ${SMS_OTP_EXP} + GOTRUE_SMS_OTP_LENGTH: ${SMS_OTP_LENGTH} + GOTRUE_SMS_MAX_FREQUENCY: ${SMS_MAX_FREQUENCY} + GOTRUE_SMS_TEMPLATE: ${SMS_TEMPLATE} + GOTRUE_SMS_TWILIO_ACCOUNT_SID: ${SMS_TWILIO_ACCOUNT_SID} + GOTRUE_SMS_TWILIO_AUTH_TOKEN: ${SMS_TWILIO_AUTH_TOKEN} + GOTRUE_SMS_TWILIO_MESSAGE_SERVICE_SID: ${SMS_TWILIO_MESSAGE_SERVICE_SID} ``` ### Step 3: Restart the auth service diff --git a/apps/docs/features/docs/GuidesMdx.template.tsx b/apps/docs/features/docs/GuidesMdx.template.tsx index 76fbe6d397cc5..9775803296589 100644 --- a/apps/docs/features/docs/GuidesMdx.template.tsx +++ b/apps/docs/features/docs/GuidesMdx.template.tsx @@ -5,7 +5,7 @@ import ReactMarkdown from 'react-markdown' import { cn } from 'ui' import Breadcrumbs from '~/components/Breadcrumbs' -import GuidesTableOfContents from '~/components/GuidesTableOfContents' +import GuidesSidebar from '~/components/GuidesSidebar' import { TocAnchorsProvider } from '~/features/docs/GuidesMdx.client' import { MDXRemoteBase } from '~/features/docs/MdxBase' import type { WithRequired } from '~/features/helpers.types' @@ -71,7 +71,7 @@ const GuideTemplate = ({ meta, content, children, editLink, mdxOptions }: GuideT 'relative', 'transition-all ease-out', 'duration-100', - hideToc ? 'col-span-12' : 'col-span-12 md:col-span-9' + 'col-span-12 md:col-span-9' )} > @@ -114,24 +114,23 @@ const GuideTemplate = ({ meta, content, children, editLink, mdxOptions }: GuideT - {!hideToc && ( - - )} + ) diff --git a/apps/docs/features/ui/guide/Guide.tsx b/apps/docs/features/ui/guide/Guide.tsx index e0179dd7ab380..9fa9b8c31c3f0 100644 --- a/apps/docs/features/ui/guide/Guide.tsx +++ b/apps/docs/features/ui/guide/Guide.tsx @@ -3,7 +3,7 @@ import { createContext, useContext, type ReactNode } from 'react' import { cn } from 'ui' -import GuidesTableOfContents from '~/components/GuidesTableOfContents' +import GuidesTableOfContents from '~/components/GuidesSidebar' import { TocAnchorsProvider } from '~/features/docs/GuidesMdx.client' import { type GuideFrontmatter } from '~/lib/docs' diff --git a/apps/docs/internals/generate-guides-markdown.ts b/apps/docs/internals/generate-guides-markdown.ts new file mode 100644 index 0000000000000..c07cb27bcb211 --- /dev/null +++ b/apps/docs/internals/generate-guides-markdown.ts @@ -0,0 +1,165 @@ +import fs from 'fs' +import path from 'path' +import { globby } from 'globby' +import matter from 'gray-matter' + +const PARTIALS_DIR = path.join(process.cwd(), 'content', '_partials') + +/** + * Reads <$Partial path="..." /> tags and replaces them with the file contents. + * Recurses to handle nested partials. + */ +async function inlinePartials(content: string): Promise { + const partialRegex = /<\$Partial\s+path="([^"]+)"[^/]*\/>/g + const matches = [...content.matchAll(partialRegex)] + for (const [fullMatch, partialPath] of matches) { + try { + const raw = await fs.promises.readFile(path.join(PARTIALS_DIR, partialPath), 'utf8') + const { content: partialBody } = matter(raw) + const inlined = await inlinePartials(partialBody) + content = content.replace(fullMatch, inlined) + } catch { + content = content.replace(fullMatch, '') + } + } + return content +} + +/** Remove the minimum common leading whitespace from all non-empty lines. */ +function dedentBlock(text: string): string { + const lines = text.split('\n') + const nonEmpty = lines.filter((l) => /\S/.test(l)) + if (!nonEmpty.length) return text + const minIndent = Math.min(...nonEmpty.map((l) => (l.match(/^([ \t]*)/) ?? ['', ''])[1].length)) + if (!minIndent) return text + return lines.map((l) => l.slice(minIndent)).join('\n') +} + +/** + * Converts StepHikeCompact components to markdown ordered lists. + * Each step becomes a numbered item: the title (from Details) is bolded on the item + * line, and the full step body (Details + Code) is dedented and appended below. + * Remaining JSX tags inside the body are later stripped by stripJsxTags. + */ +function convertStepHike(content: string): string { + return content.replace(/([\s\S]*?)<\/StepHikeCompact>/g, (_, body) => { + const items: string[] = [] + const stepRe = /]*>([\s\S]*?)<\/StepHikeCompact\.Step>/g + let stepNum = 1 + let m: RegExpExecArray | null + while ((m = stepRe.exec(body)) !== null) { + const stepBody = m[1] + const titleMatch = stepBody.match(/]+title="([^"]*)"/) + const title = titleMatch ? titleMatch[1] : '' + // Dedent the entire step body so nested JSX indentation is removed. + // Remaining component tags (Details, Code, Admonition…) are stripped later. + const inner = dedentBlock(stepBody).trim() + const item = title ? `${stepNum}. **${title}**\n\n${inner}` : `${stepNum}. ${inner}` + items.push(item) + stepNum++ + } + return items.join('\n\n') + }) +} + +/** + * Strips JSX component tags (capitalized names, dot-notation, or $-prefixed) + * while keeping their inner content. Also strips wrapper div and a elements. + * Removes MDX JSX comment blocks. Strips unnecessary leading indentation from + * non-code-block lines. + */ +function stripJsxTags(content: string): string { + // Remove MDX/JSX comments {/* ... */} + content = content.replace(/\{\/\*[\s\S]*?\*\/\}/g, '') + + // Remove self-closing JSX components: or <$Directive ... /> + content = content.replace(/<[\$A-Z][\w.]*(?:\s[^>]*)?\s*\/>/gs, '') + + // Remove opening JSX component tags (possibly multi-line): + content = content.replace(/<[\$A-Z][\w.]*(?:\s[^>]*)?\s*>/gs, '') + + // Remove closing JSX component tags: + content = content.replace(/<\/[\$A-Z][\w.]*>/g, '') + + // Remove wrapper div and a elements used structurally in MDX (carry JSX props + // like className which are not valid HTML; inner content such as img is preserved) + content = content.replace(/]*)?\s*>/g, '') + content = content.replace(/<\/div>/g, '') + content = content.replace(/]*)?\s*>/g, '') + content = content.replace(/<\/a>/g, '') + + // Split on fenced code blocks to handle prose and code separately. + // For prose (even segments): strip leading whitespace (removes JSX nesting indent). + // For code blocks (odd segments): dedent the body to remove JSX nesting indent while + // preserving relative code structure, then normalize the closing fence. + const segments = content.split(/(```[\s\S]*?```)/g) + content = segments + .map((seg, i) => { + if (i % 2 === 0) return seg.replace(/^[ \t]+/gm, '') + return seg.replace( + /^(```[^\n]*\n)([\s\S]*?)(\n[ \t]*```)$/, + (_, open, body) => open + dedentBlock(body) + '\n```' + ) + }) + .join('') + + // Collapse lines that are only whitespace to empty lines, then deduplicate blank lines + content = content.replace(/^[^\S\n]+$/gm, '') + content = content.replace(/\n{3,}/g, '\n\n').trim() + + return content +} + +async function generate() { + const files = await globby(['content/guides/**/!(_)*.mdx']) + let warnings = 0 + + await Promise.all( + files.map(async (filePath) => { + const outPath = filePath + .replace(/^content\/guides\//, 'public/docs/guides/') + .replace(/\.mdx$/, '.md') + + let output: string + try { + const raw = await fs.promises.readFile(filePath, 'utf8') + const { content: rawContent, data } = matter(raw) + + const withPartials = await inlinePartials(rawContent) + const withSteps = convertStepHike(withPartials) + const processed = stripJsxTags(withSteps) + + const header = [ + data.title ? `# ${data.title}` : '', + data.subtitle || data.description ? `\n${data.subtitle ?? data.description}` : '', + ] + .filter(Boolean) + .join('\n') + + output = header ? `${header}\n\n${processed}` : processed + } catch (err) { + warnings++ + console.warn( + `[warn] Failed to process ${filePath}: ${err instanceof Error ? err.message : err}` + ) + // Fall back to raw file content so the route still serves something + try { + output = await fs.promises.readFile(filePath, 'utf8') + } catch { + output = `` + } + } + + // content/guides/ai/vector-columns.mdx → public/docs/guides/ai/vector-columns.md + // Placing under public/docs/ ensures the file is served at /docs/guides/... + // matching the exact URL of the rendered page. + await fs.promises.mkdir(path.dirname(outPath), { recursive: true }) + await fs.promises.writeFile(outPath, output) + }) + ) + + const summary = warnings ? ` (${warnings} with warnings)` : '' + console.log(`Generated ${files.length} markdown files under public/docs/guides/${summary}`) +} + +generate() diff --git a/apps/docs/middleware.ts b/apps/docs/middleware.ts index ea55aafa52efc..27868037dee8e 100644 --- a/apps/docs/middleware.ts +++ b/apps/docs/middleware.ts @@ -6,8 +6,19 @@ import { BASE_PATH } from '~/lib/constants' const REFERENCE_PATH = `${BASE_PATH ?? ''}/reference` +const GUIDES_PATH = `${BASE_PATH ?? ''}/guides` + export function middleware(request: NextRequest) { const url = new URL(request.url) + + // Serve pre-generated .md files before the [[...slug]] page route can intercept them + if (url.pathname.startsWith(GUIDES_PATH + '/') && url.pathname.endsWith('.md')) { + const slug = url.pathname.slice(GUIDES_PATH.length + 1, -'.md'.length) + const rewriteUrl = new URL(url) + rewriteUrl.pathname = `${BASE_PATH ?? ''}/api/guides-md/${slug}` + return NextResponse.rewrite(rewriteUrl) + } + if (!url.pathname.startsWith(REFERENCE_PATH)) { return NextResponse.next() } @@ -56,5 +67,5 @@ export function middleware(request: NextRequest) { } export const config = { - matcher: '/reference/:path*', + matcher: ['/reference/:path*', '/guides/:path*'], } diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs index d1419a3e10455..53e8066039e97 100644 --- a/apps/docs/next.config.mjs +++ b/apps/docs/next.config.mjs @@ -60,6 +60,7 @@ const nextConfig = { ], outputFileTracingIncludes: { '/api/crawlers': ['./features/docs/generated/**/*', './docs/ref/**/*'], + '/api/guides-md/**/*': ['./public/docs/guides/**/*'], '/guides/**/*': ['./content/guides/**/*', './content/troubleshooting/**/*', './examples/**/*'], '/reference/**/*': ['./features/docs/generated/**/*', './docs/ref/**/*'], }, diff --git a/apps/docs/package.json b/apps/docs/package.json index 98acb87d8d3fa..1f562c8413e12 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -7,6 +7,7 @@ "build": "next build", "build:analyze": "ANALYZE=true next build", "build:llms": "tsx --conditions=react-server ./scripts/llms.ts", + "build:guides-markdown": "tsx ./internals/generate-guides-markdown.ts", "build:sitemap": "tsx ./internals/generate-sitemap.ts", "clean": "rimraf .next .turbo node_modules features/docs/generated examples __generated__", "codegen:examples": "shx cp -r ../../examples ./examples", @@ -25,7 +26,7 @@ "lint": "eslint .", "lint:mdx": "supa-mdx-lint content --config ../../supa-mdx-lint.config.toml", "postbuild": "pnpm run build:sitemap && pnpm run build:llms && ./../../scripts/upload-static-assets.sh", - "prebuild": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", + "prebuild": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples && pnpm run build:guides-markdown", "predev": "pnpm run codegen:graphql && pnpm run codegen:references && pnpm run codegen:examples", "preembeddings": "pnpm run codegen:references", "preinstall": "npx only-allow pnpm", diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt index b588725932521..95b4aae590d7b 100644 --- a/apps/docs/public/humans.txt +++ b/apps/docs/public/humans.txt @@ -11,6 +11,7 @@ Akash Manimaran Alaister Young Alan De Los Santos Aleksi Immonen +Alex Hall Alexander Korotkov Ali Waseem Allan S @@ -110,8 +111,10 @@ Jess Shears Jim Brodeur Jim Chanco Jr Joakim Ahrlin +Joaquim Moreno Joel Low Joel Martin +Johan Bergström John Pena John Schaeffer Jon M diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx index b69e049afc56a..8b5203f133eab 100644 --- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx +++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx @@ -72,7 +72,7 @@ const Migrations = () => { Try refreshing your browser, but if the issue persists for more than a few minutes, please reach out to us via support.

-

Error: {(error as any)?.message ?? 'Unknown'}

+

Error: {error?.message ?? 'Unknown'}

} > diff --git a/apps/studio/components/interfaces/LocalDropdown.tsx b/apps/studio/components/interfaces/LocalDropdown.tsx index c4950b00cde51..a335bb2b807a2 100644 --- a/apps/studio/components/interfaces/LocalDropdown.tsx +++ b/apps/studio/components/interfaces/LocalDropdown.tsx @@ -36,14 +36,17 @@ export const LocalDropdown = () => { toggleFeaturePreviewModal(true)} onSelect={() => toggleFeaturePreviewModal(true)} > Feature previews - setCommandMenuOpen(true)}> + setCommandMenuOpen(true)} + > Command menu @@ -57,7 +60,11 @@ export const LocalDropdown = () => { }} > {singleThemes.map((theme: Theme) => ( - + {theme.name} ))} diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx index 4e7e7076908b4..1ea0f01e95928 100644 --- a/apps/studio/components/interfaces/UserDropdown.tsx +++ b/apps/studio/components/interfaces/UserDropdown.tsx @@ -76,7 +76,7 @@ export function UserDropdown() { - + { @@ -90,7 +90,7 @@ export function UserDropdown() { toggleFeaturePreviewModal(true)} // onSelect={() => toggleFeaturePreviewModal(true)} > @@ -120,7 +120,11 @@ export function UserDropdown() { }} > {singleThemes.map((theme: Theme) => ( - + {theme.name} ))} @@ -131,6 +135,7 @@ export function UserDropdown() { { router.push('/logout') }} diff --git a/apps/studio/data/branches/branch-diff-query.ts b/apps/studio/data/branches/branch-diff-query.ts index 14f26c8a5d8ba..b531fadd10606 100644 --- a/apps/studio/data/branches/branch-diff-query.ts +++ b/apps/studio/data/branches/branch-diff-query.ts @@ -1,8 +1,8 @@ import { useQuery } from '@tanstack/react-query' - import { get, handleError } from 'data/fetchers' import { IS_PLATFORM } from 'lib/constants' import type { ResponseError, UseCustomQueryOptions } from 'types' + import { branchKeys } from './keys' export type BranchDiffVariables = { @@ -24,7 +24,10 @@ export async function getBranchDiff({ const { data: diffData, error } = await get('/v1/branches/{branch_id_or_ref}/diff', { params: { path: { branch_id_or_ref: branchRef }, - query: Object.keys(query).length > 0 ? query : undefined, + query: + Object.keys(query).length > 0 + ? (query as { included_schemas?: string; pgdelta?: boolean }) + : undefined, }, headers: { Accept: 'text/plain', diff --git a/apps/studio/data/organizations/organization-available-regions-query.ts b/apps/studio/data/organizations/organization-available-regions-query.ts index 594880ec61e41..a07be137b650a 100644 --- a/apps/studio/data/organizations/organization-available-regions-query.ts +++ b/apps/studio/data/organizations/organization-available-regions-query.ts @@ -1,12 +1,12 @@ import { useQuery } from '@tanstack/react-query' - import type { operations } from 'api-types' import { get, handleError } from 'data/fetchers' import type { ResponseError, UseCustomQueryOptions } from 'types' + import { organizationKeys } from './keys' export type DesiredInstanceSizeForAvailableRegions = - operations['v1-get-available-regions']['parameters']['query']['desired_instance_size'] + operations['ProjectsController_getRegions']['parameters']['query']['desired_instance_size'] export type OrganizationAvailableRegionsVariables = { slug?: string diff --git a/apps/studio/data/partners/keys.ts b/apps/studio/data/partners/keys.ts new file mode 100644 index 0000000000000..e0811d3daccc7 --- /dev/null +++ b/apps/studio/data/partners/keys.ts @@ -0,0 +1,3 @@ +export const stripeProductKeys = { + get: (arId: string | undefined) => ['stripe', 'product', arId] as const, +} diff --git a/apps/studio/data/partners/stripe-product-confirm-mutation.ts b/apps/studio/data/partners/stripe-product-confirm-mutation.ts new file mode 100644 index 0000000000000..463059c11b2ca --- /dev/null +++ b/apps/studio/data/partners/stripe-product-confirm-mutation.ts @@ -0,0 +1,53 @@ +import { useMutation } from '@tanstack/react-query' +import { toast } from 'sonner' + +import { handleError, post } from '@/data/fetchers' +import type { ResponseError, UseCustomMutationOptions } from '@/types' + +type ConfirmAccountRequestVariables = { + arId: string +} + +async function confirmAccountRequest({ arId }: ConfirmAccountRequestVariables) { + if (!arId) throw new Error('Account request ID is required') + + const { data, error } = await post( + '/platform/stripe/product/provisioning/account_requests/{id}/confirm', + { + params: { path: { id: arId } }, + } + ) + + if (error) handleError(error) + return data +} + +type ConfirmAccountRequestData = Awaited> + +export const useConfirmAccountRequestMutation = ({ + onSuccess, + onError, + ...options +}: Omit< + UseCustomMutationOptions< + ConfirmAccountRequestData, + ResponseError, + ConfirmAccountRequestVariables + >, + 'mutationFn' +> = {}) => { + return useMutation({ + mutationFn: (vars) => confirmAccountRequest(vars), + async onSuccess(data, variables, context) { + await onSuccess?.(data, variables, context) + }, + async onError(data, variables, context) { + if (onError === undefined) { + toast.error(`Failed to confirm account request: ${data.message}`) + } else { + onError(data, variables, context) + } + }, + ...options, + }) +} diff --git a/apps/studio/data/partners/stripe-product-query.ts b/apps/studio/data/partners/stripe-product-query.ts new file mode 100644 index 0000000000000..1293692c48cf6 --- /dev/null +++ b/apps/studio/data/partners/stripe-product-query.ts @@ -0,0 +1,34 @@ +import { queryOptions } from '@tanstack/react-query' +import type { components } from 'api-types' + +import { get, handleError } from '../fetchers' +import { stripeProductKeys } from './keys' + +type GetAccountRequestVariables = { + arId?: string +} + +export type AccountRequestDetails = components['schemas']['AccountRequestDetailsDto'] + +async function getAccountRequest({ arId }: GetAccountRequestVariables, signal?: AbortSignal) { + if (!arId) throw new Error('Account request ID is required') + + const { data, error } = await get('/platform/stripe/product/provisioning/account_requests/{id}', { + params: { path: { id: arId } }, + signal, + }) + + if (error) handleError(error) + return data +} + +export const accountRequestQueryOptions = ( + { arId }: GetAccountRequestVariables, + { enabled = true }: { enabled?: boolean } = { enabled: true } +) => { + return queryOptions({ + queryKey: stripeProductKeys.get(arId), + queryFn: ({ signal }) => getAccountRequest({ arId }, signal), + enabled: enabled && typeof arId !== 'undefined', + }) +} diff --git a/apps/studio/pages/partners/stripe/product/login.tsx b/apps/studio/pages/partners/stripe/product/login.tsx new file mode 100644 index 0000000000000..ba30f36f45777 --- /dev/null +++ b/apps/studio/pages/partners/stripe/product/login.tsx @@ -0,0 +1,121 @@ +import { useQuery } from '@tanstack/react-query' +import { useParams } from 'common' +import { useRouter } from 'next/router' +import { useEffect } from 'react' +import { + Alert_Shadcn_, + AlertDescription_Shadcn_, + AlertTitle_Shadcn_, + Button, + LogoLoader, + WarningIcon, +} from 'ui' + +import APIAuthorizationLayout from '@/components/layouts/APIAuthorizationLayout' +import { useConfirmAccountRequestMutation } from '@/data/partners/stripe-product-confirm-mutation' +import { accountRequestQueryOptions } from '@/data/partners/stripe-product-query' +import { withAuth } from '@/hooks/misc/withAuth' +import { useSignOut } from '@/lib/auth' + +const StripeProductLoginPage = () => { + const router = useRouter() + const { ar_id } = useParams() + + const signOut = useSignOut() + + const { + data: accountRequest, + isPending, + isSuccess, + isError, + error, + } = useQuery(accountRequestQueryOptions({ arId: ar_id })) + + const { + mutateAsync: confirmAccountRequest, + isPending: isConfirming, + isSuccess: isConfirmed, + } = useConfirmAccountRequestMutation() + + useEffect(() => { + if (!router.isReady) return + + if (!ar_id) { + router.push('/404') + return + } + }, [router.isReady, ar_id, router]) + + const handleApprove = async () => { + if (!ar_id) return + + confirmAccountRequest({ arId: ar_id }) + // The onSuccess handler in the mutation will show a success screen, on error it'll show a toast, so we don't need + // to do anything else here + } + + return ( + +
+ {isConfirming ? ( + <> + +

Setting up your organization...

+ + ) : isConfirmed ? ( + <> +

Organization Created

+

+ Your Supabase organization has been linked successfully. +

+

You can close this window.

+ + ) : isPending ? ( + + ) : isSuccess ? ( + <> +

Stripe Product Account Request

+

+ Stripe Product wants to create a Supabase organization for{' '} + {accountRequest.email} + {accountRequest.name && <> ({accountRequest.name})}. +

+ {(accountRequest as any).email_matches ? ( +
+ +
+ ) : ( + <> + + + Wrong account + + You need to be logged in as {accountRequest.email} to approve + this request. + + +
+ +
+ + )} +

+ This will create a new Supabase organization linked to your Stripe account. +

+ + ) : isError ? ( + <> +

Error

+

{error?.message}

+ + ) : null} +
+ + ) +} + +export default withAuth(StripeProductLoginPage) diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx index 33a418b591f50..c42206eca7ad7 100644 --- a/apps/www/components/Nav/MobileMenu.tsx +++ b/apps/www/components/Nav/MobileMenu.tsx @@ -1,23 +1,21 @@ 'use client' -import { AnimatePresence, LazyMotion, domAnimation, m } from 'framer-motion' -import Image from 'next/image' -import Link from 'next/link' -import { useEffect } from 'react' -import type { Dispatch, SetStateAction } from 'react' - -import { Accordion, Button, TextLink } from 'ui' +import staticContent from '.generated/staticContent/_index.json' +import ProductModulesData from '~/data/ProductModules' import { DEFAULT_EASE } from '~/lib/animations' -import MenuItem from './MenuItem' - +import { useSendTelemetryEvent } from '~/lib/telemetry' import { useIsLoggedIn, useIsUserLoading } from 'common' import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png' import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png' +import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion' import { ChevronRight } from 'lucide-react' -import ProductModulesData from '~/data/ProductModules' -import staticContent from '.generated/staticContent/_index.json' +import Image from 'next/image' +import Link from 'next/link' +import { useEffect } from 'react' +import type { Dispatch, SetStateAction } from 'react' +import { Accordion, Button, TextLink } from 'ui' -import { useSendTelemetryEvent } from '~/lib/telemetry' +import MenuItem from './MenuItem' interface Props { open: boolean @@ -294,7 +292,7 @@ const MobileMenu = ({ open, setOpen, menu }: Props) => { diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index 01ed84f4cc06f..dabfd11ac48c4 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -1,24 +1,22 @@ 'use client' +import { useIsLoggedIn, useIsUserLoading, useUser } from 'common' +import { getMenu } from 'data/nav' +import { DevToolbarTrigger } from 'dev-tools' +import { useSendTelemetryEvent } from 'lib/telemetry' import dynamic from 'next/dynamic' import Link from 'next/link' +import { usePathname } from 'next/navigation' import React, { useState } from 'react' import { useWindowSize } from 'react-use' - -import { useIsLoggedIn, useIsUserLoading, useUser } from 'common' -import { DevToolbarTrigger } from 'dev-tools' import { Button, buttonVariants, cn } from 'ui' import { AuthenticatedDropdownMenu } from 'ui-patterns' -import { useSendTelemetryEvent } from 'lib/telemetry' import GitHubButton from './GitHubButton' import HamburgerButton from './HamburgerMenu' import RightClickBrandLogo from './RightClickBrandLogo' import useDropdownMenu from './useDropdownMenu' -import { getMenu } from 'data/nav' -import { usePathname } from 'next/navigation' - const MenuItem = dynamic(() => import('./MenuItem')) const MobileMenu = dynamic(() => import('./MobileMenu')) const NavigationMenu = dynamic(() => @@ -182,7 +180,7 @@ const Nav = ({ hideNavbar, stickyNavbar = true }: Props) => {