@@ -152,7 +154,7 @@ export const FeaturePreviewModal = () => {
+ {data.description && (
+
+
+
+ {data.description}
+
+ )}
+
+ {!placeholder && (
+
+ )}
+
{data.columns.map((column) => (
diff --git a/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts b/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
index 0dc70a1f953cb..c8af180fed61c 100644
--- a/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
+++ b/apps/studio/components/interfaces/Database/Schemas/Schemas.utils.ts
@@ -2,10 +2,12 @@ import dagre from '@dagrejs/dagre'
import type { PostgresSchema, PostgresTable } from '@supabase/postgres-meta'
import { uniqBy } from 'lodash'
import { Edge, Node, Position } from 'reactflow'
+
import 'reactflow/dist/style.css'
import { LOCAL_STORAGE_KEYS } from 'common'
import { tryParseJson } from 'lib/helpers'
+
import { TABLE_NODE_ROW_HEIGHT, TABLE_NODE_WIDTH, TableNodeData } from './SchemaTableNode'
const NODE_SEP = 25
@@ -41,6 +43,7 @@ export async function getGraphDataFromTables(
ref,
id: table.id,
name: table.name,
+ description: table.comment ?? '',
schema: table.schema,
isForeign: false,
columns,
@@ -78,6 +81,7 @@ export async function getGraphDataFromTables(
ref: ref!,
schema: rel.target_table_schema,
name: targetId,
+ description: '',
isForeign: true,
columns: [],
}
diff --git a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
index 60f4c422d2bc0..16a4c9e8df3bb 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
@@ -1,9 +1,7 @@
+import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import { BoxPlus } from 'icons'
import { Plus } from 'lucide-react'
import Link from 'next/link'
-
-import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
-import { BASE_PATH } from 'lib/constants'
import {
Button,
Card,
@@ -16,21 +14,14 @@ import {
TableRow,
} from 'ui'
import { EmptyStatePresentational } from 'ui-patterns'
+
import { ShimmeringCard } from './ShimmeringCard'
+import { HomeIcon } from '@/components/layouts/ProjectLayout/LayoutHeader/HomeIcon'
export const Header = () => {
return (
-
- (DEFAULT_INTERVAL)
+ useEffect(() => {
+ setInterval(retentionDays !== undefined && retentionDays < 7 ? '1hr' : '1day')
+ }, [retentionDays])
+
const { data, isPending: isLoading } = useProjectLogStatsQuery({ projectRef, interval })
const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1]
@@ -94,8 +100,6 @@ const ProjectUsage = () => {
setInterval(interval as ProjectLogStatsVariables['interval'])}
- planId={plan?.id}
- planName={plan?.name}
organizationSlug={organization?.slug}
dropdownAlign="start"
tooltipSide="right"
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
index c50067a5ed33c..d642ce60f5a79 100644
--- a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
+++ b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
@@ -10,12 +10,12 @@ import {
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import dayjs from 'dayjs'
import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
-import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle, Loading } from 'ui'
import { Row } from 'ui-patterns'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
@@ -55,11 +55,17 @@ export const ProjectUsageSection = () => {
'project_auth:all',
'project_storage:all',
])
- const { plan } = useCurrentOrgPlan()
+ const { getEntitlementMax } = useCheckEntitlements('log.retention_days')
+ const retentionDays = getEntitlementMax()
- const DEFAULT_INTERVAL: ChartIntervalKey = plan?.id === 'free' ? '1hr' : '1day'
+ const DEFAULT_INTERVAL: ChartIntervalKey =
+ retentionDays !== undefined && retentionDays < 7 ? '1hr' : '1day'
const [interval, setInterval] = useState(DEFAULT_INTERVAL)
+ useEffect(() => {
+ setInterval(retentionDays !== undefined && retentionDays < 7 ? '1hr' : '1day')
+ }, [retentionDays])
+
const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1]
const { datetimeFormat } = useMemo(() => {
@@ -208,8 +214,6 @@ export const ProjectUsageSection = () => {
setInterval(interval as ChartIntervalKey)}
- planId={plan?.id}
- planName={plan?.name}
organizationSlug={organization?.slug}
dropdownAlign="end"
tooltipSide="left"
diff --git a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
index 998916d89243b..c8235010cc1c3 100644
--- a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
+++ b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
@@ -5,7 +5,6 @@ import ReportPadding from 'components/interfaces/Reports/ReportPadding'
import { ChartIntervalDropdown } from 'components/ui/Logs/ChartIntervalDropdown'
import { CHART_INTERVALS } from 'components/ui/Logs/logs.utils'
import dayjs from 'dayjs'
-import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { RefreshCw } from 'lucide-react'
@@ -25,7 +24,6 @@ export const ObservabilityOverview = () => {
const router = useRouter()
const { ref: projectRef } = useParams()
const { data: organization } = useSelectedOrganizationQuery()
- const { plan } = useCurrentOrgPlan()
const queryClient = useQueryClient()
const { projectStorageAll: storageSupported } = useIsFeatureEnabled(['project_storage:all'])
@@ -156,8 +154,6 @@ export const ObservabilityOverview = () => {
setInterval(interval as ChartIntervalKey)}
- planId={plan?.id}
- planName={plan?.name}
organizationSlug={organization?.slug}
dropdownAlign="end"
tooltipSide="left"
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants.ts b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants.ts
index b34098174b306..de562f4824a08 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants.ts
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/TaxID.constants.ts
@@ -721,13 +721,6 @@ export const TAX_IDS: TaxId[] = [
placeholder: 'MK1234567890123',
countryIso2: 'MK',
},
- {
- name: 'nz_gst',
- type: 'nz_gst',
- country: 'New Zealand',
- placeholder: '123456789',
- countryIso2: 'NZ',
- },
{
name: 'NO VAT',
type: 'no_vat',
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 0000000000000..5b990eb7dc207
--- /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 0000000000000..18371b96ad7b9
--- /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')
+
+ setIsUpdating(true)
+
+ try {
+ let dbSchema = values.dbSchema.join(',')
+
+ if (isApiGrantTogglesEnabled) {
+ await updateExposedTables({
+ projectRef,
+ connectionString: project?.connectionString,
+ tableIdsToAdd: values.tableIdsToAdd,
+ tableIdsToRemove: values.tableIdsToRemove,
+ })
+ }
- updatePostgrestConfig({
- projectRef,
- dbSchema: values.dbSchema.join(', '),
- maxRows: values.maxRows,
- dbExtraSearchPath: values.dbExtraSearchPath.join(','),
- dbPool: values.dbPool ? values.dbPool : null,
- })
+ 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 = () => {
) : (
<>
-
- (
-
-
+
+ {
+ 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}
+ layout="flex-row-reverse"
+ >
+ {isLoadingSchemas ? (
+
+
+
+ {schemas.length <= 0 ? (
+
+ no
- ))
+ ) : (
+ schemas.map((x) => (
+
+ {x.name}
+
+ ))
+ )}
+
+
+
+ )}
+
+ {!field.value.includes('public') && field.value.length > 0 && (
+
+
-
- )}
- />
-
+
+ )}
+ />
+
+ )}
void
+ sqlQuery?: string
}
type LogMap = { [id: string]: LogData }
@@ -84,6 +87,7 @@ export const LogTable = ({
isSelectedLogLoading,
selectedLogError,
onSelectedLogChange,
+ sqlQuery,
}: Props) => {
const { ref } = useParams()
const { profile } = useProfile()
@@ -91,8 +95,10 @@ export const LogTable = ({
const { show: showContextMenu } = useContextMenu()
const [cellPosition, setCellPosition] = useState()
- const [selectionOpen, setSelectionOpen] = useState(false)
const [selectedRow, setSelectedRow] = useState(null)
+ const [selectedRows, setSelectedRows] = useState>(new Set())
+ const [anchorRowId, setAnchorRowId] = useState(null)
+ const [copiedFormat, setCopiedFormat] = useState<'json' | 'markdown' | null>(null)
const { can: canCreateLogQuery } = useAsyncCheckPermissions(
PermissionAction.CREATE,
@@ -105,14 +111,10 @@ export const LogTable = ({
const firstRow = data[0]
- // move timestamp to the first column, if it exists
function getFirstRow() {
if (!firstRow) return {}
-
const { timestamp, ...rest } = firstRow
-
if (!timestamp) return firstRow
-
return { timestamp, ...rest }
}
@@ -124,6 +126,82 @@ export const LogTable = ({
const panelContentMaxSize = 60
const LOGS_EXPLORER_CONTEXT_MENU_ID = 'logs-explorer-context-menu'
+
+ const getRowKey = useCallback(
+ (row: LogData): string => {
+ if (!hasId) return JSON.stringify(row)
+ return (row as LogData).id
+ },
+ [hasId]
+ )
+
+ const [dedupedData, logMap] = useMemo<[LogData[], LogMap]>(() => {
+ const deduped = [...new Set(data)] as LogData[]
+ if (!hasId) return [deduped, {}]
+ const map = deduped.reduce((acc: LogMap, d: LogData) => {
+ acc[d.id] = d
+ return acc
+ }, {})
+ return [deduped, map]
+ }, [data, hasId])
+
+ const logDataRows = useMemo(() => {
+ if (hasId && hasTimestamp) {
+ return Object.values(logMap).sort((a, b) => b.timestamp - a.timestamp)
+ } else {
+ return dedupedData
+ }
+ }, [dedupedData, hasId, hasTimestamp, logMap])
+
+ // Side panel is open only when a single row is selected via regular click (not multi-select)
+ const selectionOpen = Boolean((selectedLog || isSelectedLogLoading) && selectedRows.size === 0)
+
+ const selectedRowsData = useMemo(
+ () => logDataRows.filter((r) => selectedRows.has(getRowKey(r))),
+ [logDataRows, selectedRows, getRowKey]
+ )
+
+ const checkboxColumn: Column = {
+ key: 'multi-select',
+ name: '',
+ width: 32,
+ maxWidth: 32,
+ minWidth: 32,
+ renderCell: ({ row }) => {
+ const key = getRowKey(row)
+ const toggle = () => {
+ const next = new Set(selectedRows)
+ if (next.has(key)) {
+ next.delete(key)
+ } else {
+ next.add(key)
+ }
+ setSelectedRows(next)
+ setAnchorRowId(key)
+ if (next.size > 0) {
+ setSelectedRow(null)
+ onSelectedLogChange?.(null)
+ }
+ }
+ return (
+ = {
@@ -148,7 +226,6 @@ export const LogTable = ({
},
minWidth: 128,
}
-
return result
})
@@ -161,25 +238,21 @@ export const LogTable = ({
case 'api':
columns = DatabaseApiColumnRender
break
-
case 'database':
columns = DatabasePostgresColumnRender
break
-
case 'fn_edge':
columns = FunctionsEdgeColumnRender
break
case 'functions':
columns = FunctionsLogsColumnRender
break
-
case 'auth':
columns = AuthColumnRenderer
break
case 'pg_cron':
columns = DatabasePostgresColumnRender
break
-
default:
if (firstRow && isDefaultLogPreviewFormat(firstRow)) {
columns = DefaultPreviewColumnRenderer
@@ -190,37 +263,25 @@ export const LogTable = ({
}
}
- const [dedupedData, logMap] = useMemo<[LogData[], LogMap]>(() => {
- const deduped = [...new Set(data)] as LogData[]
-
- if (!hasId) {
- return [deduped, {}]
- }
-
- const map = deduped.reduce((acc: LogMap, d: LogData) => {
- acc[d.id] = d
- return acc
- }, {})
-
- return [deduped, map]
- }, [data, hasId])
-
- const logDataRows = useMemo(() => {
- if (hasId && hasTimestamp) {
- return Object.values(logMap).sort((a, b) => b.timestamp - a.timestamp)
- } else {
- return dedupedData
- }
- }, [dedupedData, hasId, hasTimestamp, logMap])
+ if (columns.length > 0) {
+ columns = [checkboxColumn, ...columns]
+ }
const RowRenderer = useCallback<(key: Key, props: RenderRowProps) => ReactNode>(
(key, props) => {
const handleContextMenu = (e: React.MouseEvent) => {
- if (columns.length > 0) {
- setCellPosition({ row: props.row, column: columns[0] })
+ const firstDataColumn = columns.find((c) => c.key !== 'multi-select')
+ if (firstDataColumn) {
+ setCellPosition({ row: props.row, column: firstDataColumn })
}
showContextMenu(e, { id: LOGS_EXPLORER_CONTEXT_MENU_ID })
}
+ const handleClick = (e: React.MouseEvent) => {
+ // Check if clicking on the checkbox column - let that handler handle it
+ const target = e.target as HTMLElement
+ if (target.closest('[data-column-key="multi-select"]')) return
+ onRowClick(props.row)
+ }
return (
|
)
},
@@ -250,6 +312,89 @@ export const LogTable = ({
})
}
+ function onRowClick(row: LogData) {
+ const key = getRowKey(row)
+
+ // Regular single click — clear multi-select, open side panel
+ setSelectedRows(new Set())
+ setAnchorRowId(key)
+ setSelectedRow(row)
+ onSelectedLogChange?.(row)
+ }
+
+ const handleKeyDown = useCallback(
+ (event: KeyboardEvent) => {
+ if (event.key === 'Escape') {
+ setSelectedRows(new Set())
+ setAnchorRowId(null)
+ return
+ }
+
+ // Arrow navigation only in single-select mode
+ if (!logDataRows.length || !selectedRow || selectedRows.size > 0) return
+
+ const currentIndex = logDataRows.findIndex((row) => isEqual(row, selectedRow))
+ if (currentIndex === -1) return
+
+ if (event.key === 'ArrowUp' && currentIndex > 0) {
+ const prevRow = logDataRows[currentIndex - 1]
+ onRowClick(prevRow)
+ } else if (event.key === 'ArrowDown' && currentIndex < logDataRows.length - 1) {
+ const nextRow = logDataRows[currentIndex + 1]
+ onRowClick(nextRow)
+ }
+ },
+ [logDataRows, selectedRow, selectedRows, onRowClick]
+ )
+
+ useEffect(() => {
+ if (!isSelectedLogLoading && !selectedLog) {
+ setSelectedRow(null)
+ }
+ }, [selectedLog, isSelectedLogLoading])
+
+ useEffect(() => {
+ window.addEventListener('keydown', handleKeyDown)
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [handleKeyDown])
+
+ useEffect(() => {
+ if (!isLoading && !selectedRow) {
+ const logData = data.find((x) => x.id === selectedLogId)
+ if (logData) setSelectedRow(logData)
+ }
+ }, [isLoading, data, selectedRow, selectedLogId])
+
+ // Clear multi-select when a new query starts loading
+ useEffect(() => {
+ if (isLoading) {
+ setSelectedRows(new Set())
+ setAnchorRowId(null)
+ }
+ }, [isLoading])
+
+ // Copy feedback timeout
+ useEffect(() => {
+ if (!copiedFormat) return
+ const timer = setTimeout(() => setCopiedFormat(null), 2000)
+ return () => clearTimeout(timer)
+ }, [copiedFormat])
+
+ function handleCopySelectedRows(format: 'json' | 'markdown') {
+ const text =
+ format === 'json'
+ ? formatLogsAsJson(selectedRowsData)
+ : formatLogsAsMarkdown(selectedRowsData)
+ copyToClipboard(text, () => {
+ setCopiedFormat(format)
+ toast.success(
+ `Copied ${selectedRowsData.length} log${selectedRowsData.length !== 1 ? 's' : ''} as ${format.toUpperCase()}`
+ )
+ })
+ }
+
const LogsExplorerTableHeader = () => (
-
- 
-
-
+
-
-
+
)
}
diff --git a/apps/studio/components/interfaces/Home/ProjectUsage.tsx b/apps/studio/components/interfaces/Home/ProjectUsage.tsx
index 3422b71595799..71adca4495e70 100644
--- a/apps/studio/components/interfaces/Home/ProjectUsage.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectUsage.tsx
@@ -10,14 +10,14 @@ import {
} from 'data/analytics/project-log-stats-query'
import dayjs from 'dayjs'
import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted'
-import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
+import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { Auth, Database, Realtime, Storage } from 'icons'
import sumBy from 'lodash/sumBy'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import { Loading } from 'ui'
type ChartIntervalKey = ProjectLogStatsVariables['interval']
@@ -32,12 +32,18 @@ const ProjectUsage = () => {
'project_storage:all',
])
- const { plan } = useCurrentOrgPlan()
+ const { getEntitlementMax } = useCheckEntitlements('log.retention_days')
+ const retentionDays = getEntitlementMax()
- const DEFAULT_INTERVAL: ChartIntervalKey = plan?.id === 'free' ? '1hr' : '1day'
+ const DEFAULT_INTERVAL: ChartIntervalKey =
+ retentionDays !== undefined && retentionDays < 7 ? '1hr' : '1day'
const [interval, setInterval] = useState
+
+
+ + {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 5a1da6e630977..24df32ed98682 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.
-
{
+ e.stopPropagation()
+ toggle()
+ }}
+ >
+ e.stopPropagation()}
+ onCheckedChange={toggle}
+ />
+
+ )
+ },
+ }
+
const DEFAULT_COLUMNS = columnNames.map((v: keyof LogData, idx) => {
const column = `logs-column-${idx}`
const result: Column {
if (!error) return null
-
const childProps = {
isCustomQuery: queryType ? false : true,
error: error!,
}
-
if (
typeof error === 'object' &&
error.error?.errors.find((err) => err.reason === 'resourcesExceeded')
) {
return {
- setCellPosition(row)
- }}
- onCellClick={(row) => {
- onRowClick(row.row)
- }}
- columns={columns}
- rowClass={(row: LogData) => {
- return cn(
- 'font-mono tracking-tight !bg-studio hover:!bg-surface-100 cursor-pointer',
- {
- '!bg-surface-200 rdg-row--focused': isEqual(row, selectedRow),
- }
- )
- }}
- rows={logDataRows}
- rowKeyGetter={(r) => {
- if (!hasId) return JSON.stringify(r)
- const row = r as LogData
- return row.id
- }}
- renderers={{
- renderRow: RowRenderer,
- noRowsFallback: !isLoading ? (
- <>
- {logDataRows.length === 0 && !error &&
+ {
+ setCellPosition(row)
+ }}
+ columns={columns}
+ rowClass={(row: LogData) => {
+ const key = getRowKey(row)
+ const isMultiSelected = selectedRows.has(key)
+ const isSingleSelected = isEqual(row, selectedRow)
+ return cn(
+ 'font-mono tracking-tight !bg-studio hover:!bg-surface-100 cursor-pointer',
+ {
+ '!bg-surface-200 rdg-row--focused': isSingleSelected || isMultiSelected,
+ }
+ )
+ }}
+ rows={logDataRows}
+ rowKeyGetter={(r) => {
+ if (!hasId) return JSON.stringify(r)
+ const row = r as LogData
+ return row.id
+ }}
+ renderers={{
+ renderRow: RowRenderer,
+ noRowsFallback: !isLoading ? (
+ // gridColumn: '1 / -1' makes the fallback span all CSS grid columns,
+ // including the checkbox column we prepend, so it fills the full width.
+
{typeof window !== 'undefined' &&
createPortal(
0 ? 40 : 0,
+ overflow: 'hidden',
+ transition: 'max-height 150ms ease',
+ }}
+ >
+ {
+ setSelectedRows(new Set())
+ setAnchorRowId(null)
+ }}
+ />
+
+
+ {logDataRows.length === 0 && !error &&
+ ) : null,
+ }}
+ />
+