+
+
+ setDraftValues((current) => ({
+ ...current,
+ endpointUrl: event.target.value,
+ }))
+ }
+ />
+
+
+
+
+ setDraftValues((current) => ({
+ ...current,
+ secretHeader: event.target.value,
+ }))
+ }
+ />
+
+ + AI Tools +
+
+
+
+
+
+
+ )
+}
+
+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 ebb1fd4158f..00000000000
--- 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 && (
+
+
+ )}
+
+
+ {!hideToc && toc.length !== 0 && (
+ + On this page +
+
-
- )
-}
-
-export default GuidesTableOfContents
-export type { TOCHeader }
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 4cea890356d..0ca56c33284 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -1,8 +1,9 @@
-import type { ComponentProps } from 'react'
// End of third-party imports
import { isFeatureEnabled } from 'common/enabled-features'
+import type { ComponentProps } from 'react'
import type { IconPanel } from 'ui-patterns/IconPanel'
+
import type { GlobalMenuItems, NavMenuConstant, NavMenuSection } from '../Navigation.types'
const {
@@ -2849,10 +2850,19 @@ export const self_hosting: NavMenuConstant = {
name: 'How-to Guides',
items: [
{ name: 'Self-Hosted Functions', url: '/guides/self-hosting/self-hosted-functions' },
- { name: 'Restore from Platform', url: '/guides/self-hosting/restore-from-platform' },
+ {
+ name: 'Add Reverse Proxy with HTTPS',
+ url: '/guides/self-hosting/self-hosted-proxy-https',
+ },
+ {
+ name: 'Restore Project from Platform',
+ url: '/guides/self-hosting/restore-from-platform',
+ },
{ name: 'Configure S3 Storage', url: '/guides/self-hosting/self-hosted-s3' },
{ name: 'Copy Storage from Platform', url: '/guides/self-hosting/copy-from-platform-s3' },
- { name: 'Enabling MCP server', url: '/guides/self-hosting/enable-mcp' },
+ { name: 'Configure Social Login (OAuth)', url: '/guides/self-hosting/self-hosted-oauth' },
+ { name: 'Configure Phone Login & MFA', url: '/guides/self-hosting/self-hosted-phone-mfa' },
+ { name: 'Enable MCP server', url: '/guides/self-hosting/enable-mcp' },
],
},
{
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 7357392b588..dce84addd9c 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/auth/oauth-server/getting-started.mdx b/apps/docs/content/guides/auth/oauth-server/getting-started.mdx
index b65a671d198..0efdc4068e2 100644
--- a/apps/docs/content/guides/auth/oauth-server/getting-started.mdx
+++ b/apps/docs/content/guides/auth/oauth-server/getting-started.mdx
@@ -495,11 +495,11 @@ Store the client secret securely. It will only be shown once. If you lose it, yo
When a client exchanges an authorization code or refreshes a token, it must authenticate with the token endpoint. The `token_endpoint_auth_method` controls how this authentication happens:
-| Method | Description | Used by |
-| --- | --- | --- |
-| `none` | No client authentication. Only `client_id` is sent in the request body. | Public clients (required) |
-| `client_secret_basic` | Client credentials sent via HTTP Basic auth (`Authorization: Basic
- {video && (
-
-
-
-
- )}
-
-
-
- )}
- {showFeedback && (
-
-
- )}
- {toc.length !== 0 && (
- - On this page -
-
+
+
+ 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.
+
+ 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.
+
+
+
+
+Supabase OAuth Test
+ + + + + + + +``` + +For detailed client-side integration, see [Social Login](/docs/guides/auth/social-login). + +## Troubleshooting + +### "Provider not enabled" or provider shows `false` in `/auth/v1/settings` + +- Check that `GOTRUE_EXTERNAL_*_ENABLED` is set to `true` in `docker-compose.yml` +- Verify the `.env` variable is not empty, e.g., check with `docker compose exec auth env | grep GOOGLE` + +### Variables added to `.env` but provider still not working + +Configuration variables from `.env` are **not** automatically available inside the container unless there's a matching passthrough definition in `docker-compose.yml`. Check, e.g., for: + +``` +GOTRUE_EXTERNAL_GOOGLE_ENABLED: ${GOOGLE_ENABLED} +``` + +Run `docker compose exec auth env | grep GOTRUE_EXTERNAL` to verify the variables are reaching the container. + +### `SITE_URL` or redirect URL errors after login + +After a successful OAuth login, the Auth service redirects to `SITE_URL` or a URL from `ADDITIONAL_REDIRECT_URLS`. Ensure: + +- `SITE_URL` in `.env` is set to your application's URL +- If your app uses a different redirect URL, add it to `ADDITIONAL_REDIRECT_URLS` (comma-separated) + +{/* supa-mdx-lint-disable-next-line Rule001HeadingCase */} + +### Nonce check failure on mobile (Google Sign In) + +When using Google Sign In on mobile with ID tokens, nonce verification may fail because mobile SDKs don't always support the nonce flow that the Auth service expects. + +
@@ -251,102 +237,107 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
return (
isDirty,
+ onClose,
+ })
const statements = useMemo(() => {
let permissionChanges: string[] = []
@@ -270,7 +281,7 @@ export const CreateHookSheet = ({
}, [authConfig, title, visible, definition])
return (
- onClose()}>
+
-
- {isLoading && (
- Failed to retrieve count: {error?.message}
+
+ ) : !isForeignTableSelected ? (
+ ', label: 'Not equal', group: 'comparison' },
+ { value: 'is', label: 'Is', group: 'setNull' },
]
const BOOLEAN_OPERATORS: OperatorDefinition[] = [
{ value: '=', label: 'Equals', group: 'comparison' },
{ value: '<>', label: 'Not equal', group: 'comparison' },
+ { value: 'is', label: 'Is', group: 'setNull' },
]
export function columnToFilterProperty(column: SupaColumn): FilterProperty {
diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
index bbb8df4e78b..ee26db7e751 100644
--- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
@@ -10,16 +10,16 @@ import { isEqual } from 'lodash'
import { ChevronDown, List } from 'lucide-react'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import {
- type RoleImpersonationState,
useRoleImpersonationStateSnapshot,
+ type RoleImpersonationState,
} from 'state/role-impersonation-state'
import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
import {
Button,
+ Popover_Shadcn_,
PopoverContent_Shadcn_,
PopoverSeparator_Shadcn_,
PopoverTrigger_Shadcn_,
- Popover_Shadcn_,
} from 'ui'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -72,7 +72,6 @@ export const SortPopoverPrimitive = ({
const { data: countData } = useTableRowsCountQuery(
{
projectRef: project?.ref,
- connectionString: project?.connectionString,
tableId: snap.table.id,
filters,
enforceExactCount: snap.enforceExactCount,
diff --git a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchCommands.tsx b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchCommands.tsx
index 9cd507530de..8e61ba4731a 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchCommands.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchCommands.tsx
@@ -1,25 +1,26 @@
'use client'
-import { useMemo } from 'react'
-import { Database } from 'lucide-react'
+import { IS_PLATFORM } from 'common'
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { Auth, EdgeFunctions, Storage } from 'icons'
+import { Database } from 'lucide-react'
+import { useMemo } from 'react'
import type { ICommand } from 'ui-patterns/CommandMenu'
import {
CommandHeader,
CommandInput,
CommandWrapper,
PageType,
+ useQuery,
useRegisterCommands,
useRegisterPage,
useSetPage,
- useQuery,
} from 'ui-patterns/CommandMenu'
+
import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
-import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { orderCommandSectionsByPriority } from './ordering'
import { ContextSearchResults } from './ContextSearchResults'
-import { useFlag, IS_PLATFORM } from 'common'
-import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
+import { orderCommandSectionsByPriority } from './ordering'
import type { SearchContextValue } from './SearchContext.types'
interface SearchContextOption {
@@ -81,7 +82,6 @@ function ContextSearchPage({
}
export function useContextSearchCommands() {
- const enableSearchEntitiesCommandMenu = useFlag('enableSearchEntitiesCommandMenu')
const { data: project } = useSelectedProjectQuery()
const setPage = useSetPage()
@@ -147,6 +147,6 @@ export function useContextSearchCommands() {
useRegisterCommands(COMMAND_MENU_SECTIONS.QUERY, contextCommands, {
orderSection: orderCommandSectionsByPriority,
sectionMeta: { priority: 3 },
- enabled: !IS_PLATFORM || (enableSearchEntitiesCommandMenu && !!project),
+ enabled: !IS_PLATFORM || !!project,
})
}
diff --git a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
index cce80055c86..4885b327494 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
@@ -1,6 +1,6 @@
'use client'
-import { IS_PLATFORM, useFlag } from 'common'
+import { IS_PLATFORM } from 'common'
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import {
Clock5,
@@ -25,13 +25,13 @@ import {
} from 'lucide-react'
import dynamic from 'next/dynamic'
import { useMemo } from 'react'
+import type { CommandOptions, ICommand } from 'ui-patterns/CommandMenu'
import {
PageType,
useRegisterCommands,
useRegisterPage,
useSetCommandMenuOpen,
} from 'ui-patterns/CommandMenu'
-import type { CommandOptions, ICommand } from 'ui-patterns/CommandMenu'
import { COMMAND_MENU_SECTIONS } from './CommandMenu.utils'
import {
@@ -51,14 +51,12 @@ const Graphql = dynamic(() => import('icons').then((mod) => mod.Graphql))
const CREATE_STUDIO_ENTITY = 'Create Studio Entity'
export function useCreateCommands(options?: CommandOptions) {
- const enableCreateCommands = useFlag('enablecreatecommands')
const setIsOpen = useSetCommandMenuOpen()
const {
ref,
setPage,
openSidebar,
snap,
- authenticationOauth21,
authEnabled,
edgeFunctionsEnabled,
storageEnabled,
@@ -184,7 +182,7 @@ export function useCreateCommands(options?: CommandOptions) {
},
]
: []),
- ...(IS_PLATFORM && authenticationOauth21
+ ...(IS_PLATFORM
? [
{
id: 'create-oauth-app',
@@ -207,7 +205,6 @@ export function useCreateCommands(options?: CommandOptions) {
passwordVerificationHook,
passwordVerificationHookEnabled,
beforeUserCreatedHook,
- authenticationOauth21,
]
)
@@ -453,7 +450,7 @@ export function useCreateCommands(options?: CommandOptions) {
},
{
deps: [sections],
- enabled: enableCreateCommands,
+ enabled: true,
}
)
@@ -471,7 +468,7 @@ export function useCreateCommands(options?: CommandOptions) {
...options,
orderSection: (sections) => sections,
sectionMeta: { priority: 3 },
- enabled: enableCreateCommands,
+ enabled: true,
}
)
}
diff --git a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx
index 58d54a6af07..c3493239a28 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.utils.tsx
@@ -1,4 +1,4 @@
-import { useFlag, useParams } from 'common'
+import { useParams } from 'common'
import type { Hook } from 'components/interfaces/Auth/Hooks/hooks.constants'
import { HOOKS_DEFINITIONS } from 'components/interfaces/Auth/Hooks/hooks.constants'
import { extractMethod, isValidHook } from 'components/interfaces/Auth/Hooks/hooks.utils'
@@ -74,7 +74,7 @@ export function getIntegrationCommandName(integration: IntegrationDefinition): s
case 'cron':
return 'Create Cron Job'
case 'webhooks':
- return 'Create Webhook'
+ return 'Create Database Webhook'
case 'queues':
return 'Create Queue'
default:
@@ -89,9 +89,6 @@ export function useCreateCommandsConfig() {
const { openSidebar } = useSidebarManagerSnapshot()
const snap = useAiAssistantStateSnapshot()
- // Auth
- const authenticationOauth21 = useFlag('EnableOAuth21')
-
const {
projectAuthAll: authEnabled,
projectEdgeFunctionAll: edgeFunctionsEnabled,
@@ -182,7 +179,6 @@ export function useCreateCommandsConfig() {
setPage,
openSidebar,
snap,
- authenticationOauth21,
authEnabled,
edgeFunctionsEnabled,
storageEnabled,
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
index c63dbd112e9..2b6eb4d64c9 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
@@ -82,8 +82,9 @@ export const useIsColumnLevelPrivilegesEnabled = () => {
export const useUnifiedLogsPreview = () => {
const { flags, onUpdateFlag } = useFeaturePreviewContext()
+ const unifiedLogsEnabled = useFlag('unifiedLogs')
- const isEnabled = flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
+ const isEnabled = unifiedLogsEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
const enable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, true)
const disable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, false)
@@ -93,8 +94,7 @@ export const useUnifiedLogsPreview = () => {
export const useIsBranching2Enabled = () => {
const { flags } = useFeaturePreviewContext()
- const gitlessBranchingEnabled = useFlag('gitlessBranching')
- return gitlessBranchingEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0]
}
export const useIsPgDeltaDiffEnabled = () => {
@@ -105,8 +105,7 @@ export const useIsPgDeltaDiffEnabled = () => {
export const useIsAdvisorRulesEnabled = () => {
const { flags } = useFeaturePreviewContext()
- const advisorRulesEnabled = useFlag('advisorRules')
- return advisorRulesEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES]
}
export const useIsQueueOperationsEnabled = () => {
@@ -114,6 +113,12 @@ export const useIsQueueOperationsEnabled = () => {
return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_QUEUE_OPERATIONS]
}
+export const useIsPlatformWebhooksEnabled = () => {
+ const { flags } = useFeaturePreviewContext()
+ const platformWebhooksEnabled = useFlag('platformWebhooks')
+ return platformWebhooksEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_PLATFORM_WEBHOOKS]
+}
+
export const useIsTableFilterBarEnabled = () => {
const { flags } = useFeaturePreviewContext()
return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_TABLE_FILTER_BAR]
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
index 2c4c5f7a2ba..ca9f986f09f 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -24,6 +24,7 @@ import { APISidePanelPreview } from './APISidePanelPreview'
import { Branching2Preview } from './Branching2Preview'
import { CLSPreview } from './CLSPreview'
import { useFeaturePreviewContext, useFeaturePreviewModal } from './FeaturePreviewContext'
+import { PlatformWebhooksPreview } from './PlatformWebhooksPreview'
import { PgDeltaDiffPreview } from './PgDeltaDiffPreview'
import { QueueOperationsPreview } from './QueueOperationsPreview'
import { TableFilterBarPreview } from './TableFilterBarPreview'
@@ -42,6 +43,7 @@ const FEATURE_PREVIEW_KEY_TO_CONTENT: {
[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]:
- {featurePreviews.length > 0 ? (
+ {allFeaturePreviews.length > 0 ? (
@@ -111,7 +115,7 @@ export const FeaturePreviewModal = () => {
onClick={() => selectFeaturePreview(feature.key)}
className={cn(
'flex items-center justify-between p-4 border-b cursor-pointer bg transition',
- selectedFeature.key === feature.key ? 'bg-surface-300' : 'bg-surface-100'
+ selectedFeature?.key === feature.key ? 'bg-surface-300' : 'bg-surface-100'
)}
>
- {FEATURE_PREVIEW_KEY_TO_CONTENT[selectedFeature.key]}
+ {FEATURE_PREVIEW_KEY_TO_CONTENT[selectedFeature?.key ?? '']}
) : (
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/PlatformWebhooksPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/PlatformWebhooksPreview.tsx
new file mode 100644
index 00000000000..a0824e80246
--- /dev/null
+++ b/apps/studio/components/interfaces/App/FeaturePreview/PlatformWebhooksPreview.tsx
@@ -0,0 +1,26 @@
+import { useParams } from 'common'
+
+import { InlineLink } from '@/components/ui/InlineLink'
+
+export const PlatformWebhooksPreview = () => {
+ const { slug = '_', ref = '_' } = useParams()
+
+ return (
+
-
- )}
+ Loading records count...
-
+ }
+ type="outline"
+ className="px-1.5"
+ disabled={page <= 1 || isLoading}
+ onClick={onPreviousPage}
+ />
- {isSuccess && (
- <>
-
+
}
- type="outline"
- className="px-1.5"
- disabled={page <= 1 || isLoading}
- onClick={onPreviousPage}
- />
-
-
- {!isForeignTableSelected && (
-
+
+
+ {isLoading ? (
+ } />
+ ) : isError ? (
+ Page
+ + setValue(e.target.value)} + onKeyDown={(e) => { + const parsedValue = Number(value) + if ( + (e.code === 'Enter' || e.code === 'NumpadEnter') && + !Number.isNaN(parsedValue) && + parsedValue >= 1 + ) { + onPageChange(parsedValue) + } + }} + /> + + {isSuccess && hasCountData && ( +of {totalPages.toLocaleString()}
+ )} + + } + type="outline" + className="px-1.5" + disabled={isLastPage} + onClick={onNextPage} + /> + +Page
- setValue(e.target.value)} - onKeyDown={(e) => { - const parsedValue = Number(value) - if ( - (e.code === 'Enter' || e.code === 'NumpadEnter') && - !Number.isNaN(parsedValue) && - parsedValue >= 1 && - parsedValue <= maxPages - ) { - onPageChange(parsedValue) - } - }} + type="text" + className="w-7" + loading={isFetching} + icon={of {totalPages.toLocaleString()}
- - } - type="outline" - className="px-1.5" - disabled={page >= maxPages || isLoading} - onClick={onNextPage} - /> - -
-
-
- }
- onClick={() => {
- // Show warning if either NOT a table entity, or table rows estimate is beyond threshold
- if (rowsCountEstimate === null || count > THRESHOLD_COUNT) {
- setIsConfirmFetchExactCountModalOpen(true)
- } else snap.setEnforceExactCount(true)
- }}
- />
-
-
- This is an estimated value as your table has more than{' '}
- {THRESHOLD_COUNT.toLocaleString()} rows.
- - Click to retrieve the exact count of the table. - -
-
- )}
-
+
+ - {`${countString} ${count === 0 || count > 1 ? `records` : 'record'}`}{' '} - {data.is_estimate ? '(estimated)' : ''} -
- - {data.is_estimate && ( -- - Click to retrieve the exact count of the table. - -
+ {hasCountData && (
+
+
+ }
+ onClick={() => {
+ // Show warning if either NOT a table entity, or table rows estimate is beyond threshold
+ if (rowsCountEstimate === null || count === -1 || count > THRESHOLD_COUNT) {
+ setIsConfirmFetchExactCountModalOpen(true)
+ } else {
+ snap.setEnforceExactCount(true)
+ }
+ }}
+ />
+
+
+ {hasCountData
+ ? `This is an estimated value as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`
+ : `Count not automatically loaded as your table has more than ${THRESHOLD_COUNT.toLocaleString()} rows.`}{' '}
+
+ Click to retrieve the exact count of the table. +
+
+ )}
+
+ ) : null}
+ {`${countString} ${count === 0 || count > 1 ? `records` : 'record'}`}{' '} + {data.is_estimate ? '(estimated)' : ''} +
)} - - )} - {isError && ( -- Error fetching records count. Please refresh the page. -
- )} + {data.is_estimate && ( ++ Click to retrieve the exact count of the table. +
@@ -150,7 +154,7 @@ export const FeaturePreviewModal = () => {
+
+ )
+}
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
index ce54a339df1..df3f9535d6c 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
+++ b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
@@ -14,11 +14,10 @@ type FeaturePreview = {
}
export const useFeaturePreviews = (): FeaturePreview[] => {
- const gitlessBranchingEnabled = useFlag('gitlessBranching')
- const advisorRulesEnabled = useFlag('advisorRules')
const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
const tableEditorNewFilterBar = useFlag('tableEditorNewFilterBar')
const pgDeltaDiffEnabled = useFlag('pgdeltaDiff')
+ const platformWebhooksEnabled = useFlag('platformWebhooks')
return [
{
@@ -34,7 +33,7 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_BRANCHING_2_0,
name: 'Branching via dashboard',
discussionsUrl: 'https://github.com/orgs/supabase/discussions/branching-2-0',
- enabled: gitlessBranchingEnabled,
+ enabled: true,
isNew: false,
isPlatformOnly: true,
isDefaultOptIn: false,
@@ -43,7 +42,7 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_ADVISOR_RULES,
name: 'Disable Advisor rules',
discussionsUrl: undefined,
- enabled: advisorRulesEnabled,
+ enabled: true,
isNew: false,
isPlatformOnly: true,
isDefaultOptIn: false,
@@ -58,6 +57,15 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
isDefaultOptIn: true,
enabled: pgDeltaDiffEnabled,
},
+ {
+ key: LOCAL_STORAGE_KEYS.UI_PREVIEW_PLATFORM_WEBHOOKS,
+ name: 'Platform webhooks',
+ discussionsUrl: undefined,
+ isNew: true,
+ isPlatformOnly: true,
+ isDefaultOptIn: false,
+ enabled: platformWebhooksEnabled,
+ },
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_API_SIDE_PANEL,
name: 'Project API documentation',
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.types.ts b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.types.ts
index af4bcc95c19..32667230f54 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.types.ts
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/AuthProvidersForm.types.ts
@@ -1,3 +1,5 @@
+import type { FeatureKey } from 'data/entitlements/entitlements-query'
+
export interface Enum {
label: string
value: string
@@ -22,7 +24,7 @@ export interface Provider {
descriptionOptional?: string
units?: string
isSecret?: boolean
- isPaid?: boolean
+ entitlementKey?: FeatureKey
link?: string
}
}
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index 594b16b7d37..160a08f3cd2 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -7,6 +7,7 @@ import { ResourceItem } from 'components/ui/Resource/ResourceItem'
import type { components } from 'data/api'
import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { useHasEntitlementAccess } from 'hooks/misc/useCheckEntitlements'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { BASE_PATH } from 'lib/constants'
import { Check } from 'lucide-react'
@@ -67,7 +68,7 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
)
}
- const isFreePlan = organization?.plan.id === 'free'
+ const hasEntitlementAccess = useHasEntitlementAccess()
const INITIAL_VALUES = (() => {
const initialValues: { [x: string]: string | boolean } = {}
@@ -201,18 +202,17 @@ export const ProviderForm = ({ config, provider, isActive }: ProviderFormProps)
)
}
+ const { entitlementKey } = provider.properties[x]
+ const hasAccess =
+ entitlementKey == null || hasEntitlementAccess(entitlementKey)
const properties = {
...provider.properties[x],
- description:
- provider.properties[x].isPaid && isFreePlan
- ? `${description} Only available on [Pro plan](/org/${organization.slug}/billing?panel=subscriptionPlan) and above.`
- : description,
+ description: hasAccess
+ ? description
+ : `${description} Only available on [Pro plan](/org/${organization?.slug}/billing?panel=subscriptionPlan) and above.`,
}
- const isDisabledDueToPlan = properties.isPaid && isFreePlan
const shouldDisable =
- properties.type === 'boolean'
- ? isDisabledDueToPlan && !values[x]
- : isDisabledDueToPlan
+ properties.type === 'boolean' ? !hasAccess && !values[x] : !hasAccess
return (
+ Configure webhook endpoints and review deliveries from both project and organization + settings pages. +
+-
+
-
+ Project scope:{' '}
+
Project Webhooks +
+ -
+ Organization scope:{' '}
+
Organization Webhooks +
+
-
+
+ {statements.length > 0 && (
+ - The following statements will be executed on the selected function: -
-
+
+ )}
) : (
+ The following statements will be executed on the selected function: +
+
@@ -470,7 +484,9 @@ export const CreateHookSheet = ({
className="rounded-l-none text-xs"
onClick={() => {
const authHookSecret = generateAuthHookSecret()
- form.setValue('httpsValues.secret', authHookSecret)
+ form.setValue('httpsValues.secret', authHookSecret, {
+ shouldDirty: true,
+ })
}}
>
Generate secret
@@ -494,7 +510,7 @@ export const CreateHookSheet = ({
)}
-
@@ -52,7 +56,7 @@ export const RAMWarnings = ({ isFreePlan, upgradeUrl, severity }: RAMWarningsPro
diff --git a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
index 954ad513a77..b760a5d613f 100644
--- a/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
+++ b/apps/studio/components/interfaces/Connect/ConnectTabContent.tsx
@@ -6,7 +6,7 @@ import { useProjectSettingsV2Query } from 'data/config/project-settings-v2-query
import { usePgbouncerConfigQuery } from 'data/database/pgbouncer-config-query'
import { useSupavisorConfigurationQuery } from 'data/database/supavisor-configuration-query'
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
-import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
import { pluckObjectFields } from 'lib/helpers'
import { useTrack } from 'lib/telemetry/track'
import { cn, CopyCallbackContext } from 'ui'
@@ -34,8 +34,7 @@ export const ConnectTabContent = forwardRef- There are unsaved changes. Are you sure you want to close the panel? Your changes will be - lost. -
-- There are unsaved changes. Are you sure you want to close the panel? Your changes will be - lost. -
-Error: {(error as any)?.message ?? 'Unknown'}
+Error: {error?.message ?? 'Unknown'}
} > diff --git a/apps/studio/components/interfaces/Database/Replication/ComingSoon.tsx b/apps/studio/components/interfaces/Database/Replication/ComingSoon.tsx deleted file mode 100644 index 0816a5cd1fe..00000000000 --- a/apps/studio/components/interfaces/Database/Replication/ComingSoon.tsx +++ /dev/null @@ -1,232 +0,0 @@ -import { ArrowRight, ArrowUpRight, Circle, Database, Plus } from 'lucide-react' -import { useTheme } from 'next-themes' -import Link from 'next/link' -import { useMemo } from 'react' -import ReactFlow, { Background, Handle, Position, ReactFlowProvider } from 'reactflow' - -import 'reactflow/dist/style.css' - -import { useParams } from 'common' -import { BASE_PATH } from 'lib/constants' -import { Button, Card, CardContent } from 'ui' - -import { NODE_WIDTH } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants' - -const STATIC_NODES = [ - { - id: '1', - type: 'primary', - data: { - label: 'Primary Database', - region: 'East US (Ohio)', - provider: 'AWS', - regionIcon: 'us-east-1', - }, - position: { x: 825, y: 0 }, - }, - { - id: '2', - type: 'replica', - data: { - label: 'Iceberg', - details: '3 tables', - regionIcon: 'us-west-1', - }, - position: { x: 875, y: 110 }, - }, - { - id: '3', - type: 'replica', - data: { - label: 'BigQuery', - details: '5 tables', - regionIcon: 'us-west-1', - }, - position: { x: 875, y: 200 }, - }, - { - id: '4', - type: 'blank', - position: { x: 875, y: 290 }, - data: {}, - }, - { - id: '5', - type: 'cta', - position: { x: 125, y: 20 }, - data: {}, - }, -] - -const STATIC_EDGES = [ - { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', animated: true }, - { id: 'e1-3', source: '1', target: '3', type: 'smoothstep', animated: true }, - { id: 'e1-4', source: '1', target: '4', type: 'smoothstep', animated: true }, -] - -export const ReplicationComingSoon = () => { - return ( -
-
-
-
- )
-}
-
-const PrimaryNode = ({
- data,
-}: {
- data: { label: string; region: string; provider: string; regionIcon: string }
-}) => {
- return (
-
-
- )
-}
-const ReplicaNode = ({
- data,
-}: {
- data: { label: string; details: string; regionIcon: string }
-}) => {
- return (
-
-
-
-
-
-
-
-
- {data.label}
-- {data.region} -
-- {data.provider} -
-
- 
-
-
-
-
- )
-}
-
-const BlankNode = () => {
- return (
-
-
-
-
-
-
-
- {data.label}
-- {data.details} -
-
-
-
-
-
-
- )
-}
-
-const CTANode = ({ projectRef }: { projectRef: string }) => {
- return (
-
-
-
-
-
-
- Stream database changes to external destinations
-- Automatically replicate your data to external data warehouses and analytics platforms in - real-time. No manual exports, no lag. -
-- We are currently in private alpha and slowly - onboarding new customers to ensure stable data pipelines. Request access below to join the - waitlist. Read replicas are available now. -
-
- }>
-
- Request alpha access
-
-
- }>
-
- Create a read replica
-
-
-
-
@@ -147,7 +141,7 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
BigQuery
- {unifiedReplication &&Send data to Google Cloud's data warehouse for analytics and business intelligence @@ -108,7 +108,7 @@ export const DestinationTypeSelection = () => {
Analytics Bucket
- {unifiedReplication &&
Send data to Apache Iceberg tables in your Supabase Storage for flexible analytics
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index 76b467a77de..0c9c8343e1a 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -1,13 +1,11 @@
import { useQueryClient } from '@tanstack/react-query'
-import { useFlag, useParams } from 'common'
+import { useParams } from 'common'
import { AlertError } from 'components/ui/AlertError'
import { DocsButton } from 'components/ui/DocsButton'
import { useReplicationDestinationsQuery } from 'data/replication/destinations-query'
import { replicationKeys } from 'data/replication/keys'
import { fetchReplicationPipelineVersion } from 'data/replication/pipeline-version-query'
import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query'
-import { useReplicationSourcesQuery } from 'data/replication/sources-query'
-import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
import { DOCS_URL } from 'lib/constants'
import { Plus, Search, X } from 'lucide-react'
import { parseAsStringEnum, useQueryState } from 'nuqs'
@@ -16,13 +14,13 @@ import {
Button,
Card,
CardContent,
+ cn,
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
- cn,
} from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
@@ -31,18 +29,27 @@ import { REPLICA_STATUS } from '../../Settings/Infrastructure/InfrastructureConf
import { DestinationPanel } from './DestinationPanel/DestinationPanel'
import { DestinationType } from './DestinationPanel/DestinationPanel.types'
import { DestinationRow } from './DestinationRow'
-import { EnableReplicationCallout } from './EnableReplicationCallout'
import { PIPELINE_ERROR_MESSAGES } from './Pipeline.utils'
import { ReadReplicaRow } from './ReadReplicas/ReadReplicaRow'
+import { useIsETLBigQueryPrivateAlpha, useIsETLIcebergPrivateAlpha } from './useIsETLPrivateAlpha'
import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
+import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
export const Destinations = () => {
const queryClient = useQueryClient()
const { ref: projectRef } = useParams()
- const { hasAccess: hasETLReplicationAccess, isLoading: isLoadingEntitlement } =
- useCheckEntitlements('replication.etl')
- const unifiedReplication = useFlag('unifiedReplication')
+ const etlEnableBigQuery = useIsETLBigQueryPrivateAlpha()
+ const etlEnableIceberg = useIsETLIcebergPrivateAlpha()
+ const { infrastructureReadReplicas } = useIsFeatureEnabled(['infrastructure:read_replicas'])
+
+ const newDestinationDefaultType = infrastructureReadReplicas
+ ? 'Read Replica'
+ : etlEnableBigQuery
+ ? 'BigQuery'
+ : etlEnableIceberg
+ ? 'Analytics Bucket'
+ : null
const prefetchedRef = useRef(false)
const [filterString, setFilterString] = useState
- {(unifiedReplication || !!sourceId) && (
- }
- onClick={() => setDestinationType('Read Replica')}
- >
- Add destination
-
- )}
+ }
+ disabled={!newDestinationDefaultType}
+ onClick={() => setDestinationType(newDestinationDefaultType)}
+ >
+ Add destination
+
{hasErrorsFetchingData && (
@@ -231,16 +216,15 @@ export const Destinations = () => {
-
-
-
+
+
+ Authorized apps
+
+ Applications that have access to your organization's settings and projects
+
+
+
+
+ {isLoadingAuthorizedApps || isLoadingPermissions ? (
+
Authorized Apps
-- Applications that have access to your organization's settings and projects -
+
+
+ ) : !canReadOAuthApps ? (
+
- {isLoadingAuthorizedApps || isLoadingPermissions ? (
- ,
-
-
- ) : !canReadOAuthApps ? (
-
-
- ) : (
- - You do not have any authorized applications yet -
-
+ Delivery details
+ {selectedDelivery && (
+
+ {formatDeliveryStatus(selectedDelivery.status)}
+
+ )}
+
+
+
+
+
+
+
+ onTabChange(value as 'event' | 'response')}
+ >
+
+
+ Event
+
+
+ Response
+
+
+
+
+
+
+
+
+
+
+
+
+ Delivery ID
+{selectedDelivery.id}
+
+
+ Attempt
++ {deliveryAttempt ? `#${deliveryAttempt}` : '-'} +
+
+
+ Timestamp
+
+
+ Response code
+ {selectedDelivery.responseCode ? ( +
+
+ Event type
+{selectedDelivery.eventType}
+
+
+ Event ID
+{selectedDelivery.id}
+
+
+ Event timestamp
+
+
+
+
+ Payload
+ } + onClick={() => onCopy(deliveryEventPayload, 'event payload')} + > + Copy + +
+
+
+ {deliveryEventPayload}
+
+
+
+ {formatDeliveryStatus(selectedDelivery.status)}
+
+
+ Status
+
+
+ Response code
+ {selectedDelivery.responseCode ? ( +
+
+
+
+ Response payload
+ } + onClick={() => onCopy(deliveryResponsePayload, 'response payload')} + > + Copy + +
+
+
+ {deliveryResponsePayload}
+
+
+ {label}
+ {children}
+
+)
+
+interface PlatformWebhooksEndpointDetailsProps {
+ deliverySearch: string
+ filteredDeliveries: WebhookDelivery[]
+ selectedEndpoint: WebhookEndpoint
+ onDeliverySearchChange: (value: string) => void
+ onOpenDelivery: (deliveryId: string) => void
+}
+
+export const PlatformWebhooksEndpointDetails = ({
+ deliverySearch,
+ filteredDeliveries,
+ selectedEndpoint,
+ onDeliverySearchChange,
+ onOpenDelivery,
+}: PlatformWebhooksEndpointDetailsProps) => {
+ const hasCustomHeaders = selectedEndpoint.customHeaders.length > 0
+
+ return (
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
new file mode 100644
index 00000000000..41015c161ef
--- /dev/null
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
@@ -0,0 +1,232 @@
+import { ChevronRight, Eye, MoreVertical, Plus, Search, Trash2 } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { useMemo, useState } from 'react'
+
+import { createNavigationHandler } from 'lib/navigation'
+import {
+ Badge,
+ Button,
+ Card,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeadSort,
+ TableHeader,
+ TableRow,
+} from 'ui'
+import { EmptyStatePresentational, TimestampInfo } from 'ui-patterns'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import type { WebhookEndpoint } from './PlatformWebhooks.types'
+
+interface PlatformWebhooksEndpointListProps {
+ filteredEndpoints: WebhookEndpoint[]
+ search: string
+ webhooksHref: string
+ onCreateEndpoint: () => void
+ onDeleteEndpoint: (endpointId: string) => void
+ onSearchChange: (value: string) => void
+ onViewEndpoint: (endpointId: string) => void
+}
+
+export const PlatformWebhooksEndpointList = ({
+ filteredEndpoints,
+ search,
+ webhooksHref,
+ onCreateEndpoint,
+ onDeleteEndpoint,
+ onSearchChange,
+ onViewEndpoint,
+}: PlatformWebhooksEndpointListProps) => {
+ const router = useRouter()
+ const formatEventCount = (eventTypes: string[]) => {
+ if (eventTypes.includes('*')) return 'All events'
+ if (eventTypes.length === 1) return '1 event'
+ return `${eventTypes.length} events`
+ }
+ const [sort, setSort] = useState<'status:asc' | 'status:desc' | 'created:asc' | 'created:desc'>(
+ 'created:desc'
+ )
+
+ const [sortColumn, sortDirection] = sort.split(':') as ['status' | 'created', 'asc' | 'desc']
+
+ const getAriaSort = (column: 'status' | 'created') => {
+ if (sortColumn !== column) return 'none'
+ return sortDirection === 'asc' ? 'ascending' : 'descending'
+ }
+
+ const handleSortChange = (column: 'status' | 'created') => {
+ if (sortColumn !== column) {
+ setSort(`${column}:asc`)
+ return
+ }
+
+ setSort(`${column}:${sortDirection === 'asc' ? 'desc' : 'asc'}`)
+ }
+
+ const sortedEndpoints = useMemo(() => {
+ const items = [...filteredEndpoints]
+
+ items.sort((a, b) => {
+ if (sortColumn === 'status') {
+ const statusA = a.enabled ? 'enabled' : 'disabled'
+ const statusB = b.enabled ? 'enabled' : 'disabled'
+ const comparison = statusA.localeCompare(statusB)
+
+ if (comparison !== 0) return sortDirection === 'asc' ? comparison : -comparison
+ }
+
+ const createdComparison = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+ return sortDirection === 'asc' ? createdComparison : -createdComparison
+ })
+
+ return items
+ }, [filteredEndpoints, sortColumn, sortDirection])
+
+ return (
+
+
+
+
+
+
+
+ Overview
+-
+
+ {eventType}
+
+ ))}
+
+ {selectedEndpoint.customHeaders.map((header) => (
+
+
+
+ ))}
+ {header.key}:
+ {header.value}
+
+
+
+
+
+
+ Deliveries
+
+ }
+ value={deliverySearch}
+ className="w-full lg:w-52"
+ onChange={(event) => onDeliverySearchChange(event.target.value)}
+ />
+
+ {filteredDeliveries.length} total
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
new file mode 100644
index 00000000000..42bd837657f
--- /dev/null
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointSheet.tsx
@@ -0,0 +1,581 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { InlineLink } from 'components/ui/InlineLink'
+import { DiscardChangesConfirmationDialog } from 'components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
+import { useConfirmOnClose } from 'hooks/ui/useConfirmOnClose'
+import { ChevronDown, Trash2 } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { useFieldArray, useForm } from 'react-hook-form'
+import {
+ Accordion_Shadcn_ as Accordion,
+ AccordionContent_Shadcn_ as AccordionContent,
+ AccordionItem_Shadcn_ as AccordionItem,
+ AccordionTrigger_Shadcn_ as AccordionTrigger,
+ Button,
+ Checkbox_Shadcn_ as Checkbox,
+ cn,
+ Form_Shadcn_,
+ FormControl_Shadcn_,
+ FormField_Shadcn_,
+ Input_Shadcn_ as InputField,
+ Label_Shadcn_ as Label,
+ Separator,
+ Sheet,
+ SheetContent,
+ SheetFooter,
+ SheetHeader,
+ SheetSection,
+ SheetTitle,
+ Switch,
+ TextArea_Shadcn_ as Textarea,
+} from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import * as z from 'zod'
+
+import type {
+ UpsertWebhookEndpointInput,
+ WebhookEndpoint,
+ WebhookScope,
+} from './PlatformWebhooks.types'
+
+const endpointFormSchema = z
+ .object({
+ url: z.string().trim().url('Please enter a valid URL'),
+ description: z.string().trim().max(512, 'Description cannot exceed 512 characters'),
+ enabled: z.boolean().default(true),
+ subscribeAll: z.boolean().default(false),
+ eventTypes: z.array(z.string()).default([]),
+ customHeaders: z
+ .array(
+ z.object({
+ key: z.string().trim(),
+ value: z.string().trim(),
+ })
+ )
+ .default([]),
+ })
+ .superRefine((data, ctx) => {
+ if (!data.subscribeAll && data.eventTypes.length === 0) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: 'Select at least one event type',
+ path: ['eventTypes'],
+ })
+ }
+ })
+
+export type EndpointFormValues = z.infer
+
+ Endpoints
+
+ }
+ value={search}
+ className="w-full lg:w-52"
+ onChange={(event) => onSearchChange(event.target.value)}
+ />
+ } onClick={onCreateEndpoint}>
+ New endpoint
+
+
+
+ {filteredEndpoints.length === 0 ? (
+
+
+
+ Signing secret
+ {}}
+ onCopy={() => toast.success('Copied signing secret')}
+ />
+
+
+
+ Query pattern
- {showExplainWithAiInQueryPerformance && ( - 0
+ case
+ when (statements.shared_blks_hit + statements.shared_blks_read) > 0
then round(
- (statements.shared_blks_hit * 100.0) /
- (statements.shared_blks_hit + statements.shared_blks_read),
+ (statements.shared_blks_hit * 100.0) /
+ (statements.shared_blks_hit + statements.shared_blks_read),
2
)
else 0
@@ -430,7 +430,8 @@ select
}
from pg_stat_statements as statements
inner join pg_authid as auth on statements.userid = auth.oid
- ${where || ''}
+ -- skip queries that were never actually executed
+ WHERE statements.calls > 0 ${where ? where.replace(/^WHERE/, 'AND') : ''}
${orderBy || 'order by statements.calls desc'}
limit 20`,
},
@@ -440,6 +441,11 @@ select
-- reports-query-performance-most-time-consuming
set search_path to public, extensions;
+-- compute total time once up front so we don't need a window function over all rows
+with grand_total as (
+ select coalesce(nullif(sum(total_exec_time + total_plan_time), 0), 1) as v
+ from pg_stat_statements where calls > 0
+)
select
auth.rolname,
statements.query,
@@ -448,7 +454,7 @@ select
statements.mean_exec_time + statements.mean_plan_time as mean_time,
coalesce(
((statements.total_exec_time + statements.total_plan_time) /
- nullif(sum(statements.total_exec_time + statements.total_plan_time) OVER(), 0)) *
+ (select v from grand_total)) *
100,
0
) as prop_total_time${
@@ -473,7 +479,8 @@ select
}
from pg_stat_statements as statements
inner join pg_authid as auth on statements.userid = auth.oid
- ${where || ''}
+ -- skip queries that were never actually executed
+ WHERE statements.calls > 0 ${where ? where.replace(/^WHERE/, 'AND') : ''}
${orderBy || 'order by total_time desc'}
limit 20`,
},
@@ -519,7 +526,8 @@ select
}
from pg_stat_statements as statements
inner join pg_authid as auth on statements.userid = auth.oid
- ${where || ''}
+ -- skip queries that were never actually executed
+ WHERE statements.calls > 0 ${where ? where.replace(/^WHERE/, 'AND') : ''}
${orderBy || 'order by max_time desc'}
limit 20`,
},
@@ -543,7 +551,12 @@ select
-- reports-query-performance-unified
set search_path to public, extensions;
- with base as (
+ -- compute total time once up front so we don't need a window function over all rows
+ with grand_total as (
+ select coalesce(nullif(sum(total_exec_time + total_plan_time), 0), 1) as v
+ from pg_stat_statements where calls > 0
+ ),
+ base as (
select
auth.rolname,
statements.query,
@@ -564,13 +577,14 @@ select
end as cache_hit_rate,
coalesce(
((statements.total_exec_time + statements.total_plan_time) /
- nullif(sum(statements.total_exec_time + statements.total_plan_time) OVER(), 0)) *
+ (select v from grand_total)) *
100,
0
) as prop_total_time
from pg_stat_statements as statements
inner join pg_authid as auth on statements.userid = auth.oid
- ${where || ''}
+ -- skip queries that were never actually executed
+ WHERE statements.calls > 0 ${where ? where.replace(/^WHERE/, 'AND') : ''}
${orderBy || 'order by total_time desc'}
limit 50
),
@@ -615,28 +629,30 @@ select
-- Count of slow queries (> 1 second average)
SELECT count(*) as slow_queries_count
- FROM pg_stat_statements
- WHERE statements.mean_exec_time > 1000;`,
+ -- alias needed to reference columns in WHERE
+ FROM pg_stat_statements as statements
+ -- skip never-executed queries; mean_exec_time > 1000ms = avg over 1 second
+ WHERE statements.calls > 0 AND statements.mean_exec_time > 1000;`,
},
queryMetrics: {
queryType: 'db',
sql: (_params, where, orderBy, runIndexAdvisor = false, filterIndexAdvisor = false) => `
-- reports-query-performance-metrics
set search_path to public, extensions;
-
- SELECT
+
+ SELECT
COALESCE(ROUND(AVG(statements.rows::numeric / NULLIF(statements.calls, 0)), 1), 0) as avg_rows_per_call,
COUNT(*) FILTER (WHERE statements.total_exec_time + statements.total_plan_time > 1000) as slow_queries,
COALESCE(
ROUND(
- SUM(statements.shared_blks_hit) * 100.0 /
- NULLIF(SUM(statements.shared_blks_hit + statements.shared_blks_read), 0),
+ SUM(statements.shared_blks_hit) * 100.0 /
+ NULLIF(SUM(statements.shared_blks_hit + statements.shared_blks_read), 0),
2
), 0
) || '%' as cache_hit_rate
FROM pg_stat_statements as statements
- WHERE statements.calls > 0
- ${where || ''}
+ -- skip queries that were never actually executed
+ WHERE statements.calls > 0 ${where ? where.replace(/^WHERE/, 'AND') : ''}
${orderBy || ''}`,
},
},
diff --git a/apps/studio/components/interfaces/Reports/Reports.queryPerformance.test.ts b/apps/studio/components/interfaces/Reports/Reports.queryPerformance.test.ts
new file mode 100644
index 00000000000..4e5df19a8ef
--- /dev/null
+++ b/apps/studio/components/interfaces/Reports/Reports.queryPerformance.test.ts
@@ -0,0 +1,116 @@
+import { describe, expect, it } from 'vitest'
+
+import { PRESET_CONFIG } from './Reports.constants'
+import { Presets } from './Reports.types'
+
+const queries = PRESET_CONFIG[Presets.QUERY_PERFORMANCE].queries as Record<
+ string,
+ { sql: (...args: any[]) => string }
+>
+
+const queryNames = [
+ 'mostFrequentlyInvoked',
+ 'mostTimeConsuming',
+ 'slowestExecutionTime',
+ 'unified',
+ 'slowQueriesCount',
+ 'queryMetrics',
+] as const
+
+describe('QUERY_PERFORMANCE SQL queries', () => {
+ describe('calls > 0 base filter', () => {
+ it.each(queryNames)('%s includes calls > 0 without user filters', (name) => {
+ const sql = queries[name].sql([], undefined, undefined)
+ expect(sql).toContain('calls > 0')
+ })
+
+ it.each(queryNames)('%s still includes calls > 0 when user filters are provided', (name) => {
+ const sql = queries[name].sql([], "WHERE auth.rolname in ('postgres')", undefined)
+ expect(sql).toContain('calls > 0')
+ })
+ })
+
+ describe('WHERE clause composition with user filters', () => {
+ const userWhere = "WHERE auth.rolname in ('postgres')"
+
+ it.each([
+ 'mostFrequentlyInvoked',
+ 'mostTimeConsuming',
+ 'slowestExecutionTime',
+ 'unified',
+ ] as const)('%s: user filters appended with AND (no duplicate WHERE)', (name) => {
+ const sql = queries[name].sql([], userWhere, undefined)
+ // Should not have two WHERE keywords in a row / duplicate WHERE
+ expect(sql).not.toMatch(/WHERE\s+.*WHERE/s)
+ // User filter condition should be present
+ expect(sql).toContain("auth.rolname in ('postgres')")
+ // Should use AND to join base filter and user filter
+ expect(sql).toMatch(/calls > 0\s+AND/)
+ })
+
+ it('queryMetrics: user filters appended with AND (no duplicate WHERE in FROM clause)', () => {
+ const sql = queries.queryMetrics.sql([], userWhere, undefined)
+ // queryMetrics uses COUNT(*) FILTER (WHERE ...) which is valid SQL and not a duplicate
+ // Just verify the base filter + user filter are correctly composed
+ expect(sql).toContain("auth.rolname in ('postgres')")
+ expect(sql).toMatch(/calls > 0\s+AND/)
+ // Should not have two WHERE keywords after the FROM keyword
+ expect(sql).not.toMatch(/FROM[\s\S]*WHERE[\s\S]*WHERE[\s\S]*WHERE/s)
+ })
+
+ it.each([
+ 'mostFrequentlyInvoked',
+ 'mostTimeConsuming',
+ 'slowestExecutionTime',
+ 'unified',
+ 'queryMetrics',
+ ] as const)('%s: no trailing junk when no user filters', (name) => {
+ const sql = queries[name].sql([], undefined, undefined)
+ // Should not have a dangling undefined or 'WHERE' with nothing after the base filter
+ expect(sql).not.toContain('undefined')
+ expect(sql).not.toMatch(/calls > 0\s+AND\s+(ORDER|LIMIT|$)/im)
+ })
+ })
+
+ describe('slowQueriesCount bug fix', () => {
+ it('uses table alias "statements"', () => {
+ const sql = queries.slowQueriesCount.sql()
+ expect(sql).toContain('pg_stat_statements as statements')
+ })
+
+ it('filters by mean_exec_time using the alias', () => {
+ const sql = queries.slowQueriesCount.sql()
+ expect(sql).toContain('statements.mean_exec_time > 1000')
+ })
+ })
+
+ describe('window function elimination', () => {
+ it('unified uses grand_total CTE instead of OVER()', () => {
+ const sql = queries.unified.sql([], undefined, undefined)
+ expect(sql).toContain('grand_total')
+ expect(sql).not.toContain('OVER()')
+ })
+
+ it('mostTimeConsuming uses grand_total CTE instead of OVER()', () => {
+ const sql = queries.mostTimeConsuming.sql([], undefined, undefined)
+ expect(sql).toContain('grand_total')
+ expect(sql).not.toContain('OVER()')
+ })
+
+ it('grand_total CTE references calls > 0', () => {
+ const sql = queries.unified.sql([], undefined, undefined)
+ expect(sql).toMatch(/grand_total[\s\S]*calls > 0/)
+ })
+ })
+
+ describe('multiple user filters', () => {
+ it('handles multiple user filter conditions', () => {
+ const multiWhere = "WHERE auth.rolname in ('postgres') AND statements.calls >= 10"
+ const sql = queries.mostFrequentlyInvoked.sql([], multiWhere, undefined)
+ expect(sql).toContain('calls > 0')
+ expect(sql).toContain("auth.rolname in ('postgres')")
+ expect(sql).toContain('statements.calls >= 10')
+ expect(sql).not.toMatch(/WHERE\s+.*WHERE/s)
+ })
+ })
+})
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
index ec707ca748e..a0f859553ee 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
@@ -96,10 +96,10 @@ const UserImpersonationSelector = () => {
setPreviousSearches((prev) => {
// Remove if already present
const filtered = prev.filter((u) => u.id !== user.id)
- // Add new user to the end
- const updated = [...filtered, user]
+ // Add new user to the start of the list (last used first)
+ const updated = [user, ...filtered]
// Keep only the last 6
- return updated.slice(-6)
+ return updated.slice(0, 5)
})
if (customAccessTokenHookDetails?.type === 'https') {
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
new file mode 100644
index 00000000000..5b990eb7dc2
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/API/ExposedSchemaSelector.tsx
@@ -0,0 +1,143 @@
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import {
+ Button,
+ cn,
+ Command_Shadcn_,
+ CommandEmpty_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ Popover_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ ScrollArea,
+} from 'ui'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { useSchemasQuery } from '@/data/database/schemas-query'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { INTERNAL_SCHEMAS } from '@/hooks/useProtectedSchemas'
+import { pluralize } from '@/lib/helpers'
+
+interface ExposedSchemaSelectorProps {
+ disabled?: boolean
+ selectedSchemas: string[]
+ onToggleSchema: (schema: string) => void
+}
+
+export const ExposedSchemaSelector = ({
+ disabled = false,
+ selectedSchemas,
+ onToggleSchema,
+}: ExposedSchemaSelectorProps) => {
+ const [open, setOpen] = useState(false)
+
+ const { data: project } = useSelectedProjectQuery()
+
+ const {
+ data: allSchemas,
+ isPending,
+ isError,
+ isSuccess,
+ } = useSchemasQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const schemas = useMemo(
+ () =>
+ (allSchemas ?? [])
+ .filter((s) => {
+ if (s.name === 'graphql_public') return true
+ return !INTERNAL_SCHEMAS.includes(s.name)
+ })
+ .sort((a, b) => a.name.localeCompare(b.name)),
+ [allSchemas]
+ )
+
+ const selectedSet = useMemo(() => new Set(selectedSchemas), [selectedSchemas])
+ const selectedCount = schemas.filter((s) => selectedSet.has(s.name)).length
+
+ return (
+
+
+ }
+ >
+
+
+
+
+
+ {isPending ? (
+ <>
+
+
+ 7 ? 'h-[210px]' : ''}>
+ {schemas.map((schema) => {
+ const isExposed = selectedSet.has(schema.name)
+
+ return (
+ {
+ onToggleSchema(schema.name)
+ }}
+ >
+
+ )
+ })}
+
+
+ )}
+
+
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
new file mode 100644
index 00000000000..18371b96ad7
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/API/ExposedTableSelector.tsx
@@ -0,0 +1,305 @@
+import { keepPreviousData, useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { useDebounce, useIntersectionObserver } from '@uidotdev/usehooks'
+import { Check, ChevronsUpDown, CircleAlert, Info } from 'lucide-react'
+import { useEffect, useMemo, useRef, useState } from 'react'
+import {
+ Button,
+ cn,
+ Command_Shadcn_,
+ CommandGroup_Shadcn_,
+ CommandInput_Shadcn_,
+ CommandItem_Shadcn_,
+ CommandList_Shadcn_,
+ Popover_Shadcn_,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ ScrollArea,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from 'ui'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { exposedTableCountsQueryOptions } from '@/data/privileges/exposed-table-counts-query'
+import { exposedTablesInfiniteQueryOptions } from '@/data/privileges/exposed-tables-infinite-query'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { pluralize } from '@/lib/helpers'
+
+interface ExposedTableSelectorProps {
+ className?: string
+ disabled?: boolean
+ selectedSchemas: string[]
+ pendingAddTableIds: number[]
+ pendingRemoveTableIds: number[]
+ onTogglePendingAdd: (tableId: number) => void
+ onTogglePendingRemove: (tableId: number) => void
+}
+
+export const ExposedTableSelector = ({
+ className,
+ disabled = false,
+ selectedSchemas,
+ pendingAddTableIds,
+ pendingRemoveTableIds,
+ onTogglePendingAdd,
+ onTogglePendingRemove,
+}: ExposedTableSelectorProps) => {
+ const [open, setOpen] = useState(false)
+ const [search, setSearch] = useState('')
+ const debouncedSearch = useDebounce(search, 300)
+
+ const { data: project } = useSelectedProjectQuery()
+
+ const scrollRootRef = useRef(null)
+ const [sentinelRef, entry] = useIntersectionObserver({
+ root: scrollRootRef.current,
+ threshold: 0,
+ rootMargin: '0px',
+ })
+
+ const { data: countsData, isPending: isCountsPending } = useQuery({
+ ...exposedTableCountsQueryOptions({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ selectedSchemas,
+ }),
+ placeholderData: keepPreviousData,
+ })
+ const pendingCount = pendingAddTableIds.length + pendingRemoveTableIds.length
+
+ const totalCount = countsData?.total_count ?? 0
+ const grantsCount = countsData?.grants_count ?? 0
+
+ const { data, isPending, isError, isFetching, isFetchingNextPage, hasNextPage, fetchNextPage } =
+ useInfiniteQuery({
+ ...exposedTablesInfiniteQueryOptions({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ search: search.length === 0 ? undefined : debouncedSearch || undefined,
+ }),
+ placeholderData: search.length > 0 ? keepPreviousData : undefined,
+ })
+
+ const tables = useMemo(() => data?.pages.flatMap((page) => page.tables) ?? [], [data?.pages])
+
+ const pendingAddSet = useMemo(() => new Set(pendingAddTableIds), [pendingAddTableIds])
+ const pendingRemoveSet = useMemo(() => new Set(pendingRemoveTableIds), [pendingRemoveTableIds])
+
+ useEffect(() => {
+ if (!isPending && !isFetching && entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage()
+ }
+ }, [entry?.isIntersecting, hasNextPage, isFetching, isFetchingNextPage, isPending, fetchNextPage])
+
+ return (
+ >({
resolver: zodResolver(formSchema),
@@ -123,43 +152,81 @@ export const PostgrestConfig = () => {
defaultValues,
})
- const schemas =
- allSchemas
- .filter((x) => {
- const find = indexOf(hiddenSchema, x.name)
- if (find < 0) return x
- })
- .map((x) => {
- return {
- id: x.id,
- value: x.name,
- name: x.name,
- disabled: false,
- }
- }) ?? []
-
const resetForm = useCallback(() => {
form.reset({ ...defaultValues })
}, [form, defaultValues])
const onSubmit = async (values: z.infer) => {
- if (!projectRef) return console.error('Project ref is required') // is this needed ?
+ if (!projectRef) return console.error('Project ref is required')
- updatePostgrestConfig({
- projectRef,
- dbSchema: values.dbSchema.join(', '),
- maxRows: values.maxRows,
- dbExtraSearchPath: values.dbExtraSearchPath.join(','),
- dbPool: values.dbPool ? values.dbPool : null,
- })
+ setIsUpdating(true)
+
+ try {
+ let dbSchema = values.dbSchema.join(',')
+
+ if (isApiGrantTogglesEnabled) {
+ await updateExposedTables({
+ projectRef,
+ connectionString: project?.connectionString,
+ tableIdsToAdd: values.tableIdsToAdd,
+ tableIdsToRemove: values.tableIdsToRemove,
+ })
+ }
+
+ await updatePostgrestConfig(
+ {
+ projectRef,
+ dbSchema,
+ maxRows: values.maxRows,
+ dbExtraSearchPath: values.dbExtraSearchPath.join(','),
+ dbPool: values.dbPool ? values.dbPool : null,
+ },
+ { onError: noop }
+ )
+
+ await Promise.all([
+ queryClient.invalidateQueries({
+ queryKey: privilegeKeys.exposedTablesInfinite(projectRef),
+ }),
+ queryClient.invalidateQueries({
+ queryKey: privilegeKeys.exposedTableCounts(projectRef, watchedDbSchema),
+ }),
+ ])
+
+ toast.success('Successfully saved settings')
+ form.reset({
+ dbSchema: dbSchema
+ .split(',')
+ .map((x) => x.trim())
+ .filter(Boolean),
+ maxRows: values.maxRows,
+ dbExtraSearchPath: values.dbExtraSearchPath,
+ dbPool: values.dbPool,
+ tableIdsToAdd: [],
+ tableIdsToRemove: [],
+ })
+ } catch (error) {
+ toast.error('Failed to save settings: ' + (error as ResponseError).message || 'Unknown error')
+ } finally {
+ setIsUpdating(false)
+ }
}
+ const resetFormRef = useLatest(resetForm)
+ const isReady = isSuccessConfig && isSuccessSchemas
useEffect(() => {
- if (config && isSuccessSchemas) {
- resetForm()
+ if (isReady) {
+ resetFormRef.current()
}
- }, [config, isSuccessSchemas, resetForm])
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isReady])
+ const watchedDbSchema = useWatch_Shadcn_({ control: form.control, name: 'dbSchema' })
+ const watchedTableIdsToAdd = useWatch_Shadcn_({ control: form.control, name: 'tableIdsToAdd' })
+ const watchedTableIdsToRemove = useWatch_Shadcn_({
+ control: form.control,
+ name: 'tableIdsToRemove',
+ })
return (
@@ -176,88 +243,170 @@ export const PostgrestConfig = () => {
) : (
<>
-
- (
-
-
- {isLoadingSchemas ? (
-
-
-
- {schemas.length <= 0 ? (
-
- no
-
- ) : (
- schemas.map((x) => (
-
- {x.name}
-
- ))
- )}
-
-
-
- )}
-
- {!field.value.includes('public') && field.value.length > 0 && (
-
-
+ {isApiGrantTogglesEnabled ? (
+
+
+ {
+ const current = form.getValues('dbSchema')
+ if (current.includes(schema)) {
+ form.setValue(
+ 'dbSchema',
+ current.filter((x) => x !== schema),
+ { shouldDirty: true }
+ )
+ } else {
+ form.setValue('dbSchema', [...current, schema], {
+ shouldDirty: true,
+ })
+ }
+ }}
+ />
+
+
+
+ {
+ const current = form.getValues('tableIdsToAdd')
+ if (current.includes(tableId)) {
+ form.setValue(
+ 'tableIdsToAdd',
+ current.filter((x) => x !== tableId),
+ { shouldDirty: true }
+ )
+ } else {
+ form.setValue('tableIdsToAdd', [...current, tableId], {
+ shouldDirty: true,
+ })
+ }
+ }}
+ onTogglePendingRemove={(tableId) => {
+ const current = form.getValues('tableIdsToRemove')
+ if (current.includes(tableId)) {
+ form.setValue(
+ 'tableIdsToRemove',
+ current.filter((x) => x !== tableId),
+ { shouldDirty: true }
+ )
+ } else {
+ form.setValue('tableIdsToRemove', [...current, tableId], {
+ shouldDirty: true,
+ })
+ }
+ }}
+ />
+
+
+ {watchedDbSchema.length === 0 && (
+
+
+ ) : (
+
+ (
+
+
+ {isLoadingSchemas ? (
+
+
+
+ {schemas.length <= 0 ? (
+
+ no
+
+ ) : (
+ schemas.map((x) => (
+
+ {x.name}
+
+ ))
+ )}
+
+
+
+ )}
+
+ {!field.value.includes('public') && field.value.length > 0 && (
+
+
+ )}
+ />
+
+ )}
{
const { resolvedTheme } = useTheme()
const { ref: projectRef } = useParams()
const { setPanel } = useAddonsPagePanel()
+ const isAws = useIsAwsCloudProvider()
const isProjectActive = useIsProjectActive()
const isOrioleDbInAws = useIsOrioleDbInAws()
@@ -184,7 +186,7 @@ export const Addons = () => {
)}
-
+
-
+
+
+
+ + {isSuccess + ? `${selectedCount} of ${schemas.length} ${pluralize(schemas.length, 'schema')} exposed` + : 'Loading schemas...'} +
+
+
+
+
+
+ ) : isError ? (
+
+
+ ) : (
+ <>
+ Failed to retrieve schemas
++ No schemas found +
+
+ {isExposed &&
+
+
+
+
+ }
+ >
+
+
+
+
+
+ {isPending ? (
+ <>
+ 7 ? 'h-[210px]' : ''}
+ >
+ {tables.map((table) => {
+ const isSchemaExposed = selectedSchemas.includes(table.schema)
+ const hasPendingAdd = pendingAddSet.has(table.id)
+ const hasPendingRemove = pendingRemoveSet.has(table.id)
+
+ const isCustomTable = table.status === 'custom'
+ const isGranted = table.status === 'granted'
+
+ const isCustomNeutral = isCustomTable && !hasPendingAdd && !hasPendingRemove
+ const isExposed =
+ isSchemaExposed &&
+ (isCustomTable
+ ? hasPendingAdd
+ : isGranted
+ ? !hasPendingRemove
+ : hasPendingAdd)
+
+ const customGrantsTooltip = getCustomGrantsTooltip({
+ hasPendingAdd,
+ hasPendingRemove,
+ })
+
+ return (
+ {
+ if (!isSchemaExposed) return
+
+ if (isCustomTable) {
+ if (hasPendingAdd) {
+ onTogglePendingAdd(table.id)
+ onTogglePendingRemove(table.id)
+ } else if (hasPendingRemove) {
+ onTogglePendingRemove(table.id)
+ onTogglePendingAdd(table.id)
+ } else {
+ onTogglePendingAdd(table.id)
+ }
+ return
+ }
+
+ if (isGranted) {
+ onTogglePendingRemove(table.id)
+ } else {
+ onTogglePendingAdd(table.id)
+ }
+ }}
+ >
+
+ )
+ })}
+
+ {hasNextPage && (
+
+
+ )}
+
+
+
+
+
+
+ )
+}
+
+const getCustomGrantsTooltip = ({
+ hasPendingAdd,
+ hasPendingRemove,
+}: {
+ hasPendingAdd: boolean
+ hasPendingRemove: boolean
+}) => {
+ if (hasPendingAdd) {
+ return 'This table has custom grants. Saving will override them with standard Data API grants for anon, authenticated, and service_role. Select again to revoke all grants instead.'
+ }
+
+ if (hasPendingRemove) {
+ return 'This table has custom grants. Saving will revoke all grants for anon, authenticated, and service_role. Select again to override with standard Data API grants instead.'
+ }
+
+ return 'This table has custom grants. Select it to override with standard Data API grants for anon, authenticated, and service_role.'
+}
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 5a1da6e6309..24df32ed986 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -1,7 +1,7 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
import { useParams } from 'common'
-import { indexOf } from 'lodash'
import { Lock } from 'lucide-react'
import Link from 'next/link'
import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -19,6 +19,7 @@ import {
Input_Shadcn_,
PrePostTab,
Skeleton,
+ useWatch_Shadcn_,
} from 'ui'
import { GenericSkeletonLoader, PageSection, PageSectionContent } from 'ui-patterns'
import { Admonition } from 'ui-patterns/admonition'
@@ -32,16 +33,26 @@ import {
} from 'ui-patterns/multi-select'
import { z } from 'zod'
+import { ExposedSchemaSelector } from './ExposedSchemaSelector'
import { HardenAPIModal } from './HardenAPIModal'
+import { ExposedTableSelector } from '@/components/interfaces/Settings/API/ExposedTableSelector'
import { FormActions } from '@/components/ui/Forms/FormActions'
import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
import { useProjectPostgrestConfigUpdateMutation } from '@/data/config/project-postgrest-config-update-mutation'
import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-extensions-query'
import { useSchemasQuery } from '@/data/database/schemas-query'
+import { privilegeKeys } from '@/data/privileges/keys'
+import { useUpdateExposedTablesMutation } from '@/data/privileges/update-exposed-tables-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useDataApiGrantTogglesEnabled } from '@/hooks/misc/useDataApiGrantTogglesEnabled'
+import useLatest from '@/hooks/misc/useLatest'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { INTERNAL_SCHEMAS } from '@/hooks/useProtectedSchemas'
+import { noop } from '@/lib/void'
+import type { ResponseError } from '@/types'
const formSchema = z.object({
+ // Fields for updatePostgrestConfig
dbSchema: z.array(z.string()),
dbExtraSearchPath: z.array(z.string()),
maxRows: z.number().max(1000000, "Can't be more than 1,000,000"),
@@ -51,11 +62,17 @@ const formSchema = z.object({
.max(1000, "Can't be more than 1000")
.optional()
.nullable(),
+
+ // Fields for expose toggles
+ tableIdsToAdd: z.array(z.number()),
+ tableIdsToRemove: z.array(z.number()),
})
export const PostgrestConfig = () => {
const { ref: projectRef } = useParams()
const { data: project } = useSelectedProjectQuery()
+ const queryClient = useQueryClient()
+ const isApiGrantTogglesEnabled = useDataApiGrantTogglesEnabled()
const [showModal, setShowModal] = useState(false)
@@ -63,6 +80,7 @@ export const PostgrestConfig = () => {
data: config,
isError,
isPending: isLoadingConfig,
+ isSuccess: isSuccessConfig,
} = useProjectPostgrestConfigQuery({ projectRef })
const { data: extensions } = useDatabaseExtensionsQuery({
projectRef: project?.ref,
@@ -77,27 +95,36 @@ export const PostgrestConfig = () => {
connectionString: project?.connectionString,
})
+ const configDbSchemas = useMemo(
+ () => (config?.db_schema ? config.db_schema.split(',').map((x) => x.trim()) : []),
+ [config?.db_schema]
+ )
+
const isLoading = isLoadingConfig || isLoadingSchemas
- const { mutate: updatePostgrestConfig, isPending: isUpdating } =
- useProjectPostgrestConfigUpdateMutation({
- onSuccess: () => {
- toast.success('Successfully saved settings')
- },
- })
+ const schemas = useMemo(
+ () =>
+ allSchemas
+ .filter((x) => !INTERNAL_SCHEMAS.some((schema) => schema === x.name))
+ .map((x) => {
+ return {
+ id: x.id,
+ value: x.name,
+ name: x.name,
+ disabled: false,
+ }
+ }) ?? [],
+ [allSchemas]
+ )
+
+ const { mutateAsync: updatePostgrestConfig } = useProjectPostgrestConfigUpdateMutation()
+
+ const { mutateAsync: updateExposedTables } = useUpdateExposedTablesMutation()
+
+ const [isUpdating, setIsUpdating] = useState(false)
const formId = 'project-postgres-config'
- const hiddenSchema = [
- 'auth',
- 'pgbouncer',
- 'hooks',
- 'extensions',
- 'vault',
- 'storage',
- 'realtime',
- 'pgsodium',
- 'pgsodium_masks',
- ]
+
const { can: canUpdatePostgrestConfig, isSuccess: isPermissionsLoaded } =
useAsyncCheckPermissions(PermissionAction.UPDATE, 'custom_config_postgrest')
@@ -105,17 +132,19 @@ export const PostgrestConfig = () => {
(extensions ?? []).find((ext) => ext.name === 'pg_graphql')?.installed_version !== null
const defaultValues = useMemo(() => {
- const dbSchema = config?.db_schema ? config?.db_schema.split(',').map((x) => x.trim()) : []
return {
- dbSchema,
+ dbSchema: configDbSchemas,
maxRows: config?.max_rows,
+ // TODO: only display schemas that exist in the db
dbExtraSearchPath: (config?.db_extra_search_path ?? '')
.split(',')
.map((x) => x.trim())
- .filter((x) => x.length > 0 && allSchemas.find((y) => y.name === x)),
+ .filter(Boolean),
dbPool: config?.db_pool,
+ tableIdsToAdd: [] as number[],
+ tableIdsToRemove: [] as number[],
}
- }, [config, allSchemas])
+ }, [config, configDbSchemas])
const form = useForm
+
+
+ + {isCountsPending + ? 'Loading tables...' + : `${grantsCount} of ${totalCount} tables exposed${ + pendingCount > 0 + ? `, ${pendingCount} pending ${pluralize(pendingCount, 'change')}` + : '' + }`} +
+
+
+
+
+
+ ) : isError ? (
+
+
+ ) : (
+ <>
+ {search.length > 0 && tables.length === 0 && (
+ Failed to retrieve tables
++ No tables found +
+ )} +
+
+
+ {isExposed &&
+
+ {`${table.schema}.${table.name}`}
+
+
+
+ {isCustomTable && (
+
+
+
+
+ {customGrantsTooltip}
+
+
+ )}
+ {!isSchemaExposed && (
+
+
+
+
+
+ {`The schema "${table.schema}" must be exposed before enabling this table.`}
+
+
+ )}
+
+
+
+
+
+ )}
+
-
- ) : (
-
- You will not be able to query tables and views in the{' '}
- public schema via
- supabase-js or HTTP clients.
-
- Tables in the{' '}
- public schema are
- still exposed over our GraphQL endpoints.
-
+
+ ) : (
+
+ You will not be able to query tables and views in the{' '}
+ public schema via
+ supabase-js or HTTP clients.
+
+ Tables in the{' '}
+ public schema
+ are still exposed over our GraphQL endpoints.
+
Compute Size
@@ -358,7 +360,7 @@ export const Addons = () => { <>Dedicated IPv4 address
@@ -409,13 +411,21 @@ export const Addons = () => {