).prependListener = noopEE
+ ;(res as unknown as { headersSent: boolean }).headersSent = false
+ ;(res as unknown as { writableEnded: boolean }).writableEnded = false
+
+ const finalize = (): Response => {
+ if (streamMode) {
+ // The handler entered streaming mode (writeHead/flushHeaders) and
+ // may still be pushing chunks asynchronously after this return —
+ // the stream stays open until res.end() runs.
+ return new Response(stream, { status: res.statusCode, headers: responseHeaders })
+ }
+ const totalLen = chunks.reduce((n, c) => n + c.length, 0)
+ const payload = new Uint8Array(totalLen)
+ let offset = 0
+ for (const c of chunks) {
+ payload.set(c, offset)
+ offset += c.length
+ }
+ return new Response(payload.length === 0 ? null : payload, {
+ status: res.statusCode,
+ headers: responseHeaders,
+ })
+ }
+
+ return { res, finalize }
+}
diff --git a/apps/studio/compat/next/compat/router.ts b/apps/studio/compat/next/compat/router.ts
new file mode 100644
index 00000000000..18ff9c9f1f6
--- /dev/null
+++ b/apps/studio/compat/next/compat/router.ts
@@ -0,0 +1,8 @@
+// Next exports a `next/compat/router` variant whose `useRouter()` returns
+// `NextRouter | null` so that components can be rendered outside a
+// pages-router context without crashing. Under TanStack we always have a
+// router, so this never returns null in practice. Re-export the full
+// pages-router shim so the surface stays in sync (back, forward, reload,
+// prefetch, isReady, locale, etc.).
+
+export { useRouter } from '../router'
diff --git a/apps/studio/compat/next/dynamic.tsx b/apps/studio/compat/next/dynamic.tsx
new file mode 100644
index 00000000000..430b60ca521
--- /dev/null
+++ b/apps/studio/compat/next/dynamic.tsx
@@ -0,0 +1,58 @@
+import { lazy, Suspense, type ComponentType, type ReactNode } from 'react'
+
+type DynamicOptions = {
+ loading?: () => ReactNode
+ ssr?: boolean
+ // Accepted-and-ignored: legacy/deprecated Next options. Listed so
+ // call sites that pass them don't fail TypeScript.
+ suspense?: boolean
+ loadableGenerated?: unknown
+}
+
+type Loader = () => Promise> | Promise<{ default: ComponentType }>
+
+type DynamicComponent
= ComponentType
& {
+ // Next stamps a `.preload()` on the returned component so consumers
+ // can trigger the loader ahead of render (e.g. on hover). Returns a
+ // promise that resolves when the loader settles.
+ preload: () => Promise
+}
+
+function isDefaultExport(
+ value: ComponentType
| { default: ComponentType
}
+): value is { default: ComponentType
} {
+ return typeof value === 'object' && value !== null && 'default' in value
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default function dynamic
(
+ loader: Loader
,
+ options: DynamicOptions = {}
+): DynamicComponent
{
+ const { loading, ssr = true } = options
+
+ // Cache the in-flight loader promise so calling `preload()` and then
+ // rendering doesn't kick off a second import. Matches Next's behaviour
+ // where preload is essentially a head-start on the same module load.
+ let cached: Promise<{ default: ComponentType
}> | null = null
+ const load = () => {
+ if (cached) return cached
+ cached = loader().then((mod) => (isDefaultExport
(mod) ? mod : { default: mod }))
+ return cached
+ }
+
+ const Lazy = lazy(load)
+
+ function DynamicComponent(props: P) {
+ if (ssr === false && typeof window === 'undefined') return null
+ return (
+
+
+ )
+ }
+
+ ;(DynamicComponent as DynamicComponent
).preload = () => load().then(() => undefined)
+
+ return DynamicComponent as DynamicComponent
+}
diff --git a/apps/studio/compat/next/head.tsx b/apps/studio/compat/next/head.tsx
new file mode 100644
index 00000000000..b5e79e6e73a
--- /dev/null
+++ b/apps/studio/compat/next/head.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+
+// Next/Head's job is to inject children into the document `
` and
+// deduplicate them by `key` prop. React 19 ships native "document
+// metadata" hoisting: any ``, `<meta>`, `<link>`, `<style>`, or
+// `<script>` rendered anywhere in the tree is hoisted to `<head>`
+// automatically and works for both client render and SSR. Studio uses
+// `<Head>` exclusively for those elements (`<title>`, `<meta>`,
+// `<link>` — see `pages/maintenance.tsx`, `pages/claim-project.tsx`,
+// etc.), so the shim can be a passthrough that lets React do the
+// hoisting.
+//
+// Trade-offs vs the previous `createPortal(children, document.head)`
+// approach:
+// - SSR: the portal returned `null` on the server, so head content
+// from `<Head>` was never in the prerendered HTML. Native hoisting
+// emits the metadata in the prerendered output.
+// - Deduplication: React 19 dedupes `<title>` (last one wins, same
+// as `document.title`) and merges `<meta>`/`<link>` by their
+// attributes. Next dedupes by an explicit `key` prop. The
+// observable output is equivalent for the consumer set we have.
+// - Non-metadata children: React 19 only hoists the metadata tags
+// listed above. If a consumer ever renders an arbitrary element
+// inside `<Head>`, it'll render in place rather than in `<head>`.
+// We have no such consumers today; if one shows up, swap to a
+// portal+SSR-collector setup.
+
+// eslint-disable-next-line no-restricted-exports
+export default function Head({ children }: { children?: ReactNode }) {
+ return <>{children}</>
+}
diff --git a/apps/studio/compat/next/image.tsx b/apps/studio/compat/next/image.tsx
new file mode 100644
index 00000000000..c0a931a7041
--- /dev/null
+++ b/apps/studio/compat/next/image.tsx
@@ -0,0 +1,159 @@
+import {
+ forwardRef,
+ useEffect,
+ useRef,
+ type ComponentPropsWithoutRef,
+ type CSSProperties,
+ type ForwardedRef,
+ type SyntheticEvent,
+} from 'react'
+
+import { BASE_PATH } from '@/lib/constants'
+
+// Next/Image is a smart wrapper around `<img>` that handles automatic
+// resizing, lazy loading, blur placeholders, and a CDN loader. Under
+// Vite we don't run the Next image optimizer, so this shim degrades to
+// a plain `<img>` while preserving the prop surface so consumer code
+// compiles without modification.
+//
+// basePath: Next auto-prepends the configured basePath to absolute `src`
+// values that point at app-served assets (the optimizer URL Next builds
+// internally is itself prefixed). Our shim has no optimizer, so we
+// prepend basePath directly on the rendered <img src> for absolute
+// paths. Full URLs (http:, data:, etc.) and already-prefixed paths are
+// left alone. When a custom `loader` is provided the loader is
+// responsible for the final URL — Next behaves the same way.
+
+type ImageLoaderProps = { src: string; width: number; quality?: number }
+type ImageLoader = (props: ImageLoaderProps) => string
+
+interface ImageProps extends Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt' | 'loading'> {
+ src: string | { src: string; width?: number; height?: number }
+ alt: string
+ width?: number | `${number}`
+ height?: number | `${number}`
+ fill?: boolean
+ sizes?: string
+ priority?: boolean
+ loading?: 'lazy' | 'eager'
+ quality?: number | `${number}`
+ loader?: ImageLoader
+ placeholder?: 'blur' | 'empty' | `data:image/${string}`
+ blurDataURL?: string
+ unoptimized?: boolean
+ onLoadingComplete?: (img: HTMLImageElement) => void
+}
+
+function applyBasePath(src: string): string {
+ if (!BASE_PATH) return src
+ // Schemes (http:, https:, data:, blob:) and protocol-relative URLs.
+ if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(src) || src.startsWith('//')) return src
+ // Already prefixed — happens when callers manually prepend BASE_PATH
+ // (several studio components do this today).
+ if (src === BASE_PATH || src.startsWith(`${BASE_PATH}/`)) return src
+ // Absolute app path — prepend.
+ if (src.startsWith('/')) return `${BASE_PATH}${src}`
+ // Relative path — leave alone.
+ return src
+}
+
+function resolveSrc(
+ src: ImageProps['src'],
+ width?: ImageProps['width'],
+ quality?: ImageProps['quality'],
+ loader?: ImageLoader
+): string {
+ const raw = typeof src === 'string' ? src : src.src
+ if (loader) {
+ // Loader is the source of truth for the final URL — match Next and
+ // don't auto-prepend basePath. The loader receives the original src.
+ return loader({
+ src: raw,
+ width: typeof width === 'number' ? width : Number(width ?? 0),
+ quality: quality !== undefined ? Number(quality) : undefined,
+ })
+ }
+ return applyBasePath(raw)
+}
+
+const Image = forwardRef(function Image(
+ {
+ src,
+ width,
+ height,
+ fill,
+ sizes,
+ priority,
+ loading,
+ quality,
+ loader,
+ placeholder: _placeholder,
+ blurDataURL: _blurDataURL,
+ unoptimized: _unoptimized,
+ onLoad,
+ onLoadingComplete,
+ style,
+ ...rest
+ }: ImageProps,
+ forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+ const innerRef = useRef<HTMLImageElement | null>(null)
+
+ // Keep the latest callback in a ref so firing doesn't depend on the
+ // caller memoizing onLoadingComplete.
+ const onLoadingCompleteRef = useRef(onLoadingComplete)
+ useEffect(() => {
+ onLoadingCompleteRef.current = onLoadingComplete
+ })
+
+ const resolvedSrc = resolveSrc(src, width, quality, loader)
+
+ // Mirror Next's onLoadingComplete, firing at most once per resolved src.
+ const firedForSrc = useRef<string | null>(null)
+ const fireLoadingComplete = (img: HTMLImageElement) => {
+ if (firedForSrc.current === resolvedSrc) return
+ firedForSrc.current = resolvedSrc
+ onLoadingCompleteRef.current?.(img)
+ }
+
+ const handleLoad = (e: SyntheticEvent<HTMLImageElement>) => {
+ onLoad?.(e)
+ if (e.currentTarget) fireLoadingComplete(e.currentTarget)
+ }
+
+ // If the image is already cached (loaded synchronously before our
+ // handler attaches), fire on mount so the contract holds. Keyed on src
+ // so it re-arms when the image changes.
+ useEffect(() => {
+ const img = innerRef.current
+ if (img?.complete && img.naturalWidth > 0) fireLoadingComplete(img)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [resolvedSrc])
+
+ const finalStyle: CSSProperties | undefined = fill
+ ? { position: 'absolute', inset: 0, width: '100%', height: '100%', ...style }
+ : style
+
+ return (
+ <img
+ {...rest}
+ ref={(node) => {
+ innerRef.current = node
+ if (typeof forwardedRef === 'function') forwardedRef(node)
+ else if (forwardedRef) forwardedRef.current = node
+ }}
+ src={resolvedSrc}
+ width={fill ? undefined : width}
+ height={fill ? undefined : height}
+ sizes={sizes}
+ // Match Next's defaults: lazy unless priority/loading says otherwise.
+ loading={loading ?? (priority ? 'eager' : 'lazy')}
+ fetchPriority={priority ? 'high' : rest.fetchPriority}
+ style={finalStyle}
+ onLoad={handleLoad}
+ />
+ )
+})
+
+// eslint-disable-next-line no-restricted-exports
+export default Image
diff --git a/apps/studio/compat/next/legacy/image.tsx b/apps/studio/compat/next/legacy/image.tsx
new file mode 100644
index 00000000000..da45e196ca3
--- /dev/null
+++ b/apps/studio/compat/next/legacy/image.tsx
@@ -0,0 +1,163 @@
+import {
+ forwardRef,
+ useEffect,
+ useRef,
+ type ComponentPropsWithoutRef,
+ type CSSProperties,
+ type ForwardedRef,
+ type SyntheticEvent,
+} from 'react'
+
+import { BASE_PATH } from '@/lib/constants'
+
+// `next/legacy/image` is the pre-Next-13 Image API. Functionally similar
+// to `next/image` but with `layout` and `objectFit`/`objectPosition`
+// props instead of `fill` + style. Same shim approach: degrade to a
+// plain <img> with the prop surface preserved.
+//
+// basePath: see the matching note in ../image.tsx — absolute `src`
+// values are auto-prefixed with the configured basePath; full URLs and
+// already-prefixed paths pass through; loader-produced URLs are not
+// touched.
+
+type ImageLoaderProps = { src: string; width: number; quality?: number }
+type ImageLoader = (props: ImageLoaderProps) => string
+
+type Layout = 'fill' | 'fixed' | 'intrinsic' | 'responsive'
+type ObjectFit = CSSProperties['objectFit']
+
+interface ImageProps extends Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt' | 'loading'> {
+ src: string | { src: string }
+ alt: string
+ width?: number | `${number}`
+ height?: number | `${number}`
+ layout?: Layout
+ objectFit?: ObjectFit
+ objectPosition?: CSSProperties['objectPosition']
+ priority?: boolean
+ loading?: 'lazy' | 'eager'
+ quality?: number | `${number}`
+ loader?: ImageLoader
+ placeholder?: 'blur' | 'empty'
+ blurDataURL?: string
+ unoptimized?: boolean
+ sizes?: string
+ onLoadingComplete?: (img: HTMLImageElement) => void
+}
+
+function applyBasePath(src: string): string {
+ if (!BASE_PATH) return src
+ // Schemes (http:, https:, data:, blob:) and protocol-relative URLs.
+ if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(src) || src.startsWith('//')) return src
+ if (src === BASE_PATH || src.startsWith(`${BASE_PATH}/`)) return src
+ if (src.startsWith('/')) return `${BASE_PATH}${src}`
+ return src
+}
+
+function resolveSrc(
+ src: ImageProps['src'],
+ width?: ImageProps['width'],
+ quality?: ImageProps['quality'],
+ loader?: ImageLoader
+): string {
+ const raw = typeof src === 'string' ? src : src.src
+ if (loader) {
+ return loader({
+ src: raw,
+ width: typeof width === 'number' ? width : Number(width ?? 0),
+ quality: quality !== undefined ? Number(quality) : undefined,
+ })
+ }
+ return applyBasePath(raw)
+}
+
+const Image = forwardRef(function Image(
+ {
+ src,
+ width,
+ height,
+ layout,
+ objectFit,
+ objectPosition,
+ priority,
+ loading,
+ quality,
+ loader,
+ placeholder: _placeholder,
+ blurDataURL: _blurDataURL,
+ unoptimized: _unoptimized,
+ sizes,
+ onLoad,
+ onLoadingComplete,
+ style,
+ ...rest
+ }: ImageProps,
+ forwardedRef: ForwardedRef<HTMLImageElement>
+) {
+ const innerRef = useRef<HTMLImageElement | null>(null)
+
+ // Keep the latest callback in a ref so firing doesn't depend on the
+ // caller memoizing onLoadingComplete.
+ const onLoadingCompleteRef = useRef(onLoadingComplete)
+ useEffect(() => {
+ onLoadingCompleteRef.current = onLoadingComplete
+ })
+
+ const resolvedSrc = resolveSrc(src, width, quality, loader)
+
+ // Fire onLoadingComplete at most once per resolved src, matching Next's
+ // once-per-load contract.
+ const firedForSrc = useRef<string | null>(null)
+ const fireLoadingComplete = (img: HTMLImageElement) => {
+ if (firedForSrc.current === resolvedSrc) return
+ firedForSrc.current = resolvedSrc
+ onLoadingCompleteRef.current?.(img)
+ }
+
+ const handleLoad = (e: SyntheticEvent<HTMLImageElement>) => {
+ onLoad?.(e)
+ if (e.currentTarget) fireLoadingComplete(e.currentTarget)
+ }
+
+ // Catch the cached-image case where the load event fired before our
+ // handler attached. Keyed on src so it re-arms when the image changes.
+ useEffect(() => {
+ const img = innerRef.current
+ if (img?.complete && img.naturalWidth > 0) fireLoadingComplete(img)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [resolvedSrc])
+
+ const layoutStyle: CSSProperties | undefined =
+ layout === 'fill'
+ ? { position: 'absolute', inset: 0, width: '100%', height: '100%' }
+ : layout === 'responsive'
+ ? { width: '100%', height: 'auto' }
+ : undefined
+
+ const finalStyle: CSSProperties | undefined =
+ layoutStyle || objectFit || objectPosition || style
+ ? { ...layoutStyle, objectFit, objectPosition, ...style }
+ : undefined
+
+ return (
+ <img
+ {...rest}
+ ref={(node) => {
+ innerRef.current = node
+ if (typeof forwardedRef === 'function') forwardedRef(node)
+ else if (forwardedRef) forwardedRef.current = node
+ }}
+ src={resolvedSrc}
+ width={layout === 'fill' ? undefined : width}
+ height={layout === 'fill' ? undefined : height}
+ sizes={sizes}
+ loading={loading ?? (priority ? 'eager' : 'lazy')}
+ fetchPriority={priority ? 'high' : rest.fetchPriority}
+ style={finalStyle}
+ onLoad={handleLoad}
+ />
+ )
+})
+
+// eslint-disable-next-line no-restricted-exports
+export default Image
diff --git a/apps/studio/compat/next/link.tsx b/apps/studio/compat/next/link.tsx
new file mode 100644
index 00000000000..c662e623466
--- /dev/null
+++ b/apps/studio/compat/next/link.tsx
@@ -0,0 +1,252 @@
+import { Link as TanStackLink } from '@tanstack/react-router'
+import {
+ cloneElement,
+ forwardRef,
+ isValidElement,
+ type AnchorHTMLAttributes,
+ type ForwardedRef,
+ type MouseEvent,
+ type ReactElement,
+ type ReactNode,
+ type Ref,
+} from 'react'
+
+// Next's Link accepts either a string `href` or a `UrlObject`
+// ({pathname, query, hash}). Workspace source does both — flatten
+// `UrlObject` into `pathname?search#hash` first so the TanStack `to`
+// prop (which only takes a string) works for either input.
+
+type QueryValue = string | number | boolean | string[] | undefined | null
+type UrlObject = {
+ pathname?: string
+ query?: Record<string, QueryValue> | string
+ hash?: string
+ search?: string
+}
+
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+ href: string | UrlObject
+ children?: ReactNode
+ replace?: boolean
+ scroll?: boolean
+ shallow?: boolean
+ passHref?: boolean
+ prefetch?: boolean | null | 'auto'
+ locale?: string | false
+ legacyBehavior?: boolean
+ // Next-specific props with no TanStack equivalent; accepted and dropped.
+ as?: string | UrlObject
+}
+
+function serializeQuery(query: UrlObject['query']): string {
+ if (!query) return ''
+ if (typeof query === 'string') return query.startsWith('?') ? query : `?${query}`
+ const params = new URLSearchParams()
+ for (const [key, raw] of Object.entries(query)) {
+ if (raw == null) continue
+ if (Array.isArray(raw)) {
+ for (const item of raw) if (item != null) params.append(key, String(item))
+ } else {
+ params.set(key, String(raw))
+ }
+ }
+ const s = params.toString()
+ return s ? `?${s}` : ''
+}
+
+function resolveHref(href: string | UrlObject): string {
+ if (typeof href === 'string') return href
+ const pathname = href.pathname ?? ''
+ const search = href.search ?? serializeQuery(href.query)
+ const hash = href.hash ? (href.hash.startsWith('#') ? href.hash : `#${href.hash}`) : ''
+ return `${pathname}${search}${hash}`
+}
+
+// Inlined at build time via Vite's `define`. Must agree with Vite `base`
+// and `tanstackStart({ router: { basepath } })`. Empty string when no
+// basePath is configured. Used to strip a duplicate prefix in
+// `splitInternalUrl` below — see the comment there.
+const NEXT_PUBLIC_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
+
+// TanStack Link's `to` prop is a route-pattern path; query params and hash
+// must be passed separately via `search` / `hash`. Studio code (and Next's
+// own contract) routinely passes one of three href shapes:
+// 1. a relative path like `/project/abc/editor/123?schema=public`
+// 2. a same-origin absolute URL produced by `new URL(...).toString()`,
+// e.g. `http://localhost:8082/project/abc/editor/123?schema=public`
+// (this is what `buildTableEditorUrl` does)
+// 3. a genuinely external URL like `https://supabase.com/docs`.
+//
+// If we forward any of these straight through to TanStack as `to`, TanStack
+// either fails to match a known route pattern (#1 with query) or treats
+// the whole thing as external (#2) and falls back to native browser
+// navigation — which the user sees as a full page reload.
+//
+// Split into three parts: pathname, search, hash. Same-origin absolute
+// URLs are normalised to a relative path. Cross-origin URLs are left
+// alone so TanStack's external-link path handles them.
+//
+// basePath quirk: TanStack's `to` is **basepath-relative** — given
+// `basepath: '/dashboard'` and `to: '/foo'`, TanStack builds the href
+// `/dashboard/foo`. Next's contract treats `href` as the **full path
+// from app root including basePath**, and studio code routinely
+// pre-prefixes BASE_PATH (e.g. `buildTableEditorUrl` calls
+// `new URL(`${BASE_PATH}/project/.../editor/...`, location.origin)`).
+// Forwarding the BASE_PATH-prefixed pathname as `to` makes TanStack
+// double-prefix it (`/dashboard/dashboard/project/...`). Strip the
+// basePath when we see it, so what we hand TanStack is always
+// basepath-relative.
+function splitInternalUrl(url: string): {
+ to: string
+ search?: Record<string, string>
+ hash?: string
+} {
+ // Try to detect cross-origin absolute URLs cheaply before paying for a
+ // full parse. Protocol-relative URLs (`//host/...`) are always external.
+ if (url.startsWith('//')) {
+ return { to: url }
+ }
+
+ // Use the document origin as the parse base so relative inputs resolve.
+ // SSR has no `location`; fall back to a placeholder host that won't ever
+ // collide with a real one.
+ const base =
+ typeof window !== 'undefined' && window.location ? window.location.origin : 'http://_/'
+
+ let parsed: URL
+ try {
+ parsed = new URL(url, base)
+ } catch {
+ return { to: url }
+ }
+
+ // Cross-origin → leave for TanStack to handle as external.
+ if (
+ typeof window !== 'undefined' &&
+ window.location &&
+ parsed.origin !== window.location.origin
+ ) {
+ return { to: url }
+ }
+
+ let pathname = parsed.pathname
+ // Strip a leading basePath segment so we hand TanStack a basepath-
+ // relative path. Match `/dashboard` exactly OR `/dashboard/...`; don't
+ // strip a coincidental prefix like `/dashboard-other`.
+ if (
+ NEXT_PUBLIC_BASE_PATH &&
+ (pathname === NEXT_PUBLIC_BASE_PATH || pathname.startsWith(`${NEXT_PUBLIC_BASE_PATH}/`))
+ ) {
+ pathname = pathname.slice(NEXT_PUBLIC_BASE_PATH.length) || '/'
+ }
+
+ const search = Object.fromEntries(parsed.searchParams)
+ const hash = parsed.hash || undefined
+ return {
+ to: pathname,
+ search: Object.keys(search).length > 0 ? search : undefined,
+ hash,
+ }
+}
+
+// Next: prefetch=true|"auto" → eagerly preload; false → never; default
+// in production = true. TanStack's preload values are "intent" (on hover/
+// focus), "viewport" (when entering viewport), "render" (immediately),
+// or false. "intent" is the closest behavioural match to Next's default
+// hover-prefetch behaviour.
+function mapPrefetch(prefetch: LinkProps['prefetch']): 'intent' | false | undefined {
+ if (prefetch === false) return false
+ if (prefetch === true || prefetch === 'auto') return 'intent'
+ return undefined
+}
+
+const Link = forwardRef(function Link(
+ {
+ href,
+ as: _as,
+ replace,
+ scroll: _scroll,
+ shallow: _shallow,
+ passHref,
+ prefetch,
+ locale: _locale,
+ legacyBehavior,
+ children,
+ onClick,
+ ...rest
+ }: LinkProps,
+ ref: ForwardedRef<HTMLAnchorElement>
+) {
+ const resolved = resolveHref(href)
+ const { to, search, hash } = splitInternalUrl(resolved)
+ const preload = mapPrefetch(prefetch)
+
+ // Next's `legacyBehavior` (and `passHref` with a custom anchor child)
+ // expects the consumer's child element to *be* the anchor — the parent
+ // <Link> shouldn't render its own. We approximate by cloning the
+ // single child element and stamping `href` plus a click handler that
+ // fires TanStack navigation. Modifier-clicks / middle-clicks fall
+ // through to the browser the same way Next does.
+ if (legacyBehavior && isValidElement(children)) {
+ const child = children as ReactElement<{
+ href?: string
+ onClick?: (e: MouseEvent<HTMLAnchorElement>) => void
+ ref?: Ref<HTMLAnchorElement>
+ }>
+ return (
+ <TanStackLink
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ to={to as any}
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ search={search as any}
+ hash={hash}
+ replace={replace}
+ preload={preload}
+ // TanStack Link supports a function child for custom rendering.
+ // Cast through unknown to bridge the typing — runtime contract is
+ // the same.
+ >
+ {(() => {
+ // Inside TanStackLink's child slot we still get an <a> by default;
+ // when legacyBehavior is true the consumer wants to control the
+ // anchor themselves. Render the cloned child with merged props.
+ return cloneElement(child, {
+ href: resolved,
+ ref,
+ onClick: (e: MouseEvent<HTMLAnchorElement>) => {
+ child.props.onClick?.(e)
+ onClick?.(e)
+ },
+ })
+ })()}
+ </TanStackLink>
+ )
+ }
+
+ // `passHref` without `legacyBehavior` is a no-op in modern Next when
+ // the child is anything other than an `<a>` — the wrapping <Link>
+ // renders the anchor and the `href` attribute lands on it. We get the
+ // same outcome by passing children through TanStackLink, which also
+ // renders an anchor.
+ void passHref
+
+ return (
+ <TanStackLink
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ to={to as any}
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ search={search as any}
+ hash={hash}
+ replace={replace}
+ preload={preload}
+ ref={ref}
+ onClick={onClick}
+ {...rest}
+ >
+ {children}
+ </TanStackLink>
+ )
+})
+
+// eslint-disable-next-line no-restricted-exports
+export default Link
diff --git a/apps/studio/compat/next/navigation.ts b/apps/studio/compat/next/navigation.ts
new file mode 100644
index 00000000000..576693a1d9b
--- /dev/null
+++ b/apps/studio/compat/next/navigation.ts
@@ -0,0 +1,140 @@
+import {
+ useLocation,
+ useMatches,
+ useParams as useTanStackParams,
+ useRouter as useTanStackRouter,
+} from '@tanstack/react-router'
+import { useMemo } from 'react'
+
+// `next/navigation` is the App Router hook surface (Next 13+). Studio is
+// still pages-based, so most of these are entry-points that arrive via
+// stray imports or shared packages — we keep the surface comprehensive
+// to avoid call sites silently getting `undefined` for something Next
+// would have provided.
+
+type NavigateOptions = {
+ scroll?: boolean
+}
+
+type PrefetchOptions = {
+ kind?: 'auto' | 'full' | 'temporary'
+}
+
+export function usePathname(): string | null {
+ return useLocation().pathname
+}
+
+export function useRouter() {
+ const router = useTanStackRouter()
+
+ return useMemo(
+ () => ({
+ push: (href: string, _options?: NavigateOptions) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ router.navigate({ to: href as any })
+ },
+ replace: (href: string, _options?: NavigateOptions) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ router.navigate({ to: href as any, replace: true })
+ },
+ // App Router's refresh() refetches the current route's data without
+ // re-mounting the React tree. Closest TanStack equivalent is
+ // invalidating the active matches.
+ refresh: () => {
+ router.invalidate()
+ },
+ back: () => {
+ if (typeof window !== 'undefined') window.history.back()
+ },
+ forward: () => {
+ if (typeof window !== 'undefined') window.history.forward()
+ },
+ prefetch: (href: string, _options?: PrefetchOptions) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ router.preloadRoute({ to: href as any }).catch(() => {
+ // Match Next's fire-and-forget contract.
+ })
+ },
+ }),
+ [router]
+ )
+}
+
+export function useSearchParams(): URLSearchParams {
+ const location = useLocation()
+ // App Router returns a ReadonlyURLSearchParams; URLSearchParams is
+ // structurally compatible for read access.
+ return useMemo(() => new URLSearchParams(location.searchStr ?? ''), [location.searchStr])
+}
+
+export function useParams<
+ T extends Record<string, string | string[]> = Record<string, string>,
+>(): T {
+ // App Router's useParams() returns a flat object of dynamic segments.
+ // TanStack's strict-false useParams returns the same shape merged
+ // across matches.
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return useTanStackParams({ strict: false } as any) as T
+}
+
+// `useSelectedLayoutSegment(parallelRoute?)` returns the active leaf
+// segment one level below the layout that calls it. We approximate by
+// returning the trailing URL segment of the active route, which is what
+// most studio callers want when they drift into this hook.
+export function useSelectedLayoutSegment(_parallelRouteKey?: string): string | null {
+ const matches = useMatches()
+ const leafRouteId = matches[matches.length - 1]?.routeId
+ if (!leafRouteId) return null
+ const segments = leafRouteId.split('/').filter(Boolean)
+ const last = segments[segments.length - 1]
+ return last ?? null
+}
+
+export function useSelectedLayoutSegments(_parallelRouteKey?: string): string[] {
+ const matches = useMatches()
+ const leafRouteId = matches[matches.length - 1]?.routeId
+ if (!leafRouteId) return []
+ return leafRouteId.split('/').filter(Boolean)
+}
+
+// Next's RedirectType enum. App Router uses these as string values.
+export const RedirectType = {
+ push: 'push',
+ replace: 'replace',
+} as const
+export type RedirectType = (typeof RedirectType)[keyof typeof RedirectType]
+
+// Next signals these by throwing internal symbols that Next's renderer
+// catches. We have no equivalent renderer in TanStack, so we use the
+// closest behavioural match: `redirect` does a client-side navigation
+// and then throws so the calling component stops rendering on the same
+// tick (mirroring Next's "function never returns" contract). Callers
+// that catch and ignore will get unexpected behaviour — same as in Next.
+const NEXT_NOT_FOUND = Symbol.for('next.not-found')
+const NEXT_REDIRECT = Symbol.for('next.redirect')
+
+export function notFound(): never {
+ const err = new Error('NEXT_NOT_FOUND') as Error & { digest?: symbol }
+ err.digest = NEXT_NOT_FOUND
+ throw err
+}
+
+export function redirect(url: string, type: RedirectType = RedirectType.replace): never {
+ if (typeof window !== 'undefined') {
+ if (type === RedirectType.push) {
+ window.location.assign(url)
+ } else {
+ window.location.replace(url)
+ }
+ }
+ const err = new Error(`NEXT_REDIRECT;${type};${url}`) as Error & { digest?: symbol }
+ err.digest = NEXT_REDIRECT
+ throw err
+}
+
+export function permanentRedirect(url: string, type: RedirectType = RedirectType.replace): never {
+ // Next distinguishes permanent vs temporary at the framework level
+ // (different HTTP status when triggered server-side). Client-side
+ // there's no observable difference; we delegate to redirect().
+ return redirect(url, type)
+}
diff --git a/apps/studio/compat/next/router.test.ts b/apps/studio/compat/next/router.test.ts
new file mode 100644
index 00000000000..f5b3aa67323
--- /dev/null
+++ b/apps/studio/compat/next/router.test.ts
@@ -0,0 +1,60 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveUrl } from './router'
+
+describe('resolveUrl (next/router compat shim)', () => {
+ it('returns string URLs untouched', () => {
+ expect(resolveUrl('/project/abc/editor/1?schema=public')).toBe(
+ '/project/abc/editor/1?schema=public'
+ )
+ // A string that happens to contain brackets is NOT interpolated.
+ expect(resolveUrl('/project/[ref]/editor')).toBe('/project/[ref]/editor')
+ })
+
+ it('interpolates dynamic params from query into a bracketed pathname and drops them from the query string', () => {
+ // The regression we fixed: useUrlState pushes `router.pathname` (the bracketed
+ // pattern) + query. Next fills the params; the shim must too, or TanStack
+ // navigates to a literal `/project/[ref]/...` and bounces to "project not found".
+ expect(
+ resolveUrl({
+ pathname: '/project/[ref]/database/tables/[id]',
+ query: { ref: 'default', id: '123', schema: 'public', sort: 'name:asc' },
+ })
+ ).toBe('/project/default/database/tables/123?schema=public&sort=name%3Aasc')
+ })
+
+ it('omits the query string entirely when every param is consumed', () => {
+ expect(resolveUrl({ pathname: '/project/[ref]/settings', query: { ref: 'abc' } })).toBe(
+ '/project/abc/settings'
+ )
+ })
+
+ it('leaves a bracket-free pathname and its query alone', () => {
+ expect(resolveUrl({ pathname: '/project/default/sql', query: { a: '1', b: '2' } })).toBe(
+ '/project/default/sql?a=1&b=2'
+ )
+ })
+
+ it('interpolates required and optional catch-all segments', () => {
+ expect(
+ resolveUrl({
+ pathname: '/project/[ref]/logs/[[...slug]]',
+ query: { ref: 'r', slug: ['a', 'b'] },
+ })
+ ).toBe('/project/r/logs/a/b')
+ expect(resolveUrl({ pathname: '/p/[...rest]', query: { rest: ['x', 'y'] } })).toBe('/p/x/y')
+ })
+
+ it('does not interpolate when query is a raw string (cannot fill named params)', () => {
+ expect(resolveUrl({ pathname: '/project/[ref]/x', query: 'a=1' })).toBe('/project/[ref]/x?a=1')
+ })
+
+ it('preserves hash and honours an explicit search override', () => {
+ expect(resolveUrl({ pathname: '/project/[ref]', query: { ref: 'x' }, hash: 'section' })).toBe(
+ '/project/x#section'
+ )
+ expect(
+ resolveUrl({ pathname: '/project/[ref]', query: { ref: 'x', drop: 'me' }, search: '?a=1' })
+ ).toBe('/project/x?a=1')
+ })
+})
diff --git a/apps/studio/compat/next/router.ts b/apps/studio/compat/next/router.ts
new file mode 100644
index 00000000000..479b4234e84
--- /dev/null
+++ b/apps/studio/compat/next/router.ts
@@ -0,0 +1,406 @@
+import {
+ useLocation,
+ useMatches,
+ useParams,
+ useSearch,
+ useRouter as useTanStackRouter,
+} from '@tanstack/react-router'
+import { useMemo } from 'react'
+
+import { getRouterEventsProxy } from './_router-events'
+
+// Next's pages-router exposes `router.pathname` as the route *pattern*
+// (e.g. `/project/[ref]/sql/[id]`), not the resolved URL. TanStack's
+// route id uses `$param` — convert so legacy code that does
+// `router.pathname.endsWith('/sql/[id]')` keeps working.
+//
+// Also strip the trailing slash TanStack appends to index-route ids
+// (`/project/$ref/`). Next's pages-router never includes a trailing
+// slash, so consumers like `router.pathname.split('/')[3]` (used in
+// the project sidebar's active-route check) silently see an empty
+// string for index pages instead of `undefined`, and the home icon
+// stops highlighting. The root path stays `/` either way.
+function toNextPathPattern(routeId: string) {
+ // Strip TanStack's layout-route segments — they're prefixed with `_`
+ // (`_app`, `_auth`, etc.) and don't appear in the URL or in Next's
+ // `router.pathname`. Without this, downstream code that derives a path
+ // segment from `pathname.split('/')[N]` indexes into the wrong slot —
+ // e.g. Sidebar uses index 3 to pick the active route, expecting
+ // `/org/[slug]/general` but receiving `/_app/org/[slug]/general` and
+ // ending up with `[slug]` instead of `general`.
+ const withoutLayoutSegments = routeId.replace(/\/_[a-zA-Z0-9_]+(?=\/|$)/g, '')
+ const withBracketParams = withoutLayoutSegments.replace(/\$([a-zA-Z0-9_]+)/g, '[$1]')
+ if (withBracketParams === '' || withBracketParams === '/') return '/'
+ return withBracketParams.replace(/\/$/, '')
+}
+
+// Normalise TanStack's `router.basepath` to Next's `router.basePath`
+// shape: '' for "no basePath" or '/path' for "configured" (leading
+// slash, no trailing slash).
+function toNextBasePath(tanstackBasepath: string | undefined): string {
+ if (!tanstackBasepath || tanstackBasepath === '/') return ''
+ const withLeading = tanstackBasepath.startsWith('/') ? tanstackBasepath : `/${tanstackBasepath}`
+ return withLeading.endsWith('/') ? withLeading.slice(0, -1) : withLeading
+}
+
+type QueryValue = string | number | boolean | string[] | undefined | null
+type UrlObject = {
+ pathname?: string
+ query?: Record<string, QueryValue> | string
+ hash?: string
+ search?: string
+}
+
+function serializeQuery(query: UrlObject['query']): string {
+ if (!query) return ''
+ if (typeof query === 'string') return query.startsWith('?') ? query : `?${query}`
+ const params = new URLSearchParams()
+ for (const [key, raw] of Object.entries(query)) {
+ if (raw == null) continue
+ if (Array.isArray(raw)) {
+ for (const item of raw) if (item != null) params.append(key, String(item))
+ } else {
+ params.set(key, String(raw))
+ }
+ }
+ const s = params.toString()
+ return s ? `?${s}` : ''
+}
+
+// Next's pages-router fills dynamic segments in a UrlObject's `pathname` from
+// `query`, then drops the consumed keys from the query string — e.g.
+// `push({ pathname: '/project/[ref]/editor/[id]', query: { ref, id, foo } })`
+// resolves to `/project/<ref>/editor/<id>?foo=...`. `router.pathname` here is
+// the bracketed route *pattern* (see toNextPathPattern) and callers like
+// useUrlState push it back verbatim, so without this a sort/filter update on a
+// dynamic route would navigate TanStack to a LITERAL `/project/[ref]/...`,
+// which matches no project (ref === '[ref]') and bounces to a "project not
+// found" redirect. Mirrors Next's behaviour so those pushes stay on-page.
+function interpolatePathname(
+ pathname: string,
+ query: Record<string, QueryValue>
+): { pathname: string; query: Record<string, QueryValue> } {
+ if (!pathname.includes('[')) return { pathname, query }
+ const consumed = new Set<string>()
+ const encodeValue = (v: QueryValue) =>
+ v == null
+ ? ''
+ : Array.isArray(v)
+ ? v.map((item) => encodeURIComponent(String(item))).join('/')
+ : encodeURIComponent(String(v))
+ const interpolated = pathname
+ // optional + required catch-all: `[[...name]]` / `[...name]`
+ .replace(/\[\[?\.\.\.([^\]]+)\]?\]/g, (_match, name: string) => {
+ consumed.add(name)
+ return encodeValue(query[name])
+ })
+ // single dynamic segment: `[name]`
+ .replace(/\[([^\]]+)\]/g, (_match, name: string) => {
+ consumed.add(name)
+ return encodeValue(query[name])
+ })
+ if (consumed.size === 0) return { pathname: interpolated, query }
+ const rest: Record<string, QueryValue> = {}
+ for (const [key, value] of Object.entries(query)) {
+ if (!consumed.has(key)) rest[key] = value
+ }
+ return { pathname: interpolated, query: rest }
+}
+
+// Exported for unit tests (see router.test.ts) — not part of the Next surface.
+export function resolveUrl(url: string | UrlObject): string {
+ if (typeof url === 'string') return url
+ let pathname = url.pathname ?? ''
+ let query = url.query
+ // Interpolate named params into the path when query is a record — a raw query
+ // string can't fill `[param]` placeholders, so leave it untouched.
+ if (query && typeof query === 'object') {
+ const interpolated = interpolatePathname(pathname, query)
+ pathname = interpolated.pathname
+ query = interpolated.query
+ }
+ const search = url.search ?? serializeQuery(query)
+ const hash = url.hash ? (url.hash.startsWith('#') ? url.hash : `#${url.hash}`) : ''
+ return `${pathname}${search}${hash}`
+}
+
+// Studio code occasionally constructs `router.push` targets via
+// `new URL().toString()` (e.g. `buildTableEditorUrl`), producing fully
+// qualified `http://localhost:8082/dashboard/project/.../editor/123?...`
+// strings — origin + basePath + path. Next's router tolerated both by
+// treating same-origin absolute URLs as relative paths AND understanding
+// basePath was already in the input.
+//
+// TanStack Router needs `to` to be basepath-relative — given
+// `basepath: '/dashboard'` and `to: '/foo'`, it produces `/dashboard/foo`.
+// So we strip the origin AND the basePath when present; otherwise
+// `router.push('/dashboard/...')` would double-prefix to
+// `/dashboard/dashboard/...`. Mirrors the equivalent logic in the
+// next/link shim's `splitInternalUrl`. Cross-origin URLs pass through
+// untouched so TanStack hands them to the browser as external.
+const NEXT_PUBLIC_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
+
+// Strip a leading basePath segment from a path-shape URL (no origin).
+// Mirrors what Next's pages-router does for `asPath`. Used by both
+// `useRouter().asPath` and the push/replace path-normalisation pipeline.
+function stripBasePath(pathish: string): string {
+ if (!NEXT_PUBLIC_BASE_PATH) return pathish
+ if (pathish === NEXT_PUBLIC_BASE_PATH) return '/'
+ if (pathish.startsWith(`${NEXT_PUBLIC_BASE_PATH}/`)) {
+ return pathish.slice(NEXT_PUBLIC_BASE_PATH.length)
+ }
+ return pathish
+}
+
+function toRelativeSameOrigin(url: string): string {
+ let pathname: string
+ let search = ''
+ let hash = ''
+ if (url.startsWith('http://') || url.startsWith('https://')) {
+ if (typeof window === 'undefined' || !window.location) return url
+ try {
+ const parsed = new URL(url)
+ if (parsed.origin !== window.location.origin) return url
+ pathname = parsed.pathname
+ search = parsed.search
+ hash = parsed.hash
+ } catch {
+ return url
+ }
+ } else {
+ // Relative input — split on the first `?` / `#` so we can strip a
+ // basePath segment from the pathname only.
+ const queryIdx = url.indexOf('?')
+ const hashIdx = url.indexOf('#')
+ const splitIdx =
+ [queryIdx, hashIdx].filter((i) => i >= 0).sort((a, b) => a - b)[0] ?? url.length
+ pathname = url.slice(0, splitIdx)
+ const rest = url.slice(splitIdx)
+ const qEnd = rest.indexOf('#')
+ if (rest.startsWith('?')) {
+ search = qEnd >= 0 ? rest.slice(0, qEnd) : rest
+ hash = qEnd >= 0 ? rest.slice(qEnd) : ''
+ } else if (rest.startsWith('#')) {
+ hash = rest
+ }
+ }
+ return `${stripBasePath(pathname)}${search}${hash}`
+}
+
+// Next's pages-router passes a TransitionOptions bag as the 3rd arg to
+// push/replace. We accept the shape but ignore every field — TanStack has
+// no direct equivalent for any of them (shallow, locale, scroll,
+// unstable_skipClientCache). Notably `shallow` is a no-op here, NOT a
+// push-vs-replace signal: callers pass `push(url, as, { shallow: true })`
+// expecting a normal history push (e.g. useUrlState, MonacoEditor). Whether
+// a navigation replaces is decided solely by which method is called
+// (push vs replace) via the internal `_replace` flag below.
+type TransitionOptions = {
+ shallow?: boolean
+ locale?: string | false
+ scroll?: boolean
+ unstable_skipClientCache?: boolean
+}
+
+type PrefetchOptions = {
+ priority?: boolean
+ locale?: string | false
+ unstable_skipClientCache?: boolean
+}
+
+export function useRouter() {
+ const router = useTanStackRouter()
+ const location = useLocation()
+ const matches = useMatches()
+ const params = useParams({ strict: false })
+ const search = useSearch({ strict: false })
+
+ return useMemo(() => {
+ const leafRouteId = matches[matches.length - 1]?.routeId ?? location.pathname
+ const pathPattern = toNextPathPattern(leafRouteId)
+
+ // Both push and replace accept Next's (url, as?, options?) signature.
+ // `as` is the legacy alias path (mostly obsolete in modern Next; ignored
+ // here — the resolved `url` is what we navigate to). Returns
+ // Promise<boolean> matching Next; TanStack's navigate doesn't surface
+ // a success boolean so we always resolve to true.
+ const navigate = async (
+ url: string | UrlObject,
+ _as?: string | UrlObject,
+ // `_replace` is an internal flag set by the `replace()` method below.
+ // It's intentionally not part of Next's public TransitionOptions.
+ options?: TransitionOptions & { _replace?: boolean }
+ ): Promise<boolean> => {
+ const to = toRelativeSameOrigin(resolveUrl(url))
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ await router.navigate({ to: to as any, replace: options?._replace })
+ return true
+ }
+
+ return {
+ // ---- state ----
+ pathname: pathPattern,
+ // Next's pages-router exposes `route` and `pathname` as the same value
+ // — the route pattern with bracketed dynamic segments. Some studio
+ // code (e.g. AppLayout/BranchLink, AppLayout/ProjectDropdown) reads
+ // `router.route` specifically; without this it's `undefined` and
+ // downstream `.split('/')` calls crash.
+ route: pathPattern,
+ // Route params take precedence over search params of the same name,
+ // matching Next's pages-router req.query merge order.
+ query: { ...search, ...params },
+ // Next's pages-router `asPath` is path + query + hash *without* the
+ // origin and *without* the configured `basePath`
+ // (https://nextjs.org/docs/pages/api-reference/functions/use-router).
+ // Studio code relies on the no-basePath shape — e.g.
+ // OrganizationSettingsLayout compares `currentPath === '/org/<slug>/
+ // general'` for the side-nav active state, with section hrefs that
+ // never include `/dashboard`. Returning a basepath-prefixed value
+ // breaks every such strict-equality check.
+ asPath: stripBasePath(location.href),
+ // Mirror Next's pages-router contract for `basePath`:
+ // - no basePath configured → '' (empty string)
+ // - configured → '/dashboard' (leading slash, no trailing)
+ //
+ // TanStack stores the raw `basepath` option without normalising:
+ // `undefined` becomes '/' (its internal default), 'dashboard' stays
+ // 'dashboard', '/dashboard/' stays '/dashboard/'. Studio code then
+ // does `${router.basePath}/img/...` and trips on every non-Next
+ // shape ('/' → '//img/...' protocol-relative; 'dashboard' →
+ // 'dashboard/img/...' relative-to-current-path; '/dashboard/' →
+ // '/dashboard//img/...' double slash).
+ basePath: toNextBasePath(router.basepath),
+ // TanStack resolves params/search synchronously on render, so the
+ // pages-router "is the dynamic param ready yet?" flag is always
+ // true here. (In Next this can be false during the very first
+ // render of a dynamic page.)
+ isReady: true,
+ // No equivalent under TanStack — surface as static `false` so call
+ // sites that read these don't crash. Next-only features.
+ isFallback: false,
+ isPreview: false,
+ isLocaleDomain: false,
+ // i18n routing isn't wired through TanStack here. Return undefined
+ // for the active locale and an empty list for the rest — matches
+ // a Next app that has no i18n config.
+ locale: undefined as string | undefined,
+ locales: undefined as string[] | undefined,
+ defaultLocale: undefined as string | undefined,
+ domainLocales: undefined as Array<{ domain: string; defaultLocale: string }> | undefined,
+
+ // ---- navigation ----
+ push: (url: string | UrlObject, as?: string | UrlObject, options?: TransitionOptions) =>
+ navigate(url, as, options),
+ replace: (url: string | UrlObject, as?: string | UrlObject, options?: TransitionOptions) =>
+ navigate(url, as, { ...options, _replace: true }),
+ reload: () => {
+ if (typeof window !== 'undefined') window.location.reload()
+ },
+ back: () => {
+ if (typeof window !== 'undefined') window.history.back()
+ },
+ forward: () => {
+ if (typeof window !== 'undefined') window.history.forward()
+ },
+ prefetch: async (
+ url: string,
+ _asPath?: string,
+ _options?: PrefetchOptions
+ ): Promise<void> => {
+ try {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ await router.preloadRoute({ to: url as any })
+ } catch {
+ // Next's prefetch is fire-and-forget; swallow resolution errors
+ // (e.g. unknown route) so callers don't have to guard.
+ }
+ },
+ // Next-only escape hatch for popstate handling. Not wired up; accept
+ // and discard the callback so call sites compile and run without
+ // throwing. Callers that *rely* on this (none currently in studio)
+ // would need a real implementation.
+ beforePopState: (_cb: (state: unknown) => boolean) => {},
+
+ // ---- events ----
+ events: getRouterEventsProxy(router),
+ }
+ }, [router, location.href, location.pathname, matches, params, search])
+}
+
+// Normalise an optional-catch-all route's params across both frameworks.
+//
+// Next's `[[...name]]` surfaces the trailing path as `query.name: string[]`,
+// while TanStack's splat (`$`) surfaces it as `query._splat: string`. The
+// shim can't rename `_splat` to the Next param name on its own — that name
+// only exists in the Next page filename and never reaches the router — so
+// the caller passes it. Returns the trailing path as a string[] plus the
+// remaining query params (with the catch-all keys stripped) for building
+// query strings. Shared by every migrated catch-all page so the logic lives
+// in one place.
+export function parseCatchAllRoute(
+ query: Record<string, string | string[] | undefined>,
+ paramName: string
+): {
+ segments: string[] | undefined
+ queryParams: Record<string, string | string[] | undefined>
+} {
+ const { [paramName]: raw, _splat, ...queryParams } = query
+ const segments = Array.isArray(raw)
+ ? raw
+ : typeof _splat === 'string' && _splat
+ ? _splat.split('/')
+ : undefined
+ return { segments, queryParams }
+}
+
+// Module-scope singleton — Next exposes the same proxy via
+// `import router from 'next/router'`. We have one consumer
+// (Support/DiscordCTACard) that reads `router.basePath` at render time
+// outside of a hook context, so we surface the env-derived basePath
+// directly. Push/replace/etc. fall through to `window.location` to keep
+// future module-scope navigations safe; nothing in studio uses them
+// today.
+const singletonBasePath = toNextBasePath(
+ // Read both the TanStack and Next env names — TanStack also reads
+ // VITE_BASE_URL but the studio config writes NEXT_PUBLIC_BASE_PATH.
+ process.env.NEXT_PUBLIC_BASE_PATH
+)
+
+const singletonRouter = {
+ basePath: singletonBasePath,
+ pathname: '',
+ route: '',
+ query: {} as Record<string, string | string[] | undefined>,
+ asPath: '',
+ isReady: true,
+ isFallback: false,
+ isPreview: false,
+ isLocaleDomain: false,
+ push: async (url: string | UrlObject): Promise<boolean> => {
+ if (typeof window !== 'undefined') window.location.assign(resolveUrl(url))
+ return true
+ },
+ replace: async (url: string | UrlObject): Promise<boolean> => {
+ if (typeof window !== 'undefined') window.location.replace(resolveUrl(url))
+ return true
+ },
+ reload: () => {
+ if (typeof window !== 'undefined') window.location.reload()
+ },
+ back: () => {
+ if (typeof window !== 'undefined') window.history.back()
+ },
+ forward: () => {
+ if (typeof window !== 'undefined') window.history.forward()
+ },
+ prefetch: async () => {},
+ beforePopState: (_cb: (state: unknown) => boolean) => {},
+ events: {
+ on: () => {},
+ off: () => {},
+ emit: () => {},
+ },
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default singletonRouter
diff --git a/apps/studio/compat/next/script.tsx b/apps/studio/compat/next/script.tsx
new file mode 100644
index 00000000000..150211de310
--- /dev/null
+++ b/apps/studio/compat/next/script.tsx
@@ -0,0 +1,107 @@
+import { useEffect, useRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'
+
+// Next/Script handles ordering, deduplication, and load callbacks for
+// third-party scripts. Under Vite we have no orchestrator — render a
+// `<script>` and approximate the callback contract. Studio doesn't
+// currently mount any <Script>, but the surface is shimmed
+// comprehensively so the migration doesn't catch anyone out later.
+
+type Strategy = 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker'
+
+interface ScriptProps extends Omit<
+ ComponentPropsWithoutRef<'script'>,
+ 'children' | 'onLoad' | 'onError'
+> {
+ // Accepted-and-dropped in this shim — the browser handles network
+ // priority via the regular `<script>` element; we don't reorder.
+ strategy?: Strategy
+ // Children as the script body (inline scripts) are also accepted via
+ // dangerouslySetInnerHTML; Next allows either. We honour both.
+ children?: ReactNode
+ onLoad?: (e: Event) => void
+ onReady?: () => void
+ onError?: (e: Event | string) => void
+}
+
+// eslint-disable-next-line no-restricted-exports
+export default function Script({
+ strategy: _strategy,
+ children,
+ dangerouslySetInnerHTML,
+ onLoad,
+ onError,
+ onReady,
+ src,
+ id,
+ ...rest
+}: ScriptProps) {
+ const ref = useRef<HTMLScriptElement | null>(null)
+ const readyFiredRef = useRef(false)
+
+ // onReady fires once the script has loaded (or immediately on mount
+ // if it's already been loaded by a previous instance with the same
+ // id). Approximate by firing once after mount when the element is
+ // present and either has no src (inline) or has finished loading.
+ useEffect(() => {
+ const node = ref.current
+ if (!node || !onReady || readyFiredRef.current) return
+ if (!src) {
+ // Inline script — body executed synchronously on mount.
+ readyFiredRef.current = true
+ onReady()
+ return
+ }
+ if (node.dataset.loaded === 'true') {
+ readyFiredRef.current = true
+ onReady()
+ }
+ }, [onReady, src])
+
+ const handleLoad = (e: Event | React.SyntheticEvent<HTMLScriptElement>) => {
+ const node = ref.current
+ if (node) node.dataset.loaded = 'true'
+ onLoad?.(e as Event)
+ if (onReady && !readyFiredRef.current) {
+ readyFiredRef.current = true
+ onReady()
+ }
+ }
+
+ const handleError = (e: Event | React.SyntheticEvent<HTMLScriptElement>) => {
+ onError?.(e as Event)
+ }
+
+ // For inline scripts, `children` is preferred over
+ // dangerouslySetInnerHTML when both are present (matches Next).
+ if (children !== undefined) {
+ return (
+ <script
+ {...rest}
+ id={id}
+ ref={ref}
+ onLoad={handleLoad}
+ onError={handleError}
+ dangerouslySetInnerHTML={{
+ __html: typeof children === 'string' ? children : '',
+ }}
+ />
+ )
+ }
+
+ return (
+ // This shim mirrors next/script for the TanStack build (where vite aliases
+ // `next/script` to this file via nextCompat). Call sites that opt for an
+ // explicit `async`/`defer` already pass it through via {...rest}; we don't
+ // force one here because Next's <Script> doesn't either at this layer.
+ // eslint-disable-next-line @next/next/no-sync-scripts
+ <script
+ {...rest}
+ id={id}
+ src={src}
+ ref={ref}
+ onLoad={handleLoad}
+ onError={handleError}
+ dangerouslySetInnerHTML={dangerouslySetInnerHTML}
+ />
+ )
+}
diff --git a/apps/studio/compat/next/server.ts b/apps/studio/compat/next/server.ts
new file mode 100644
index 00000000000..a966c9b37d4
--- /dev/null
+++ b/apps/studio/compat/next/server.ts
@@ -0,0 +1,77 @@
+// Vite-side compat for `next/server`. Studio's middleware (proxy.ts) and
+// a couple of App Router routes import from here. Most of this surface
+// isn't actually exercised at runtime under TanStack/Vite — middleware
+// doesn't run, and the App Router routes only call NextResponse.json —
+// but the imports need to resolve to real values so the bundle compiles
+// and consumers don't crash if they're invoked.
+
+type NextInit = ResponseInit & {
+ // Next attaches a `request` bag on `next()` to allow middleware to
+ // mutate request headers before forwarding. Accepted-and-ignored here.
+ request?: { headers?: HeadersInit }
+}
+
+const REDIRECT_STATUSES = new Set([301, 302, 303, 307, 308])
+
+function buildResponse(body: BodyInit | null, init?: NextInit): Response {
+ // Strip the Next-only `request` field before handing off to the
+ // standard Response constructor — it'd be retained as a non-standard
+ // option and trip strict implementations.
+ if (init && 'request' in init) {
+ const { request: _request, ...rest } = init
+ return new Response(body, rest)
+ }
+ return new Response(body, init)
+}
+
+export const NextResponse = {
+ json: (data: unknown, init?: NextInit) => {
+ // Response.json sets Content-Type for us; merge any caller headers.
+ return Response.json(data, init && 'request' in init ? { ...init, request: undefined } : init)
+ },
+
+ // Middleware uses `NextResponse.next()` to signal "continue without
+ // rewriting". Under TanStack we have no middleware runtime, so the
+ // returned Response is effectively a placeholder that mirrors the
+ // shape Next produces (empty 200).
+ next: (init?: NextInit): Response => buildResponse(null, init),
+
+ redirect: (url: string | URL, init?: number | NextInit): Response => {
+ const status = typeof init === 'number' ? init : (init?.status ?? 307)
+ if (!REDIRECT_STATUSES.has(status)) {
+ throw new RangeError(
+ `[next/server compat] NextResponse.redirect: invalid status ${status}; expected one of ${[...REDIRECT_STATUSES].join(', ')}`
+ )
+ }
+ const headers = new Headers(typeof init === 'object' ? init?.headers : undefined)
+ headers.set('Location', String(url))
+ return new Response(null, { status, headers })
+ },
+
+ // Used in middleware to rewrite an incoming request to a different
+ // path without changing the visible URL. Encoded by setting the
+ // `x-middleware-rewrite` header (matches Next's runtime contract).
+ rewrite: (destination: string | URL, init?: NextInit): Response => {
+ const headers = new Headers(init?.headers)
+ headers.set('x-middleware-rewrite', String(destination))
+ return buildResponse(null, { ...init, headers })
+ },
+
+ error: (): Response => new Response(null, { status: 500 }),
+}
+
+// NextRequest extends Request with `nextUrl`, `cookies`, `geo`, and `ip`.
+// None of our workspace source reads those fields at runtime — most
+// imports are type-only. Aliasing the runtime value to the global
+// Request constructor keeps value imports working (e.g. `import {
+// NextRequest } from 'next/server'` followed by `(req: NextRequest) => …`
+// type annotations under verbatimModuleSyntax / isolatedModules).
+export const NextRequest = Request
+export type NextRequest = Request
+
+// Stub the type-only exports Next ships so consumers importing them
+// don't need to special-case the shim.
+export type NextMiddleware = (request: Request) => Response | Promise<Response> | undefined | void
+export type MiddlewareConfig = {
+ matcher?: string | string[]
+}
diff --git a/apps/studio/components/grid/MsSqlValidation.tsx b/apps/studio/components/grid/MsSqlValidation.tsx
index 8a57748fd64..8a5a92fff57 100644
--- a/apps/studio/components/grid/MsSqlValidation.tsx
+++ b/apps/studio/components/grid/MsSqlValidation.tsx
@@ -1,5 +1,5 @@
import type { ComponentType, ReactNode } from 'react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import type { Filter, Sort } from './types'
import { isMsSqlForeignTable, type Entity } from '@/data/table-editor/table-editor-types'
diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx
index 4c7871006de..e1f3e5205f8 100644
--- a/apps/studio/components/grid/SupabaseGrid.tsx
+++ b/apps/studio/components/grid/SupabaseGrid.tsx
@@ -91,6 +91,7 @@ export const SupabaseGrid = ({
customHeader={customHeader}
isRefetching={isRefetching}
tableQueriesEnabled={tableQueriesEnabled}
+ rows={rows}
/>
{msSqlWarning.warning !== null && <msSqlWarning.Component />}
diff --git a/apps/studio/components/grid/components/common/DefaultValue.tsx b/apps/studio/components/grid/components/common/DefaultValue.tsx
index 6a94b026097..bf46676a977 100644
--- a/apps/studio/components/grid/components/common/DefaultValue.tsx
+++ b/apps/studio/components/grid/components/common/DefaultValue.tsx
@@ -1,3 +1,3 @@
export const DefaultValue = () => {
- return <span className="sb-grid-default-value opacity-50">DEFAULT</span>
+ return <span className="opacity-50">DEFAULT</span>
}
diff --git a/apps/studio/components/grid/components/common/DropdownControl.tsx b/apps/studio/components/grid/components/common/DropdownControl.tsx
index fe49c3ccc45..ab498bf368c 100644
--- a/apps/studio/components/grid/components/common/DropdownControl.tsx
+++ b/apps/studio/components/grid/components/common/DropdownControl.tsx
@@ -30,8 +30,8 @@ export const DropdownControl = ({
<DropdownMenu>
<DropdownMenuTrigger className={className}>{children}</DropdownMenuTrigger>
<DropdownMenuContent side={side} align={align}>
- <div className="dropdown-control" style={{ maxHeight: '30vh' }}>
- {options.length === 0 && <p className="dropdown-control__empty-text">No more items</p>}
+ <div className="overflow-auto" style={{ maxHeight: '30vh' }}>
+ {options.length === 0 && <p>No more items</p>}
{options.map((x) => {
return (
<DropdownMenuItemTooltip
diff --git a/apps/studio/components/grid/components/common/EmptyValue.tsx b/apps/studio/components/grid/components/common/EmptyValue.tsx
index b1196a5c556..f4172a3f7f2 100644
--- a/apps/studio/components/grid/components/common/EmptyValue.tsx
+++ b/apps/studio/components/grid/components/common/EmptyValue.tsx
@@ -1,3 +1,3 @@
export const EmptyValue = () => {
- return <span className="sb-grid-empty-value opacity-50">EMPTY</span>
+ return <span className="block opacity-50">EMPTY</span>
}
diff --git a/apps/studio/components/grid/components/common/NullValue.tsx b/apps/studio/components/grid/components/common/NullValue.tsx
index a2f45c9398c..c9cafa35019 100644
--- a/apps/studio/components/grid/components/common/NullValue.tsx
+++ b/apps/studio/components/grid/components/common/NullValue.tsx
@@ -1,3 +1,3 @@
export const NullValue = () => {
- return <span className="null-value opacity-50">NULL</span>
+ return <span className="block opacity-50">NULL</span>
}
diff --git a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
index d0133a7f547..741bd38c464 100644
--- a/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
+++ b/apps/studio/components/grid/components/editor/DateTimeEditor.tsx
@@ -13,8 +13,8 @@ import {
PopoverContent,
PopoverTrigger,
} from 'ui'
-import { TimestampInfo, timestampLocalFormatter } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
+import { TimestampInfo, timestampLocalFormatter } from 'ui-patterns/TimestampInfo'
import { BlockKeys } from '../common/BlockKeys'
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
diff --git a/apps/studio/components/grid/components/editor/JsonEditor.tsx b/apps/studio/components/grid/components/editor/JsonEditor.tsx
index 21c6224df7a..da56dfba3c3 100644
--- a/apps/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/apps/studio/components/grid/components/editor/JsonEditor.tsx
@@ -165,7 +165,7 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
<div
className={`${
!!value && jsonString.trim().length == 0 ? 'sb-grid-fill-container' : ''
- } sb-grid-json-editor__trigger`}
+ } text-grid overflow-hidden text-ellipsis px-2`}
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
>
{value === null || value === '' ? <NullValue /> : jsonString}
diff --git a/apps/studio/components/grid/components/editor/NumberEditor.tsx b/apps/studio/components/grid/components/editor/NumberEditor.tsx
index f61f087a032..3d5ed3866f1 100644
--- a/apps/studio/components/grid/components/editor/NumberEditor.tsx
+++ b/apps/studio/components/grid/components/editor/NumberEditor.tsx
@@ -25,7 +25,7 @@ export function NumberEditor<TRow, TSummaryRow = unknown>({
return (
<input
- className="sb-grid-number-editor"
+ className="h-full w-full px-2"
ref={autoFocusAndSelect}
value={value ?? ''}
onChange={onChange}
diff --git a/apps/studio/components/grid/components/editor/TextEditor.tsx b/apps/studio/components/grid/components/editor/TextEditor.tsx
index a3931a74654..f049c1df4a0 100644
--- a/apps/studio/components/grid/components/editor/TextEditor.tsx
+++ b/apps/studio/components/grid/components/editor/TextEditor.tsx
@@ -119,7 +119,7 @@ export const TextEditor = <TRow, TSummaryRow = unknown>({
<div
className={cn(
!!value && value.toString().trim().length === 0 && 'sb-grid-fill-container',
- 'sb-grid-text-editor__trigger'
+ 'text-grid overflow-hidden text-ellipsis px-2'
)}
onClick={() => setIsPopoverOpen(!isPopoverOpen)}
>
diff --git a/apps/studio/components/grid/components/editor/TimeEditor.tsx b/apps/studio/components/grid/components/editor/TimeEditor.tsx
index b092ccd2b81..59cfcfdbd2a 100644
--- a/apps/studio/components/grid/components/editor/TimeEditor.tsx
+++ b/apps/studio/components/grid/components/editor/TimeEditor.tsx
@@ -42,7 +42,7 @@ function BaseEditor<TRow, TSummaryRow = unknown>({
return (
<input
- className="sb-grid-time-editor"
+ className="h-full w-full px-2"
ref={autoFocusAndSelect}
defaultValue={value ?? ''}
onChange={onChange}
diff --git a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
index ae41b4119c7..49933019828 100644
--- a/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
+++ b/apps/studio/components/grid/components/footer/pagination/Pagination.tsx
@@ -2,7 +2,7 @@ import { THRESHOLD_COUNT } from '@supabase/pg-meta'
import { keepPreviousData } from '@tanstack/react-query'
import { useParams } from 'common'
import { AlertCircle, ArrowLeft, ArrowRight, HelpCircle, Loader2 } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -190,6 +190,17 @@ export const Pagination = ({ enableForeignRowsQuery = true }: PaginationProps) =
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isError, snap.enforceExactCount, error?.code])
+ // Reset back to the first page whenever the filters change
+ const hasMountedRef = useRef(false)
+ useEffect(() => {
+ if (!hasMountedRef.current) {
+ hasMountedRef.current = true
+ return
+ }
+ snap.setPage(1)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [filters])
+
// [Joshen] One to revisit if we can consolidate this and the main return statement
if (isForeignTableSelected) {
return (
diff --git a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
index 50e8bb81595..afced4818d5 100644
--- a/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
+++ b/apps/studio/components/grid/components/formatter/ForeignKeyFormatter.tsx
@@ -56,8 +56,8 @@ export const ForeignKeyFormatter = (props: Props) => {
foreignKeyColumn?.format === 'bytea' && !!value ? convertByteaToHex(value) : value
return (
- <div className="sb-grid-foreign-key-formatter flex justify-between">
- <span className="sb-grid-foreign-key-formatter__text">
+ <div className="flex w-full items-center justify-between flex justify-between">
+ <span className="m-0 grow overflow-hidden text-ellipsis">
{formattedValue === null ? <NullValue /> : formattedValue}
</span>
{isLoading && formattedValue !== null && (
@@ -86,6 +86,7 @@ export const ForeignKeyFormatter = (props: Props) => {
</PopoverTrigger>
<PopoverContent
align="end"
+ collisionPadding={8}
className="p-0 w-96"
onDoubleClick={(e) => {
e.preventDefault()
diff --git a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
index f45858e7ca5..f72d3ce51b5 100644
--- a/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
+++ b/apps/studio/components/grid/components/formatter/ReferenceRecordPeek.tsx
@@ -122,39 +122,41 @@ export const ReferenceRecordPeek = ({ table, column, value }: ReferenceRecordPee
</span>
:
</p>
- <DataGrid
- className="h-32 rounded-b border-0"
- columns={columns}
- rows={rows}
- onSelectedCellChange={(args: {
- column: CalculatedColumn<SupaRow, unknown>
- rowIdx: number
- row: SupaRow
- }) => {
- selectedCellRef.current = { idx: args.column.idx, rowIdx: args.rowIdx }
- }}
- onCellDoubleClick={(_, e) => {
- e.preventDefault()
- e.stopPropagation()
- }}
- renderers={{
- noRowsFallback: (
- <div className="w-96 px-2">
- {isLoading && (
- <div className="py-2">
- <ShimmeringLoader />
- </div>
- )}
- {isError && (
- <p className="text-foreground-light">
- Failed to find referencing row: {error.message}
- </p>
- )}
- {isSuccess && <p className="text-foreground-light">No results were returned</p>}
- </div>
- ),
- }}
- />
+ <div className="h-32 overflow-hidden">
+ <DataGrid
+ className="h-full rounded-b border-0"
+ columns={columns}
+ rows={rows}
+ onSelectedCellChange={(args: {
+ column: CalculatedColumn<SupaRow, unknown>
+ rowIdx: number
+ row: SupaRow
+ }) => {
+ selectedCellRef.current = { idx: args.column.idx, rowIdx: args.rowIdx }
+ }}
+ onCellDoubleClick={(_, e) => {
+ e.preventDefault()
+ e.stopPropagation()
+ }}
+ renderers={{
+ noRowsFallback: (
+ <div className="w-96 px-2">
+ {isLoading && (
+ <div className="py-2">
+ <ShimmeringLoader />
+ </div>
+ )}
+ {isError && (
+ <p className="text-foreground-light">
+ Failed to find referencing row: {error.message}
+ </p>
+ )}
+ {isSuccess && <p className="text-foreground-light">No results were returned</p>}
+ </div>
+ ),
+ }}
+ />
+ </div>
<div className="flex items-center justify-end px-2 py-1">
<EditorTablePageLink
href={`/project/${ref}/editor/${table.id}?schema=${table.schema}&filter=${column}%3Aeq%3A${value}`}
diff --git a/apps/studio/components/grid/components/grid/ColumnHeader.tsx b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
index cc75818f6f8..d5e528b7c38 100644
--- a/apps/studio/components/grid/components/grid/ColumnHeader.tsx
+++ b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -38,7 +38,7 @@ export function ColumnHeader<R>({
} as const
return (
- <div ref={setNodeRef} style={style} className="w-full bg-surface-200">
+ <div ref={setNodeRef} style={style} className="w-full">
<div className={`sb-grid-column-header ${cursor}`}>
<div className="sb-grid-column-header__inner grow" {...attributes} {...listeners}>
<ColumnIcon type={columnType} name={column.name as string} foreignKey={foreignKey} />
diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index d5ba2b094b7..9544be6d7ef 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -21,6 +21,7 @@ import { useOnRowsChange } from './Grid.utils'
import { GridError } from './GridError'
import { useTableFilter } from '@/components/grid/hooks/useTableFilter'
import { handleCellKeyDown } from '@/components/grid/SupabaseGrid.utils'
+import { getStableRowIdentifiers } from '@/components/grid/utils/queueOperationUtils'
import { formatForeignKeys } from '@/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.utils'
import { useForeignKeyConstraintsQuery } from '@/data/database/foreign-key-constraints-query'
import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
@@ -166,7 +167,7 @@ export const Grid = memo(
// Check if this cell has pending changes
const isDirty = tableEditorSnap.hasPendingCellChange(
snap.table.id,
- rowIdentifiers,
+ getStableRowIdentifiers(row, rowIdentifiers),
col.key
)
return isDirty ? 'rdg-cell--dirty' : undefined
diff --git a/apps/studio/components/grid/components/grid/Grid.utils.tsx b/apps/studio/components/grid/components/grid/Grid.utils.tsx
index 8edb10cd8d6..ca19a3fea68 100644
--- a/apps/studio/components/grid/components/grid/Grid.utils.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.utils.tsx
@@ -3,6 +3,7 @@ import { RowsChangeData } from 'react-data-grid'
import { toast } from 'sonner'
import { useTableRowOperations } from '../../hooks/useTableRowOperations'
+import { getStableRowIdentifiers } from '../../utils/queueOperationUtils'
import { SupaRow } from '@/components/grid/types'
import { convertByteaToHex } from '@/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils'
import { DocsButton } from '@/components/ui/DocsButton'
@@ -33,7 +34,7 @@ export function useOnRowsChange(rows: SupaRow[]) {
const identifiers = {} as Dictionary<any>
- isTableLike(snap.originalTable) &&
+ if (isTableLike(snap.originalTable)) {
snap.originalTable.primary_keys.forEach((column) => {
const col = snap.originalTable.columns.find((c) => c.name === column.name)
identifiers[column.name] =
@@ -41,8 +42,10 @@ export function useOnRowsChange(rows: SupaRow[]) {
? convertByteaToHex(previousRow[column.name])
: previousRow[column.name]
})
+ }
+ const stableIdentifiers = getStableRowIdentifiers(previousRow, identifiers)
- if (Object.keys(identifiers).length === 0) {
+ if (Object.keys(stableIdentifiers).length === 0) {
return toast('Unable to update row as table has no primary keys', {
description: (
<div>
@@ -62,7 +65,7 @@ export function useOnRowsChange(rows: SupaRow[]) {
tableId: snap.table.id,
table: snap.originalTable,
row: previousRow,
- rowIdentifiers: identifiers,
+ rowIdentifiers: stableIdentifiers,
columnName: changedColumn,
oldValue: previousRow[changedColumn],
newValue: rowData[changedColumn],
diff --git a/apps/studio/components/grid/components/grid/GridError.tsx b/apps/studio/components/grid/components/grid/GridError.tsx
index d18894c8208..955dd170d9b 100644
--- a/apps/studio/components/grid/components/grid/GridError.tsx
+++ b/apps/studio/components/grid/components/grid/GridError.tsx
@@ -1,13 +1,14 @@
import { useQueryClient } from '@tanstack/react-query'
import { useParams } from 'common'
+import { ChevronDown } from 'lucide-react'
import { useCallback } from 'react'
-import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { isFilterRelatedError } from './GridError.utils'
import { useTableFilter } from '@/components/grid/hooks/useTableFilter'
import { useTableSort } from '@/components/grid/hooks/useTableSort'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { HighCostError } from '@/components/ui/HighQueryCost'
import { InlineLink } from '@/components/ui/InlineLink'
import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
@@ -53,6 +54,12 @@ export const GridError = ({ error }: { error?: ResponseError | null }) => {
const isForeignTableMissingVaultKeyError =
isForeignTable && error?.message?.includes('query vault failed')
+ const isIcebergUnauthorizedError =
+ isForeignTable &&
+ error?.message.includes('iceberg error') &&
+ error?.message.includes('403 Forbidden') &&
+ error?.message.includes('Invalid Compact JWS')
+
const hasActiveFilters = filters.length > 0
const hasFilterRelatedError = hasActiveFilters && isFilterRelatedError(error?.message)
@@ -79,6 +86,8 @@ export const GridError = ({ error }: { error?: ResponseError | null }) => {
return <FilterError removeAllFilters={removeAllFilters} />
} else if (isInvalidOrderingOperatorError) {
return <InvalidOrderingOperatorError error={error} />
+ } else if (isIcebergUnauthorizedError) {
+ return <IcebergUnauthorizedError error={error} />
}
return <GeneralError error={error} />
@@ -165,6 +174,30 @@ const InvalidOrderingOperatorError = ({ error }: { error: ResponseError }) => {
)
}
+const IcebergUnauthorizedError = ({ error }: { error: ResponseError }) => {
+ const { ref } = useParams()
+
+ return (
+ <Admonition
+ type="warning"
+ className="pointer-events-auto"
+ title="Failed to retrieve rows from Iceberg foreign table"
+ >
+ <p className="text-balance">
+ The API key from your project that's used to retrieve data from your foreign table is either
+ incorrect or missing. Verify the API key (token) in your{' '}
+ <InlineLink href={`/project/${ref}/storage/analytics`}>Iceberg Bucket</InlineLink>.
+ Alternatively, you can also verify the token value in your{' '}
+ <InlineLink href={`/project/${ref}/integrations/iceberg_wrapper/wrappers`}>
+ wrapper's settings
+ </InlineLink>{' '}
+ or in <InlineLink href={`/project/${ref}/integrations/vault/overview`}>Vault</InlineLink>.
+ </p>
+ <ExpandError error={error} />
+ </Admonition>
+ )
+}
+
const GeneralError = ({ error }: { error: ResponseError }) => {
const { filters } = useTableFilter()
@@ -183,3 +216,19 @@ const GeneralError = ({ error }: { error: ResponseError }) => {
</AlertError>
)
}
+
+const ExpandError = ({ error }: { error: ResponseError }) => {
+ return (
+ <Collapsible>
+ <CollapsibleTrigger className="mt-2 group font-normal p-0 [&[data-state=open]>div>svg]:-rotate-180!">
+ <div className="flex items-center gap-x-2 w-full cursor-pointer">
+ <span className="font-mono uppercase tracking-tight">View error</span>
+ <ChevronDown className="transition-transform" size={14} />
+ </div>
+ </CollapsibleTrigger>
+ <CollapsibleContent className="mt-1">
+ <code className="text-code-inline">{error.message}</code>
+ </CollapsibleContent>
+ </Collapsible>
+ )
+}
diff --git a/apps/studio/components/grid/components/header/ExportDialog.tsx b/apps/studio/components/grid/components/header/ExportDialog.tsx
index 727ffb603fa..1c91ff9fa68 100644
--- a/apps/studio/components/grid/components/header/ExportDialog.tsx
+++ b/apps/studio/components/grid/components/header/ExportDialog.tsx
@@ -15,7 +15,7 @@ import {
TabsList_Shadcn_,
TabsTrigger_Shadcn_,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { Filter, Sort, SupaTable } from '@/components/grid/types'
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index e264ec62670..88e4e0ff15b 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -21,6 +21,7 @@ import { formatRowsForCSV, hydrateTruncatedRows } from './Header.utils'
import { SortPopover } from './sort/SortPopover'
import { useTableRowOperations } from '@/components/grid/hooks/useTableRowOperations'
import { useTableSort } from '@/components/grid/hooks/useTableSort'
+import type { SupaRow } from '@/components/grid/types'
import { GridHeaderActions } from '@/components/interfaces/TableGridEditor/GridHeaderActions'
import { isValueTruncated } from '@/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.utils'
import { formatTableRowsToSQL } from '@/components/interfaces/TableGridEditor/TableEntity.utils'
@@ -46,10 +47,16 @@ import { useTableEditorTableStateSnapshot } from '@/state/table-editor-table'
export type HeaderProps = {
customHeader: ReactNode
isRefetching: boolean
+ rows?: SupaRow[]
tableQueriesEnabled?: boolean
}
-export const Header = ({ customHeader, isRefetching, tableQueriesEnabled = true }: HeaderProps) => {
+export const Header = ({
+ customHeader,
+ isRefetching,
+ rows,
+ tableQueriesEnabled = true,
+}: HeaderProps) => {
useInitializeFiltersFromUrl()
useSyncFiltersToUrl()
@@ -80,7 +87,7 @@ export const Header = ({ customHeader, isRefetching, tableQueriesEnabled = true
<div className="flex-1 px-1.5">{customHeader}</div>
) : snap.selectedRows.size > 0 ? (
<div className="flex-1 px-1.5">
- <RowHeader tableQueriesEnabled={tableQueriesEnabled} />
+ <RowHeader rows={rows} tableQueriesEnabled={tableQueriesEnabled} />
</div>
) : (
<div
@@ -128,10 +135,11 @@ export const Header = ({ customHeader, isRefetching, tableQueriesEnabled = true
}
type RowHeaderProps = {
+ rows?: SupaRow[]
tableQueriesEnabled?: boolean
}
-const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
+const RowHeader = ({ rows: visibleRows, tableQueriesEnabled = true }: RowHeaderProps) => {
const { id: _id } = useParams()
const tableId = _id ? Number(_id) : undefined
@@ -194,7 +202,7 @@ const RowHeader = ({ tableQueriesEnabled = true }: RowHeaderProps) => {
const onRowsDelete = () => {
const rowIdxs = Array.from(snap.selectedRows) as number[]
- const rows = allRows.filter((x) => rowIdxs.includes(x.idx))
+ const rows = (visibleRows ?? allRows).filter((x) => rowIdxs.includes(x.idx))
deleteRows({
rows,
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
index c96808d761f..07a5a4aff64 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx
@@ -12,7 +12,7 @@ import {
isGroup,
SerializableFilterProperty,
updateGroupAtPath,
-} from 'ui-patterns'
+} from 'ui-patterns/FilterBar'
import { columnToFilterProperty } from './FilterPopoverNew.utils'
import { useTableFilter } from '@/components/grid/hooks/useTableFilter'
diff --git a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.utils.ts b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.utils.ts
index 78a28c587e3..2dfff4c7d0b 100644
--- a/apps/studio/components/grid/components/header/filter/FilterPopoverNew.utils.ts
+++ b/apps/studio/components/grid/components/header/filter/FilterPopoverNew.utils.ts
@@ -1,5 +1,5 @@
import { format } from 'date-fns'
-import type { FilterProperty, OperatorDefinition } from 'ui-patterns'
+import type { FilterProperty, OperatorDefinition } from 'ui-patterns/FilterBar'
import type { Filter, SupaColumn } from '@/components/grid/types'
import {
diff --git a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
index 0be00fd5cd4..350898ed730 100644
--- a/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
+++ b/apps/studio/components/grid/components/header/sort/SortPopoverPrimitive.tsx
@@ -290,7 +290,7 @@ export const SortPopoverPrimitive = ({
asChild
variant="dashed"
iconRight={<ChevronDown size="14" className="text-foreground-light" />}
- className="sb-grid-dropdown__item-trigger"
+ className="my-1"
data-testid="table-editor-pick-column-to-sort-button"
>
<span>Pick {localSorts.length > 1 ? 'another' : 'a'} column to sort by</span>
diff --git a/apps/studio/components/grid/utils/queueConflictResolution.test.ts b/apps/studio/components/grid/utils/queueConflictResolution.test.ts
index c8ffab9ac08..00b3bfa6438 100644
--- a/apps/studio/components/grid/utils/queueConflictResolution.test.ts
+++ b/apps/studio/components/grid/utils/queueConflictResolution.test.ts
@@ -539,6 +539,39 @@ describe('upsertOperation', () => {
expect(result.operations[0]).toEqual(otherOp)
})
+ test('should remove primary key edit when reverted using original row identifiers', () => {
+ const existingOp: QueuedOperation = {
+ id: 'edit_cell_content:1:id:id:1',
+ type: QueuedOperationType.EDIT_CELL_CONTENT,
+ tableId: 1,
+ timestamp: Date.now() - 1000,
+ payload: {
+ rowIdentifiers: { id: 1 },
+ columnName: 'id',
+ oldValue: 1,
+ newValue: 3,
+ table: mockTable,
+ },
+ }
+
+ const operations = [existingOp]
+ const newOperation: NewEditCellContentOperation = {
+ type: QueuedOperationType.EDIT_CELL_CONTENT,
+ tableId: 1,
+ payload: {
+ rowIdentifiers: { id: 1 },
+ columnName: 'id',
+ oldValue: 3,
+ newValue: 1,
+ table: mockTable,
+ },
+ }
+
+ const result = upsertOperation(operations, newOperation)
+
+ expect(result.operations).toHaveLength(0)
+ })
+
test('should remove operation when number oldValue matches string newValue', () => {
const existingOp: QueuedOperation = {
id: 'edit_cell_content:1:age:id:1',
diff --git a/apps/studio/components/grid/utils/queueOperationUtils.test.ts b/apps/studio/components/grid/utils/queueOperationUtils.test.ts
index c250b566f86..325bd18a413 100644
--- a/apps/studio/components/grid/utils/queueOperationUtils.test.ts
+++ b/apps/studio/components/grid/utils/queueOperationUtils.test.ts
@@ -1,11 +1,14 @@
-import { describe, expect, test } from 'vitest'
+import { describe, expect, test, vi } from 'vitest'
import type { SupaRow } from '../types'
import {
formatGridDataWithOperationValues,
generateTableChangeKey,
+ getStableRowIdentifiers,
+ queueRowDeletesWithOptimisticUpdate,
rowMatchesIdentifiers,
} from './queueOperationUtils'
+import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
import {
QueuedOperationType,
type NewAddRowOperation,
@@ -152,6 +155,20 @@ describe('rowMatchesIdentifiers', () => {
})
})
+describe('stable queued row identifiers', () => {
+ test('should use original row identifiers when present', () => {
+ const row = { idx: 0, id: 3, __originalRowIdentifiers: { id: 1 } }
+
+ expect(getStableRowIdentifiers(row, { id: 3 })).toEqual({ id: 1 })
+ })
+
+ test('should fall back to current identifiers when original row identifiers are not present', () => {
+ const row = { idx: 0, id: 3 }
+
+ expect(getStableRowIdentifiers(row, { id: 3 })).toEqual({ id: 3 })
+ })
+})
+
describe('formatGridDataWithOperationValues', () => {
const makeRow = (idx: number, data: Record<string, unknown> = {}): SupaRow => ({
idx,
@@ -217,7 +234,7 @@ describe('formatGridDataWithOperationValues', () => {
})
const result = formatGridDataWithOperationValues({ operations: [op], rows })
- expect(result[0]).toEqual({ idx: 0, id: 1, name: 'Updated' })
+ expect(result[0]).toMatchObject({ idx: 0, id: 1, name: 'Updated' })
expect(result[1]).toEqual(rows[1])
})
@@ -448,4 +465,106 @@ describe('formatGridDataWithOperationValues', () => {
const result = formatGridDataWithOperationValues({ operations: [op], rows })
expect(result[0].name).toBe('Updated')
})
+
+ test('should preserve row identity after a primary key edit', () => {
+ const rows = [makeRow(0, { id: 1, name: 'Alice' })]
+ const idEdit = makeEditOp({
+ id: 'edit_cell_content:1:id:id:1',
+ payload: {
+ rowIdentifiers: { id: 1 },
+ columnName: 'id',
+ oldValue: 1,
+ newValue: 3,
+ table: {} as any,
+ },
+ })
+ const nameEdit = makeEditOp({
+ id: 'edit_cell_content:1:name:id:1',
+ payload: {
+ rowIdentifiers: { id: 1 },
+ columnName: 'name',
+ oldValue: 'Alice',
+ newValue: 'Updated Alice',
+ table: {} as any,
+ },
+ })
+
+ const result = formatGridDataWithOperationValues({ operations: [idEdit, nameEdit], rows })
+
+ expect(result[0]).toMatchObject({ idx: 0, id: 3, name: 'Updated Alice' })
+ expect(getStableRowIdentifiers(result[0], { id: result[0].id })).toEqual({ id: 1 })
+ })
+
+ test('should keep two rows distinct when one row takes another row primary key value', () => {
+ const rows = [makeRow(0, { id: 1, name: 'Alice' }), makeRow(1, { id: 2, name: 'Bob' })]
+ const aliceIdEdit = makeEditOp({
+ id: 'edit_cell_content:1:id:id:1',
+ payload: {
+ rowIdentifiers: { id: 1 },
+ columnName: 'id',
+ oldValue: 1,
+ newValue: 3,
+ table: {} as any,
+ },
+ })
+ const bobIdEdit = makeEditOp({
+ id: 'edit_cell_content:1:id:id:2',
+ payload: {
+ rowIdentifiers: { id: 2 },
+ columnName: 'id',
+ oldValue: 2,
+ newValue: 1,
+ table: {} as any,
+ },
+ })
+ const bobNameEdit = makeEditOp({
+ id: 'edit_cell_content:1:name:id:2',
+ payload: {
+ rowIdentifiers: { id: 2 },
+ columnName: 'name',
+ oldValue: 'Bob',
+ newValue: 'Updated Bob',
+ table: {} as any,
+ },
+ })
+
+ const result = formatGridDataWithOperationValues({
+ operations: [aliceIdEdit, bobIdEdit, bobNameEdit],
+ rows,
+ })
+
+ expect(result[0]).toMatchObject({ idx: 0, id: 3, name: 'Alice' })
+ expect(getStableRowIdentifiers(result[0], { id: result[0].id })).toEqual({ id: 1 })
+ expect(result[1]).toMatchObject({ idx: 1, id: 1, name: 'Updated Bob' })
+ expect(getStableRowIdentifiers(result[1], { id: result[1].id })).toEqual({ id: 2 })
+ })
+})
+
+describe('queueRowDeletesWithOptimisticUpdate', () => {
+ test('should queue pending add row deletes with the temp row as original row', () => {
+ const queueOperation = vi.fn()
+ const row = { idx: -100, __tempId: '-100', name: 'New Row' } as SupaRow
+
+ queueRowDeletesWithOptimisticUpdate({
+ rows: [row],
+ table: {
+ id: 1,
+ schema: 'public',
+ name: 'users',
+ entity_type: ENTITY_TYPE.TABLE,
+ primary_keys: [{ name: 'id' }],
+ } as Parameters<typeof queueRowDeletesWithOptimisticUpdate>[0]['table'],
+ queueOperation,
+ projectRef: 'project-ref',
+ })
+
+ expect(queueOperation).toHaveBeenCalledWith({
+ type: QueuedOperationType.DELETE_ROW,
+ tableId: 1,
+ payload: expect.objectContaining({
+ rowIdentifiers: { id: undefined, __tempId: '-100' },
+ originalRow: row,
+ }),
+ })
+ })
})
diff --git a/apps/studio/components/grid/utils/queueOperationUtils.ts b/apps/studio/components/grid/utils/queueOperationUtils.ts
index 3684886601c..9c19b4328b4 100644
--- a/apps/studio/components/grid/utils/queueOperationUtils.ts
+++ b/apps/studio/components/grid/utils/queueOperationUtils.ts
@@ -1,5 +1,6 @@
import { isPendingAddRow, PendingAddRow, SupaRow } from '../types'
import { isTableLike, type Entity } from '@/data/table-editor/table-editor-types'
+import { isObject } from '@/lib/helpers'
import {
EditCellContentOperation,
NewQueuedOperation,
@@ -8,6 +9,24 @@ import {
} from '@/state/table-editor-operation-queue.types'
import type { Dictionary } from '@/types'
+// Client-only marker that preserves the original SQL WHERE identifiers after PK edits.
+const ORIGINAL_ROW_IDENTIFIERS_KEY = '__originalRowIdentifiers'
+
+export function getStableRowIdentifiers(
+ row: Dictionary<unknown>,
+ fallbackIdentifiers: Dictionary<unknown>
+): Dictionary<unknown> {
+ const identifiers = row[ORIGINAL_ROW_IDENTIFIERS_KEY]
+ return { ...(isObject(identifiers) ? identifiers : fallbackIdentifiers) }
+}
+
+function withOriginalRowIdentifiers<T extends SupaRow>(
+ row: T,
+ rowIdentifiers: Dictionary<unknown>
+): T {
+ return { ...row, [ORIGINAL_ROW_IDENTIFIERS_KEY]: { ...rowIdentifiers } }
+}
+
interface EditCellKeyOperation extends Omit<
EditCellContentOperation,
'payload' | 'id' | 'timestamp'
@@ -59,6 +78,14 @@ export function rowMatchesIdentifiers(
return identifierEntries.every(([key, value]) => row[key] === value)
}
+function rowMatchesOperationIdentifiers(
+ row: Dictionary<unknown>,
+ rowIdentifiers: Dictionary<unknown>
+): boolean {
+ const identifiers = row[ORIGINAL_ROW_IDENTIFIERS_KEY]
+ return rowMatchesIdentifiers(isObject(identifiers) ? identifiers : row, rowIdentifiers)
+}
+
export function removeRow(rows: SupaRow[], rowIdentifiers: Dictionary<unknown>): SupaRow[] {
return rows.filter((row) => !rowMatchesIdentifiers(row, rowIdentifiers))
}
@@ -86,8 +113,8 @@ export function queueCellEditWithOptimisticUpdate({
newValue,
enumArrayColumns,
}: QueueCellEditParams) {
- // Updated row identifiers to include __tempId for pending add rows so edits merge into ADD_ROW operation
- const rowIdentifiers: Dictionary<unknown> = { ...callerRowIdentifiers }
+ // Pending add rows use __tempId so edits merge into the ADD_ROW operation.
+ const rowIdentifiers = getStableRowIdentifiers(row, callerRowIdentifiers)
if (isPendingAddRow(row)) {
rowIdentifiers.__tempId = row.__tempId
}
@@ -151,9 +178,14 @@ export const formatGridDataWithOperationValues = ({
operations.forEach((op) => {
if (op.type === QueuedOperationType.EDIT_CELL_CONTENT) {
const { rowIdentifiers, columnName, newValue } = op.payload
- const rowIdx = formattedRows.findIndex((row) => rowMatchesIdentifiers(row, rowIdentifiers))
+ const rowIdx = formattedRows.findIndex((row) =>
+ rowMatchesOperationIdentifiers(row, rowIdentifiers)
+ )
if (rowIdx !== -1) {
- formattedRows[rowIdx] = { ...formattedRows[rowIdx], [columnName]: newValue }
+ formattedRows[rowIdx] = withOriginalRowIdentifiers(
+ { ...formattedRows[rowIdx], [columnName]: newValue },
+ rowIdentifiers
+ )
}
} else if (op.type === QueuedOperationType.ADD_ROW) {
const { tempId, rowData } = op.payload
@@ -176,9 +208,14 @@ export const formatGridDataWithOperationValues = ({
}
} else if (op.type === QueuedOperationType.DELETE_ROW) {
const { rowIdentifiers } = op.payload
- const rowIdx = formattedRows.findIndex((row) => rowMatchesIdentifiers(row, rowIdentifiers))
+ const rowIdx = formattedRows.findIndex((row) =>
+ rowMatchesOperationIdentifiers(row, rowIdentifiers)
+ )
if (rowIdx !== -1) {
- formattedRows[rowIdx] = { ...formattedRows[rowIdx], __isDeleted: true }
+ formattedRows[rowIdx] = withOriginalRowIdentifiers(
+ { ...formattedRows[rowIdx], __isDeleted: true },
+ rowIdentifiers
+ )
}
}
})
@@ -225,12 +262,16 @@ export function queueRowDeletesWithOptimisticUpdate({
table.primary_keys.forEach((pk) => {
rowIdentifiers[pk.name] = row[pk.name]
})
+ const stableRowIdentifiers = getStableRowIdentifiers(row, rowIdentifiers)
+ if (isPendingAddRow(row)) {
+ stableRowIdentifiers.__tempId = row.__tempId
+ }
queueOperation({
type: QueuedOperationType.DELETE_ROW,
tableId: table.id,
payload: {
- rowIdentifiers,
+ rowIdentifiers: stableRowIdentifiers,
originalRow: row,
table,
},
diff --git a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
index b667236ecf7..10c8f7576f2 100644
--- a/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
+++ b/apps/studio/components/interfaces/APIKeys/APIKeyRow.tsx
@@ -9,7 +9,8 @@ import {
TableCell,
TableRow,
} from 'ui'
-import { ShimmeringLoader, TimestampInfo } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { APIKeyDeleteDialog } from './APIKeyDeleteDialog'
import { ApiKeyPill } from './ApiKeyPill'
diff --git a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
index e3d29980549..fdb6dcb24f8 100644
--- a/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
+++ b/apps/studio/components/interfaces/APIKeys/PublishableAPIKeys.tsx
@@ -13,7 +13,8 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { APIKeyRow } from './APIKeyRow'
import { CreatePublishableAPIKeyDialog } from './CreatePublishableAPIKeyDialog'
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
index d5ea3576b33..e18648d1cc6 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenList.tsx
@@ -21,7 +21,7 @@ import { filterAndSortTokens, handleSortChange } from './AccessToken.utils'
import { RowLoading } from './AccessTokenTable/RowLoading'
import { TableContainer } from './AccessTokenTable/TableContainer'
import { ExpiresCell, LastUsedCell, TokenNameCell } from './AccessTokenTable/TokenCells'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useAccessTokenDeleteMutation } from '@/data/access-tokens/access-tokens-delete-mutation'
import { AccessToken, useAccessTokensQuery } from '@/data/access-tokens/access-tokens-query'
import { useTrack } from '@/lib/telemetry/track'
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
index c50888afe70..2046c267ba3 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/AccessTokenNewBanner/AccessTokenNewBanner.tsx
@@ -1,7 +1,7 @@
import { X } from 'lucide-react'
import { toast } from 'sonner'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { useGroupedPermissions } from '../hooks/useGroupedPermissions'
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
index 47972387791..fb289f932ed 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Classic/NewTokenDialog.tsx
@@ -24,7 +24,7 @@ import {
SelectValue,
WarningIcon,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
index d2b90f9c91d..21cd176dbcd 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/NewScopedTokenSheet.tsx
@@ -17,7 +17,7 @@ import {
SheetHeader,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import {
CUSTOM_EXPIRY_VALUE,
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
index 44c8570e811..a902a92966a 100644
--- a/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
+++ b/apps/studio/components/interfaces/Account/AccessTokens/Scoped/ScopedTokenList.tsx
@@ -22,7 +22,7 @@ import { RowLoading } from '../AccessTokenTable/RowLoading'
import { TableContainer } from '../AccessTokenTable/TableContainer'
import { ExpiresCell, LastUsedCell, TokenNameCell } from '../AccessTokenTable/TokenCells'
import { ViewTokenSheet } from './ViewTokenSheet'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import {
ScopedAccessToken,
useScopedAccessTokensQuery,
diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx
index 017640064cb..0471351a4df 100644
--- a/apps/studio/components/interfaces/Account/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx
@@ -12,7 +12,7 @@ import { filterByProjects, sortAuditLogs } from './AuditLogs.utils'
import { LogDetailsPanel } from '@/components/interfaces/AuditLogs/LogDetailsPanel'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
import Table from '@/components/to-be-cleaned/Table'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { FilterPopover } from '@/components/ui/FilterPopover'
import {
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
index 2307ecc7206..2456d57068d 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.tsx
@@ -29,6 +29,7 @@ import {
} from 'ui-patterns/PageSection'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { parseRedirectMessage } from './AccountIdentities.utils'
import {
ChangeEmailAddressForm,
GitHubChangeEmailAddress,
@@ -68,7 +69,7 @@ export const AccountIdentities = () => {
const [selectedProviderUpdateEmail, setSelectedProviderUpdateEmail] = useState<string>()
const [linkingProviderId, setLinkingProviderId] = useState<string>()
- const [, message] = router.asPath.split('#message=')
+ const message = parseRedirectMessage(router.asPath)
const unlinkedExternalProviders = connectableExternalProviders.filter((provider) => {
return !identities.some(
(identity) => identity.provider === provider.authProvider || identity.provider === provider.id
@@ -119,7 +120,7 @@ export const AccountIdentities = () => {
}
useEffect(() => {
- if (message) toast.success(message.replaceAll('+', ' '))
+ if (message) toast.success(message)
}, [message])
return (
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.test.ts b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.test.ts
new file mode 100644
index 00000000000..fffe0612f40
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { parseRedirectMessage } from './AccountIdentities.utils'
+
+describe('parseRedirectMessage', () => {
+ it('drops the trailing sb marker and decodes + as spaces', () => {
+ expect(
+ parseRedirectMessage(
+ '/account/me#message=Confirmation+link+accepted.+Please+proceed+to+confirm+link+sent+to+the+other+email&sb='
+ )
+ ).toBe('Confirmation link accepted. Please proceed to confirm link sent to the other email')
+ })
+
+ it('returns undefined when there is no hash', () => {
+ expect(parseRedirectMessage('/account/me')).toBeUndefined()
+ })
+
+ it('returns undefined when the fragment has no message key', () => {
+ expect(parseRedirectMessage('/account/me#sb=')).toBeUndefined()
+ })
+
+ it('finds message even when it is not the first fragment param', () => {
+ expect(parseRedirectMessage('/account/me#sb=&message=Hi+there')).toBe('Hi there')
+ })
+
+ it('preserves a literal + via percent-encoding', () => {
+ expect(parseRedirectMessage('/account/me#message=a%2Bb&sb=')).toBe('a+b')
+ })
+})
diff --git a/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.ts b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.ts
new file mode 100644
index 00000000000..842c102db1c
--- /dev/null
+++ b/apps/studio/components/interfaces/Account/Preferences/AccountIdentities.utils.ts
@@ -0,0 +1,2 @@
+export const parseRedirectMessage = (asPath: string) =>
+ new URLSearchParams(asPath.split('#')[1] ?? '').get('message') ?? undefined
diff --git a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
index 455dc84916e..6037e19d3b0 100644
--- a/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
+++ b/apps/studio/components/interfaces/Account/Preferences/ThemeSettings.tsx
@@ -15,7 +15,6 @@ import {
SelectValue,
Separator,
singleThemes,
- Theme,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
@@ -58,7 +57,7 @@ export const ThemeSettings = () => {
value={theme}
className="grid grid-cols-2 gap-4"
>
- {singleThemes.map((theme: Theme) => (
+ {singleThemes.map((theme) => (
<RadioGroupLargeItem
className="p-3 w-full"
key={theme.value}
diff --git a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
index 0eab7e9b764..ea9a8a4df60 100644
--- a/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
+++ b/apps/studio/components/interfaces/Account/TOTPFactors/index.tsx
@@ -1,12 +1,11 @@
import dayjs from 'dayjs'
-import { AlertCircle } from 'lucide-react'
import { useState } from 'react'
-import { Alert, AlertDescription, AlertTitle, Button } from 'ui'
+import { Button } from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { AddNewFactorModal } from './AddNewFactorModal'
import DeleteFactorModal from './DeleteFactorModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useMfaListFactorsQuery } from '@/data/profile/mfa-list-factors-query'
import { DATETIME_FORMAT } from '@/lib/constants'
@@ -28,17 +27,6 @@ export const TOTPFactors = () => {
)}
{isSuccess && (
<>
- {data.totp.length === 1 && (
- <Alert variant="default" className="mb-2">
- <AlertCircle className="h-4 w-4" />
- <AlertTitle>
- We recommend configuring two authenticator apps across different devices
- </AlertTitle>
- <AlertDescription className="flex flex-col gap-3">
- The two authenticator apps will serve as a backup for each other.
- </AlertDescription>
- </Alert>
- )}
<div>
{data.totp.map((factor) => {
return (
diff --git a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
index 5eeb1be51c7..06341d945d4 100644
--- a/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
+++ b/apps/studio/components/interfaces/Advisors/AdvisorRuleItem.tsx
@@ -12,15 +12,15 @@ import {
CollapsibleContent,
CollapsibleTrigger,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { LintInfo } from '../Linter/Linter.constants'
import { generateRuleText } from './AdvisorRules.utils'
import { CreateRuleSheet } from './CreateRuleSheet'
import { DisableRuleModal } from './DisableRuleModal'
import { EnableRuleModal } from './EnableRuleModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
import { useLintRuleDeleteMutation } from '@/data/lint/delete-lint-rule-mutation'
diff --git a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
index 174aa7dc054..ceef2a9f472 100644
--- a/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Advisors/CreateRuleSheet.tsx
@@ -27,7 +27,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Approved.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Approved.tsx
index 6a3f0da6607..7b396f3884d 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Approved.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Approved.tsx
@@ -1,6 +1,6 @@
import dayjs from 'dayjs'
import type { ReactNode } from 'react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import {
AuthorizeRequesterDetails,
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
index 76c592f511b..26a0b03bd98 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Error.tsx
@@ -1,7 +1,7 @@
import Link from 'next/link'
import type { ReactNode } from 'react'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { InterstitialLayout, SupabaseLogo } from '@/components/layouts/InterstitialLayout'
import type { ResourceError } from '@/data/api-authorization/api-authorization-query'
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
index 932f837d994..047cc72cf01 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Form.tsx
@@ -14,7 +14,8 @@ import {
SelectTrigger,
SelectValue,
} from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import type { ApprovalState, IApprovalFormSchema } from './ApiAuthorization.Schema'
import {
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
index aaf83f38c76..df6e42f282e 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Invalid.tsx
@@ -1,7 +1,7 @@
import Link from 'next/link'
import type { ReactNode } from 'react'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { InterstitialLayout, SupabaseLogo } from '@/components/layouts/InterstitialLayout'
diff --git a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Loading.tsx b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Loading.tsx
index a28e51b7e20..26b03f24797 100644
--- a/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Loading.tsx
+++ b/apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Loading.tsx
@@ -1,6 +1,6 @@
import type { ReactNode } from 'react'
import { Card, CardContent } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { InterstitialLayout, SupabaseLogo } from '@/components/layouts/InterstitialLayout'
diff --git a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
index 6e410076842..4177044763e 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/ContextSearchResults.shared.tsx
@@ -1,9 +1,9 @@
import { cn, CommandList } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
import { TextHighlighter } from 'ui-patterns/CommandMenu'
import { CommandMenuGroup } from 'ui-patterns/CommandMenu/internal/CommandMenuGroup'
import { CommandMenuItem } from 'ui-patterns/CommandMenu/internal/CommandMenuItem'
import type { IActionCommand, IRouteCommand } from 'ui-patterns/CommandMenu/internal/types'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
export interface SearchResult {
id: string
diff --git a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
index 29e4c0b8898..87fc8c7d932 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/CreateCommands.tsx
@@ -130,7 +130,7 @@ export function useCreateCommands(options?: CommandOptions) {
{
id: 'create-rls-policy',
name: 'Create RLS Policy',
- route: `/project/${ref}/auth/policies?new=true`,
+ route: `/project/${ref}/database/policies?new=true`,
icon: () => <ShieldPlus />,
},
...(IS_PLATFORM
diff --git a/apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx b/apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx
index 381f2ef20f0..83858b32941 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/OrgProjectSwitcher.tsx
@@ -79,7 +79,7 @@ export function useConfigureOrganizationCommand() {
},
],
},
- { deps: [organizations], enabled: !!organizations && organizations.length > 0 }
+ { deps: [organizations], enabled: IS_PLATFORM && !!organizations && organizations.length > 0 }
)
useRegisterCommands(
@@ -93,6 +93,6 @@ export function useConfigureOrganizationCommand() {
icon: () => <Building />,
},
],
- { enabled: !!organizations && organizations.length > 0 }
+ { enabled: IS_PLATFORM && !!organizations && organizations.length > 0 }
)
}
diff --git a/apps/studio/components/interfaces/App/CommandMenu/PolicySearchResults.tsx b/apps/studio/components/interfaces/App/CommandMenu/PolicySearchResults.tsx
index e711dce37d8..89e13a7ef64 100644
--- a/apps/studio/components/interfaces/App/CommandMenu/PolicySearchResults.tsx
+++ b/apps/studio/components/interfaces/App/CommandMenu/PolicySearchResults.tsx
@@ -141,14 +141,14 @@ export function PolicySearchResults({ query }: PolicySearchResultsProps) {
getRoute={(result) => {
const policy = policies?.find((p) => String(p.id) === result.id)
if (!policy || !projectRef)
- return `/project/${projectRef}/auth/policies` as `/${string}`
+ return `/project/${projectRef}/database/policies` as `/${string}`
const params = new URLSearchParams()
params.set('edit', String(policy.id))
if (policy.schema) {
params.set('schema', policy.schema)
}
- return `/project/${projectRef}/auth/policies?${params.toString()}` as `/${string}`
+ return `/project/${projectRef}/database/policies?${params.toString()}` as `/${string}`
}}
className="pb-9"
/>
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
index fad16eb4c9c..ebae4de5b4c 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewContext.tsx
@@ -13,15 +13,18 @@ import {
} from 'react'
import { useFeaturePreviews } from './useFeaturePreviews'
+import { IS_PLATFORM } from '@/lib/constants'
import { EMPTY_OBJ } from '@/lib/void'
type FeaturePreviewContextType = {
flags: { [key: string]: boolean }
+ isInitialized: boolean
onUpdateFlag: (key: string, value: boolean) => void
}
const FeaturePreviewContext = createContext<FeaturePreviewContextType>({
flags: EMPTY_OBJ,
+ isInitialized: false,
onUpdateFlag: noop,
})
@@ -34,10 +37,18 @@ export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren) =
const [flags, setFlags] = useState(() =>
featurePreviews.reduce((a, b) => ({ ...a, [b.key]: false }), {})
)
+ // Tracks whether `flags` reflects the loaded feature flags (vs. the pre-load
+ // defaults). Only set true once `initializeFlags` runs with `hasLoaded`.
+ const [isInitialized, setIsInitialized] = useState(false)
const initializeFlags = useEffectEvent(() => {
setFlags(
featurePreviews.reduce((a, b) => {
+ // Platform-only previews can never be enabled outside the hosted platform
+ if (!IS_PLATFORM && b.isPlatformOnly) {
+ return { ...a, [b.key]: false }
+ }
+
const defaultOptIn = b.isDefaultOptIn
const localStorageValue = safeLocalStorage.getItem(b.key)
return {
@@ -51,12 +62,16 @@ export const FeaturePreviewContextProvider = ({ children }: PropsWithChildren) =
useEffect(() => {
if (typeof window !== 'undefined') {
initializeFlags()
+ // Defer marking initialized until the underlying flags have loaded, so
+ // flag-derived defaults (e.g. default opt-in) are reflected in `flags`.
+ if (hasLoaded) setIsInitialized(true)
}
// eslint-disable-next-line react-hooks/exhaustive-deps -- useEffectEvent fn intentionally not a dep (eslint-plugin-react-hooks v5 doesn't recognize stable useEffectEvent yet)
}, [hasLoaded])
const value = {
flags,
+ isInitialized,
onUpdateFlag: (key: string, value: boolean) => {
safeLocalStorage.setItem(key, value ? 'true' : 'false')
const updatedFlags = { ...flags, [key]: value }
@@ -75,23 +90,24 @@ export const useIsColumnLevelPrivilegesEnabled = () => {
}
export const useUnifiedLogsPreview = () => {
- const { flags, onUpdateFlag } = useFeaturePreviewContext()
- const { hasLoaded: flagsHaveLoaded } = useContext(FeatureFlagContext)
- const unifiedLogsEnabled = useFlag('unifiedLogs')
+ const unifiedLogsDefaultOptIn = useFlag('unifiedLogsDefaultOptIn')
+ const { flags, isInitialized, onUpdateFlag } = useFeaturePreviewContext()
- const isLoading = !flagsHaveLoaded
- const isEnabled = unifiedLogsEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
+ const isLoading = !isInitialized
+ const isEnabled = flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS]
+
+ const hasToggledPreview = !!safeLocalStorage.getItem(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS)
+ const isDefaultOptIn = isInitialized && unifiedLogsDefaultOptIn && !hasToggledPreview
const enable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, true)
const disable = () => onUpdateFlag(LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS, false)
- return { isEnabled, isEligible: unifiedLogsEnabled, isLoading, enable, disable }
+ return { isEnabled, isLoading, isDefaultOptIn, enable, disable }
}
export const useIsPgDeltaDiffEnabled = () => {
const { flags } = useFeaturePreviewContext()
- const pgDeltaDiffEnabled = useFlag('pgdeltaDiff')
- return pgDeltaDiffEnabled && flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_PG_DELTA_DIFF]
+ return flags[LOCAL_STORAGE_KEYS.UI_PREVIEW_PG_DELTA_DIFF]
}
export const useIsAdvisorRulesEnabled = () => {
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/RLSTesterPreview.tsx b/apps/studio/components/interfaces/App/FeaturePreview/RLSTesterPreview.tsx
index 4f8a00c3def..01ea7cffdc5 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/RLSTesterPreview.tsx
+++ b/apps/studio/components/interfaces/App/FeaturePreview/RLSTesterPreview.tsx
@@ -27,8 +27,8 @@ export const RLSTesterPreview = () => {
<ul className="list-disc pl-6 text-sm text-foreground-light space-y-1">
<li>
Show the "Test" button on the{' '}
- <InlineLink href={`/project/${ref}/auth/policies`}>
- Authentication Policies page
+ <InlineLink href={`/project/${ref}/database/policies`}>
+ Database Policies page
</InlineLink>
</li>
</ul>
diff --git a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
index e70e3dd8f1b..1cdb5b0c3b0 100644
--- a/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
+++ b/apps/studio/components/interfaces/App/FeaturePreview/useFeaturePreviews.ts
@@ -20,12 +20,12 @@ export type FeaturePreview = {
}
export const useFeaturePreviews = (): FeaturePreview[] => {
- const isUnifiedLogsPreviewAvailable = useFlag('unifiedLogs')
- const pgDeltaDiffEnabled = useFlag('pgdeltaDiff')
const platformWebhooksEnabled = useFlag('platformWebhooks')
const jitDbAccessEnabled = useFlag('jitDbAccess')
const isMarketplaceEnabled = useFlag('marketplaceIntegrations')
+ const unifiedLogsDefaultOptIn = useFlag('unifiedLogsDefaultOptIn')
+
return useMemo(
() =>
[
@@ -37,16 +37,16 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
isNew: true,
isPlatformOnly: false,
isDefaultOptIn: false,
- getRoute: (ref?: string) => `/project/${ref}/auth/policies`,
+ getRoute: (ref?: string) => `/project/${ref}/database/policies`,
},
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_UNIFIED_LOGS,
name: 'Updated Logs interface',
discussionsUrl: 'https://github.com/orgs/supabase/discussions/37234',
- enabled: isUnifiedLogsPreviewAvailable,
+ enabled: true,
isNew: true,
isPlatformOnly: true,
- isDefaultOptIn: false,
+ isDefaultOptIn: unifiedLogsDefaultOptIn,
getRoute: (ref?: string) => `/project/${ref}/logs`,
},
{
@@ -67,7 +67,7 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
isNew: false,
isPlatformOnly: true,
isDefaultOptIn: true,
- enabled: pgDeltaDiffEnabled,
+ enabled: true,
},
{
key: LOCAL_STORAGE_KEYS.UI_PREVIEW_PLATFORM_WEBHOOKS,
@@ -110,12 +110,6 @@ export const useFeaturePreviews = (): FeaturePreview[] => {
getRoute: (ref?: string) => `/project/${ref}/integrations`,
},
].sort((a, b) => Number(b.isNew) - Number(a.isNew)),
- [
- isUnifiedLogsPreviewAvailable,
- pgDeltaDiffEnabled,
- platformWebhooksEnabled,
- jitDbAccessEnabled,
- isMarketplaceEnabled,
- ]
+ [unifiedLogsDefaultOptIn, platformWebhooksEnabled, jitDbAccessEnabled, isMarketplaceEnabled]
)
}
diff --git a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
index bb416823fcd..8c652163256 100644
--- a/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
+++ b/apps/studio/components/interfaces/App/RouteValidationWrapper.tsx
@@ -7,7 +7,7 @@ import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
import { useDashboardHistory } from '@/hooks/misc/useDashboardHistory'
import { useLastVisitedOrganization } from '@/hooks/misc/useLastVisitedOrganization'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { IS_PLATFORM } from '@/lib/constants'
@@ -68,7 +68,7 @@ export const RouteValidationWrapper = ({ children }: PropsWithChildren<{}>) => {
if (!isValidOrg) {
toast.error('You do not have access to this organization')
- router.push(`${DEFAULT_HOME}?error=org_not_found&org=${slug}`)
+ router.push(DEFAULT_HOME)
return
}
}
diff --git a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
index e7033ebe929..7715bf6ca47 100644
--- a/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuditLogsForm.tsx
@@ -5,7 +5,7 @@ import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -14,6 +14,7 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { AlertError } from '@/components/ui/AlertError'
diff --git a/apps/studio/components/interfaces/Auth/Auth.constants.ts b/apps/studio/components/interfaces/Auth/Auth.constants.ts
index 27458458bc6..d85bf61150f 100644
--- a/apps/studio/components/interfaces/Auth/Auth.constants.ts
+++ b/apps/studio/components/interfaces/Auth/Auth.constants.ts
@@ -42,5 +42,22 @@ export function urlRegex(
)
}
+export function normalizeRedirectUrl(url: string): string {
+ return url.trim().replace(/\s*,\s*$/, '')
+}
+
+export function parseRedirectUrls(allowList?: string | null): string[] {
+ if (!allowList) return []
+
+ return Array.from(
+ new Set(
+ allowList
+ .split(',')
+ .map(normalizeRedirectUrl)
+ .filter((url) => url.length > 0)
+ )
+ )
+}
+
// Use a const string to represent no chars option. Represented as empty string on the backend side.
export const NO_REQUIRED_CHARACTERS = 'NO_REQUIRED_CHARS'
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
index f8329d926bd..673a94855ad 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/ProviderForm.tsx
@@ -18,7 +18,7 @@ import {
SheetSection,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
diff --git a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
index f8ee6ecb6f7..9d801843c98 100644
--- a/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
+++ b/apps/studio/components/interfaces/Auth/AuthProvidersForm/index.tsx
@@ -14,7 +14,7 @@ import {
import { getPhoneProviderValidationSchema, PROVIDERS_SCHEMAS } from '../AuthProvidersFormValidation'
import type { Provider } from './AuthProvidersForm.types'
import { ProviderForm } from './ProviderForm'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ResourceList } from '@/components/ui/Resource/ResourceList'
import { HorizontalShimmerWithIcon } from '@/components/ui/Shimmers'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
diff --git a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
index 982d361637d..f470b23d02c 100644
--- a/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/BasicAuthSettingsForm.tsx
@@ -32,9 +32,9 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { NO_REQUIRED_CHARACTERS } from './Auth.constants'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -269,7 +269,7 @@ export const BasicAuthSettingsForm = () => {
<code className="text-code-inline">authenticated</code> roles. We
strongly advise{' '}
<Link
- href={`/project/${projectRef}/auth/policies`}
+ href={`/project/${projectRef}/database/policies`}
className="text-foreground underline"
>
reviewing your RLS policies
diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
index fdf156cf7c3..a2a71318107 100644
--- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
+++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx
@@ -38,7 +38,7 @@ import {
} from './customProviders.utils'
import { DeleteCustomProviderModal } from './DeleteCustomProviderModal'
import { DisableCustomProviderModal } from './DisableCustomProviderModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { FilterPopover } from '@/components/ui/FilterPopover'
import { Shortcut } from '@/components/ui/Shortcut'
import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx
index cccd998524b..f5fa434afa3 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation.tsx
@@ -256,7 +256,7 @@ const PASSWORD_CHANGED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_PASSWORD_CHANGED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.Data],
+ variables: [TemplateVariables.Email, TemplateVariables.Data, TemplateVariables.SiteURL],
validationSchema: z.object({
MAILER_SUBJECTS_PASSWORD_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
@@ -274,7 +274,12 @@ const EMAIL_CHANGED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_EMAIL_CHANGED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.OldEmail, TemplateVariables.Data],
+ variables: [
+ TemplateVariables.Email,
+ TemplateVariables.OldEmail,
+ TemplateVariables.Data,
+ TemplateVariables.SiteURL,
+ ],
validationSchema: z.object({
MAILER_SUBJECTS_EMAIL_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
@@ -297,6 +302,7 @@ const PHONE_CHANGED_NOTIFICATION: AuthTemplate = {
TemplateVariables.Phone,
TemplateVariables.OldPhone,
TemplateVariables.Data,
+ TemplateVariables.SiteURL,
],
validationSchema: z.object({
MAILER_SUBJECTS_PHONE_CHANGED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
@@ -315,7 +321,12 @@ const IDENTITY_LINKED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_IDENTITY_LINKED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.Provider, TemplateVariables.Data],
+ variables: [
+ TemplateVariables.Email,
+ TemplateVariables.Provider,
+ TemplateVariables.Data,
+ TemplateVariables.SiteURL,
+ ],
validationSchema: z.object({
MAILER_SUBJECTS_IDENTITY_LINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
@@ -333,7 +344,12 @@ const IDENTITY_UNLINKED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_IDENTITY_UNLINKED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.Provider, TemplateVariables.Data],
+ variables: [
+ TemplateVariables.Email,
+ TemplateVariables.Provider,
+ TemplateVariables.Data,
+ TemplateVariables.SiteURL,
+ ],
validationSchema: z.object({
MAILER_SUBJECTS_IDENTITY_UNLINKED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
@@ -351,7 +367,12 @@ const MFA_FACTOR_ENROLLED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_MFA_FACTOR_ENROLLED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.FactorType, TemplateVariables.Data],
+ variables: [
+ TemplateVariables.Email,
+ TemplateVariables.FactorType,
+ TemplateVariables.Data,
+ TemplateVariables.SiteURL,
+ ],
validationSchema: z.object({
MAILER_SUBJECTS_MFA_FACTOR_ENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
@@ -369,7 +390,12 @@ const MFA_FACTOR_UNENROLLED_NOTIFICATION: AuthTemplate = {
MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: { title: 'Subject', type: 'string' },
MAILER_TEMPLATES_MFA_FACTOR_UNENROLLED_NOTIFICATION_CONTENT: { title: 'Body', type: 'code' },
},
- variables: [TemplateVariables.Email, TemplateVariables.FactorType, TemplateVariables.Data],
+ variables: [
+ TemplateVariables.Email,
+ TemplateVariables.FactorType,
+ TemplateVariables.Data,
+ TemplateVariables.SiteURL,
+ ],
validationSchema: z.object({
MAILER_SUBJECTS_MFA_FACTOR_UNENROLLED_NOTIFICATION: z.string().min(1, 'Subject is required.'),
}),
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.test.ts b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.test.ts
index 0efbcd78e99..3df90628e9d 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.test.ts
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.test.ts
@@ -1,6 +1,9 @@
import { describe, expect, it } from 'vitest'
-import { EMAIL_TEMPLATE_DOCS_ANCHORS } from './EmailTemplates.constants'
+import {
+ AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR,
+ EMAIL_TEMPLATE_DOCS_ANCHORS,
+} from './EmailTemplates.constants'
import { AUTH_TEMPLATE_TYPES, type AuthTemplateType } from './EmailTemplates.types'
/** Docs section headings from customizing-email-templates.mdx */
@@ -32,6 +35,12 @@ function docsHeadingToAnchor(heading: string) {
.replace(/[ ]/g, '-')
}
+describe('EmailTemplates.constants: AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR', () => {
+ it('matches auth-email-templates.mdx heading slug', () => {
+ expect(AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR).toBe(docsHeadingToAnchor('Terminology'))
+ })
+})
+
describe('EmailTemplates.constants: EMAIL_TEMPLATE_DOCS_ANCHORS', () => {
it('covers every auth template type', () => {
expect(Object.keys(EMAIL_TEMPLATE_DOCS_ANCHORS).sort()).toEqual([...AUTH_TEMPLATE_TYPES].sort())
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.ts b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.ts
index ad52828a963..060b381adac 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.ts
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants.ts
@@ -8,6 +8,11 @@ import { getAuthTemplateType } from './EmailTemplates.utils'
export const AUTH_TEMPLATE_RESET_TYPES: AuthTemplateResetType[] =
AUTH_TEMPLATE_TYPES.map(getAuthTemplateType)
+/** Hosted email templates guide for dashboard users. */
+export const AUTH_EMAIL_TEMPLATES_DOCS_PATH = '/guides/auth/auth-email-templates'
+
+export const AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR = 'terminology'
+
/** Docs heading anchors for customizing-email-templates.mdx (ui Heading slugify output). */
export const EMAIL_TEMPLATE_DOCS_ANCHORS = {
CONFIRMATION: 'authemailtemplateconfirmation',
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
index e8f79f55cab..5f503ec80ad 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -26,7 +26,8 @@ import {
isCustomEmailTemplateRestrictionStatusKnown,
slugifyTitle,
} from './EmailTemplates.utils'
-import AlertError from '@/components/ui/AlertError'
+import { SendEmailHookActiveAdmonition } from './SendEmailHookActiveAdmonition'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
@@ -79,6 +80,9 @@ export const EmailTemplates = () => {
})
const usingBuiltInEmailSender = !hasCustomEmailSender(authConfig)
+ const hasSendEmailHook = !!(
+ authConfig?.HOOK_SEND_EMAIL_ENABLED && authConfig?.HOOK_SEND_EMAIL_URI
+ )
const isTemplateRestrictionStatusKnown = isCustomEmailTemplateRestrictionStatusKnown({
authConfig,
organization: selectedOrganization,
@@ -135,10 +139,24 @@ export const EmailTemplates = () => {
)}
{isSuccess && (
<>
+ {isTemplateEditBlocked && !hasSendEmailHook && (
+ <PageSection>
+ <PageSectionContent>
+ <CustomEmailTemplateRestrictionAdmonition />
+ </PageSectionContent>
+ </PageSection>
+ )}
+
+ {hasSendEmailHook && (
+ <PageSection>
+ <PageSectionContent>
+ <SendEmailHookActiveAdmonition />
+ </PageSectionContent>
+ </PageSection>
+ )}
+
<PageSection>
- {isTemplateEditBlocked ? (
- <CustomEmailTemplateRestrictionAdmonition />
- ) : usingBuiltInEmailSender ? (
+ {usingBuiltInEmailSender && !isTemplateEditBlocked && (
<Admonition
type="warning"
title="Set up custom SMTP"
@@ -160,7 +178,7 @@ export const EmailTemplates = () => {
</Button>
}
/>
- ) : null}
+ )}
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Authentication</PageSectionTitle>
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/SendEmailHookActiveAdmonition.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/SendEmailHookActiveAdmonition.tsx
new file mode 100644
index 00000000000..85aeb69b711
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/SendEmailHookActiveAdmonition.tsx
@@ -0,0 +1,38 @@
+import { useParams } from 'common'
+import Link from 'next/link'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+import { InlineLink } from '@/components/ui/InlineLink'
+import { DOCS_URL } from '@/lib/constants'
+
+/**
+ * Shown on template list and editor pages when a send-email hook is active.
+ * The hook bypasses template rendering entirely — Auth sends event metadata to
+ * the hook, not rendered HTML — so templates are irrelevant while it's enabled.
+ */
+export const SendEmailHookActiveAdmonition = () => {
+ const { ref: projectRef } = useParams()
+
+ return (
+ <Admonition
+ type="default"
+ layout="responsive"
+ title="Email templates are not used"
+ description={
+ <>
+ A Send Email hook is active. Email data is sent to your hook instead of using these
+ templates.{' '}
+ <InlineLink href={`${DOCS_URL}/guides/auth/auth-hooks/send-email-hook`}>
+ Learn more
+ </InlineLink>
+ </>
+ }
+ actions={
+ <Button asChild variant="default">
+ <Link href={`/project/${projectRef}/auth/hooks?hook=send-email`}>Manage hook</Link>
+ </Button>
+ }
+ />
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
index 8b1f397f4f2..0538087f099 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/SpamValidation.tsx
@@ -1,6 +1,6 @@
import { AnimatePresence, motion } from 'framer-motion'
import { CardContent, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Markdown } from '@/components/interfaces/Markdown'
import { ValidateSpamResponse } from '@/data/auth/validate-spam-mutation'
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx
index dac6766a961..933268de677 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.test.tsx
@@ -124,7 +124,7 @@ const renderTemplateEditor = ({
})
useAsyncCheckPermissionsMock.mockReturnValue({ can: canUpdateConfig })
useAuthConfigUpdateMutationMock.mockReturnValue({ mutate: updateAuthConfigMock })
- useAuthTemplateResetMutationMock.mockReturnValue({ mutate: resetTemplateMock })
+ useAuthTemplateResetMutationMock.mockReturnValue({ mutate: resetTemplateMock, isPending: false })
return render(<TemplateEditor template={confirmationTemplate} />)
}
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
index b24311c00da..dadfc4561de 100644
--- a/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
+++ b/apps/studio/components/interfaces/Auth/EmailTemplates/TemplateEditor.tsx
@@ -19,10 +19,14 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import z from 'zod'
+import {
+ AUTH_EMAIL_TEMPLATES_DOCS_PATH,
+ AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR,
+} from './EmailTemplates.constants'
import type { AuthTemplate } from './EmailTemplates.types'
import { hasCustomEmailSender } from './EmailTemplates.utils'
import { ResetTemplateDialog } from './ResetTemplateDialog'
@@ -366,15 +370,9 @@ export const TemplateEditor = ({ template, isReadOnly = false }: TemplateEditorP
<p className="text-sm text-foreground-lighter">
Data placeholders that can be inserted into the subject or body.{' '}
<InlineLink
- href={`${DOCS_URL}/guides/auth/auth-email-templates#terminology`}
+ href={`${DOCS_URL}${AUTH_EMAIL_TEMPLATES_DOCS_PATH}#${AUTH_EMAIL_TEMPLATES_TERMINOLOGY_ANCHOR}`}
>
- Terminology
- </InlineLink>
- {' · '}
- <InlineLink
- href={`${DOCS_URL}/guides/local-development/customizing-email-templates#template-variables`}
- >
- Local development
+ Learn more
</InlineLink>
</p>
</div>
diff --git a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
index c1dbe06022e..8b2561a7c65 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/CreateHookSheet.tsx
@@ -27,6 +27,7 @@ import {
SheetTitle,
Switch,
} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import * as z from 'zod'
@@ -38,6 +39,7 @@ import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialo
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { DocsButton } from '@/components/ui/DocsButton'
import FunctionSelector from '@/components/ui/FunctionSelector'
+import { InlineLink } from '@/components/ui/InlineLink'
import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { AuthConfigResponse } from '@/data/auth/auth-config-query'
import { useAuthHooksUpdateMutation } from '@/data/auth/auth-hooks-update-mutation'
@@ -165,7 +167,7 @@ export const CreateHookSheet = ({
})
const isDirty = form.formState.isDirty
- const values = form.watch()
+ const { postgresValues, hookType, selectedType, enabled } = form.watch()
const {
confirmOnClose,
handleOpenChange,
@@ -181,7 +183,7 @@ export const CreateHookSheet = ({
if (
hook.method.schema !== '' &&
hook.method.functionName !== '' &&
- hook.method.functionName !== values.postgresValues.functionName
+ hook.method.functionName !== postgresValues.functionName
) {
permissionChanges = getRevokePermissionStatements(
hook.method.schema,
@@ -190,9 +192,9 @@ export const CreateHookSheet = ({
}
}
- if (values.postgresValues.functionName !== '') {
- const schema = values.postgresValues.schema
- const functionName = values.postgresValues.functionName
+ if (postgresValues.functionName !== '') {
+ const schema = postgresValues.schema
+ const functionName = postgresValues.functionName
permissionChanges = [
...permissionChanges,
safeSql`-- Grant access to function to supabase_auth_admin
@@ -204,11 +206,11 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
]
}
return permissionChanges
- }, [hook, values.postgresValues.schema, values.postgresValues.functionName])
+ }, [hook, postgresValues.schema, postgresValues.functionName])
const { mutate: updateAuthHooks, isPending: isUpdatingAuthHooks } = useAuthHooksUpdateMutation({
onSuccess: () => {
- toast.success(`Successfully created ${values.hookType}.`)
+ toast.success(`Successfully ${isCreating ? 'created' : 'updated'} ${hookType}.`)
if (statements.length > 0) {
executeSql({
projectRef,
@@ -306,7 +308,7 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
<DocsButton href={`${DOCS_URL}/guides/auth/auth-hooks/${hook.docSlug}`} />
</SheetHeader>
<Separator />
- <SheetSection className="overflow-auto grow px-0">
+ <SheetSection className="overflow-auto grow p-0">
<Form {...form}>
<form
id={FORM_ID}
@@ -319,11 +321,11 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
control={form.control}
render={({ field }) => (
<FormItemLayout
- layout="flex"
- className="px-5"
- label={`Enable ${values.hookType}`}
+ layout="flex-row-reverse"
+ className="px-5 [&>div:first-child]:xl:w-1/5"
+ label={`Enable ${hookType}`}
description={
- values.hookType === 'Send SMS hook'
+ hookType === 'Send SMS hook'
? 'SMS Provider settings will be disabled in favor of SMS hooks'
: undefined
}
@@ -338,12 +340,32 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
</FormItemLayout>
)}
/>
+
+ {hook.id === 'send-email' && enabled && (
+ <div className="px-5">
+ <Admonition type="default" title="This hook replaces your email templates">
+ <p className="text-balance">
+ While enabled, email data is sent to this hook instead. Your configured{' '}
+ <InlineLink href={`/project/${projectRef}/auth/templates`}>
+ email templates
+ </InlineLink>{' '}
+ will not be used.{' '}
+ <InlineLink href={`${DOCS_URL}/guides/auth/auth-hooks/send-email-hook`}>
+ Learn more
+ </InlineLink>
+ .
+ </p>
+ </Admonition>
+ </div>
+ )}
+
<Separator />
+
<FormField
control={form.control}
name="selectedType"
render={({ field }) => (
- <FormItemLayout label="Hook type" className="px-5">
+ <FormItemLayout layout="horizontal" label="Hook type" className="px-5">
<FormControl>
<RadioGroupStacked
value={field.value}
@@ -368,89 +390,94 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
</FormItemLayout>
)}
/>
- {values.selectedType === 'postgres' ? (
+ {selectedType === 'postgres' ? (
<>
- <div className="grid grid-cols-2 gap-8 px-5">
- <FormField
- key="postgresValues.schema"
- control={form.control}
- name="postgresValues.schema"
- render={({ field }) => (
- <FormItemLayout
- label="Postgres Schema"
- description="Postgres schema where the function is defined"
- >
- <FormControl>
- <SchemaSelector
- size="small"
- showError={false}
- stopScrollPropagation
- selectedSchemaName={field.value}
- onSelectSchema={(name) => field.onChange(name)}
- disabled={field.disabled}
- />
- </FormControl>
- </FormItemLayout>
- )}
- />
- <FormField
- key="postgresValues.functionName"
- control={form.control}
- name="postgresValues.functionName"
- render={({ field }) => (
- <FormItemLayout
- label="Postgres function"
- description="This function will be called by Supabase Auth each time the hook is triggered"
- >
- <FormControl>
- <FunctionSelector
- size="small"
- schema={values.postgresValues.schema}
- value={field.value}
- stopScrollPropagation
- onChange={field.onChange}
- disabled={field.disabled}
- filterFunction={(func) => {
- if (supportedReturnTypes.includes(func.return_type)) {
- const { value } = convertArgumentTypes({
- type: func.type,
- value: func.argument_types,
- })
- if (value.length !== 1) return false
- return value[0].type === 'json' || value[0].type === 'jsonb'
- }
- return false
- }}
- noResultsLabel={
- <span>
- No function with a single JSON/B argument
- <br />
- and JSON/B
- {definition.enabledKey === 'HOOK_SEND_EMAIL_ENABLED'
- ? ' or void'
- : ''}{' '}
- return type found in this schema.
- </span>
+ <FormField
+ key="postgresValues.schema"
+ control={form.control}
+ name="postgresValues.schema"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="horizontal"
+ className="px-5"
+ label="Postgres Schema"
+ description="Postgres schema where the function is defined"
+ >
+ <FormControl>
+ <SchemaSelector
+ size="small"
+ showError={false}
+ stopScrollPropagation
+ selectedSchemaName={field.value}
+ onSelectSchema={(name) => field.onChange(name)}
+ disabled={field.disabled}
+ />
+ </FormControl>
+ </FormItemLayout>
+ )}
+ />
+ <FormField
+ key="postgresValues.functionName"
+ control={form.control}
+ name="postgresValues.functionName"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="horizontal"
+ className="px-5"
+ label="Postgres function"
+ description="This function will be called by Supabase Auth each time the hook is triggered"
+ >
+ <FormControl>
+ <FunctionSelector
+ size="small"
+ schema={postgresValues.schema}
+ value={field.value}
+ stopScrollPropagation
+ onChange={field.onChange}
+ disabled={field.disabled}
+ filterFunction={(func) => {
+ if (supportedReturnTypes.includes(func.return_type)) {
+ const { value } = convertArgumentTypes({
+ type: func.type,
+ value: func.argument_types,
+ })
+ if (value.length !== 1) return false
+ return value[0].type === 'json' || value[0].type === 'jsonb'
}
- />
- </FormControl>
- </FormItemLayout>
- )}
- />
- </div>
+ return false
+ }}
+ noResultsLabel={
+ <span>
+ No function with a single JSON/B argument
+ <br />
+ and JSON/B
+ {definition.enabledKey === 'HOOK_SEND_EMAIL_ENABLED'
+ ? ' or void'
+ : ''}{' '}
+ return type found in this schema.
+ </span>
+ }
+ />
+ </FormControl>
+ </FormItemLayout>
+ )}
+ />
{statements.length > 0 && (
- <div className="h-72 w-full gap-3 flex flex-col">
- <p className="text-sm text-foreground-light px-5">
- The following statements will be executed on the selected function:
- </p>
- <CodeEditor
- isReadOnly
- id="postgres-hook-editor"
- language="pgsql"
- value={statements.join('\n\n')}
- />
- </div>
+ <>
+ <Separator className="mb-4" />
+ <div className="h-72 w-full gap-3 flex flex-col">
+ <p className="text-sm text-foreground-light px-5">
+ The following statements will be executed on the selected function:
+ </p>
+ <CodeEditor
+ isReadOnly
+ id="postgres-hook-editor"
+ language="pgsql"
+ value={statements.join('\n\n')}
+ />
+ </div>
+ </>
)}
</>
) : (
@@ -461,11 +488,12 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
name="httpsValues.url"
render={({ field }) => (
<FormItemLayout
+ layout="horizontal"
label="URL"
description="Supabase Auth will send a HTTPS POST request to this URL each time the hook is triggered."
>
<FormControl>
- <Input {...field} />
+ <Input {...field} placeholder="https://www.example.com" />
</FormControl>
</FormItemLayout>
)}
@@ -476,11 +504,12 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
name="httpsValues.secret"
render={({ field }) => (
<FormItemLayout
+ layout="horizontal"
label="Secret"
description={
<div className="flex items-center gap-x-2">
<p>
- Should be a base64 encoded hook secret with a prefix{' '}
+ Should be a base64 encoded secret with a prefix{' '}
<code className="text-code-inline">v1,whsec_</code>.
</p>
<InfoTooltip side="bottom" className="w-60 text-center">
@@ -496,8 +525,7 @@ revoke execute on function ${ident(schema)}.${ident(functionName)} from authenti
<Input {...field} className="rounded-r-none border-r-0" />
<Button
variant="default"
- size="small"
- className="rounded-l-none text-xs"
+ className="rounded-l-none text-xs h-auto"
onClick={() => {
const authHookSecret = generateAuthHookSecret()
form.setValue('httpsValues.secret', authHookSecret, {
diff --git a/apps/studio/components/interfaces/Auth/Hooks/DeleteHookConfirmationDialog.tsx b/apps/studio/components/interfaces/Auth/Hooks/DeleteHookConfirmationDialog.tsx
new file mode 100644
index 00000000000..b1c5eebd8be
--- /dev/null
+++ b/apps/studio/components/interfaces/Auth/Hooks/DeleteHookConfirmationDialog.tsx
@@ -0,0 +1,169 @@
+import { joinSqlFragments } from '@supabase/pg-meta'
+import { useParams } from 'common'
+import { toast } from 'sonner'
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ cn,
+} from 'ui'
+import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
+
+import { isBeforeFreeTierTemplateBlockCutoff } from '../EmailTemplates/EmailTemplates.utils'
+import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils'
+import { type Hook } from './hooks.constants'
+import { getRevokePermissionStatements } from './hooks.utils'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
+import { useAuthHooksUpdateMutation } from '@/data/auth/auth-hooks-update-mutation'
+import { executeSql } from '@/data/sql/execute-sql-mutation'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+
+interface DeleteHookConfirmationDialogProps {
+ hook?: Hook
+ onOpenChange: (open: boolean) => void
+ onDeleteSuccess: () => void
+}
+
+export const DeleteHookConfirmationDialog = ({
+ hook,
+ onOpenChange,
+ onDeleteSuccess,
+}: DeleteHookConfirmationDialogProps) => {
+ const { ref: projectRef } = useParams()
+ const { data: project } = useSelectedProjectQuery()
+ const { data: selectedOrganization } = useSelectedOrganizationQuery()
+ const { data: authConfig } = useAuthConfigQuery({ projectRef })
+
+ const { mutate: updateAuthHooks, isPending: isDeletingAuthHook } = useAuthHooksUpdateMutation({
+ onSuccess: async () => {
+ if (!hook) return
+
+ const { method } = hook
+ if (method.type === 'postgres') {
+ try {
+ const revokeStatements = getRevokePermissionStatements(method.schema, method.functionName)
+ await executeSql({
+ projectRef,
+ connectionString: project!.connectionString,
+ sql: joinSqlFragments(revokeStatements, '\n'),
+ })
+ toast.success(`Successfully deleted ${hook.title}`)
+ } catch (error) {
+ toast.warning(
+ `Deleted ${hook.title}, but failed to revoke permissions on ${method.schema}.${method.functionName}. You may want to revoke them manually.`
+ )
+ }
+ }
+ onDeleteSuccess()
+ },
+ onError: (error) => {
+ toast.error(`Failed to delete hook: ${error.message}`)
+ },
+ })
+
+ const open = !!hook
+
+ // Whether deleting the Send Email hook will lock template editing:
+ // post-cutoff Free plan projects without custom SMTP.
+ const willLockTemplates =
+ !!selectedOrganization &&
+ selectedOrganization.plan?.id === 'free' &&
+ !!project?.inserted_at &&
+ !isBeforeFreeTierTemplateBlockCutoff(project.inserted_at) &&
+ !isSmtpEnabled(authConfig)
+
+ const handleDeleteSendEmailHook = async (): Promise<void> => {
+ if (!hook) return
+ updateAuthHooks({
+ projectRef: projectRef!,
+ config: {
+ [hook.enabledKey]: false,
+ [hook.uriKey]: null,
+ [hook.secretsKey]: null,
+ },
+ })
+ }
+
+ if (hook?.id === 'send-email') {
+ return (
+ <AlertDialog open={open} onOpenChange={onOpenChange}>
+ <AlertDialogContent>
+ <AlertDialogHeader>
+ <AlertDialogTitle>Confirm to delete Send Email hook</AlertDialogTitle>
+ <AlertDialogDescription asChild>
+ <div className="space-y-2">
+ <p>
+ The {willLockTemplates ? 'default' : 'built-in'} email templates will be used when
+ sending authentication-related emails.
+ </p>
+ {willLockTemplates && (
+ <p>Email templates cannot be edited on the Free plan without custom SMTP.</p>
+ )}
+ </div>
+ </AlertDialogDescription>
+ </AlertDialogHeader>
+ <AlertDialogFooter>
+ <AlertDialogCancel>Cancel</AlertDialogCancel>
+ <AlertDialogAction
+ variant="danger"
+ loading={isDeletingAuthHook}
+ onClick={(e) => {
+ e.preventDefault()
+ handleDeleteSendEmailHook()
+ }}
+ >
+ Delete hook
+ </AlertDialogAction>
+ </AlertDialogFooter>
+ </AlertDialogContent>
+ </AlertDialog>
+ )
+ }
+
+ return (
+ <ConfirmationModal
+ visible={!!hook && hook.id !== 'send-email'}
+ size="small"
+ variant="destructive"
+ loading={isDeletingAuthHook}
+ title={`Confirm to delete ${hook?.title}`}
+ className={cn('md:px-0', hook?.method.type === 'postgres' && 'pb-0')}
+ confirmLabel="Delete"
+ confirmLabelLoading="Deleting"
+ onCancel={() => onOpenChange(false)}
+ onConfirm={handleDeleteSendEmailHook}
+ >
+ <div>
+ <p className="md:px-5 text-sm text-foreground-light">
+ Are you sure you want to delete the {hook?.title}?
+ </p>
+ {hook?.method.type === 'postgres' && (
+ <>
+ <p className="md:px-5 text-sm text-foreground-light">
+ The following statements will be executed on the {hook?.method.schema}.
+ {hook?.method.functionName} function:
+ </p>
+ <div className="mt-4 h-72">
+ <CodeEditor
+ isReadOnly
+ id="deletion-hook-editor"
+ language="pgsql"
+ value={getRevokePermissionStatements(
+ hook?.method.schema,
+ hook?.method.functionName
+ ).join('\n\n')}
+ />
+ </div>
+ </>
+ )}
+ </div>
+ </ConfirmationModal>
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
index 79c79626086..ba506eee826 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HookCard.tsx
@@ -1,20 +1,28 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { Check, Webhook } from 'lucide-react'
-import { Badge } from 'ui'
+import { BookOpen, Check, Edit, MoreVertical, Trash, Webhook } from 'lucide-react'
+import {
+ Badge,
+ Button,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import { Hook } from './hooks.constants'
-import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
-import { DocsButton } from '@/components/ui/DocsButton'
+import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { DOCS_URL } from '@/lib/constants'
interface HookCardProps {
hook: Hook
- onSelect: () => void
+ onSelectEdit: () => void
+ onSelectDelete: () => void
}
-export const HookCard = ({ hook, onSelect }: HookCardProps) => {
+export const HookCard = ({ hook, onSelectEdit, onSelectDelete }: HookCardProps) => {
const { can: canUpdateAuthHook } = useAsyncCheckPermissions(PermissionAction.AUTH_EXECUTE, '*')
return (
@@ -27,14 +35,14 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
<span className="text-sm text-foreground-lighter">{hook.subtitle}</span>
<div className="text-sm flex flex-row space-x-5 py-4">
{hook.method.type === 'postgres' ? (
- <div className="flex flex-col w-full space-y-2">
+ <div className="flex flex-col w-full space-y-2 max-w-xl">
<div className="flex flex-row items-center">
- <span className="text-foreground-light w-20">type</span>
+ <span className="text-foreground-light w-20">Type</span>
<span className="text-foreground">Postgres function</span>
</div>
<div className="flex flex-row items-center">
<label htmlFor="schema" className="text-foreground-light w-20">
- schema
+ Schema
</label>
<Input
id="schema"
@@ -49,7 +57,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
</div>
<div className="flex flex-row items-center">
<label htmlFor="functionName" className="text-foreground-light w-20">
- function
+ Function
</label>
<Input
id="functionName"
@@ -64,14 +72,14 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
</div>
</div>
) : (
- <div className="flex flex-col w-full space-y-2">
+ <div className="flex flex-col w-full space-y-2 max-w-xl">
<div className="flex flex-row items-center">
- <span className="text-foreground-light w-20">type</span>
+ <span className="text-foreground-light w-20">Type</span>
<span className="text-foreground">HTTPS endpoint</span>
</div>
<div className="flex flex-row items-center">
<label htmlFor="url" className="text-foreground-light w-20">
- endpoint
+ Endpoint
</label>
<Input
id="url"
@@ -86,7 +94,7 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
</div>
<div className="flex flex-row items-center">
<label htmlFor="secret" className="text-foreground-light w-20">
- secret
+ Secret
</label>
<Input
id="secret"
@@ -103,38 +111,78 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
</div>
)}
</div>
- <div className="flex flex-row gap-2">
- <ButtonTooltip
- variant="default"
- disabled={!canUpdateAuthHook}
- onClick={() => onSelect()}
- tooltip={{
- content: {
- side: 'bottom',
- text: !canUpdateAuthHook
- ? 'You need additional permissions to configure auth hooks'
- : undefined,
- },
- }}
- >
- Configure hook
- </ButtonTooltip>
- <DocsButton href={`${DOCS_URL}/guides/auth/auth-hooks/${hook.docSlug}`} />
- </div>
</div>
+
<div>
- {hook.enabled ? (
- <Badge className="space-x-1" variant="success">
- <div className="h-3.5 w-3.5 bg-brand rounded-full flex justify-center items-center">
- <Check className="h-2 w-2 text-background-overlay " strokeWidth={6} />
- </div>
- <span>Enabled</span>
- </Badge>
- ) : (
- <Badge variant="warning">
- <span>Disabled</span>
- </Badge>
- )}
+ <div className="flex items-center gap-x-2">
+ {hook.enabled ? (
+ <Badge className="space-x-1" variant="success">
+ <div className="h-3.5 w-3.5 bg-brand rounded-full flex justify-center items-center">
+ <Check className="h-2 w-2 text-background-overlay " strokeWidth={6} />
+ </div>
+ <span>Enabled</span>
+ </Badge>
+ ) : (
+ <Badge variant="warning">
+ <span>Disabled</span>
+ </Badge>
+ )}
+ <DropdownMenu>
+ <DropdownMenuTrigger>
+ <Button
+ variant="default"
+ className="px-1"
+ icon={<MoreVertical />}
+ aria-label={`Open actions for ${hook.title}`}
+ />
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-40">
+ <DropdownMenuItemTooltip
+ className="gap-x-2"
+ disabled={!canUpdateAuthHook}
+ onClick={onSelectEdit}
+ tooltip={{
+ content: {
+ text: !canUpdateAuthHook
+ ? 'You need additional permissions to configure auth hooks'
+ : undefined,
+ side: 'left',
+ },
+ }}
+ >
+ <Edit size={12} />
+ <span>Edit hook</span>
+ </DropdownMenuItemTooltip>
+ <DropdownMenuItem asChild className="gap-x-2">
+ <a
+ target="_blank"
+ rel="noreferrer noopener"
+ href={`${DOCS_URL}/guides/auth/auth-hooks/${hook.docSlug}`}
+ >
+ <BookOpen size={12} />
+ <span>Documentation</span>
+ </a>
+ </DropdownMenuItem>
+ <DropdownMenuSeparator />
+ <DropdownMenuItemTooltip
+ className="gap-x-2"
+ disabled={!canUpdateAuthHook}
+ onClick={onSelectDelete}
+ tooltip={{
+ content: {
+ text: !canUpdateAuthHook
+ ? 'You need additional permissions to delete auth hooks'
+ : undefined,
+ side: 'left',
+ },
+ }}
+ >
+ <Trash size={12} />
+ <span>Delete hook</span>
+ </DropdownMenuItemTooltip>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ </div>
</div>
</div>
)
diff --git a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
index a40b77793d1..b07cc3dd605 100644
--- a/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
+++ b/apps/studio/components/interfaces/Auth/Hooks/HooksListing.tsx
@@ -1,11 +1,8 @@
-import { joinSqlFragments } from '@supabase/pg-meta/src/pg-format'
import { useParams } from 'common'
import { parseAsString, useQueryState } from 'nuqs'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
-import { cn } from 'ui'
-import { EmptyStatePresentational, GenericSkeletonLoader } from 'ui-patterns'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import {
PageSection,
PageSectionAside,
@@ -14,24 +11,22 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { AddHookDropdown } from './AddHookDropdown'
import { CreateHookSheet } from './CreateHookSheet'
+import { DeleteHookConfirmationDialog } from './DeleteHookConfirmationDialog'
import { HookCard } from './HookCard'
import { Hook, HOOKS_DEFINITIONS } from './hooks.constants'
-import { extractMethod, getRevokePermissionStatements, isValidHook } from './hooks.utils'
+import { extractMethod, isValidHook } from './hooks.utils'
import { AlertError } from '@/components/ui/AlertError'
-import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
-import { useAuthHooksUpdateMutation } from '@/data/auth/auth-hooks-update-mutation'
-import { executeSql } from '@/data/sql/execute-sql-mutation'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
export const HooksListing = () => {
const { ref: projectRef } = useParams()
- const { data: project } = useSelectedProjectQuery()
+
const {
data: authConfig,
error: authConfigError,
@@ -41,32 +36,10 @@ export const HooksListing = () => {
const [hook, setHook] = useQueryState('hook', parseAsString)
- const [selectedHookForDeletion, setSelectedHookForDeletion] = useState<Hook | null>(null)
+ const [selectedHookForDeletion, setSelectedHookForDeletion] = useState<Hook>()
const [addHookAsideOpen, setAddHookAsideOpen] = useState(false)
const [addHookEmptyOpen, setAddHookEmptyOpen] = useState(false)
- const { mutate: updateAuthHooks, isPending: isDeletingAuthHook } = useAuthHooksUpdateMutation({
- onSuccess: async () => {
- if (!selectedHookForDeletion) return
-
- const { method } = selectedHookForDeletion
- if (method.type === 'postgres') {
- const revokeStatements = getRevokePermissionStatements(method.schema, method.functionName)
- await executeSql({
- projectRef,
- connectionString: project!.connectionString,
- sql: joinSqlFragments(revokeStatements, '\n'),
- })
- }
- toast.success(`${selectedHookForDeletion.title} has been deleted.`)
- setSelectedHookForDeletion(null)
- setHook(null)
- },
- onError: (error) => {
- toast.error(`Failed to delete hook: ${error.message}`)
- },
- })
-
const hooks: Hook[] = HOOKS_DEFINITIONS.map((definition) => {
return {
...definition,
@@ -158,7 +131,14 @@ export const HooksListing = () => {
<div className="-space-y-px">
{validHooks.map((hook) => {
- return <HookCard key={hook.enabledKey} hook={hook} onSelect={() => setHook(hook.id)} />
+ return (
+ <HookCard
+ key={hook.enabledKey}
+ hook={hook}
+ onSelectEdit={() => setHook(hook.id)}
+ onSelectDelete={() => setSelectedHookForDeletion(hook)}
+ />
+ )
})}
</div>
@@ -173,54 +153,16 @@ export const HooksListing = () => {
authConfig={authConfig!}
/>
- <ConfirmationModal
- visible={!!selectedHookForDeletion}
- size="large"
- variant="destructive"
- loading={isDeletingAuthHook}
- title={`Confirm to delete ${selectedHookForDeletion?.title}`}
- className={cn('md:px-0', selectedHookForDeletion?.method.type === 'postgres' && 'pb-0')}
- confirmLabel="Delete"
- confirmLabelLoading="Deleting"
- onCancel={() => setSelectedHookForDeletion(null)}
- onConfirm={() => {
- if (!selectedHookForDeletion) return
- updateAuthHooks({
- projectRef: projectRef!,
- config: {
- [selectedHookForDeletion.enabledKey]: false,
- [selectedHookForDeletion.uriKey]: null,
- [selectedHookForDeletion.secretsKey]: null,
- },
- })
+ <DeleteHookConfirmationDialog
+ hook={selectedHookForDeletion}
+ onOpenChange={(open) => {
+ if (!open) setSelectedHookForDeletion(undefined)
}}
- >
- <div>
- <p className="md:px-5 text-sm text-foreground-light">
- Are you sure you want to delete the {selectedHookForDeletion?.title}?
- </p>
- {selectedHookForDeletion?.method.type === 'postgres' && (
- <>
- <p className="md:px-5 text-sm text-foreground-light">
- The following statements will be executed on the{' '}
- {selectedHookForDeletion?.method.schema}.
- {selectedHookForDeletion?.method.functionName} function:
- </p>
- <div className="mt-4 h-72">
- <CodeEditor
- isReadOnly
- id="deletion-hook-editor"
- language="pgsql"
- value={getRevokePermissionStatements(
- selectedHookForDeletion?.method.schema,
- selectedHookForDeletion?.method.functionName
- ).join('\n\n')}
- />
- </div>
- </>
- )}
- </div>
- </ConfirmationModal>
+ onDeleteSuccess={() => {
+ setSelectedHookForDeletion(undefined)
+ setHook(null)
+ }}
+ />
</PageSectionContent>
</PageSection>
)
diff --git a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
index 372554d3a6d..1bcc5c588aa 100644
--- a/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm.tsx
@@ -27,7 +27,6 @@ import {
Switch,
WarningIcon,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
@@ -37,11 +36,12 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer'
-import AlertError from '@/components/ui/AlertError'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
index 1a2a128334c..5a85a8a0183 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
@@ -37,7 +37,7 @@ import {
OAUTH_APP_CLIENT_TYPE_OPTIONS,
OAUTH_APP_REGISTRATION_TYPE_OPTIONS,
} from './oauthApps.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { FilterPopover } from '@/components/ui/FilterPopover'
import { Shortcut } from '@/components/ui/Shortcut'
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthEndpointsTable.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthEndpointsTable.tsx
index c148a09e5e2..8b4c35a69f5 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthEndpointsTable.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthEndpointsTable.tsx
@@ -1,5 +1,7 @@
import { useParams } from 'common'
import { Card, CardContent, cn } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
PageSectionContent,
@@ -7,9 +9,7 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import { Input } from 'ui-patterns/DataInputs/Input'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+} from 'ui-patterns/PageSection'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { useOpenIDConfigurationQuery } from '@/data/oauth-server-apps/oauth-openid-configuration-query'
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index 37d08c9199c..9c77405434d 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -25,7 +25,7 @@ import * as z from 'zod'
import { OAuthEndpointsTable } from './OAuthEndpointsTable'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useOAuthServerAppsQuery } from '@/data/oauth-server-apps/oauth-server-apps-query'
diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
index 2873f7bf9c7..9e21fa65f1d 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx
@@ -5,7 +5,6 @@ import { BarChart2, ChevronRight, ExternalLink, Telescope } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { AiIconAnimation, Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import { StatusCode } from 'ui-patterns'
import {
Chart,
ChartActions,
@@ -24,6 +23,7 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { StatusCode } from 'ui-patterns/StatusCode'
import {
AuthErrorCodeRow,
@@ -40,7 +40,7 @@ import {
getMetricValues,
} from './OverviewUsage.constants'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ErrorCodeTooltip } from '@/components/ui/ErrorCodeTooltip/ErrorCodeTooltip'
import { Service } from '@/data/graphql/graphql'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
diff --git a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
index 2a3cb1234a5..dc6976ef429 100644
--- a/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/Passkeys/PasskeysSettingsForm.tsx
@@ -21,7 +21,7 @@ import * as z from 'zod'
import { validateRpId, validateWebAuthnOrigins } from './PasskeysSettingsForm.utils'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import type { components } from '@/data/api'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
diff --git a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
index 8041604cc19..1b08af1dce1 100644
--- a/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/PerformanceSettingsForm.tsx
@@ -21,13 +21,13 @@ import {
SelectTrigger,
SelectValue,
} from 'ui'
-import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { ScaffoldSection, ScaffoldSectionTitle } from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.utils.test.ts b/apps/studio/components/interfaces/Auth/Policies/Policies.utils.test.ts
deleted file mode 100644
index e785b11c2b9..00000000000
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.utils.test.ts
+++ /dev/null
@@ -1,450 +0,0 @@
-import { safeSql } from '@supabase/pg-meta'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import {
- generateAiPoliciesForTable,
- generateProgrammaticPoliciesForTable,
- generateStartingPoliciesForTable,
- type GeneratedPolicy,
-} from './Policies.utils'
-import type { ForeignKeyConstraint } from '@/data/database/foreign-key-constraints-query'
-
-// Mock generateSqlPolicy for AI tests
-const mockGenerateSqlPolicy = vi.fn()
-vi.mock('@/data/ai/sql-policy-mutation', () => ({
- generateSqlPolicy: (...args: unknown[]) => mockGenerateSqlPolicy(...args),
-}))
-
-// Helper to create a foreign key constraint
-const createForeignKey = (overrides: Partial<ForeignKeyConstraint> = {}): ForeignKeyConstraint => ({
- id: 1,
- constraint_name: 'fk_constraint',
- source_id: 100,
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['user_id'],
- target_id: 200,
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- deletion_action: 'NO ACTION',
- update_action: 'NO ACTION',
- ...overrides,
-})
-
-describe('Policies.utils - Policy Generation', () => {
- beforeEach(() => {
- vi.clearAllMocks()
- })
-
- describe('generateProgrammaticPoliciesForTable', () => {
- it('should generate 4 CRUD policies for direct FK to auth.users', () => {
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['user_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- expect(policies).toHaveLength(4)
-
- const commands = policies.map((p) => p.command)
- expect(commands).toContain('SELECT')
- expect(commands).toContain('INSERT')
- expect(commands).toContain('UPDATE')
- expect(commands).toContain('DELETE')
- })
-
- it('should return empty array when no FK path to auth.users exists', () => {
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['category_id'],
- target_schema: 'public',
- target_table: 'categories',
- target_columns: ['id'],
- }),
- ]
-
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- expect(policies).toHaveLength(0)
- })
-
- it('should return empty array when foreignKeyConstraints is empty', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints: [],
- })
-
- expect(policies).toHaveLength(0)
- })
-
- it('should generate policies with EXISTS clause for indirect FK path (2 hops)', () => {
- // posts -> profiles -> auth.users
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- id: 1,
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['profile_id'],
- target_schema: 'public',
- target_table: 'profiles',
- target_columns: ['id'],
- }),
- createForeignKey({
- id: 2,
- source_schema: 'public',
- source_table: 'profiles',
- source_columns: ['user_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- expect(policies).toHaveLength(4)
-
- // Check that the expression contains EXISTS for indirect path
- const selectPolicy = policies.find((p) => p.command === 'SELECT')
- expect(selectPolicy?.definition).toContain('exists')
- expect(selectPolicy?.sql).toContain('exists')
- })
-
- describe('policy structure validation', () => {
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['user_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- it('should include all required fields in generated policies', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- for (const policy of policies) {
- expect(policy).toHaveProperty('name')
- expect(policy).toHaveProperty('sql')
- expect(policy).toHaveProperty('command')
- expect(policy).toHaveProperty('table', 'posts')
- expect(policy).toHaveProperty('schema', 'public')
- expect(policy).toHaveProperty('action', 'PERMISSIVE')
- expect(policy).toHaveProperty('roles')
- expect(policy.roles).toContain('authenticated')
- }
- })
-
- it('SELECT policy should have definition but no check', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- const selectPolicy = policies.find((p) => p.command === 'SELECT')
- expect(selectPolicy?.definition).toBeDefined()
- expect(selectPolicy?.check).toBeUndefined()
- })
-
- it('DELETE policy should have definition but no check', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- const deletePolicy = policies.find((p) => p.command === 'DELETE')
- expect(deletePolicy?.definition).toBeDefined()
- expect(deletePolicy?.check).toBeUndefined()
- })
-
- it('INSERT policy should have check but no definition', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- const insertPolicy = policies.find((p) => p.command === 'INSERT')
- expect(insertPolicy?.definition).toBeUndefined()
- expect(insertPolicy?.check).toBeDefined()
- })
-
- it('UPDATE policy should have both definition and check', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- const updatePolicy = policies.find((p) => p.command === 'UPDATE')
- expect(updatePolicy?.definition).toBeDefined()
- expect(updatePolicy?.check).toBeDefined()
- })
-
- it('should generate correct SQL syntax for direct FK', () => {
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- })
-
- const selectPolicy = policies.find((p) => p.command === 'SELECT')
- expect(selectPolicy?.sql).toContain('CREATE POLICY')
- expect(selectPolicy?.sql).toContain('public.posts')
- expect(selectPolicy?.sql).toContain('AS PERMISSIVE FOR SELECT')
- expect(selectPolicy?.sql).toContain('TO authenticated')
- expect(selectPolicy?.sql).toContain('USING')
- expect(selectPolicy?.sql).toContain('auth.uid()')
- })
- })
-
- it('should handle non-public schema', () => {
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'private',
- source_table: 'documents',
- source_columns: ['owner_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- const policies = generateProgrammaticPoliciesForTable({
- table: { name: 'documents', schema: 'private' },
- foreignKeyConstraints,
- })
-
- expect(policies).toHaveLength(4)
- expect(policies[0].schema).toBe('private')
- expect(policies[0].sql).toContain('private.documents')
- })
- })
-
- describe('generateAiPoliciesForTable', () => {
- const mockAiPolicies: GeneratedPolicy[] = [
- {
- name: 'ai_select_policy',
- sql: 'CREATE POLICY "ai_select_policy" ON public.posts FOR SELECT USING (true);',
- command: 'SELECT',
- table: 'posts',
- schema: 'public',
- definition: safeSql`true`,
- action: 'PERMISSIVE',
- roles: ['public'],
- },
- ]
-
- it('should return policies from AI when called with valid inputs', async () => {
- mockGenerateSqlPolicy.mockResolvedValue(mockAiPolicies)
-
- const policies = await generateAiPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- columns: [{ name: 'id' }, { name: 'title' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- })
-
- expect(mockGenerateSqlPolicy).toHaveBeenCalledWith({
- tableName: 'posts',
- schema: 'public',
- columns: ['id', 'title'],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- })
- expect(policies).toEqual(mockAiPolicies)
- })
-
- it('should return empty array when connectionString is null', async () => {
- const policies = await generateAiPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: null,
- })
-
- expect(mockGenerateSqlPolicy).not.toHaveBeenCalled()
- expect(policies).toEqual([])
- })
-
- it('should return empty array when connectionString is undefined', async () => {
- const policies = await generateAiPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: undefined,
- })
-
- expect(mockGenerateSqlPolicy).not.toHaveBeenCalled()
- expect(policies).toEqual([])
- })
-
- it('should handle API errors gracefully and return empty array', async () => {
- const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {})
- mockGenerateSqlPolicy.mockRejectedValue(new Error('API error'))
-
- const policies = await generateAiPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- })
-
- expect(policies).toEqual([])
- expect(consoleLogSpy).toHaveBeenCalledWith('AI policy generation failed:', expect.any(Error))
-
- consoleLogSpy.mockRestore()
- })
-
- it('should trim column names before sending to API', async () => {
- mockGenerateSqlPolicy.mockResolvedValue([])
-
- await generateAiPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- columns: [{ name: ' id ' }, { name: ' title ' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- })
-
- expect(mockGenerateSqlPolicy).toHaveBeenCalledWith(
- expect.objectContaining({
- columns: ['id', 'title'],
- })
- )
- })
- })
-
- describe('generateStartingPoliciesForTable', () => {
- const mockAiPolicies: GeneratedPolicy[] = [
- {
- name: 'ai_policy',
- sql: 'CREATE POLICY "ai_policy" ON public.posts FOR SELECT USING (true);',
- command: 'SELECT',
- table: 'posts',
- schema: 'public',
- definition: safeSql`true`,
- action: 'PERMISSIVE',
- roles: ['public'],
- },
- ]
-
- it('should use programmatic policies when FK path exists (does not call AI)', async () => {
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['user_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- const policies = await generateStartingPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- enableAi: true,
- })
-
- expect(policies).toHaveLength(4)
- expect(mockGenerateSqlPolicy).not.toHaveBeenCalled()
- })
-
- it('should fall back to AI when no FK path exists and enableAi is true', async () => {
- mockGenerateSqlPolicy.mockResolvedValue(mockAiPolicies)
-
- const policies = await generateStartingPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints: [],
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- enableAi: true,
- })
-
- expect(mockGenerateSqlPolicy).toHaveBeenCalled()
- expect(policies).toEqual(mockAiPolicies)
- })
-
- it('should return empty array when no FK path exists and enableAi is false', async () => {
- const policies = await generateStartingPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints: [],
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- enableAi: false,
- })
-
- expect(mockGenerateSqlPolicy).not.toHaveBeenCalled()
- expect(policies).toEqual([])
- })
-
- it('should return empty array when no FK path and AI returns empty', async () => {
- mockGenerateSqlPolicy.mockResolvedValue([])
-
- const policies = await generateStartingPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints: [],
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- enableAi: true,
- })
-
- expect(policies).toEqual([])
- })
-
- it('should prioritize programmatic over AI even when both could generate policies', async () => {
- mockGenerateSqlPolicy.mockResolvedValue(mockAiPolicies)
-
- const foreignKeyConstraints: ForeignKeyConstraint[] = [
- createForeignKey({
- source_schema: 'public',
- source_table: 'posts',
- source_columns: ['user_id'],
- target_schema: 'auth',
- target_table: 'users',
- target_columns: ['id'],
- }),
- ]
-
- const policies = await generateStartingPoliciesForTable({
- table: { name: 'posts', schema: 'public' },
- foreignKeyConstraints,
- columns: [{ name: 'id' }],
- projectRef: 'test-project',
- connectionString: 'postgresql://localhost:5432/test',
- enableAi: true,
- })
-
- // Should return 4 programmatic policies, not 1 AI policy
- expect(policies).toHaveLength(4)
- expect(mockGenerateSqlPolicy).not.toHaveBeenCalled()
- })
- })
-})
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.utils.ts b/apps/studio/components/interfaces/Auth/Policies/Policies.utils.ts
deleted file mode 100644
index d98c9322558..00000000000
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.utils.ts
+++ /dev/null
@@ -1,477 +0,0 @@
-import {
- acceptUntrustedSql,
- ident,
- safeSql,
- untrustedSql,
- type DisplayableSqlFragment,
- type SafeSqlFragment,
-} from '@supabase/pg-meta'
-import type { PGPolicy } from '@supabase/pg-meta'
-import { has, isEmpty, isEqual } from 'lodash'
-
-import {
- DraftPostgresPolicyCreatePayload,
- DraftPostgresPolicyUpdatePayload,
- PolicyFormField,
- PolicyForReview,
-} from './Policies.types'
-import { generateSqlPolicy } from '@/data/ai/sql-policy-mutation'
-import type { CreatePolicyBody } from '@/data/database-policies/database-policy-create-mutation'
-import type { ForeignKeyConstraint } from '@/data/database/foreign-key-constraints-query'
-
-/**
- * Returns an array of SQL statements that will preview in the review step of the policy editor
- * @param {*} policyFormFields { name, using, check, command }
- */
-
-export const createSQLPolicy = (
- policyFormFields: PolicyFormField,
- originalPolicyFormFields?: PGPolicy
-) => {
- const { definition, check } = policyFormFields
- const formattedPolicyFormFields = {
- ...policyFormFields,
- definition: definition
- ? definition.replace(/\s+/g, ' ').trim()
- : definition === undefined
- ? null
- : definition,
- check: check ? check.replace(/\s+/g, ' ').trim() : check === undefined ? null : check,
- }
-
- if (!originalPolicyFormFields || isEmpty(originalPolicyFormFields)) {
- return createSQLStatementForCreatePolicy(formattedPolicyFormFields)
- }
-
- // If there are no changes, return an empty object
- if (isEqual(policyFormFields, originalPolicyFormFields)) {
- return {}
- }
-
- // Extract out all the fields that updated
- const fieldsToUpdate: any = {}
- if (!isEqual(formattedPolicyFormFields.name, originalPolicyFormFields.name)) {
- fieldsToUpdate.name = formattedPolicyFormFields.name
- }
- if (!isEqual(formattedPolicyFormFields.definition, originalPolicyFormFields.definition)) {
- fieldsToUpdate.definition = formattedPolicyFormFields.definition
- }
- if (!isEqual(formattedPolicyFormFields.check, originalPolicyFormFields.check)) {
- fieldsToUpdate.check = formattedPolicyFormFields.check
- }
- if (!isEqual(formattedPolicyFormFields.roles, originalPolicyFormFields.roles)) {
- fieldsToUpdate.roles = formattedPolicyFormFields.roles
- }
-
- if (!isEmpty(fieldsToUpdate)) {
- return createSQLStatementForUpdatePolicy(formattedPolicyFormFields, fieldsToUpdate)
- }
-
- return {}
-}
-
-const createSQLStatementForCreatePolicy = (policyFormFields: PolicyFormField): PolicyForReview => {
- const { name, definition, check, command, schema, table } = policyFormFields
- const roles = policyFormFields.roles.length === 0 ? ['public'] : policyFormFields.roles
- const description = `Add policy for the ${command} operation under the policy "${name}"`
- const statement = [
- `CREATE POLICY "${name}" ON "${schema}"."${table}"`,
- `AS PERMISSIVE FOR ${command}`,
- `TO ${roles.join(', ')}`,
- `${definition ? `USING (${definition})` : ''}`,
- `${check ? `WITH CHECK (${check})` : ''}`,
- ].join('\n')
-
- return { description, statement }
-}
-
-const createSQLStatementForUpdatePolicy = (
- policyFormFields: PolicyFormField,
- fieldsToUpdate: Partial<PolicyFormField>
-): PolicyForReview => {
- const { name, schema, table } = policyFormFields
-
- const definitionChanged = has(fieldsToUpdate, ['definition'])
- const checkChanged = has(fieldsToUpdate, ['check'])
- const nameChanged = has(fieldsToUpdate, ['name'])
- const rolesChanged = has(fieldsToUpdate, ['roles'])
-
- const parameters = Object.keys(fieldsToUpdate)
- const description = `Update policy's ${
- parameters.length === 1
- ? parameters[0]
- : `${parameters.slice(0, parameters.length - 1).join(', ')} and ${
- parameters[parameters.length - 1]
- }`
- } `
- const roles =
- (fieldsToUpdate?.roles ?? []).length === 0 ? ['public'] : (fieldsToUpdate.roles as string[])
-
- const alterStatement = `ALTER POLICY "${name}" ON "${schema}"."${table}"`
- const statement = [
- 'BEGIN;',
- ...(definitionChanged ? [` ${alterStatement} USING (${fieldsToUpdate.definition});`] : []),
- ...(checkChanged ? [` ${alterStatement} WITH CHECK (${fieldsToUpdate.check});`] : []),
- ...(rolesChanged ? [` ${alterStatement} TO ${roles.join(', ')};`] : []),
- ...(nameChanged ? [` ${alterStatement} RENAME TO "${fieldsToUpdate.name}";`] : []),
- 'COMMIT;',
- ].join('\n')
-
- return { description, statement }
-}
-
-// These constructors return DRAFT payloads — `definition`/`check` are still
-// `DisplayableSqlFragment`. Promotion to `SafeSqlFragment` must happen at the user gesture
-// (the Save click in `PolicyEditorModal`), not here, since this module has no guarantee that
-// it was reached via a deliberate user action.
-export const createPayloadForCreatePolicy = (
- policyFormFields: PolicyFormField
-): DraftPostgresPolicyCreatePayload => {
- const { name, schema, table, command, definition, check, roles } = policyFormFields
- return {
- name,
- schema,
- table,
- action: 'PERMISSIVE',
- command: command || undefined,
- definition: !definition ? undefined : untrustedSql(definition),
- check: !check ? undefined : untrustedSql(check),
- roles: roles.length > 0 ? roles : undefined,
- }
-}
-
-export const createPayloadForUpdatePolicy = (
- policyFormFields: PolicyFormField,
- originalPolicyFormFields: PGPolicy
-): DraftPostgresPolicyUpdatePayload => {
- const { definition, check } = policyFormFields
- const formattedDefinition = definition ? definition.replace(/\s+/g, ' ').trim() : definition
- const formattedCheck = check ? check.replace(/\s+/g, ' ').trim() : check
-
- const payload: DraftPostgresPolicyUpdatePayload = { id: originalPolicyFormFields.id }
-
- if (!isEqual(policyFormFields.name, originalPolicyFormFields.name)) {
- payload.name = policyFormFields.name
- }
- if (!isEqual(formattedDefinition, originalPolicyFormFields.definition)) {
- payload.definition = !formattedDefinition ? undefined : untrustedSql(formattedDefinition)
- }
- if (!isEqual(formattedCheck, originalPolicyFormFields.check)) {
- payload.check = !formattedCheck ? undefined : untrustedSql(formattedCheck)
- }
- if (!isEqual(policyFormFields.roles, originalPolicyFormFields.roles)) {
- if (policyFormFields.roles.length === 0) payload.roles = ['public']
- else payload.roles = policyFormFields.roles || undefined
- }
-
- return payload
-}
-
-// --- Policy Generation ---
-
-/**
- * A policy generated for display/staging in the table editor.
- * `definition`/`check` are `DisplayableSqlFragment` because generators have different provenance:
- * programmatic generation produces `SafeSqlFragment` (composed via `safeSql`), AI generation
- * produces `UntrustedSqlFragment` (third-party output). Consumers must promote via
- * `acceptUntrustedSql` at a user gesture before executing.
- */
-export type GeneratedPolicy = Required<
- Pick<CreatePolicyBody, 'name' | 'table' | 'schema' | 'action' | 'roles'>
-> &
- Pick<CreatePolicyBody, 'command'> & {
- definition?: DisplayableSqlFragment
- check?: DisplayableSqlFragment
- sql: string
- }
-
-/**
- * A {@link GeneratedPolicy} whose `definition`/`check` have already been promoted to
- * `SafeSqlFragment`. Producing one of these is the contract that says: the user gesture
- * required to execute this SQL has already happened.
- */
-export type AcceptedGeneratedPolicy = Omit<GeneratedPolicy, 'definition' | 'check'> & {
- definition?: SafeSqlFragment
- check?: SafeSqlFragment
-}
-
-/**
- * Promotes a {@link GeneratedPolicy} to an {@link AcceptedGeneratedPolicy}.
- * ONLY call from an event handler tied to a deliberate user action (e.g. the Save click
- * on the table editor). Never call from useEffect, render, or any path that runs without
- * a user gesture.
- */
-export const acceptGeneratedPolicy = (policy: GeneratedPolicy): AcceptedGeneratedPolicy => ({
- ...policy,
- definition: policy.definition === undefined ? undefined : acceptUntrustedSql(policy.definition),
- check: policy.check === undefined ? undefined : acceptUntrustedSql(policy.check),
-})
-
-type Relationship = {
- source_schema: string
- source_table_name: string
- source_column_name: string
- target_table_schema: string
- target_table_name: string
- target_column_name: string
-}
-
-/**
- * Gets relationships for a specific table from FK constraints.
- * Returns relationships where the table is the source.
- */
-const getRelationshipsForTable = ({
- schema,
- table,
- fkConstraints,
-}: {
- schema: string
- table: string
- fkConstraints: ForeignKeyConstraint[]
-}): Relationship[] => {
- return fkConstraints
- .filter((fk) => fk.source_schema === schema && fk.source_table === table)
- .flatMap((fk) =>
- fk.source_columns.map((sourceCol, i) => ({
- source_schema: fk.source_schema,
- source_table_name: fk.source_table,
- source_column_name: sourceCol,
- target_table_schema: fk.target_schema,
- target_table_name: fk.target_table,
- target_column_name: fk.target_columns[i],
- }))
- )
-}
-
-/**
- * BFS to find shortest path from table to auth.users via foreign key relationships.
- * Returns null if no path exists within maxDepth.
- */
-const findPathToAuthUsers = (
- startTable: { schema: string; name: string },
- allForeignKeyConstraints: ForeignKeyConstraint[],
- maxDepth = 3
-): Relationship[] | null => {
- const startRelationships = getRelationshipsForTable({
- schema: startTable.schema,
- table: startTable.name,
- fkConstraints: allForeignKeyConstraints,
- })
-
- const queue: { table: { schema: string; name: string }; path: Relationship[] }[] = [
- { table: startTable, path: [] },
- ]
- const visited = new Set<string>()
- visited.add(`${startTable.schema}.${startTable.name}`)
-
- while (queue.length > 0) {
- const queueItem = queue.shift()
- if (!queueItem) continue
-
- const { table, path } = queueItem
- if (path.length >= maxDepth) continue
-
- const relationships =
- path.length === 0
- ? startRelationships
- : getRelationshipsForTable({
- schema: table.schema,
- table: table.name,
- fkConstraints: allForeignKeyConstraints,
- })
-
- for (const rel of relationships) {
- // Found path to auth.users
- if (
- rel.target_table_schema === 'auth' &&
- rel.target_table_name === 'users' &&
- rel.target_column_name === 'id'
- ) {
- return [...path, rel]
- }
-
- const targetId = `${rel.target_table_schema}.${rel.target_table_name}`
- if (visited.has(targetId)) continue
-
- // Add target table to queue for further exploration
- queue.push({
- table: { schema: rel.target_table_schema, name: rel.target_table_name },
- path: [...path, rel],
- })
- visited.add(targetId)
- }
- }
-
- return null
-}
-
-/** Generates SQL expression for RLS policy based on FK path to auth.users */
-const buildPolicyExpression = (path: Relationship[]): SafeSqlFragment => {
- if (path.length === 0) return safeSql``
-
- // Direct FK to auth.users
- if (path.length === 1) {
- return safeSql`(select auth.uid()) = ${ident(path[0].source_column_name)}`
- }
-
- // Indirect path - build EXISTS with JOINs
- const [first, ...rest] = path
- const firstTarget = safeSql`${ident(first.target_table_schema)}.${ident(first.target_table_name)}`
- const source = safeSql`${ident(first.source_schema)}.${ident(first.source_table_name)}`
- const last = path[path.length - 1]
-
- const joins = rest.slice(0, -1).reduce<SafeSqlFragment>(
- (acc, r) => {
- const targetSchema = ident(r.target_table_schema)
- const targetTable = ident(r.target_table_name)
- const targetColumn = ident(r.target_column_name)
-
- const sourceSchema = ident(r.source_schema)
- const sourceTable = ident(r.source_table_name)
- const sourceColumn = ident(r.source_column_name)
- const join = safeSql`join ${targetSchema}.${targetTable} on ${targetSchema}.${targetTable}.${targetColumn} = ${sourceSchema}.${sourceTable}.${sourceColumn}`
- return acc.length === 0 ? join : safeSql`${acc}\n ${join}`
- },
- safeSql``
- )
-
- return safeSql`exists (
- select 1 from ${firstTarget}
- ${joins}
- where ${firstTarget}.${ident(first.target_column_name)} = ${source}.${ident(first.source_column_name)}
- and ${ident(last.source_schema)}.${ident(last.source_table_name)}.${ident(last.source_column_name)} = (select auth.uid())
-)`
-}
-
-/** Builds policy SQL for all CRUD operations */
-const buildPoliciesForPath = (
- table: { name: string; schema: string },
- path: Relationship[]
-): GeneratedPolicy[] => {
- const expression = buildPolicyExpression(path)
- const targetCol = path[0].source_column_name
-
- return (['SELECT', 'INSERT', 'UPDATE', 'DELETE'] as const).map((command) => {
- const name = `Enable ${command.toLowerCase()} access for users based on ${ident(targetCol)}`
- const base = `CREATE POLICY "${name}" ON ${ident(table.schema)}.${ident(table.name)} AS PERMISSIVE FOR ${command} TO authenticated`
-
- const sql =
- command === 'INSERT'
- ? `${base} WITH CHECK (${expression});`
- : command === 'UPDATE'
- ? `${base} USING (${expression}) WITH CHECK (${expression});`
- : `${base} USING (${expression});`
-
- // Structured data for mutation API
- const definition = command === 'INSERT' ? undefined : expression
- const check = command === 'SELECT' || command === 'DELETE' ? undefined : expression
-
- return {
- name,
- sql,
- command,
- table: table.name,
- schema: table.schema,
- definition,
- check,
- action: 'PERMISSIVE' as const,
- roles: ['authenticated'],
- }
- })
-}
-
-/**
- * Generates RLS policies programmatically based on FK relationships to auth.users.
- */
-export const generateProgrammaticPoliciesForTable = ({
- table,
- foreignKeyConstraints,
-}: {
- table: { name: string; schema: string }
- foreignKeyConstraints: ForeignKeyConstraint[]
-}): GeneratedPolicy[] => {
- try {
- const path = findPathToAuthUsers(table, foreignKeyConstraints)
-
- if (path?.length) {
- return buildPoliciesForPath(table, path)
- }
- } catch (error) {
- // Silently fail - caller will handle empty result
- }
-
- return []
-}
-
-/**
- * Generates RLS policies using AI.
- */
-export const generateAiPoliciesForTable = async ({
- table,
- columns,
- projectRef,
- connectionString,
-}: {
- table: { name: string; schema: string }
- columns: { name: string }[]
- projectRef: string
- connectionString?: string | null
-}): Promise<GeneratedPolicy[]> => {
- if (!connectionString) return []
-
- try {
- return await generateSqlPolicy({
- tableName: table.name,
- schema: table.schema,
- columns: columns.map((col) => col.name.trim()),
- projectRef,
- connectionString: connectionString ?? '',
- })
- } catch (error) {
- console.log('AI policy generation failed:', error)
- return []
- }
-}
-
-/**
- * Generates RLS policies for a table.
- * First tries programmatic generation based on FK relationships to auth.users.
- * Falls back to AI generation if no path exists.
- */
-export const generateStartingPoliciesForTable = async ({
- table,
- foreignKeyConstraints,
- columns,
- projectRef,
- connectionString,
- enableAi,
-}: {
- table: { name: string; schema: string }
- foreignKeyConstraints: ForeignKeyConstraint[]
- columns: { name: string }[]
- projectRef: string
- connectionString?: string | null
- enableAi: boolean
-}): Promise<GeneratedPolicy[]> => {
- // Try programmatic generation first
- const programmaticPolicies = generateProgrammaticPoliciesForTable({
- table,
- foreignKeyConstraints,
- })
-
- if (programmaticPolicies.length > 0) {
- return programmaticPolicies
- }
-
- // Fall back to AI generation
- if (enableAi) {
- return await generateAiPoliciesForTable({
- table,
- columns,
- projectRef,
- connectionString,
- })
- }
-
- return []
-}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/RLSCodeEditor.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/RLSCodeEditor.tsx
deleted file mode 100644
index 776238de5a8..00000000000
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/RLSCodeEditor.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import Editor, { Monaco, OnChange, OnMount, useMonaco } from '@monaco-editor/react'
-import { noop } from 'lodash'
-import type { editor } from 'monaco-editor'
-import { MutableRefObject, useEffect, useRef } from 'react'
-import { cn } from 'ui'
-
-import { Markdown } from '@/components/interfaces/Markdown'
-import { formatSql } from '@/lib/formatSql'
-
-// [Joshen] Is there a way we can just have one single MonacoEditor component that's shared across the dashboard?
-// Feels like we're creating multiple copies of Editor. I'm keen to make this one the defacto as well so lets make sure
-// this component does not have RLS specific logic
-
-interface RLSCodeEditorProps {
- id: string
- defaultValue?: string
- onInputChange?: (value?: string) => void
- wrapperClassName?: string
- className?: string
- value?: string
- placeholder?: string
- readOnly?: boolean
-
- disableTabToUsePlaceholder?: boolean
- lineNumberStart?: number
- onChange?: () => void
- onMount?: () => void
-
- editorRef: MutableRefObject<editor.IStandaloneCodeEditor | null>
- monacoRef?: MutableRefObject<Monaco>
-}
-
-export const RLSCodeEditor = ({
- id,
- defaultValue,
- onInputChange,
- wrapperClassName,
- className,
- value,
- placeholder,
- readOnly = false,
-
- disableTabToUsePlaceholder = false,
- lineNumberStart,
- onChange = noop,
- onMount: _onMount = noop,
-
- editorRef,
- monacoRef,
-}: RLSCodeEditorProps) => {
- const hasValue = useRef<editor.IContextKey<boolean>>(null)
- const monaco = useMonaco()
-
- const placeholderId = `monaco-placeholder-${id}`
- const options: editor.IStandaloneEditorConstructionOptions = {
- tabSize: 2,
- fontSize: 13,
- readOnly,
- minimap: { enabled: false },
- wordWrap: 'on' as const,
- contextmenu: true,
- lineNumbers:
- lineNumberStart !== undefined ? (num) => (num + lineNumberStart).toString() : undefined,
- glyphMargin: undefined,
- lineNumbersMinChars: 4,
- folding: undefined,
- scrollBeyondLastLine: false,
- }
-
- const onMount: OnMount = async (editor, monaco) => {
- editorRef.current = editor
- if (monacoRef !== undefined) monacoRef.current = monaco
-
- hasValue.current = editor.createContextKey('hasValue', false)
- const placeholderEl = document.getElementById(placeholderId) as HTMLElement | null
- if (placeholderEl && placeholder !== undefined && (value ?? '').trim().length === 0) {
- placeholderEl.style.display = 'block'
- }
-
- if (!disableTabToUsePlaceholder) {
- editor.addCommand(
- monaco.KeyCode.Tab,
- () => {
- editor.executeEdits('source', [
- {
- // @ts-ignore
- identifier: 'add-placeholder',
- range: new monaco.Range(1, 1, 1, 1),
- text: (placeholder ?? '')
- .split('\n\n')
- .join('\n')
- .replaceAll('*', '')
- .replaceAll(' ', ''),
- },
- ])
- },
- '!hasValue'
- )
- }
-
- editor.focus()
-
- _onMount()
- }
-
- const onChangeContent: OnChange = (value) => {
- if (hasValue.current) {
- hasValue.current.set((value ?? '').length > 0)
- }
-
- const placeholderEl = document.getElementById(placeholderId) as HTMLElement | null
- if (placeholderEl) {
- if (!value) {
- placeholderEl.style.display = 'block'
- } else {
- placeholderEl.style.display = 'none'
- }
- }
-
- onChange()
- onInputChange?.(value)
- }
-
- // when the value has changed, trigger the onChange callback so that the height of the container can be adjusted.
- // Happens when the value wordwraps and is updated via a template.
- useEffect(() => {
- onChange()
- }, [value])
-
- useEffect(() => {
- if (monaco) {
- // Enable pgsql format
- const formatprovider = monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
- async provideDocumentFormattingEdits(model: any) {
- const value = model.getValue()
- const formatted = formatSql(value)
- return [
- {
- range: model.getFullModelRange(),
- text: formatted.trim(),
- },
- ]
- },
- })
-
- return () => {
- formatprovider.dispose()
- }
- }
- }, [monaco])
-
- useEffect(() => {
- if (value !== undefined && value.trim().length > 0) {
- const placeholderEl = document.getElementById(placeholderId) as HTMLElement | null
- if (placeholderEl) placeholderEl.style.display = 'none'
- }
- }, [value])
-
- return (
- <>
- <Editor
- path={id}
- theme="supabase"
- wrapperProps={{ className: cn(wrapperClassName) }}
- className={cn(className, 'monaco-editor')}
- value={value ?? undefined}
- defaultLanguage="pgsql"
- defaultValue={defaultValue ?? undefined}
- options={options}
- onMount={onMount}
- onChange={onChangeContent}
- />
- {placeholder !== undefined && (
- <div
- id={placeholderId}
- className={cn(
- 'monaco-placeholder absolute top-0 left-[57px] text-sm pointer-events-none font-mono tracking-tighter',
- '[&>div>p]:text-foreground-lighter [&>div>p]:m-0!'
- )}
- style={{ display: 'none' }}
- >
- <Markdown content={placeholder} />
- </div>
- )}
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/PolicyTemplates.constants.ts b/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/PolicyTemplates.constants.ts
deleted file mode 100644
index 19fe1d66272..00000000000
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/PolicyTemplates.constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { SafeSqlFragment } from '@supabase/pg-meta/src/pg-format'
-
-export interface PolicyTemplate {
- id: string
- preview: boolean
- templateName: string
- description: string
- name: string
- statement: string
- definition: SafeSqlFragment
- check: SafeSqlFragment
- command: 'SELECT' | 'INSERT' | 'UPDATE' | 'DELETE' | 'ALL'
- roles: Array<string>
-}
diff --git a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
index 1b4876e86e8..a626f8a0de8 100644
--- a/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm.tsx
@@ -21,7 +21,6 @@ import {
SelectValue,
Switch,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
@@ -31,12 +30,13 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { NO_REQUIRED_CHARACTERS } from '../Auth.constants'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx b/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx
deleted file mode 100644
index d56074cc27c..00000000000
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterSheet.tsx
+++ /dev/null
@@ -1,319 +0,0 @@
-import {
- acceptUntrustedSql,
- safeSql,
- type SafeSqlFragment,
- type UntrustedSqlFragment,
-} from '@supabase/pg-meta'
-import {
- Select,
- SelectContent,
- SelectGroup,
- SelectItem,
- SelectLabel,
- SelectTrigger,
- SelectValue,
-} from '@ui/components/shadcn/ui/select'
-import { LOCAL_STORAGE_KEYS, useFlag } from 'common'
-import { Code, ExternalLink } from 'lucide-react'
-import { useEffect, useRef, useState } from 'react'
-import {
- Button,
- DialogSectionSeparator,
- Sheet,
- SheetContent,
- SheetDescription,
- SheetFooter,
- SheetHeader,
- SheetSection,
- SheetTitle,
- SheetTrigger,
-} from 'ui'
-import { Admonition } from 'ui-patterns'
-
-import { InferredSQLViewer } from './InferredSQLViewer'
-import { type ParseQueryResults } from './RLSTester.types'
-import { RLSTesterEmptyState } from './RLSTesterEmptyState'
-import { RLSTesterResults } from './RLSTesterResults'
-import { RoleSelector } from './RoleSelector'
-import { SandboxManagement } from './SandboxManagement'
-import { UserSelector } from './UserSelector'
-import { UserSqlEditor } from './UserSqlEditor'
-import { useTestQueryRLS } from './useTestQueryRLS'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
-import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
-import { useTrack } from '@/lib/telemetry/track'
-import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
-import { PostgresSandboxProvider } from '@/state/postgres-sandbox/sandbox'
-import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
-import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-
-interface RLSTesterSheetProps {
- handleSelectEditPolicy: (policy: Policy) => void
-}
-
-export const RLSTesterSheet = (props: RLSTesterSheetProps) => {
- return (
- <PostgresSandboxProvider>
- <RLSTesterSheetContents {...props} />
- </PostgresSandboxProvider>
- )
-}
-
-const RLSTesterSheetContents = ({ handleSelectEditPolicy }: RLSTesterSheetProps) => {
- const track = useTrack()
- const aiSnap = useAiAssistantStateSnapshot()
- const { openSidebar } = useSidebarManagerSnapshot()
- const { setRole } = useRoleImpersonationStateSnapshot()
- const sandboxEnabled = useFlag('rlsTesterSandbox')
-
- const [open, setOpen] = useState(false)
- const [selectedOption, setSelectedOption] = useState<'anon' | 'authenticated'>('anon')
-
- const [format, setFormat] = useState<'sql' | 'lib'>('sql')
- const [inferredSQL, setInferredSQL] = useState<UntrustedSqlFragment>()
-
- const [value, setValue] = useState<SafeSqlFragment>(safeSql``)
- const [results, setResults] = useState<Object[] | null>(null)
- const [autoLimit, setAutoLimit] = useState(false)
- const [parseQueryResults, setParseQueryResults] = useState<ParseQueryResults>()
-
- const {
- testQuery,
- inferSQLFromLib,
- isLoading,
- isInferring,
- executeSqlError,
- parseQueryError,
- parseClientCodeError,
- } = useTestQueryRLS()
-
- const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
- const handleValueChange = (sql: SafeSqlFragment) => {
- setValue(sql)
- if (format !== 'lib') return
-
- if (debounceRef.current !== null) clearTimeout(debounceRef.current)
- if (!sql) return
-
- debounceRef.current = setTimeout(() => {
- inferSQLFromLib(sql, setInferredSQL)
- }, 1500)
- }
-
- const executionCallbacks = {
- option: selectedOption,
- onExecuteSQL: ({ result, isAutoLimit }: { result: Object[] | null; isAutoLimit: boolean }) => {
- setResults(result)
- setAutoLimit(isAutoLimit)
- },
- onParseQuery: setParseQueryResults,
- }
-
- const onRunQuery = async () => {
- if (format === 'lib') {
- if (!inferredSQL) return
- await testQuery({ value: acceptUntrustedSql(inferredSQL), ...executionCallbacks })
- track('rls_tester_run_query_clicked', { type: 'inferred' })
- } else {
- await testQuery({ value, ...executionCallbacks })
- track('rls_tester_run_query_clicked', { type: 'raw' })
- }
- }
-
- const assistantSql = format === 'lib' && inferredSQL ? acceptUntrustedSql(inferredSQL) : value
-
- const getDebugPrompt = ({ includeSql = false }: { includeSql?: boolean } = {}) => {
- const prompt = `Help me fix my RLS policy based on the attached SQL snippet that gave the following error: \n\n${executeSqlError?.message}\n\nEvaluate if the problem might be query first, before checking my RLS policies.`
-
- return includeSql ? `${prompt}\n\nSQL Query:\n\`\`\`sql\n${assistantSql}\n\`\`\`` : prompt
- }
-
- const onDebugWithAssistant = () => {
- const prompt = getDebugPrompt()
- openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
- aiSnap.newChat({
- name: 'Debug RLS policies',
- sqlSnippets: [assistantSql],
- initialInput: prompt,
- })
- setOpen(false)
- }
-
- useEffect(() => {
- if (open) {
- setRole({ type: 'postgrest', role: 'anon' })
- } else {
- // Flip back to service role
- setRole(undefined)
- }
- }, [open, setRole])
-
- return (
- <Sheet open={open} onOpenChange={setOpen}>
- <SheetTrigger asChild>
- <Button variant="default" icon={<Code />}>
- Test
- </Button>
- </SheetTrigger>
-
- <SheetContent className="w-[600px]! flex flex-col gap-y-0">
- <SheetHeader>
- <SheetTitle className="flex items-center gap-x-4">
- <span>What data can my users see?</span>
- <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_TESTER} />
- </SheetTitle>
- <SheetDescription>
- See what data a user is allowed to read based on your RLS policies
- </SheetDescription>
- </SheetHeader>
-
- <div className="grow overflow-y-auto flex flex-col">
- {sandboxEnabled && <SandboxManagement />}
-
- <SheetSection className="px-0 py-0 border-t">
- <div className="flex flex-col p-5 pt-4 gap-y-4">
- <RoleSelector onSelectRole={setSelectedOption} />
- {selectedOption === 'authenticated' && <UserSelector />}
- </div>
-
- <DialogSectionSeparator />
-
- <div className="flex items-center justify-between px-5 py-2">
- <p className="text-sm">Query</p>
- <div className="flex items-center gap-x-2">
- <Select
- value={format}
- onValueChange={(x) => {
- const newFormat = x as 'sql' | 'lib'
- setFormat(newFormat)
- if (newFormat !== 'lib') {
- setInferredSQL(undefined)
- if (debounceRef.current !== null) clearTimeout(debounceRef.current)
- }
- }}
- >
- <SelectTrigger size="tiny">
- <SelectValue />
- </SelectTrigger>
- <SelectContent>
- <SelectGroup>
- <SelectLabel>Query format</SelectLabel>
- <SelectItem value="sql">SQL</SelectItem>
- <SelectItem value="lib">Client library</SelectItem>
- </SelectGroup>
- </SelectContent>
- </Select>
- </div>
- </div>
-
- <div className="h-40 relative">
- <UserSqlEditor
- id="rls-tester"
- value={value}
- placeholder={
- format === 'sql'
- ? safeSql`select * from table;`
- : safeSql`SQL will be inferred from client library code`
- }
- onChange={handleValueChange}
- actions={{
- runQuery: {
- enabled: open,
- callback: () => {
- if (!isInferring && !isLoading) onRunQuery()
- },
- },
- }}
- />
- </div>
- </SheetSection>
-
- {format === 'lib' && (
- <div>
- <DialogSectionSeparator />
- <InferredSQLViewer sql={inferredSQL} isLoading={isInferring} />
- </div>
- )}
-
- <DialogSectionSeparator />
-
- {parseQueryError ? (
- <div className="p-4">
- <Admonition
- type="warning"
- title="Error parsing query"
- description={parseQueryError.message}
- />
- </div>
- ) : parseClientCodeError ? (
- <div className="p-4">
- <Admonition
- type="warning"
- title="Error parsing client code"
- description={parseClientCodeError.message}
- />
- </div>
- ) : (
- executeSqlError && (
- <div className="p-4">
- <Admonition
- type="warning"
- title="Error running SQL query"
- description={executeSqlError.message}
- actions={[
- <AiAssistantDropdown
- key="ai-assistant"
- label="Ask Assistant"
- telemetrySource="rls_tester"
- buildPrompt={() => getDebugPrompt({ includeSql: true })}
- onOpenAssistant={onDebugWithAssistant}
- />,
- ]}
- />
- </div>
- )
- )}
-
- {results === null ? (
- !parseQueryError && !parseClientCodeError && !executeSqlError && <RLSTesterEmptyState />
- ) : !!parseQueryResults ? (
- <RLSTesterResults
- results={results}
- parseQueryResults={parseQueryResults}
- autoLimit={autoLimit}
- handleSelectEditPolicy={handleSelectEditPolicy}
- />
- ) : null}
- </div>
-
- <SheetFooter className="sm:justify-between">
- <Button asChild variant="default" icon={<ExternalLink />}>
- <a
- target="_blank"
- rel="noopener noreferrer"
- href="https://github.com/orgs/supabase/discussions/45233"
- >
- Give feedback
- </a>
- </Button>
- <div className="flex items-center gap-x-2">
- <Button variant="default" disabled={isLoading} onClick={() => setOpen(false)}>
- Cancel
- </Button>
- <Button
- variant="primary"
- loading={isInferring || isLoading}
- disabled={format === 'lib' && !inferredSQL}
- onClick={onRunQuery}
- >
- Run query
- </Button>
- </div>
- </SheetFooter>
- </SheetContent>
- </Sheet>
- )
-}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.utils.ts b/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.utils.ts
deleted file mode 100644
index d6862e5e1cd..00000000000
--- a/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.utils.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import type { ParseSQLQueryResponse } from '@/data/misc/parse-query-mutation'
-
-export function filterTablePolicies({
- policies,
- schema,
- table,
- role,
- operation,
-}: {
- policies: Policy[]
- schema: string
- table: string
- role: string | undefined
- operation: ParseSQLQueryResponse['operation']
-}): Policy[] {
- return policies.filter(
- (x) =>
- x.schema === schema &&
- x.table === table &&
- (x.roles.includes(role ?? '') || (x.roles.length === 1 && x.roles[0] === 'public')) &&
- (x.command === 'ALL' || x.command === operation)
- )
-}
diff --git a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
index 49fbcf5abd3..ba2dba4f676 100644
--- a/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
+++ b/apps/studio/components/interfaces/Auth/RateLimits/RateLimits.tsx
@@ -35,9 +35,9 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { isSmtpEnabled } from '../SmtpForm/SmtpForm.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -107,31 +107,31 @@ export const RateLimits = () => {
RATE_LIMIT_TOKEN_REFRESH: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an 5 minutes'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 in 5 minutes'),
RATE_LIMIT_VERIFY: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an 5 minutes'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 in 5 minutes'),
RATE_LIMIT_EMAIL_SENT: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an hour'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 per hour'),
RATE_LIMIT_SMS_SENT: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an hour'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 per hour'),
RATE_LIMIT_ANONYMOUS_USERS: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an hour'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 per hour'),
RATE_LIMIT_OTP: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an hour'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 per hour'),
RATE_LIMIT_WEB3: z.coerce
.number()
.min(0, 'Must be not be lower than 0')
- .max(32767, 'Must not be more than 32,767 an hour'),
+ .max(2147483647, 'Must not be more than 2,147,483,647 per hour'),
})
const rateLimitForm = useForm<z.infer<typeof RateLimitFormSchema>>({
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.test.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.test.tsx
index dc89c65f59e..43137ec556e 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.test.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.test.tsx
@@ -80,7 +80,7 @@ describe('AddNewURLModal', () => {
expect(toast.success).toHaveBeenCalledWith('Successfully added 1 URL')
})
- it('dedupes URLs after normalising a trailing comma before submitting', async () => {
+ it('normalizes a trailing-comma URL before submitting', async () => {
const user = userEvent.setup()
mutateMock.mockImplementation((_vars, callbacks) => callbacks?.onSuccess?.())
@@ -88,11 +88,7 @@ describe('AddNewURLModal', () => {
await screen.findByRole('dialog')
- await user.type(screen.getByPlaceholderText('https://mydomain.com'), 'https://app.example.com')
- await user.click(screen.getByRole('button', { name: 'Add URL' }))
-
- const urlInputs = screen.getAllByPlaceholderText('https://mydomain.com')
- await user.type(urlInputs[1], 'https://app.example.com,')
+ await user.type(screen.getByPlaceholderText('https://mydomain.com'), 'https://app.example.com,')
fireEvent.submit(screen.getByRole('dialog').querySelector('form') as HTMLFormElement)
@@ -130,4 +126,24 @@ describe('AddNewURLModal', () => {
expect(await screen.findByText('URL already exists in the allow list')).toBeInTheDocument()
expect(mutateMock).not.toHaveBeenCalled()
})
+
+ it('rejects a whitespace-padded URL when it already exists in the allow list', async () => {
+ const user = userEvent.setup()
+
+ render(
+ <AddNewURLModal visible allowList={['https://existing.example.com']} onClose={vi.fn()} />
+ )
+
+ await screen.findByRole('dialog')
+
+ await user.type(
+ screen.getByPlaceholderText('https://mydomain.com'),
+ ' https://existing.example.com '
+ )
+
+ fireEvent.submit(screen.getByRole('dialog').querySelector('form') as HTMLFormElement)
+
+ expect(await screen.findByText('URL already exists in the allow list')).toBeInTheDocument()
+ expect(mutateMock).not.toHaveBeenCalled()
+ })
})
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
index fcd9160d02b..7e7cffa8b6c 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/AddNewURLModal.tsx
@@ -22,7 +22,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
import * as z from 'zod'
-import { urlRegex } from '../Auth.constants'
+import { normalizeRedirectUrl, parseRedirectUrls, urlRegex } from '../Auth.constants'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
const MAX_URLS_LENGTH = 2 * 1024
@@ -33,61 +33,88 @@ interface AddNewURLModalProps {
onClose: () => void
}
-const normaliseUrl = (value: string) => value.replace(/,\s*$/, '')
+const createRedirectUrlsSchema = (normalizedAllowList: string[]) => {
+ const redirectUrlRegex = urlRegex()
+
+ return z
+ .object({
+ urls: z
+ .object({
+ value: z.string().trim().min(1, 'Please provide a value').transform(normalizeRedirectUrl),
+ })
+ .array()
+ .default([]),
+ })
+ .superRefine((data, ctx) => {
+ const seenUrls = new Set<string>()
+
+ data.urls.forEach((url, index) => {
+ if (!redirectUrlRegex.test(url.value)) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ path: ['urls', index, 'value'],
+ message: 'Please provide a valid URL',
+ })
+ }
+
+ if (normalizedAllowList.includes(url.value)) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ path: ['urls', index, 'value'],
+ message: 'URL already exists in the allow list',
+ })
+ }
+
+ if (seenUrls.has(url.value)) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ path: ['urls', index, 'value'],
+ message: 'URL already exists in this list',
+ })
+ }
+
+ seenUrls.add(url.value)
+ })
+ })
+}
export const AddNewURLModal = ({ visible, allowList, onClose }: AddNewURLModalProps) => {
const { ref } = useParams()
const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation()
- const redirectUrlRegex = urlRegex()
-
- const FormSchema = z.object({
- urls: z
- .object({
- value: z
- .string()
- .min(1, 'Please provide a value')
- .refine(
- (value) => redirectUrlRegex.test(normaliseUrl(value)),
- 'Please provide a valid URL'
- )
- .refine((value) => !allowList.includes(normaliseUrl(value)), {
- message: 'URL already exists in the allow list',
- }),
- })
- .array()
- .default([]),
- })
+ const normalizedAllowList = parseRedirectUrls(allowList.join(','))
+ const formSchema = createRedirectUrlsSchema(normalizedAllowList)
const initialValues = { urls: [{ value: '' }] }
- const form = useForm<z.infer<typeof FormSchema>>({
- resolver: zodResolver(FormSchema),
+ const form = useForm<z.infer<typeof formSchema>>({
+ resolver: zodResolver(formSchema),
defaultValues: initialValues,
})
const urls = form.watch('urls')
- const onSubmit = (data: z.infer<typeof FormSchema>) => {
- const dedupedUrls = [...new Set(data.urls.map((url) => normaliseUrl(url.value)))]
- const payloadUrls = allowList.concat(dedupedUrls)
- const addedCount = dedupedUrls.length
- const payload = payloadUrls.toString()
+ const onSubmit = (data: z.infer<typeof formSchema>) => {
+ const payload = parseRedirectUrls(
+ normalizedAllowList.concat(data.urls.map((url) => url.value)).join(',')
+ )
+ const payloadString = payload.join(',')
+ const addedCount = payload.length - normalizedAllowList.length
- if (payload.length > MAX_URLS_LENGTH) {
+ if (payloadString.length > MAX_URLS_LENGTH) {
return toast.error('Too many redirect URLs, please remove some or try to use wildcards')
- } else {
- updateAuthConfig(
- { projectRef: ref!, config: { URI_ALLOW_LIST: payload } },
- {
- onError: (error) => {
- toast.error(`Failed to add URL(s): ${error?.message}`)
- },
- onSuccess: () => {
- toast.success(`Successfully added ${addedCount} URL${addedCount > 1 ? 's' : ''}`)
- form.reset(initialValues)
- onClose()
- },
- }
- )
}
+
+ updateAuthConfig(
+ { projectRef: ref!, config: { URI_ALLOW_LIST: payloadString } },
+ {
+ onError: (error) => {
+ toast.error(`Failed to add URL(s): ${error?.message}`)
+ },
+ onSuccess: () => {
+ toast.success(`Successfully added ${addedCount} URL${addedCount > 1 ? 's' : ''}`)
+ form.reset(initialValues)
+ onClose()
+ },
+ }
+ )
}
useEffect(() => {
diff --git a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
index 5819985f817..0441dfab252 100644
--- a/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
+++ b/apps/studio/components/interfaces/Auth/RedirectUrls/RedirectUrls.tsx
@@ -23,10 +23,11 @@ import {
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { parseRedirectUrls } from '../Auth.constants'
import { AddNewURLModal } from './AddNewURLModal'
import { RedirectUrlList } from './RedirectUrlList'
import { ValueContainer } from './ValueContainer'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { HorizontalShimmerWithIcon } from '@/components/ui/Shimmers'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
@@ -46,9 +47,7 @@ export const RedirectUrls = () => {
useAuthConfigUpdateMutation()
const URI_ALLOW_LIST_ARRAY = useMemo(() => {
- return authConfig?.URI_ALLOW_LIST
- ? authConfig.URI_ALLOW_LIST.split(/\s*[,]+\s*/).filter((url: string) => url)
- : []
+ return parseRedirectUrls(authConfig?.URI_ALLOW_LIST)
}, [authConfig?.URI_ALLOW_LIST])
const [open, setOpen] = useState(false)
@@ -58,8 +57,7 @@ export const RedirectUrls = () => {
const onConfirmDeleteUrl = async (urls?: string[]) => {
if (!urls || urls.length === 0) return
- // Remove selectedUrl from array and update
- const payload = URI_ALLOW_LIST_ARRAY.filter((url: string) => !selectedUrls.includes(url))
+ const payload = URI_ALLOW_LIST_ARRAY.filter((url: string) => !urls.includes(url))
const payloadString = payload.join(',')
await updateAuthConfig(
{ projectRef: projectRef!, config: { URI_ALLOW_LIST: payloadString } },
diff --git a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
index dc987721b65..a57bdfd515a 100644
--- a/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm.tsx
@@ -18,7 +18,6 @@ import {
InputGroupText,
Switch,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -27,10 +26,11 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
-import AlertError from '@/components/ui/AlertError'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
diff --git a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
index 84bf7fdcf7f..15ad25aa548 100644
--- a/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
+++ b/apps/studio/components/interfaces/Auth/SiteUrl/SiteUrl.tsx
@@ -5,7 +5,6 @@ import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Input } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -14,9 +13,10 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
index 8672aeb72c9..b2570e70367 100644
--- a/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
+++ b/apps/studio/components/interfaces/Auth/SmtpForm/SmtpForm.tsx
@@ -19,9 +19,10 @@ import {
InputGroupText,
Switch,
} from 'ui'
-import { Admonition, PageSection, PageSectionContent } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import * as z from 'zod'
import { urlRegex } from '../Auth.constants'
diff --git a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
index 7dcc4640d47..4697f0f4aed 100644
--- a/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
+++ b/apps/studio/components/interfaces/Auth/ThirdPartyAuthForm/index.tsx
@@ -29,7 +29,7 @@ import {
getIntegrationTypeLabel,
INTEGRATION_TYPES,
} from './ThirdPartyAuthForm.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { InlineLink } from '@/components/ui/InlineLink'
import { useDeleteThirdPartyAuthIntegrationMutation } from '@/data/third-party-auth/integration-delete-mutation'
diff --git a/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx b/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
index 216cf0232c6..12614f426e6 100644
--- a/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/SortDropdown.tsx
@@ -63,7 +63,10 @@ export const SortDropdown = ({
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
- <Button icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}>
+ <Button
+ variant="default"
+ icon={sortOrder === 'desc' ? <ArrowDownWideNarrow /> : <ArrowDownNarrowWide />}
+ >
Sorted by {sortColumn === 'id' ? 'user ID' : sortColumn.replaceAll('_', ' ')}
</Button>
</DropdownMenuTrigger>
diff --git a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
index ac14ea57465..beaa3fcd4fb 100644
--- a/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UserLogs.tsx
@@ -4,8 +4,9 @@ import Link from 'next/link'
import { useQueryState } from 'nuqs'
import { useEffect } from 'react'
import { Button, cn, CriticalIcon, Separator } from 'ui'
-import { Admonition, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { UserHeader } from './UserHeader'
import { PANEL_PADDING } from './Users.constants'
diff --git a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
index d13aaf25138..1686bdf5b0f 100644
--- a/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
+++ b/apps/studio/components/interfaces/Billing/NoProjectsOnPaidOrgInfo.tsx
@@ -1,5 +1,5 @@
import Link from 'next/link'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx
index 144dfe661f6..5d70043695b 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/DeletePaymentMethodModal.tsx
@@ -10,7 +10,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useOrganizationPaymentMethodDeleteMutation } from '@/data/organizations/organization-payment-method-delete-mutation'
import type { OrganizationPaymentMethod } from '@/data/organizations/organization-payment-methods-query'
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
index a8b9da11623..cd4037b16a5 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/NewPaymentMethodElement.tsx
@@ -51,7 +51,7 @@ import { getURL } from '@/lib/helpers'
export const BillingCustomerDataSchema = z.object({
tax_id_type: z.string(),
- tax_id_value: z.string().min(2, {
+ tax_id_value: z.string().trim().min(2, {
message: 'Tax ID needs to be set.',
}),
tax_id_name: z.string(),
@@ -140,7 +140,8 @@ export const NewPaymentMethodElement = forwardRef(
form.setValue('tax_id_name', name)
}
- const { tax_id_name, tax_id_value } = form.watch()
+ const { tax_id_name, tax_id_value: rawTaxIdValue } = form.watch()
+ const taxIdValue = rawTaxIdValue?.trim() ?? ''
const selectedTaxId = TAX_IDS.find((option) => option.name === tax_id_name)
const [purchasingAsBusiness, setPurchasingAsBusiness] = useState(currentTaxId != null)
@@ -149,16 +150,16 @@ export const NewPaymentMethodElement = forwardRef(
>(undefined)
useEffect(() => {
if (!onTaxIdChange) return
- if (purchasingAsBusiness && selectedTaxId && tax_id_value) {
+ if (purchasingAsBusiness && selectedTaxId && taxIdValue) {
onTaxIdChange({
country: getEffectiveTaxCountry(selectedTaxId),
type: selectedTaxId.type,
- value: tax_id_value,
+ value: taxIdValue,
})
} else {
onTaxIdChange(null)
}
- }, [purchasingAsBusiness, selectedTaxId, tax_id_value, onTaxIdChange])
+ }, [purchasingAsBusiness, selectedTaxId, taxIdValue, onTaxIdChange])
const addressCountry = stripeAddress?.address.country
const availableTaxIds = useMemo(() => {
@@ -212,7 +213,7 @@ export const NewPaymentMethodElement = forwardRef(
? {
country: getEffectiveTaxCountry(selectedTaxId),
type: selectedTaxId.type,
- value: form.getValues('tax_id_value'),
+ value: form.getValues('tax_id_value').trim(),
}
: null
}
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
index d6ce0676d04..85b92a6c18a 100644
--- a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
+++ b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
@@ -17,10 +17,10 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { FormPanel } from '@/components/ui/Forms/FormPanel'
import { FormSection, FormSectionContent } from '@/components/ui/Forms/FormSection'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
import { useOrganizationPaymentMethodsQuery } from '@/data/organizations/organization-payment-methods-query'
diff --git a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
index c51f5dbc1f5..76fd9d3bbdb 100644
--- a/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
+++ b/apps/studio/components/interfaces/Billing/Usage/UsageWarningAlerts/DiskIOBandwidthWarnings.tsx
@@ -1,6 +1,6 @@
import Link from 'next/link'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
// [Joshen] In the future, conditionals should be from resource exhaustion endpoint as single source of truth
interface DiskIOBandwidthWarningsProps {
diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
index 65a65c1c546..0b1e7890e51 100644
--- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
@@ -4,8 +4,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { PropsWithChildren, ReactNode } from 'react'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { WorkflowLogs } from './WorkflowLogs'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
index 95cdf11692b..8bd01d65a4d 100644
--- a/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx
@@ -42,7 +42,7 @@ import {
} from './BranchManagement.utils'
import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer'
import { BranchingPITRNotice } from '@/components/layouts/AppLayout/EnableBranchingButton/BranchingPITRNotice'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { InlineLink, InlineLinkClassName } from '@/components/ui/InlineLink'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
diff --git a/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx b/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
index 452da4ecf0f..7186cf00078 100644
--- a/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/OutOfDateNotice.tsx
@@ -12,7 +12,7 @@ import {
AlertDialogTrigger,
Button,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useTrack } from '@/lib/telemetry/track'
diff --git a/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx b/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx
deleted file mode 100644
index 8d2382dbc3d..00000000000
--- a/apps/studio/components/interfaces/BranchManagement/ReviewRow.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query'
-import dayjs from 'dayjs'
-import { MoreVertical, X } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { toast } from 'sonner'
-import {
- Button,
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuItem,
- DropdownMenuTrigger,
-} from 'ui'
-
-import { useBranchUpdateMutation } from '@/data/branches/branch-update-mutation'
-import type { Branch } from '@/data/branches/branches-query'
-import { branchKeys } from '@/data/branches/keys'
-
-interface ReviewRowProps {
- branch: Branch
-}
-
-export const ReviewRow = ({ branch }: ReviewRowProps) => {
- const router = useRouter()
- const queryClient = useQueryClient()
- const { project_ref: branchRef, parent_project_ref: projectRef } = branch
-
- const { mutate: updateBranch, isPending: isUpdating } = useBranchUpdateMutation({
- onSuccess: () => {
- toast.success('Branch marked as not ready for review')
- queryClient.invalidateQueries({
- queryKey: branchKeys.list(projectRef),
- })
- },
- onError: (error) => {
- toast.error(`Failed to update branch: ${error.message}`)
- },
- })
-
- const handleRowClick = () => {
- router.push(`/project/${branchRef}/merge`)
- }
-
- const handleNotReadyForReview = (e?: Event) => {
- e?.preventDefault()
- e?.stopPropagation()
-
- updateBranch({
- branchRef,
- projectRef,
- requestReview: false,
- })
- }
-
- const formattedReviewDate = branch.review_requested_at
- ? dayjs(branch.review_requested_at).format('MMM DD, YYYY HH:mm')
- : ''
-
- return (
- <div
- className="w-full flex items-center justify-between px-6 py-3 hover:bg-surface-100 cursor-pointer transition-colors"
- onClick={handleRowClick}
- >
- <div className="flex items-center gap-x-4">
- <div className="flex gap-4">
- <h4 className="text-sm text-foreground" title={branch.name}>
- {branch.name}
- </h4>
- <p className="text-foreground-light">{formattedReviewDate}</p>
- </div>
- </div>
-
- <div className="flex items-center gap-x-2">
- <DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- variant="text"
- icon={<MoreVertical />}
- className="px-1"
- onClick={(e) => e.stopPropagation()}
- />
- </DropdownMenuTrigger>
- <DropdownMenuContent className="w-56" side="bottom" align="end">
- <DropdownMenuItem
- className="gap-x-2"
- disabled={isUpdating}
- onClick={(e) => e.stopPropagation()}
- onSelect={handleNotReadyForReview}
- >
- <X size={14} />
- Not ready for review
- </DropdownMenuItem>
- </DropdownMenuContent>
- </DropdownMenu>
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
index 3902ce11504..8ead7ed8cd5 100644
--- a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
+++ b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
@@ -14,11 +14,12 @@ import {
DialogTrigger,
StatusIcon,
} from 'ui'
-import { GenericSkeletonLoader, TimestampInfo } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { ActionStatusBadge, ActionStatusBadgeCondensed, STATUS_TO_LABEL } from './ActionStatusBadge'
import BranchStatusBadge from './BranchStatusBadge'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ActionRunData } from '@/data/actions/action-detail-query'
import { useActionRunLogsQuery } from '@/data/actions/action-logs-query'
import {
diff --git a/apps/studio/components/interfaces/Branching/MergeRequest.tsx b/apps/studio/components/interfaces/Branching/MergeRequest.tsx
index 681fa079482..a1c1e2ae36b 100644
--- a/apps/studio/components/interfaces/Branching/MergeRequest.tsx
+++ b/apps/studio/components/interfaces/Branching/MergeRequest.tsx
@@ -12,7 +12,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { useIsPgDeltaDiffEnabled } from '../App/FeaturePreview/FeaturePreviewContext'
import { ReviewWithAI } from '../BranchManagement/ReviewWithAI'
diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
index b9825fa2360..5eee915f9dd 100644
--- a/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/ConnectStepsSection.tsx
@@ -1,12 +1,11 @@
import { useParams } from 'common'
import dynamic from 'next/dynamic'
import Link from 'next/link'
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, type ComponentType } from 'react'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import { connectSchema } from './connect.schema'
import type {
ConnectionStringPooler,
ConnectState,
@@ -129,6 +128,27 @@ function useConnectionStringPooler(deploymentMode: DeploymentMode): ConnectionSt
)
}
+// Vite needs `import.meta.glob` to statically discover the step content
+// modules because the `${filePath}` template can span multiple directory
+// segments (`flask/supabasepy`, `steps/shadcn/explore`, ...) which Vite's
+// dynamic-import-vars plugin can't analyze. Skip the glob on the SSR bundle
+// — Vite replaces `import.meta.env.SSR` at build time and tree-shakes the
+// call so the 37 content modules stay out of the server graph (pulling them
+// in reshuffles chunks enough to surface latent circular-dep bugs in
+// unrelated modules). Next/webpack doesn't know about `import.meta.glob`
+// either; the try/catch lets that branch fall through to the webpack-friendly
+// `import()` below.
+let contentModules: Record<string, () => Promise<unknown>> = {}
+if (!import.meta.env?.SSR) {
+ try {
+ contentModules = import.meta.glob('./content/**/content.{tsx,ts}')
+ } catch {
+ // webpack build: import.meta.glob is undefined, keep empty map
+ }
+}
+
+type StepContentModule = { default: ComponentType<StepContentProps> }
+
/**
* Dynamically loads and renders a content component from the content directory.
* All step content uses this unified loader - no built-in component registry needed.
@@ -151,7 +171,16 @@ function StepContent({
// Dynamically import the content component
const ContentComponent = useMemo(() => {
- return dynamic<StepContentProps>(() => import(`./content/${filePath}/content`), {
+ const viteLoader =
+ contentModules[`./content/${filePath}/content.tsx`] ??
+ contentModules[`./content/${filePath}/content.ts`]
+
+ const loader = viteLoader
+ ? (viteLoader as () => Promise<StepContentModule>)
+ : () =>
+ import(/* @vite-ignore */ `./content/${filePath}/content`) as Promise<StepContentModule>
+
+ return dynamic<StepContentProps>(loader, {
loading: () => (
<div className="p-4 min-h-[200px]">
<GenericSkeletonLoader />
@@ -196,11 +225,6 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
const showSelfHostedMcpNotice = deploymentMode.isSelfHosted && state.mode === 'mcp'
- const customPrompt = useMemo(
- () => connectSchema.modes.find((m) => m.id === state.mode)?.prompt,
- [state.mode]
- )
-
if (steps.length === 0) return null
return (
@@ -244,7 +268,7 @@ export function ConnectStepsSection({ steps, state, projectKeys }: ConnectStepsS
/>
)}
- <CopyPromptAdmonition stepsContainerRef={stepsContainerRef} customPrompt={customPrompt} />
+ <CopyPromptAdmonition stepsContainerRef={stepsContainerRef} />
<div className="mt-6" ref={stepsContainerRef}>
{steps.map((step, index) => (
diff --git a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx b/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
deleted file mode 100644
index 0039e5bc6bc..00000000000
--- a/apps/studio/components/interfaces/ConnectSheet/FrameworkSelector.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Box, Check, ChevronDown } from 'lucide-react'
-import { useState } from 'react'
-import {
- Button,
- cn,
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from 'ui'
-
-import { ConnectionType } from '@/components/interfaces/ConnectSheet/Connect.constants'
-import { ConnectionIcon } from '@/components/interfaces/ConnectSheet/ConnectionIcon'
-
-interface FrameworkSelectorProps {
- value: string
- onChange: (value: string) => void
- items: ConnectionType[]
- className?: string
- size?: 'tiny' | 'small'
-}
-
-export const FrameworkSelector = ({
- value,
- onChange,
- items,
- className,
- size = 'tiny',
-}: FrameworkSelectorProps) => {
- const [open, setOpen] = useState(false)
-
- const selectedItem = items.find((item) => item.key === value)
-
- function handleSelect(key: string) {
- onChange(key)
- setOpen(false)
- }
-
- return (
- <Popover open={open} onOpenChange={setOpen} modal={false}>
- <div className={cn('flex', className)}>
- <PopoverTrigger asChild>
- <Button
- size={size}
- variant="default"
- className={cn('gap-0 justify-between', className?.includes('w-full') && 'w-full')}
- iconRight={<ChevronDown strokeWidth={1.5} />}
- >
- <div className="flex items-center gap-2">
- {selectedItem?.icon ? <ConnectionIcon icon={selectedItem.icon} /> : <Box size={12} />}
- {selectedItem?.label}
- </div>
- </Button>
- </PopoverTrigger>
- </div>
- <PopoverContent
- className="p-0 w-radix-popover-trigger-width min-w-48"
- side="bottom"
- align="start"
- onOpenAutoFocus={(e) => e.preventDefault()}
- >
- <Command>
- <CommandInput placeholder="Search..." />
- <CommandList>
- <CommandEmpty>No results found.</CommandEmpty>
- <CommandGroup>
- {items.map((item) => (
- <CommandItem
- key={item.key}
- value={item.key}
- onSelect={() => handleSelect(item.key)}
- className="flex gap-2 items-center"
- >
- {item.icon ? <ConnectionIcon icon={item.icon} /> : <Box size={12} />}
- {item.label}
- <Check
- size={15}
- className={cn('ml-auto', item.key === value ? 'opacity-100' : 'opacity-0')}
- />
- </CommandItem>
- ))}
- </CommandGroup>
- </CommandList>
- </Command>
- </PopoverContent>
- </Popover>
- )
-}
diff --git a/apps/studio/components/interfaces/ConnectSheet/content/server/env/content.tsx b/apps/studio/components/interfaces/ConnectSheet/content/server/env/content.tsx
index c9391840089..43a12e20516 100644
--- a/apps/studio/components/interfaces/ConnectSheet/content/server/env/content.tsx
+++ b/apps/studio/components/interfaces/ConnectSheet/content/server/env/content.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import Link from 'next/link'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { EnvRow } from '../common/EnvRow'
import { SecretEnvRow } from '../common/SecretRow'
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
index 0c4fc5348bb..85ca7e62f9f 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupItem.tsx
@@ -2,7 +2,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { Download } from 'lucide-react'
import { Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
index 941f6120b74..f0dec4bbc8b 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
@@ -1,5 +1,5 @@
import { DatabaseBackup } from 'lucide-react'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
export const BackupsEmpty = () => {
return (
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
index fb3d5f8fc7c..edac39d4c11 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsList.tsx
@@ -4,9 +4,9 @@ import { Clock } from 'lucide-react'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { toast } from 'sonner'
-import { TimestampInfo } from 'ui-patterns'
import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { BackupItem } from './BackupItem'
import { BackupsEmpty } from './BackupsEmpty'
diff --git a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
index 17fa70ecfdc..63eb2035eb5 100644
--- a/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/RestoreToNewProject/BackupsList.tsx
@@ -1,5 +1,5 @@
import { Badge, Button } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { BackupsEmpty } from '../BackupsEmpty'
import Panel from '@/components/ui/Panel'
diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
index 12f18ffd3a7..0113fd47257 100644
--- a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
+++ b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes.tsx
@@ -15,6 +15,9 @@ import {
TableHead,
TableHeader,
TableRow,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
} from 'ui'
import { Input } from 'ui-patterns/DataInputs/Input'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
@@ -23,9 +26,9 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
import CreateEnumeratedTypeSidePanel from './CreateEnumeratedTypeSidePanel'
import EditEnumeratedTypeSidePanel from './EditEnumeratedTypeSidePanel'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { useEnumeratedTypeDeleteMutation } from '@/data/enumerated-types/enumerated-type-delete-mutation'
import { useEnumeratedTypesQuery } from '@/data/enumerated-types/enumerated-types-query'
@@ -235,13 +238,19 @@ export const EnumeratedTypes = () => {
{!isSchemaLocked && (
<div className="flex justify-end items-center space-x-2">
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- variant="default"
- className="px-1"
- icon={<MoreVertical />}
- />
- </DropdownMenuTrigger>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <DropdownMenuTrigger asChild>
+ <Button
+ variant="default"
+ className="px-1"
+ icon={<MoreVertical />}
+ aria-label={`${type.name} actions`}
+ />
+ </DropdownMenuTrigger>
+ </TooltipTrigger>
+ <TooltipContent side="bottom">More options</TooltipContent>
+ </Tooltip>
<DropdownMenuContent side="bottom" align="end" className="w-32">
<DropdownMenuItem
className="space-x-2"
diff --git a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
index ff4ead4a268..e9c36ea6bca 100644
--- a/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/EnableExtensionModal.tsx
@@ -22,7 +22,7 @@ import {
SelectTrigger,
SelectValue,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
index 11ada34ae1d..4c68836985a 100644
--- a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
+++ b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react'
import { extensions } from 'shared-data'
import { toast } from 'sonner'
import { Button, Switch, TableCell, TableRow, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
import { EnableExtensionModal } from './EnableExtensionModal'
diff --git a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
index 789208cb6d3..c40a04a07e0 100644
--- a/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/CreateFunction/index.tsx
@@ -40,7 +40,7 @@ import { CreateFunctionHeader } from './CreateFunctionHeader'
import { FunctionEditor } from './FunctionEditor'
import { POSTGRES_DATA_TYPES } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants'
import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-extensions-query'
import { useDatabaseFunctionCreateMutation } from '@/data/database-functions/database-functions-create-mutation'
import type { SavedDatabaseFunction } from '@/data/database-functions/database-functions-query'
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
index 654b6a08e9b..dd9e837282f 100644
--- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionList.tsx
@@ -15,6 +15,9 @@ import {
DropdownMenuTrigger,
TableCell,
TableRow,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
} from 'ui'
import { stripInArgModePrefixes } from '../Functions.utils'
@@ -160,14 +163,19 @@ export const FunctionList = ({
<div className="flex items-center justify-end">
{canUpdateFunctions ? (
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- aria-label="More options"
- variant="default"
- className="px-1"
- icon={<MoreVertical />}
- />
- </DropdownMenuTrigger>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <DropdownMenuTrigger asChild>
+ <Button
+ aria-label={`${x.name} actions`}
+ variant="default"
+ className="px-1"
+ icon={<MoreVertical />}
+ />
+ </DropdownMenuTrigger>
+ </TooltipTrigger>
+ <TooltipContent side="bottom">More options</TooltipContent>
+ </Tooltip>
<DropdownMenuContent side="left" className="w-52">
{isApiDocumentAvailable && (
<>
diff --git a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
index 7e75986a65c..d91bbab1f40 100644
--- a/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
+++ b/apps/studio/components/interfaces/Database/Functions/FunctionsList/FunctionsList.tsx
@@ -14,8 +14,8 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ProtectedSchemaWarning } from '../../ProtectedSchemaWarning'
@@ -27,9 +27,9 @@ import {
selectFilterSchema,
} from '@/components/interfaces/Reports/v2/ReportsSelectFilter'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
import { useDatabaseFunctionDeleteMutation } from '@/data/database-functions/database-functions-delete-mutation'
diff --git a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
index 4d178de6d8f..3c3e3441ab4 100644
--- a/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
+++ b/apps/studio/components/interfaces/Database/Hooks/HooksList/HooksList.tsx
@@ -8,7 +8,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { HooksListEmpty } from './HooksListEmpty'
import { SchemaTable } from './SchemaTable'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
diff --git a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
index 42f7570cccc..1e5a3657258 100644
--- a/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/CreateIndexSidePanel.tsx
@@ -33,7 +33,7 @@ import {
SheetSection,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
MultiSelector,
diff --git a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
index f0c15d7c805..7c9dc433c26 100644
--- a/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
+++ b/apps/studio/components/interfaces/Database/Indexes/Indexes.tsx
@@ -21,9 +21,9 @@ import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringL
import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
import { CreateIndexSidePanel } from './CreateIndexSidePanel'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { useDatabaseIndexDeleteMutation } from '@/data/database-indexes/index-delete-mutation'
import { useIndexesQuery, type DatabaseIndex } from '@/data/database-indexes/indexes-query'
diff --git a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
index df17cf08a7e..24f4763fa21 100644
--- a/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
+++ b/apps/studio/components/interfaces/Database/Migrations/Migrations.tsx
@@ -16,9 +16,10 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { MigrationsEmptyState } from './MigrationsEmptyState'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
diff --git a/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx b/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
index 92862f0dc18..8a6e8ec769b 100644
--- a/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
+++ b/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { Terminal } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import CommandRender from '@/components/interfaces/Functions/CommandRender'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModal.constants.ts b/apps/studio/components/interfaces/Database/Policies/Policies.constants.ts
similarity index 97%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModal.constants.ts
rename to apps/studio/components/interfaces/Database/Policies/Policies.constants.ts
index 9e918f6cc11..2e1e7dcb2a7 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModal.constants.ts
+++ b/apps/studio/components/interfaces/Database/Policies/Policies.constants.ts
@@ -1,6 +1,18 @@
import { safeSql } from '@supabase/pg-meta/src/pg-format'
+import type { SafeSqlFragment } from '@supabase/pg-meta/src/pg-format'
-import { PolicyTemplate } from '../PolicyTemplates/PolicyTemplates.constants'
+export interface PolicyTemplate {
+ id: string
+ preview: boolean
+ templateName: string
+ description: string
+ name: string
+ statement: string
+ definition: SafeSqlFragment
+ check: SafeSqlFragment
+ command: 'SELECT' | 'INSERT' | 'UPDATE' | 'DELETE' | 'ALL'
+ roles: Array<string>
+}
/**
* ----------------------------------------------------------------
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx b/apps/studio/components/interfaces/Database/Policies/Policies.tsx
similarity index 97%
rename from apps/studio/components/interfaces/Auth/Policies/Policies.tsx
rename to apps/studio/components/interfaces/Database/Policies/Policies.tsx
index 084d6b57ffe..b841b160ab4 100644
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/Policies.tsx
@@ -9,8 +9,8 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import {
PolicyTableRow,
PolicyTableRowProps,
-} from '@/components/interfaces/Auth/Policies/PolicyTableRow'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+} from '@/components/interfaces/Database/Policies/PolicyTableRow'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { ProtectedSchemaWarning } from '@/components/interfaces/Database/ProtectedSchemaWarning'
import { RLSToggleDialog } from '@/components/interfaces/Database/RLSToggleDialog'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PoliciesDataContext.tsx b/apps/studio/components/interfaces/Database/Policies/PoliciesDataContext.tsx
similarity index 95%
rename from apps/studio/components/interfaces/Auth/Policies/PoliciesDataContext.tsx
rename to apps/studio/components/interfaces/Database/Policies/PoliciesDataContext.tsx
index 15d083b5935..a0cdef263c9 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PoliciesDataContext.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PoliciesDataContext.tsx
@@ -1,7 +1,7 @@
import type { PropsWithChildren } from 'react'
import { createContext, useCallback, useContext, useMemo } from 'react'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import type { ResponseError } from '@/types'
type TableKey = `${string}.${string}`
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/LockedQuerySection.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/LockedQuerySection.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/LockedQuerySection.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/LockedQuerySection.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyDetailsV2.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyEditorPanel.utils.ts b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanel.utils.ts
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyEditorPanel.utils.ts
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanel.utils.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyTemplates.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyTemplates.tsx
index ea7da926e6f..77d54208dad 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyTemplates.tsx
@@ -17,7 +17,7 @@ import {
getGeneralPolicyTemplates,
getQueuePolicyTemplates,
getRealtimePolicyTemplates,
-} from '../PolicyEditorModal/PolicyEditorModal.constants'
+} from '../Policies.constants'
import { Markdown } from '@/components/interfaces/Markdown'
import CardButton from '@/components/ui/CardButton'
import CopyButton from '@/components/ui/CopyButton'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/QueryError.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/QueryError.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/QueryError.tsx
diff --git a/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/RLSCodeEditor.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/RLSCodeEditor.tsx
new file mode 100644
index 00000000000..78752078ca5
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/RLSCodeEditor.tsx
@@ -0,0 +1,76 @@
+import { Monaco } from '@monaco-editor/react'
+import { noop } from 'lodash'
+import type { editor } from 'monaco-editor'
+import { RefObject, useEffect } from 'react'
+
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+
+// [Joshen] Is there a way we can just have one single MonacoEditor component that's shared across the dashboard?
+// Feels like we're creating multiple copies of Editor. I'm keen to make this one the defacto as well so lets make sure
+// this component does not have RLS specific logic
+
+interface RLSCodeEditorProps {
+ id: string
+ defaultValue?: string
+ onInputChange?: (value?: string) => void
+ wrapperClassName?: string
+ className?: string
+ value?: string
+ placeholder?: string
+ readOnly?: boolean
+
+ lineNumberStart?: number
+ onChange?: () => void
+ onMount?: () => void
+
+ editorRef: RefObject<editor.IStandaloneCodeEditor | null>
+ monacoRef?: RefObject<Monaco>
+}
+
+export const RLSCodeEditor = ({
+ id,
+ defaultValue,
+ onInputChange,
+ wrapperClassName,
+ className,
+ value,
+ placeholder,
+ readOnly = false,
+ lineNumberStart,
+ onChange = noop,
+ onMount: _onMount = noop,
+
+ editorRef,
+ monacoRef,
+}: RLSCodeEditorProps) => {
+ const onChangeContent = (value?: string) => {
+ onChange()
+ onInputChange?.(value)
+ }
+
+ // when the value has changed, trigger the onChange callback so that the height of the container can be adjusted.
+ // Happens when the value wordwraps and is updated via a template.
+ useEffect(() => onChange(), [value])
+
+ return (
+ <CodeEditor
+ id={id}
+ monacoRef={monacoRef}
+ editorRef={editorRef}
+ isReadOnly={readOnly}
+ language="pgsql"
+ className={className}
+ wrapperClassName={wrapperClassName}
+ placeholder={placeholder}
+ value={value ?? undefined}
+ defaultValue={defaultValue ?? undefined}
+ options={{
+ lineNumbers:
+ lineNumberStart !== undefined ? (num) => (num + lineNumberStart).toString() : undefined,
+ }}
+ actions={{ placeholderFill: { enabled: false } }}
+ onMount={_onMount}
+ onInputChange={onChangeContent}
+ />
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
similarity index 99%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
index 6c13c6756ef..872acd61db3 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyEditorPanel/index.tsx
@@ -40,7 +40,7 @@ import { PolicyEditorPanelHeader } from './PolicyEditorPanelHeader'
import { PolicyTemplates } from './PolicyTemplates'
import { QueryError } from './QueryError'
import { RLSCodeEditor } from './RLSCodeEditor'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { IStandaloneCodeEditor } from '@/components/interfaces/SQLEditor/SQLEditor.types'
import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -48,7 +48,7 @@ import { useDatabasePolicyUpdateMutation } from '@/data/database-policies/databa
import { databasePoliciesKeys } from '@/data/database-policies/keys'
import { QueryResponseError, useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useConfirmOnClose } from '@/hooks/ui/useConfirmOnClose'
@@ -375,7 +375,6 @@ export const PolicyEditorPanel = memo(function ({
}}
>
<RLSCodeEditor
- disableTabToUsePlaceholder
readOnly={!canUpdatePolicies}
id="rls-exp-one-editor"
placeholder={
@@ -439,7 +438,6 @@ export const PolicyEditorPanel = memo(function ({
}}
>
<RLSCodeEditor
- disableTabToUsePlaceholder
readOnly={!canUpdatePolicies}
id="rls-exp-two-editor"
placeholder="-- Provide a SQL expression for the with check statement"
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyRow.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyRow.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.types.ts b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.types.ts
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.types.ts
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.types.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils.test.ts b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils.test.ts
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils.test.ts
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils.test.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils.ts b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils.ts
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils.ts
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
similarity index 92%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
index fc4df51adea..36ef1d8dc4d 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRowHeader.tsx
@@ -56,24 +56,26 @@ export const PolicyTableRowHeader = ({
>
<Table strokeWidth={1.5} size={16} className="text-foreground-muted" />
<CardTitle className="m-0 normal-case">{table.name}</CardTitle>
+ </EditorTablePageLink>
+ <div className="flex items-center gap-x-1">
{!table.rls_enabled && (
- <Badge variant="warning" className="shrink-0">
+ <Badge variant="warning" className="h-5">
RLS Disabled
</Badge>
)}
{!isLoadingApiAccess && !hasApiAccess && (
- <Badge variant="default" className="shrink-0">
+ <Badge variant="default" className="h-5">
API Disabled
</Badge>
)}
- </EditorTablePageLink>
- {isTableLocked && (
- <Badge>
- <span className="flex gap-2 items-center text-xs uppercase text-foreground-lighter">
- <Lock size={12} /> Locked
- </span>
- </Badge>
- )}
+ {isTableLocked && (
+ <Badge className="h-5">
+ <span className="flex gap-x-1 items-center text-foreground-lighter">
+ <Lock size={10} /> Locked
+ </span>
+ </Badge>
+ )}
+ </div>
</div>
{!isTableLocked && (
<div className="flex-1">
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/index.tsx
similarity index 96%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
rename to apps/studio/components/interfaces/Database/Policies/PolicyTableRow/index.tsx
index 05c2d9df9c7..2e60637e59b 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
+++ b/apps/studio/components/interfaces/Database/Policies/PolicyTableRow/index.tsx
@@ -12,7 +12,7 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { usePoliciesData } from '../PoliciesDataContext'
@@ -21,7 +21,7 @@ import type { PolicyTable } from './PolicyTableRow.types'
import type { Policy } from './PolicyTableRow.utils'
import { getTableAdmonitionMessage, getTableDataApiStatus } from './PolicyTableRow.utils'
import { PolicyTableRowHeader } from './PolicyTableRowHeader'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { useTableApiAccessQuery } from '@/data/privileges/table-api-access-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -94,7 +94,9 @@ const PolicyTableRowComponent = ({
return (
<Card className={cn(isPubliclyReadable && 'border-warning-500')}>
- <CardHeader className={cn('py-3 px-4', status !== 'secured' && 'border-b-0')}>
+ <CardHeader
+ className={cn('py-3 px-4', status !== 'secured' && status !== 'unknown' && 'border-b-0')}
+ >
<PolicyTableRowHeader
table={table}
isLocked={isLocked}
diff --git a/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx b/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
index 5402e33184e..32b20038a7c 100644
--- a/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
+++ b/apps/studio/components/interfaces/Database/Privileges/PrivilegesHead.tsx
@@ -8,7 +8,7 @@ import {
SelectValue,
} from 'ui'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
export interface PrivilegesHeadProps {
disabled: boolean
diff --git a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
index 18a52c4062a..556c808c992 100644
--- a/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
+++ b/apps/studio/components/interfaces/Database/ProtectedSchemaWarning.tsx
@@ -10,7 +10,7 @@ import {
DialogTitle,
DialogTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { INTERNAL_SCHEMAS, useIsProtectedSchema } from '@/hooks/useProtectedSchemas'
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
index bc985e144f8..2474a0e9548 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsList.tsx
@@ -22,7 +22,7 @@ import { Input } from 'ui-patterns/DataInputs/Input'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { PublicationSkeleton } from './PublicationSkeleton'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import InformationBox from '@/components/ui/InformationBox'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
index 60b969f3564..05646721e50 100644
--- a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
+++ b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -3,14 +3,14 @@ import { useParams } from 'common'
import { Search } from 'lucide-react'
import { useMemo, useRef, useState } from 'react'
import { Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PublicationTablesSkeleton } from './PublicationSkeleton'
import { PublicationsTableItem } from './PublicationsTableItem'
import { AlertError } from '@/components/ui/AlertError'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
import { useTablesQuery } from '@/data/tables/tables-query'
@@ -113,9 +113,9 @@ export const PublicationsTables = () => {
<TableRow>
<TableHead>Name</TableHead>
<TableHead className="hidden lg:table-cell">Description</TableHead>
- {/*
- We've disabled All tables toggle for publications.
- See https://github.com/supabase/supabase/pull/7233.
+ {/*
+ We've disabled All tables toggle for publications.
+ See https://github.com/supabase/supabase/pull/7233.
*/}
<TableHead />
</TableRow>
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/InferredSQLViewer.tsx b/apps/studio/components/interfaces/Database/RLSTester/InferredSQLViewer.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/RLSTester/InferredSQLViewer.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/InferredSQLViewer.tsx
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx b/apps/studio/components/interfaces/Database/RLSTester/RLSTableCard.tsx
similarity index 75%
rename from apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/RLSTableCard.tsx
index e1a9da41bea..724f8b57cf2 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTableCard.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/RLSTableCard.tsx
@@ -2,20 +2,25 @@ import { Check, ChevronDown, Edit, X } from 'lucide-react'
import { useMemo } from 'react'
import { cn, Collapsible, CollapsibleContent, CollapsibleTrigger, WarningIcon } from 'ui'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { type ParseSQLQueryOperations } from '@/data/misc/parse-query-mutation'
interface RLSTableCardProps {
table: { schema: string; name: string; isRLSEnabled: boolean }
+ operation: ParseSQLQueryOperations
role?: string
policies: Policy[]
+ hasError: boolean
handleSelectEditPolicy: (policy: Policy) => void
}
export const RLSTableCard = ({
table,
+ operation,
role,
policies,
+ hasError,
handleSelectEditPolicy,
}: RLSTableCardProps) => {
const { schema, name, isRLSEnabled } = table
@@ -37,8 +42,11 @@ export const RLSTableCard = ({
return (
<p>
RLS is enabled but no policies exist for the{' '}
- <code className="text-code-inline">{role}</code> role on this table - no data will be
- returned.
+ <code className="text-code-inline">{role}</code> role on this table -{' '}
+ {operation === 'SELECT'
+ ? 'no data will be returned'
+ : `no data will be ${operation?.toLowerCase()}${operation?.toLowerCase().endsWith('e') ? 'd' : 'ed'}`}
+ .
</p>
)
}
@@ -54,6 +62,7 @@ export const RLSTableCard = ({
</p>
<TableAccessPolicySummary
policies={policies}
+ operation={operation}
handleSelectEditPolicy={handleSelectEditPolicy}
/>
</>
@@ -71,6 +80,7 @@ export const RLSTableCard = ({
</p>
<TableAccessPolicySummary
policies={policies}
+ operation={operation}
handleSelectEditPolicy={handleSelectEditPolicy}
/>
</>
@@ -81,11 +91,14 @@ export const RLSTableCard = ({
<>
<p>
{policies.length} {policies.length > 1 ? 'policies apply' : 'policy applies'} for the{' '}
- <code className="text-code-inline">{role}</code> role on this table. Only rows that match{' '}
- {policies.length > 1 ? 'these conditions' : 'this condition'} are returned.
+ <code className="text-code-inline">{role}</code> role on this table.{' '}
+ {operation === 'SELECT'
+ ? `Only rows that match ${policies.length > 1 ? 'these conditions' : 'this condition'} are returned.`
+ : `The ${operation} operation will only be successful if the conditions are matched.`}
</p>
<TableAccessPolicySummary
policies={policies}
+ operation={operation}
handleSelectEditPolicy={handleSelectEditPolicy}
/>
</>
@@ -97,6 +110,7 @@ export const RLSTableCard = ({
falseOnlyPolicy,
policies,
role,
+ operation,
handleSelectEditPolicy,
])
@@ -109,7 +123,7 @@ export const RLSTableCard = ({
<div className="flex items-center gap-x-2">
{!isRLSEnabled ? (
<WarningIcon />
- ) : noPolicies || falseOnlyPolicy ? (
+ ) : (hasError && operation === 'INSERT') || noPolicies || falseOnlyPolicy ? (
<X size={16} className="text-destructive" />
) : (
<Check size={16} className="text-brand" />
@@ -120,18 +134,20 @@ export const RLSTableCard = ({
</div>
</div>
<div className="flex items-center gap-x-2">
- <p
- className={cn(
- 'text-xs text-foreground-light w-max',
- !isRLSEnabled && 'text-foreground'
- )}
- >
- {noPolicies || falseOnlyPolicy
- ? 'Returns no rows'
- : !isRLSEnabled || !!trueOnlyPolicy
- ? 'Returns all rows'
- : null}
- </p>
+ {operation === 'SELECT' && (
+ <p
+ className={cn(
+ 'text-xs text-foreground-light w-max',
+ !isRLSEnabled && 'text-foreground'
+ )}
+ >
+ {noPolicies || falseOnlyPolicy
+ ? 'Returns no rows'
+ : !isRLSEnabled || !!trueOnlyPolicy
+ ? 'Returns all rows'
+ : null}
+ </p>
+ )}
<ChevronDown className="transition-transform duration-200" strokeWidth={1.5} size={14} />
</div>
</CollapsibleTrigger>
@@ -149,9 +165,11 @@ export const RLSTableCard = ({
const TableAccessPolicySummary = ({
policies,
+ operation,
handleSelectEditPolicy,
}: {
policies: Policy[]
+ operation: ParseSQLQueryOperations
handleSelectEditPolicy: (policy: Policy) => void
}) => {
return (
@@ -165,8 +183,11 @@ const TableAccessPolicySummary = ({
<div>
<p>{policy.name}</p>
<p className="text-foreground-lighter">
- Show rows where:{' '}
- <code className="text-code-inline text-foreground">{policy.definition}</code>
+ {operation === 'SELECT' ? 'Show rows' : `Allow ${operation?.toLocaleLowerCase()}s`}{' '}
+ where:{' '}
+ <code className="text-code-inline text-foreground">
+ {policy.definition ?? policy.check}
+ </code>
</p>
</div>
<ButtonTooltip
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTester.types.ts b/apps/studio/components/interfaces/Database/RLSTester/RLSTester.types.ts
similarity index 77%
rename from apps/studio/components/interfaces/Auth/RLSTester/RLSTester.types.ts
rename to apps/studio/components/interfaces/Database/RLSTester/RLSTester.types.ts
index b7495d6d48f..2948c48f477 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTester.types.ts
+++ b/apps/studio/components/interfaces/Database/RLSTester/RLSTester.types.ts
@@ -1,4 +1,4 @@
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { type User } from '@/data/auth/users-infinite-query'
import { type ParseSQLQueryResponse } from '@/data/misc/parse-query-mutation'
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterEmptyState.tsx b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterEmptyState.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/RLSTester/RLSTesterEmptyState.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/RLSTesterEmptyState.tsx
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.tsx b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.tsx
similarity index 72%
rename from apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.tsx
index 1820acf17a2..12d2a2b8f22 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.tsx
@@ -6,19 +6,21 @@ import {
TabsList_Shadcn_,
TabsTrigger_Shadcn_,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Results } from '../../SQLEditor/UtilityPanel/Results'
import { RLSTableCard } from './RLSTableCard'
import { ParseQueryResults } from './RLSTester.types'
import { deriveRLSTestState } from './RLSTesterResults.utils'
import { useTestQueryRLS } from './useTestQueryRLS'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import { type QueryResponseError } from '@/data/sql/execute-sql-mutation'
interface RLSTesterResultsProps {
results: Object[]
autoLimit: boolean
parseQueryResults: ParseQueryResults
+ executeSqlError: Error | QueryResponseError | null | undefined
handleSelectEditPolicy: (policy: Policy) => void
}
@@ -26,6 +28,7 @@ export const RLSTesterResults = ({
results,
autoLimit,
parseQueryResults,
+ executeSqlError,
handleSelectEditPolicy,
}: RLSTesterResultsProps) => {
const { limit } = useTestQueryRLS()
@@ -34,14 +37,19 @@ export const RLSTesterResults = ({
isServiceRole,
tableWithRLSEnabledButNoPolicies,
tableWithRLSEnabledWithPolicyFalse,
+ tableWithRLSEnabledWithPoliciesDontApply,
noAccessToData,
} = deriveRLSTestState(parseQueryResults)
+ const { operation, role } = parseQueryResults
+ const rlsBlockInsert = executeSqlError && operation === 'INSERT'
+ const noAccess = noAccessToData || rlsBlockInsert
+
return (
<div className="p-5 pt-4">
<div className="flex items-center gap-x-2 mb-2">
<p className="text-sm">Summary</p>
- {noAccessToData ? (
+ {noAccess ? (
<Badge variant="destructive">No access</Badge>
) : (
<Badge variant="success">{results.length > 0 ? 'Can access' : 'Has access'}</Badge>
@@ -53,7 +61,7 @@ export const RLSTesterResults = ({
<TabsTrigger_Shadcn_ value="policies" className="px-2">
Policies applied
</TabsTrigger_Shadcn_>
- <TabsTrigger_Shadcn_ value="data" className="px-2">
+ <TabsTrigger_Shadcn_ value="data" className="px-2" disabled={operation !== 'SELECT'}>
Data preview
</TabsTrigger_Shadcn_>
</TabsList_Shadcn_>
@@ -84,7 +92,13 @@ export const RLSTesterResults = ({
{!isServiceRole &&
(!!tableWithRLSEnabledButNoPolicies ? (
<Admonition showIcon={false} type="default" className="rounded-sm mt-2">
- <p className="mb-0.5!">This user has no access to any rows from this query</p>
+ <p className="mb-0.5! text-foreground">
+ This user{' '}
+ {operation === 'SELECT'
+ ? 'has no access to any rows'
+ : `is unable to ${operation?.toLowerCase()} any rows`}{' '}
+ from this query
+ </p>
<p className="text-foreground-light">
The table{' '}
<code className="text-code-inline">
@@ -98,7 +112,9 @@ export const RLSTesterResults = ({
</Admonition>
) : tableWithRLSEnabledWithPolicyFalse ? (
<Admonition showIcon={false} type="default" className="rounded-sm mt-2">
- <p className="mb-0.5!">This user has no access to any rows from this query</p>
+ <p className="mb-0.5! text-foreground">
+ This user has no access to any rows from this query
+ </p>
<p className="text-foreground-light">
The table{' '}
<code className="text-code-inline">
@@ -111,11 +127,29 @@ export const RLSTesterResults = ({
role.
</p>
</Admonition>
+ ) : rlsBlockInsert &&
+ parseQueryResults.user &&
+ tableWithRLSEnabledWithPoliciesDontApply ? (
+ <Admonition showIcon={false} type="default" className="rounded-sm mt-2">
+ <p className="mb-0.5! text-foreground">
+ This user is unable to {operation?.toLowerCase()} any rows from this query
+ </p>
+ <p className="text-foreground-light">
+ The table{' '}
+ <code className="text-code-inline">
+ {tableWithRLSEnabledWithPoliciesDontApply.schema}.
+ {tableWithRLSEnabledWithPoliciesDontApply.table}
+ </code>{' '}
+ has a policy for the{' '}
+ <code className="text-code-inline break-keep!">{parseQueryResults.role}</code>{' '}
+ role, but its condition wasn't satisfied for this specific request.
+ </p>
+ </Admonition>
) : null)}
{isServiceRole && (
<Admonition showIcon={false} type="default" className="rounded-sm mt-2">
- <p className="mb-0.5!">
+ <p className="mb-0.5! text-foreground">
The <code className="text-code-inline">postgres</code> role has access to all rows
for this query
</p>
@@ -136,8 +170,10 @@ export const RLSTesterResults = ({
<RLSTableCard
key={`${schema}.${table}`}
table={{ schema, name: table, isRLSEnabled }}
- role={parseQueryResults.role}
+ role={role}
+ operation={operation}
policies={tablePolicies}
+ hasError={!!executeSqlError}
handleSelectEditPolicy={handleSelectEditPolicy}
/>
)
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.utils.ts b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.utils.ts
similarity index 80%
rename from apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.utils.ts
rename to apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.utils.ts
index 05977e58eb5..5f0e43025c6 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RLSTesterResults.utils.ts
+++ b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterResults.utils.ts
@@ -8,6 +8,10 @@ export function deriveRLSTestState(parseQueryResults: ParseQueryResults | undefi
const tableWithRLSEnabledWithPolicyFalse = parseQueryResults?.tables.find(
(x) => x.isRLSEnabled && x.tablePolicies.some((y) => y.definition === 'false')
)
+ const tableWithRLSEnabledWithPoliciesDontApply = parseQueryResults?.tables.find(
+ (x) => x.isRLSEnabled && x.tablePolicies.length !== 0
+ )
+
const noAccessToData =
!isServiceRole && (!!tableWithRLSEnabledButNoPolicies || !!tableWithRLSEnabledWithPolicyFalse)
@@ -15,6 +19,7 @@ export function deriveRLSTestState(parseQueryResults: ParseQueryResults | undefi
isServiceRole,
tableWithRLSEnabledButNoPolicies,
tableWithRLSEnabledWithPolicyFalse,
+ tableWithRLSEnabledWithPoliciesDontApply,
noAccessToData,
}
}
diff --git a/apps/studio/components/interfaces/Database/RLSTester/RLSTesterSheet.tsx b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterSheet.tsx
new file mode 100644
index 00000000000..d5bcc5ed0b7
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/RLSTester/RLSTesterSheet.tsx
@@ -0,0 +1,387 @@
+import {
+ acceptUntrustedSql,
+ safeSql,
+ type SafeSqlFragment,
+ type UntrustedSqlFragment,
+} from '@supabase/pg-meta'
+import {
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectLabel,
+ SelectTrigger,
+ SelectValue,
+} from '@ui/components/shadcn/ui/select'
+import { LOCAL_STORAGE_KEYS, useFlag } from 'common'
+import { Code, ExternalLink } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import {
+ Button,
+ DialogSectionSeparator,
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetSection,
+ SheetTitle,
+ SheetTrigger,
+} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { InferredSQLViewer } from './InferredSQLViewer'
+import { type ParseQueryResults } from './RLSTester.types'
+import { RLSTesterEmptyState } from './RLSTesterEmptyState'
+import { RLSTesterResults } from './RLSTesterResults'
+import { RoleSelector } from './RoleSelector'
+import { SandboxManagement } from './SandboxManagement'
+import { UserSelector } from './UserSelector'
+import { UserSqlEditor } from './UserSqlEditor'
+import { useTestQueryRLS, type TestQueryBlockedReason } from './useTestQueryRLS'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
+import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
+import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
+import { useTrack } from '@/lib/telemetry/track'
+import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
+import { PostgresSandboxProvider, usePostgresSandbox } from '@/state/postgres-sandbox/sandbox'
+import { useRoleImpersonationStateSnapshot } from '@/state/role-impersonation-state'
+import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
+
+interface RLSTesterSheetProps {
+ handleSelectEditPolicy: (policy: Policy) => void
+}
+
+export const RLSTesterSheet = (props: RLSTesterSheetProps) => {
+ return (
+ <PostgresSandboxProvider>
+ <RLSTesterSheetContents {...props} />
+ </PostgresSandboxProvider>
+ )
+}
+
+const RLSTesterSheetContents = ({ handleSelectEditPolicy }: RLSTesterSheetProps) => {
+ const track = useTrack()
+ const aiSnap = useAiAssistantStateSnapshot()
+ const { openSidebar } = useSidebarManagerSnapshot()
+ const { setRole } = useRoleImpersonationStateSnapshot()
+ const { startSandbox, status, isSyncing } = usePostgresSandbox()
+
+ const sandboxEnabled = useFlag('rlsTesterSandbox')
+ const sandboxIsStarting = status === 'loading'
+
+ const [open, setOpen] = useState(false)
+ const [selectedOption, setSelectedOption] = useState<'anon' | 'authenticated'>('anon')
+ const [blockedReason, setBlockedReason] = useState<TestQueryBlockedReason>()
+
+ const [format, setFormat] = useState<'sql' | 'lib'>('sql')
+ const [inferredSQL, setInferredSQL] = useState<UntrustedSqlFragment>()
+
+ const [value, setValue] = useState<SafeSqlFragment>(safeSql``)
+ const [results, setResults] = useState<Object[] | null>(null)
+ const [autoLimit, setAutoLimit] = useState(false)
+ const [parseQueryResults, setParseQueryResults] = useState<ParseQueryResults>()
+
+ const {
+ testQuery,
+ inferSQLFromLib,
+ isLoading,
+ isInferring,
+ executeSqlError,
+ parseQueryError,
+ parseClientCodeError,
+ } = useTestQueryRLS()
+ const isErrorDueToRLS =
+ executeSqlError?.message.includes('violates row-level security policy') ?? false
+ const mutationOperation = blockedReason?.type === 'mutation' ? blockedReason.operation : undefined
+
+ const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+ const handleValueChange = (sql: SafeSqlFragment) => {
+ setValue(sql)
+ if (format !== 'lib') return
+
+ if (debounceRef.current !== null) clearTimeout(debounceRef.current)
+ if (!sql) return
+
+ debounceRef.current = setTimeout(() => inferSQLFromLib(sql, setInferredSQL), 1500)
+ }
+
+ const executionCallbacks = {
+ option: selectedOption,
+ acknowledgeMutation: blockedReason?.type === 'mutation',
+ onExecuteSQL: ({ result, isAutoLimit }: { result: Object[] | null; isAutoLimit: boolean }) => {
+ setResults(result)
+ setAutoLimit(isAutoLimit)
+ },
+ onParseQuery: setParseQueryResults,
+ onValidationBlocked: setBlockedReason,
+ }
+
+ const onRunQuery = async () => {
+ setBlockedReason(undefined)
+
+ if (format === 'lib') {
+ if (!inferredSQL) return
+ const blocked = await testQuery({
+ value: acceptUntrustedSql(inferredSQL),
+ ...executionCallbacks,
+ })
+ if (!blocked) track('rls_tester_run_query_clicked', { type: 'inferred' })
+ } else {
+ const blocked = await testQuery({ value, ...executionCallbacks })
+ if (!blocked) track('rls_tester_run_query_clicked', { type: 'raw' })
+ }
+ }
+
+ const assistantSql = format === 'lib' && inferredSQL ? acceptUntrustedSql(inferredSQL) : value
+
+ const getDebugPrompt = ({ includeSql = false }: { includeSql?: boolean } = {}) => {
+ const prompt = `Help me fix my RLS policy based on the attached SQL snippet that gave the following error: \n\n${executeSqlError?.message}\n\nEvaluate if the problem might be query first, before checking my RLS policies.`
+
+ return includeSql ? `${prompt}\n\nSQL Query:\n\`\`\`sql\n${assistantSql}\n\`\`\`` : prompt
+ }
+
+ const onDebugWithAssistant = () => {
+ const prompt = getDebugPrompt()
+ openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
+ aiSnap.newChat({
+ name: 'Debug RLS policies',
+ sqlSnippets: [assistantSql],
+ initialInput: prompt,
+ })
+ setOpen(false)
+ }
+
+ useEffect(() => {
+ setRole({ type: 'postgrest', role: 'anon' })
+ return () => {
+ // Flip back to service role
+ setRole(undefined)
+ }
+ // [Joshen] Intentional - to only reset back to service role when navigating away
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return (
+ <>
+ <Sheet open={open} onOpenChange={setOpen}>
+ <SheetTrigger asChild>
+ <Button variant="default" icon={<Code />}>
+ Test
+ </Button>
+ </SheetTrigger>
+
+ <SheetContent className="w-[600px]! flex flex-col gap-y-0">
+ <SheetHeader>
+ <SheetTitle className="flex items-center gap-x-4">
+ <span>What data can my users access?</span>
+ <FeaturePreviewBadge featureKey={LOCAL_STORAGE_KEYS.UI_PREVIEW_RLS_TESTER} />
+ </SheetTitle>
+ <SheetDescription>
+ See what data a user is allowed to read or modify based on your RLS policies
+ </SheetDescription>
+ </SheetHeader>
+
+ <div className="grow overflow-y-auto flex flex-col">
+ {sandboxEnabled && <SandboxManagement />}
+
+ <SheetSection className="px-0 py-0 border-t">
+ <div className="flex flex-col p-5 pt-4 gap-y-4">
+ <RoleSelector onSelectRole={setSelectedOption} />
+ {selectedOption === 'authenticated' && <UserSelector />}
+ </div>
+
+ <DialogSectionSeparator />
+
+ <div className="flex items-center justify-between px-5 py-2">
+ <p className="text-sm">Query</p>
+ <div className="flex items-center gap-x-2">
+ <Select
+ value={format}
+ onValueChange={(x) => {
+ const newFormat = x as 'sql' | 'lib'
+ setFormat(newFormat)
+ if (newFormat !== 'lib') {
+ setInferredSQL(undefined)
+ if (debounceRef.current !== null) clearTimeout(debounceRef.current)
+ }
+ }}
+ >
+ <SelectTrigger size="tiny">
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectGroup>
+ <SelectLabel>Query format</SelectLabel>
+ <SelectItem value="sql">SQL</SelectItem>
+ <SelectItem value="lib">Client library</SelectItem>
+ </SelectGroup>
+ </SelectContent>
+ </Select>
+ </div>
+ </div>
+
+ <div className="h-40 relative">
+ <UserSqlEditor
+ id="rls-tester"
+ value={value}
+ placeholder={
+ format === 'sql'
+ ? safeSql`select * from table;`
+ : safeSql`SQL will be inferred from client library code`
+ }
+ onChange={handleValueChange}
+ actions={{
+ runQuery: {
+ enabled: open,
+ callback: () => {
+ if (!isInferring && !isLoading) onRunQuery()
+ },
+ },
+ }}
+ />
+ </div>
+ </SheetSection>
+
+ {format === 'lib' && (
+ <div>
+ <DialogSectionSeparator />
+ <InferredSQLViewer sql={inferredSQL} isLoading={isInferring} />
+ </div>
+ )}
+
+ <DialogSectionSeparator />
+
+ {blockedReason?.type === 'multiple-statements' ? (
+ <div className="p-4">
+ <Admonition
+ type="warning"
+ title="Only a single SQL statement is supported"
+ description="Remove any additional statements and run the query again."
+ />
+ </div>
+ ) : blockedReason?.type === 'unsupported-operation' ? (
+ <div className="p-4">
+ <Admonition
+ type="warning"
+ title={`${blockedReason.operation} queries are not supported by the RLS Tester yet`}
+ description="Support for testing UPDATE and DELETE statements will be available soon."
+ />
+ </div>
+ ) : parseQueryError ? (
+ <div className="p-4">
+ <Admonition
+ type="warning"
+ title="Error parsing query"
+ description={parseQueryError.message}
+ />
+ </div>
+ ) : parseClientCodeError ? (
+ <div className="p-4">
+ <Admonition
+ type="warning"
+ title="Error parsing client code"
+ description={parseClientCodeError.message}
+ />
+ </div>
+ ) : executeSqlError && !isErrorDueToRLS ? (
+ <div className="p-4">
+ <Admonition
+ type="warning"
+ title="Error running SQL query"
+ description={executeSqlError.message}
+ actions={[
+ <AiAssistantDropdown
+ key="ai-assistant"
+ label="Ask Assistant"
+ telemetrySource="rls_tester"
+ buildPrompt={() => getDebugPrompt({ includeSql: true })}
+ onOpenAssistant={onDebugWithAssistant}
+ />,
+ ]}
+ />
+ </div>
+ ) : isLoading ? (
+ <div className="p-4">
+ <GenericSkeletonLoader />
+ </div>
+ ) : results === null && !isErrorDueToRLS ? (
+ <RLSTesterEmptyState />
+ ) : !!parseQueryResults ? (
+ <RLSTesterResults
+ results={results ?? []}
+ parseQueryResults={parseQueryResults}
+ autoLimit={autoLimit}
+ executeSqlError={executeSqlError}
+ handleSelectEditPolicy={handleSelectEditPolicy}
+ />
+ ) : null}
+ </div>
+
+ <SheetFooter className="sm:justify-between">
+ <Button asChild variant="default" icon={<ExternalLink />}>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href="https://github.com/orgs/supabase/discussions/45233"
+ >
+ Give feedback
+ </a>
+ </Button>
+ <div className="flex items-center gap-x-2">
+ <Button variant="default" disabled={isLoading} onClick={() => setOpen(false)}>
+ Cancel
+ </Button>
+ <Button
+ variant="primary"
+ loading={isInferring || isLoading}
+ disabled={(format === 'lib' && !inferredSQL) || sandboxIsStarting || isSyncing}
+ onClick={onRunQuery}
+ >
+ Run query
+ </Button>
+ </div>
+ </SheetFooter>
+ </SheetContent>
+ </Sheet>
+
+ <ConfirmationModal
+ visible={!!mutationOperation}
+ variant="warning"
+ size="medium"
+ loading={isLoading}
+ title="Confirm to run this query"
+ confirmLabel="Run query"
+ onConfirm={onRunQuery}
+ onCancel={() => setBlockedReason(undefined)}
+ alert={{
+ title: `This ${mutationOperation} query will run against your actual database`,
+ description: 'Your database may be directly modified as a result. Are you sure?',
+ }}
+ >
+ {sandboxEnabled && (
+ <>
+ <p className="text-sm">
+ We highly recommend using the sandbox to set up an ephemeral database environment for
+ testing insert, update, or delete queries.
+ </p>
+ <Button
+ variant="default"
+ className="mt-2"
+ onClick={() => {
+ startSandbox()
+ setBlockedReason(undefined)
+ }}
+ >
+ Set up sandbox
+ </Button>
+ </>
+ )}
+ </ConfirmationModal>
+ </>
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/RoleSelector.tsx b/apps/studio/components/interfaces/Database/RLSTester/RoleSelector.tsx
similarity index 89%
rename from apps/studio/components/interfaces/Auth/RLSTester/RoleSelector.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/RoleSelector.tsx
index b25aab9d137..0d23453b36b 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/RoleSelector.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/RoleSelector.tsx
@@ -11,7 +11,7 @@ export const RoleSelector = ({ onSelectRole }: RoleSelectorProps) => {
const { role, setRole } = useRoleImpersonationStateSnapshot()
return (
- <FormItemLayout isReactForm={false} label="Test as">
+ <FormItemLayout isReactForm={false} label="Test query as" layout="horizontal">
<RadioGroupStacked defaultValue={role?.role ?? 'anon'}>
<RadioGroupStackedItem
value="anon"
@@ -27,7 +27,7 @@ export const RoleSelector = ({ onSelectRole }: RoleSelectorProps) => {
value="authenticated"
id="authenticated"
label="Authenticated user"
- description="A specific logged in user"
+ description="A logged in user"
onClick={() => {
onSelectRole('authenticated')
}}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx b/apps/studio/components/interfaces/Database/RLSTester/SandboxManagement.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/SandboxManagement.tsx
index 6e367139c36..1200d4d361e 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/SandboxManagement.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/SandboxManagement.tsx
@@ -1,6 +1,6 @@
import { Box, Loader2, LogOut, RefreshCw } from 'lucide-react'
import { Badge, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { usePostgresSandbox } from '@/state/postgres-sandbox/sandbox'
@@ -14,15 +14,15 @@ export const SandboxManagement = () => {
<Admonition
type="default"
layout="horizontal"
- className="min-h-min border-none [&>div>div>div>div>p]:!mb-0"
+ className="min-h-min border-none [&>div>div>div>div>p]:!mb-0 [&>div>div]:gap-x-2"
actions={[
- <Button key="set-up" variant="default" onClick={() => startSandbox()}>
+ <Button key="sandbox" variant="default" onClick={() => startSandbox()}>
Set up sandbox
</Button>,
]}
>
<div className="flex items-center gap-x-2">
- <p className="text-foreground !m-0">Set up sandbox for testing</p>
+ <p className="text-foreground !m-0">Run queries in a sandbox</p>
<Badge variant="success">Recommended</Badge>
</div>
<p className="text-foreground-light !m-0">
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx b/apps/studio/components/interfaces/Database/RLSTester/UserSelector.tsx
similarity index 87%
rename from apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/UserSelector.tsx
index 1d2a88544b2..c949c2f3fe0 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/UserSelector.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/UserSelector.tsx
@@ -12,13 +12,15 @@ import {
CommandInput,
CommandItem,
CommandList,
+ copyToClipboard,
Popover,
PopoverContent,
PopoverTrigger,
ScrollArea,
} from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { User, useUsersInfiniteQuery } from '@/data/auth/users-infinite-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -66,7 +68,27 @@ export const UserSelector = () => {
}
return (
- <FormItemLayout isReactForm={false} label="Select which user to test as">
+ <FormItemLayout
+ isReactForm={false}
+ layout="horizontal"
+ label="Select which user to test as"
+ description={
+ impersonatingUser ? (
+ <p>
+ ID:{' '}
+ <code
+ className="text-code-inline cursor-pointer"
+ onClick={() => {
+ copyToClipboard(impersonatingUser?.id ?? '')
+ toast('Copied ID to clipboard')
+ }}
+ >
+ {impersonatingUser.id}
+ </code>
+ </p>
+ ) : undefined
+ }
+ >
<Popover open={open} onOpenChange={setOpen} modal>
<PopoverTrigger asChild>
<Button
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/UserSqlEditor.tsx b/apps/studio/components/interfaces/Database/RLSTester/UserSqlEditor.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/RLSTester/UserSqlEditor.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/UserSqlEditor.tsx
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.test.tsx b/apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.test.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.test.tsx
rename to apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.test.tsx
index b4c4be6f599..8ee7cda9bc8 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.test.tsx
+++ b/apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.test.tsx
@@ -2,16 +2,16 @@ import type { SafeSqlFragment } from '@supabase/pg-meta'
import { screen } from '@testing-library/react'
import { describe, expect, it, vi } from 'vitest'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import type { ParseQueryResults } from '@/components/interfaces/Auth/RLSTester/RLSTester.types'
-import { RLSTesterResults } from '@/components/interfaces/Auth/RLSTester/RLSTesterResults'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { ParseQueryResults } from '@/components/interfaces/Database/RLSTester/RLSTester.types'
+import { RLSTesterResults } from '@/components/interfaces/Database/RLSTester/RLSTesterResults'
import { render } from '@/tests/helpers'
-vi.mock('@/components/interfaces/Auth/RLSTester/useTestQueryRLS', () => ({
+vi.mock('@/components/interfaces/Database/RLSTester/useTestQueryRLS', () => ({
useTestQueryRLS: () => ({ limit: 100 }),
}))
-vi.mock('@/components/interfaces/Auth/RLSTester/RLSTableCard', () => ({
+vi.mock('@/components/interfaces/Database/RLSTester/RLSTableCard', () => ({
RLSTableCard: () => <div data-testid="rls-table-card" />,
}))
@@ -37,6 +37,7 @@ const makeTable = (
const defaultProps = {
results: [],
autoLimit: false,
+ executeSqlError: undefined,
handleSelectEditPolicy: vi.fn(),
}
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.utils.test.ts b/apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.utils.test.ts
similarity index 96%
rename from apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.utils.test.ts
rename to apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.utils.test.ts
index 2f18105da5e..3dff5da045f 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/RLSTesterResults.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/RLSTester/__tests__/RLSTesterResults.utils.test.ts
@@ -1,9 +1,9 @@
import type { SafeSqlFragment } from '@supabase/pg-meta'
import { describe, expect, it } from 'vitest'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import type { ParseQueryResults } from '@/components/interfaces/Auth/RLSTester/RLSTester.types'
-import { deriveRLSTestState } from '@/components/interfaces/Auth/RLSTester/RLSTesterResults.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { ParseQueryResults } from '@/components/interfaces/Database/RLSTester/RLSTester.types'
+import { deriveRLSTestState } from '@/components/interfaces/Database/RLSTester/RLSTesterResults.utils'
const sql = (s: string) => s as unknown as SafeSqlFragment
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/useTestQueryRLS.utils.test.ts b/apps/studio/components/interfaces/Database/RLSTester/__tests__/useTestQueryRLS.utils.test.ts
similarity index 55%
rename from apps/studio/components/interfaces/Auth/RLSTester/__tests__/useTestQueryRLS.utils.test.ts
rename to apps/studio/components/interfaces/Database/RLSTester/__tests__/useTestQueryRLS.utils.test.ts
index adbfc577685..a5ccadf1c6d 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/__tests__/useTestQueryRLS.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/RLSTester/__tests__/useTestQueryRLS.utils.test.ts
@@ -1,7 +1,10 @@
import { describe, expect, it } from 'vitest'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import { filterTablePolicies } from '@/components/interfaces/Auth/RLSTester/useTestQueryRLS.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import {
+ filterTablePolicies,
+ getTestQueryBlockedReason,
+} from '@/components/interfaces/Database/RLSTester/useTestQueryRLS.utils'
const makePolicy = (overrides: Partial<Policy>): Policy =>
({
@@ -145,3 +148,118 @@ describe('filterTablePolicies', () => {
})
})
})
+
+describe('getTestQueryBlockedReason', () => {
+ const blockedBase = {
+ statementCount: 1,
+ operation: 'SELECT' as const,
+ hasSandbox: false,
+ acknowledgeMutation: false,
+ }
+
+ describe('multiple statements', () => {
+ it('blocks when statementCount is greater than 1', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, statementCount: 2 })).toStrictEqual({
+ type: 'multiple-statements',
+ })
+ })
+
+ it('takes priority over an unsupported operation', () => {
+ expect(
+ getTestQueryBlockedReason({ ...blockedBase, statementCount: 2, operation: 'DELETE' })
+ ).toStrictEqual({ type: 'multiple-statements' })
+ })
+
+ it('takes priority over an unacknowledged mutation', () => {
+ expect(
+ getTestQueryBlockedReason({ ...blockedBase, statementCount: 2, operation: 'INSERT' })
+ ).toStrictEqual({ type: 'multiple-statements' })
+ })
+
+ it('does not block when statementCount is exactly 1', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, statementCount: 1 })).toBeUndefined()
+ })
+
+ it('does not block when statementCount is 0', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, statementCount: 0 })).toBeUndefined()
+ })
+ })
+
+ describe('unsupported operations', () => {
+ it('blocks UPDATE', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, operation: 'UPDATE' })).toStrictEqual({
+ type: 'unsupported-operation',
+ operation: 'UPDATE',
+ })
+ })
+
+ it('blocks DELETE', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, operation: 'DELETE' })).toStrictEqual({
+ type: 'unsupported-operation',
+ operation: 'DELETE',
+ })
+ })
+
+ it('blocks UPDATE even with a sandbox available', () => {
+ expect(
+ getTestQueryBlockedReason({ ...blockedBase, operation: 'UPDATE', hasSandbox: true })
+ ).toStrictEqual({ type: 'unsupported-operation', operation: 'UPDATE' })
+ })
+
+ it('blocks DELETE even when already acknowledged', () => {
+ expect(
+ getTestQueryBlockedReason({
+ ...blockedBase,
+ operation: 'DELETE',
+ acknowledgeMutation: true,
+ })
+ ).toStrictEqual({ type: 'unsupported-operation', operation: 'DELETE' })
+ })
+ })
+
+ describe('INSERT mutation warning', () => {
+ it('blocks an unacknowledged INSERT with no sandbox', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, operation: 'INSERT' })).toStrictEqual({
+ type: 'mutation',
+ operation: 'INSERT',
+ })
+ })
+
+ it('does not block an INSERT when a sandbox is available', () => {
+ expect(
+ getTestQueryBlockedReason({ ...blockedBase, operation: 'INSERT', hasSandbox: true })
+ ).toBeUndefined()
+ })
+
+ it('does not block an INSERT once acknowledged', () => {
+ expect(
+ getTestQueryBlockedReason({
+ ...blockedBase,
+ operation: 'INSERT',
+ acknowledgeMutation: true,
+ })
+ ).toBeUndefined()
+ })
+
+ it('does not require acknowledgement when a sandbox is available', () => {
+ expect(
+ getTestQueryBlockedReason({
+ ...blockedBase,
+ operation: 'INSERT',
+ hasSandbox: true,
+ acknowledgeMutation: false,
+ })
+ ).toBeUndefined()
+ })
+ })
+
+ describe('unblocked operations', () => {
+ it('does not block SELECT', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, operation: 'SELECT' })).toBeUndefined()
+ })
+
+ it('does not block when operation is undefined', () => {
+ expect(getTestQueryBlockedReason({ ...blockedBase, operation: undefined })).toBeUndefined()
+ })
+ })
+})
diff --git a/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.ts b/apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.ts
similarity index 60%
rename from apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.ts
rename to apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.ts
index 91ede81b5a0..c94328db294 100644
--- a/apps/studio/components/interfaces/Auth/RLSTester/useTestQueryRLS.ts
+++ b/apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.ts
@@ -1,14 +1,21 @@
-import { type SafeSqlFragment, type UntrustedSqlFragment } from '@supabase/pg-meta'
+import { safeSql, type SafeSqlFragment, type UntrustedSqlFragment } from '@supabase/pg-meta'
import { useState } from 'react'
import { toast } from 'sonner'
import { checkIfAppendLimitRequired, suffixWithLimit } from '../../SQLEditor/SQLEditor.utils'
import { type ParseQueryResults } from './RLSTester.types'
-import { filterTablePolicies } from './useTestQueryRLS.utils'
+import {
+ filterTablePolicies,
+ getTestQueryBlockedReason,
+ type TestQueryBlockedReason,
+} from './useTestQueryRLS.utils'
import { useParseClientCodeMutation } from '@/data/ai/parse-client-code-mutation'
import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
import { useCheckTableRLSStatusMutation } from '@/data/database/table-check-rls-mutation'
-import { useParseSQLQueryMutation } from '@/data/misc/parse-query-mutation'
+import {
+ useParseSQLQueryMutation,
+ type ParseSQLQueryOperations,
+} from '@/data/misc/parse-query-mutation'
import { useExecuteSqlMutation } from '@/data/sql/execute-sql-mutation'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { wrapWithRoleImpersonation } from '@/lib/role-impersonation'
@@ -19,9 +26,31 @@ import {
useImpersonatedUser,
useRoleImpersonationStateSnapshot,
} from '@/state/role-impersonation-state'
+import { type ResponseError } from '@/types'
const limit = 100
+export type { TestQueryBlockedReason }
+
+// [Joshen] Pre-requisite work for identifying UPDATE / DELETE failures due to RLS - not yet wired
+// in since those operations are currently blocked (see TestQueryBlockedReason's 'unsupported-
+// operation'). Exported so it isn't flagged as unused until the follow-up PR wires it back in.
+export const wrapReturnRowsAffected = (sql: SafeSqlFragment) => {
+ return safeSql`
+ DO $$
+DECLARE
+ row_count integer;
+BEGIN
+ ${sql}${(sql.endsWith(';') ? '' : ';') as SafeSqlFragment}
+ GET DIAGNOSTICS row_count = ROW_COUNT;
+ -- store it somewhere you can read back
+ PERFORM set_config('rls_tester.rows_affected', row_count::text, true);
+END $$;
+
+SELECT current_setting('rls_tester.rows_affected', true);
+`
+}
+
/**
* [Joshen] Testing a SQL query for its RLS access involves 3 async steps
* 0. (Optional) Inferring client library code to SQL query via the AI Assistant
@@ -83,27 +112,41 @@ export const useTestQueryRLS = () => {
onError: () => {},
})
+ /**
+ * Returns true if the query was blocked (multiple statements, or an unacknowledged mutation)
+ * and did not run, false if it ran (successfully or not)
+ */
const testQuery = async ({
value,
option,
+ acknowledgeMutation = false,
onExecuteSQL,
onParseQuery,
+ onValidationBlocked,
}: {
value: SafeSqlFragment
option: 'anon' | 'authenticated'
+ acknowledgeMutation?: boolean
onExecuteSQL: ({
result,
+ operation,
isAutoLimit,
}: {
result: Object[] | null
+ operation: ParseSQLQueryOperations
isAutoLimit: boolean
}) => void
onParseQuery: (results?: ParseQueryResults) => void
- }) => {
- if (!project) return console.error('Project is required')
+ onValidationBlocked: (reason: TestQueryBlockedReason) => void
+ }): Promise<boolean> => {
+ if (!project) {
+ console.error('Project is required')
+ return true
+ }
if (option === 'authenticated' && !user) {
- return toast('Select which user to test as before running the query')
+ toast('Select which user to test as before running the query')
+ return true
}
try {
@@ -114,8 +157,15 @@ export const useTestQueryRLS = () => {
const formattedSql = suffixWithLimit(value, limit)
const data = await parseQuery({ sql: formattedSql })
- if (data.operation !== 'SELECT') {
- return toast('Only SELECT statements are supported with the RLS Tester at the moment')
+ const blockedReason = getTestQueryBlockedReason({
+ statementCount: data.statementCount,
+ operation: data.operation,
+ hasSandbox: !!sandbox,
+ acknowledgeMutation,
+ })
+ if (blockedReason) {
+ onValidationBlocked(blockedReason)
+ return true
}
const formattedTables = data.tables.map((x) => {
@@ -151,39 +201,50 @@ export const useTestQueryRLS = () => {
})
const autoLimit = appendAutoLimit ? limit : undefined
+ // UPDATE/DELETE are blocked above, so wrapReturnRowsAffected isn't wired in here yet -
+ // it's kept for the follow-up PR that adds proper UPDATE/DELETE support
const sql = wrapWithRoleImpersonation(formattedSql, impersonatedRoleState)
- const { result } = sandbox
- ? await sandbox.run({ sql }).catch((e) => {
- setSandboxError(e instanceof Error ? e : new Error(String(e)))
- throw e
- })
- : await executeSql({
- sql,
- autoLimit,
- projectRef: project.ref,
- connectionString: project.connectionString,
- isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRoleState.role),
- isStatementTimeoutDisabled: true,
- handleError: (e) => {
+ try {
+ const { result } = sandbox
+ ? await sandbox.run({ sql }).catch((e) => {
+ setSandboxError(e instanceof Error ? e : new Error(String(e)))
throw e
- },
- queryKey: ['rls-tester'],
- })
- onExecuteSQL({ result, isAutoLimit: !!autoLimit })
+ })
+ : await executeSql({
+ sql,
+ autoLimit,
+ projectRef: project.ref,
+ connectionString: project.connectionString,
+ isRoleImpersonationEnabled: isRoleImpersonationEnabled(impersonatedRoleState.role),
+ isStatementTimeoutDisabled: true,
+ handleError: (e) => {
+ throw e
+ },
+ queryKey: ['rls-tester'],
+ })
- onParseQuery({
- tables,
- operation: data.operation,
- role: role?.role,
- user,
- })
+ onExecuteSQL({ result, operation: data.operation, isAutoLimit: !!autoLimit })
+ onParseQuery({ tables, operation: data.operation, role: role?.role, user })
+ } catch (error) {
+ const isRLSInsertError = Boolean(
+ (error as ResponseError)?.message?.includes('new row violates row-level security policy')
+ )
+ onExecuteSQL({ result: null, operation: data.operation, isAutoLimit: false })
+ if (isRLSInsertError) {
+ onParseQuery({ tables, operation: data.operation, role: role?.role, user })
+ } else {
+ onParseQuery(undefined)
+ }
+ }
} catch (error) {
- onExecuteSQL({ result: null, isAutoLimit: false })
+ onExecuteSQL({ result: null, operation: undefined, isAutoLimit: false })
onParseQuery(undefined)
} finally {
setIsLoading(false)
}
+
+ return false
}
return {
diff --git a/apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.utils.ts b/apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.utils.ts
new file mode 100644
index 00000000000..b0e698dc43b
--- /dev/null
+++ b/apps/studio/components/interfaces/Database/RLSTester/useTestQueryRLS.utils.ts
@@ -0,0 +1,56 @@
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { ParseSQLQueryResponse } from '@/data/misc/parse-query-mutation'
+
+export type TestQueryBlockedReason =
+ | { type: 'multiple-statements' }
+ | { type: 'unsupported-operation'; operation: 'UPDATE' | 'DELETE' }
+ | { type: 'mutation'; operation: 'INSERT' }
+
+/**
+ * Decides whether a query should be blocked from running, and why. Checked in this order:
+ * multiple statements first (regardless of operation), then unsupported operations (UPDATE/
+ * DELETE aren't testable yet - RLS blocks them silently instead of raising an error), then
+ * INSERT mutations against the real database that haven't been acknowledged yet.
+ */
+export function getTestQueryBlockedReason({
+ statementCount,
+ operation,
+ hasSandbox,
+ acknowledgeMutation,
+}: {
+ statementCount: number
+ operation: ParseSQLQueryResponse['operation']
+ hasSandbox: boolean
+ acknowledgeMutation: boolean
+}): TestQueryBlockedReason | undefined {
+ if (statementCount > 1) return { type: 'multiple-statements' }
+ if (operation === 'UPDATE' || operation === 'DELETE') {
+ return { type: 'unsupported-operation', operation }
+ }
+ if (operation === 'INSERT' && !hasSandbox && !acknowledgeMutation) {
+ return { type: 'mutation', operation }
+ }
+ return undefined
+}
+
+export function filterTablePolicies({
+ policies,
+ schema,
+ table,
+ role,
+ operation,
+}: {
+ policies: Policy[]
+ schema: string
+ table: string
+ role: string | undefined
+ operation: ParseSQLQueryResponse['operation']
+}): Policy[] {
+ return policies.filter(
+ (x) =>
+ x.schema === schema &&
+ x.table === table &&
+ (x.roles.includes(role ?? '') || (x.roles.length === 1 && x.roles[0] === 'public')) &&
+ (x.command === 'ALL' || x.command === operation)
+ )
+}
diff --git a/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx b/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx
index 0fddb5a6b18..11bcb9ece73 100644
--- a/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DeleteDestination.tsx
@@ -24,8 +24,8 @@ export const DeleteDestination = ({
confirmLabel={isLoading ? 'Deleting...' : `Delete destination`}
confirmPlaceholder="Type in name of destination"
confirmString={name ?? 'Unknown'}
- text={`This will delete the destination "${name}".`}
- alert={{ title: 'You cannot recover this destination once deleted.' }}
+ text={`This will delete the destination "${name}" and stop its replication pipeline.`}
+ alert={{ title: 'You cannot recover this destination or pipeline once deleted.' }}
onCancel={() => setVisible(!visible)}
onConfirm={onDelete}
/>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
index 3fe1f083c9a..f516a8ba8ec 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/AnalyticsBucket.utils.ts
@@ -14,6 +14,11 @@ export type AnalyticsBucketValidationIssue = {
message: string
}
+type AnalyticsBucketValidationOptions = {
+ secretsOptional?: boolean
+ storedS3AccessKeyId?: string
+}
+
// Fields that are always required regardless of the namespace / access key selections.
const ANALYTICS_BUCKET_REQUIRED_FIELDS: AnalyticsBucketValidationIssue[] = [
{ path: 'warehouseName', message: 'Bucket is required' },
@@ -22,9 +27,13 @@ const ANALYTICS_BUCKET_REQUIRED_FIELDS: AnalyticsBucketValidationIssue[] = [
]
export const getAnalyticsBucketValidationIssues = (
- data: Pick<DestinationPanelSchemaType, AnalyticsBucketFieldPath>
+ data: Pick<DestinationPanelSchemaType, AnalyticsBucketFieldPath>,
+ options: AnalyticsBucketValidationOptions = {}
): AnalyticsBucketValidationIssue[] => {
- const issues = ANALYTICS_BUCKET_REQUIRED_FIELDS.filter(({ path }) => !data[path]?.trim().length)
+ const requiredFields = options.secretsOptional
+ ? ANALYTICS_BUCKET_REQUIRED_FIELDS.filter(({ path }) => path !== 's3AccessKeyId')
+ : ANALYTICS_BUCKET_REQUIRED_FIELDS
+ const issues = requiredFields.filter(({ path }) => !data[path]?.trim().length)
const isCreatingNewNamespace = data.namespace === CREATE_NEW_NAMESPACE
const hasValidNamespace =
@@ -39,8 +48,27 @@ export const getAnalyticsBucketValidationIssues = (
)
}
+ if (
+ options.secretsOptional &&
+ data.s3SecretAccessKey?.trim().length &&
+ !data.s3AccessKeyId?.trim().length
+ ) {
+ issues.push({ path: 's3AccessKeyId', message: 'S3 Access Key ID is required' })
+ }
+
+ const currentS3AccessKeyId = data.s3AccessKeyId?.trim()
+ const storedS3AccessKeyId = options.storedS3AccessKeyId?.trim()
+ const hasChangedStoredS3AccessKey =
+ options.secretsOptional &&
+ !!currentS3AccessKeyId &&
+ currentS3AccessKeyId !== storedS3AccessKeyId
+
// Creating a new key generates the secret later, so only require it for existing keys.
- if (data.s3AccessKeyId !== CREATE_NEW_KEY && !data.s3SecretAccessKey?.trim().length) {
+ if (
+ data.s3AccessKeyId !== CREATE_NEW_KEY &&
+ (!options.secretsOptional || hasChangedStoredS3AccessKey) &&
+ !data.s3SecretAccessKey?.trim().length
+ ) {
issues.push({ path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' })
}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
index ffb4ce2ecd7..1c744ce031b 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/AnalyticsBucket/Fields.tsx
@@ -16,11 +16,15 @@ import {
SelectTrigger,
WarningIcon,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import { CREATE_NEW_KEY, CREATE_NEW_NAMESPACE } from '../DestinationForm.constants'
+import {
+ CREATE_NEW_KEY,
+ CREATE_NEW_NAMESPACE,
+ STORED_SECRET_PLACEHOLDER,
+} from '../DestinationForm.constants'
import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
import { InlineLink } from '@/components/ui/InlineLink'
import { useAPIKeys } from '@/data/api-keys/api-keys-query'
@@ -38,12 +42,27 @@ import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
* Ideal scenario: Just select an access key ID, we then apply the secret access key in the PATCH request, so FE has no
* context of the secret access key at any point
*/
+const getS3AccessKeyTriggerLabel = ({
+ value,
+ editMode,
+}: {
+ value: string | undefined
+ editMode: boolean
+}) => {
+ if (value === CREATE_NEW_KEY) return 'Create a new key'
+ if (!value) return editMode ? STORED_SECRET_PLACEHOLDER : 'Select an access key ID'
+
+ return value
+}
+
export const AnalyticsBucketFields = ({
form,
+ editMode,
setIsFormInteracting,
onSelectNewBucket,
}: {
form: UseFormReturn<DestinationPanelSchemaType>
+ editMode: boolean
setIsFormInteracting: (value: boolean) => void
onSelectNewBucket: () => void
}) => {
@@ -262,19 +281,23 @@ export const AnalyticsBucketFields = ({
layout="horizontal"
label="Catalog Token"
description={
- <>
- Automatically retrieved from your project's{' '}
- <InlineLink href={`/project/${projectRef}/settings/api-keys`}>
- service role key
- </InlineLink>
- </>
+ editMode ? (
+ 'Stored catalog token is hidden and kept automatically.'
+ ) : (
+ <>
+ Automatically retrieved from your project's{' '}
+ <InlineLink href={`/project/${projectRef}/settings/api-keys`}>
+ service role key
+ </InlineLink>
+ </>
+ )
}
>
<PasswordInput
disabled
value={field.value}
type={showCatalogToken ? 'text' : 'password'}
- placeholder="Auto-populated"
+ placeholder={editMode ? STORED_SECRET_PLACEHOLDER : 'Auto-populated'}
actions={
serviceApiKey ? (
<div className="flex items-center justify-center">
@@ -356,11 +379,7 @@ export const AnalyticsBucketFields = ({
<FormControl>
<Select value={field.value} onValueChange={field.onChange}>
<SelectTrigger>
- {field.value === CREATE_NEW_KEY
- ? 'Create a new key'
- : (field.value ?? '').length === 0
- ? 'Select an access key ID'
- : field.value}
+ {getS3AccessKeyTriggerLabel({ value: field.value, editMode })}
</SelectTrigger>
<SelectContent>
<SelectGroup>
@@ -392,14 +411,20 @@ export const AnalyticsBucketFields = ({
layout="horizontal"
label="S3 Secret Access Key"
className="relative"
- description="The secret key corresponding to your selected access key ID."
+ description={
+ editMode
+ ? 'Stored secret access key is hidden. Enter a new secret to replace it.'
+ : 'The secret key corresponding to your selected access key ID.'
+ }
>
<FormControl>
<Input
{...field}
type={showSecretAccessKey ? 'text' : 'password'}
value={field.value ?? ''}
- placeholder="Provide the secret access key"
+ placeholder={
+ editMode ? STORED_SECRET_PLACEHOLDER : 'Provide the secret access key'
+ }
/>
</FormControl>
<Button
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
index 717c51ddc89..dc3a7a78672 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/BigQuery.utils.ts
@@ -14,6 +14,11 @@ const BIGQUERY_REQUIRED_FIELDS: { path: BigQueryFieldPath; message: string }[] =
]
export const getBigQueryValidationIssues = (
- data: Pick<DestinationPanelSchemaType, BigQueryFieldPath>
+ data: Pick<DestinationPanelSchemaType, BigQueryFieldPath>,
+ options: { secretsOptional?: boolean } = {}
): BigQueryValidationIssue[] =>
- BIGQUERY_REQUIRED_FIELDS.filter(({ path }) => !data[path]?.trim().length)
+ BIGQUERY_REQUIRED_FIELDS.filter(({ path }) => {
+ if (options.secretsOptional && path === 'serviceAccountKey') return false
+
+ return !data[path]?.trim().length
+ })
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
index 96955cf7615..ec22267509b 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx
@@ -2,9 +2,16 @@ import type { UseFormReturn } from 'react-hook-form'
import { FormControl, FormField, Input, TextArea } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { STORED_SECRET_PLACEHOLDER } from '../DestinationForm.constants'
import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
-export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
+export const BigQueryFields = ({
+ form,
+ editMode,
+}: {
+ form: UseFormReturn<DestinationPanelSchemaType>
+ editMode: boolean
+}) => {
return (
<div className="flex flex-col gap-y-6 p-5">
<p className="text-sm font-medium text-foreground">BigQuery settings</p>
@@ -48,14 +55,22 @@ export const BigQueryFields = ({ form }: { form: UseFormReturn<DestinationPanelS
<FormItemLayout
layout="horizontal"
label="Service Account Key"
- description="Service account credentials JSON for authenticating with BigQuery"
+ description={
+ editMode
+ ? 'Stored credentials are hidden. Enter new credentials to replace them.'
+ : 'Service account credentials JSON for authenticating with BigQuery'
+ }
>
<FormControl>
<TextArea
{...field}
rows={5}
maxLength={5000}
- placeholder='{"type": "service_account", "project_id": "...", ...}'
+ placeholder={
+ editMode
+ ? STORED_SECRET_PLACEHOLDER
+ : '{"type": "service_account", "project_id": "...", ...}'
+ }
className="font-mono text-xs"
/>
</FormControl>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.constants.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.constants.ts
index c94f883cd0e..8cadf85301e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.constants.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.constants.ts
@@ -3,3 +3,5 @@ export const CREATE_NEW_KEY = 'create-new'
// Hardcoded value for `namespace` field in the form to indicate creating a new namespace
export const CREATE_NEW_NAMESPACE = 'create-new-namespace'
+
+export const STORED_SECRET_PLACEHOLDER = '••••••••••••••••'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
index 0493ac3a1c3..a97b2120626 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DestinationForm.utils.test.ts
@@ -71,12 +71,12 @@ const baseSnowflakeFormData = {
ducklakeS3UseSsl: undefined,
ducklakeMetadataSchema: undefined,
snowflakeAccountId: ' MYORG-MYACCOUNT ',
- snowflakeUser: ' ETL_USER ',
+ snowflakeUser: ' PIPELINES_USER ',
snowflakePrivateKey: '-----BEGIN PRIVATE KEY-----\nabc\n-----END PRIVATE KEY-----',
snowflakePrivateKeyPassphrase: ' secret passphrase ',
snowflakeDatabase: ' ANALYTICS ',
snowflakeSchema: ' PUBLIC ',
- snowflakeRole: ' ETL_ROLE ',
+ snowflakeRole: ' PIPELINES_ROLE ',
}
describe('DestinationForm.utils DuckLake', () => {
@@ -157,6 +157,42 @@ describe('DestinationForm.utils DuckLake', () => {
])
})
+ it('allows omitted DuckLake secrets in edit mode', () => {
+ const issues = getDucklakeValidationIssues(
+ {
+ ducklakeCatalogUrl: '',
+ ducklakeDataPath: 's3://bucket/path',
+ ducklakeS3AccessKeyId: '',
+ ducklakeS3SecretAccessKey: '',
+ ducklakeS3Region: 'eu-west-1',
+ ducklakeS3Endpoint: 's3.example.com',
+ ducklakeMetadataSchema: '',
+ },
+ { secretsOptional: true }
+ )
+
+ expect(issues).toEqual([])
+ })
+
+ it('requires both DuckLake S3 key fields when replacing one secret in edit mode', () => {
+ const issues = getDucklakeValidationIssues(
+ {
+ ducklakeCatalogUrl: '',
+ ducklakeDataPath: 's3://bucket/path',
+ ducklakeS3AccessKeyId: 'access-key',
+ ducklakeS3SecretAccessKey: '',
+ ducklakeS3Region: 'eu-west-1',
+ ducklakeS3Endpoint: 's3.example.com',
+ ducklakeMetadataSchema: '',
+ },
+ { secretsOptional: true }
+ )
+
+ expect(issues).toEqual([
+ { path: 'ducklakeS3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+ ])
+ })
+
it('treats whitespace-only values as missing', () => {
const issues = getDucklakeValidationIssues({
ducklakeCatalogUrl: ' ',
@@ -333,7 +369,7 @@ describe('DestinationForm.utils Snowflake', () => {
expect(config).toEqual({
snowflake: {
accountId: 'MYORG-MYACCOUNT',
- user: 'ETL_USER',
+ user: 'PIPELINES_USER',
privateKey: '-----BEGIN PRIVATE KEY-----\nabc\n-----END PRIVATE KEY-----',
privateKeyPassphrase: undefined,
database: 'ANALYTICS',
@@ -358,12 +394,12 @@ describe('DestinationForm.utils Snowflake', () => {
expect(config).toEqual({
snowflake: {
accountId: 'MYORG-MYACCOUNT',
- user: 'ETL_USER',
+ user: 'PIPELINES_USER',
privateKey: '-----BEGIN PRIVATE KEY-----\nabc\n-----END PRIVATE KEY-----',
privateKeyPassphrase: ' secret passphrase ',
database: 'ANALYTICS',
schema: 'PUBLIC',
- role: 'ETL_ROLE',
+ role: 'PIPELINES_ROLE',
},
})
expect(createS3AccessKey).not.toHaveBeenCalled()
@@ -387,6 +423,21 @@ describe('DestinationForm.utils Snowflake', () => {
{ path: 'snowflakeSchema', message: 'Schema is required' },
])
})
+
+ it('allows an omitted Snowflake private key in edit mode', () => {
+ const issues = getSnowflakeValidationIssues(
+ {
+ snowflakeAccountId: 'MYORG-MYACCOUNT',
+ snowflakeUser: 'PIPELINES_USER',
+ snowflakePrivateKey: '',
+ snowflakeDatabase: 'ANALYTICS',
+ snowflakeSchema: 'PUBLIC',
+ },
+ { secretsOptional: true }
+ )
+
+ expect(issues).toEqual([])
+ })
})
describe('DestinationForm.utils BigQuery', () => {
@@ -427,6 +478,19 @@ describe('DestinationForm.utils BigQuery', () => {
expect(issues).toEqual([])
})
+
+ it('allows an omitted BigQuery service account key in edit mode', () => {
+ const issues = getBigQueryValidationIssues(
+ {
+ projectId: 'my-project',
+ datasetId: 'my_dataset',
+ serviceAccountKey: '',
+ },
+ { secretsOptional: true }
+ )
+
+ expect(issues).toEqual([])
+ })
})
describe('DestinationForm.utils Analytics Bucket', () => {
@@ -494,6 +558,56 @@ describe('DestinationForm.utils Analytics Bucket', () => {
expect(issues).toEqual([])
})
+ it('allows omitted S3 key fields in edit mode', () => {
+ const issues = getAnalyticsBucketValidationIssues(
+ {
+ warehouseName: 'bucket',
+ namespace: 'analytics',
+ newNamespaceName: '',
+ s3Region: 'us-east-1',
+ s3AccessKeyId: '',
+ s3SecretAccessKey: '',
+ },
+ { secretsOptional: true }
+ )
+
+ expect(issues).toEqual([])
+ })
+
+ it('allows an omitted S3 secret for an unchanged Analytics Bucket key in edit mode', () => {
+ const issues = getAnalyticsBucketValidationIssues(
+ {
+ warehouseName: 'bucket',
+ namespace: 'analytics',
+ newNamespaceName: '',
+ s3Region: 'us-east-1',
+ s3AccessKeyId: 'stored-key',
+ s3SecretAccessKey: '',
+ },
+ { secretsOptional: true, storedS3AccessKeyId: 'stored-key' }
+ )
+
+ expect(issues).toEqual([])
+ })
+
+ it('requires an S3 secret when replacing an Analytics Bucket key in edit mode', () => {
+ const issues = getAnalyticsBucketValidationIssues(
+ {
+ warehouseName: 'bucket',
+ namespace: 'analytics',
+ newNamespaceName: '',
+ s3Region: 'us-east-1',
+ s3AccessKeyId: 'new-key',
+ s3SecretAccessKey: '',
+ },
+ { secretsOptional: true, storedS3AccessKeyId: 'stored-key' }
+ )
+
+ expect(issues).toEqual([
+ { path: 's3SecretAccessKey', message: 'S3 Secret Access Key is required' },
+ ])
+ })
+
it('returns no issues for a complete configuration', () => {
const issues = getAnalyticsBucketValidationIssues({
warehouseName: 'bucket',
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
index 881222f25eb..5ce2046942f 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/DuckLake.utils.ts
@@ -2,7 +2,7 @@ import { type DestinationPanelSchemaType } from '../DestinationForm.schema'
import { DUCKLAKE_MODE_SUPABASE } from './DuckLake.constants'
export type DucklakeApiConfig = {
- catalog_url: string
+ catalog_url?: string
data_path: string
pool_size?: number
s3_access_key_id?: string
@@ -69,6 +69,12 @@ const DUCKLAKE_CUSTOM_REQUIRED_FIELDS: DucklakeValidationIssue[] = [
{ path: 'ducklakeS3Endpoint', message: 'S3 Endpoint is required' },
]
+const DUCKLAKE_CUSTOM_SECRET_FIELDS = new Set<DucklakeFieldPath>([
+ 'ducklakeCatalogUrl',
+ 'ducklakeS3AccessKeyId',
+ 'ducklakeS3SecretAccessKey',
+])
+
// Catalog metadata schema is optional, but must be a valid Postgres identifier when set.
const METADATA_SCHEMA_PATTERN = /^[A-Za-z0-9_]+$/
const METADATA_SCHEMA_ISSUE: DucklakeValidationIssue = {
@@ -82,7 +88,8 @@ const getMissingRequiredFieldIssues = (
) => requiredFields.filter(({ path }) => !data[path]?.trim().length)
export const getDucklakeValidationIssues = (
- data: DucklakeValidationData
+ data: DucklakeValidationData,
+ options: { secretsOptional?: boolean } = {}
): DucklakeValidationIssue[] => {
if (data.ducklakeMode === DUCKLAKE_MODE_SUPABASE) {
const issues = getMissingRequiredFieldIssues(data, DUCKLAKE_SUPABASE_REQUIRED_FIELDS)
@@ -94,7 +101,32 @@ export const getDucklakeValidationIssues = (
return issues
}
- const issues = getMissingRequiredFieldIssues(data, DUCKLAKE_CUSTOM_REQUIRED_FIELDS)
+ const requiredFields = options.secretsOptional
+ ? DUCKLAKE_CUSTOM_REQUIRED_FIELDS.filter(({ path }) => !DUCKLAKE_CUSTOM_SECRET_FIELDS.has(path))
+ : DUCKLAKE_CUSTOM_REQUIRED_FIELDS
+ const issues = getMissingRequiredFieldIssues(data, requiredFields)
+
+ if (
+ options.secretsOptional &&
+ data.ducklakeS3SecretAccessKey?.trim().length &&
+ !data.ducklakeS3AccessKeyId?.trim().length
+ ) {
+ issues.push({
+ path: 'ducklakeS3AccessKeyId',
+ message: 'S3 Access Key ID is required',
+ })
+ }
+
+ if (
+ options.secretsOptional &&
+ data.ducklakeS3AccessKeyId?.trim().length &&
+ !data.ducklakeS3SecretAccessKey?.trim().length
+ ) {
+ issues.push({
+ path: 'ducklakeS3SecretAccessKey',
+ message: 'S3 Secret Access Key is required',
+ })
+ }
// Format checks only apply once a value is present; missing values are already flagged above.
if (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
index ad1648eaa9c..21c32a6ca44 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -22,10 +22,11 @@ import {
SelectTrigger,
WarningIcon,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { STORED_SECRET_PLACEHOLDER } from '../DestinationForm.constants'
import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
import {
DUCKLAKE_MODE_CUSTOM,
@@ -358,7 +359,13 @@ const DuckLakeSupabaseFields = ({ form }: { form: UseFormReturn<DestinationPanel
)
}
-const DuckLakeCustomFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
+const DuckLakeCustomFields = ({
+ form,
+ editMode,
+}: {
+ form: UseFormReturn<DestinationPanelSchemaType>
+ editMode: boolean
+}) => {
const [showCatalogUrl, setShowCatalogUrl] = useState(false)
const [showSecretAccessKey, setShowSecretAccessKey] = useState(false)
@@ -379,13 +386,21 @@ const DuckLakeCustomFields = ({ form }: { form: UseFormReturn<DestinationPanelSc
<FormItemLayout
layout="horizontal"
label="Catalog URL"
- description="A PostgreSQL connection string for the DuckLake catalog"
+ description={
+ editMode
+ ? 'Stored catalog URL is hidden. Enter a new URL to replace it.'
+ : 'A PostgreSQL connection string for the DuckLake catalog'
+ }
>
<FormControl>
<PasswordInput
value={field.value ?? ''}
type={showCatalogUrl ? 'text' : 'password'}
- placeholder="postgres://user:pass@host:5432/ducklake_catalog"
+ placeholder={
+ editMode
+ ? STORED_SECRET_PLACEHOLDER
+ : 'postgres://user:pass@host:5432/ducklake_catalog'
+ }
onChange={(event) => field.onChange(event.target.value)}
actions={
<div className="flex items-center justify-center">
@@ -462,10 +477,18 @@ const DuckLakeCustomFields = ({ form }: { form: UseFormReturn<DestinationPanelSc
<FormItemLayout
layout="horizontal"
label="S3 Access Key ID"
- description="Required access key ID for the object storage provider"
+ description={
+ editMode
+ ? 'Stored access key ID is hidden. Enter a new key ID to replace it.'
+ : 'Required access key ID for the object storage provider'
+ }
>
<FormControl>
- <Input {...field} placeholder="my-access-key" value={field.value ?? ''} />
+ <Input
+ {...field}
+ placeholder={editMode ? STORED_SECRET_PLACEHOLDER : 'my-access-key'}
+ value={field.value ?? ''}
+ />
</FormControl>
</FormItemLayout>
)}
@@ -478,14 +501,18 @@ const DuckLakeCustomFields = ({ form }: { form: UseFormReturn<DestinationPanelSc
<FormItemLayout
layout="horizontal"
label="S3 Secret Access Key"
- description="Required secret access key for the object storage provider"
+ description={
+ editMode
+ ? 'Stored secret access key is hidden. Enter a new secret to replace it.'
+ : 'Required secret access key for the object storage provider'
+ }
className="relative"
>
<FormControl>
<Input
{...field}
type={showSecretAccessKey ? 'text' : 'password'}
- placeholder="my-secret-key"
+ placeholder={editMode ? STORED_SECRET_PLACEHOLDER : 'my-secret-key'}
value={field.value ?? ''}
/>
</FormControl>
@@ -641,7 +668,7 @@ export const DuckLakeFields = ({
{effectiveMode === DUCKLAKE_MODE_SUPABASE ? (
<DuckLakeSupabaseFields form={form} />
) : (
- <DuckLakeCustomFields form={form} />
+ <DuckLakeCustomFields form={form} editMode={editMode} />
)}
</div>
)
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NoDestinationsAvailable.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NoDestinationsAvailable.tsx
index ba0f19e5198..4bbfaa2dc49 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NoDestinationsAvailable.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/NoDestinationsAvailable.tsx
@@ -1,5 +1,7 @@
import { DatabaseZap } from 'lucide-react'
+import { InlineLink } from '@/components/ui/InlineLink'
+
export const NoDestinationsAvailable = () => {
return (
<div className="flex flex-col items-center justify-center h-full px-8 py-16 text-center">
@@ -8,8 +10,9 @@ export const NoDestinationsAvailable = () => {
</div>
<h3 className="text-lg font-medium text-foreground mb-2">No destinations available</h3>
<p className="text-sm text-foreground-light max-w-lg">
- Replication destinations are not currently enabled for this project. Contact support to
- enable real-time replication to external destinations.
+ No Pipelines destinations are available for this project yet. Request{' '}
+ <InlineLink href="https://forms.supabase.com/pg_replicate">alpha access</InlineLink> to use
+ managed replication pipelines.
</p>
</div>
)
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
index 050921886cf..db4c7ae7563 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/PublicationSelection.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { useMemo } from 'react'
import type { UseFormReturn } from 'react-hook-form'
import { FormControl, FormField } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import type { DestinationPanelSchemaType } from './DestinationForm.schema'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Fields.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Fields.tsx
index 4d17fb10313..b5eaccceef8 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Fields.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Fields.tsx
@@ -5,9 +5,16 @@ import { Button, FormControl, FormField, Input, TextArea } from 'ui'
import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { STORED_SECRET_PLACEHOLDER } from '../DestinationForm.constants'
import type { DestinationPanelSchemaType } from '../DestinationForm.schema'
-export const SnowflakeFields = ({ form }: { form: UseFormReturn<DestinationPanelSchemaType> }) => {
+export const SnowflakeFields = ({
+ form,
+ editMode,
+}: {
+ form: UseFormReturn<DestinationPanelSchemaType>
+ editMode: boolean
+}) => {
const [showPrivateKeyPassphrase, setShowPrivateKeyPassphrase] = useState(false)
return (
@@ -118,14 +125,22 @@ export const SnowflakeFields = ({ form }: { form: UseFormReturn<DestinationPanel
<FormItemLayout
layout="horizontal"
label="Private key"
- description="RSA private key PEM contents in PKCS#8 or PKCS#1 format"
+ description={
+ editMode
+ ? 'Stored private key is hidden. Enter a new private key to replace it.'
+ : 'RSA private key PEM contents in PKCS#8 or PKCS#1 format'
+ }
>
<FormControl>
<TextArea
{...field}
rows={8}
maxLength={10000}
- placeholder={'-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----'}
+ placeholder={
+ editMode
+ ? STORED_SECRET_PLACEHOLDER
+ : '-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----'
+ }
value={field.value ?? ''}
className="font-mono text-xs"
/>
@@ -141,13 +156,17 @@ export const SnowflakeFields = ({ form }: { form: UseFormReturn<DestinationPanel
<FormItemLayout
layout="horizontal"
label="Private key passphrase"
- description="Optional passphrase for encrypted private keys"
+ description={
+ editMode
+ ? 'Stored passphrase setting is hidden. Enter a new passphrase to replace it.'
+ : 'Optional passphrase for encrypted private keys'
+ }
>
<FormControl>
<PasswordInput
value={field.value ?? ''}
type={showPrivateKeyPassphrase ? 'text' : 'password'}
- placeholder="Optional"
+ placeholder={editMode ? STORED_SECRET_PLACEHOLDER : 'Optional'}
onChange={(event) => field.onChange(event.target.value)}
actions={
<div className="flex items-center justify-center">
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
index 5f25845435d..fa270daba84 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/Snowflake/Snowflake.utils.ts
@@ -31,6 +31,11 @@ const SNOWFLAKE_REQUIRED_FIELDS: { path: SnowflakeFieldPath; message: string }[]
]
export const getSnowflakeValidationIssues = (
- data: Pick<DestinationPanelSchemaType, SnowflakeFieldPath>
+ data: Pick<DestinationPanelSchemaType, SnowflakeFieldPath>,
+ options: { secretsOptional?: boolean } = {}
): SnowflakeValidationIssue[] =>
- SNOWFLAKE_REQUIRED_FIELDS.filter(({ path }) => !data[path]?.trim().length)
+ SNOWFLAKE_REQUIRED_FIELDS.filter(({ path }) => {
+ if (options.secretsOptional && path === 'snowflakePrivateKey') return false
+
+ return !data[path]?.trim().length
+ })
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationFailuresSection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationFailuresSection.tsx
index 868cbfb6678..2b269102958 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationFailuresSection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationFailuresSection.tsx
@@ -1,5 +1,5 @@
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Badge, Card } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Markdown } from '@/components/interfaces/Markdown'
import type { ValidationFailure } from '@/data/replication/validate-destination-mutation'
@@ -36,7 +36,7 @@ export const ValidationFailuresSection = ({
<p className="text-sm text-foreground-light mb-2!">
{hasCriticalFailures
? `Please fix all required issues below${hasWarnings ? ' and review the others' : ''} before continuing.`
- : 'The following issues were identified, although you may still proceed to create the destination.'}
+ : 'The following issues were identified, although you may still create the pipeline and start replication to the destination.'}
</p>
<Card>
<Accordion type="multiple">
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationWarningsDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationWarningsDialog.tsx
index 818a41ce9c8..51cf36f9663 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationWarningsDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/ValidationWarningsDialog.tsx
@@ -32,13 +32,13 @@ export const ValidationWarningsDialog = ({
<AlertDialogHeader>
<AlertDialogTitle>
{hasWarnings
- ? `Create destination with ${warningCount} ${warningCount === 1 ? 'warning' : 'warnings'}?`
- : 'Confirm to create destination'}
+ ? `Create and start pipeline with ${warningCount} ${warningCount === 1 ? 'warning' : 'warnings'}?`
+ : 'Create and start pipeline?'}
</AlertDialogTitle>
<AlertDialogDescription>
{hasWarnings
? 'Replication can start, but the warnings listed above may affect how some changes are applied downstream. Review them before proceeding.'
- : 'No validation issues were found. Confirm to create the destination and start replication.'}
+ : 'No validation issues were found. Confirm to create the pipeline and start replication to the destination.'}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
@@ -49,7 +49,7 @@ export const ValidationWarningsDialog = ({
loading={isLoading}
onClick={onConfirm}
>
- {hasWarnings ? 'Proceed to create' : 'Create destination'}
+ {hasWarnings ? 'Create and start pipeline anyway' : 'Create and start pipeline'}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
index ec836107817..e1e376e0350 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/index.tsx
@@ -157,21 +157,30 @@ export const DestinationForm = ({
}
if (selectedType === 'BigQuery') {
- getBigQueryValidationIssues(data).forEach(({ path, message }) => {
- addRequiredFieldError(path, message)
- })
+ getBigQueryValidationIssues(data, { secretsOptional: editMode }).forEach(
+ ({ path, message }) => {
+ addRequiredFieldError(path, message)
+ }
+ )
} else if (selectedType === 'Analytics Bucket') {
- getAnalyticsBucketValidationIssues(data).forEach(({ path, message }) => {
+ getAnalyticsBucketValidationIssues(data, {
+ secretsOptional: editMode,
+ storedS3AccessKeyId: editMode ? defaultValues.s3AccessKeyId : undefined,
+ }).forEach(({ path, message }) => {
addRequiredFieldError(path, message)
})
} else if (selectedType === 'DuckLake') {
- getDucklakeValidationIssues(data).forEach(({ path, message }) => {
- addRequiredFieldError(path, message)
- })
+ getDucklakeValidationIssues(data, { secretsOptional: editMode }).forEach(
+ ({ path, message }) => {
+ addRequiredFieldError(path, message)
+ }
+ )
} else if (selectedType === 'Snowflake') {
- getSnowflakeValidationIssues(data).forEach(({ path, message }) => {
- addRequiredFieldError(path, message)
- })
+ getSnowflakeValidationIssues(data, { secretsOptional: editMode }).forEach(
+ ({ path, message }) => {
+ addRequiredFieldError(path, message)
+ }
+ )
}
})
),
@@ -193,13 +202,15 @@ export const DestinationForm = ({
const getSubmitButtonText = () => {
if (editMode) {
- return existingDestination?.enabled ? 'Apply and restart' : 'Apply and start'
+ return existingDestination?.enabled
+ ? 'Apply and restart pipeline'
+ : 'Apply and start pipeline'
} else {
if (hasRunValidation && validationWarnings.length > 0 && !hasValidationFailures) {
- return 'Create and start anyway'
+ return 'Create and start pipeline anyway'
}
- return 'Create and start'
+ return 'Create and start pipeline'
}
}
@@ -317,17 +328,18 @@ export const DestinationForm = ({
<DialogSectionSeparator />
{selectedType === 'BigQuery' && etlEnableBigQuery ? (
- <BigQueryFields form={form} />
+ <BigQueryFields form={form} editMode={editMode} />
) : selectedType === 'Analytics Bucket' && etlEnableIceberg ? (
<AnalyticsBucketFields
form={form}
+ editMode={editMode}
setIsFormInteracting={setIsFormInteracting}
onSelectNewBucket={() => setNewBucketSheetVisible(true)}
/>
) : selectedType === 'DuckLake' && etlEnableDucklake ? (
<DuckLakeFields form={form} editMode={editMode} />
) : selectedType === 'Snowflake' && etlEnableSnowflake ? (
- <SnowflakeFields form={form} />
+ <SnowflakeFields form={form} editMode={editMode} />
) : null}
<DialogSectionSeparator />
@@ -365,7 +377,11 @@ export const DestinationForm = ({
<p className="text-foreground-light text-sm">
{isValidating
? 'Validating destination configuration...'
- : `${editMode ? 'Updating' : 'Creating'} destination...`}
+ : editMode
+ ? existingDestination?.enabled
+ ? 'Updating destination and restarting pipeline...'
+ : 'Updating destination and starting pipeline...'
+ : 'Creating pipeline...'}
</p>
</motion.div>
) : (
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
index e12b66aedcd..4455b0342bb 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/useDestinationForm.ts
@@ -243,16 +243,16 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
PipelineStatusRequestStatus.RestartRequested,
snapshot
)
- await restartPipeline({ projectRef, pipelineId: existingDestination.pipelineId })
toast.success('Settings applied. Restarting the pipeline...')
+ restartPipeline({ projectRef, pipelineId: existingDestination.pipelineId })
} else {
setRequestStatus(
existingDestination.pipelineId,
PipelineStatusRequestStatus.StartRequested,
snapshot
)
- await startPipeline({ projectRef, pipelineId: existingDestination.pipelineId })
toast.success('Settings applied. Starting the pipeline...')
+ startPipeline({ projectRef, pipelineId: existingDestination.pipelineId })
}
onClose()
} else {
@@ -268,13 +268,17 @@ export const useDestinationForm = ({ selectedType }: { selectedType: Destination
)
// Set request status only right before starting, then fire and close
setRequestStatus(pipelineId, PipelineStatusRequestStatus.StartRequested, undefined)
- await startPipeline({ projectRef, pipelineId })
- toast.success('Destination created. Starting the pipeline...')
+ toast.success('Pipeline created. Starting the pipeline...')
+ startPipeline({ projectRef, pipelineId })
onClose()
}
} catch (error) {
- const action = editMode ? 'apply and run' : 'create and start'
- toast.error(`Failed to ${action} destination: ${(error as ResponseError).message}`)
+ const action = editMode
+ ? existingDestination?.enabled
+ ? 'apply changes and restart pipeline'
+ : 'apply changes and start pipeline'
+ : 'create and start pipeline'
+ toast.error(`Failed to ${action}: ${(error as ResponseError).message}`)
}
}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
index 6d17a68bc1b..de5192ff12c 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationPanel.tsx
@@ -15,7 +15,7 @@ import {
SheetTitle,
} from 'ui'
-import { EnableReplicationCallout } from '../EnableReplicationCallout'
+import { EnablePipelinesCallout } from '../EnablePipelinesCallout'
import { PipelineStatusName } from '../Replication.constants'
import { useDestinationInformation } from '../useDestinationInformation'
import { useIsETLPrivateAlpha } from '../useIsETLPrivateAlpha'
@@ -100,11 +100,11 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
<SheetContent size="lg" showClose={false}>
<div className="flex flex-col h-full" tabIndex={-1}>
<SheetHeader>
- <SheetTitle>{editMode ? 'Edit destination' : 'Create a new destination'}</SheetTitle>
+ <SheetTitle>{editMode ? 'Edit destination' : 'Add destination'}</SheetTitle>
<SheetDescription>
{editMode
- ? 'Update the configuration for this destination'
- : 'A destination can be a read replica or an external destination that receives your database changes in real time.'}
+ ? 'Update the configuration for this destination.'
+ : 'A destination can be a read replica or an external destination that receives replicated data in near real time.'}
</SheetDescription>
</SheetHeader>
@@ -118,11 +118,11 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
<SheetSection>
<div className={cn('border rounded-md p-6 flex flex-col gap-y-4')}>
<div className="flex flex-col gap-y-1">
- <h4>Replicate data to external destinations in real time</h4>
+ <h4>Request Pipelines access</h4>
<p className="text-sm text-foreground-light">
- External destinations are in <span className="text-foreground">alpha</span>{' '}
- and are being rolled out gradually. Request access below to join the waitlist.
- Read replicas are available now.
+ Pipelines is in <span className="text-foreground">alpha</span> and being
+ rolled out gradually. Request access below to join the waitlist. Read replicas
+ are available now.
</p>
</div>
<div className="flex gap-x-2">
@@ -132,20 +132,20 @@ export const DestinationPanel = ({ onSuccessCreateReadReplica }: DestinationPane
iconRight={<ArrowUpRight size={16} strokeWidth={1.5} />}
>
<Link
- href="https://forms.supabase.com/pg_replicate"
target="_blank"
rel="noreferrer"
+ href="https://forms.supabase.com/pg_replicate"
>
Request alpha access
</Link>
</Button>
- <DocsButton href={`${DOCS_URL}/guides/database/replication#replication`} />
+ <DocsButton href={`${DOCS_URL}/guides/database/replication#pipelines`} />
</div>
</div>
</SheetSection>
) : replicationNotEnabled ? (
<SheetSection>
- <EnableReplicationCallout
+ <EnablePipelinesCallout
className="p-6!"
type={destinationType}
hasAccess={hasETLReplicationAccess}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
index 358bda15eac..f5d2d442785 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.test.tsx
@@ -64,7 +64,7 @@ describe('DestinationTypeSelection', () => {
expect(await screen.findByText('Select a destination type')).toBeInTheDocument()
})
- test('renders the Within Supabase group with Read Replica when dropdown is opened', async () => {
+ test('renders Read Replica in the Other group when dropdown is opened', async () => {
mockBigQueryEnabled.mockReturnValue(false)
mockIcebergEnabled.mockReturnValue(false)
mockDucklakeEnabled.mockReturnValue(false)
@@ -75,11 +75,11 @@ describe('DestinationTypeSelection', () => {
fireEvent.click(await screen.findByRole('combobox'))
- expect(await screen.findByText('Within Supabase')).toBeInTheDocument()
+ expect(await screen.findByText('Other')).toBeInTheDocument()
expect(screen.getByText('Read Replica')).toBeInTheDocument()
})
- test('renders the Outside Supabase group with BigQuery when the flag is enabled', async () => {
+ test('renders the Pipelines group with BigQuery when the flag is enabled', async () => {
mockBigQueryEnabled.mockReturnValue(true)
mockIcebergEnabled.mockReturnValue(false)
mockDucklakeEnabled.mockReturnValue(false)
@@ -90,7 +90,7 @@ describe('DestinationTypeSelection', () => {
fireEvent.click(await screen.findByRole('combobox'))
- expect(await screen.findByText('Outside Supabase')).toBeInTheDocument()
+ expect(await screen.findByText('Pipelines')).toBeInTheDocument()
expect(screen.getByText('BigQuery')).toBeInTheDocument()
})
@@ -105,11 +105,12 @@ describe('DestinationTypeSelection', () => {
fireEvent.click(await screen.findByRole('combobox'))
- await screen.findByText('Within Supabase')
+ expect(await screen.findByText('Other')).toBeInTheDocument()
+ expect(screen.getByText('Read Replica')).toBeInTheDocument()
expect(screen.queryByText('BigQuery')).not.toBeInTheDocument()
expect(screen.queryByText('DuckLake')).not.toBeInTheDocument()
expect(screen.queryByText('Analytics Bucket')).not.toBeInTheDocument()
- expect(screen.queryByText('Outside Supabase')).not.toBeInTheDocument()
+ expect(screen.queryByText('Pipelines')).not.toBeInTheDocument()
})
test('shows alpha warning when an alpha destination type is selected', async () => {
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
index 2d936058cf0..c528ff2e08e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationTypeSelection.tsx
@@ -8,6 +8,7 @@ import {
SelectGroup,
SelectItem,
SelectLabel,
+ SelectSeparator,
SelectTrigger,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
@@ -74,7 +75,7 @@ export const DestinationTypeSelection = () => {
const groups: DestinationTypeGroup[] = [
{
- label: 'Within Supabase',
+ label: 'Other',
options: [
{
value: 'Read Replica',
@@ -85,6 +86,11 @@ export const DestinationTypeSelection = () => {
isAlpha: false,
enabled: isOptionVisible('Read Replica', infrastructureReadReplicas),
},
+ ],
+ },
+ {
+ label: 'Pipelines',
+ options: [
{
value: 'Analytics Bucket',
label: 'Analytics Bucket',
@@ -93,11 +99,6 @@ export const DestinationTypeSelection = () => {
isAlpha: true,
enabled: isOptionVisible('Analytics Bucket', etlEnableIceberg),
},
- ],
- },
- {
- label: 'Outside Supabase',
- options: [
{
value: 'BigQuery',
label: 'BigQuery',
@@ -145,7 +146,8 @@ export const DestinationTypeSelection = () => {
description={
selectedOption?.isAlpha && (
<span className="block text-sm text-foreground-light mb-1">
- This destination type is in alpha and may change while we iterate.{' '}
+ This destination type is in alpha and may be unstable or introduce breaking changes
+ while we iterate based on customer feedback.{' '}
<InlineLink href="https://github.com/orgs/supabase/discussions/39416">
Leave feedback
</InlineLink>
@@ -172,8 +174,9 @@ export const DestinationTypeSelection = () => {
)}
</SelectTrigger>
<SelectContent align="end">
- {visibleGroups.map((group) => (
+ {visibleGroups.map((group, index) => (
<SelectGroup key={group.label}>
+ {index > 0 && <SelectSeparator />}
<SelectLabel>{group.label}</SelectLabel>
{group.options.map((option) => (
<SelectItem key={option.value} value={option.value} className="py-2">
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
index baa771a432e..cfd10104d3d 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaEligibilityWarnings.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useCheckEligibilityDeployReplica } from './useCheckEligibilityDeployReplica'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
index fe72e424989..a07c74aaf09 100644
--- a/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DestinationRow.tsx
@@ -169,7 +169,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
) : (
<div>
<p>
- {type} (ID: {pipeline?.id})
+ {type} (Pipeline ID: {pipeline?.id})
</p>
<p className="text-foreground-lighter">{destinationName}</p>
</div>
@@ -228,7 +228,7 @@ export const DestinationRow = ({ destinationId }: DestinationRowProps) => {
)}
<Button asChild variant="default" className="relative">
<Link href={`/project/${projectRef}/database/replication/${pipeline?.id}`}>
- View replication
+ View pipeline
</Link>
</Button>
<RowMenu
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index 462cb4c7125..b137bb77234 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -19,14 +19,15 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { REPLICA_STATUS } from '../../Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
import { DestinationPanel } from './DestinationPanel/DestinationPanel'
import { DestinationType } from './DestinationPanel/DestinationPanel.types'
import { DestinationRow } from './DestinationRow'
-import { DisableExternalReplicationDialog } from './DisableExternalReplicationDialog'
+import { DisablePipelinesDialog } from './DisablePipelinesDialog'
import { ReadReplicaRow } from './ReadReplicas/ReadReplicaRow'
import {
useIsETLBigQueryPrivateAlpha,
@@ -75,8 +76,7 @@ export const Destinations = () => {
const searchInputRef = useRef<HTMLInputElement>(null)
const [filterString, setFilterString] = useState<string>('')
const [statusRefetchInterval, setStatusRefetchInterval] = useState<number | false>(5000)
- const [showDisableExternalReplicationDialog, setShowDisableExternalReplicationDialog] =
- useState(false)
+ const [showDisablePipelinesDialog, setShowDisablePipelinesDialog] = useState(false)
const [_, setDestinationType] = useQueryState(
'destinationType',
@@ -99,7 +99,17 @@ export const Destinations = () => {
isError: isDatabasesError,
isSuccess: isDatabasesSuccess,
} = useReadReplicasQuery({ projectRef }, { refetchInterval: statusRefetchInterval })
- const readReplicas = databases.filter((x) => x.identifier !== projectRef)
+ // Memoise so the array reference is stable across renders. Without this
+ // the polling useEffect below has an unstable dep, runs every render, and
+ // its `setStatusRefetchInterval(false)` churn keeps the parent re-rendering
+ // — which trips a latent ref-instability bug in @radix-ui/react-slot
+ // (`composeRefs` is called per render instead of `useComposedRefs`) and
+ // tanks the page with "Maximum update depth exceeded" via the Tooltip
+ // trigger refs.
+ const readReplicas = useMemo(
+ () => databases.filter((x) => x.identifier !== projectRef),
+ [databases, projectRef]
+ )
const hasReplicas = isDatabasesSuccess && readReplicas.length > 0
const filteredReplicas =
filterString.length === 0
@@ -136,7 +146,7 @@ export const Destinations = () => {
() => sourcesData?.sources.find((source) => source.name === projectRef),
[projectRef, sourcesData?.sources]
)
- const canDisableExternalReplication =
+ const canDisablePipelines =
isSourcesSuccess &&
isDestinationsSuccess &&
isPipelinesSuccess &&
@@ -249,14 +259,14 @@ export const Destinations = () => {
</Button>
</Shortcut>
<DocsButton href={`${DOCS_URL}/guides/database/replication`} />
- {canDisableExternalReplication && (
+ {canDisablePipelines && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="default" icon={<MoreVertical />} className="w-7" />
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-52">
- <DropdownMenuItem onClick={() => setShowDisableExternalReplicationDialog(true)}>
- Disable external replication
+ <DropdownMenuItem onClick={() => setShowDisablePipelinesDialog(true)}>
+ Disable Pipelines
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
@@ -346,8 +356,8 @@ export const Destinations = () => {
>
<h4>Replication keeps your data in sync across systems</h4>
<p className="text-foreground-light text-sm text-balance text-center mt-1">
- Deploy read replicas for lower latency and better resource management, or capture
- database changes to external destinations for real-time data pipelines.
+ Deploy Read Replicas for lower latency and workload isolation, or add a Pipelines
+ destination for analytics workloads.
</p>
<Button
icon={<Plus />}
@@ -364,9 +374,9 @@ export const Destinations = () => {
<DestinationPanel onSuccessCreateReadReplica={() => setStatusRefetchInterval(5000)} />
- <DisableExternalReplicationDialog
- open={showDisableExternalReplicationDialog}
- setOpen={setShowDisableExternalReplicationDialog}
+ <DisablePipelinesDialog
+ open={showDisablePipelinesDialog}
+ setOpen={setShowDisablePipelinesDialog}
/>
</>
)
diff --git a/apps/studio/components/interfaces/Database/Replication/DisableExternalReplicationDialog.tsx b/apps/studio/components/interfaces/Database/Replication/DisablePipelinesDialog.tsx
similarity index 83%
rename from apps/studio/components/interfaces/Database/Replication/DisableExternalReplicationDialog.tsx
rename to apps/studio/components/interfaces/Database/Replication/DisablePipelinesDialog.tsx
index 90d235cf975..d9bab23243e 100644
--- a/apps/studio/components/interfaces/Database/Replication/DisableExternalReplicationDialog.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/DisablePipelinesDialog.tsx
@@ -16,22 +16,19 @@ import { Admonition } from 'ui-patterns/admonition'
import { useDeleteReplicationTenantMutation } from '@/data/replication/delete-tenant-mutation'
-interface DisableExternalReplicationDialogProps {
+interface DisablePipelinesDialogProps {
open: boolean
setOpen: (value: boolean) => void
}
-export const DisableExternalReplicationDialog = ({
- open,
- setOpen,
-}: DisableExternalReplicationDialogProps) => {
+export const DisablePipelinesDialog = ({ open, setOpen }: DisablePipelinesDialogProps) => {
const { ref: projectRef } = useParams()
const [error, setError] = useState<string | null>(null)
const { mutateAsync: deleteReplicationTenant, isPending: isSubmitting } =
useDeleteReplicationTenantMutation({
onSuccess: () => {
- toast.success('External replication has been disabled')
+ toast.success('Pipelines has been disabled')
setOpen(false)
},
onError: () => {},
@@ -53,12 +50,12 @@ export const DisableExternalReplicationDialog = ({
<AlertDialog open={open} onOpenChange={(open) => !isSubmitting && setOpen(open)}>
<AlertDialogContent size="small">
<AlertDialogHeader>
- <AlertDialogTitle>Disable external replication</AlertDialogTitle>
+ <AlertDialogTitle>Disable Pipelines</AlertDialogTitle>
<AlertDialogDescription className="space-y-2 text-sm">
<p>
This will remove the <code className="text-code-inline">etl</code> schema and all
- connected resources from your database. Any active pipelines sending changes to
- external destinations will stop.
+ connected resources from your database. Any active replication pipelines sending
+ changes to external destinations will stop.
</p>
<p>Read replicas are not affected.</p>
</AlertDialogDescription>
@@ -67,7 +64,7 @@ export const DisableExternalReplicationDialog = ({
<AlertDialogBody>
<Admonition
type="destructive"
- title="Unable to disable external replication"
+ title="Unable to disable Pipelines"
description={error}
/>
</AlertDialogBody>
diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx b/apps/studio/components/interfaces/Database/Replication/EnablePipelinesCallout.tsx
similarity index 67%
rename from apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
rename to apps/studio/components/interfaces/Database/Replication/EnablePipelinesCallout.tsx
index 8c088ab212b..602bda15097 100644
--- a/apps/studio/components/interfaces/Database/Replication/EnableReplicationCallout.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/EnablePipelinesCallout.tsx
@@ -13,7 +13,7 @@ import {
DialogTitle,
DialogTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { DestinationType } from './DestinationPanel/DestinationPanel.types'
import { DocsButton } from '@/components/ui/DocsButton'
@@ -21,22 +21,22 @@ import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
import { useCreateTenantSourceMutation } from '@/data/replication/create-tenant-source-mutation'
import { DOCS_URL } from '@/lib/constants'
-const EnableReplicationModal = () => {
+const EnablePipelinesModal = () => {
const { ref: projectRef } = useParams()
const [open, setOpen] = useState(false)
const { mutate: createTenantSource, isPending: creatingTenantSource } =
useCreateTenantSourceMutation({
onSuccess: () => {
- toast.success('External replication has been successfully enabled!')
+ toast.success('Pipelines has been successfully enabled!')
setOpen(false)
},
onError: (error) => {
- toast.error(`Failed to enable external replication: ${error.message}`)
+ toast.error(`Failed to enable Pipelines: ${error.message}`)
},
})
- const onEnableReplication = async () => {
+ const onEnablePipelines = async () => {
if (!projectRef) return console.error('Project ref is required')
createTenantSource({ projectRef })
}
@@ -45,27 +45,27 @@ const EnableReplicationModal = () => {
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant="primary" className="w-min">
- Enable external replication
+ Enable Pipelines
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
- <DialogTitle>Enable external replication</DialogTitle>
+ <DialogTitle>Enable Pipelines</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="flex flex-col gap-y-2 p-0!">
<Admonition
type="warning"
className="rounded-none border-0"
- title="Replication is currently in alpha"
+ title="Pipelines is currently in alpha"
>
<p className="text-sm leading-normal!">
- External replication streams database changes to destinations outside your Supabase
- project. The feature is in active development and may change as we gather feedback.
+ Alpha features can be unstable and may introduce breaking changes while we evaluate
+ the product direction, refine the feature set, and incorporate customer feedback.
</p>
<p className="text-sm leading-normal!">
- Pricing is not finalized. You can enable external replication now; we'll announce
- pricing later and notify you before any charges apply.
+ Pricing is not finalized. You can enable Pipelines now; we'll announce pricing later
+ and notify you before any charges apply.
</p>
</Admonition>
</DialogSection>
@@ -73,8 +73,8 @@ const EnableReplicationModal = () => {
<Button variant="default" disabled={creatingTenantSource} onClick={() => setOpen(false)}>
Cancel
</Button>
- <Button variant="primary" loading={creatingTenantSource} onClick={onEnableReplication}>
- Enable external replication
+ <Button variant="primary" loading={creatingTenantSource} onClick={onEnablePipelines}>
+ Enable Pipelines
</Button>
</DialogFooter>
</DialogContent>
@@ -82,7 +82,7 @@ const EnableReplicationModal = () => {
)
}
-export const EnableReplicationCallout = ({
+export const EnablePipelinesCallout = ({
type,
className,
hasAccess,
@@ -94,19 +94,21 @@ export const EnableReplicationCallout = ({
return (
<div className={cn('border rounded-md p-4 md:p-12 flex flex-col gap-y-4', className)}>
<div className="flex flex-col gap-y-1">
- <h4>Replicate data to external destinations in real time</h4>
+ <h4>Enable Pipelines</h4>
<p className="text-sm text-foreground-light">
- {hasAccess ? 'Enable external replication' : 'Upgrade to the Pro plan'} to start
- replicating your database changes to {type ?? 'data warehouses and analytics platforms'}.
+ Pipelines creates managed replication pipelines that stream database changes to
+ destination systems.{' '}
+ {hasAccess ? 'Enable Pipelines for your project' : 'Upgrade to the Pro plan'} to stream
+ database changes to {type ?? 'data warehouses and analytics platforms'}.
</p>
</div>
<div className="flex gap-x-2">
{hasAccess ? (
- <EnableReplicationModal />
+ <EnablePipelinesModal />
) : (
<UpgradePlanButton source="replication" featureProposition="use replication" />
)}
- <DocsButton href={`${DOCS_URL}/guides/database/replication#replication`} />
+ <DocsButton href={`${DOCS_URL}/guides/database/replication#pipelines`} />
</div>
</div>
)
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
index c40af9169b7..75f200a5a28 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails.tsx
@@ -12,10 +12,10 @@ import {
ChartLine,
ChartLoadingState,
ChartMetric,
- GenericSkeletonLoader,
-} from 'ui-patterns'
+} from 'ui-patterns/Chart'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { REPORT_DATERANGE_HELPER_LABELS } from '@/components/interfaces/Reports/Reports.constants'
import { REPLICA_STATUS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
diff --git a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
index 6838cdaa3b5..b278717dda8 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaRow.tsx
@@ -18,7 +18,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { getIsInTransition, getStatusLabel } from './ReadReplicas.utils'
import { DropReplicaConfirmationModal } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/DropReplicaConfirmationModal'
@@ -118,7 +118,7 @@ export const ReadReplicaRow = ({ replica, onUpdateReplica }: ReadReplicaRow) =>
disabled={status === 'GOING_DOWN'}
>
<Link href={`/project/${ref}/database/replication/replica/${replica.identifier}`}>
- View replication
+ View replica
</Link>
</Button>
<DropdownMenu>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Edges.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Edges.tsx
index 84eebdfbc91..4f35e64e14e 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Edges.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationDiagram/Edges.tsx
@@ -56,7 +56,7 @@ const getEdgeVisual = ({ isComingUp, isReplicating, isFailed }: ReplicationState
if (isComingUp) {
return {
Icon: Loader2,
- color: 'hsl(var(--foreground-light))',
+ color: 'var(--foreground-light)',
opacity: 1,
dashArray: '5',
shouldAnimate: true,
@@ -74,7 +74,7 @@ const getEdgeVisual = ({ isComingUp, isReplicating, isFailed }: ReplicationState
}
return {
Icon: Square,
- color: 'hsl(var(--foreground-lighter))',
+ color: 'var(--foreground-lighter)',
opacity: 0.5,
dashArray: '5 5',
shouldAnimate: false,
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
index 81996d4cd07..7fd2336cc6f 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.tsx
@@ -30,8 +30,8 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { BatchRestartDialog } from '../BatchRestartDialog'
import { ErrorDetailsDialog } from '../ErrorDetailsDialog'
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx
index 68ebf1d39e2..9ab2ebcd4c2 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus.utils.tsx
@@ -12,8 +12,8 @@ export const getStatusConfig = (state: TableState['state']) => {
case 'queued':
return {
badge: <Badge variant="warning">Queued</Badge>,
- description: 'Table is waiting for ETL to pick it up for replication.',
- tooltip: 'Table is waiting for ETL to pick it up for replication.',
+ description: 'Table is waiting for the pipeline to pick it up for replication.',
+ tooltip: 'Table is waiting for the pipeline to pick it up for replication.',
color: 'text-warning',
}
case 'copying_table':
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
index e1d8f0c24d7..70a1397f20a 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
@@ -91,7 +91,7 @@ export const SlotStatusLegend = () => {
</ul>
<div className="border-t border-overlay px-4 py-2.5">
<InlineLink
- href={`${DOCS_URL}/guides/database/replication/external-replication-monitoring`}
+ href={`${DOCS_URL}/guides/database/replication/pipelines-monitoring`}
className="text-xs text-foreground-light"
>
Learn more about monitoring replication
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
index 51bbe46529b..17f61d935c7 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
@@ -47,7 +47,7 @@ export const TableReplicationRow = ({
className="px-1.5"
icon={<ExternalLink />}
tooltip={{
- content: { side: 'bottom', text: 'Open in Table Editor' },
+ content: { side: 'bottom', text: 'Table Editor' },
}}
>
<Link
diff --git a/apps/studio/components/interfaces/Database/Replication/useIsETLPrivateAlpha.ts b/apps/studio/components/interfaces/Database/Replication/useIsETLPrivateAlpha.ts
index 71643eda753..3f9c695be9f 100644
--- a/apps/studio/components/interfaces/Database/Replication/useIsETLPrivateAlpha.ts
+++ b/apps/studio/components/interfaces/Database/Replication/useIsETLPrivateAlpha.ts
@@ -3,9 +3,9 @@ import { useFlag } from 'common'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
/**
- * Organization level opt in for ETL private alpha, there's 2 flags we're using which controls
- * the individual destination types. Access to the ETL UI (`useIsETLPrivateAlpha`) will just
- * check if the org has access to at least one of the destination types
+ * Organization-level access for Pipelines alpha destinations. The flag names still use
+ * the original ETL identifiers, but the UI checks whether the org has access to at least one
+ * destination type.
*/
const useIsCurrentOrgInFlagList = (flag: string) => {
const flagValue = useFlag(flag)
@@ -16,7 +16,7 @@ const useIsCurrentOrgInFlagList = (flag: string) => {
? (flagValue as string).split(',').map((x: string) => x.trim())
: []
- // [Joshen] Override for to enable for all organizations by setting the flag value as `all`
+ // [Joshen] Override to enable for all organizations by setting the flag value as `all`
if (allowedOrgSlugs.includes('all')) return true
// [Joshen] Otherwise fallback to checking against org slug
diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
index d293925eee4..f804e048ebc 100644
--- a/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
+++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/PreviousRestoreItem.tsx
@@ -1,6 +1,6 @@
import { ChevronRightIcon } from 'lucide-react'
import Link from 'next/link'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { StatusBadge } from './StatusBadge'
import { CloneStatus } from '@/data/projects/clone-status-query'
diff --git a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
index d82a3cc58c2..40da5f66a2a 100644
--- a/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
+++ b/apps/studio/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject.tsx
@@ -14,9 +14,9 @@ import { CreateNewProjectDialog } from '@/components/interfaces/Database/Backups
import { projectSpecToMonthlyPrice } from '@/components/interfaces/Database/Backups/RestoreToNewProject/RestoreToNewProject.utils'
import { DiskType } from '@/components/interfaces/DiskManagement/ui/DiskManagement.constants'
import { Markdown } from '@/components/interfaces/Markdown'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import Panel from '@/components/ui/Panel'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useDiskAttributesQuery } from '@/data/config/disk-attributes-query'
@@ -157,7 +157,7 @@ export const RestoreToNewProject = () => {
>
<Markdown
className="max-w-full"
- content={`Restore to new project is only available for Postgres 15 and above.
+ content={`Restore to new project is only available for Postgres 15 and above.
Go to [infrastructure settings](/project/${project?.ref}/settings/infrastructure)
to upgrade your database version.
`}
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
index 85053d5f71a..a5bc857b406 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx
@@ -53,9 +53,9 @@ import {
} from './Schemas.utils'
import { TableNode } from './SchemaTableNode'
import { useExportSchemaToImage } from './useExportSchemaToImage'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { useSchemasQuery } from '@/data/database/schemas-query'
import { useInfiniteTablesQuery } from '@/data/tables/tables-query'
diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
index 1d3b6457b6d..88554e4a406 100644
--- a/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
+++ b/apps/studio/components/interfaces/Database/Schemas/SchemaTableNode.tsx
@@ -249,15 +249,7 @@ const TableNodeComponent = ({
)}
>
{column.isPrimary && (
- <Key
- size={8}
- strokeWidth={1}
- className={cn(
- // 'sb-grid-column-header__inner__primary-key'
- 'shrink-0',
- 'text-light'
- )}
- />
+ <Key size={8} strokeWidth={1} className={cn('shrink-0', 'text-light')} />
)}
{column.isNullable && (
<DiamondIcon size={8} strokeWidth={1} className="shrink-0 text-light" />
diff --git a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
index 89d68956e09..37c70b887a4 100644
--- a/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
+++ b/apps/studio/components/interfaces/Database/Tables/ColumnList.tsx
@@ -48,7 +48,7 @@ import {
} from './ColumnList.utils'
import { ConstraintToken } from './ConstraintToken'
import { displayColumnType } from '@/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
@@ -162,6 +162,7 @@ export const ColumnList = ({
{!isSchemaLocked && isTableEntity && (
<ButtonTooltip
icon={<Plus />}
+ variant="default"
disabled={!canUpdateColumns}
onClick={() => onAddColumn()}
tooltip={{
diff --git a/apps/studio/components/interfaces/Database/Tables/TableList.tsx b/apps/studio/components/interfaces/Database/Tables/TableList.tsx
index 796a72ec4d2..b25c9e57e5a 100644
--- a/apps/studio/components/interfaces/Database/Tables/TableList.tsx
+++ b/apps/studio/components/interfaces/Database/Tables/TableList.tsx
@@ -37,11 +37,11 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ProtectedSchemaWarning } from '../ProtectedSchemaWarning'
import { formatAllEntities } from './Tables.utils'
import { buildTableEditorUrl } from '@/components/grid/SupabaseGrid.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
import { EntityTypeIcon } from '@/components/ui/EntityTypeIcon'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { useDatabasePublicationsQuery } from '@/data/database-publications/database-publications-query'
import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
@@ -265,12 +265,18 @@ export const TableList = ({
</Shortcut>
<Popover>
<PopoverTrigger asChild>
- <Button
- size="tiny"
- variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
- className="px-1"
- icon={<Filter />}
- />
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ size="tiny"
+ variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
+ className="px-1"
+ icon={<Filter />}
+ aria-label="Filter"
+ />
+ </TooltipTrigger>
+ <TooltipContent>Filter</TooltipContent>
+ </Tooltip>
</PopoverTrigger>
<PopoverContent className="p-0 w-56" side="bottom" align="center">
<div className="px-3 pt-3 pb-2 flex flex-col gap-y-2">
diff --git a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
index 1731d0b3ae5..b14d67361bc 100644
--- a/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/ChooseFunctionForm.tsx
@@ -6,8 +6,8 @@ import { useRouter } from 'next/router'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, SidePanel } from 'ui'
import ProductEmptyState from '@/components/to-be-cleaned/ProductEmptyState'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import InformationBox from '@/components/ui/InformationBox'
-import SqlEditor from '@/components/ui/SqlEditor'
import {
useDatabaseFunctionsQuery,
type DatabaseFunction,
@@ -163,7 +163,12 @@ const Function = ({ id, completeStatement, name, onClick }: FunctionProps) => {
</div>
<AccordionContent className="[&>div]:pb-0" onClick={(e) => e.stopPropagation()}>
<div className="mt-4 h-64 border border-default">
- <SqlEditor defaultValue={completeStatement} readOnly={true} contextmenu={false} />
+ <CodeEditor
+ isReadOnly
+ language="pgsql"
+ defaultValue={completeStatement}
+ options={{ contextmenu: false }}
+ />
</div>
</AccordionContent>
</AccordionItem>
diff --git a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggers.constants.ts b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggers.constants.ts
index b59bc48f72e..869388398cc 100644
--- a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggers.constants.ts
+++ b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggers.constants.ts
@@ -16,6 +16,7 @@ EXECUTE FUNCTION event_trigger_fn();
`
export const AUTO_ENABLE_RLS_EVENT_TRIGGER_SQL = safeSql`
+-- Event trigger: ensure_rls
CREATE OR REPLACE FUNCTION rls_auto_enable()
RETURNS EVENT_TRIGGER
LANGUAGE plpgsql
diff --git a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
index 9bfbc57e35a..32b7c968848 100644
--- a/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/EventTriggersList/EventTriggersList.tsx
@@ -15,7 +15,7 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { EventTriggerList } from './EventTriggerList'
@@ -27,7 +27,7 @@ import {
selectFilterSchema,
} from '@/components/interfaces/Reports/v2/ReportsSelectFilter'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
import { Shortcut } from '@/components/ui/Shortcut'
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
index a68be46a96a..e0a28f20185 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggerList.tsx
@@ -14,6 +14,9 @@ import {
DropdownMenuTrigger,
TableCell,
TableRow,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
} from 'ui'
import {
@@ -174,14 +177,19 @@ export const TriggerList = ({ editTrigger, duplicateTrigger, deleteTrigger }: Tr
<div className="flex items-center justify-end">
{canUpdateTriggers ? (
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- aria-label="More options"
- variant="default"
- className="px-1"
- icon={<MoreVertical />}
- />
- </DropdownMenuTrigger>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <DropdownMenuTrigger asChild>
+ <Button
+ aria-label={`${x.function_name} actions`}
+ variant="default"
+ className="px-1"
+ icon={<MoreVertical />}
+ />
+ </DropdownMenuTrigger>
+ </TooltipTrigger>
+ <TooltipContent side="bottom">More options</TooltipContent>
+ </Tooltip>
<DropdownMenuContent side="bottom" align="end" className="w-52">
<DropdownMenuItem
className="space-x-2"
diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
index c47e1b89520..c27c968c327 100644
--- a/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
+++ b/apps/studio/components/interfaces/Database/Triggers/TriggersList/TriggersList.tsx
@@ -15,7 +15,7 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { CreateTriggerButtons } from './CreateTriggerButtons'
@@ -29,9 +29,9 @@ import {
selectFilterSchema,
} from '@/components/interfaces/Reports/v2/ReportsSelectFilter'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { Shortcut } from '@/components/ui/Shortcut'
import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
import { useDatabaseTriggerDeleteMutation } from '@/data/database-triggers/database-trigger-delete-mutation'
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
index fcd531e1c8c..2f7a79cea00 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -17,7 +17,7 @@ import {
Form,
Separator,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormFooterChangeBadge } from '../DataWarehouse/FormFooterChangeBadge'
import { CreateDiskStorageSchema, DiskStorageSchemaType } from './DiskManagement.schema'
@@ -41,7 +41,6 @@ import {
PLAN_DETAILS,
RESTRICTED_COMPUTE_FOR_THROUGHPUT_ON_GP3,
} from './ui/DiskManagement.constants'
-import { NoticeBar } from './ui/NoticeBar'
import { SpendCapDisabledSection } from './ui/SpendCapDisabledSection'
import {
MAX_WIDTH_CLASSES,
@@ -396,18 +395,22 @@ export function DiskManagementForm() {
title="Your project will now automatically restart."
description="Your project will be unavailable for up to 2 mins."
/>
- <NoticeBar
- type="default"
- visible={isProjectRequestingDiskChanges}
- title="Disk configuration changes have been requested"
- description="The requested changes will be applied to your disk shortly"
- />
- <NoticeBar
- type="default"
- visible={isEntitlementsLoaded && !isPlanUpgradeRequired && noPermissions}
- title="You do not have permission to update disk configuration"
- description="Please contact your organization administrator to update your disk configuration"
- />
+ {isProjectRequestingDiskChanges && (
+ <Admonition
+ type="default"
+ layout="horizontal"
+ title="Disk configuration changes have been requested"
+ description="The requested changes will be applied to your disk shortly"
+ />
+ )}
+ {isEntitlementsLoaded && !isPlanUpgradeRequired && noPermissions && (
+ <Admonition
+ type="default"
+ layout="horizontal"
+ title="You do not have permission to update disk configuration"
+ description="Please contact your organization administrator to update your disk configuration"
+ />
+ )}
</div>
)}
@@ -428,19 +431,20 @@ export function DiskManagementForm() {
<SpendCapDisabledSection currentDiskSizeGb={defaultValues.totalSize} />
<div className="flex flex-col gap-y-4">
- <NoticeBar
- type="default"
- visible={isDiskNoticeVisible}
- title="Disk configuration is only available for projects in the AWS cloud provider"
- description={
- isAwsK8s
- ? 'Configuring your disk for AWS (Revamped) projects is unavailable for now.'
- : isBranch
- ? 'Delete and recreate your Preview Branch to configure disk size. It was deployed on an older branching infrastructure.'
- : 'The Fly Postgres offering is deprecated - please migrate your instance to the AWS cloud prov to configure your disk.'
- }
- />
-
+ {isDiskNoticeVisible && (
+ <Admonition
+ type="default"
+ layout="horizontal"
+ title="Disk configuration is only available for projects in the AWS cloud provider"
+ description={
+ isAwsK8s
+ ? 'Configuring your disk for AWS (Revamped) projects is unavailable for now.'
+ : isBranch
+ ? 'Delete and recreate your Preview Branch to configure disk size. It was deployed on an older branching infrastructure.'
+ : 'The Fly Postgres offering is deprecated - please migrate your instance to the AWS cloud prov to configure your disk.'
+ }
+ />
+ )}
{isAws && (
<>
<div className="flex flex-col gap-y-3">
@@ -517,54 +521,54 @@ export function DiskManagementForm() {
</div>
<DialogSectionSeparator />
<div className="px-card flex flex-col gap-y-8">
- <NoticeBar
- type="default"
- visible={!!disableIopsThroughputConfig}
- title="Adjusting disk configuration requires LARGE Compute size or above"
- description={`Increase your compute size to adjust your disk's storage type, ${form.getValues('storageType') === 'gp3' ? 'IOPS, ' : ''} and throughput`}
- actions={
- canUpdateDiskConfiguration ? (
- <Button
- variant="default"
- onClick={() => {
- form.setValue('computeSize', 'ci_large')
- }}
- >
- Change to LARGE Compute
- </Button>
- ) : (
- <RequestUpgradeToBillingOwners
- addon="computeSize"
- featureProposition="adjust disk configuration"
- />
- )
- }
- />
- <NoticeBar
- type="default"
- visible={
- isDiskTooSmallForCustomIops &&
- !disableIopsThroughputConfig &&
- !disableDiskInputs
- }
- title={`Increase disk size to adjust IOPS or throughput`}
- description={`This disk is too small to update IOPS or throughput, since gp3 volumes are capped at 500 IOPS per GB with a 3,000 IOPS minimum. Resizing to ${suggestedDiskSizeForCustomIops} GB unlocks custom IOPS and throughput, and leaves headroom for further adjustments (disk config changes are locked for 4 hours after each resize).`}
- actions={
- !disableDiskSizeInput ? (
- <Button
- variant="default"
- onClick={() => {
- form.setValue('totalSize', suggestedDiskSizeForCustomIops, {
- shouldDirty: true,
- shouldValidate: true,
- })
- }}
- >
- Increase to {suggestedDiskSizeForCustomIops} GB
- </Button>
- ) : undefined
- }
- />
+ {!!disableIopsThroughputConfig && (
+ <Admonition
+ type="default"
+ title="Adjusting disk configuration requires LARGE Compute size or above"
+ description={`Increase your compute size to adjust your disk's storage type, ${form.getValues('storageType') === 'gp3' ? 'IOPS, ' : ''} and throughput`}
+ actions={
+ canUpdateDiskConfiguration ? (
+ <Button
+ variant="default"
+ onClick={() => {
+ form.setValue('computeSize', 'ci_large')
+ }}
+ >
+ Change to LARGE Compute
+ </Button>
+ ) : (
+ <RequestUpgradeToBillingOwners
+ addon="computeSize"
+ featureProposition="adjust disk configuration"
+ />
+ )
+ }
+ />
+ )}
+ {isDiskTooSmallForCustomIops &&
+ !disableIopsThroughputConfig &&
+ !disableDiskInputs && (
+ <Admonition
+ type="default"
+ title="Increase disk size to adjust IOPS or throughput"
+ description={`This disk is too small to update IOPS or throughput, since gp3 volumes are capped at 500 IOPS per GB with a 3,000 IOPS minimum. Resizing to ${suggestedDiskSizeForCustomIops} GB unlocks custom IOPS and throughput, and leaves headroom for further adjustments (disk config changes are locked for 4 hours after each resize).`}
+ actions={
+ !disableDiskSizeInput ? (
+ <Button
+ variant="default"
+ onClick={() => {
+ form.setValue('totalSize', suggestedDiskSizeForCustomIops, {
+ shouldDirty: true,
+ shouldValidate: true,
+ })
+ }}
+ >
+ Increase to {suggestedDiskSizeForCustomIops} GB
+ </Button>
+ ) : undefined
+ }
+ />
+ )}
<StorageTypeField
form={form}
disableInput={disableIopsThroughputConfig || disableDiskInputs}
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
index f41ef295700..8257d48faed 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementPanelForm.tsx
@@ -1,14 +1,14 @@
import { useParams } from 'common'
import Link from 'next/link'
import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import {
PageSection,
PageSectionContent,
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import { Admonition } from 'ui-patterns/admonition'
+} from 'ui-patterns/PageSection'
import { DocsButton } from '../../ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.hooks.ts b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.hooks.ts
index 954a1ac0a5d..edadd80c1b9 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.hooks.ts
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.hooks.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
import { UseFormReturn } from 'react-hook-form'
import { DiskStorageSchemaType } from '../DiskManagement.schema'
+import { ComputeInstanceAddonVariantId } from '../DiskManagement.types'
import {
calculateComputeSizePrice,
calculateDiskSizePrice,
@@ -18,6 +19,13 @@ import {
useSelectedProjectQuery,
} from '@/hooks/misc/useSelectedProject'
+const COMPUTE_SIZES_BELOW_LARGE: Array<ComputeInstanceAddonVariantId> = [
+ 'ci_nano',
+ 'ci_micro',
+ 'ci_small',
+ 'ci_medium',
+]
+
export function useDiskManagementReviewChanges(
form: UseFormReturn<DiskStorageSchemaType>,
numReplicas: number
@@ -131,6 +139,16 @@ export function useDiskManagementReviewChanges(
// Show cooldown warning whenever any disk attribute that enforces the 4-hour lock changes
const anyDiskAttributeChange = hasIOPSChanges || hasStorageTypeChanges || hasTotalSizeChanges
+ // Show extended downtime warning when resizing to/from a size below large
+ const hasExtendedDowntimeRisk =
+ hasComputeChanges &&
+ (COMPUTE_SIZES_BELOW_LARGE.includes(
+ (form.formState.defaultValues?.computeSize ?? 'ci_nano') as ComputeInstanceAddonVariantId
+ ) ||
+ COMPUTE_SIZES_BELOW_LARGE.includes(
+ form.getValues('computeSize') as ComputeInstanceAddonVariantId
+ ))
+
// Throughput is only a user-configurable, separately-billed attribute for GP3. For IO2 it is
// derived from provisioned IOPS (0.256 MiB/s per IOPS) and isn't surfaced as its own value, so
// the form clears it to 0 — rendering a misleading "→ 0 MB/s". Only show the row when the
@@ -180,6 +198,7 @@ export function useDiskManagementReviewChanges(
anyDiskAttributeChange,
showThroughputRow,
hasAnyBreakdownRows,
+ hasExtendedDowntimeRisk,
// labels
oldComputeLabel,
newComputeLabel,
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
index 67839cc3310..bea2a4138b4 100644
--- a/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/DiskManagementReviewAndSubmitDialog/DiskManagementReviewAndSubmitDialog.tsx
@@ -1,5 +1,5 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { ArrowRight } from 'lucide-react'
+import { AlertTriangle, ArrowRight } from 'lucide-react'
import { UseFormReturn } from 'react-hook-form'
import {
Alert,
@@ -84,6 +84,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
anyDiskAttributeChange,
showThroughputRow,
hasAnyBreakdownRows,
+ hasExtendedDowntimeRisk,
oldComputeLabel,
newComputeLabel,
} = useDiskManagementReviewChanges(form, numReplicas)
@@ -125,7 +126,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
{(hasComputeChanges || anyBillableDiskChange) && (
<>
<div className="relative flex border-b">
- <div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 border-r bg-linear-to-t from-[hsl(var(--background-surface-100))] to-transparent">
+ <div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 border-r bg-linear-to-t from-[var(--background-surface-100)] to-transparent">
<span className="text-xs uppercase tracking-widest font-mono text-foreground-lighter">
Before
</span>
@@ -143,7 +144,7 @@ export const DiskManagementReviewAndSubmitDialog = ({
<ArrowRight size={16} className="text-brand-600 relative z-10" strokeWidth={2.5} />
</div>
- <div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 bg-linear-to-t from-[hsl(var(--background-surface-100))] to-transparent">
+ <div className="flex-1 flex flex-col items-center gap-2 py-6 px-4 bg-linear-to-t from-[var(--background-surface-100)] to-transparent">
<span className="text-xs uppercase tracking-widest font-mono text-foreground-lighter">
After
</span>
@@ -267,6 +268,20 @@ export const DiskManagementReviewAndSubmitDialog = ({
</div>
)}
+ {hasExtendedDowntimeRisk && (
+ <>
+ <DialogSectionSeparator />
+ <DialogSection>
+ <Alert variant="warning">
+ <AlertTriangle />
+ <AlertTitle>
+ Resizes may require more downtime than normal on this project.
+ </AlertTitle>
+ </Alert>
+ </DialogSection>
+ </>
+ )}
+
<DialogFooter className="px-5 py-4">
<Button block size="large" variant="default" onClick={() => setIsDialogOpen(false)}>
Cancel
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
index db80564155a..08aecb8389d 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/AutoScaleFields.tsx
@@ -8,7 +8,7 @@ import {
InputGroupAddon,
InputGroupText,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { DiskStorageSchemaType } from '../DiskManagement.schema'
diff --git a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
index a1ec081b884..43058206532 100644
--- a/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx
@@ -14,7 +14,8 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { ComputeBadge } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ComputeBadge } from 'ui-patterns/ComputeBadge'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { DiskStorageSchemaType } from '../DiskManagement.schema'
@@ -26,7 +27,6 @@ import {
} from '../DiskManagement.utils'
import { BillingChangeBadge } from '../ui/BillingChangeBadge'
import FormMessage from '../ui/FormMessage'
-import { NoticeBar } from '../ui/NoticeBar'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
import { DocsButton } from '@/components/ui/DocsButton'
import { InlineLink } from '@/components/ui/InlineLink'
@@ -167,14 +167,15 @@ export function ComputeSizeField({ form, disabled }: ComputeSizeFieldProps) {
/>
</div>
- <NoticeBar
- showIcon={false}
- type="default"
- className="mt-3 border-violet-900 bg-violet-200 [&_h5]:text-violet-1100"
- visible={showUpgradeBadge && form.watch('computeSize') === 'ci_nano'}
- title={'Upgrade to Micro Compute'}
- description="This Project is already paying for Micro Compute. You can upgrade to Micro Compute at any time when convenient."
- />
+ {showUpgradeBadge && form.watch('computeSize') === 'ci_nano' && (
+ <Admonition
+ showIcon={false}
+ type="default"
+ className="mt-3 border-violet-900 bg-violet-200 [&_h5]:text-violet-1100"
+ title="Upgrade to Micro Compute"
+ description="This Project is already paying for Micro Compute. You can upgrade to Micro Compute at any time when convenient."
+ />
+ )}
</>
}
>
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx
deleted file mode 100644
index 0f5c648cf4d..00000000000
--- a/apps/studio/components/interfaces/DiskManagement/ui/DiskManagementCoolDownSection.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
-import { DialogSection } from 'ui'
-
-import CountdownTimerRadial from '@/components/ui/CountdownTimer/CountdownTimerRadial'
-
-export const DiskMangementCoolDownSection = ({ visible }: { visible: boolean }) => {
- const [progress, setProgress] = useState(100)
- const [showCountdown, setShowCountdown] = useState(false)
- const [isJumping, setIsJumping] = useState(false)
-
- useEffect(() => {
- const startCountdown = () => {
- setShowCountdown(true)
- setProgress(100)
- const interval = setInterval(() => {
- setProgress((prevProgress) => {
- if (prevProgress <= 0) {
- clearInterval(interval)
- setIsJumping(true)
- setTimeout(() => {
- setIsJumping(false)
- setProgress(100)
- startCountdown() // Restart the countdown
- }, 300) // Duration of the jump animation
- return 0
- }
- return prevProgress - 1
- })
- }, 100)
-
- return () => clearInterval(interval)
- }
-
- const initialDelay = setTimeout(startCountdown, 1000)
-
- return () => clearTimeout(initialDelay)
- }, [])
-
- return (
- <AnimatePresence>
- {visible && (
- <motion.div
- initial={{ opacity: 1, height: 'auto' }}
- exit={{ opacity: 0, height: 0 }}
- transition={{ duration: 0.15 }}
- className="w-full"
- >
- <DialogSection className="bg-surface-100 text-sm text-foreground-light flex items-center gap-4 relative w-full border rounded-md">
- <div className="w-12 h-12">
- <AnimatePresence>
- {showCountdown && (
- <motion.div
- key="countdown-timer"
- initial={{ scale: 0.8, opacity: 0, y: -8 }}
- animate={{
- scale: isJumping ? 1.2 : 1,
- opacity: 1,
- y: isJumping ? -8 : 0,
- }}
- exit={{ scale: 0.8, opacity: 0, y: -8 }}
- transition={{
- duration: isJumping ? 0.3 : 0.8,
- type: 'spring',
- bounce: 0.6,
- }}
- >
- <CountdownTimerRadial progress={progress} />
- </motion.div>
- )}
- </AnimatePresence>
- </div>
- <div className="flex flex-col gap-0 grow">
- <p className="text-sm text-foreground">
- For 4 hours you will not be able to change any disk attributes.
- </p>
- <p className="text-sm text-foreground-light">
- There is a cooldown period enforced for any disk attribute modifications
- </p>
- </div>
- </DialogSection>
- </motion.div>
- )}
- </AnimatePresence>
- )
-}
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
index 99c9ddf5d65..4352448e33c 100644
--- a/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
+++ b/apps/studio/components/interfaces/DiskManagement/ui/FormMessage.tsx
@@ -1,5 +1,5 @@
import { AnimatePresence, motion } from 'framer-motion'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
interface FormMessageProps {
message: string
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx b/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx
deleted file mode 100644
index 388289c7e03..00000000000
--- a/apps/studio/components/interfaces/DiskManagement/ui/NoticeBar.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion'
-import { type ComponentProps, type ReactNode } from 'react'
-import { cn } from 'ui'
-import { Admonition } from 'ui-patterns'
-
-/**
- * @deprecated Use Admonition from ui-patterns instead
- * Pass actions as a prop to the Admonition component
- */
-
-interface NoticeBarProps extends Omit<ComponentProps<typeof Admonition>, 'description'> {
- title?: string
- description?: string
- icon?: ReactNode
- visible: boolean
- actions?: ReactNode
-}
-export function NoticeBar({ visible, description, actions, ...props }: NoticeBarProps) {
- return (
- <AnimatePresence>
- {visible && (
- <motion.div
- initial={{ opacity: 0, height: 0, y: 4 }}
- animate={{ opacity: 1, height: 'auto', y: 0 }}
- exit={{ opacity: 0, height: 0, y: 4 }}
- transition={{ duration: 0.15 }}
- >
- <Admonition {...props} className={cn(props.className, 'mb-0')}>
- {description}
- <div className="flex flex-col gap-2">
- {actions && <div className="mt-2">{actions}</div>}
- </div>
- </Admonition>
- </motion.div>
- )}
- </AnimatePresence>
- )
-}
diff --git a/apps/studio/components/interfaces/Docs/Introduction.tsx b/apps/studio/components/interfaces/Docs/Introduction.tsx
index 49bc91da599..f98ce4365e2 100644
--- a/apps/studio/components/interfaces/Docs/Introduction.tsx
+++ b/apps/studio/components/interfaces/Docs/Introduction.tsx
@@ -35,10 +35,7 @@ export default function Introduction({ selectedLang }: Props) {
<p>
All projects have a RESTful endpoint that you can use with your project's API key to
query and manage your database. These can be obtained from the{' '}
- <InlineLink href={`/project/${projectRef}/integrations/data_api/overview`}>
- API settings
- </InlineLink>
- .
+ <InlineLink href={`/project/${projectRef}/settings/api-keys`}>API settings</InlineLink>.
</p>
<p>
You can initialize a new Supabase client using the <code>createClient()</code> method.
diff --git a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
index f6a62bfb8aa..0059b22d52e 100644
--- a/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
+++ b/apps/studio/components/interfaces/Docs/PublicSchemaNotEnabledAlert.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import Link from 'next/link'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
const PublicSchemaNotEnabledAlert = () => {
const { ref: projectRef } = useParams()
diff --git a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
index 6468599c6a1..7ce99765e42 100644
--- a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
+++ b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header.tsx
@@ -7,7 +7,7 @@ import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/L
import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export interface ExplainSummary {
totalTime: number
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
index 15258cb47ce..39e21839edb 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsChart.tsx
@@ -86,7 +86,7 @@ export const EdgeFunctionInvocationsChart = ({
{updateAnnotation && (
<ReferenceLine
x={updateAnnotation.timestamp}
- stroke="hsl(var(--foreground-default))"
+ stroke="var(--foreground-default)"
strokeDasharray="4 4"
strokeWidth={1.5}
/>
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
index db448f5e29c..5abbd9eed3c 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionInvocationsSection.tsx
@@ -22,7 +22,7 @@ import {
} from './EdgeFunctionOverview.utils'
import type { InvocationChartDatum, InvocationUpdateAnnotation } from './EdgeFunctionOverview.utils'
import { toAlertError } from './EdgeFunctionRecentErrors.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import type { ChartIntervals } from '@/types'
interface EdgeFunctionInvocationsSectionProps {
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.tsx
index 14589b9d9b7..ac8d7c1dba4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.tsx
@@ -22,7 +22,7 @@ import { EdgeFunctionRecentErrors } from './EdgeFunctionRecentErrors'
import { EdgeFunctionUsageSection } from './EdgeFunctionUsageSection'
import { useEdgeFunctionOverviewShortcuts } from './useEdgeFunctionOverviewShortcuts'
import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import {
FunctionsCombinedStatsVariables,
useFunctionsCombinedStatsQuery,
@@ -247,5 +247,3 @@ export const EdgeFunctionOverview = () => {
</>
)
}
-
-export default EdgeFunctionOverview
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts
index c773c098118..dfe484ea94c 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview.utils.ts
@@ -105,7 +105,7 @@ export const CPU_TIME_CHART_CONFIG = {
export const EXECUTION_TIME_CHART_CONFIG = {
avg_execution_time: {
label: 'Average Execution Time',
- color: 'hsl(var(--foreground-default))',
+ color: 'var(--foreground-default)',
},
max_execution_time: {
label: 'Max Execution Time',
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx
index bd837b5ce60..13694aae2e2 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionPerformanceSection.tsx
@@ -86,7 +86,7 @@ export const EdgeFunctionPerformanceSection = ({
{
y: averageExecutionTime,
label: 'average',
- stroke: 'hsl(var(--foreground-default))',
+ stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
index ac48e0c7ffc..c58c800761e 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.tsx
@@ -45,8 +45,8 @@ import {
} from './EdgeFunctionRecentErrors.utils'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
-import AlertError from '@/components/ui/AlertError'
-import useLogsQuery from '@/hooks/analytics/useLogsQuery'
+import { AlertError } from '@/components/ui/AlertError'
+import { useLogsQuery } from '@/hooks/analytics/useLogsQuery'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
@@ -94,7 +94,8 @@ export const EdgeFunctionRecentErrors = ({
iso_timestamp_start: isoTimestampStart,
iso_timestamp_end: isoTimestampEnd,
},
- isQueryEnabled
+ isQueryEnabled,
+ { useOtel: true }
)
const recentErrorGroupsBase = useMemo(
@@ -112,7 +113,8 @@ export const EdgeFunctionRecentErrors = ({
iso_timestamp_start: isoTimestampStart,
iso_timestamp_end: isoTimestampEnd,
},
- Boolean(projectRef && sinceLastDeployInvocationCountSql && isoTimestampStart)
+ Boolean(projectRef && sinceLastDeployInvocationCountSql && isoTimestampStart),
+ { useOtel: true }
)
const relatedExecutionIds = useMemo(
@@ -136,7 +138,8 @@ export const EdgeFunctionRecentErrors = ({
iso_timestamp_start: isoTimestampStart,
iso_timestamp_end: isoTimestampEnd,
},
- Boolean(projectRef && functionRuntimeLogsSql && isoTimestampStart)
+ Boolean(projectRef && functionRuntimeLogsSql && isoTimestampStart),
+ { useOtel: true }
)
const queryError =
toAlertError(recentErrorInvocationsError) ?? toAlertError(functionRuntimeLogsError)
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.test.ts b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.test.ts
index 5200cdda492..6486cd69e1b 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.test.ts
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.test.ts
@@ -10,6 +10,7 @@ import {
getNoErrorsSinceLastDeployMessage,
getRecentErrorGroups,
getRecentErrorGroupsBase,
+ getRecentErrorInvocationsSql,
getRelatedExecutionIds,
getSinceLastDeployInvocationCount,
getSinceLastDeployInvocationCountSql,
@@ -47,10 +48,37 @@ describe('EdgeFunctionRecentErrors.utils', () => {
executionIds: ['exec_1', "exec_'2"],
limit: 25,
})
- )
- .toBe(`select id, function_logs.timestamp, event_message, metadata.event_type, metadata.function_id, metadata.execution_id, metadata.level from function_logs
-cross join unnest(metadata) as metadata
-where metadata.function_id = 'fn_''123' and metadata.execution_id in ('exec_1', 'exec_''2')
+ ).toBe(`-- runtime logs for error groups
+select
+ toUnixTimestamp64Micro(timestamp) as timestamp,
+ event_message,
+ log_attributes['level'] as level,
+ log_attributes['event_type'] as event_type,
+ log_attributes['function_id'] as function_id,
+ log_attributes['execution_id'] as execution_id
+from logs
+where
+ source = 'function_logs'
+ and log_attributes['function_id'] = 'fn_''123'
+ and log_attributes['execution_id'] in ('exec_1', 'exec_''2')
+order by timestamp desc
+limit 25`)
+ })
+
+ it('builds recent error invocations SQL and escapes the function id', () => {
+ expect(getRecentErrorInvocationsSql("fn_'123", 25)).toBe(`-- errors since last deploy
+select
+ toUnixTimestamp64Micro(timestamp) as timestamp,
+ event_message,
+ log_attributes['request.method'] as method,
+ log_attributes['response.status_code'] as status_code,
+ toFloat64OrZero(log_attributes['execution_time_ms']) as execution_time_ms,
+ log_attributes['execution_id'] as execution_id
+from logs
+where
+ source = 'function_edge_logs'
+ and log_attributes['function_id'] = 'fn_''123'
+ and toInt32OrZero(log_attributes['response.status_code']) >= 500
order by timestamp desc
limit 25`)
})
@@ -83,9 +111,11 @@ limit 25`)
it('builds the since-deploy invocation count query and empty-state message', () => {
expect(getSinceLastDeployInvocationCountSql()).toContain(
- 'SELECT count(*) as count FROM function_edge_logs'
+ "select count() as count from logs where source = 'function_edge_logs'"
+ )
+ expect(getSinceLastDeployInvocationCountSql()).toContain(
+ "log_attributes['function_id'] = '__pending__'"
)
- expect(getSinceLastDeployInvocationCountSql()).toContain("(`function_id` = '__pending__')")
expect(
getSinceLastDeployInvocationCount([
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.ts b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.ts
index d404963428b..a52fa09cdb4 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.ts
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionRecentErrors.utils.ts
@@ -2,11 +2,8 @@ import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { parseEdgeFunctionEventMessage } from '../EdgeFunctionRecentInvocations.utils'
-import { LOGS_TABLES } from '@/components/interfaces/Settings/Logs/Logs.constants'
import type { LogData } from '@/components/interfaces/Settings/Logs/Logs.types'
import {
- genCountQuery,
- genDefaultQuery,
isUnixMicro,
unixMicroToIsoTimestamp,
} from '@/components/interfaces/Settings/Logs/Logs.utils'
@@ -196,20 +193,32 @@ export const getStatusBadgeVariant = (statusCode?: string) => {
export const getRecentErrorInvocationsSql = (
functionId?: string,
limit = RECENT_ERROR_INVOCATIONS_LIMIT
-) =>
- genDefaultQuery(
- LOGS_TABLES.fn_edge,
- {
- function_id: functionId ?? '__pending__',
- 'status_code.error': true,
- },
- limit
- )
+): string => {
+ const id = escapeSqlString(functionId ?? '__pending__')
+ return `
+-- errors since last deploy
+select
+ toUnixTimestamp64Micro(timestamp) as timestamp,
+ event_message,
+ log_attributes['request.method'] as method,
+ log_attributes['response.status_code'] as status_code,
+ toFloat64OrZero(log_attributes['execution_time_ms']) as execution_time_ms,
+ log_attributes['execution_id'] as execution_id
+from logs
+where
+ source = 'function_edge_logs'
+ and log_attributes['function_id'] = '${id}'
+ and toInt32OrZero(log_attributes['response.status_code']) >= 500
+order by timestamp desc
+limit ${limit}
+`.trim()
+}
-export const getSinceLastDeployInvocationCountSql = (functionId?: string) =>
- genCountQuery(LOGS_TABLES.fn_edge, {
- function_id: functionId ?? '__pending__',
- })
+export const getSinceLastDeployInvocationCountSql = (functionId?: string): string => {
+ const id = escapeSqlString(functionId ?? '__pending__')
+ return `-- invocation count since last deploy
+select count() as count from logs where source = 'function_edge_logs' and log_attributes['function_id'] = '${id}'`
+}
export const getSinceLastDeployInvocationCount = (invocationCountRows: LogData[]) => {
const count = Number(invocationCountRows[0]?.count ?? 0)
@@ -238,16 +247,29 @@ export const getFunctionRuntimeLogsSql = ({
functionId?: string
executionIds: string[]
limit?: number
-}) => {
+}): string => {
if (!functionId || executionIds.length === 0) return ''
+ const escapedFunctionId = escapeSqlString(functionId)
const escapedExecutionIds = executionIds.map((id) => `'${escapeSqlString(id)}'`).join(', ')
- return `select id, function_logs.timestamp, event_message, metadata.event_type, metadata.function_id, metadata.execution_id, metadata.level from function_logs
-cross join unnest(metadata) as metadata
-where metadata.function_id = '${escapeSqlString(functionId)}' and metadata.execution_id in (${escapedExecutionIds})
+ return `
+-- runtime logs for error groups
+select
+ toUnixTimestamp64Micro(timestamp) as timestamp,
+ event_message,
+ log_attributes['level'] as level,
+ log_attributes['event_type'] as event_type,
+ log_attributes['function_id'] as function_id,
+ log_attributes['execution_id'] as execution_id
+from logs
+where
+ source = 'function_logs'
+ and log_attributes['function_id'] = '${escapedFunctionId}'
+ and log_attributes['execution_id'] in (${escapedExecutionIds})
order by timestamp desc
-limit ${limit}`
+limit ${limit}
+`.trim()
}
export const getRecentErrorGroupsBase = (
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionUsageSection.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionUsageSection.tsx
index 1de5fbffd0c..99f4206a22f 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionUsageSection.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionUsageSection.tsx
@@ -115,7 +115,7 @@ export const EdgeFunctionUsageSection = ({
{
y: averageCpuTime,
label: 'average',
- stroke: 'hsl(var(--foreground-default))',
+ stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
@@ -140,7 +140,7 @@ export const EdgeFunctionUsageSection = ({
{
y: averageMemoryUsage,
label: 'average',
- stroke: 'hsl(var(--foreground-default))',
+ stroke: 'var(--foreground-default)',
strokeWidth: 1.5,
},
]}
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
index 399a8692a88..e88ccfffdac 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionRecentInvocations.tsx
@@ -3,8 +3,9 @@ import { Clock, ExternalLink, RefreshCw } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Button, cn } from 'ui'
-import { Admonition, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { parseEdgeFunctionEventMessage } from './EdgeFunctionRecentInvocations.utils'
import { LOGS_TABLES } from '@/components/interfaces/Settings/Logs/Logs.constants'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
index 510261b96d4..8dd395def72 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EdgeFunctionSecret.tsx
@@ -15,7 +15,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import type { ProjectSecret } from '@/data/secrets/secrets-query'
diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
index 766d4e120be..c8e31584ba5 100644
--- a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
+++ b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -5,7 +5,8 @@ import { Check, Copy } from 'lucide-react'
import { useRouter } from 'next/router'
import { useMemo, useState, type MouseEvent } from 'react'
import { cn, copyToClipboard, TableCell, TableRow } from 'ui'
-import { ShimmeringLoader, TimestampInfo } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { formatErrorRate } from './EdgeFunctionsListItem.utils'
import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
diff --git a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
index 95f379cbfcd..e8be56338ff 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/EmptyStates.tsx
@@ -13,7 +13,7 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { ShimmeringCard } from './ShimmeringCard'
import { HomeIcon } from '@/components/layouts/Navigation/LayoutHeader/HomeIcon'
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
index be8d7986a29..9fd6fdf81a2 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectList.tsx
@@ -25,7 +25,7 @@ import {
toTableHeadSortValue,
} from './ProjectListSort.utils'
import { ProjectTableRow } from './ProjectTableRow'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
import { useGitHubConnectionsQuery } from '@/data/integrations/github-connections-query'
import { useOrgIntegrationsQuery } from '@/data/integrations/integrations-query-org-only'
diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
index 8a0e8700e1d..3ab9ae62a6b 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx
@@ -13,7 +13,7 @@ import {
TableCell,
TableRow,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { inferProjectStatus } from './ProjectCard.utils'
import { ProjectCardStatus } from './ProjectCardStatus'
diff --git a/apps/studio/components/interfaces/Home/ServiceStatus.tsx b/apps/studio/components/interfaces/Home/ServiceStatus.tsx
deleted file mode 100644
index 367f2f6e58f..00000000000
--- a/apps/studio/components/interfaces/Home/ServiceStatus.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { useParams } from 'common'
-import dayjs from 'dayjs'
-import { AlertTriangle, CheckCircle2, ChevronRight, Loader2 } from 'lucide-react'
-import Link from 'next/link'
-import { useEffect, useState } from 'react'
-import { Button, InfoIcon, Popover, PopoverContent, PopoverTrigger } from 'ui'
-
-import { InlineLink } from '@/components/ui/InlineLink'
-import { useBranchesQuery } from '@/data/branches/branches-query'
-import { useEdgeFunctionServiceStatusQuery } from '@/data/service-status/edge-functions-status-query'
-import {
- ProjectServiceStatus as APIProjectServiceStatus,
- ServiceHealthResponse,
- useProjectServiceStatusQuery,
-} from '@/data/service-status/service-status-query'
-import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-import { DOCS_URL } from '@/lib/constants'
-
-const SERVICE_STATUS_THRESHOLD = 5 // minutes
-
-export type ProjectServiceStatus = APIProjectServiceStatus | 'DISABLED'
-
-export const StatusMessage = ({
- status,
- isLoading,
- isProjectNew,
-}: {
- isLoading: boolean
- isProjectNew: boolean
- status?: ProjectServiceStatus
-}) => {
- if (isLoading) return 'Checking status'
- if (status === 'DISABLED') return 'Disabled'
- if (status === 'UNHEALTHY') return 'Unhealthy'
- if (status === 'COMING_UP') return 'Coming up...'
- if (status === 'ACTIVE_HEALTHY') return 'Healthy'
- // isProjectNew has to be after all other statuses
- if (isProjectNew) return 'Coming up...'
- if (status) return status
- return 'Unable to connect'
-}
-
-const iconProps = {
- size: 18,
- strokeWidth: 1.5,
-}
-const LoaderIcon = () => <Loader2 {...iconProps} className="animate-spin" />
-const AlertIcon = () => <AlertTriangle {...iconProps} />
-const CheckIcon = () => <CheckCircle2 {...iconProps} className="text-brand" />
-
-export const StatusIcon = ({
- isLoading,
- isProjectNew,
- projectStatus,
-}: {
- isLoading: boolean
- isProjectNew: boolean
- projectStatus?: ProjectServiceStatus
-}) => {
- //
- if (projectStatus === 'ACTIVE_HEALTHY') return <CheckIcon />
- if (projectStatus === 'DISABLED') return <AlertIcon />
- if (projectStatus === 'COMING_UP') return <LoaderIcon />
- if (isLoading) return <LoaderIcon />
- // isProjectNew has to be above UNHEALTHY because in the first few minutes, some services might be starting up and show as UNHEALTHY
- if (isProjectNew) return <LoaderIcon />
- if (projectStatus === 'UNHEALTHY') return <AlertIcon />
- return <AlertIcon />
-}
-
-/*
- * Extract the db_schema from the response.info object
- */
-export const extractDbSchema = (response: ServiceHealthResponse | undefined) => {
- if (response?.info && 'db_schema' in response.info) {
- return response.info.db_schema
- }
- return undefined
-}
-
-export const ServiceStatus = () => {
- const { ref } = useParams()
- const { data: project } = useSelectedProjectQuery()
- const [open, setOpen] = useState(false)
-
- const {
- projectAuthAll: authEnabled,
- projectEdgeFunctionAll: edgeFunctionsEnabled,
- realtimeAll: realtimeEnabled,
- projectStorageAll: storageEnabled,
- } = useIsFeatureEnabled([
- 'project_auth:all',
- 'project_edge_function:all',
- 'realtime:all',
- 'project_storage:all',
- ])
-
- const isBranch = project?.parentRef !== project?.ref
-
- // Get branches data when on a branch
- const { data: branches, isPending: isBranchesLoading } = useBranchesQuery(
- { projectRef: isBranch ? project?.parentRef : undefined },
- {
- enabled: isBranch,
- refetchInterval: (query) => {
- const data = query.state.data
- if (!data) return false
- const currentBranch = data.find((branch) => branch.project_ref === ref)
- return ['FUNCTIONS_DEPLOYED', 'MIGRATIONS_FAILED', 'FUNCTIONS_FAILED'].includes(
- currentBranch?.status || ''
- )
- ? false
- : 5000
- },
- }
- )
-
- const currentBranch = isBranch
- ? branches?.find((branch) => branch.project_ref === ref)
- : undefined
-
- // [Joshen] Need pooler service check eventually
- const {
- data: status,
- isPending: isLoading,
- refetch: refetchServiceStatus,
- } = useProjectServiceStatusQuery(
- {
- projectRef: ref,
- },
- {
- refetchInterval: (query) => {
- const data = query.state.data
- const isServiceUnhealthy = data?.some((service) => {
- // if the postgrest service has an empty schema, the user chose to turn off postgrest during project creation
- if (service.name === 'rest' && extractDbSchema(service) === '') {
- return false
- }
- if (service.status === 'ACTIVE_HEALTHY') {
- return false
- }
- return true
- })
-
- return isServiceUnhealthy ? 5000 : false
- },
- }
- )
- const { data: edgeFunctionsStatus, refetch: refetchEdgeFunctionServiceStatus } =
- useEdgeFunctionServiceStatusQuery(
- {
- projectRef: ref,
- },
- {
- refetchInterval: (query) => {
- const data = query.state.data
- return !data?.healthy ? 5000 : false
- },
- }
- )
-
- const authStatus = status?.find((service) => service.name === 'auth')
- const restStatus = status?.find((service) => service.name === 'rest')
- const realtimeStatus = status?.find((service) => service.name === 'realtime')
- const storageStatus = status?.find((service) => service.name === 'storage')
- const dbStatus = status?.find((service) => service.name === 'db')
-
- // [Joshen] Need individual troubleshooting docs for each service eventually for users to self serve
- const services: {
- name: string
- error?: string
- docsUrl?: string
- isLoading: boolean
- status: ProjectServiceStatus
- logsUrl: string
- }[] = [
- {
- name: 'Database',
- error: undefined,
- docsUrl: undefined,
- isLoading: isLoading,
- status: dbStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/postgres-logs',
- },
- {
- name: 'PostgREST',
- error: restStatus?.error,
- docsUrl: undefined,
- isLoading,
- // If PostgREST has an empty schema, it means it's been disabled
- status: extractDbSchema(restStatus) === '' ? 'DISABLED' : (restStatus?.status ?? 'UNHEALTHY'),
- logsUrl: '/logs/postgrest-logs',
- },
- ...(authEnabled
- ? [
- {
- name: 'Auth',
- error: authStatus?.error,
- docsUrl: undefined,
- isLoading,
- status: authStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/auth-logs',
- },
- ]
- : []),
- ...(realtimeEnabled
- ? [
- {
- name: 'Realtime',
- error: realtimeStatus?.error,
- docsUrl: undefined,
- isLoading,
- status: realtimeStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/realtime-logs',
- },
- ]
- : []),
- ...(storageEnabled
- ? [
- {
- name: 'Storage',
- error: storageStatus?.error,
- docsUrl: undefined,
- isLoading,
- status: storageStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/storage-logs',
- },
- ]
- : []),
- ...(edgeFunctionsEnabled
- ? [
- {
- name: 'Edge Functions',
- error: undefined,
- docsUrl: `${DOCS_URL}/guides/functions/troubleshooting`,
- isLoading,
- status: edgeFunctionsStatus?.healthy
- ? 'ACTIVE_HEALTHY'
- : isLoading
- ? 'COMING_UP'
- : ('UNHEALTHY' as ProjectServiceStatus),
- logsUrl: '/logs/edge-functions-logs',
- },
- ]
- : []),
- ...(isBranch
- ? [
- {
- name: 'Migrations',
- error: undefined,
- docsUrl: undefined,
- isLoading: isBranchesLoading,
- status: (currentBranch?.status === 'FUNCTIONS_DEPLOYED'
- ? 'ACTIVE_HEALTHY'
- : currentBranch?.status === 'FUNCTIONS_FAILED' ||
- currentBranch?.status === 'MIGRATIONS_FAILED'
- ? 'UNHEALTHY'
- : 'COMING_UP') as ProjectServiceStatus,
- logsUrl: '/branches',
- },
- ]
- : []),
- ]
-
- const isMigrationLoading =
- isBranchesLoading ||
- currentBranch?.status === 'CREATING_PROJECT' ||
- currentBranch?.status === 'RUNNING_MIGRATIONS'
- const isLoadingChecks = services.some((service) => service.isLoading)
- // We consider a service operational if it's healthy or intentionally disabled
- const allServicesOperational = services.every(
- (service) => service.status === 'ACTIVE_HEALTHY' || service.status === 'DISABLED'
- )
-
- // If the project is less than 5 minutes old, and status is not operational, then it's likely the service is still starting up
- const isProjectNew =
- dayjs.utc().diff(dayjs.utc(project?.inserted_at), 'minute') < SERVICE_STATUS_THRESHOLD ||
- project?.status === 'COMING_UP'
-
- useEffect(() => {
- let timer: any
-
- if (isProjectNew) {
- const secondsSinceProjectCreated = dayjs
- .utc()
- .diff(dayjs.utc(project?.inserted_at), 'seconds')
- const remainingTimeTillNextCheck = SERVICE_STATUS_THRESHOLD * 60 - secondsSinceProjectCreated
-
- timer = setTimeout(() => {
- refetchServiceStatus()
- refetchEdgeFunctionServiceStatus()
- }, remainingTimeTillNextCheck * 1000)
- }
-
- return () => {
- clearTimeout(timer)
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [isProjectNew])
-
- return (
- <Popover modal={false} open={open} onOpenChange={setOpen}>
- <PopoverTrigger asChild>
- <Button
- variant="default"
- icon={
- isLoadingChecks || (!allServicesOperational && isProjectNew && isMigrationLoading) ? (
- <LoaderIcon />
- ) : (
- <div
- className={`w-2 h-2 rounded-full ${
- allServicesOperational ? 'bg-brand' : 'bg-warning'
- }`}
- />
- )
- }
- >
- {isBranch ? 'Branch' : 'Project'} Status
- </Button>
- </PopoverTrigger>
- <PopoverContent className="p-0 w-56" side="bottom" align="center">
- {services.map((service) => (
- <Link
- href={`/project/${ref}${service.logsUrl}`}
- key={service.name}
- className="transition px-3 py-2 text-xs flex items-center justify-between border-b last:border-none group relative hover:bg-surface-300"
- >
- <div className="flex gap-x-2">
- <StatusIcon
- isLoading={service.isLoading}
- isProjectNew={isProjectNew}
- projectStatus={service.status}
- />
- <div className="flex-1">
- <p>{service.name}</p>
- <p className="text-foreground-light flex items-center gap-1">
- <StatusMessage
- isLoading={service.isLoading}
- isProjectNew={isProjectNew}
- status={service.status}
- />
- </p>
- </div>
- </div>
- <div className="flex items-center gap-x-1 transition opacity-0 group-hover:opacity-100">
- <span className="text-xs text-foreground">View logs</span>
- <ChevronRight size={14} className="text-foreground" />
- </div>
- </Link>
- ))}
- {!allServicesOperational && (
- <div className="flex gap-2 text-xs text-foreground-light px-3 py-2">
- <div className="mt-0.5">
- <InfoIcon />
- </div>
- <div className="flex flex-col gap-y-1">
- <p>
- {isProjectNew ? 'New' : 'Recently restored'} projects can take up to{' '}
- {SERVICE_STATUS_THRESHOLD} minutes to become fully operational.
- </p>
- <p>
- If services stay unhealthy, refer to our{' '}
- <InlineLink
- href={`${DOCS_URL}/guides/troubleshooting/project-status-reports-unhealthy-services`}
- >
- docs
- </InlineLink>{' '}
- for more information.
- </p>
- </div>
- </div>
- )}
- </PopoverContent>
- </Popover>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
index bee4c722762..bacefa744fc 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
@@ -35,8 +35,8 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { CodeBlock } from 'ui-patterns/CodeBlock'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { useDatabaseCronJobRunCommandMutation } from '@/data/database-cron-jobs/database-cron-job-run-mutation'
import { CronJob } from '@/data/database-cron-jobs/database-cron-jobs-infinite-query'
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
index d5d3c468247..14cca6a3651 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.DataGrid.tsx
@@ -3,7 +3,7 @@ import DataGrid, { Row, type Column } from 'react-data-grid'
import { cn } from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import type { CronJob } from '@/data/database-cron-jobs/database-cron-jobs-infinite-query'
import type { ResponseError } from '@/types'
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx
deleted file mode 100644
index fa732dd735a..00000000000
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.EstimateErrorNotice.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Button } from 'ui'
-import { Admonition } from 'ui-patterns/admonition'
-
-interface CronJobRunDetailsEstimateErrorNoticeProps {
- error?: Error | null
- isRetrying?: boolean
- onRetry?: () => void
-}
-
-export const CronJobRunDetailsEstimateErrorNotice = ({
- error,
- isRetrying,
- onRetry,
-}: CronJobRunDetailsEstimateErrorNoticeProps) => {
- return (
- <Admonition
- type="warning"
- title="Error displaying cron jobs"
- description="There was an error displaying cron jobs. Please try again."
- className="max-w-3xl w-full"
- >
- <div className="space-y-3 text-sm">
- {error?.message && (
- <p className="text-foreground-light wrap-break-word">
- Error message: <code className="text-xs">{error.message}</code>
- </p>
- )}
- {onRetry && (
- <Button
- variant="default"
- loading={isRetrying}
- disabled={isRetrying}
- className="mt-1"
- onClick={onRetry}
- >
- Retry check
- </Button>
- )}
- </div>
- </Admonition>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
index 54ebfc7e798..75c65f5d2f8 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
@@ -4,9 +4,9 @@ import { CircleCheck, CircleX, Loader } from 'lucide-react'
import { useMemo } from 'react'
import DataGrid, { Column, Row } from 'react-data-grid'
import { cn, LoadingLine, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { calculateDuration, formatDate } from './CronJobs.utils'
import CronJobsEmptyState from './CronJobsEmptyState'
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
index 6f6850121d8..a58c636f2e4 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/SqlFunctionSection.tsx
@@ -4,7 +4,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { CreateCronJobForm } from './CreateCronJobSheet/CreateCronJobSheet.constants'
import FunctionSelector from '@/components/ui/FunctionSelector'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
interface SqlFunctionSectionProps {
form: UseFormReturn<CreateCronJobForm>
diff --git a/apps/studio/components/interfaces/Integrations/DataApi/DocViewLoading.tsx b/apps/studio/components/interfaces/Integrations/DataApi/DocViewLoading.tsx
index 87d27d4d4fa..619b13cd779 100644
--- a/apps/studio/components/interfaces/Integrations/DataApi/DocViewLoading.tsx
+++ b/apps/studio/components/interfaces/Integrations/DataApi/DocViewLoading.tsx
@@ -1,4 +1,4 @@
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
export const DocViewLoading = () => {
return (
diff --git a/apps/studio/components/interfaces/Integrations/DataApi/DocsTab.tsx b/apps/studio/components/interfaces/Integrations/DataApi/DocsTab.tsx
index 3e8af99f7f8..53e2f634cd9 100644
--- a/apps/studio/components/interfaces/Integrations/DataApi/DocsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/DataApi/DocsTab.tsx
@@ -1,6 +1,6 @@
import { useParams } from 'common'
import { useMemo, useState } from 'react'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import type { ShowApiKey } from '../../Docs/Docs.types'
import { LangSelector } from '../../Docs/LangSelector'
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
index e6525e61d85..b5a29d8f9e9 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/GraphiQLTab.tsx
@@ -1,5 +1,5 @@
-import 'graphiql/style.css'
import 'graphiql/setup-workers/webpack'
+import './graphiql-styles.css'
import { useMonaco, type GraphiQLPlugin } from '@graphiql/react'
import { createGraphiQLFetcher, Fetcher } from '@graphiql/toolkit'
@@ -19,6 +19,7 @@ import { IntrospectionEnabledNotice } from './IntrospectionEnabledNotice'
import { usePgGraphqlIntrospectionStatus } from './usePgGraphqlIntrospectionStatus'
import { getTheme } from '@/components/interfaces/App/MonacoThemeProvider'
import { RoleImpersonationSelector } from '@/components/interfaces/RoleImpersonationSelector'
+import { BASE_MONACO_EDITOR_OPTIONS } from '@/components/ui/CodeEditor/CodeEditor.utils'
import { useSessionAccessTokenQuery } from '@/data/auth/session-access-token-query'
import { useProjectPostgrestConfigQuery } from '@/data/config/project-postgrest-config-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
@@ -33,36 +34,46 @@ const ROLE_IMPERSONATION_PLUGIN: GraphiQLPlugin = {
content: () => <RoleImpersonationSelector orientation="vertical" />,
}
-const MONACO_THEME = { dark: 'supabase-graphql-dark', light: 'supabase-graphql-light' }
-
-const GraphiQLMonacoTheme = ({ resolvedTheme }: { resolvedTheme: 'dark' | 'light' }) => {
+/**
+ * GraphiQL (@graphiql/react) bundles its own Monaco instance, separate from the AMD-loaded one
+ * the rest of Studio uses — they only share the global `.monaco-*` CSS class names, not JS state.
+ * So theme/options applied here via @graphiql/react's `useMonaco` touch GraphiQL's editors only
+ * and never leak onto Studio's editors
+ */
+const GraphiQLEditorSettings = ({ theme }: { theme: 'dark' | 'light' }) => {
const { monaco } = useMonaco()
useEffect(() => {
if (!monaco) return
- const dark = getTheme('dark')
- const light = getTheme('light')
- monaco.editor.defineTheme(MONACO_THEME.dark, {
- ...dark,
- rules: [...dark.rules, { token: 'argument.identifier.gql', foreground: '908aff' }],
- })
- monaco.editor.defineTheme(MONACO_THEME.light, {
- ...light,
- rules: [...light.rules, { token: 'argument.identifier.gql', foreground: '6c69ce' }],
- // Match the dashboard's bg-default in light mode so the editor doesn't read
- // as a darker square against the surrounding UI.
- colors: { ...light.colors, 'editor.background': '#fcfcfc' },
- })
- monaco.editor.setTheme(MONACO_THEME[resolvedTheme])
- }, [monaco, resolvedTheme])
+ monaco.editor.defineTheme('supabase', getTheme(theme))
+ monaco.editor.setTheme('supabase')
+ }, [monaco, theme])
+
+ useEffect(() => {
+ if (!monaco) return
+ const options = {
+ ...BASE_MONACO_EDITOR_OPTIONS,
+ padding: { top: 16, bottom: 16 },
+ glyphMargin: true,
+ }
+ const applyToEditor = (editor: ReturnType<typeof monaco.editor.getEditors>[number]) =>
+ editor.updateOptions(options)
+
+ monaco.editor.getEditors().forEach(applyToEditor)
+ const disposable = monaco.editor.onDidCreateEditor(applyToEditor)
+
+ return () => disposable.dispose()
+ }, [monaco])
return null
}
export const GraphiQLTab = () => {
- const { resolvedTheme } = useTheme()
const { ref: projectRef } = useParams()
+
+ const { resolvedTheme } = useTheme()
const currentTheme = resolvedTheme?.includes('dark') ? 'dark' : 'light'
+
const { data: accessToken } = useSessionAccessTokenQuery({ enabled: IS_PLATFORM })
const { data: project } = useSelectedProjectQuery()
@@ -144,7 +155,7 @@ export const GraphiQLTab = () => {
return (
<div className="flex flex-col h-full">
- <GraphiQLMonacoTheme resolvedTheme={currentTheme} />
+ <GraphiQLEditorSettings theme={currentTheme} />
{notice === 'opt-in' && (
<IntrospectionDisabledNotice
schema={DEFAULT_INTROSPECTION_SCHEMA}
@@ -164,7 +175,7 @@ export const GraphiQLTab = () => {
key={graphiqlKey}
fetcher={fetcher}
forcedTheme={currentTheme}
- editorTheme={MONACO_THEME}
+ editorTheme={{ dark: 'supabase', light: 'supabase' }}
className={styles.root}
plugins={plugins}
/>
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/graphiql-styles.css b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql-styles.css
new file mode 100644
index 00000000000..7d157c90be9
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql-styles.css
@@ -0,0 +1,19 @@
+/*
+ * GraphiQL v5 bundles a full copy of Monaco's CSS into its stylesheet. Studio's
+ * SQL editor (and every other Monaco instance) shares the same global Monaco
+ * instance, and those `.monaco-*` rules are unscoped, so importing GraphiQL's
+ * stylesheet directly leaks its Monaco theme onto the SQL editor — whichever
+ * stylesheet happens to load last wins the cascade.
+ *
+ * Importing it into a low-priority cascade layer fixes this without touching the
+ * vendored bundle: Studio's own Monaco styles (the runtime-injected monaco-editor
+ * CSS and styles/monaco.css) are unlayered, and unlayered rules always beat any
+ * layered rule. So Studio's Monaco styling wins everywhere — including inside
+ * GraphiQL's editor, which is the consistent behavior we want.
+ *
+ * GraphiQL's own UI (the `.graphiql-container` selectors) still applies: the
+ * `graphiql` layer is registered after Tailwind's layers (this file loads after
+ * globals.css), so it outranks Tailwind's base/component resets just as the
+ * unlayered import did before.
+ */
+@import 'graphiql/style.css' layer(graphiql);
diff --git a/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
index ff28fedbefd..9dd88c5be62 100644
--- a/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
+++ b/apps/studio/components/interfaces/Integrations/GraphQL/graphiql.module.css
@@ -24,6 +24,7 @@
.root :global(.graphiql-horizontal-drag-bar) {
@apply border-l border-default;
+ background-color: var(--graphiql-response-bg);
}
.root :global(.graphiql-horizontal-drag-bar:hover::after) {
@@ -34,6 +35,27 @@
border-left: 0;
}
+/* Restore Monaco's intended clipping of the editor body. Monaco renders the gutter as an
+ * oversized, scroll-offset `.margin` (absolutely positioned, opaque background) and relies
+ * on `.overflow-guard { overflow: hidden }` to clip it to the editor box. Here the guard
+ * ends up `overflow: visible` via an inline style Monaco's layout sets at runtime, so the
+ * white gutter escapes the editor and paints over the page above it. An inline style beats
+ * any external selector regardless of specificity, so `!important` is required to win — it
+ * is not a specificity shortcut here. Scoped to `.root` so the SQL editor's Monaco is
+ * untouched. Autocomplete/hover popups live in `.overflowingContentWidgets` (a sibling of
+ * `.overflow-guard`), so they are not clipped. */
+.root :global(.monaco-editor .overflow-guard) {
+ @apply !overflow-hidden;
+}
+
+/* Drop GraphiQL's default 16px padding around the query editor so the editor sits flush to
+ * its container. This keeps Monaco's scroll shadow (`.scroll-decoration`, pinned to the
+ * editor's top edge) full-bleed instead of floating inset. The content's own breathing room
+ * is restored via Monaco's `padding`/`glyphMargin` options in GraphiQLTab.tsx. */
+.root :global(.graphiql-query-editor) {
+ @apply p-0;
+}
+
/* Lift the response panel above the editor surface so the two read as separate panes.
* The token differs per theme because the editor sits at a different baseline lightness
* in each (~12% L in dark, ~94% L in light), so a single surface token can't lift it
@@ -42,17 +64,10 @@
.root :global(.graphiql-response .monaco-editor),
.root :global(.graphiql-response .monaco-editor .margin),
.root :global(.graphiql-response .monaco-editor .monaco-editor-background) {
+ @apply pt-0;
background-color: var(--graphiql-response-bg) !important;
}
-/* Editor-to-response drag bar: blend it into the response side so it doesn't read as
- * a third color sandwiched between the two panes. The plugin-to-main drag bar is left
- * alone — it sits next to the editor surface and our default border there is fine. */
-.root :global(.graphiql-editors + .graphiql-horizontal-drag-bar) {
- background-color: var(--graphiql-response-bg);
- border-left: 0;
-}
-
.root :global(.graphiql-button),
.root :global(button.graphiql-button),
.root :global(.graphiql-un-styled),
@@ -84,21 +99,20 @@
--border-radius-8: 0;
--border-radius-12: 0;
--popover-box-shadow: none;
+ /* Theme-independent: the Supabase green, and a response surface whose own token
+ * (--background-surface-300) already resolves per theme — so only --color-base below
+ * needs to branch on light/dark. */
+ --color-primary: 153, 50%, 50%;
+ --graphiql-response-bg: var(--background-surface-300);
}
:global(body.graphiql-dark) .root {
/* HSL form of #1f1f1f, matches the editor.background returned by getTheme('dark') */
--color-base: 0, 0%, 12%;
- --color-primary: 153, 50%, 50%;
- --graphiql-response-bg: hsl(var(--background-surface-300));
}
:global(body.graphiql-light) .root {
- /* HSL form of #fcfcfc, matches the dashboard bg-default and the editor.background
- * we override to in GraphiQLTab.tsx so the editor reads as part of the surrounding UI. */
+ /* HSL form of #fcfcfc, matches the dashboard bg-default so the editor reads as part
+ * of the surrounding UI. */
--color-base: 0, 0%, 98.8%;
- --color-primary: 153, 50%, 50%;
- /* Drop the response below the editor in light mode (inverse of dark) so it reads as
- * the lower / "data" surface rather than the lifted one. */
- --graphiql-response-bg: hsl(var(--background-surface-300));
}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/ConnectedResourceGroupSection.tsx b/apps/studio/components/interfaces/Integrations/Integration/ConnectedResourceGroupSection.tsx
index 1b70579d7e6..b4d4a519d35 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/ConnectedResourceGroupSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/ConnectedResourceGroupSection.tsx
@@ -1,6 +1,6 @@
import { Settings, Trash2, TriangleAlert } from 'lucide-react'
import { Badge, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { type ResourceGroup } from './MarketplaceIntegrationSettingsTab.types'
import { type ConnectedResource } from '@/components/interfaces/Integrations/Landing/Landing.utils'
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/index.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/index.tsx
deleted file mode 100644
index d67884ead4a..00000000000
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/index.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { useParams } from 'common'
-import { PropsWithChildren } from 'react'
-import { cn } from 'ui'
-
-import { useAvailableIntegrations } from '../../Landing/useAvailableIntegrations'
-import { FilesViewer } from './FilesViewer'
-import { MarkdownContent } from './MarkdownContent'
-import { InlineLinkClassName } from '@/components/ui/InlineLink'
-
-const getSiteUrlLabel = (url: string | undefined | null) => {
- if (!url) return undefined
-
- try {
- return new URL(url).origin
- } catch (error) {
- return undefined
- }
-}
-
-const isGithubHost = (url: string | undefined | null) => {
- if (!url) return false
- try {
- const hostname = new URL(url).hostname.toLowerCase()
- return hostname === 'github.com' || hostname.endsWith('.github.com')
- } catch (error) {
- return false
- }
-}
-
-/**
- * [Joshen] This will serve as the overview tab for remotely fetched integrations
- */
-export const IntegrationOverviewTabV2 = ({ children }: PropsWithChildren) => {
- const { id } = useParams()
-
- const { data: allIntegrations } = useAvailableIntegrations()
- const integration = allIntegrations.find((i) => i.id === id)
-
- if (!integration) {
- return <div>Unsupported integration type</div>
- }
-
- const { type, content, docsUrl, siteUrl, files = [] } = integration
-
- const docsUrlLabel = docsUrl?.includes('supabase.com/docs')
- ? 'Supabase Docs'
- : isGithubHost(docsUrl)
- ? 'GitHub Docs'
- : 'Documentation'
- const siteUrlLabel = getSiteUrlLabel(siteUrl)
-
- return (
- <div className="grid grid-cols-3 gap-x-8 px-10 py-8">
- <div className="col-span-2 flex flex-col gap-y-8">
- {files.length > 0 && <FilesViewer files={files} />}
- <MarkdownContent integrationId={id} content={content} />
- {children}
- </div>
-
- <div className="text-sm col-span-1 flex flex-col gap-y-8">
- <div className="flex flex-col gap-y-4">
- <p>Details</p>
-
- <div className="flex flex-col gap-y-1">
- <p className="font-mono uppercase text-foreground-light">Type</p>
- <p className="capitalize">{type === 'oauth' ? 'OAuth' : type.replaceAll('_', ' ')}</p>
- </div>
-
- <div className="flex flex-col gap-y-1">
- <p className="font-mono uppercase text-foreground-light">Built by</p>
- <p className={cn(!integration.author.name && 'text-foreground-lighter')}>
- {integration.author.name || 'Unknown Author'}
- </p>
- </div>
-
- {docsUrl && (
- <div className="flex flex-col gap-y-1">
- <p className="font-mono uppercase text-foreground-light">Docs</p>
- <a target="_blank" rel="noreferrer" href={docsUrl} className={InlineLinkClassName}>
- {docsUrlLabel}
- </a>
- </div>
- )}
-
- {siteUrl && (
- <div className="flex flex-col gap-y-1">
- <p className="font-mono uppercase text-foreground-light">Website</p>
- <a target="_blank" rel="noreferrer" href={siteUrl} className={InlineLinkClassName}>
- {siteUrlLabel}
- </a>
- </div>
- )}
- </div>
-
- {/* Subsequent other actions here */}
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx b/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx
deleted file mode 100644
index 5369bef2347..00000000000
--- a/apps/studio/components/interfaces/Integrations/Integration/IntegrationOverviewTabWrapper.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * [Joshen] This is just to dynamically render either the V1 or V2 Overview tab based
- * on the marketplace feature flag
- */
-
-import { PropsWithChildren } from 'react'
-
-import { IntegrationOverviewTab, IntegrationOverviewTabProps } from './IntegrationOverviewTab'
-import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-
-export const IntegrationOverviewTabWrapper = (
- props: PropsWithChildren<IntegrationOverviewTabProps>
-) => {
- const isMarketplaceEnabled = useIsMarketplaceEnabled()
-
- if (isMarketplaceEnabled) {
- return null
- }
-
- return <IntegrationOverviewTab {...props} />
-}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/LegacyIntegrationPage.tsx b/apps/studio/components/interfaces/Integrations/Integration/LegacyIntegrationPage.tsx
index ac55db43495..41281c2bf3c 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/LegacyIntegrationPage.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/LegacyIntegrationPage.tsx
@@ -9,9 +9,9 @@ import {
NavMenu,
NavMenuItem,
} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { PageContainer } from 'ui-patterns/PageContainer'
import {
- Admonition,
- PageContainer,
PageHeader,
PageHeaderBreadcrumb,
PageHeaderDescription,
@@ -20,10 +20,9 @@ import {
PageHeaderNavigationTabs,
PageHeaderSummary,
PageHeaderTitle,
- PageSection,
- PageSectionContent,
-} from 'ui-patterns'
-import ShimmeringLoader, { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+} from 'ui-patterns/PageHeader'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { IntegrationLogo } from '@/components/interfaces/Integrations/Integration/IntegrationLogo'
import { InstallOAuthIntegrationButton } from '@/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton'
@@ -135,7 +134,7 @@ const LegacyIntegrationPage = () => {
)}
</PageHeader>
- <div className="mx-auto w-full">{content}</div>
+ <div className="flex-1 min-h-0 mx-auto w-full">{content}</div>
</>
)
}
diff --git a/apps/studio/components/interfaces/Integrations/Integration/MarketplaceIntegrationSettingsTab.tsx b/apps/studio/components/interfaces/Integrations/Integration/MarketplaceIntegrationSettingsTab.tsx
index 3937defb9dc..414eb7eb440 100644
--- a/apps/studio/components/interfaces/Integrations/Integration/MarketplaceIntegrationSettingsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Integration/MarketplaceIntegrationSettingsTab.tsx
@@ -1,7 +1,8 @@
import { useState } from 'react'
import { toast } from 'sonner'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ResourceGroupSection } from './ConnectedResourceGroupSection'
import { type ApiKeyResource, type ResourceGroup } from './MarketplaceIntegrationSettingsTab.types'
diff --git a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
deleted file mode 100644
index 64dea3eec13..00000000000
--- a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { Search } from 'lucide-react'
-import { parseAsString, useQueryState } from 'nuqs'
-import { buttonVariants, cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
-import { Admonition } from 'ui-patterns/admonition'
-import { Input } from 'ui-patterns/DataInputs/Input'
-
-import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
-import { useAvailableIntegrations } from './useAvailableIntegrations'
-import { useInstalledIntegrations } from './useInstalledIntegrations'
-import AlertError from '@/components/ui/AlertError'
-import { NoSearchResults } from '@/components/ui/NoSearchResults'
-import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
-
-type IntegrationCategory = 'all' | 'wrapper' | 'postgres_extensions' | 'custom'
-const CATEGORIES = [
- { key: 'all', label: 'All Integrations' },
- { key: 'wrapper', label: 'Wrappers' },
- { key: 'postgres_extension', label: 'Postgres Modules' },
-] as const
-
-export const AvailableIntegrations = () => {
- const { integrationsWrappers } = useIsFeatureEnabled(['integrations:wrappers'])
-
- const [selectedCategory, setSelectedCategory] = useQueryState(
- 'category',
- parseAsString.withDefault('all').withOptions({ clearOnDefault: true })
- )
- const [search, setSearch] = useQueryState(
- 'search',
- parseAsString.withDefault('').withOptions({ clearOnDefault: true })
- )
-
- const { data: allIntegrations = [] } = useAvailableIntegrations()
- const { installedIntegrations, error, isError, isLoading, isSuccess } = useInstalledIntegrations()
-
- const installedIds = installedIntegrations.map((i) => i.id)
-
- // available integrations for install
- const availableIntegrations = integrationsWrappers
- ? allIntegrations
- : allIntegrations.filter((x) => !x.id.endsWith('_wrapper'))
- const integrationsByCategory =
- selectedCategory === 'all'
- ? availableIntegrations
- : availableIntegrations.filter((i) => i.type === selectedCategory)
-
- const filteredIntegrations = (
- search.length > 0
- ? integrationsByCategory.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()))
- : integrationsByCategory
- ).sort((a, b) => a.name.localeCompare(b.name))
-
- return (
- <>
- <Tabs_Shadcn_
- className="mt-4"
- value={selectedCategory}
- onValueChange={(value) => setSelectedCategory(value as IntegrationCategory)}
- >
- <TabsList_Shadcn_ className="px-4 md:px-10 gap-2 border-b-0 border-t pt-5">
- {CATEGORIES.map((category) => (
- <TabsTrigger_Shadcn_
- key={category.key}
- value={category.key}
- onClick={() => setSelectedCategory(category.key as IntegrationCategory)}
- className={cn(
- buttonVariants({
- size: 'tiny',
- variant: selectedCategory === category.key ? 'default' : 'outline',
- }),
- selectedCategory === category.key ? 'text-foreground' : 'text-foreground-lighter',
- 'rounded-full! px-3'
- )}
- >
- {category.label}
- </TabsTrigger_Shadcn_>
- ))}
- <Input
- value={search}
- onChange={(e) => {
- setSearch(e.target.value)
- setSelectedCategory('all')
- }}
- containerClassName="group w-40 ml-5"
- icon={
- <Search
- size={14}
- className="transition text-foreground-lighter group-hover:text-foreground"
- />
- }
- iconContainerClassName="p-0"
- className="pl-7 rounded-none border-0! border-transparent bg-transparent shadow-none! ring-0! ring-offset-0!"
- placeholder="Search..."
- />
- </TabsList_Shadcn_>
- </Tabs_Shadcn_>
- <div className="p-4 md:p-10 md:py-8 flex flex-col gap-y-5">
- <div className="grid xl:grid-cols-3 2xl:grid-cols-4 gap-x-4 gap-y-3">
- {isLoading &&
- Array.from({ length: 3 }).map((_, idx) => (
- <IntegrationLoadingCard key={`integration-loading-${idx}`} />
- ))}
- {isError && (
- <AlertError
- className="xl:col-span-3 2xl:col-span-4"
- subject="Failed to retrieve available integrations"
- error={error}
- />
- )}
- {isSuccess &&
- filteredIntegrations.map((i) => (
- <IntegrationCard key={i.id} {...i} isInstalled={installedIds.includes(i.id)} />
- ))}
- {isSuccess && search.length > 0 && filteredIntegrations.length === 0 && (
- <NoSearchResults
- className="xl:col-span-3 2xl:col-span-4"
- searchString={search}
- onResetFilter={() => setSearch('')}
- />
- )}
- {isSuccess &&
- selectedCategory !== 'all' &&
- search.length === 0 &&
- filteredIntegrations.length === 0 && (
- <Admonition
- showIcon={false}
- className="xl:col-span-3 2xl:col-span-4"
- type="default"
- title="All integrations in this category are currently in use"
- description="Manage your installed integrations in the section above"
- />
- )}
- </div>
- </div>
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/Landing/InstalledIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/InstalledIntegrations.tsx
deleted file mode 100644
index 7069900b68f..00000000000
--- a/apps/studio/components/interfaces/Integrations/Landing/InstalledIntegrations.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
-import { useInstalledIntegrations } from './useInstalledIntegrations'
-import AlertError from '@/components/ui/AlertError'
-
-export const InstalledIntegrations = () => {
- const { installedIntegrations, error, isLoading, isSuccess, isError } = useInstalledIntegrations()
-
- return (
- <div className="px-4 md:px-10 py-6 flex flex-col gap-y-5">
- <h2>Installed integrations</h2>
- <div className="grid xl:grid-cols-3 2xl:grid-cols-4 gap-x-4 gap-y-3">
- {isLoading &&
- new Array(3)
- .fill(0)
- .map((_, idx) => <IntegrationLoadingCard key={`integration-loading-${idx}`} />)}
- {isError && (
- <AlertError
- className="xl:col-span-3 2xl:col-span-4"
- subject="Failed to retrieve installed integrations"
- error={error}
- />
- )}
- {isSuccess && (
- <>
- {installedIntegrations.length === 0 ? (
- <div className="xl:col-span-3 2xl:col-span-4 w-full h-[110px] border rounded-sm flex items-center justify-center">
- {/* [Joshen] Not high priority imo - very low chance this state will be seen cause Vault is always installed */}
- {/* Some placeholder image when no integrations are installed */}
- <p className="text-sm text-foreground-light">No integrations installed yet</p>
- </div>
- ) : (
- installedIntegrations.map((i) => <IntegrationCard key={i.id} {...i} />)
- )}
- </>
- )}
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx
index e17ce5e617c..32359359859 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/useInstalledIntegrations.tsx
@@ -69,7 +69,7 @@ export const useInstalledIntegrations = () => {
connectionString: project?.connectionString,
})
- const isHooksEnabled = schemas?.some((schema) => schema.name === 'supabase_functions')
+ const isHooksEnabled = schemas.some((schema) => schema.name === 'supabase_functions')
const installedIntegrations = useMemo(() => {
return allIntegrations
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
index 28a3f480a06..f11637ce362 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetail.tsx
@@ -1,8 +1,8 @@
import { ArrowUpRight, BookOpen, Gauge, Settings } from 'lucide-react'
import { useRouter } from 'next/router'
import { Button, cn } from 'ui'
-import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns'
import { Admonition } from 'ui-patterns/admonition'
+import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { MarketplaceDetailBreadrumbs } from './MarketplaceDetailBreadcrumbs'
import { MarketplaceDetailHero } from './MarketplaceDetailHero'
@@ -175,7 +175,9 @@ export const MarketplaceDetail = () => {
<CustomPageComponent />
</div>
) : (
- <CustomPageComponent />
+ <div className="flex-1 min-h-0">
+ <CustomPageComponent />
+ </div>
)
) : null}
</>
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailBreadcrumbs.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailBreadcrumbs.tsx
index b836ac80db5..dd4f56a0613 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailBreadcrumbs.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailBreadcrumbs.tsx
@@ -9,8 +9,8 @@ import {
BreadcrumbPage,
BreadcrumbSeparator,
} from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
import { PageBreadcrumbs, PageBreadcrumbsActions } from 'ui-patterns/PageBreadcrumbs'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
interface MarketplaceDetailBreadrumbsProps {
isLoading?: boolean
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailHero.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailHero.tsx
index c2c67c177d0..b167b0a0681 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailHero.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceDetailHero.tsx
@@ -9,7 +9,7 @@ import {
PageHeaderNavigationTabs,
PageHeaderSummary,
PageHeaderTitle,
-} from 'ui-patterns'
+} from 'ui-patterns/PageHeader'
import { getMarketplaceSource, MarketplaceSourceBadge } from './Marketplace.constants'
import { IntegrationLogo } from '@/components/interfaces/Integrations/Integration/IntegrationLogo'
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx
deleted file mode 100644
index 33ec2b241d5..00000000000
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFeaturedHero.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { ArrowRight, Pause, Play } from 'lucide-react'
-import Link from 'next/link'
-import { useEffect, useRef, useState } from 'react'
-import { Badge, Button, cn } from 'ui'
-
-import { IntegrationLogo } from '../Integration/IntegrationLogo'
-import {
- formatCategoryLabel,
- getMarketplaceSource,
- MarketplaceSourceBadge,
-} from './Marketplace.constants'
-import type { IntegrationDefinition } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-
-const ROTATION_INTERVAL_MS = 7000
-interface MarketplaceFeaturedHeroProps {
- integrations: IntegrationDefinition[]
- installedIds: string[]
- categoryOptions: Array<{ slug: string; name: string }>
-}
-
-export const MarketplaceFeaturedHero = ({
- integrations,
- installedIds,
- categoryOptions,
-}: MarketplaceFeaturedHeroProps) => {
- const { data: project } = useSelectedProjectQuery()
-
- const [activeIndex, setActiveIndex] = useState(0)
- const [isPaused, setIsPaused] = useState(false)
- const [progressKey, setProgressKey] = useState(0)
- const hoveringRef = useRef(false)
- const cardRef = useRef<HTMLDivElement>(null)
-
- useEffect(() => {
- if (integrations.length <= 1) return
- if (isPaused) return
-
- const interval = setInterval(() => {
- if (hoveringRef.current) return
- setActiveIndex((idx) => (idx + 1) % integrations.length)
- }, ROTATION_INTERVAL_MS)
-
- return () => clearInterval(interval)
- }, [integrations.length, isPaused])
-
- useEffect(() => {
- const node = cardRef.current
- if (!node) return
- const enter = () => {
- hoveringRef.current = true
- }
- const leave = () => {
- hoveringRef.current = false
- }
- node.addEventListener('pointerenter', enter)
- node.addEventListener('pointerleave', leave)
- return () => {
- node.removeEventListener('pointerenter', enter)
- node.removeEventListener('pointerleave', leave)
- }
- }, [])
-
- if (integrations.length === 0) return null
-
- const coverColSpan = integrations.length >= 6 ? 2 : 1
-
- const active = integrations[Math.min(activeIndex, integrations.length - 1)]
- const activeCategorySlug = active.categories?.[0]
- const activeCategoryName = activeCategorySlug
- ? formatCategoryLabel(activeCategorySlug, categoryOptions)
- : null
- const isActiveInstalled = installedIds.includes(active.id)
- const source = getMarketplaceSource(active)
-
- const handleTabClick = (idx: number) => {
- setActiveIndex(idx)
- }
-
- return (
- <section>
- <div className="mb-2 flex items-center justify-between">
- <div className="flex items-center gap-2">
- <h2 className="text-sm">Featured integrations</h2>
- </div>
- <Button
- aria-label={isPaused ? 'Resume auto-rotation' : 'Pause auto-rotation'}
- variant="default"
- size="tiny"
- className="px-1.5"
- icon={isPaused ? <Play size={10} /> : <Pause size={10} />}
- onClick={() =>
- setIsPaused((p) => {
- // When resuming, reset the progress animation so it starts from
- // zero and stays in sync with the fresh JS interval.
- if (p) setProgressKey((k) => k + 1)
- return !p
- })
- }
- />
- </div>
- <div
- ref={cardRef}
- className="overflow-hidden rounded-lg border bg-surface-100"
- style={
- {
- '--cover-width': `calc(${coverColSpan * 100}% / ${integrations.length})`,
- } as React.CSSProperties
- }
- >
- <Link
- href={`/project/${project?.ref}/integrations/${active.id}/overview`}
- className="grid gap-0 @3xl:grid-cols-[var(--cover-width)_minmax(0,1fr)] hover:bg-selection/20 transition-colors"
- >
- <div className="relative hidden @3xl:block">
- <FeaturedCover integration={active} categoryLabel={activeCategoryName} />
- </div>
-
- <div className="flex flex-col gap-4 p-5 @3xl:p-6">
- <div className="flex items-start @lg:items-center justify-between gap-4">
- <div className="flex items-center gap-2">
- <div className="flex flex-wrap flex-col @lg:flex-row @lg:items-center gap-2">
- <div className="flex items-center gap-2">
- <IntegrationLogo integration={active} size="h-7 w-7" />
- <span className="text-lg font-medium text-foreground">{active.name}</span>
- </div>
- <div className="flex items-center gap-2">
- <MarketplaceSourceBadge source={source} />
- {active.status && <Badge variant="warning">{active.status}</Badge>}
- </div>
- </div>
- </div>
- {isActiveInstalled && (
- <Badge variant="success" className="mt-2 @lg:mt-0 px-1.5 py-0 text-[10px]">
- Installed
- </Badge>
- )}
- </div>
-
- <div className="grow flex flex-col gap-2">
- <p className="text-base text-foreground-light">{active.description}</p>
- </div>
-
- <div className="mt-1 flex items-center gap-4">
- <span className="inline-flex items-center gap-1.5 text-xs text-foreground">
- {isActiveInstalled ? 'Manage integration' : 'View integration'}
- <ArrowRight size={12} />
- </span>
- </div>
- </div>
- </Link>
-
- <div
- className="grid border-t"
- style={{ gridTemplateColumns: `repeat(${integrations.length}, minmax(0, 1fr))` }}
- >
- {integrations.map((integration, idx) => {
- const isActive = idx === activeIndex
- const slug = integration.categories?.[0]
- const categoryLabel = slug ? formatCategoryLabel(slug, categoryOptions) : null
- return (
- <button
- key={integration.id}
- type="button"
- onClick={() => handleTabClick(idx)}
- className={cn(
- 'group relative flex items-center gap-2.5 border-r p-3 text-left transition-colors last:border-r-0',
- isActive ? 'bg-surface-200' : 'bg-transparent hover:bg-surface-200/60'
- )}
- aria-pressed={isActive}
- >
- <IntegrationLogo
- integration={integration}
- size="h-7 w-7"
- className="hidden sm:flex"
- />
- <div className="min-w-0 flex-1">
- <div
- className={cn(
- 'truncate text-sm',
- isActive ? 'text-foreground' : 'text-foreground-light'
- )}
- >
- {integration.name}
- </div>
- {categoryLabel && (
- <div className="truncate text-xs text-foreground-lighter">{categoryLabel}</div>
- )}
- </div>
- {isActive && (
- <span
- key={`${activeIndex}-${progressKey}`}
- aria-hidden
- className="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 origin-left animate-marketplace-featured-progress bg-brand"
- style={{
- animationDuration: `${ROTATION_INTERVAL_MS}ms`,
- animationPlayState: isPaused ? 'paused' : 'running',
- }}
- />
- )}
- </button>
- )
- })}
- </div>
- </div>
- </section>
- )
-}
-
-interface FeaturedCoverProps {
- integration: IntegrationDefinition
- categoryLabel: string | null
-}
-
-const FeaturedCover = ({ integration, categoryLabel }: FeaturedCoverProps) => (
- <div
- key={integration.id}
- className="relative h-full min-h-[200px] w-full overflow-hidden bg-linear-to-br from-surface-200 via-surface-100 to-surface-300"
- >
- <div
- aria-hidden
- className="absolute inset-0 opacity-60"
- style={{
- backgroundImage:
- 'radial-gradient(circle at 1px 1px, hsl(var(--border-default)/0.6) 1px, transparent 0)',
- backgroundSize: '14px 14px',
- }}
- />
- <div className="absolute inset-0 flex items-center justify-center">
- <div className="relative flex h-24 w-24 items-center justify-center overflow-hidden rounded-2xl border bg-white shadow-sm">
- {integration.icon({ className: 'h-16 w-16' })}
- </div>
- </div>
- {categoryLabel && (
- <span className="absolute bottom-3 left-3 text-[10px] font-medium uppercase tracking-wider text-foreground-lighter">
- {categoryLabel}
- </span>
- )}
- </div>
-)
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
index 7a1059f1c68..db457a62656 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceIndex.tsx
@@ -1,15 +1,15 @@
import { parseAsString, parseAsStringEnum, useQueryState } from 'nuqs'
import { useMemo, useRef } from 'react'
import { Button, Card, ShadowScrollArea, Table, TableBody, TableHeader } from 'ui'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
+import { PageContainer } from 'ui-patterns/PageContainer'
import {
- EmptyStatePresentational,
- PageContainer,
PageHeader,
PageHeaderDescription,
PageHeaderMeta,
PageHeaderSummary,
PageHeaderTitle,
-} from 'ui-patterns'
+} from 'ui-patterns/PageHeader'
import {
EXCLUDED_CATEGORY_SLUGS,
diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceSidebar.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceSidebar.tsx
index 5ffbcf011ba..0b3f9b06dde 100644
--- a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceSidebar.tsx
+++ b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceSidebar.tsx
@@ -3,7 +3,7 @@ import { ArrowUpRight, BookOpen, LayoutGrid, PlusSquare } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { cn } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { useInstalledIntegrations } from '@/components/interfaces/Integrations/Landing/useInstalledIntegrations'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
index b544c7de7c4..eeeb99a4ad4 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PgPartmanCallout.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { usePgPartmanStatus } from '../usePgPartmanStatus'
import { EnableExtensionModal } from '@/components/interfaces/Database/Extensions/EnableExtensionModal'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
index a78591eebad..8524e773ffc 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/RlsSection.tsx
@@ -1,6 +1,6 @@
import { UseFormReturn } from 'react-hook-form'
import { Badge, FormControl, FormField, SheetSection, Switch } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { CreateQueueForm } from './CreateQueueSheet.schema'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
index 0a6d60ef649..26fc8374fc8 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/OverviewTab.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import Link from 'next/link'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
import { RequiredExtensionsSection } from '../Integration/RequiredExtensionsSection'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
index 03419956f64..463829e8318 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
@@ -151,7 +151,7 @@ export const QueueTab = () => {
>
<Link
passHref
- href={`/project/${ref}/auth/policies?search=${queueTable?.id}&schema=pgmq`}
+ href={`/project/${ref}/database/policies?search=${queueTable?.id}&schema=pgmq`}
>
Add RLS policy
</Link>
@@ -176,7 +176,7 @@ export const QueueTab = () => {
>
<Link
passHref
- href={`/project/${ref}/auth/policies?search=${queueTable?.id}&schema=pgmq`}
+ href={`/project/${ref}/database/policies?search=${queueTable?.id}&schema=pgmq`}
>
Auth {queuePolicies.length > 1 ? 'policies' : 'policy'}
</Link>
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx
deleted file mode 100644
index b5aa5e781e4..00000000000
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesRows.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import dayjs from 'dayjs'
-import { includes, sortBy } from 'lodash'
-import { Check, ChevronRight, Loader2, X } from 'lucide-react'
-import { useRouter } from 'next/router'
-
-import { pgmqQueueTable } from './Queues.utils'
-import Table from '@/components/to-be-cleaned/Table'
-import { useQueuesMetricsQuery } from '@/data/database-queues/database-queues-metrics-query'
-import { PostgresQueue } from '@/data/database-queues/database-queues-query'
-import { useTablesQuery } from '@/data/tables/tables-query'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-import { DATETIME_FORMAT } from '@/lib/constants'
-
-interface QueuesRowsProps {
- queues: PostgresQueue[]
- filterString: string
-}
-
-const QueueRow = ({ queue }: { queue: PostgresQueue }) => {
- const router = useRouter()
- const { data: selectedProject } = useSelectedProjectQuery()
-
- const { data: queueTables } = useTablesQuery({
- projectRef: selectedProject?.ref,
- connectionString: selectedProject?.connectionString,
- schema: 'pgmq',
- })
- const queueTable = queueTables?.find((x) => x.name === pgmqQueueTable(queue.queue_name))
- const isRlsEnabled = !!queueTable?.rls_enabled
-
- const { data: metrics, isPending: isLoading } = useQueuesMetricsQuery(
- {
- queueName: queue.queue_name,
- projectRef: selectedProject?.ref,
- connectionString: selectedProject?.connectionString,
- },
- {
- staleTime: 30 * 1000, // 30 seconds, talk with Oli whether this is ok to call every minute
- }
- )
-
- const type = queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'
-
- return (
- <Table.tr
- key={queue.queue_name}
- onClick={() => {
- router.push(
- `/project/${selectedProject?.ref}/integrations/queues/queues/${queue.queue_name}`
- )
- }}
- >
- <Table.td className="truncate">
- <p title={queue.queue_name}>{queue.queue_name}</p>
- </Table.td>
- <Table.td className="table-cell overflow-auto">
- <p title={type.toLocaleLowerCase()} className="truncate">
- {type}
- </p>
- </Table.td>
- <Table.td className="table-cell">
- <div className="flex justify-center">
- {isRlsEnabled ? <Check size={14} className="text-brand" /> : <X size={14} />}
- </div>
- </Table.td>
- <Table.td className="table-cell">
- <p title={queue.created_at}>{dayjs(queue.created_at).format(DATETIME_FORMAT)}</p>
- </Table.td>
- <Table.td className="table-cell">
- <div className="flex justify-center">
- {isLoading ? (
- <Loader2 className="animate-spin" size={16} />
- ) : (
- <p>
- {metrics?.queue_length} {metrics?.method === 'estimated' ? '(Approximate)' : null}
- </p>
- )}
- </div>
- </Table.td>
- <Table.td>
- <div className="flex items-center justify-end">
- <ChevronRight size="18" />
- </div>
- </Table.td>
- </Table.tr>
- )
-}
-
-export const QueuesRows = ({ queues: fetchedQueues, filterString }: QueuesRowsProps) => {
- const filteredQueues = fetchedQueues.filter((x) =>
- includes(x.queue_name.toLowerCase(), filterString.toLowerCase())
- )
- const queues = sortBy(filteredQueues, (func) => func.queue_name.toLocaleLowerCase())
-
- if (queues.length === 0 && filterString.length > 0) {
- return (
- <Table.tr>
- <Table.td colSpan={5}>
- <p className="text-sm text-foreground">No results found</p>
- <p className="text-sm text-foreground-light">
- Your search for "{filterString}" did not return any results
- </p>
- </Table.td>
- </Table.tr>
- )
- }
-
- return (
- <>
- {queues.map((q) => (
- <QueueRow key={q.queue_name} queue={q} />
- ))}
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
index 5739d29f786..3f99d8f060e 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesSettings.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Form, FormControl, FormField, FormItem, Switch } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
index 71c1cca143a..d66eb2ca948 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
@@ -10,7 +10,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { CreateQueueSheet } from './CreateQueueSheet'
import { formatQueueColumns, prepareQueuesForDataGrid } from './Queues.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useQueuesQuery } from '@/data/database-queues/database-queues-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { onSearchInputEscape } from '@/lib/keyboard'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
index 479fc99cc89..5782a9f59b6 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
@@ -7,7 +7,7 @@ import { Badge, Button, cn, ResizableHandle, ResizablePanel, ResizablePanelGroup
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { DATE_FORMAT, MessageDetailsPanel } from './MessageDetailsPanel'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { PostgresQueueMessage } from '@/data/database-queues/database-queue-messages-infinite-query'
import type { ResponseError } from '@/types'
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
index c9bd7983cf8..2b16556511d 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueSettings.tsx
@@ -30,7 +30,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { pgmqArchiveTable, pgmqQueueTable } from '../Queues.utils'
import { getQueueFunctionsMapping } from './Queue.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { useQueuesExposePostgrestStatusQuery } from '@/data/database-queues/database-queues-expose-postgrest-status-query'
import { useDatabaseRolesQuery } from '@/data/database-roles/database-roles-query'
diff --git a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
index 97fa694f710..c8032d15140 100644
--- a/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
+++ b/apps/studio/components/interfaces/Integrations/Vault/Secrets/SecretsManagement.tsx
@@ -21,7 +21,7 @@ import { AddNewSecretModal } from './AddNewSecretModal'
import { DeleteSecretModal } from './DeleteSecretModal'
import { EditSecretModal } from './EditSecretModal'
import { formatSecretColumns } from './Secrets.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
import { useVaultSecretsQuery } from '@/data/vault/vault-secrets-query'
diff --git a/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx
index 371c1e5d51e..454acf34276 100644
--- a/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Webhooks/OverviewTab.tsx
@@ -1,14 +1,14 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { toast } from 'sonner'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { IntegrationOverviewTab } from '../Integration/IntegrationOverviewTab'
import { RequiredExtensionsSection } from '../Integration/RequiredExtensionsSection'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useHooksEnableMutation } from '@/data/database/hooks-enable-mutation'
import { useSchemasQuery } from '@/data/database/schemas-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
index f768632485f..9bd3dfc2f56 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/InstallationError.tsx
@@ -1,7 +1,7 @@
import { Button } from 'ui'
import { useStripeSyncStatus } from './useStripeSyncStatus'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
export const InstallationError = ({
error,
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
index 4025d6bf64e..e05b84a39ea 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/OverviewTab.tsx
@@ -17,7 +17,7 @@ import {
SheetSection,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StatusDisplay.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StatusDisplay.tsx
deleted file mode 100644
index 85bb055f2b5..00000000000
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StatusDisplay.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { SchemaInstallationStatus } from '@stripe/sync-engine/supabase'
-import { AlertCircle, Check, RefreshCwIcon } from 'lucide-react'
-
-import {
- hasInstallError,
- hasUninstallError,
- isInstalled,
- isInstalling,
- isUninstalling,
-} from './stripe-sync-status'
-
-export const StatusDisplay = ({
- status,
- isInstallRequested,
- isInstallInitiated,
- isUninstallRequested,
- isUninstallInitiated,
- isUpgrade,
- timedOut,
-}: {
- status: SchemaInstallationStatus
- isInstallRequested: boolean
- isInstallInitiated: boolean
- isUninstallRequested: boolean
- isUninstallInitiated: boolean
- isUpgrade?: boolean
- timedOut: boolean
-}) => {
- const installed = isInstalled(status)
- const installError = hasInstallError(status)
- const uninstallError = hasUninstallError(status)
- const installInProgress = isInstalling(status)
- const uninstallInProgress = isUninstalling(status)
-
- const installing = (installInProgress || isInstallRequested || isInstallInitiated) && !timedOut
- const uninstalling =
- (uninstallInProgress || isUninstallRequested || isUninstallInitiated) && !timedOut
-
- if (uninstalling) {
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">
- <RefreshCwIcon size={14} className="animate-spin text-foreground-lighter" />
- Uninstalling...
- </span>
- )
- }
- if (uninstallError) {
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">
- <AlertCircle size={14} className="text-destructive" />
- Uninstallation error
- </span>
- )
- }
- if (installing) {
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">
- <RefreshCwIcon size={14} className="animate-spin text-foreground-lighter" />
- {isUpgrade ? 'Upgrading...' : 'Installing...'}
- </span>
- )
- }
- if (installError) {
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">
- <AlertCircle size={14} className="text-destructive" />
- {isUpgrade ? 'Upgrade error' : 'Installation error'}
- </span>
- )
- }
- if (installed) {
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">
- <Check size={14} strokeWidth={1.5} className="text-brand" /> Installed
- </span>
- )
- }
- return (
- <span className="flex items-center gap-2 text-foreground-light text-sm">Not installed</span>
- )
-}
diff --git a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
index 7d07b9828d1..69d538bec14 100644
--- a/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
+++ b/apps/studio/components/interfaces/Integrations/templates/StripeSyncEngine/StripeSyncSettingsPage.tsx
@@ -3,7 +3,7 @@ import { formatRelative } from 'date-fns'
import { BadgeCheck, RefreshCwIcon } from 'lucide-react'
import Link from 'next/link'
import { Button, Card, CardContent, CardHeader, CardTitle } from 'ui'
-import { Admonition, ShimmeringLoader, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import {
PageSection,
PageSectionContent,
@@ -12,6 +12,8 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { isInstalled, isSyncRunning, isUninstalling } from './stripe-sync-status'
import { ConstrainedIntegrationTabScaffold } from '@/components/interfaces/Integrations/ConstrainedIntegrationTabScaffold'
diff --git a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
index 6dcdc729f04..2f189271575 100644
--- a/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
+++ b/apps/studio/components/interfaces/JwtSecrets/jwt-secret-keys-table/signing-key-row.tsx
@@ -22,7 +22,7 @@ import {
TableCell,
TableRow,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { AlgorithmHoverCard } from '../algorithm-hover-card'
import { statusColors, statusLabels } from '../jwt.constants'
diff --git a/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx b/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
index 83cea333e69..5d9ccfb4690 100644
--- a/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
+++ b/apps/studio/components/interfaces/Linter/GraphqlExposureLintCTA.tsx
@@ -4,7 +4,7 @@ import { EyeOff, Lock } from 'lucide-react'
import { useState } from 'react'
import { toast } from 'sonner'
import { Badge, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Linter/Linter.utils.tsx b/apps/studio/components/interfaces/Linter/Linter.utils.tsx
index a7779893e6e..a9b00f7fda9 100644
--- a/apps/studio/components/interfaces/Linter/Linter.utils.tsx
+++ b/apps/studio/components/interfaces/Linter/Linter.utils.tsx
@@ -43,7 +43,7 @@ export const lintInfoMap: LintInfo[] = [
name: 'auth_rls_initplan',
title: 'Auth RLS Initialization Plan',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
- link: ({ projectRef }) => `/project/${projectRef}/auth/policies`,
+ link: ({ projectRef }) => `/project/${projectRef}/database/policies`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0003_auth_rls_initplan`,
category: 'performance',
@@ -72,7 +72,7 @@ export const lintInfoMap: LintInfo[] = [
title: 'Multiple Permissive Policies',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
link: ({ projectRef, metadata }) =>
- `/project/${projectRef}/auth/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
+ `/project/${projectRef}/database/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0006_multiple_permissive_policies`,
category: 'performance',
@@ -82,7 +82,7 @@ export const lintInfoMap: LintInfo[] = [
title: 'Policy Exists RLS Disabled',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
link: ({ projectRef, metadata }) =>
- `/project/${projectRef}/auth/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
+ `/project/${projectRef}/database/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0007_policy_exists_rls_disabled`,
category: 'security',
@@ -92,7 +92,7 @@ export const lintInfoMap: LintInfo[] = [
title: 'RLS Enabled No Policy',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
link: ({ projectRef, metadata }) =>
- `/project/${projectRef}/auth/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
+ `/project/${projectRef}/database/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
linkText: 'View table',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0008_rls_enabled_no_policy`,
category: 'security',
@@ -141,7 +141,7 @@ export const lintInfoMap: LintInfo[] = [
title: 'RLS Disabled in Public',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
link: ({ projectRef, metadata }) =>
- `/project/${projectRef}/auth/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
+ `/project/${projectRef}/database/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0013_rls_disabled_in_public`,
category: 'security',
@@ -187,7 +187,7 @@ export const lintInfoMap: LintInfo[] = [
name: 'rls_references_user_metadata',
title: 'RLS references user metadata',
icon: <User className="text-foreground-muted" size={15} strokeWidth={1} />,
- link: ({ projectRef }) => `/project/${projectRef}/auth/policies`,
+ link: ({ projectRef }) => `/project/${projectRef}/database/policies`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?queryGroups=lint&lint=0015_rls_references_user_metadata`,
category: 'security',
@@ -325,7 +325,7 @@ export const lintInfoMap: LintInfo[] = [
title: 'RLS Policy Always True',
icon: <Table2 className="text-foreground-muted" size={15} strokeWidth={1} />,
link: ({ projectRef, metadata }) =>
- `/project/${projectRef}/auth/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
+ `/project/${projectRef}/database/policies?schema=${encodeURIComponent(metadata?.schema ?? '')}&search=${encodeURIComponent(metadata?.name ?? '')}`,
linkText: 'View policies',
docsLink: `${DOCS_URL}/guides/database/database-linter?lint=0024_permissive_rls_policy`,
category: 'security',
diff --git a/apps/studio/components/interfaces/LocalDropdown.tsx b/apps/studio/components/interfaces/LocalDropdown.tsx
index cb0b976e1f2..ea78833af65 100644
--- a/apps/studio/components/interfaces/LocalDropdown.tsx
+++ b/apps/studio/components/interfaces/LocalDropdown.tsx
@@ -14,7 +14,6 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
singleThemes,
- Theme,
} from 'ui'
import { ButtonTooltip } from '../ui/ButtonTooltip'
@@ -83,7 +82,7 @@ export const LocalDropdown = ({
setTheme(value)
}}
>
- {singleThemes.map((theme: Theme) => (
+ {singleThemes.map((theme) => (
<DropdownMenuRadioItem
key={theme.value}
value={theme.value}
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
index 162e5bc1909..4bbcfbdd78a 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx
@@ -1,5 +1,5 @@
import { zodResolver } from '@hookform/resolvers/zod'
-import { IS_PLATFORM, useFlag } from 'common'
+import { IS_PLATFORM } from 'common'
import Link from 'next/link'
import { ReactNode, useEffect, useMemo, useRef } from 'react'
import { useForm } from 'react-hook-form'
@@ -51,6 +51,7 @@ import {
logDrainHeaderEntriesSchema,
type LogDrainHeaderRow,
} from './LogDrains.utils'
+import { useEnabledLogDrainTypes } from './useEnabledLogDrainTypes'
import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer'
import { Shortcut } from '@/components/ui/Shortcut'
import { LogDrainData } from '@/data/log-drains/log-drains-query'
@@ -347,12 +348,7 @@ export function LogDrainDestinationSheetForm({
)
}, [defaultValues, mode])
- const sentryEnabled = useFlag('SentryLogDrain')
- const s3Enabled = useFlag('S3logdrain')
- const axiomEnabled = useFlag('axiomLogDrain')
- const otlpEnabled = useFlag('otlpLogDrain')
- const last9Enabled = useFlag('Last9LogDrain')
- const syslogEnabled = useFlag('syslogLogDrain')
+ const enabledLogDrainTypes = useEnabledLogDrainTypes()
const formRef = useRef<HTMLFormElement>(null)
@@ -474,15 +470,7 @@ export function LogDrainDestinationSheetForm({
{LOG_DRAIN_TYPES.find((t) => t.value === type)?.name}
</SelectTrigger>
<SelectContent>
- {LOG_DRAIN_TYPES.filter((t) => {
- if (t.value === 'sentry') return sentryEnabled
- if (t.value === 's3') return s3Enabled
- if (t.value === 'axiom') return axiomEnabled
- if (t.value === 'otlp') return otlpEnabled
- if (t.value === 'last9') return last9Enabled
- if (t.value === 'syslog') return syslogEnabled
- return true
- }).map((type) => (
+ {enabledLogDrainTypes.map((type) => (
<SelectItem
value={type.value}
key={type.value}
diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
index f2403c07f57..825d281bd83 100644
--- a/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
+++ b/apps/studio/components/interfaces/LogDrains/LogDrainsList.tsx
@@ -23,7 +23,7 @@ import { LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
import { LogDrainsCard } from './LogDrainsCard'
import { useEnabledLogDrainTypes } from './useEnabledLogDrainTypes'
import { VoteLink } from './VoteLink'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { LogDrainData } from '@/data/log-drains/log-drains-query'
import type { ResponseError } from '@/types'
diff --git a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
index 31f28558b28..aa728dc7936 100644
--- a/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
+++ b/apps/studio/components/interfaces/LogDrains/OrgAuditLogDrains.tsx
@@ -11,8 +11,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { LogDrainDestinationSheetForm } from './LogDrainDestinationSheetForm'
import { LogDrainType } from './LogDrains.constants'
diff --git a/apps/studio/components/interfaces/LogDrains/useEnabledLogDrainTypes.ts b/apps/studio/components/interfaces/LogDrains/useEnabledLogDrainTypes.ts
index a722f15187c..d33c2c664f0 100644
--- a/apps/studio/components/interfaces/LogDrains/useEnabledLogDrainTypes.ts
+++ b/apps/studio/components/interfaces/LogDrains/useEnabledLogDrainTypes.ts
@@ -3,19 +3,9 @@ import { useFlag } from 'common'
import { LOG_DRAIN_TYPES } from './LogDrains.constants'
export function useEnabledLogDrainTypes() {
- const sentryEnabled = useFlag('SentryLogDrain')
- const s3Enabled = useFlag('S3logdrain')
- const axiomEnabled = useFlag('axiomLogDrain')
- const otlpEnabled = useFlag('otlpLogDrain')
- const last9Enabled = useFlag('Last9LogDrain')
const syslogEnabled = useFlag('syslogLogDrain')
return LOG_DRAIN_TYPES.filter((t) => {
- if (t.value === 'sentry') return sentryEnabled
- if (t.value === 's3') return s3Enabled
- if (t.value === 'axiom') return axiomEnabled
- if (t.value === 'otlp') return otlpEnabled
- if (t.value === 'last9') return last9Enabled
if (t.value === 'syslog') return syslogEnabled
return true
})
diff --git a/apps/studio/components/interfaces/Observability/Observability.constants.ts b/apps/studio/components/interfaces/Observability/Observability.constants.ts
new file mode 100644
index 00000000000..2c47e519e38
--- /dev/null
+++ b/apps/studio/components/interfaces/Observability/Observability.constants.ts
@@ -0,0 +1,15 @@
+import { DOCS_URL } from '@/lib/constants'
+
+export const OBSERVABILITY_DOCS_HREFS = {
+ overview: `${DOCS_URL}/guides/telemetry/reports`,
+ queryPerformance: `${DOCS_URL}/guides/platform/performance#examining-query-performance`,
+ queryInsights: `${DOCS_URL}/guides/platform/performance#examining-query-performance`,
+ apiGateway: `${DOCS_URL}/guides/telemetry/reports#api-gateway`,
+ database: `${DOCS_URL}/guides/telemetry/reports#database`,
+ dataApi: `${DOCS_URL}/guides/telemetry/reports#postgrest`,
+ auth: `${DOCS_URL}/guides/telemetry/reports#auth`,
+ edgeFunctions: `${DOCS_URL}/guides/telemetry/reports#edge-functions`,
+ storage: `${DOCS_URL}/guides/telemetry/reports#storage`,
+ realtime: `${DOCS_URL}/guides/realtime/reports`,
+ customReport: `${DOCS_URL}/guides/telemetry/reports#using-reports`,
+} as const
diff --git a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
index 7b3eef9ab6a..393734b706c 100644
--- a/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
+++ b/apps/studio/components/interfaces/Observability/ObservabilityOverview.tsx
@@ -6,13 +6,20 @@ import { useRouter } from 'next/router'
import { useCallback, useMemo, useState } from 'react'
import { Badge, Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
+import { useUnifiedLogsPreview } from '../App/FeaturePreview/FeaturePreviewContext'
import { DatabaseInfrastructureSection } from './DatabaseInfrastructureSection'
+import { OBSERVABILITY_DOCS_HREFS } from './Observability.constants'
import { useObservabilityOverviewData } from './ObservabilityOverview.utils'
import { ObservabilityOverviewFooter } from './ObservabilityOverviewFooter'
import { ServiceHealthTable } from './ServiceHealthTable'
import { useSlowQueriesCount } from './useSlowQueriesCount'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
+import {
+ buildUnifiedLogsUrl,
+ type UnifiedLogType,
+} from '@/components/interfaces/UnifiedLogs/UnifiedLogs.utils'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ChartIntervalDropdown } from '@/components/ui/Logs/ChartIntervalDropdown'
import { CHART_INTERVALS } from '@/components/ui/Logs/logs.utils'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
@@ -22,6 +29,8 @@ import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganizati
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
+const REPORT_TITLE = 'Overview'
+
type ChartIntervalKey = '1hr' | '1day' | '7day'
export const ObservabilityOverview = () => {
@@ -30,6 +39,7 @@ export const ObservabilityOverview = () => {
const { data: organization } = useSelectedOrganizationQuery()
const queryClient = useQueryClient()
+ const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
const { projectStorageAll: storageSupported } = useIsFeatureEnabled(['project_storage:all'])
const { isEnabled: isDataApiEnabled } = useIsDataApiEnabled({ projectRef })
@@ -65,13 +75,22 @@ export const ObservabilityOverview = () => {
setShowIntervalDropdown((open) => !open)
})
+ const getLogsUrl = useCallback(
+ (logType: UnifiedLogType, legacyLogsUrl: string) =>
+ isUnifiedLogsEnabled
+ ? buildUnifiedLogsUrl({ projectRef: projectRef!, logType })
+ : `/project/${projectRef}${legacyLogsUrl}`,
+ [projectRef, isUnifiedLogsEnabled]
+ )
+
const serviceBase = useMemo(
() => [
{
key: 'data_api' as const,
name: 'API Gateway',
reportUrl: undefined,
- logsUrl: `/project/${projectRef}/logs/edge-logs`,
+ logType: 'edge' as const,
+ logsUrl: getLogsUrl('edge', '/logs/edge-logs'),
enabled: isDataApiEnabled,
hasReport: false,
},
@@ -79,7 +98,8 @@ export const ObservabilityOverview = () => {
key: 'db' as const,
name: 'Database',
reportUrl: `/project/${projectRef}/observability/database`,
- logsUrl: `/project/${projectRef}/logs/postgres-logs`,
+ logType: 'postgres' as const,
+ logsUrl: getLogsUrl('postgres', '/logs/postgres-logs'),
enabled: true,
hasReport: true,
},
@@ -87,7 +107,8 @@ export const ObservabilityOverview = () => {
key: 'postgrest' as const,
name: 'PostgREST',
reportUrl: `/project/${projectRef}/observability/postgrest`,
- logsUrl: `/project/${projectRef}/logs/postgrest-logs`,
+ logType: 'postgrest' as const,
+ logsUrl: getLogsUrl('postgrest', '/logs/postgrest-logs'),
enabled: true,
hasReport: true,
},
@@ -95,7 +116,8 @@ export const ObservabilityOverview = () => {
key: 'auth' as const,
name: 'Auth',
reportUrl: `/project/${projectRef}/observability/auth`,
- logsUrl: `/project/${projectRef}/logs/auth-logs`,
+ logType: 'auth' as const,
+ logsUrl: getLogsUrl('auth', '/logs/auth-logs'),
enabled: true,
hasReport: true,
},
@@ -103,7 +125,8 @@ export const ObservabilityOverview = () => {
key: 'functions' as const,
name: 'Edge Functions',
reportUrl: `/project/${projectRef}/observability/edge-functions`,
- logsUrl: `/project/${projectRef}/logs/edge-functions-logs`,
+ logType: 'edge function' as const,
+ logsUrl: getLogsUrl('edge function', '/logs/edge-functions-logs'),
enabled: true,
hasReport: true,
},
@@ -111,7 +134,8 @@ export const ObservabilityOverview = () => {
key: 'storage' as const,
name: 'Storage',
reportUrl: `/project/${projectRef}/observability/storage`,
- logsUrl: `/project/${projectRef}/logs/storage-logs`,
+ logType: 'storage' as const,
+ logsUrl: getLogsUrl('storage', '/logs/storage-logs'),
enabled: storageSupported,
hasReport: true,
},
@@ -119,12 +143,13 @@ export const ObservabilityOverview = () => {
key: 'realtime' as const,
name: 'Realtime',
reportUrl: `/project/${projectRef}/observability/realtime`,
- logsUrl: `/project/${projectRef}/logs/realtime-logs`,
+ logType: 'realtime' as const,
+ logsUrl: getLogsUrl('realtime', '/logs/realtime-logs'),
enabled: true,
hasReport: true,
},
],
- [projectRef, storageSupported, isDataApiEnabled]
+ [projectRef, storageSupported, isDataApiEnabled, getLogsUrl]
)
const enabledServices = serviceBase.filter((s) => s.enabled)
@@ -133,7 +158,7 @@ export const ObservabilityOverview = () => {
// Navigate to the log view scoped to the clicked bar's bucket window
const handleBarClick = useCallback(
- (logsUrl: string) => (datum: any) => {
+ (service: { logType: UnifiedLogType; logsUrl: string }) => (datum: any) => {
if (!datum?.timestamp) return
// datum.timestamp is already the UTC-truncated bucket boundary from timestamp_trunc(),
@@ -142,17 +167,24 @@ export const ObservabilityOverview = () => {
const start = datum.timestamp
const end = dayjs.utc(datum.timestamp).add(1, unit).toISOString()
- const queryParams = new URLSearchParams({ its: start, ite: end })
- router.push(`${logsUrl}?${queryParams.toString()}`)
+ if (isUnifiedLogsEnabled) {
+ router.push(
+ buildUnifiedLogsUrl({ projectRef: projectRef!, logType: service.logType, start, end })
+ )
+ } else {
+ const queryParams = new URLSearchParams({ its: start, ite: end })
+ const separator = service.logsUrl.includes('?') ? '&' : '?'
+ router.push(`${service.logsUrl}${separator}${queryParams.toString()}`)
+ }
},
- [router, interval]
+ [router, interval, isUnifiedLogsEnabled, projectRef]
)
return (
<ReportPadding>
<div className="flex flex-row justify-between items-center">
<div className="flex items-center gap-3">
- <ReportHeader title="Overview" />
+ <ReportHeader title={REPORT_TITLE} />
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="warning">Beta</Badge>
@@ -163,6 +195,7 @@ export const ObservabilityOverview = () => {
</Tooltip>
</div>
<div className="flex items-center gap-2">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.overview} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
@@ -200,6 +233,7 @@ export const ObservabilityOverview = () => {
name: service.name,
description: '',
reportUrl: service.hasReport ? service.reportUrl : undefined,
+ logType: service.logType,
logsUrl: service.logsUrl,
}))}
serviceData={overviewData.services}
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
deleted file mode 100644
index d8faea781b4..00000000000
--- a/apps/studio/components/interfaces/Observability/ServiceHealthCard.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import Link from 'next/link'
-import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, cn, Loading } from 'ui'
-import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-
-import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
-import { getHealthStatus, type ServiceKey } from './ObservabilityOverview.utils'
-import NoDataPlaceholder from '@/components/ui/Charts/NoDataPlaceholder'
-
-const colorClassMap: Record<string, string> = {
- muted: 'bg-muted',
- destructive: 'bg-destructive',
- warning: 'bg-warning',
- brand: 'bg-brand',
-}
-
-export type ServiceHealthCardProps = {
- serviceName: string
- serviceKey: ServiceKey
- total: number
- errorRate: number
- errorCount: number
- warningCount: number
- chartData: LogsBarChartDatum[]
- reportUrl?: string // undefined if feature flag disabled or no report available
- logsUrl: string
- isLoading: boolean
- onBarClick: (datum: any) => void
- datetimeFormat: string
-}
-
-export const ServiceHealthCard = ({
- serviceName,
- serviceKey: _serviceKey,
- total,
- errorRate,
- errorCount,
- warningCount,
- chartData,
- reportUrl,
- logsUrl,
- isLoading,
- onBarClick,
- datetimeFormat,
-}: ServiceHealthCardProps) => {
- const { color } = getHealthStatus(errorRate, total)
-
- return (
- <Card className="mb-0 md:mb-0 h-full flex flex-col">
- <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0 pb-0 border-b-0">
- <div className="flex flex-col">
- <CardTitle className="text-foreground-light flex items-center gap-2 text-xs font-medium">
- <div className={cn('w-1.5 h-1.5 rounded-full', colorClassMap[color] || 'bg-muted')} />
- {serviceName}
- </CardTitle>
- <div className="flex items-start gap-6 mt-2">
- <div className="flex flex-col">
- <span className="text-foreground text-xl">{total.toLocaleString()}</span>
- <span className="text-foreground-light text-xs">requests</span>
- </div>
- <div className="flex flex-col">
- <span className="text-foreground text-xl">{errorRate.toFixed(1)}%</span>
- <span className="text-foreground-light text-xs">error rate</span>
- </div>
- </div>
- </div>
- <div className="flex items-end gap-4 text-foreground-light">
- <div className="flex flex-col items-end">
- <div className="flex items-center gap-2">
- <div className="w-1.5 h-1.5 bg-warning rounded-full" />
- <span className="heading-meta">Warn</span>
- </div>
- <span className="text-foreground text-xl">{warningCount.toLocaleString()}</span>
- </div>
- <div className="flex flex-col items-end">
- <div className="flex items-center gap-2">
- <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
- <span className="heading-meta">Err</span>
- </div>
- <span className="text-foreground text-xl">{errorCount.toLocaleString()}</span>
- </div>
- </div>
- </CardHeader>
-
- <CardContent className="p-card pt-4 flex-1 overflow-hidden max-h-[200px]">
- <Loading isFullHeight active={isLoading}>
- <LogsBarChart
- isFullHeight
- data={chartData}
- DateTimeFormat={datetimeFormat}
- onBarClick={onBarClick}
- EmptyState={
- <NoDataPlaceholder size="small" message="No data for selected period" isFullHeight />
- }
- />
- </Loading>
- </CardContent>
-
- <CardFooter className="border-t pt-3 pb-4 px-card flex gap-2">
- {reportUrl && (
- <Button variant="default" size="tiny" asChild className="flex-1">
- <Link href={reportUrl}>View Report</Link>
- </Button>
- )}
- <Button variant="default" size="tiny" asChild className="flex-1">
- <Link href={logsUrl}>View Logs</Link>
- </Button>
- </CardFooter>
- </Card>
- )
-}
diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
index 7cc32dac2a0..a8f567a8d70 100644
--- a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
+++ b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
@@ -9,11 +9,13 @@ import {
Tooltip,
TooltipContent,
TooltipTrigger,
+ type ChartConfig,
} from 'ui'
import { ChartEmptyState, ChartLoadingState } from 'ui-patterns/Chart'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
+import type { UnifiedLogType } from '../UnifiedLogs/UnifiedLogs.utils'
import { getHealthStatus, type ServiceKey } from './ObservabilityOverview.utils'
type ServiceConfig = {
@@ -21,6 +23,7 @@ type ServiceConfig = {
name: string
description: string
reportUrl?: string
+ logType: UnifiedLogType
logsUrl: string
}
@@ -36,7 +39,7 @@ type ServiceData = {
export type ServiceHealthTableProps = {
services: ServiceConfig[]
serviceData: Record<string, ServiceData>
- onBarClick: (logsUrl: string) => (datum: LogsBarChartDatum) => void
+ onBarClick: (service: ServiceConfig) => (datum: LogsBarChartDatum) => void
datetimeFormat: string
}
@@ -47,6 +50,12 @@ const colorClassMap: Record<string, string> = {
brand: 'bg-brand',
}
+const LEVEL_CHART_CONFIG: ChartConfig = {
+ error_count: { label: 'Errors' },
+ warning_count: { label: 'Warnings' },
+ ok_count: { label: 'Infos' },
+}
+
const SERVICE_DESCRIPTIONS: Record<ServiceKey, string> = {
db: 'PostgreSQL database health and performance',
auth: 'Authentication and user management',
@@ -171,6 +180,7 @@ const ServiceCell = ({
hideDateRange
hideXAxis
data={data.eventChartData}
+ chartConfig={LEVEL_CHART_CONFIG}
DateTimeFormat={datetimeFormat}
onBarClick={onBarClick}
EmptyState={<ChartEmptyState className="h-full" description="No traffic" />}
@@ -208,7 +218,7 @@ export const ServiceHealthTable = ({
key={service.key}
service={service}
data={data}
- onBarClick={onBarClick(service.logsUrl)}
+ onBarClick={onBarClick(service)}
datetimeFormat={datetimeFormat}
className={cn(
'border-default border-b',
diff --git a/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts b/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts
deleted file mode 100644
index 99bbffca30b..00000000000
--- a/apps/studio/components/interfaces/Observability/usePostgrestOverviewMetrics.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import type { LogsBarChartDatum } from '../ProjectHome/ProjectUsage.metrics'
-import { executeAnalyticsSql } from '@/data/logs/execute-analytics-sql'
-import { safeSql, type SafeLogSqlFragment } from '@/data/logs/safe-analytics-sql'
-
-type PostgrestMetricsVariables = {
- projectRef: string
- startDate: string
- endDate: string
- interval: '1hr' | '1day' | '7day'
-}
-
-function getIntervalTrunc(interval: '1hr' | '1day' | '7day'): SafeLogSqlFragment {
- switch (interval) {
- case '1hr':
- return safeSql`minute` // 1-minute buckets for 1 hour
- case '1day':
- return safeSql`hour` // 1-hour buckets for 1 day
- case '7day':
- return safeSql`day` // 1-day buckets for 7 days
- default:
- return safeSql`hour`
- }
-}
-
-const POSTGREST_METRICS_SQL = (interval: '1hr' | '1day' | '7day'): SafeLogSqlFragment => {
- const trunc = getIntervalTrunc(interval)
-
- return safeSql`
- -- postgrest-overview-metrics
- select
- cast(timestamp_trunc(t.timestamp, ${trunc}) as datetime) as timestamp,
- countif(response.status_code < 300) as ok_count,
- countif(response.status_code >= 300 and response.status_code < 400) as warning_count,
- countif(response.status_code >= 400) as error_count
- FROM edge_logs t
- cross join unnest(metadata) as m
- cross join unnest(m.response) as response
- cross join unnest(m.request) as request
- WHERE
- request.path like '/rest/%'
- GROUP BY
- timestamp
- ORDER BY
- timestamp ASC
- `
-}
-
-type MetricsRow = {
- timestamp: string
- ok_count: number
- warning_count: number
- error_count: number
-}
-
-async function fetchPostgrestMetrics(
- { projectRef, startDate, endDate, interval }: PostgrestMetricsVariables,
- signal?: AbortSignal
-) {
- const sql = POSTGREST_METRICS_SQL(interval)
-
- const data = await executeAnalyticsSql({
- projectRef,
- endpoint: '/platform/projects/{ref}/analytics/endpoints/logs.all',
- sql,
- iso_timestamp_start: startDate,
- iso_timestamp_end: endDate,
- method: 'get',
- signal,
- })
-
- if (data?.error) throw data.error
-
- return (data?.result || []) as MetricsRow[]
-}
-
-export const usePostgrestOverviewMetrics = (
- { projectRef, startDate, endDate, interval }: PostgrestMetricsVariables,
- options?: { enabled?: boolean }
-) => {
- return useQuery({
- queryKey: ['postgrest-overview-metrics', projectRef, startDate, endDate, interval],
- queryFn: ({ signal }) =>
- fetchPostgrestMetrics({ projectRef, startDate, endDate, interval }, signal),
- enabled: (options?.enabled ?? true) && Boolean(projectRef),
- staleTime: 1000 * 60,
- })
-}
-
-export const transformPostgrestMetrics = (rows: MetricsRow[]): LogsBarChartDatum[] => {
- return rows.map((row) => ({
- timestamp: row.timestamp,
- ok_count: row.ok_count,
- warning_count: row.warning_count,
- error_count: row.error_count,
- }))
-}
diff --git a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
index 6904b844ebf..f104b5ed191 100644
--- a/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
+++ b/apps/studio/components/interfaces/Organization/AuditLogs/AuditLogs.tsx
@@ -14,10 +14,10 @@ import { LogDetailsPanel } from '@/components/interfaces/AuditLogs/LogDetailsPan
import { LogsDatePicker } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
import Table from '@/components/to-be-cleaned/Table'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { FilterPopover } from '@/components/ui/FilterPopover'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useOrganizationRolesV2Query } from '@/data/organization-members/organization-roles-query'
import {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx
index cf3b15f16db..30e14740e44 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/BillingBreakdown.tsx
@@ -9,10 +9,10 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
-import SparkBar from '@/components/ui/SparkBar'
+import { NoPermission } from '@/components/ui/NoPermission'
+import { SparkBar } from '@/components/ui/SparkBar'
import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx
index bd4240b4265..06a5a46dbe6 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingBreakdown/UpcomingInvoice.tsx
@@ -4,7 +4,7 @@ import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { billingMetricUnit, formatUsage } from '../helpers'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { PricingMetric } from '@/data/analytics/org-daily-stats-query'
import {
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
index 7d4daf6c5e5..98c584f1744 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/BillingCustomerData.tsx
@@ -20,8 +20,8 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
import { organizationKeys } from '@/data/organizations/keys'
import { isPartnerBillingOrganization } from '@/data/organizations/managed-by-utils'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/useBillingCustomerDataForm.ts b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/useBillingCustomerDataForm.ts
index 17ea604c872..d552eff33b3 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/useBillingCustomerDataForm.ts
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingCustomerData/useBillingCustomerDataForm.ts
@@ -166,6 +166,7 @@ export function useBillingCustomerDataForm({
const taxIdValues = form.getValues()
const selectedTaxId = TAX_IDS.find((option) => option.name === taxIdValues.tax_id_name)
+ const taxIdValue = taxIdValues.tax_id_value?.trim() ?? ''
const payload = {
address: {
@@ -178,11 +179,11 @@ export function useBillingCustomerDataForm({
},
billing_name: address.name.trim(),
tax_id:
- selectedTaxId && taxIdValues.tax_id_type?.length && taxIdValues.tax_id_value?.length
+ selectedTaxId && taxIdValues.tax_id_type?.length && taxIdValue.length
? {
type: taxIdValues.tax_id_type,
value: sanitizeTaxIdValue({
- value: taxIdValues.tax_id_value,
+ value: taxIdValue,
name: taxIdValues.tax_id_name,
}),
country: getEffectiveTaxCountry(selectedTaxId),
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
index c3052aafdc3..31a0e5566f5 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/BillingEmail.tsx
@@ -24,7 +24,7 @@ import {
import { FormActions } from '@/components/ui/Forms/FormActions'
import { FormPanel } from '@/components/ui/Forms/FormPanel'
import { FormSection, FormSectionContent } from '@/components/ui/Forms/FormSection'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useOrganizationCustomerProfileQuery } from '@/data/organizations/organization-customer-profile-query'
import { useOrganizationUpdateMutation } from '@/data/organizations/organization-update-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
index f39d4cf1176..0c095da8531 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx
@@ -15,9 +15,9 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import PartnerIcon from '@/components/ui/PartnerIcon'
import { PARTNER_TO_NAME } from '@/components/ui/PartnerManagedResource'
import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
index 155aa028818..051c7930173 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditBalance.tsx
@@ -9,10 +9,10 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { FormPanel } from '@/components/ui/Forms/FormPanel'
import { FormSection, FormSectionContent } from '@/components/ui/Forms/FormSection'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useOrgBalanceQuery } from '@/data/subscriptions/org-balance-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
index 13752a01f00..95c44733543 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/CreditCodeRedemption.tsx
@@ -22,8 +22,10 @@ import {
Input,
Separator,
} from 'ui'
-import { Admonition, ShimmeringLoader, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { z } from 'zod'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
index b64817dc36d..c1b4288de28 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/CancellationFlow.tsx
@@ -1,6 +1,6 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
-import React, { ComponentProps, useEffect, useMemo, useState } from 'react'
+import { ComponentProps, useEffect, useMemo, useState } from 'react'
import { DowngradeModal } from './DowngradeModal'
import { ExitSurveyModal } from './ExitSurveyModal'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx
index 60b5714cf9a..76a9ccbfbd3 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/DowngradeModal.tsx
@@ -10,7 +10,7 @@ import {
DialogSectionSeparator,
DialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { isBeforeFreeTierTemplateBlockCutoff } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils'
import { getComputeSize, OrgProject } from '@/data/projects/org-projects-infinite-query'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/InvoiceEstimateTooltip.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/InvoiceEstimateTooltip.tsx
index e710b2922d1..17745d5bb46 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/InvoiceEstimateTooltip.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/InvoiceEstimateTooltip.tsx
@@ -13,7 +13,7 @@ import {
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { type OrganizationBillingSubscriptionPreviewQueryResult } from '@/data/organizations/organization-billing-subscription-preview'
import { DOCS_URL } from '@/lib/constants'
import { formatCurrency } from '@/lib/helpers'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
index b7dadc4f15d..811ea8e7061 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx
@@ -14,8 +14,8 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useOrgSettingsPageStateSnapshot } from '@/state/organization-settings'
diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
index 088149e39fa..c264ddc1371 100644
--- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
+++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/SubscriptionPlanUpdateDialog.tsx
@@ -8,7 +8,7 @@ import { useMemo, useRef, useState } from 'react'
import { plans as subscriptionsPlans } from 'shared-data/plans'
import { toast } from 'sonner'
import { Button, cn, Dialog, DialogContent } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.components.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.components.tsx
index 0923335ca90..97d226169d9 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.components.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.components.tsx
@@ -1,6 +1,7 @@
import { type ReactNode } from 'react'
import { Card, CardContent } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import type {
CloudMarketplaceContractLinkingIneligibilityReason,
diff --git a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
index 4392359d4fe..ff6449a20c6 100644
--- a/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
+++ b/apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx
@@ -2,7 +2,8 @@ import Link from 'next/link'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import {
AwsMarketplaceInterstitial,
diff --git a/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx b/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
index 243d683987e..fc2ee211067 100644
--- a/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/ISO27001.tsx
@@ -11,7 +11,7 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
import { getDocument } from '@/data/documents/document-query'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
diff --git a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
index 488d71de731..ca7c554ffb1 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SOC2.tsx
@@ -11,7 +11,7 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
import { getDocument } from '@/data/documents/document-query'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
diff --git a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
index aa385898696..88a6930fa21 100644
--- a/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
+++ b/apps/studio/components/interfaces/Organization/Documents/SecurityQuestionnaire.tsx
@@ -10,7 +10,7 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { getDocument } from '@/data/documents/document-query'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
index e2deae29c47..fb4379b66ac 100644
--- a/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
+++ b/apps/studio/components/interfaces/Organization/GeneralSettings/OrganizationDeletePanel.tsx
@@ -1,4 +1,4 @@
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { DeleteOrganizationButton } from './DeleteOrganizationButton'
import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
diff --git a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
index 835015c428e..dfc6aae960a 100644
--- a/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
+++ b/apps/studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx
@@ -158,5 +158,3 @@ ${ENV_VAR_RAW_KEYS.map((x) => {
</SidePanel>
)
}
-
-export default SidePanelVercelProjectLinker
diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSection.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSection.tsx
index ec5ad3c66a4..4bbc2d7c48c 100644
--- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSection.tsx
+++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSection.tsx
@@ -6,7 +6,7 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
export const InvoicesSection = () => {
diff --git a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
index 42a058dfeed..b25978116dd 100644
--- a/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/InvoicesSettings/InvoicesSettings.tsx
@@ -19,7 +19,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import InvoicePayButton from './InvoicePayButton'
import { InvoiceStatus } from '@/components/interfaces/Billing/Invoices.types'
import InvoiceStatusBadge from '@/components/interfaces/Billing/InvoiceStatusBadge'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import PartnerManagedResource from '@/components/ui/PartnerManagedResource'
import { getInvoice } from '@/data/invoices/invoice-query'
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
index a7c147df6d1..8deba853795 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/NewOrgForm.tsx
@@ -58,6 +58,13 @@ import { useLastVisitedOrganization } from '@/hooks/misc/useLastVisitedOrganizat
import { PRICING_TIER_LABELS_ORG, STRIPE_PUBLIC_KEY } from '@/lib/constants'
import { validateReturnTo } from '@/lib/gotrue'
import { useProfile } from '@/lib/profile'
+import {
+ classifyApiError,
+ classifyStripeError,
+ classifyValidationError,
+} from '@/lib/telemetry/funnel-errors'
+import { useTrack } from '@/lib/telemetry/track'
+import { useTrackFunnelError } from '@/lib/telemetry/use-track-funnel-error'
interface NewOrgFormProps {
onPaymentMethodReset: () => void
@@ -92,6 +99,7 @@ export const NewOrgForm = ({
}: NewOrgFormProps) => {
const router = useRouter()
const user = useProfile()
+ const track = useTrack()
const { resolvedTheme } = useTheme()
const { lastVisitedOrganization } = useLastVisitedOrganization()
@@ -164,6 +172,14 @@ export const NewOrgForm = ({
}
}, [isSuccess, form, organizations?.length, user.profile?.username, user.isSuccess])
+ const hasTrackedFormExposed = useRef(false)
+ useEffect(() => {
+ if (hasTrackedFormExposed.current) return
+ if (!user.isSuccess) return
+ hasTrackedFormExposed.current = true
+ track('organization_creation_form_exposed')
+ }, [user.isSuccess, track])
+
const [latestAddress, setLatestAddress] = useState<CustomerAddress>()
const [latestTaxId, setLatestTaxId] = useState<CustomerTaxId | null>()
@@ -226,6 +242,8 @@ export const NewOrgForm = ({
[freeOrgs, projectsByOrg]
)
+ const trackFunnelError = useTrackFunnelError()
+
const { mutate: createOrganization } = useOrganizationCreateMutation({
onSuccess: async (org) => {
if ('pending_payment_intent_secret' in org && org.pending_payment_intent_secret) {
@@ -236,6 +254,7 @@ export const NewOrgForm = ({
},
onError: (data) => {
toast.error(data.message, { duration: 10_000 })
+ trackFunnelError('org_creation', classifyApiError('org_creation', data), 'toast')
setNewOrgLoading(false)
},
})
@@ -246,6 +265,10 @@ export const NewOrgForm = ({
onOrganizationCreated({ slug: data.slug })
}
},
+ onError: (error) => {
+ toast.error(error.message, { dismissible: true, duration: 10_000 })
+ trackFunnelError('org_creation', classifyApiError('org_creation', error), 'toast')
+ },
})
const paymentIntentConfirmed = async (paymentIntentConfirmation: PaymentIntentResult) => {
@@ -260,6 +283,11 @@ export const NewOrgForm = ({
size: form.getValues('size'),
})
} else {
+ trackFunnelError(
+ 'org_creation',
+ classifyStripeError(paymentIntentConfirmation.error),
+ 'toast'
+ )
// If the payment intent is not successful, we reset the payment method and show an error
toast.error(`Could not confirm payment. Please try again or use a different card.`, {
duration: 10_000,
@@ -270,6 +298,14 @@ export const NewOrgForm = ({
}
const onOrganizationCreated = (org: { slug: string }) => {
+ if (submittedTier.current) {
+ track(
+ 'organization_creation_completed',
+ { tier: submittedTier.current },
+ { organization: org.slug }
+ )
+ }
+
const prefilledProjectName = user.profile?.username
? user.profile.username + `'s Project`
: 'My Project'
@@ -296,6 +332,8 @@ export const NewOrgForm = ({
} as StripeElementsOptions
}, [paymentIntentSecret, resolvedTheme])
+ const submittedTier = useRef<'tier_free' | 'tier_pro' | 'tier_payg' | 'tier_team' | null>(null)
+
async function createOrg(
formValues: z.infer<typeof formSchema>,
paymentMethodId?: string,
@@ -306,15 +344,17 @@ export const NewOrgForm = ({
}
) {
const dbTier = formValues.plan === 'PRO' && !formValues.spend_cap ? 'PAYG' : formValues.plan
+ const tier = ('tier_' + dbTier.toLowerCase()) as
+ | 'tier_payg'
+ | 'tier_pro'
+ | 'tier_free'
+ | 'tier_team'
+ submittedTier.current = tier
createOrganization({
name: formValues.name,
kind: formValues.kind,
- tier: ('tier_' + dbTier.toLowerCase()) as
- | 'tier_payg'
- | 'tier_pro'
- | 'tier_free'
- | 'tier_team',
+ tier,
...(formValues.kind == 'COMPANY' ? { size: formValues.size } : {}),
payment_method: paymentMethodId,
billing_name: dbTier === 'FREE' ? undefined : customerData?.billing_name,
@@ -354,7 +394,12 @@ export const NewOrgForm = ({
return (
<Form {...form}>
- <form onSubmit={form.handleSubmit(onSubmit)} id={FORM_ID}>
+ <form
+ onSubmit={form.handleSubmit(onSubmit, (errors) =>
+ trackFunnelError('org_creation', classifyValidationError('org_creation', errors), 'form')
+ )}
+ id={FORM_ID}
+ >
<Panel
title={
<div key="panel-title">
@@ -547,6 +592,11 @@ export const NewOrgForm = ({
onLoadingChange={(loading) => setPaymentConfirmationLoading(loading)}
onError={(err) => {
toast.error(err.message, { duration: 10_000 })
+ trackFunnelError(
+ 'org_creation',
+ { errorCategory: 'payment', errorReason: 'payment_error' },
+ 'toast'
+ )
setNewOrgLoading(false)
resetPaymentMethod()
}}
diff --git a/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx b/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx
index 54ea99da6bf..baf14b36a66 100644
--- a/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx
+++ b/apps/studio/components/interfaces/Organization/NewOrg/UpgradeExistingOrganizationCallout.tsx
@@ -1,4 +1,4 @@
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { InlineLink } from '@/components/ui/InlineLink'
import Panel from '@/components/ui/Panel'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx
index 7ef47ad4777..e8d390785fc 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizeRequesterDetails.tsx
@@ -1,5 +1,6 @@
import { OAuthScope } from '@supabase/shared-types/out/constants'
import { Check, ChevronDown } from 'lucide-react'
+import { useTheme } from 'next-themes'
import { useMemo, useState } from 'react'
import {
Badge,
@@ -11,11 +12,12 @@ import {
CollapsibleTrigger,
} from 'ui'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
+import { getMcpClientIconSrc } from 'ui-patterns/McpUrlBuilder'
import { PERMISSIONS_DESCRIPTIONS } from './OAuthApps.constants'
import { LogoBox } from '@/components/layouts/InterstitialLayout'
import { InlineLink } from '@/components/ui/InlineLink'
-import { BASE_PATH, DOCS_URL } from '@/lib/constants'
+import { DOCS_URL } from '@/lib/constants'
const OAUTH_SCOPES_DOCS_URL = `${DOCS_URL}/guides/platform/oauth-apps/oauth-scopes`
const PERMISSION_DETAILS_TRIGGER_CLASSNAME =
@@ -165,44 +167,61 @@ const PERMISSION_GROUPS: PermissionGroup[] = [
},
]
-// Hardcode custom logs for known apps that have broken icons (e.g. due to CORS issues), to ensure they display properly
-// in the UI. This should be deleted once we support CIMD MCP
-const CUSTOM_LOGO_URLS = {
- perplexity: `${BASE_PATH}/img/icons/perplexity-icon.svg`,
- cursor: `${BASE_PATH}/img/icons/cursor-icon.svg`,
- claude: `${BASE_PATH}/img/icons/claude-icon.svg`,
- chatgpt: `${BASE_PATH}/img/icons/openai-icon.svg`,
- openai: `${BASE_PATH}/img/icons/openai-icon.svg`,
+const CUSTOM_LOGO_KEYS = {
+ perplexity: { icon: 'perplexity', hasDistinctDarkIcon: true },
+ cursor: { icon: 'cursor', hasDistinctDarkIcon: true },
+ claude: { icon: 'claude', hasDistinctDarkIcon: false },
+ chatgpt: { icon: 'openai', hasDistinctDarkIcon: true },
+ openai: { icon: 'openai', hasDistinctDarkIcon: true },
+} as const
+
+function getRequesterLogo({
+ icon,
+ name,
+ useDarkVariant,
+}: {
+ icon: string | null
+ name: string
+ useDarkVariant: boolean
+}) {
+ const searchableText = `${icon ?? ''} ${name}`.toLowerCase()
+
+ for (const [match, asset] of Object.entries(CUSTOM_LOGO_KEYS)) {
+ if (searchableText.includes(match)) {
+ const customLogoUrl = getMcpClientIconSrc({
+ icon: asset.icon,
+ useDarkVariant,
+ hasDistinctDarkIcon: asset.hasDistinctDarkIcon,
+ })
+
+ if (customLogoUrl) return { src: customLogoUrl, isKnownClient: true }
+ }
+ }
+
+ return { src: icon || '', isKnownClient: false }
}
export const RequesterLogo = ({ icon, name }: { icon: string | null; name: string }) => {
const [failedIcon, setFailedIcon] = useState<string | null>(null)
+ const { resolvedTheme } = useTheme()
- const customLogoUrl = useMemo(() => {
- for (const key of Object.keys(CUSTOM_LOGO_URLS)) {
- if (icon?.toLocaleLowerCase().includes(key)) {
- return CUSTOM_LOGO_URLS[key as keyof typeof CUSTOM_LOGO_URLS]
- }
+ const logo = useMemo(
+ () => getRequesterLogo({ icon, name, useDarkVariant: resolvedTheme === 'dark' }),
+ [icon, name, resolvedTheme]
+ )
- if (name.toLocaleLowerCase().includes(key)) {
- return CUSTOM_LOGO_URLS[key as keyof typeof CUSTOM_LOGO_URLS]
- }
- }
- return icon || ''
- }, [icon, name])
-
- const showLetter = !customLogoUrl || failedIcon === customLogoUrl
+ const showLetter = !logo.src || failedIcon === logo.src
return (
- <LogoBox>
+ <LogoBox className="bg-surface-75">
{showLetter ? (
<span className="text-lg font-medium text-foreground-light">{name.slice(0, 1)}</span>
) : (
<img
alt={name}
- src={customLogoUrl}
- className="size-full object-cover"
- onError={() => setFailedIcon(customLogoUrl)}
+ src={logo.src}
+ className={cn(logo.isKnownClient ? 'size-7 object-contain' : 'size-full object-cover')}
+ onError={() => setFailedIcon(logo.src)}
/>
)}
</LogoBox>
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
index f7825359b82..2a74a01c673 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/AuthorizedAppRow.tsx
@@ -1,6 +1,6 @@
import { Trash } from 'lucide-react'
import { Button, TableCell, TableRow } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import CopyButton from '@/components/ui/CopyButton'
import type { AuthorizedApp } from '@/data/oauth/authorized-apps-query'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
index d27da2dba36..1005c82abb4 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/DeleteAppModal.tsx
@@ -10,7 +10,7 @@ import {
AlertDialogFooter,
AlertDialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useOAuthAppDeleteMutation } from '@/data/oauth/oauth-app-delete-mutation'
import type { OAuthApp } from '@/data/oauth/oauth-apps-query'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
index e28c76c4321..a8c75badf28 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthAppRow.tsx
@@ -13,7 +13,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import CopyButton from '@/components/ui/CopyButton'
import type { OAuthApp } from '@/data/oauth/oauth-apps-query'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
index 1eef5169579..24675c72d06 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/OAuthApps.tsx
@@ -31,10 +31,10 @@ import { DeleteAppModal } from './DeleteAppModal'
import { OAuthAppRow } from './OAuthAppRow'
import { PublishAppSidePanel } from './PublishAppSidePanel'
import { RevokeAppModal } from './RevokeAppModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import CopyButton from '@/components/ui/CopyButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { Shortcut } from '@/components/ui/Shortcut'
import { AuthorizedApp, useAuthorizedAppsQuery } from '@/data/oauth/authorized-apps-query'
import { OAuthAppCreateResponse } from '@/data/oauth/oauth-app-create-mutation'
diff --git a/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx b/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
index 28f1db1e41c..c1442d2cb7d 100644
--- a/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
+++ b/apps/studio/components/interfaces/Organization/OAuthApps/RevokeAppModal.tsx
@@ -11,7 +11,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useAuthorizedAppRevokeMutation } from '@/data/oauth/authorized-app-revoke-mutation'
import type { AuthorizedApp } from '@/data/oauth/authorized-apps-query'
diff --git a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
index 6c761bb596d..9743025e82f 100644
--- a/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
+++ b/apps/studio/components/interfaces/Organization/PrivateApps/Apps/AppsList/AppsList.tsx
@@ -2,7 +2,7 @@ import { AppWindow, Plus } from 'lucide-react'
import { useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { PromoteInstallationModal } from '../../Installations/PromoteInstallationModal'
import { PrivateApp, usePrivateApps } from '../../PrivateAppsContext'
diff --git a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
index 04e36069667..8df56451a7d 100644
--- a/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
+++ b/apps/studio/components/interfaces/Organization/SSO/SSOConfig.tsx
@@ -5,7 +5,7 @@ import { useEffect, useEffectEvent, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import z from 'zod'
@@ -16,7 +16,7 @@ import { SSOAdvancedSettings } from './SSOAdvancedSettings'
import { SSODomains } from './SSODomains'
import { SSOMetadata } from './SSOMetadata'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { TextConfirmModal } from '@/components/ui/TextConfirmModalWrapper'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
diff --git a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
index a8ea11d9644..a6f01b4adee 100644
--- a/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
+++ b/apps/studio/components/interfaces/Organization/SecuritySettings.tsx
@@ -1,30 +1,19 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
+import Link from 'next/link'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
-import {
- Button,
- Card,
- CardContent,
- CardFooter,
- Form,
- FormControl,
- FormField,
- Switch,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from 'ui'
+import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { z } from 'zod'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useOrganizationMembersQuery } from '@/data/organizations/organization-members-query'
import { useOrganizationMfaToggleMutation } from '@/data/organizations/organization-mfa-mutation'
@@ -41,7 +30,13 @@ const schema = z.object({
export const SecuritySettings = () => {
const { slug } = useParams()
const { profile } = useProfile()
- const { data: members } = useOrganizationMembersQuery({ slug })
+ const {
+ data: members,
+ error: membersError,
+ isPending: isLoadingMembers,
+ isError: isMembersError,
+ isSuccess: isSuccessMembers,
+ } = useOrganizationMembersQuery({ slug })
const { can: canReadMfaConfig, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
PermissionAction.READ,
@@ -89,7 +84,19 @@ export const SecuritySettings = () => {
}, [mfaConfig, form])
const hasMFAEnabled =
- members?.find((member) => member.primary_email == profile?.primary_email)?.mfa_enabled || false
+ members?.find((member) => member.primary_email == profile?.primary_email)?.mfa_enabled ?? false
+
+ const requiresPersonalMfa = isSuccessMembers && canUpdateMfaConfig && !hasMFAEnabled
+
+ const isLoadingMfaEnforcementSettings =
+ isLoadingMfa || isLoadingPermissions || isLoadingEntitlement || isLoadingMembers
+ const hasMfaConfigError = (isErrorMfa || Boolean(mfaError)) && hasAccessToEnforceMfa
+ const canShowMfaEnforcementForm =
+ isSuccessMfa && hasAccessToEnforceMfa && isSuccessMembers && !requiresPersonalMfa
+ const isMfaEnforcementSwitchDisabled =
+ !hasAccessToEnforceMfa || !canUpdateMfaConfig || isUpdatingMfa
+ const isSaveMfaEnforcementDisabled =
+ isMfaEnforcementSwitchDisabled || isLoadingMfa || !form.formState.isDirty
const onSubmit = (values: { enforceMfa: boolean }) => {
if (!slug || !hasAccessToEnforceMfa) return
@@ -108,7 +115,7 @@ export const SecuritySettings = () => {
/>
) : (
<>
- {isLoadingMfa || isLoadingPermissions || isLoadingEntitlement ? (
+ {isLoadingMfaEnforcementSettings ? (
<Card>
<CardContent>
<GenericSkeletonLoader />
@@ -116,13 +123,31 @@ export const SecuritySettings = () => {
</Card>
) : !canReadMfaConfig ? (
<NoPermission resourceText="view organization security settings" />
- ) : null}
+ ) : (
+ requiresPersonalMfa && (
+ <Admonition
+ type="note"
+ layout="horizontal"
+ title="Enable MFA on your account first"
+ description="You need to set up multi-factor authentication (MFA) on your own account before you can enforce it on your organization."
+ actions={
+ <Button asChild variant="default">
+ <Link href="/account/security">Set up MFA</Link>
+ </Button>
+ }
+ />
+ )
+ )}
- {(isErrorMfa || mfaError) && hasAccessToEnforceMfa && (
+ {isMembersError && (
+ <AlertError error={membersError} subject="Failed to retrieve organization members" />
+ )}
+
+ {hasMfaConfigError && (
<AlertError error={mfaError} subject="Failed to retrieve MFA enforcement status" />
)}
- {isSuccessMfa && hasAccessToEnforceMfa && (
+ {canShowMfaEnforcementForm && (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
@@ -133,36 +158,16 @@ export const SecuritySettings = () => {
render={({ field }) => (
<FormItemLayout
layout="flex-row-reverse"
+ className="justify-between"
label="Require MFA to access organization"
description="Team members must have MFA enabled and a valid MFA session to access the organization and any projects."
>
<FormControl>
- <Tooltip>
- <TooltipTrigger asChild>
- <Switch
- checked={field.value}
- onCheckedChange={field.onChange}
- disabled={
- !hasAccessToEnforceMfa ||
- !canUpdateMfaConfig ||
- !hasMFAEnabled ||
- isUpdatingMfa
- }
- />
- </TooltipTrigger>
- {(!canUpdateMfaConfig || !hasMFAEnabled) && (
- <TooltipContent side="bottom">
- {!canUpdateMfaConfig ? (
- "You don't have permission to update MFA settings"
- ) : (
- <>
- <InlineLink href="/account/security">Enable MFA</InlineLink>{' '}
- on your own account first
- </>
- )}
- </TooltipContent>
- )}
- </Tooltip>
+ <Switch
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ disabled={isMfaEnforcementSwitchDisabled}
+ />
</FormControl>
</FormItemLayout>
)}
@@ -183,16 +188,10 @@ export const SecuritySettings = () => {
<Button
variant="primary"
type="submit"
- disabled={
- !hasAccessToEnforceMfa ||
- !canUpdateMfaConfig ||
- isUpdatingMfa ||
- isLoadingMfa ||
- !form.formState.isDirty
- }
+ disabled={isSaveMfaEnforcementDisabled}
loading={isUpdatingMfa}
>
- Save changes
+ Save
</Button>
</CardFooter>
</Card>
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
index 505991fb5e7..d5ee5abab4c 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -13,11 +13,11 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { MemberRow } from './MemberRow'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useOrganizationRolesV2Query } from '@/data/organization-members/organization-roles-query'
import { useOrganizationMembersQuery } from '@/data/organizations/organization-members-query'
import { useProfile } from '@/lib/profile'
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
index e6c3a22657c..7acaeaaf284 100644
--- a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
+++ b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { Search } from 'lucide-react'
import { useState } from 'react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { InviteMemberButton } from './InviteMemberButton'
diff --git a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx
index ee56a606675..d02039759ae 100644
--- a/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/TotalUsage.tsx
@@ -7,7 +7,7 @@ import { BILLING_BREAKDOWN_METRICS } from '../BillingSettings/BillingBreakdown/B
import { BillingMetric } from '../BillingSettings/BillingBreakdown/BillingMetric'
import { ComputeMetric } from '../BillingSettings/BillingBreakdown/ComputeMetric'
import { SectionContent } from './SectionContent'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import {
ComputeUsageMetric,
computeUsageMetricLabel,
diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
index 550e996f7ea..380ba5f795a 100644
--- a/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/Usage.constants.tsx
@@ -1,5 +1,5 @@
import { ReactNode } from 'react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { USAGE_APPROACHING_THRESHOLD } from '@/components/interfaces/Billing/Billing.constants'
import { EgressType, PricingMetric } from '@/data/analytics/org-daily-stats-query'
diff --git a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
index e6fb9283d97..6eb76f17439 100644
--- a/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/Usage.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
import { useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { Button, cn, CommandGroup, CommandItem } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { Restriction } from '../BillingSettings/Restriction'
@@ -23,9 +23,9 @@ import {
ScaffoldSection,
ScaffoldTitle,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import DateRangePicker from '@/components/ui/DateRangePicker'
-import NoPermission from '@/components/ui/NoPermission'
+import { AlertError } from '@/components/ui/AlertError'
+import { DateRangePicker } from '@/components/ui/DateRangePicker'
+import { NoPermission } from '@/components/ui/NoPermission'
import { OrganizationProjectSelector } from '@/components/ui/OrganizationProjectSelector'
import { useOrgDailyStatsQuery } from '@/data/analytics/org-daily-stats-query'
import { useProjectDetailQuery } from '@/data/projects/project-detail-query'
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
index 53f64a0a574..4dd9d729457 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/AttributeUsage.tsx
@@ -13,9 +13,9 @@ import {
} from '../Usage.utils'
import UsageBarChart from '../UsageBarChart'
import { ChartMeta } from './UsageSection'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import Panel from '@/components/ui/Panel'
-import SparkBar from '@/components/ui/SparkBar'
+import { SparkBar } from '@/components/ui/SparkBar'
import type { OrgSubscription } from '@/data/subscriptions/types'
import type { OrgMetricsUsage, OrgUsageResponse } from '@/data/usage/org-usage-query'
import { USAGE_APPROACHING_THRESHOLD } from '@/lib/constants'
diff --git a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
index 8dc64ae58b7..9875d5abfe2 100644
--- a/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
+++ b/apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx
@@ -7,7 +7,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { SectionContent } from '../SectionContent'
import { CategoryAttribute } from '../Usage.constants'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import Panel from '@/components/ui/Panel'
import { PricingMetric } from '@/data/analytics/org-daily-stats-query'
import { useOrgProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
diff --git a/apps/studio/components/interfaces/Organization/restriction.constants.tsx b/apps/studio/components/interfaces/Organization/restriction.constants.tsx
index 26a440ffabd..dc13ebb5f8d 100644
--- a/apps/studio/components/interfaces/Organization/restriction.constants.tsx
+++ b/apps/studio/components/interfaces/Organization/restriction.constants.tsx
@@ -1,6 +1,6 @@
import dayjs from 'dayjs'
import { type ReactNode } from 'react'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
index 10b746c6695..28de171f715 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -4,7 +4,8 @@ import { useRouter } from 'next/router'
import type { ReactNode } from 'react'
import { toast } from 'sonner'
import { Button, Card, CardContent } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import {
getOrganizationInviteContent,
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
index 2209dfeb9a2..c4b94077499 100644
--- a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
+++ b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInviteError.tsx
@@ -1,6 +1,6 @@
import { useRouter } from 'next/router'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { OrganizationInviteByToken } from '@/data/organization-members/organization-invitation-token-query'
import { useSignOut } from '@/lib/auth'
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
index 7d762cba140..0c8096bcfb0 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksDeliveryDetailsSheet.tsx
@@ -16,7 +16,7 @@ import {
TabsList_Shadcn_ as TabsList,
TabsTrigger_Shadcn_ as TabsTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import type { WebhookDelivery } from './PlatformWebhooks.types'
import { formatDeliveryStatus, statusBadgeVariant } from './PlatformWebhooksView.utils'
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx
index cb422c330ee..579f7c8c796 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.test.tsx
@@ -34,11 +34,8 @@ vi.mock('@/components/ui/ButtonTooltip', () => ({
),
}))
-vi.mock('ui-patterns', async () => {
- const actual = await vi.importActual<typeof import('ui-patterns')>('ui-patterns')
-
+vi.mock('ui-patterns/TimestampInfo', async () => {
return {
- ...actual,
TimestampInfo: ({ utcTimestamp, className }: { utcTimestamp: string; className?: string }) => (
<span className={className}>{utcTimestamp}</span>
),
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
index e026d94b92d..358ada0b955 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointDetails.tsx
@@ -23,9 +23,9 @@ import {
TableHeader,
TableRow,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import { TanStackTableHeadSort } from 'ui-patterns/Table'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import type { WebhookDelivery, WebhookEndpoint } from './PlatformWebhooks.types'
import { statusBadgeVariant } from './PlatformWebhooksView.utils'
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
index 1373b733d37..766c1997268 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksEndpointList.tsx
@@ -17,8 +17,9 @@ import {
TableHeadSort,
TableRow,
} from 'ui'
-import { EmptyStatePresentational, TimestampInfo } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import type { WebhookEndpoint } from './PlatformWebhooks.types'
import { getWebhookEndpointDisplayName } from './PlatformWebhooks.utils'
diff --git a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
index a0b26c95a94..815751dc7b4 100644
--- a/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
+++ b/apps/studio/components/interfaces/Platform/Webhooks/PlatformWebhooksPage.tsx
@@ -21,7 +21,7 @@ import {
DropdownMenuTrigger,
Label,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
diff --git a/apps/studio/components/interfaces/Project/APIKeys.tsx b/apps/studio/components/interfaces/Project/APIKeys.tsx
index a023a338390..2a652fed5b3 100644
--- a/apps/studio/components/interfaces/Project/APIKeys.tsx
+++ b/apps/studio/components/interfaces/Project/APIKeys.tsx
@@ -3,9 +3,10 @@ import { JwtSecretUpdateStatus } from '@supabase/shared-types/out/events'
import { useParams } from 'common'
import { Loader } from 'lucide-react'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ConnectionIcon } from '@/components/interfaces/Connect/ConnectionIcon'
import { ConnectButton } from '@/components/interfaces/ConnectButton/ConnectButton'
@@ -187,9 +188,9 @@ export const APIKeys = () => {
className="absolute inset-0 rounded-md -mt-px"
style={{
backgroundImage: `
- linear-gradient(to top, hsl(var(--background-surface-100)/1) 0%, hsl(var(--background-surface-100)/1) 30%, hsl(var(--background-surface-75)/0) 100%),
- linear-gradient(to right, hsl(var(--border-default)/0.33) 1px, transparent 1px),
- linear-gradient(to bottom, hsl(var(--border-default)/0.33) 1px, transparent 1px)
+ linear-gradient(to top, oklch(from var(--background-surface-100) l c h / 1) 0%, oklch(from var(--background-surface-100) l c h / 1) 30%, oklch(from var(--background-surface-75) l c h / 0) 100%),
+ linear-gradient(to right, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px),
+ linear-gradient(to bottom, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px)
`,
backgroundSize: '100% 100%, 15px 15px, 15px 15px',
backgroundPosition: '0 0, 0 0, 0 0',
diff --git a/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx b/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
index cc096785354..8fabf212664 100644
--- a/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
+++ b/apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
import { Fragment, type ReactNode } from 'react'
import SVG from 'react-inlinesvg'
import { Button, cn } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { navigateToSection } from './Content/Content.utils'
import { API_DOCS_CATEGORIES, DOCS_CONTENT, DOCS_MENU } from './ProjectAPIDocs.constants'
diff --git a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
index f73e4778acc..9651283d523 100644
--- a/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/AdvancedConfiguration.tsx
@@ -14,7 +14,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { CollapsibleCardSection } from 'ui-patterns/CollapsibleCardSection'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
diff --git a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
index 036bf2a6633..70fd51bb8b0 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ComputeSizeSelector.tsx
@@ -9,7 +9,7 @@ import {
SelectTrigger,
SelectValue,
} from 'ui'
-import { ComputeBadge } from 'ui-patterns'
+import { ComputeBadge } from 'ui-patterns/ComputeBadge'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { sizes } from './ProjectCreation.constants'
diff --git a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
index d10212ebbba..9593bf99ec8 100644
--- a/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/RegionSelector.tsx
@@ -1,4 +1,4 @@
-import { useFlag, useParams } from 'common'
+import { useFeatureFlags, useParams } from 'common'
import { UseFormReturn } from 'react-hook-form'
import type { CloudProvider } from 'shared-data'
import {
@@ -22,14 +22,14 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { CreateProjectForm } from './ProjectCreation.schema'
import { getAvailableRegions } from './ProjectCreation.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import Panel from '@/components/ui/Panel'
import { useDefaultRegionQuery } from '@/data/misc/get-default-region-query'
import { useOrganizationAvailableRegionsQuery } from '@/data/organizations/organization-available-regions-query'
import { useIncidentStatusQuery } from '@/data/platform/incident-status-query'
import type { DesiredInstanceSize } from '@/data/projects/new-project.constants'
-import { BASE_PATH, PROVIDERS } from '@/lib/constants'
+import { BASE_PATH } from '@/lib/constants'
interface RegionSelectorProps {
form: UseFormReturn<CreateProjectForm>
@@ -69,14 +69,15 @@ export const RegionSelector = ({
const { slug } = useParams()
const cloudProvider = form.getValues('cloudProvider') as CloudProvider
- const smartRegionEnabled = useFlag('enableSmartRegion')
+ const { hasLoaded: flagsLoaded } = useFeatureFlags()
+ const smartRegionEnabled = cloudProvider !== 'AWS_NIMBUS'
const { data: statusData } = useIncidentStatusQuery()
const { incidents = [] } = statusData ?? {}
const { isPending: isLoadingDefaultRegion } = useDefaultRegionQuery(
{ cloudProvider },
- { enabled: !smartRegionEnabled }
+ { enabled: flagsLoaded && !smartRegionEnabled }
)
const {
@@ -99,7 +100,7 @@ export const RegionSelector = ({
availableRegionsData?.recommendations.specific.map((region) => region.code)
)
- const availableRegions = getAvailableRegions(PROVIDERS[cloudProvider].id)
+ const availableRegions = getAvailableRegions(cloudProvider)
const regionsArray = Object.entries(availableRegions).map(([_key, value]) => {
return {
code: value.code,
diff --git a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
index 254f41a5f70..bca84b51169 100644
--- a/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/SecurityOptions.tsx
@@ -12,7 +12,7 @@ import {
TooltipTrigger,
useWatch,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { CreateProjectForm } from './ProjectCreation.schema'
diff --git a/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx b/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
index a3da7867b7a..220d9d71063 100644
--- a/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ActivityStats.tsx
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
import { Archive, Cpu, Database, GitBranch, Github } from 'lucide-react'
import { useMemo } from 'react'
import { cn, Skeleton } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { HighAvailabilityBadge } from './HighAvailabilityBadge'
import { ServiceStatus } from './ServiceStatus'
diff --git a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
index 8a8f91060f3..f26b15f6112 100644
--- a/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/AdvisorSection.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { BarChart, Shield } from 'lucide-react'
import { useCallback, useMemo } from 'react'
import { AiIconAnimation, Badge, Button, Card, CardContent, CardHeader, CardTitle, cn } from 'ui'
-import { Row } from 'ui-patterns'
+import { Row } from 'ui-patterns/Row'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { Markdown } from '../Markdown'
diff --git a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
index c71c93e3d89..9ad8c75030c 100644
--- a/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/CustomReportSection.tsx
@@ -16,7 +16,7 @@ import type { CSSProperties, DragEvent, ReactNode } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
-import { Row } from 'ui-patterns'
+import { Row } from 'ui-patterns/Row'
import { SnippetDropdown } from '@/components/interfaces/ProjectHome/SnippetDropdown'
import { ReportBlock } from '@/components/interfaces/Reports/ReportBlock/ReportBlock'
diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
index 766d93cb318..0cc0ec22144 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectConnectionPopover.tsx
@@ -12,7 +12,7 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { getConnectionStrings } from '@/components/interfaces/Connect/DatabaseSettings.utils'
import { useAPIKeys } from '@/data/api-keys/api-keys-query'
diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
index c60348b5187..78106a90b9c 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx
@@ -4,10 +4,15 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle, Loading, WarningIcon } from 'ui'
-import { Row } from 'ui-patterns'
import { ChartEmptyState } from 'ui-patterns/Chart'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
+import { Row } from 'ui-patterns/Row'
+import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import {
+ buildUnifiedLogsUrl,
+ type UnifiedLogType,
+} from '@/components/interfaces/UnifiedLogs/UnifiedLogs.utils'
import NoDataPlaceholder from '@/components/ui/Charts/NoDataPlaceholder'
import { ChartIntervalDropdown } from '@/components/ui/Logs/ChartIntervalDropdown'
import { CHART_INTERVALS } from '@/components/ui/Logs/logs.utils'
@@ -34,6 +39,7 @@ type ServiceEntry = {
title: string
href?: string
route: string
+ logType: UnifiedLogType
enabled: boolean
}
@@ -55,6 +61,7 @@ export const ProjectUsageSection = () => {
])
const { getEntitlementMax } = useCheckEntitlements('log.retention_days')
const retentionDays = getEntitlementMax()
+ const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
const DEFAULT_INTERVAL: ChartIntervalKey =
retentionDays !== undefined && retentionDays < 7 ? '1hr' : '1day'
@@ -116,6 +123,7 @@ export const ProjectUsageSection = () => {
title: 'Database requests',
href: `/project/${projectRef}/editor`,
route: '/logs/postgres-logs',
+ logType: 'postgres',
enabled: true,
},
{
@@ -123,6 +131,7 @@ export const ProjectUsageSection = () => {
title: 'Auth requests',
href: `/project/${projectRef}/auth/users`,
route: '/logs/auth-logs',
+ logType: 'auth',
enabled: authEnabled,
},
{
@@ -130,6 +139,7 @@ export const ProjectUsageSection = () => {
title: 'Storage requests',
href: `/project/${projectRef}/storage/buckets`,
route: '/logs/storage-logs',
+ logType: 'storage',
enabled: storageEnabled,
},
{
@@ -137,6 +147,7 @@ export const ProjectUsageSection = () => {
title: 'Realtime requests',
href: `/project/${projectRef}/realtime/inspector`,
route: '/logs/realtime-logs',
+ logType: 'realtime',
enabled: true,
},
],
@@ -179,27 +190,31 @@ export const ProjectUsageSection = () => {
[serviceBase, filledCharts, isLoading, error]
)
- const handleBarClick =
- (logRoute: string, serviceKey: ServiceKey) => (datum: LogsBarChartDatum) => {
- if (!datum?.timestamp) return
+ const handleBarClick = (service: ServiceEntry) => (datum: LogsBarChartDatum) => {
+ if (!datum?.timestamp) return
- const datumTimestamp = dayjs(datum.timestamp).toISOString()
- const start = dayjs(datumTimestamp).subtract(1, 'minute').toISOString()
- const end = dayjs(datumTimestamp).add(1, 'minute').toISOString()
+ const datumTimestamp = dayjs(datum.timestamp).toISOString()
+ const start = dayjs(datumTimestamp).subtract(1, 'minute').toISOString()
+ const end = dayjs(datumTimestamp).add(1, 'minute').toISOString()
+ if (isUnifiedLogsEnabled) {
+ router.push(
+ buildUnifiedLogsUrl({ projectRef: projectRef!, logType: service.logType, start, end })
+ )
+ } else {
const queryParams = new URLSearchParams({
iso_timestamp_start: start,
iso_timestamp_end: end,
})
-
- router.push(`/project/${projectRef}${logRoute}?${queryParams.toString()}`)
-
- track('home_project_usage_chart_clicked', {
- service_type: serviceKey,
- bar_timestamp: datum.timestamp,
- })
+ router.push(`/project/${projectRef}${service.route}?${queryParams.toString()}`)
}
+ track('home_project_usage_chart_clicked', {
+ service_type: service.key,
+ bar_timestamp: datum.timestamp,
+ })
+ }
+
const enabledServices = services.filter((s) => s.enabled)
const totalRequests = enabledServices.reduce((sum, s) => sum + (s.total || 0), 0)
@@ -252,7 +267,7 @@ export const ProjectUsageSection = () => {
data={s.data}
error={s.error}
DateTimeFormat={datetimeFormat}
- onBarClick={handleBarClick(s.route, s.key)}
+ onBarClick={handleBarClick(s)}
hideZeroValues={true}
chartConfig={{
error_count: {
diff --git a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
index b70c9f85964..7f3385e803b 100644
--- a/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ProjectUsageSectionDeltas.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useMemo, useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle, cn, Loading } from 'ui'
-import { Row } from 'ui-patterns'
import { LogsBarChart } from 'ui-patterns/LogsBarChart'
+import { Row } from 'ui-patterns/Row'
import {
buildSortedServiceCards,
@@ -14,7 +14,12 @@ import {
type ChartIntervalKey,
type LogsBarChartDatum,
} from './ProjectUsage.metrics'
+import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useServiceHealthMetrics } from '@/components/interfaces/Observability/useServiceHealthMetrics'
+import {
+ buildUnifiedLogsUrl,
+ type UnifiedLogType,
+} from '@/components/interfaces/UnifiedLogs/UnifiedLogs.utils'
import NoDataPlaceholder from '@/components/ui/Charts/NoDataPlaceholder'
import { ChartIntervalDropdown } from '@/components/ui/Logs/ChartIntervalDropdown'
import { CHART_INTERVALS } from '@/components/ui/Logs/logs.utils'
@@ -35,6 +40,7 @@ type ServiceEntry = {
title: string
href?: string
route: string
+ logType: UnifiedLogType
enabled: boolean
}
@@ -48,6 +54,7 @@ export const ProjectUsageSectionDeltas = () => {
'project_storage:all',
])
const { isEnabled: dataApiEnabled } = useIsDataApiEnabled({ projectRef })
+ const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
const { getEntitlementMax } = useCheckEntitlements('log.retention_days')
const retentionDays = getEntitlementMax()
@@ -71,6 +78,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'Postgres',
href: `/project/${projectRef}/editor`,
route: '/logs/postgres-logs',
+ logType: 'postgres',
enabled: true,
},
{
@@ -78,6 +86,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'Edge Functions',
href: `/project/${projectRef}/functions`,
route: '/logs/edge-functions-logs',
+ logType: 'edge function',
enabled: true,
},
{
@@ -85,6 +94,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'Auth',
href: `/project/${projectRef}/auth/users`,
route: '/logs/auth-logs',
+ logType: 'auth',
enabled: authEnabled,
},
{
@@ -92,6 +102,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'Storage',
href: `/project/${projectRef}/storage/buckets`,
route: '/logs/storage-logs',
+ logType: 'storage',
enabled: storageEnabled,
},
{
@@ -99,6 +110,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'Realtime',
href: `/project/${projectRef}/realtime/inspector`,
route: '/logs/realtime-logs',
+ logType: 'realtime',
enabled: true,
},
{
@@ -106,6 +118,7 @@ export const ProjectUsageSectionDeltas = () => {
title: 'API Gateway',
href: `/project/${projectRef}/integrations/data_api/overview`,
route: '/logs/edge-logs',
+ logType: 'edge',
enabled: dataApiEnabled,
},
],
@@ -127,27 +140,28 @@ export const ProjectUsageSectionDeltas = () => {
totalErrors
)
- const handleBarClick =
- (logRoute: string, serviceKey: HomeServiceKey) => (datum: LogsBarChartDatum) => {
- if (!datum?.timestamp) return
+ const handleBarClick = (service: ServiceEntry) => (datum: LogsBarChartDatum) => {
+ if (!datum?.timestamp) return
+ const { start, end } = getBucketLogRange(datum.timestamp, interval)
+
+ if (isUnifiedLogsEnabled) {
+ router.push(
+ buildUnifiedLogsUrl({ projectRef: projectRef!, logType: service.logType, start, end })
+ )
+ } else {
// Logs explorer reads the range from `its`/`ite` (iso_timestamp_start/end
// only set the label).
- const { start, end } = getBucketLogRange(datum.timestamp, interval)
-
- const queryParams = new URLSearchParams({
- its: start,
- ite: end,
- })
-
- router.push(`/project/${projectRef}${logRoute}?${queryParams.toString()}`)
-
- track('home_project_usage_chart_clicked', {
- service_type: serviceKey,
- bar_timestamp: datum.timestamp,
- })
+ const queryParams = new URLSearchParams({ its: start, ite: end })
+ router.push(`/project/${projectRef}${service.route}?${queryParams.toString()}`)
}
+ track('home_project_usage_chart_clicked', {
+ service_type: service.key,
+ bar_timestamp: datum.timestamp,
+ })
+ }
+
return (
<div className="space-y-6">
<div className="flex flex-row justify-between items-center gap-x-2">
@@ -207,14 +221,14 @@ export const ProjectUsageSectionDeltas = () => {
<div className="flex flex-col items-end">
<div className="flex items-center gap-2">
<div className="w-1.5 h-1.5 bg-warning rounded-full" />
- <span className="heading-meta">Warn</span>
+ <span className="heading-meta">Warnings</span>
</div>
<span className="text-foreground text-base">{s.warn.toLocaleString()}</span>
</div>
<div className="flex flex-col items-end">
<div className="flex items-center gap-2">
<div className="w-1.5 h-1.5 bg-destructive rounded-full" />
- <span className="heading-meta">Err</span>
+ <span className="heading-meta">Errors</span>
</div>
<span className="text-foreground text-base">{s.err.toLocaleString()}</span>
</div>
@@ -226,12 +240,12 @@ export const ProjectUsageSectionDeltas = () => {
isFullHeight
data={s.data}
DateTimeFormat={datetimeFormat}
- onBarClick={disabled ? undefined : handleBarClick(s.route, s.key)}
+ onBarClick={disabled ? undefined : handleBarClick(s)}
hideZeroValues={true}
chartConfig={{
error_count: { label: 'Errors' },
warning_count: { label: 'Warnings' },
- ok_count: { label: 'Requests' },
+ ok_count: { label: 'Infos' },
}}
EmptyState={
isLoading ? (
diff --git a/apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx b/apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx
index e706e00ee5c..079ba9eaf09 100644
--- a/apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx
+++ b/apps/studio/components/interfaces/ProjectHome/ServiceStatus.tsx
@@ -1,26 +1,85 @@
import { useParams } from 'common'
import dayjs from 'dayjs'
-import { ChevronRight, Loader2 } from 'lucide-react'
+import { AlertTriangle, CheckCircle2, ChevronRight, Loader2 } from 'lucide-react'
import Link from 'next/link'
import { cn, HoverCard, HoverCardContent, HoverCardTrigger, InfoIcon } from 'ui'
-import {
- extractDbSchema,
- ProjectServiceStatus,
- StatusIcon,
- StatusMessage,
-} from '../Home/ServiceStatus'
+import { useUnifiedLogsPreview } from '../App/FeaturePreview/FeaturePreviewContext'
import { InlineLink } from '@/components/ui/InlineLink'
import { SingleStat } from '@/components/ui/SingleStat'
import { useBranchesQuery } from '@/data/branches/branches-query'
import { useEdgeFunctionServiceStatusQuery } from '@/data/service-status/edge-functions-status-query'
-import { useProjectServiceStatusQuery } from '@/data/service-status/service-status-query'
+import {
+ useProjectServiceStatusQuery,
+ type ProjectServiceStatus as APIProjectServiceStatus,
+ type ServiceHealthResponse,
+} from '@/data/service-status/service-status-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
const SERVICE_STATUS_THRESHOLD = 5 // minutes
+type ProjectServiceStatus = APIProjectServiceStatus | 'DISABLED'
+
+const iconProps = {
+ size: 18,
+ strokeWidth: 1.5,
+}
+const LoaderIcon = () => <Loader2 {...iconProps} className="animate-spin" />
+const AlertIcon = () => <AlertTriangle {...iconProps} />
+const CheckIcon = () => <CheckCircle2 {...iconProps} className="text-brand" />
+
+export const StatusIcon = ({
+ isLoading,
+ isProjectNew,
+ projectStatus,
+}: {
+ isLoading: boolean
+ isProjectNew: boolean
+ projectStatus?: ProjectServiceStatus
+}) => {
+ //
+ if (projectStatus === 'ACTIVE_HEALTHY') return <CheckIcon />
+ if (projectStatus === 'DISABLED') return <AlertIcon />
+ if (projectStatus === 'COMING_UP') return <LoaderIcon />
+ if (isLoading) return <LoaderIcon />
+ // isProjectNew has to be above UNHEALTHY because in the first few minutes, some services might be starting up and show as UNHEALTHY
+ if (isProjectNew) return <LoaderIcon />
+ if (projectStatus === 'UNHEALTHY') return <AlertIcon />
+ return <AlertIcon />
+}
+
+const StatusMessage = ({
+ status,
+ isLoading,
+ isProjectNew,
+}: {
+ isLoading: boolean
+ isProjectNew: boolean
+ status?: ProjectServiceStatus
+}) => {
+ if (isLoading) return 'Checking status'
+ if (status === 'DISABLED') return 'Disabled'
+ if (status === 'UNHEALTHY') return 'Unhealthy'
+ if (status === 'COMING_UP') return 'Coming up...'
+ if (status === 'ACTIVE_HEALTHY') return 'Healthy'
+ // isProjectNew has to be after all other statuses
+ if (isProjectNew) return 'Coming up...'
+ if (status) return status
+ return 'Unable to connect'
+}
+
+/*
+ * Extract the db_schema from the response.info object
+ */
+const extractDbSchema = (response: ServiceHealthResponse | undefined) => {
+ if (response?.info && 'db_schema' in response.info) {
+ return response.info.db_schema
+ }
+ return undefined
+}
+
/**
* [Joshen] JFYI before we go live with this, we need to revisit the migrations section
* as I don't think it should live in the ServiceStatus component since its not indicative
@@ -42,6 +101,7 @@ const SERVICE_STATUS_THRESHOLD = 5 // minutes
export const ServiceStatus = () => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
+ const { isEnabled: isUnifiedLogsEnabled } = useUnifiedLogsPreview()
const {
projectAuthAll: authEnabled,
@@ -123,7 +183,7 @@ export const ServiceStatus = () => {
docsUrl: undefined,
isLoading: isLoading,
status: dbStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/postgres-logs',
+ logsUrl: isUnifiedLogsEnabled ? '/logs?filter=log_type:eq:postgres' : '/logs/postgres-logs',
},
{
name: 'PostgREST',
@@ -132,7 +192,7 @@ export const ServiceStatus = () => {
isLoading,
// If PostgREST has an empty schema, it means it's been disabled
status: extractDbSchema(restStatus) === '' ? 'DISABLED' : (restStatus?.status ?? 'UNHEALTHY'),
- logsUrl: '/logs/postgrest-logs',
+ logsUrl: isUnifiedLogsEnabled ? '/logs?filter=log_type:eq:postgrest' : '/logs/postgrest-logs',
},
...(authEnabled
? [
@@ -142,7 +202,7 @@ export const ServiceStatus = () => {
docsUrl: undefined,
isLoading,
status: authStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/auth-logs',
+ logsUrl: isUnifiedLogsEnabled ? '/logs?filter=log_type:eq:auth' : '/logs/auth-logs',
},
]
: []),
@@ -154,7 +214,9 @@ export const ServiceStatus = () => {
docsUrl: undefined,
isLoading,
status: realtimeStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/realtime-logs',
+ logsUrl: isUnifiedLogsEnabled
+ ? '/logs?filter=log_type:eq:realtime'
+ : '/logs/realtime-logs',
},
]
: []),
@@ -166,7 +228,9 @@ export const ServiceStatus = () => {
docsUrl: undefined,
isLoading,
status: storageStatus?.status ?? 'UNHEALTHY',
- logsUrl: '/logs/storage-logs',
+ logsUrl: isUnifiedLogsEnabled
+ ? '/logs?filter=log_type:eq:storage'
+ : '/logs/storage-logs',
},
]
: []),
@@ -182,7 +246,9 @@ export const ServiceStatus = () => {
: isLoading
? ('COMING_UP' as const)
: ('UNHEALTHY' as const),
- logsUrl: '/logs/edge-functions-logs',
+ logsUrl: isUnifiedLogsEnabled
+ ? '/logs?filter=log_type:eq:edge+function'
+ : '/logs/edge-functions-logs',
},
]
: []),
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
index 6ba495898b4..0d022f375cb 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsights.tsx
@@ -14,7 +14,7 @@ import {
parseSupamonitorLogs,
transformLogsToChartData,
} from './utils/supamonitor.utils'
-import useLogsQuery from '@/hooks/analytics/useLogsQuery'
+import { useLogsQuery } from '@/hooks/analytics/useLogsQuery'
dayjs.extend(utc)
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx
index 0c3911f40cf..448eef47dae 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx
@@ -181,13 +181,13 @@ export const QueryInsightsChart = ({
dataKey="time"
tick={false}
tickLine={false}
- axisLine={{ stroke: 'hsl(var(--border-default))' }}
+ axisLine={{ stroke: 'var(--border-default)' }}
height={1}
/>
<YAxis
axisLine={false}
tickLine={false}
- tick={{ fontSize: 10, fill: 'hsl(var(--foreground-muted))' }}
+ tick={{ fontSize: 10, fill: 'var(--foreground-muted)' }}
tickCount={3}
width={40}
orientation="left"
@@ -208,7 +208,7 @@ export const QueryInsightsChart = ({
<CartesianGrid
horizontal={true}
vertical={false}
- stroke="hsl(var(--border-default))"
+ stroke="var(--border-default)"
strokeOpacity={0.5}
/>
{legendItems.map((item) => (
diff --git a/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealthScore.tsx b/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealthScore.tsx
index 6c69d1eb004..d870e60f581 100644
--- a/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealthScore.tsx
+++ b/apps/studio/components/interfaces/QueryInsights/QueryInsightsHealth/QueryInsightsHealthScore.tsx
@@ -11,7 +11,7 @@ export const QueryInsightsHealthScore = ({
<div
className="h-12 w-12 rounded-full flex items-center justify-center"
style={{
- background: `conic-gradient(${color} ${score * 3.6}deg, hsl(var(--border-default)) ${score * 3.6}deg)`,
+ background: `conic-gradient(${color} ${score * 3.6}deg, var(--border-default) ${score * 3.6}deg)`,
}}
>
<div
diff --git a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx b/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx
deleted file mode 100644
index f2443402989..00000000000
--- a/apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/IndexAdvisorNotice.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { LOCAL_STORAGE_KEYS } from 'common'
-import { useParams } from 'common/hooks'
-import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
-
-import { EnableIndexAdvisorButton } from './EnableIndexAdvisorButton'
-import { useIndexAdvisorStatus } from '@/components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
-import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
-import { BASE_PATH } from '@/lib/constants'
-
-export const IndexAdvisorNotice = () => {
- const { ref } = useParams()
- const { isIndexAdvisorAvailable, isIndexAdvisorEnabled } = useIndexAdvisorStatus()
- const [isDismissed, setIsDismissed] = useLocalStorageQuery(
- LOCAL_STORAGE_KEYS.INDEX_ADVISOR_NOTICE_DISMISSED(ref ?? ''),
- false
- )
-
- if (!isIndexAdvisorAvailable || isIndexAdvisorEnabled || isDismissed) return null
-
- return (
- <div className="px-6">
- <Admonition showIcon={false} type="tip" className="relative overflow-hidden mb-4">
- <div className="absolute -inset-16 z-0 opacity-50">
- <img
- src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
- alt="Index Advisor"
- className="w-full h-full object-cover object-right hidden dark:block"
- />
- <img
- src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
- alt="Index Advisor"
- className="w-full h-full object-cover object-right dark:hidden"
- />
- <div className="absolute inset-0 bg-linear-to-r from-background-alternative to-transparent" />
- </div>
- <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
- <div className="flex flex-col gap-y-0.5">
- <div className="flex flex-col gap-y-2 items-start">
- <p className="text-sm font-medium">Enable Index Advisor</p>
- </div>
- <p className="text-sm text-foreground-lighter text-balance">
- Recommends indexes to improve query performance.
- </p>
- </div>
- <div className="flex items-center gap-x-2">
- <Button
- variant="default"
- size="tiny"
- onClick={() => setIsDismissed(true)}
- aria-label="Dismiss notification"
- >
- Dismiss
- </Button>
- <EnableIndexAdvisorButton />
- </div>
- </div>
- </Admonition>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
index 621b0845ece..4f267a61bef 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryDetail.tsx
@@ -99,9 +99,7 @@ export const QueryDetail = ({ selectedRow, onClickViewSuggestion, onClose }: Que
>
<SqlMonacoBlock
value={query}
- height={322}
- lineNumbers="off"
- wrapperClassName={cn('pl-3 bg-surface-100', !isExpanded && 'pointer-events-none')}
+ wrapperClassName={cn('bg-surface-100', !isExpanded && 'pointer-events-none')}
/>
{isLinterWarning && (
<Alert
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
index 0e6f5aef43c..c6c64a67590 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryIndexes.tsx
@@ -14,7 +14,7 @@ import {
CollapsibleContent,
CollapsibleTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
@@ -30,7 +30,7 @@ import { IndexImprovementText } from './IndexAdvisor/IndexImprovementText'
import { QueryPanelContainer, QueryPanelScoreSection, QueryPanelSection } from './QueryPanel'
import { QueryPerformanceRow } from './QueryPerformance.types'
import { useIndexAdvisorStatus } from '@/components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-extensions-query'
import {
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceChart.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceChart.tsx
deleted file mode 100644
index 281786220ec..00000000000
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceChart.tsx
+++ /dev/null
@@ -1,361 +0,0 @@
-import { Loader2 } from 'lucide-react'
-import { useMemo, useState } from 'react'
-import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
-
-import type { ChartDataPoint } from '../QueryInsights/QueryInsights.types'
-import { QUERY_PERFORMANCE_CHART_TABS } from './QueryPerformance.constants'
-import { ComposedChart } from '@/components/ui/Charts/ComposedChart'
-import type { MultiAttribute } from '@/components/ui/Charts/ComposedChart.utils'
-
-interface QueryPerformanceChartProps {
- dateRange?: {
- period_start: { date: string; time_period: string }
- period_end: { date: string; time_period: string }
- interval: string
- }
- onDateRangeChange?: (from: string, to: string) => void
- chartData: ChartDataPoint[]
- isLoading: boolean
- error: any
- currentSelectedQuery: string | null
- parsedLogs: any[]
-}
-
-const QueryMetricBlock = ({
- label,
- value,
-}: {
- label: string
- value: string | number | undefined
-}) => {
- return (
- <div className="flex flex-col gap-0.5 text-xs">
- <span className="font-mono text-xs text-foreground-lighter uppercase">{label}</span>
- <span className="text-lg tabular-nums">{value}</span>
- </div>
- )
-}
-
-const formatTimeValue = (value: number): string => {
- if (value >= 1000) {
- return `${(value / 1000).toFixed(1)}s`
- }
- return `${value.toFixed(1)}ms`
-}
-
-const formatNumberValue = (value: number): string => {
- return value.toLocaleString()
-}
-
-export const QueryPerformanceChart = ({
- onDateRangeChange,
- chartData,
- isLoading,
- error,
- currentSelectedQuery,
- parsedLogs,
-}: QueryPerformanceChartProps) => {
- const [selectedMetric, setSelectedMetric] = useState('query_latency')
-
- const currentMetrics = useMemo(() => {
- if (!chartData || chartData.length === 0) return []
-
- switch (selectedMetric) {
- case 'query_latency': {
- const totalCalls = chartData.reduce((sum, d) => sum + d.calls, 0)
- const trueP95 =
- totalCalls > 0
- ? chartData.reduce((sum, d) => sum + d.p95_time * d.calls, 0) / totalCalls
- : 0
-
- return [
- {
- label: 'Average p95',
- value: `${Math.round(trueP95)}ms`,
- },
- ]
- }
- case 'rows_read': {
- const totalRowsRead = chartData.reduce((sum, d) => sum + d.rows_read, 0)
-
- return [
- {
- label: 'Total Rows Read',
- value: totalRowsRead.toLocaleString(),
- },
- ]
- }
- case 'calls': {
- const totalCalls = chartData.reduce((sum, d) => sum + d.calls, 0)
-
- return [
- {
- label: 'Total Calls',
- value: totalCalls.toLocaleString(),
- },
- ]
- }
- case 'cache_hits': {
- const totalHits = chartData.reduce((sum, d) => sum + d.cache_hits, 0)
- const totalMisses = chartData.reduce((sum, d) => sum + d.cache_misses, 0)
- const total = totalHits + totalMisses
- const hitRate = total > 0 ? (totalHits / total) * 100 : 0
-
- return [
- {
- label: 'Cache Hit Rate',
- value: `${hitRate.toFixed(2)}%`,
- },
- ]
- }
- default:
- return []
- }
- }, [chartData, selectedMetric])
-
- const transformedChartData = useMemo(() => {
- if (selectedMetric !== 'query_latency') return chartData
-
- const transformed = chartData.map((dataPoint) => ({
- ...dataPoint,
- p50_time: parseFloat((dataPoint.p50_time / 1000).toFixed(3)),
- p95_time: parseFloat((dataPoint.p95_time / 1000).toFixed(3)),
- }))
-
- return transformed
- }, [chartData, selectedMetric])
-
- const querySpecificData = useMemo(() => {
- if (!currentSelectedQuery || !parsedLogs.length) return null
-
- const normalizedSelected = currentSelectedQuery.replace(/\s+/g, ' ').trim()
- const queryLogs = parsedLogs.filter((log) => {
- const normalized = (log.query || '').replace(/\s+/g, ' ').trim()
- return normalized === normalizedSelected
- })
-
- const queryDataMap = new Map<
- number,
- {
- time: number
- rows_read: number
- calls: number
- cache_hits: number
- }
- >()
-
- queryLogs.forEach((log) => {
- const time = new Date(log.timestamp).getTime()
- const meanTime = log.mean_time ?? log.mean_exec_time ?? log.mean_query_time ?? 0
- const rowsRead = log.rows_read ?? log.rows ?? 0
- const calls = log.calls ?? 0
- const cacheHits = log.shared_blks_hit ?? log.cache_hits ?? 0
-
- queryDataMap.set(time, {
- time: parseFloat(String(meanTime)),
- rows_read: parseFloat(String(rowsRead)),
- calls: parseFloat(String(calls)),
- cache_hits: parseFloat(String(cacheHits)),
- })
- })
-
- return queryDataMap
- }, [currentSelectedQuery, parsedLogs])
-
- const mergedChartData = useMemo(() => {
- if (!querySpecificData || !currentSelectedQuery) {
- return transformedChartData
- }
-
- return transformedChartData.map((dataPoint) => {
- const queryData = querySpecificData.get(dataPoint.period_start)
-
- return {
- ...dataPoint,
- selected_query_time:
- queryData?.time !== undefined
- ? selectedMetric === 'query_latency'
- ? queryData.time / 1000
- : queryData.time
- : null,
- selected_query_rows_read: queryData?.rows_read !== undefined ? queryData.rows_read : null,
- selected_query_calls: queryData?.calls !== undefined ? queryData.calls : null,
- selected_query_cache_hits:
- queryData?.cache_hits !== undefined ? queryData.cache_hits : null,
- }
- })
- }, [transformedChartData, querySpecificData, currentSelectedQuery, selectedMetric])
-
- const getChartAttributes = useMemo((): MultiAttribute[] => {
- const attributeMap: Record<string, MultiAttribute[]> = {
- query_latency: [
- {
- attribute: 'p50_time',
- label: 'p50',
- provider: 'logs',
- type: 'line',
- color: { light: '#8B5CF6', dark: '#8B5CF6' },
- },
- {
- attribute: 'p95_time',
- label: 'p95',
- provider: 'logs',
- type: 'line',
- color: { light: '#65BCD9', dark: '#65BCD9' },
- },
- ],
- rows_read: [
- {
- attribute: 'rows_read',
- label: 'Rows Read',
- provider: 'logs',
- },
- ],
- calls: [
- {
- attribute: 'calls',
- label: 'Calls',
- provider: 'logs',
- },
- ],
- cache_hits: [
- {
- attribute: 'cache_hits',
- label: 'Cache Hits',
- provider: 'logs',
- type: 'line',
- color: { light: '#10B981', dark: '#10B981' },
- },
- ],
- }
-
- const baseAttributes = attributeMap[selectedMetric] || []
-
- if (currentSelectedQuery && querySpecificData) {
- const dimmedBaseAttributes = baseAttributes.map((attr) => ({
- ...attr,
- color: attr.color
- ? { light: attr.color.light + '4D', dark: attr.color.dark + '4D' }
- : attr.color,
- }))
-
- const selectedQueryAttributes: Record<string, MultiAttribute> = {
- query_latency: {
- attribute: 'selected_query_time',
- label: 'Selected Query',
- provider: 'logs',
- type: 'line',
- color: { light: '#10B981', dark: '#10B981' },
- strokeWidth: 3,
- },
- rows_read: {
- attribute: 'selected_query_rows_read',
- label: 'Selected Query',
- provider: 'logs',
- type: 'line',
- color: { light: '#F59E0B', dark: '#F59E0B' },
- strokeWidth: 3,
- },
- calls: {
- attribute: 'selected_query_calls',
- label: 'Selected Query',
- provider: 'logs',
- type: 'line',
- color: { light: '#EC4899', dark: '#EC4899' },
- strokeWidth: 3,
- },
- cache_hits: {
- attribute: 'selected_query_cache_hits',
- label: 'Selected Query',
- provider: 'logs',
- type: 'line',
- color: { light: '#8B5CF6', dark: '#8B5CF6' },
- strokeWidth: 3,
- },
- }
-
- const selectedQueryAttr = selectedQueryAttributes[selectedMetric]
- if (selectedQueryAttr) {
- return [...dimmedBaseAttributes, selectedQueryAttr]
- }
- }
-
- return baseAttributes
- }, [selectedMetric, currentSelectedQuery, querySpecificData])
-
- const updateDateRange = (from: string, to: string) => {
- onDateRangeChange?.(from, to)
- }
-
- const getYAxisFormatter = useMemo(() => {
- if (selectedMetric === 'query_latency') {
- return formatTimeValue
- }
- return formatNumberValue
- }, [selectedMetric])
-
- return (
- <div className="bg-surface-200 border-t">
- <Tabs_Shadcn_
- value={selectedMetric}
- onValueChange={(value) => setSelectedMetric(value as string)}
- className="w-full"
- >
- <TabsList_Shadcn_ className="flex justify-start rounded-none gap-x-4 border-b mt-0! pt-0 px-6">
- {QUERY_PERFORMANCE_CHART_TABS.map((tab) => (
- <TabsTrigger_Shadcn_
- key={tab.id}
- value={tab.id}
- className="flex items-center gap-2 text-xs py-3 border-b font-mono uppercase"
- >
- {tab.label}
- </TabsTrigger_Shadcn_>
- ))}
- </TabsList_Shadcn_>
-
- <TabsContent_Shadcn_ value={selectedMetric} className="bg-surface-200 mt-0 h-inherit">
- <div className="w-full flex items-center justify-center min-h-[282px]">
- {isLoading ? (
- <Loader2 size={20} className="animate-spin text-foreground-lighter" />
- ) : error ? (
- <p className="text-sm text-foreground-light text-center h-full flex items-center justify-center">
- Error loading chart data
- </p>
- ) : (
- <div className="w-full flex flex-col h-full px-6 py-4">
- <div className="flex gap-6 mb-4">
- {currentMetrics.map((metric, index) => (
- <QueryMetricBlock key={index} label={metric.label} value={metric.value} />
- ))}
- </div>
- <ComposedChart
- data={mergedChartData as any}
- attributes={getChartAttributes}
- yAxisKey={getChartAttributes[0]?.attribute || ''}
- xAxisKey="period_start"
- title=""
- customDateFormat="MMM D, YYYY hh:mm A"
- hideChartType={true}
- hideHighlightArea={true}
- showTooltip={true}
- showGrid={true}
- showLegend={true}
- showTotal={false}
- showMaxValue={false}
- updateDateRange={updateDateRange}
- YAxisProps={{
- tick: true,
- width: 60,
- tickFormatter: getYAxisFormatter,
- }}
- xAxisIsDate={true}
- className="mt-2"
- />
- </div>
- )}
- </div>
- </TabsContent_Shadcn_>
- </Tabs_Shadcn_>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
index a820803905d..b8e92898f03 100644
--- a/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx
@@ -19,7 +19,7 @@ import {
TabsList_Shadcn_,
TabsTrigger_Shadcn_,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx b/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
index c20c5b76342..a2f1fde9b21 100644
--- a/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/SqlMonacoBlock.tsx
@@ -1,27 +1,15 @@
-import Editor from '@monaco-editor/react'
import { Check, Copy } from 'lucide-react'
import { useMemo, useState } from 'react'
import { Button, cn, copyToClipboard } from 'ui'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+
type SqlMonacoBlockProps = {
value?: string
- className?: string
wrapperClassName?: string
- hideCopy?: boolean
- // Fixed height in px. Defaults to 310 to match previous CodeBlock max height
- height?: number
- // Show line numbers. Defaults to false to match previous CodeBlock
- lineNumbers?: 'on' | 'off'
}
-export const SqlMonacoBlock = ({
- value,
- className,
- wrapperClassName,
- height = 310,
- lineNumbers = 'off',
- hideCopy = false,
-}: SqlMonacoBlockProps) => {
+export const SqlMonacoBlock = ({ value, wrapperClassName }: SqlMonacoBlockProps) => {
const [copied, setCopied] = useState(false)
const content = useMemo(() => value ?? '', [value])
@@ -36,52 +24,24 @@ export const SqlMonacoBlock = ({
<div
className={cn('group relative border rounded-md overflow-hidden w-full', wrapperClassName)}
>
- <Editor
- theme="supabase"
+ <CodeEditor
+ hideLineNumbers
language="pgsql"
value={content}
- height={height}
- className={className}
- wrapperProps={{
- className:
- '[&_.monaco-editor]:bg-transparent! [&_.monaco-editor-background]:bg-transparent! [&_.monaco-editor]:outline-transparent! [&_.cursor]:hidden!',
- }}
- options={{
- readOnly: true,
- domReadOnly: true,
- fontSize: 13,
- minimap: { enabled: false },
- lineNumbers,
- renderLineHighlight: 'none',
- scrollbar: { vertical: 'auto', horizontal: 'auto' },
- overviewRulerLanes: 0,
- overviewRulerBorder: false,
- glyphMargin: false,
- folding: false,
- lineDecorationsWidth: 0,
- lineNumbersMinChars: lineNumbers === 'off' ? 0 : 3,
- wordWrap: 'on',
- scrollBeyondLastLine: false,
- selectionHighlight: false,
- occurrencesHighlight: 'off',
- fixedOverflowWidgets: true,
- padding: { top: 12, bottom: 12 },
- tabIndex: -1,
- }}
+ className="h-[322px] pl-2"
+ options={{ padding: { top: 12, bottom: 12 } }}
/>
- {!hideCopy && (
- <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
- <Button
- variant="default"
- className="px-1.5"
- icon={copied ? <Check /> : <Copy />}
- onClick={() => handleCopy(content)}
- >
- {copied ? 'Copied' : ''}
- </Button>
- </div>
- )}
+ <div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
+ <Button
+ variant="default"
+ className="px-1.5"
+ icon={copied ? <Check /> : <Copy />}
+ onClick={() => handleCopy(content)}
+ >
+ {copied ? 'Copied' : ''}
+ </Button>
+ </div>
</div>
)
}
diff --git a/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx b/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
index 5c3b74add75..7d683a2bc7b 100644
--- a/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
+++ b/apps/studio/components/interfaces/QueryPerformance/WithStatements/WithStatements.tsx
@@ -5,7 +5,7 @@ import { parseAsString, useQueryStates } from 'nuqs'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Button, cn, LoadingLine } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { Markdown } from '../../Markdown'
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
index 47e41b19c48..8bb5af2b552 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
@@ -6,14 +6,14 @@ import Link from 'next/link'
import { useEffect, useState } from 'react'
import DataGrid, { Row } from 'react-data-grid'
import { Button, cn, IconBroadcast, IconDatabaseChanges, IconPresence } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import type { LogData } from './Messages.types'
import MessageSelection from './MessageSelection'
import NoChannelEmptyState from './NoChannelEmptyState'
import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import ShimmerLine from '@/components/ui/ShimmerLine'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
diff --git a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/FilterSchema.tsx b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/FilterSchema.tsx
index 5887ed4d769..88fbedf87ab 100644
--- a/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/FilterSchema.tsx
+++ b/apps/studio/components/interfaces/Realtime/Inspector/RealtimeFilterPopover/FilterSchema.tsx
@@ -1,4 +1,4 @@
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
export const FilterSchema = ({
value,
diff --git a/apps/studio/components/interfaces/Realtime/Policies.tsx b/apps/studio/components/interfaces/Realtime/Policies.tsx
index 770504521e3..fc407c3652d 100644
--- a/apps/studio/components/interfaces/Realtime/Policies.tsx
+++ b/apps/studio/components/interfaces/Realtime/Policies.tsx
@@ -1,11 +1,11 @@
import { useMemo, useState } from 'react'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import { Policies } from '@/components/interfaces/Auth/Policies/Policies'
-import { PoliciesDataProvider } from '@/components/interfaces/Auth/Policies/PoliciesDataContext'
-import { PolicyEditorPanel } from '@/components/interfaces/Auth/Policies/PolicyEditorPanel'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import AlertError from '@/components/ui/AlertError'
+import { Policies } from '@/components/interfaces/Database/Policies/Policies'
+import { PoliciesDataProvider } from '@/components/interfaces/Database/Policies/PoliciesDataContext'
+import { PolicyEditorPanel } from '@/components/interfaces/Database/Policies/PolicyEditorPanel'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import { AlertError } from '@/components/ui/AlertError'
import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
import { useTablesQuery } from '@/data/tables/tables-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
index 7715d1fc869..cccf528fa35 100644
--- a/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
+++ b/apps/studio/components/interfaces/Realtime/RealtimeSettings.tsx
@@ -20,12 +20,12 @@ import {
InputGroupText,
Switch,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ToggleSpendCapButton } from '@/components/ui/ToggleSpendCapButton'
import { UpgradePlanButton } from '@/components/ui/UpgradePlanButton'
import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
diff --git a/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx b/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
index 796c5b8500c..f11b028ad1f 100644
--- a/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
+++ b/apps/studio/components/interfaces/RedeemCredits/RedeemCredits.tsx
@@ -2,7 +2,8 @@ import { FeatureFlagContext } from 'common'
import { useRouter } from 'next/router'
import { ReactNode, useContext, useEffect, useRef, useState } from 'react'
import { Button, Card, CardContent } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { OrganizationSelector } from '../Connect/OrganizationSelector'
import { CreditCodeRedemption } from '@/components/interfaces/Organization/BillingSettings/CreditCodeRedemption'
diff --git a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
index 6dbc5385b98..1ae3a09d31b 100644
--- a/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportBlock/ChartBlock.tsx
@@ -19,7 +19,7 @@ import {
formatYAxisTick,
} from '@/components/ui/QueryBlock/QueryBlock.utils'
import { AnalyticsInterval } from '@/data/analytics/constants'
-import { mapMultiResponseToAnalyticsData } from '@/data/analytics/infra-monitoring-queries'
+import { mapResponseToAnalyticsData } from '@/data/analytics/infra-monitoring-queries'
import {
InfraMonitoringAttribute,
useInfraMonitoringAttributesQuery,
@@ -119,7 +119,7 @@ export const ChartBlock = ({
const infraMonitoringData = useMemo(() => {
if (!infraMonitoringRawData) return undefined
- const mapped = mapMultiResponseToAnalyticsData(infraMonitoringRawData, [
+ const mapped = mapResponseToAnalyticsData(infraMonitoringRawData, [
attribute as InfraMonitoringAttribute,
])
return mapped[attribute]
@@ -153,19 +153,19 @@ export const ChartBlock = ({
const getCellColor = (attribute: string, value: number) => {
const threshold = METRIC_THRESHOLDS[attribute as keyof typeof METRIC_THRESHOLDS]
- if (!threshold) return 'hsl(var(--chart-1))'
+ if (!threshold) return 'var(--chart-1)'
if (threshold.check === 'gt') {
return value >= threshold.danger
- ? 'hsl(var(--chart-destructive))'
+ ? 'var(--chart-destructive)'
: value >= threshold.warning
- ? 'hsl(var(--chart-warning))'
- : 'hsl(var(--chart-1))'
+ ? 'var(--chart-warning)'
+ : 'var(--chart-1)'
} else {
return value <= threshold.danger
- ? 'hsl(var(--chart-destructive))'
+ ? 'var(--chart-destructive)'
: value <= threshold.warning
- ? 'hsl(var(--chart-warning))'
- : 'hsl(var(--chart-1))'
+ ? 'var(--chart-warning)'
+ : 'var(--chart-1)'
}
}
@@ -362,7 +362,7 @@ export const ChartBlock = ({
/>
}
/>
- <Line dataKey={metricLabel} stroke="hsl(var(--chart-1))" radius={4} />
+ <Line dataKey={metricLabel} stroke="var(--chart-1)" radius={4} />
</LineChart>
)}
</ChartContainer>
diff --git a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx b/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
deleted file mode 100644
index cf658389bac..00000000000
--- a/apps/studio/components/interfaces/Reports/ReportFilterPopover.tsx
+++ /dev/null
@@ -1,387 +0,0 @@
-import { isEqual } from 'lodash'
-import { ChevronDown, Filter as FilterIcon, Plus, X } from 'lucide-react'
-import { KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react'
-import {
- Button,
- cn,
- Command,
- CommandEmpty,
- CommandGroup,
- CommandInput,
- CommandItem,
- CommandList,
- Input,
- Popover,
- PopoverContent,
- PopoverSeparator,
- PopoverTrigger,
-} from 'ui'
-import { sizes } from 'ui/src/lib/commonCva'
-import defaultTheme from 'ui/src/lib/theme/defaultTheme'
-
-import type { ReportFilter, ReportFilterProperty } from './Reports.types'
-import { DropdownControl } from '@/components/grid/components/common/DropdownControl'
-
-const FilterableInput = ({
- value,
- onChange,
- onKeyDown,
- placeholder,
- availableOptions = [],
-}: {
- value: string | number
- onChange: (value: string | number) => void
- onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void
- placeholder?: string
- type?: string
- availableOptions?: string[]
-}) => {
- const [isOpen, setIsOpen] = useState(false)
- const [inputValue, setInputValue] = useState(String(value || ''))
-
- // Ensure we always have a valid array
- const safeOptions = Array.isArray(availableOptions) ? availableOptions : []
-
- useEffect(() => {
- setInputValue(String(value || ''))
- }, [value])
-
- const handleInputChange = (newValue: string) => {
- setInputValue(newValue)
- onChange(newValue)
- }
-
- const handleOptionSelect = (option: string) => {
- setInputValue(option)
- onChange(option)
- setIsOpen(false)
- }
-
- const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
- if (event.key === 'Escape') {
- setIsOpen(false)
- return
- }
-
- // When dropdown is open, let Command component handle Enter for selection
- if (event.key === 'Enter' && isOpen) {
- // Don't call onKeyDown to prevent interference with Command's selection
- return
- }
-
- // When dropdown is closed, allow custom input
- if (event.key === 'Enter' && !isOpen) {
- return
- }
-
- onKeyDown(event)
- }
-
- return (
- <div className="relative flex-1">
- <Command className="relative overflow-visible bg-transparent">
- <CommandInput
- placeholder={placeholder}
- value={inputValue}
- onValueChange={handleInputChange}
- onFocus={() => setIsOpen(true)}
- onKeyDown={handleKeyDown}
- className={cn('h-6 text-sm', defaultTheme.input.variants.standard, sizes.tiny)}
- wrapperClassName="p-0! border! border-control! rounded-md"
- showSearchIcon={false}
- />
- <div
- className={cn(
- 'absolute top-full left-0 right-0 z-50 mt-1 opacity-0 transition-opacity pointer-events-none',
- isOpen && safeOptions.length > 0 && 'opacity-100 pointer-events-auto'
- )}
- >
- <CommandList className="max-h-60 overflow-auto bg-surface-100 border border-border rounded-md shadow-lg">
- <CommandEmpty className="py-2 px-3 text-sm text-foreground-lighter">
- No matching options found. Press Enter to use "{inputValue}"
- </CommandEmpty>
- <CommandGroup>
- {safeOptions.map((option, index) => (
- <CommandItem
- key={`${option}-${index}`}
- value={option}
- onSelect={() => handleOptionSelect(option)}
- className="px-3 py-2 text-sm cursor-pointer"
- >
- {option}
- </CommandItem>
- ))}
- </CommandGroup>
- </CommandList>
- </div>
- </Command>
- {isOpen && <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />}
- </div>
- )
-}
-
-export interface ReportFilterPopoverProps {
- buttonText?: string
- filters: ReportFilter[]
- filterProperties: ReportFilterProperty[]
- onFiltersChange: (filters: ReportFilter[]) => void
- disabled?: boolean
-}
-
-const ReportFilterRow = ({
- filter,
- filterIdx,
- filterProperties,
- onChange,
- onDelete,
- onKeyDown,
-}: {
- filter: ReportFilter
- filterIdx: number
- filterProperties: ReportFilterProperty[]
- onChange: (index: number, filter: ReportFilter) => void
- onDelete: (index: number) => void
- onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void
-}) => {
- const property = filterProperties.find((p) => p.name === filter.propertyName)
-
- const propertyOptions = filterProperties.map((prop) => ({
- value: prop.name,
- label: prop.label,
- postLabel: prop.type,
- }))
-
- const operatorOptions =
- property?.operators.map((op) => ({
- value: op,
- label: op,
- })) || []
-
- const valueOptions = property?.options || []
-
- const handlePropertyChange = (newPropertyName: string | number) => {
- const newProperty = filterProperties.find((p) => p.name === newPropertyName)
- if (newProperty) {
- onChange(filterIdx, {
- propertyName: newPropertyName,
- operator: newProperty.operators[0] || '=',
- value: '',
- })
- }
- }
-
- const handleOperatorChange = (newOperator: string | number) => {
- onChange(filterIdx, {
- ...filter,
- operator: newOperator,
- })
- }
-
- const handleValueChange = (value: string | number) => {
- onChange(filterIdx, {
- ...filter,
- value,
- })
- }
-
- return (
- <div className="flex flex-col px-3">
- {filterIdx > 0 && (
- <div className="flex items-center gap-2 p-1 w-full">
- <div className="w-auto flex-1 bg-border h-px" />
- <span className="text-xs font-mono text-foreground-lighter">AND</span>
- <div className="w-auto flex-1 bg-border h-px" />
- </div>
- )}
- <div className="flex w-full items-center justify-between gap-x-2">
- <DropdownControl align="start" options={propertyOptions} onSelect={handlePropertyChange}>
- <Button
- asChild
- variant="outline"
- icon={
- <div className="text-foreground-lighter">
- <ChevronDown strokeWidth={1.5} />
- </div>
- }
- className="w-32 justify-start"
- >
- <span>{property?.label ?? 'Select property'}</span>
- </Button>
- </DropdownControl>
-
- <DropdownControl align="start" options={operatorOptions} onSelect={handleOperatorChange}>
- <Button
- asChild
- variant="outline"
- icon={
- <div className="text-foreground-lighter">
- <ChevronDown strokeWidth={1.5} />
- </div>
- }
- className="w-20 justify-start"
- >
- <span>{filter.operator}</span>
- </Button>
- </DropdownControl>
-
- {valueOptions?.length > 0 ? (
- <FilterableInput
- value={filter.value}
- onChange={handleValueChange}
- onKeyDown={onKeyDown}
- placeholder={
- property?.placeholder || `Enter ${property?.type === 'number' ? 'number' : 'text'}`
- }
- availableOptions={valueOptions?.map((option) => String(option.value)) || []}
- />
- ) : (
- <Input
- size="tiny"
- className="flex-1"
- placeholder={
- property?.placeholder || `Enter ${property?.type === 'number' ? 'number' : 'text'}`
- }
- value={filter.value}
- type={property?.type === 'number' ? 'number' : 'text'}
- onChange={(event) => handleValueChange(event.target.value)}
- onKeyDown={onKeyDown}
- />
- )}
- <Button
- variant="text"
- size="tiny"
- className="px-1"
- icon={<X strokeWidth={1.5} />}
- onClick={() => onDelete(filterIdx)}
- />
- </div>
- </div>
- )
-}
-
-export const ReportFilterPopover = ({
- buttonText,
- filters,
- filterProperties,
- onFiltersChange,
- disabled = false,
-}: ReportFilterPopoverProps) => {
- const [open, setOpen] = useState(false)
- const [localFilters, setLocalFilters] = useState<ReportFilter[]>(filters)
-
- // Update local state when filters prop changes
- useMemo(() => {
- setLocalFilters(filters)
- }, [filters])
-
- const displayButtonText =
- buttonText ??
- (filters.length > 0
- ? `Filtered by ${filters.length} rule${filters.length > 1 ? 's' : ''}`
- : 'Filter')
-
- const onAddFilter = () => {
- const firstProperty = filterProperties[0]
- if (firstProperty) {
- setLocalFilters([
- ...localFilters,
- {
- propertyName: firstProperty.name,
- operator: firstProperty.operators[0] || '=',
- value: '',
- },
- ])
- }
- }
-
- const onChangeFilter = useCallback((index: number, filter: ReportFilter) => {
- setLocalFilters((currentFilters) => [
- ...currentFilters.slice(0, index),
- filter,
- ...currentFilters.slice(index + 1),
- ])
- }, [])
-
- const onDeleteFilter = useCallback((index: number) => {
- setLocalFilters((currentFilters) => [
- ...currentFilters.slice(0, index),
- ...currentFilters.slice(index + 1),
- ])
- }, [])
-
- const onApplyFilters = () => {
- // Filter out empty values
- const validFilters = localFilters.filter(
- (f) => f.value !== null && f.value !== undefined && f.value !== ''
- )
- onFiltersChange(validFilters)
- setOpen(false)
- }
-
- const onResetFilters = () => {
- setLocalFilters([])
- onFiltersChange([])
- setOpen(false)
- }
-
- function handleEnterKeyDown(event: KeyboardEvent<HTMLInputElement>) {
- if (event.key === 'Enter') onApplyFilters()
- }
-
- const hasChanges = !isEqual(localFilters, filters)
-
- return (
- <Popover open={open} onOpenChange={setOpen} modal={false}>
- <PopoverTrigger asChild>
- <Button
- variant={filters.length > 0 ? 'link' : 'text'}
- icon={<FilterIcon />}
- disabled={disabled}
- >
- {displayButtonText}
- </Button>
- </PopoverTrigger>
- <PopoverContent className="p-0 w-[500px]" side="bottom" align="start">
- <div className="space-y-2 py-2">
- <div>
- {localFilters.map((filter, index) => (
- <ReportFilterRow
- key={`filter-${filter.propertyName}-${index}`}
- filter={filter}
- filterIdx={index}
- filterProperties={filterProperties}
- onChange={onChangeFilter}
- onDelete={onDeleteFilter}
- onKeyDown={handleEnterKeyDown}
- />
- ))}
- {localFilters.length === 0 && (
- <div className="space-y-1 px-3">
- <h5 className="text-sm text-foreground-light">No filters applied</h5>
- <p className="text-xs text-foreground-lighter">
- Add a filter below to narrow down the report data
- </p>
- </div>
- )}
- </div>
- <PopoverSeparator />
- <div className="px-3 flex flex-row justify-between">
- <div className="flex gap-2">
- <Button icon={<Plus />} variant="text" onClick={onAddFilter}>
- Add filter
- </Button>
- {filters.length > 0 && (
- <Button variant="text" onClick={onResetFilters}>
- Clear all
- </Button>
- )}
- </div>
- <Button disabled={!hasChanges} variant="default" onClick={onApplyFilters}>
- Apply filters
- </Button>
- </div>
- </div>
- </PopoverContent>
- </Popover>
- )
-}
diff --git a/apps/studio/components/interfaces/Reports/ReportStickyNav.tsx b/apps/studio/components/interfaces/Reports/ReportStickyNav.tsx
index 81e8ecf1505..984202b13f8 100644
--- a/apps/studio/components/interfaces/Reports/ReportStickyNav.tsx
+++ b/apps/studio/components/interfaces/Reports/ReportStickyNav.tsx
@@ -9,7 +9,7 @@ const ReportStickyNav = ({
return (
<section className={cn('relative flex flex-col gap-4 pt-16 -mt-2', className)}>
<div className="absolute inset-0 z-40 pointer-events-none flex flex-col gap-4">
- <div className="sticky top-0 py-4 mb-4 flex items-center gap-2 pointer-events-auto dark:bg-background-200 bg-background">
+ <div className="sticky top-0 py-4 mb-4 flex w-full items-center gap-2 pointer-events-auto bg-background">
{content}
</div>
</div>
diff --git a/apps/studio/components/interfaces/Reports/Reports.tsx b/apps/studio/components/interfaces/Reports/Reports.tsx
index 9ee6bf22a91..347741a16d7 100644
--- a/apps/studio/components/interfaces/Reports/Reports.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.tsx
@@ -12,11 +12,13 @@ import { ChartConfig } from '../SQLEditor/UtilityPanel/ChartConfig'
import { GridResize } from './GridResize'
import { MetricOptions } from './MetricOptions'
import { LAYOUT_COLUMN_COUNT } from './Reports.constants'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DatabaseSelector } from '@/components/ui/DatabaseSelector'
import { DateRangePicker } from '@/components/ui/DateRangePicker'
-import NoPermission from '@/components/ui/NoPermission'
+import { DocsButton } from '@/components/ui/DocsButton'
+import { NoPermission } from '@/components/ui/NoPermission'
import { DEFAULT_CHART_CONFIG } from '@/components/ui/QueryBlock/QueryBlock'
import { AnalyticsInterval } from '@/data/analytics/constants'
import { analyticsKeys } from '@/data/analytics/keys'
@@ -366,12 +368,14 @@ const Reports = () => {
return <NoPermission isFullPage resourceText="access this custom report" />
}
+ const reportTitle = currentReport?.name || 'Reports'
+
return (
<>
<div className="flex flex-col space-y-4" style={{ maxHeight: '100%' }}>
<div className="flex items-center justify-between">
<div>
- <h1>{currentReport?.name || 'Reports'}</h1>
+ <h1>{reportTitle}</h1>
<p className="text-foreground-light">{currentReport?.description}</p>
</div>
{hasEdits && (
@@ -396,14 +400,6 @@ const Reports = () => {
</div>
<div className={cn('mb-4 flex items-center gap-x-3 justify-between')}>
<div className="flex items-center gap-x-2">
- <ButtonTooltip
- variant="default"
- icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
- className="w-7"
- disabled={isRefreshing}
- tooltip={{ content: { side: 'bottom', text: 'Refresh report' } }}
- onClick={onRefreshReport}
- />
<div className="flex items-center gap-x-3">
<DateRangePicker
value="7d"
@@ -423,6 +419,15 @@ const Reports = () => {
</div>
<div className="flex items-center gap-x-2">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.customReport} topic={reportTitle} />
+ <ButtonTooltip
+ variant="default"
+ icon={<RefreshCw className={isRefreshing ? 'animate-spin' : ''} />}
+ className="w-7"
+ disabled={isRefreshing}
+ tooltip={{ content: { side: 'bottom', text: 'Refresh report' } }}
+ onClick={onRefreshReport}
+ />
{canUpdateReport ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
diff --git a/apps/studio/components/interfaces/Reports/Reports.utils.tsx b/apps/studio/components/interfaces/Reports/Reports.utils.tsx
index f27ee797ef5..f7f58c41a15 100644
--- a/apps/studio/components/interfaces/Reports/Reports.utils.tsx
+++ b/apps/studio/components/interfaces/Reports/Reports.utils.tsx
@@ -13,7 +13,7 @@ import {
import type { SafeLogSqlFragment } from '@/data/logs/safe-analytics-sql'
import { REPORT_STATUS_CODE_COLORS } from '@/data/reports/report.utils'
import useDbQuery, { DbQueryHook } from '@/hooks/analytics/useDbQuery'
-import useLogsQuery, { LogsQueryHook } from '@/hooks/analytics/useLogsQuery'
+import { useLogsQuery, type LogsQueryHook } from '@/hooks/analytics/useLogsQuery'
import { getHttpStatusCodeInfo } from '@/lib/http-status-codes'
/**
diff --git a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
index c794a1d0116..eacfb0f3d27 100644
--- a/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
+++ b/apps/studio/components/interfaces/Reports/renderers/ApiRenderers.tsx
@@ -35,7 +35,7 @@ import {
TextFormatter,
} from '@/components/interfaces/Settings/Logs/LogsFormatters'
import Table from '@/components/to-be-cleaned/Table'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import BarChart from '@/components/ui/Charts/BarChart'
import { DataTableColumnStatusCode } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
import { useFillTimeseriesSorted } from '@/hooks/analytics/useFillTimeseriesSorted'
diff --git a/apps/studio/components/interfaces/Reports/useReportFilters.ts b/apps/studio/components/interfaces/Reports/useReportFilters.ts
deleted file mode 100644
index a913df57453..00000000000
--- a/apps/studio/components/interfaces/Reports/useReportFilters.ts
+++ /dev/null
@@ -1,328 +0,0 @@
-import { parseAsString, useQueryStates } from 'nuqs'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-import type { ReportFilter, ReportFilterItem, ReportFilterProperty } from './Reports.types'
-
-export enum ReportFilterKeys {
- PATH = 'request.path',
- SEARCH = 'request.search',
- X_CLIENT_INFO = 'request.headers.x_client_info',
- USER_AGENT = 'request.headers.user_agent',
- STATUS_CODE = 'response.status_code',
-}
-
-export const REPORT_FILTER_PARAMS_PARSER = {
- [ReportFilterKeys.PATH]: parseAsString,
- [ReportFilterKeys.SEARCH]: parseAsString,
- [ReportFilterKeys.X_CLIENT_INFO]: parseAsString,
- [ReportFilterKeys.USER_AGENT]: parseAsString,
- [ReportFilterKeys.STATUS_CODE]: parseAsString,
-}
-
-interface UseReportFiltersProps {
- onAddFilter: (filter: ReportFilterItem) => void
- onRemoveFilters: (filters: ReportFilterItem[]) => void
- filters: ReportFilterItem[]
-}
-
-export const useReportFilters = ({
- onAddFilter,
- onRemoveFilters,
- filters,
-}: UseReportFiltersProps) => {
- // URL-safe operator mappings
- const URL_OPERATOR_MAP = {
- '=': 'eq',
- '!=': 'neq',
- '>=': 'gte',
- '<=': 'lte',
- '>': 'gt',
- '<': 'lt',
- CONTAINS: 'contains',
- 'STARTS WITH': 'startswith',
- 'ENDS WITH': 'endswith',
- }
-
- const REVERSE_URL_OPERATOR_MAP = Object.fromEntries(
- Object.entries(URL_OPERATOR_MAP).map(([k, v]) => [v, k])
- )
-
- // Parse encoded filter value (e.g., "gte:300" -> { operator: ">=", value: "300" })
- const parseFilterValue = useCallback((encodedValue: string | number | null) => {
- if (!encodedValue || typeof encodedValue !== 'string') {
- return { operator: '=', value: encodedValue?.toString() || '' }
- }
-
- const parts = encodedValue.split(':')
- if (parts.length === 2) {
- const [urlOperator, value] = parts
- const operator = REVERSE_URL_OPERATOR_MAP[urlOperator] || '='
- return { operator, value }
- }
-
- return { operator: '=', value: encodedValue }
- }, [])
-
- const encodeFilterValue = useCallback((operator: string | number, value: string | number) => {
- const urlOperator = URL_OPERATOR_MAP[operator as keyof typeof URL_OPERATOR_MAP] || 'eq'
- return `${urlOperator}:${value}`
- }, [])
-
- // Convert query filters to ReportFilter format
- const convertQueryFiltersToReportFilters = useCallback(
- (queryState: Record<string, string | number | null>): ReportFilter[] => {
- const filters: ReportFilter[] = []
-
- Object.entries(queryState).forEach(([key, value]) => {
- if (value !== null && value !== undefined && value !== '') {
- const { operator, value: filterValue } = parseFilterValue(value)
- filters.push({
- propertyName: key,
- value: filterValue,
- operator: operator,
- })
- }
- })
-
- return filters
- },
- [parseFilterValue]
- )
-
- // Convert operator from FilterBar format to ReportFilterItem format
- const getCompareOperator = useCallback(
- (operator: string | number): 'matches' | 'is' | '>=' | '<=' | '>' | '<' | '!=' => {
- switch (operator) {
- case '=':
- return 'is'
- case '!=':
- return '!='
- case '>=':
- return '>='
- case '<=':
- return '<='
- case '>':
- return '>'
- case '<':
- return '<'
- case 'CONTAINS':
- case 'STARTS WITH':
- case 'ENDS WITH':
- return 'matches'
- default:
- return 'matches'
- }
- },
- []
- )
-
- // Convert ReportFilter to ReportFilterItem format for the report system
- const convertReportFiltersToReportFilterItems = useMemo(
- () =>
- (reportFilters: ReportFilter[]): ReportFilterItem[] => {
- const reportFilterItems: ReportFilterItem[] = []
-
- reportFilters.forEach((filter) => {
- if (filter.value !== null && filter.value !== '' && filter.value !== undefined) {
- reportFilterItems.push({
- key: filter.propertyName.toString(),
- value: filter.value.toString(),
- compare: getCompareOperator(filter.operator),
- })
- }
- })
-
- return reportFilterItems
- },
- [getCompareOperator]
- )
-
- // Convert ReportFilter back to query filters format
- const convertReportFiltersToQueryFilters = useMemo(
- () => (reportFilters: ReportFilter[]) => {
- const queryUpdate: Record<string, string | number | null> = {}
-
- // Clear all existing filters first
- Object.keys(REPORT_FILTER_PARAMS_PARSER).forEach((key) => {
- queryUpdate[key] = null
- })
-
- // Add new filters with encoded operator+value
- reportFilters.forEach((filter) => {
- if (filter.propertyName in REPORT_FILTER_PARAMS_PARSER) {
- const encodedValue = encodeFilterValue(filter.operator, filter.value as string | number)
- queryUpdate[filter.propertyName] = encodedValue
- }
- })
-
- return queryUpdate
- },
- [encodeFilterValue]
- )
-
- const [queryFilters, setQueryFilters] = useQueryStates(REPORT_FILTER_PARAMS_PARSER)
- const [localFilters, setLocalFilters] = useState<ReportFilter[]>([])
-
- const [isInitialized, setIsInitialized] = useState(false)
- const lastAppliedFilterState = useRef<string>('')
- const preventUrlSync = useRef(false)
-
- // Initialize local state from URL params (only once on mount)
- useEffect(() => {
- if (!isInitialized) {
- const initialFilters = convertQueryFiltersToReportFilters(queryFilters)
- setLocalFilters(initialFilters)
- setIsInitialized(true)
- }
- }, [isInitialized, convertQueryFiltersToReportFilters, queryFilters])
-
- // Sync URL changes back to local state (when URL changes externally)
- useEffect(() => {
- if (!isInitialized || preventUrlSync.current) return
-
- const filtersFromUrl = convertQueryFiltersToReportFilters(queryFilters)
- const currentFilterJson = JSON.stringify(localFilters)
- const urlFilterJson = JSON.stringify(filtersFromUrl)
-
- if (currentFilterJson !== urlFilterJson) {
- console.log('Syncing local filters from URL change:', { filtersFromUrl, localFilters })
- setLocalFilters(filtersFromUrl)
- }
- }, [queryFilters, isInitialized, convertQueryFiltersToReportFilters])
-
- // Sync local filter changes back to URL state (only after initialization)
- useEffect(() => {
- if (!isInitialized) return
-
- const queryUpdate = convertReportFiltersToQueryFilters(localFilters)
-
- // Prevent feedback loop during URL updates
- preventUrlSync.current = true
- setQueryFilters(queryUpdate).finally(() => {
- preventUrlSync.current = false
- })
- }, [localFilters, isInitialized, setQueryFilters, convertReportFiltersToQueryFilters])
-
- // Separate effect for report filter updates (only for filters with values)
- useEffect(() => {
- if (!isInitialized) return
-
- const reportFilterItems = convertReportFiltersToReportFilterItems(localFilters)
-
- // Create a state string for comparison (only for the filters we manage)
- const newFilterState = reportFilterItems
- .map((filter) => `${filter.key}:${filter.value}:${filter.compare}`)
- .sort()
- .join('|')
-
- if (lastAppliedFilterState.current !== newFilterState) {
- lastAppliedFilterState.current = newFilterState
-
- // Separate product filters (managed by dropdown) from other filters (managed by ReportFilterPopover)
- const PRODUCT_FILTER_KEYS = ['request.path']
- const PRODUCT_FILTER_VALUES = ['/rest', '/auth', '/storage', '/realtime', '/graphql']
-
- const productFilters = filters.filter(
- (f) =>
- PRODUCT_FILTER_KEYS.includes(f.key) && PRODUCT_FILTER_VALUES.includes(f.value.toString())
- )
- const otherFilters = filters.filter(
- (f) =>
- !(
- PRODUCT_FILTER_KEYS.includes(f.key) &&
- PRODUCT_FILTER_VALUES.includes(f.value.toString())
- )
- )
-
- console.log('Filter Update:', {
- localFilters,
- reportFilterItems,
- productFilters,
- otherFilters,
- newFilterState,
- })
-
- // Remove only the non-product filters that we manage
- if (otherFilters.length > 0) {
- onRemoveFilters(otherFilters)
- }
-
- // Add all the new filters from the popover
- reportFilterItems.forEach((filter) => onAddFilter(filter))
- }
- }, [localFilters, isInitialized])
-
- const handleFilterChange = (newFilters: ReportFilter[]) => {
- console.log('handleFilterChange called with:', newFilters)
- setLocalFilters(newFilters)
- }
-
- // Get filter properties based on product type
- const getFilterProperties = (): ReportFilterProperty[] => {
- const baseProperties: ReportFilterProperty[] = [
- {
- label: 'Status Code',
- name: ReportFilterKeys.STATUS_CODE,
- type: 'number' as const,
- options: [
- { label: '200', value: '200' },
- { label: '300', value: '300' },
- { label: '400', value: '400' },
- { label: '401', value: '401' },
- { label: '403', value: '403' },
- { label: '404', value: '404' },
- { label: '409', value: '409' },
- { label: '411', value: '411' },
- { label: '413', value: '413' },
- { label: '416', value: '416' },
- { label: '423', value: '423' },
- { label: '500', value: '500' },
- { label: '503', value: '503' },
- { label: '504', value: '504' },
- ],
- operators: ['=', '!=', '>', '<', '>=', '<='],
- placeholder: '200',
- },
- {
- label: 'User Agent',
- name: ReportFilterKeys.USER_AGENT,
- type: 'string' as const,
- operators: ['=', '!=', 'CONTAINS', 'STARTS WITH', 'ENDS WITH'],
- placeholder:
- 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36',
- },
- {
- label: 'Search Params',
- name: ReportFilterKeys.SEARCH,
- type: 'string' as const,
- operators: ['=', '!=', 'CONTAINS', 'STARTS WITH', 'ENDS WITH'],
- placeholder: '?foo=bar',
- },
- {
- label: 'Client Info',
- name: ReportFilterKeys.X_CLIENT_INFO,
- type: 'string' as const,
- operators: ['=', '!=', 'CONTAINS', 'STARTS WITH', 'ENDS WITH'],
- placeholder: 'supabase-js/1.0.0',
- },
- ]
-
- return [
- {
- label: 'Path',
- name: ReportFilterKeys.PATH,
- type: 'string' as const,
- operators: ['=', '!=', 'CONTAINS', 'STARTS WITH', 'ENDS WITH'],
- placeholder: '/rest/v1/tablename',
- },
- ...baseProperties,
- ]
- }
-
- return {
- localFilters,
- filterProperties: getFilterProperties(),
- handleFilterChange,
- ReportFilterKeys,
- }
-}
diff --git a/apps/studio/components/interfaces/Reports/utils/geo.ts b/apps/studio/components/interfaces/Reports/utils/geo.ts
index bb20edebdf8..af83306166b 100644
--- a/apps/studio/components/interfaces/Reports/utils/geo.ts
+++ b/apps/studio/components/interfaces/Reports/utils/geo.ts
@@ -15,19 +15,19 @@ export interface MapChartTheme {
export const MAP_CHART_THEME: { light: MapChartTheme; dark: MapChartTheme } = {
light: {
- zeroFill: 'hsl(var(--background-surface-400))',
+ zeroFill: 'var(--background-surface-400)',
brandFill: 'hsl(var(--brand-default))',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
- boundaryStroke: 'hsla(var(--brand-300), 0.6)',
+ boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
boundaryStrokeHover: 'hsl(var(--brand-500))',
markerFill: 'hsl(var(--brand-default))',
oceanFill: 'transparent',
},
dark: {
- zeroFill: 'hsl(var(--background-selection))',
+ zeroFill: 'var(--background-selection)',
brandFill: 'hsl(var(--brand-default))',
opacityScale: [0.18, 0.32, 0.5, 0.68, 0.86],
- boundaryStroke: 'hsla(var(--brand-300), 0.6)',
+ boundaryStroke: 'hsl(var(--brand-300) / 0.6)',
boundaryStrokeHover: 'hsl(var(--brand-500))',
markerFill: 'hsl(var(--brand-default))',
oceanFill: 'transparent',
diff --git a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
index 3e8737fa5f6..b7deb03170e 100644
--- a/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
+++ b/apps/studio/components/interfaces/Reports/v2/ReportsSelectFilter.tsx
@@ -83,7 +83,7 @@ export const ReportsSelectFilter = ({
<PopoverContent align="start" className="p-0 w-72">
<Command>
{showSearch && <CommandInput placeholder="Search..." />}
- <CommandList>
+ <CommandList className="max-h-72">
<CommandEmpty>No options found.</CommandEmpty>
<CommandGroup>
{options.map((option) => (
diff --git a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
index 496684d689d..8b6240caf8a 100644
--- a/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
+++ b/apps/studio/components/interfaces/RoleImpersonationSelector/UserImpersonationSelector.tsx
@@ -27,7 +27,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { InfoTooltip } from 'ui-patterns/info-tooltip'
import { getAvatarUrl, getDisplayName } from '../Auth/Users/Users.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { User, useUsersInfiniteQuery } from '@/data/auth/users-infinite-query'
import { useCustomAccessTokenHookDetails } from '@/hooks/misc/useCustomAccessTokenHookDetails'
@@ -235,7 +235,7 @@ export const UserImpersonationSelector = () => {
<InputGroup>
<InputGroupInput
size="tiny"
- className="table-editor-search border-none"
+ className="pr-10 border-none"
placeholder="Search by id, email, phone, or name..."
onChange={(e) => setSearchText(e.target.value)}
value={searchText}
diff --git a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
index b6f809dd178..911791fc25e 100644
--- a/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/DownloadSnippetModal.tsx
@@ -27,7 +27,7 @@ import {
} from './SQLEditor.utils'
import { TwoOptionToggle } from '@/components/ui/TwoOptionToggle'
import { DOCS_URL } from '@/lib/constants'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
const CLI_DOCS_URL = `${DOCS_URL}/guides/cli/local-development`
diff --git a/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx b/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
index dc954c5088a..07f140c3bbc 100644
--- a/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
@@ -1,26 +1,20 @@
import { Monaco, OnMount } from '@monaco-editor/react'
-import { useDebounce } from '@uidotdev/usehooks'
-import { LOCAL_STORAGE_KEYS, useParams } from 'common'
+import { LOCAL_STORAGE_KEYS } from 'common'
import { noop } from 'lodash'
-import { useRouter } from 'next/router'
-import { RefObject, useEffect, useRef, useState } from 'react'
-import { Admonition } from 'ui-patterns'
+import { RefObject, useRef } from 'react'
+import { Admonition } from 'ui-patterns/admonition'
import type { IStandaloneCodeEditor } from './SQLEditor.types'
-import { createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
+import { useSnippetEditor } from './useSnippetEditor'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { getEditorSelectionParts } from '@/components/ui/AIEditor/utils'
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
-import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-import { useProfile } from '@/lib/profile'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
-import { canEditSnippet } from '@/state/sql-editor/sql-editor-rules'
-import { useTabsStateSnapshot } from '@/state/tabs'
+import { useSqlEditorSaveCoordinator } from '@/state/sql-editor/sql-editor-save-coordinator'
export type MonacoEditorProps = {
id: string
@@ -61,13 +55,6 @@ export const MonacoEditor = ({
onPrompt,
onMount,
}: MonacoEditorProps) => {
- const router = useRouter()
- const { profile } = useProfile()
- const { ref, content } = useParams()
- const { data: project } = useSelectedProjectQuery()
-
- const snapV2 = useSqlEditorV2StateSnapshot()
- const tabsSnap = useTabsStateSnapshot()
const aiSnap = useAiAssistantStateSnapshot()
const { openSidebar, toggleSidebar } = useSidebarManagerSnapshot()
@@ -76,11 +63,14 @@ export const MonacoEditor = ({
true
)
- const [value, setValue] = useState('')
- const debouncedValue = useDebounce(value, 1000)
+ const { snippet, disableEdit, handleEditorChange } = useSnippetEditor({ id, snippetName })
- const snippet = snapV2.snippets[id]
- const disableEdit = !!snippet && !canEditSnippet(snippet.snippet, profile?.id)
+ // The Monaco save action is registered once on mount, but `snippet` starts
+ // undefined for a new/deep-linked snippet and is only created on first edit.
+ // Read it through a ref so Cmd/Ctrl+S sees the latest value, not the stale
+ // mount-time closure.
+ const snippetRef = useRef(snippet)
+ snippetRef.current = snippet
const executeExplainQueryRef = useRef(executeExplainQuery)
executeExplainQueryRef.current = executeExplainQuery
@@ -92,6 +82,10 @@ export const MonacoEditor = ({
const aiHotkeyEnabledRef = useRef(isAIAssistantHotkeyEnabled)
aiHotkeyEnabledRef.current = isAIAssistantHotkeyEnabled
+ const { requestSave } = useSqlEditorSaveCoordinator()
+ const requestSaveRef = useRef(requestSave)
+ requestSaveRef.current = requestSave
+
const handleEditorOnMount: OnMount = (editor, monaco) => {
const model = editor.getModel()
if (model !== null) {
@@ -141,7 +135,8 @@ export const MonacoEditor = ({
contextMenuGroupId: 'operation',
contextMenuOrder: 0,
run: () => {
- if (snippet) snapV2.addNeedsSaving(snippet.snippet.id)
+ const currentSnippet = snippetRef.current
+ if (currentSnippet) requestSaveRef.current(currentSnippet.snippet.id)
},
})
@@ -209,46 +204,6 @@ export const MonacoEditor = ({
onMount?.(editor)
}
- function handleEditorChange(value: string | undefined) {
- tabsSnap.makeActiveTabPermanent()
- if (id && value) {
- if (!snippet && ref && profile !== undefined && project !== undefined) {
- const snippet = createSqlSnippetSkeletonV2({
- idOverride: id,
- name: snippetName,
- sql: value,
- owner_id: profile?.id,
- project_id: project?.id,
- })
- snapV2.addSnippet({ projectRef: ref, snippet })
- // When the editor was seeded from a `content` deep-link, replace rather
- // than push. The caller navigated to `/sql/new?content=...` (a long,
- // one-shot URL); replacing collapses it out of history so Back returns to
- // the originating page instead of a wasted step that re-seeds the snippet.
- if (router.query.content !== undefined) {
- router.replace(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
- } else {
- router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
- }
- }
- setValue(value)
- }
- }
-
- useEffect(() => {
- if (debouncedValue.length > 0 && snippet) {
- const shouldInvalidate = snippet.snippet.isNotSavedInDatabaseYet
- snapV2.setSql({ id, sql: value, shouldInvalidate })
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [debouncedValue])
-
- // if an SQL query is passed by the content parameter, set the editor value to its content. This
- // is usually used for sending the user to SQL editor from other pages with SQL.
- useEffect(() => {
- if (content && content.length > 0) handleEditorChange(content)
- }, [])
-
return (
<>
{disableEdit && (
diff --git a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
index 7fd3ea7ae7e..bb300f5beed 100644
--- a/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/MoveQueryModal.tsx
@@ -41,11 +41,8 @@ import { getContentById } from '@/data/content/content-id-query'
import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
import { useSQLSnippetFolderCreateMutation } from '@/data/content/sql-folder-create-mutation'
import { Snippet } from '@/data/content/sql-folders-query'
-import {
- SnippetWithContent,
- useSnippetFolders,
- useSqlEditorV2StateSnapshot,
-} from '@/state/sql-editor-v2'
+import type { SnippetWithContent } from '@/data/content/sql-folders-query'
+import { useSnippetFolders, useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
interface MoveQueryModalProps {
diff --git a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
index 0d9f17cd499..0dbb575183f 100644
--- a/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/OngoingQueriesPanel.tsx
@@ -19,7 +19,7 @@ import {
import { CodeBlock } from 'ui-patterns/CodeBlock'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
import { useQueryAbortMutation } from '@/data/sql/abort-query-mutation'
import { useOngoingQueriesQuery } from '@/data/sql/ongoing-queries-query'
diff --git a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
index fa5da761acf..525848f81cf 100644
--- a/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx
@@ -26,7 +26,7 @@ import * as z from 'zod'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { useCheckOpenAIKeyQuery } from '@/data/ai/check-api-key-query'
import { useSqlTitleGenerateMutation } from '@/data/ai/sql-title-mutation'
-import { getContentById } from '@/data/content/content-id-query'
+import { getContentById, getSqlSnippetById } from '@/data/content/content-id-query'
import {
UpsertContentPayload,
useContentUpsertMutation,
@@ -35,7 +35,7 @@ import { Snippet } from '@/data/content/sql-folders-query'
import type { SqlSnippet } from '@/data/content/sql-snippets-query'
import { useOrgAiOptInLevel } from '@/hooks/misc/useOrgOptedIntoAi'
import { IS_PLATFORM } from '@/lib/constants'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
export interface RenameQueryModalProps {
@@ -109,8 +109,9 @@ export const RenameQueryModal = ({
// [Joshen] For SQL V2 - content is loaded on demand so we need to fetch the data if its not already loaded in the valtio state
if (!('content' in localSnippet)) {
- localSnippet = await getContentById({ projectRef: ref, id })
- snapV2.addSnippet({ projectRef: ref, snippet: localSnippet })
+ const fetched = await getSqlSnippetById({ projectRef: ref, id })
+ snapV2.addSnippet({ projectRef: ref, snippet: fetched })
+ localSnippet = fetched
}
const changedSnippet = await upsertContent({
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.queries.ts b/apps/studio/components/interfaces/SQLEditor/SQLEditor.queries.ts
index 2f42bc16365..bff40b0a25d 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.queries.ts
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.queries.ts
@@ -1600,4 +1600,37 @@ grant execute on function public.custom_access_token_hook to supabase_auth_admin
revoke execute on function public.custom_access_token_hook from authenticated, anon, public;
`,
},
+ {
+ id: 30,
+ type: 'quickstart',
+ title: 'Instruments',
+ description:
+ 'Create an instruments table with sample data and Row Level Security, as used in the framework quickstarts.',
+ sql: `
+-- Create the table
+create table instruments (
+ id bigint primary key generated always as identity,
+ name text not null
+);
+
+-- Insert sample data into the table
+insert into instruments (name)
+values
+ ('violin'),
+ ('viola'),
+ ('cello');
+
+-- Grant the privileges the role needs, which is read access
+grant select on public.instruments to anon;
+
+-- Enable row level security for the table
+alter table instruments enable row level security;
+
+-- Create a policy to allow the anon role to read from the instruments table
+create policy "public can read instruments"
+on public.instruments
+for select to anon
+using (true);
+`.trim(),
+ },
]
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
index c3f736f8caf..085cfdf1714 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.tsx
@@ -12,7 +12,7 @@ import { IS_PLATFORM, LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common'
import { ChevronUp, Loader2 } from 'lucide-react'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
import {
Button,
@@ -92,7 +92,12 @@ import {
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { getSqlEditorV2StateSnapshot, useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorDiffRequestSnapshot } from '@/state/sql-editor/sql-editor-diff-request'
+import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
+import {
+ getSqlEditorV2StateSnapshot,
+ useSqlEditorV2StateSnapshot,
+} from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
// Load the monaco editor client-side only (does not behave well server-side)
@@ -119,10 +124,11 @@ export const SQLEditor = () => {
const aiSnap = useAiAssistantStateSnapshot()
const { openSidebar } = useSidebarManagerSnapshot()
const snapV2 = useSqlEditorV2StateSnapshot()
+ const sessionSnap = useSqlEditorSessionSnapshot()
+ const diffRequest = useSqlEditorDiffRequestSnapshot()
const getImpersonatedRoleState = useGetImpersonatedRoleState()
const databaseSelectorState = useDatabaseSelectorStateSnapshot()
const { aiOptInLevel } = useOrgAiOptInLevel()
- const showPrettyExplain = useFlag('ShowPrettyExplain')
// [Ali] Kill switch to hide the SQL Editor Explain tab and its entry points
const disablePrettyExplain = useFlag('DisablePrettyExplainOnSqlEditor')
@@ -152,6 +158,9 @@ export const SQLEditor = () => {
const [potentialIssues, setPotentialIssues] = useState<PotentialIssues>()
const [showWidget, setShowWidget] = useState(false)
+ // Bumped on every editor mount (including the keyed remount on snippet switch)
+ // so a diff request that arrived before the editor was ready gets re-processed.
+ const [editorMountCount, setEditorMountCount] = useState(0)
const [activeUtilityTab, setActiveUtilityTab] = useState<string>('results')
const refocusEditor = useCallback(() => {
@@ -197,8 +206,8 @@ export const SQLEditor = () => {
// the id is stable across renders - it depends either on the url or on the memoized generated id
const id = !urlId || urlId === 'new' ? generatedId : urlId
- const limit = snapV2.limit
- const results = snapV2.results[id]?.[0]
+ const limit = sessionSnap.limit
+ const results = sessionSnap.results[id]?.[0]
const snippetIsLoading = !(
id in snapV2.snippets && snapV2.snippets[id].snippet.content !== undefined
)
@@ -227,10 +236,10 @@ export const SQLEditor = () => {
const { mutate: execute, isPending: isExecuting } = useExecuteSqlMutation({
onSuccess(data, vars) {
if (id) {
- snapV2.addResult(id, data.result, vars.autoLimit)
+ sessionSnap.addResult(id, data.result, vars.autoLimit)
- if (!disablePrettyExplain && showPrettyExplain && isExplainQuery(data.result)) {
- snapV2.addExplainResult(id, data.result)
+ if (!disablePrettyExplain && isExplainQuery(data.result)) {
+ sessionSnap.addExplainResult(id, data.result)
setActiveUtilityTab('explain')
} else if (activeUtilityTab === 'explain') {
// If on Explain tab but ran a non-EXPLAIN query, switch to Results tab
@@ -275,7 +284,7 @@ export const SQLEditor = () => {
}
}
- snapV2.addResultError(id, error, vars.autoLimit)
+ sessionSnap.addResultError(id, error, vars.autoLimit)
}
refocusEditorAfterRunIfNeeded()
@@ -285,13 +294,13 @@ export const SQLEditor = () => {
const { mutate: executeExplain, isPending: isExplainExecuting } = useExecuteSqlMutation({
onSuccess(data) {
if (id) {
- snapV2.addExplainResult(id, data.result)
+ sessionSnap.addExplainResult(id, data.result)
setActiveUtilityTab('explain')
}
},
onError(error) {
if (id) {
- snapV2.addExplainResultError(id, error)
+ sessionSnap.addExplainResultError(id, error)
setActiveUtilityTab('explain')
}
},
@@ -486,7 +495,7 @@ export const SQLEditor = () => {
// Check for multiple statements - EXPLAIN only works on a single statement
const statements = splitSqlStatements(sql)
if (statements.length > 1) {
- snapV2.addExplainResultError(id, {
+ sessionSnap.addExplainResultError(id, {
message:
'EXPLAIN only works on a single SQL statement. Please select just one query to analyze.',
})
@@ -537,7 +546,7 @@ export const SQLEditor = () => {
databaseSelectorState.selectedDatabaseId,
databases,
lineHighlights,
- snapV2,
+ sessionSnap,
])
useShortcut(SHORTCUT_IDS.SQL_EDITOR_EXPLAIN, executeExplainQuery, {
@@ -570,6 +579,8 @@ export const SQLEditor = () => {
)
const onMount = (editor: IStandaloneCodeEditor) => {
+ setEditorMountCount((count) => count + 1)
+
const tabId = createTabId('sql', { id })
const tabData = tabs.tabsMap[tabId]
@@ -584,7 +595,7 @@ export const SQLEditor = () => {
const buildDebugPrompt = useCallback(() => {
const snippet = snapV2.snippets[id]
- const result = snapV2.results[id]?.[0]
+ const result = sessionSnap.results[id]?.[0]
const sql = (snippet?.snippet.content?.unchecked_sql ?? '')
.replace(sqlAiDisclaimerComment, '')
.trim()
@@ -592,12 +603,12 @@ export const SQLEditor = () => {
const prompt = `Help me to debug the attached sql snippet which gives the following error: \n\n${errorMessage}`
return `${prompt}\n\nSQL Query:\n\`\`\`sql\n${sql}\n\`\`\``
- }, [id, snapV2.results, snapV2.snippets])
+ }, [id, sessionSnap.results, snapV2.snippets])
const onDebug = useCallback(async () => {
try {
const snippet = snapV2.snippets[id]
- const result = snapV2.results[id]?.[0]
+ const result = sessionSnap.results[id]?.[0]
openSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
aiSnap.newChat({
name: 'Debug SQL snippet',
@@ -617,7 +628,7 @@ export const SQLEditor = () => {
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [id, snapV2.results, snapV2.snippets])
+ }, [id, sessionSnap.results, snapV2.snippets])
const acceptAiHandler = useCallback(async () => {
try {
@@ -825,30 +836,40 @@ export const SQLEditor = () => {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isSuccessReadReplicas, databases, ref])
- useEffect(() => {
- if (snapV2.diffContent !== undefined) {
- const { diffType, sql }: { diffType: DiffType; sql: string } = snapV2.diffContent
- const editorModel = editorRef.current?.getModel()
- if (!editorModel) return
+ const drainDiffRequest = useEffectEvent(() => {
+ const request = diffRequest.pending
+ if (request === undefined) return
- const existingValue = editorRef.current?.getValue() ?? ''
- if (existingValue.length === 0) {
- // if the editor is empty, just copy over the code
- editorRef.current?.executeEdits('apply-ai-message', [
- {
- text: `${sql}`,
- range: editorModel.getFullModelRange(),
- },
- ])
- } else {
- const currentSql = editorRef.current?.getValue()
- const diff = { original: currentSql || '', modified: sql }
- setSourceSqlDiff(diff)
- setSelectedDiffType(diffType)
- }
+ const editorModel = editorRef.current?.getModel()
+ // Editor isn't ready yet; leave the request pending. editorMountCount bumps
+ // on mount and re-runs this effect, so the request applies once mounted.
+ if (!editorModel) return
+
+ const { diffType, sql } = request
+ const existingValue = editorRef.current?.getValue() ?? ''
+ if (existingValue.length === 0) {
+ // if the editor is empty, just copy over the code
+ editorRef.current?.executeEdits('apply-ai-message', [
+ {
+ text: `${sql}`,
+ range: editorModel.getFullModelRange(),
+ },
+ ])
+ } else {
+ const currentSql = editorRef.current?.getValue()
+ const diff = { original: currentSql || '', modified: sql }
+ setSourceSqlDiff(diff)
+ setSelectedDiffType(diffType)
}
+
+ // One-shot: drain the request so it can't re-apply to a later editor or session.
+ diffRequest.consumeDiffRequest()
+ })
+ useEffect(() => {
+ drainDiffRequest()
+ // until we can upgrade eslint to ignore useEffectEvent
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [snapV2.diffContent])
+ }, [diffRequest.pending, editorMountCount])
// We want to check if the diff editor is mounted and if it is, we want to show the widget
// We also want to cleanup the widget when the diff editor is closed
@@ -1072,13 +1093,16 @@ export const SQLEditor = () => {
<DropdownMenuTrigger asChild>
<Button variant="default" iconRight={<ChevronUp size={14} />}>
Limit results to:{' '}
- {ROWS_PER_PAGE_OPTIONS.find((opt) => opt.value === snapV2.limit)?.label}
+ {
+ ROWS_PER_PAGE_OPTIONS.find((opt) => opt.value === sessionSnap.limit)
+ ?.label
+ }
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40" align="end">
<DropdownMenuRadioGroup
- value={snapV2.limit.toString()}
- onValueChange={(val) => snapV2.setLimit(Number(val))}
+ value={sessionSnap.limit.toString()}
+ onValueChange={(val) => sessionSnap.setLimit(Number(val))}
>
{ROWS_PER_PAGE_OPTIONS.map((option) => (
<DropdownMenuRadioItem key={option.label} value={option.value.toString()}>
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts b/apps/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
index 0e497cca467..9e01e8c24a2 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
+++ b/apps/studio/components/interfaces/SQLEditor/SQLEditor.utils.ts
@@ -9,11 +9,11 @@ import {
updateWithoutWhereRegex,
} from './SQLEditor.constants'
import { ContentDiff } from './SQLEditor.types'
+import type { SnippetWithContent } from '@/data/content/sql-folders-query'
import type { DatabaseEventTrigger } from '@/data/database-event-triggers/database-event-triggers-query'
import { generateUuid } from '@/lib/api/snippets.browser'
import { removeCommentsFromSql } from '@/lib/helpers'
import { sqlEventParser } from '@/lib/sql-event-parser'
-import type { SnippetWithContent } from '@/state/sql-editor-v2'
export type CreateTableWithoutRLS = {
schema?: string
@@ -83,7 +83,7 @@ export const createSqlSnippetSkeletonV2 = ({
content_id: id ?? '',
unchecked_sql: untrustedSql(sql ?? ''),
} as any,
- isNotSavedInDatabaseYet: true,
+ status: 'new',
}
}
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLExamples.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLExamples.tsx
index c9ec290ad1b..d95a2b75539 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLExamples.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLExamples.tsx
@@ -12,7 +12,7 @@ import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
import { useTrack } from '@/lib/telemetry/track'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
const SQLExamples = () => {
const router = useRouter()
diff --git a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
index 07f3d132460..0b855813393 100644
--- a/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates.tsx
@@ -12,7 +12,7 @@ import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
import { useTrack } from '@/lib/telemetry/track'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
const SQLTemplates = () => {
const router = useRouter()
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
index a54a698c6e2..74f7d6e7437 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ChartConfig.tsx
@@ -20,11 +20,12 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import BarChart from '@/components/ui/Charts/BarChart'
import NoDataPlaceholder from '@/components/ui/Charts/NoDataPlaceholder'
+import { getCumulativeResults } from '@/components/ui/QueryBlock/QueryBlock.utils'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
type Results = { rows: readonly any[] }
@@ -40,21 +41,6 @@ export type ChartConfig = {
logScale?: boolean
}
-const getCumulativeResults = (results: Results, config: ChartConfig) => {
- if (!results?.rows?.length) {
- return []
- }
-
- const cumulativeResults = results.rows.reduce((acc, row) => {
- const prev = acc[acc.length - 1] || {}
- const next = {
- ...row,
- [config.yKey]: (prev[config.yKey] || 0) + row[config.yKey],
- }
- return [...acc, next]
- }, [])
- return cumulativeResults
-}
const VALID_RESULT_KEY_TYPES = ['number', 'string', 'date']
type ChartConfigProps = {
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ReadOnlyBadge.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ReadOnlyBadge.tsx
index 253675db650..b4d56ef40c6 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ReadOnlyBadge.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/ReadOnlyBadge.tsx
@@ -1,8 +1,8 @@
import { Badge } from 'ui'
import { useProfile } from '@/lib/profile'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
import { isSnippetOwner } from '@/state/sql-editor/sql-editor-rules'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export type ReadOnlyBadgeProps = { id: string }
const ReadOnlyBadge = ({ id }: ReadOnlyBadgeProps) => {
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
index 9e42185427c..49f6883ea8e 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/Results.tsx
@@ -142,5 +142,3 @@ export const Results = ({ rows }: { rows: readonly any[] }) => {
</>
)
}
-
-export default Results
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
index 12c34a4214d..cf10b862ce0 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/SavingIndicator.tsx
@@ -5,8 +5,10 @@ import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import ReadOnlyBadge from './ReadOnlyBadge'
import { useProfile } from '@/lib/profile'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { isSaveFailed, isSaving } from '@/state/sql-editor/sql-editor-lifecycle'
import { isSnippetOwner } from '@/state/sql-editor/sql-editor-rules'
+import { useSqlEditorSaveCoordinator } from '@/state/sql-editor/sql-editor-save-coordinator'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export type SavingIndicatorProps = { id: string }
@@ -14,17 +16,20 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
const { profile } = useProfile()
const snapV2 = useSqlEditorV2StateSnapshot()
- const savingState = snapV2.savingStates[id]
- const previousState = usePrevious(savingState)
+ const snippet = snapV2.snippets[id]
+ const status = snippet?.snippet.status
+ const saving = isSaving(status)
+ const saveFailed = isSaveFailed(status)
+ const previousSaving = usePrevious(saving)
const [showSavedText, setShowSavedText] = useState(false)
- const snippet = snapV2.snippets[id]
const snippetIsOwned = !!snippet && isSnippetOwner(snippet.snippet, profile?.id)
+ const { requestSave } = useSqlEditorSaveCoordinator()
useEffect(() => {
let cancel = false
- if (previousState === 'UPDATING' && savingState === 'IDLE') {
+ if (previousSaving && status === 'saved') {
setShowSavedText(true)
setTimeout(() => {
if (!cancel) setShowSavedText(false)
@@ -34,14 +39,14 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
return () => {
cancel = true
}
- }, [savingState])
+ }, [status, previousSaving])
- const retry = () => snapV2.addNeedsSaving(id)
+ const retry = () => requestSave(id)
return (
<>
<div className="mx-2 flex items-center gap-2">
- {snippetIsOwned && savingState === 'UPDATING_FAILED' && (
+ {snippetIsOwned && saveFailed && (
<Button
variant="text"
size="tiny"
@@ -58,14 +63,14 @@ const SavingIndicator = ({ id }: SavingIndicatorProps) => {
</TooltipTrigger>
<TooltipContent side="bottom">All changes saved</TooltipContent>
</Tooltip>
- ) : savingState === 'UPDATING' ? (
+ ) : saving ? (
<Tooltip>
<TooltipTrigger>
<Loader2 className="animate-spin" size={14} strokeWidth={2} />
</TooltipTrigger>
<TooltipContent>Saving changes...</TooltipContent>
</Tooltip>
- ) : savingState === 'UPDATING_FAILED' ? (
+ ) : saveFailed ? (
snippetIsOwned ? (
<Tooltip>
<TooltipTrigger>
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
index 0f9fceee440..7164ea180ec 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx
@@ -24,7 +24,8 @@ import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { IS_PLATFORM } from '@/lib/constants'
import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
import { SHORTCUT_DEFINITIONS, SHORTCUT_IDS } from '@/state/shortcuts/registry'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export type UtilityActionsProps = {
id: string
@@ -45,6 +46,7 @@ export const UtilityActions = ({
}: UtilityActionsProps) => {
const { ref } = useParams()
const snapV2 = useSqlEditorV2StateSnapshot()
+ const sessionSnap = useSqlEditorSessionSnapshot()
const [isAiOpen] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_OPEN, true)
const [intellisenseEnabled, setIntellisenseEnabled] = useLocalStorageQuery(
@@ -75,7 +77,7 @@ export const UtilityActions = ({
const removeFavorite = () => snapV2.removeFavorite(id)
const onSelectDatabase = (databaseId: string) => {
- snapV2.resetResults(id)
+ sessionSnap.resetResults(id)
setLastSelectedDb(databaseId)
}
@@ -133,13 +135,19 @@ export const UtilityActions = ({
<div className={cn('items-center gap-x-2', isAiOpen ? 'hidden 2xl:flex' : 'flex')}>
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- variant="text"
- className="px-1"
- icon={<Keyboard className="text-foreground-light" />}
- />
- </DropdownMenuTrigger>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <DropdownMenuTrigger asChild>
+ <Button
+ variant="text"
+ className="px-1"
+ icon={<Keyboard className="text-foreground-light" />}
+ aria-label="Enable Intellisense"
+ />
+ </DropdownMenuTrigger>
+ </TooltipTrigger>
+ <TooltipContent side="bottom">Enable Intellisense</TooltipContent>
+ </Tooltip>
<DropdownMenuContent className="w-48">
<DropdownMenuItem className="justify-between" onClick={toggleIntellisense}>
Intellisense enabled
@@ -158,6 +166,7 @@ export const UtilityActions = ({
onClick={removeFavorite}
className="px-1"
icon={<Heart className="fill-brand stroke-none" />}
+ aria-label="Remove from favorites"
/>
) : (
<Button
@@ -166,6 +175,7 @@ export const UtilityActions = ({
onClick={addFavorite}
className="px-1"
icon={<Heart className="fill-none stroke-foreground-light" />}
+ aria-label="Add to favorites"
/>
)}
</TooltipTrigger>
@@ -182,6 +192,7 @@ export const UtilityActions = ({
onClick={prettifyQuery}
className="px-1"
icon={<AlignLeft strokeWidth={2} className="text-foreground-light" />}
+ aria-label="Prettify SQL"
/>
</TooltipTrigger>
<TooltipContent side="bottom" className="p-1 pl-2.5">
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
index d8ab07d67c4..60697aa58b1 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityPanel.tsx
@@ -10,7 +10,8 @@ import { DownloadResultsButton } from '@/components/ui/DownloadResultsButton'
import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
import { Snippet } from '@/data/content/sql-folders-query'
import { useTrack } from '@/lib/telemetry/track'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export type UtilityPanelProps = {
id: string
@@ -57,9 +58,10 @@ export const UtilityPanel = ({
const { ref } = useParams()
const track = useTrack()
const snapV2 = useSqlEditorV2StateSnapshot()
+ const sessionSnap = useSqlEditorSessionSnapshot()
const snippet = snapV2.snippets[id]?.snippet
- const result = snapV2.results[id]?.[0]
+ const result = sessionSnap.results[id]?.[0]
const handleTabChange = (tab: string) => {
// When switching to the explain tab, trigger the explain query
@@ -151,7 +153,7 @@ export const UtilityPanel = ({
<DownloadResultsButton
variant="text"
results={result.rows as any[]}
- fileName={`Supabase Snippet ${snippet.name}`}
+ fileName={`Supabase Snippet ${snippet?.name ?? 'Results'}`}
onDownloadAsCSV={() => track('sql_editor_result_download_csv_clicked')}
onCopyAsMarkdown={() => track('sql_editor_result_copy_markdown_clicked')}
onCopyAsJSON={() => track('sql_editor_result_copy_json_clicked')}
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
index c6142c70c09..f7d2e1c2267 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabExplain.tsx
@@ -2,7 +2,7 @@ import { Loader2 } from 'lucide-react'
import { useState } from 'react'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import Results from './Results'
+import { Results } from './Results'
import { ExplainVisualizer } from '@/components/interfaces/ExplainVisualizer/ExplainVisualizer'
import { ExplainHeader } from '@/components/interfaces/ExplainVisualizer/ExplainVisualizer.Header'
import {
@@ -10,7 +10,7 @@ import {
isTextFormatExplain,
} from '@/components/interfaces/ExplainVisualizer/ExplainVisualizer.utils'
import CopyButton from '@/components/ui/CopyButton'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
export type UtilityTabExplainProps = {
id: string
@@ -18,8 +18,8 @@ export type UtilityTabExplainProps = {
}
export function UtilityTabExplain({ id, isExecuting }: UtilityTabExplainProps) {
- const snapV2 = useSqlEditorV2StateSnapshot()
- const explainResult = snapV2.explainResults[id]
+ const sessionSnap = useSqlEditorSessionSnapshot()
+ const explainResult = sessionSnap.explainResults[id]
const [mode, setMode] = useState<'visual' | 'raw'>('visual')
if (isExecuting) {
diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
index dbc3f603bf6..37ac910923d 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx
@@ -4,7 +4,7 @@ import { parseAsBoolean, useQueryState } from 'nuqs'
import { forwardRef } from 'react'
import { Button, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import Results from './Results'
+import { Results } from './Results'
import { getSqlErrorLines } from './UtilityTabResults.utils'
import { subscriptionHasHipaaAddon } from '@/components/interfaces/Billing/Subscription/Subscription.utils'
import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
@@ -15,7 +15,7 @@ import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-q
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { DOCS_URL } from '@/lib/constants'
import { useDatabaseSelectorStateSnapshot } from '@/state/database-selector'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorSessionSnapshot } from '@/state/sql-editor/sql-editor-session-state'
export type UtilityTabResultsProps = {
id: string
@@ -31,10 +31,10 @@ export const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsPro
const { ref } = useParams()
const state = useDatabaseSelectorStateSnapshot()
const { data: organization } = useSelectedOrganizationQuery()
- const snapV2 = useSqlEditorV2StateSnapshot()
+ const sessionSnap = useSqlEditorSessionSnapshot()
const [, setShowConnect] = useQueryState('showConnect', parseAsBoolean.withDefault(false))
- const result = snapV2.results[id]?.[0]
+ const result = sessionSnap.results[id]?.[0]
const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: organization?.slug })
// Customers on HIPAA plans should not have access to Supabase AI
@@ -139,7 +139,7 @@ export const UtilityTabResults = forwardRef<HTMLDivElement, UtilityTabResultsPro
variant="default"
onClick={() => {
state.setSelectedDatabaseId(ref)
- snapV2.resetResults(id)
+ sessionSnap.resetResults(id)
}}
>
Switch to primary database
diff --git a/apps/studio/components/interfaces/SQLEditor/hooks.ts b/apps/studio/components/interfaces/SQLEditor/hooks.ts
index 047056aca21..7c7b2e391ce 100644
--- a/apps/studio/components/interfaces/SQLEditor/hooks.ts
+++ b/apps/studio/components/interfaces/SQLEditor/hooks.ts
@@ -14,7 +14,7 @@ import {
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export const useNewQuery = () => {
const router = useRouter()
@@ -149,5 +149,3 @@ export function useSqlEditorPrompt() {
resetPrompt,
}
}
-
-export default useNewQuery
diff --git a/apps/studio/components/interfaces/SQLEditor/useAddDefinitions.ts b/apps/studio/components/interfaces/SQLEditor/useAddDefinitions.ts
index e26c2f4fd44..f3a0ceabbc9 100644
--- a/apps/studio/components/interfaces/SQLEditor/useAddDefinitions.ts
+++ b/apps/studio/components/interfaces/SQLEditor/useAddDefinitions.ts
@@ -12,7 +12,7 @@ import { useTableColumnsQuery } from '@/data/database/table-columns-query'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { formatSql } from '@/lib/formatSql'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export const useAddDefinitions = (id: string, monaco: Monaco | null) => {
const { data: project } = useSelectedProjectQuery()
diff --git a/apps/studio/components/interfaces/SQLEditor/useSnippetEditor.ts b/apps/studio/components/interfaces/SQLEditor/useSnippetEditor.ts
new file mode 100644
index 00000000000..76c5a139296
--- /dev/null
+++ b/apps/studio/components/interfaces/SQLEditor/useSnippetEditor.ts
@@ -0,0 +1,81 @@
+import { useParams } from 'common'
+import { useRouter } from 'next/router'
+import { useEffect, useEffectEvent } from 'react'
+
+import { createSqlSnippetSkeletonV2 } from './SQLEditor.utils'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+import { useProfile } from '@/lib/profile'
+import { wasNeverPersisted } from '@/state/sql-editor/sql-editor-lifecycle'
+import { canEditSnippet } from '@/state/sql-editor/sql-editor-rules'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
+import { useTabsStateSnapshot } from '@/state/tabs'
+
+/**
+ * Owns the editing lifecycle of a single SQL snippet: creating the snippet in
+ * the store on first edit (and routing to its URL), writing changes back to the
+ * store via `setSql`, and seeding the editor from a `?content=` deep link.
+ *
+ * Edits are written to the store synchronously on every change; debouncing the
+ * actual persistence is the save mechanism's job (see `createSaveMechanism`), so
+ * the store — and therefore the snippet's dirty status — always reflects the
+ * latest edit immediately.
+ *
+ * Extracted from `MonacoEditor` so that component stays a thin editor shell.
+ */
+export function useSnippetEditor({ id, snippetName }: { id: string; snippetName: string }) {
+ const router = useRouter()
+ const { profile } = useProfile()
+ const { ref, content } = useParams()
+ const { data: project } = useSelectedProjectQuery()
+
+ const snapV2 = useSqlEditorV2StateSnapshot()
+ const tabsSnap = useTabsStateSnapshot()
+
+ const snippet = snapV2.snippets[id]
+ const disableEdit = !!snippet && !canEditSnippet(snippet.snippet, profile?.id)
+
+ function handleEditorChange(value: string | undefined) {
+ tabsSnap.makeActiveTabPermanent()
+ if (!id || !value) return
+
+ if (!snippet && ref && profile !== undefined && project !== undefined) {
+ const newSnippet = createSqlSnippetSkeletonV2({
+ idOverride: id,
+ name: snippetName,
+ sql: value,
+ owner_id: profile?.id,
+ project_id: project?.id,
+ })
+ snapV2.addSnippet({ projectRef: ref, snippet: newSnippet })
+ // When the editor was seeded from a `content` deep-link, replace rather
+ // than push. The caller navigated to `/sql/new?content=...` (a long,
+ // one-shot URL); replacing collapses it out of history so Back returns to
+ // the originating page instead of a wasted step that re-seeds the snippet.
+ if (router.query.content !== undefined) {
+ router.replace(`/project/${ref}/sql/${newSnippet.id}`, undefined, { shallow: true })
+ } else {
+ router.push(`/project/${ref}/sql/${newSnippet.id}`, undefined, { shallow: true })
+ }
+ }
+
+ // A snippet that has never been persisted needs the snippet/folder lists
+ // invalidated so it shows up in the sidebar. If `snippet` was undefined at
+ // render we just created one above (status 'new'), which always qualifies.
+ const shouldInvalidate = snippet ? wasNeverPersisted(snippet.snippet.status) : true
+ snapV2.setSql({ id, sql: value, shouldInvalidate })
+ }
+
+ // if an SQL query is passed by the content parameter, set the editor value to its content. This
+ // is usually used for sending the user to SQL editor from other pages with SQL.
+ const seedFromContentParam = useEffectEvent(() => {
+ if (content && content.length > 0) handleEditorChange(content)
+ })
+ useEffect(() => {
+ seedFromContentParam()
+ // The useEffectEvent return is stable and must not be a dependency; this
+ // disable can go once our eslint version understands useEffectEvent.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
+
+ return { snippet, disableEdit, handleEditorChange }
+}
diff --git a/apps/studio/components/interfaces/Settings/API/DataApiProjectUrlCard.tsx b/apps/studio/components/interfaces/Settings/API/DataApiProjectUrlCard.tsx
index 887c5fd1bf5..59e9016b8ba 100644
--- a/apps/studio/components/interfaces/Settings/API/DataApiProjectUrlCard.tsx
+++ b/apps/studio/components/interfaces/Settings/API/DataApiProjectUrlCard.tsx
@@ -3,6 +3,7 @@ import { AlertCircle } from 'lucide-react'
import { parseAsString, useQueryState } from 'nuqs'
import { useEffect, useEffectEvent } from 'react'
import { Alert, AlertTitle } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
import {
PageSection,
PageSectionAside,
@@ -11,8 +12,7 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import { Input } from 'ui-patterns/DataInputs/Input'
+} from 'ui-patterns/PageSection'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { getApiEndpoint } from '@/components/interfaces/Integrations/DataApi/DataApi.utils'
diff --git a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
index 69fdc9f6881..a7e1f3e0e1a 100644
--- a/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
+++ b/apps/studio/components/interfaces/Settings/API/PostgrestConfig.tsx
@@ -23,7 +23,6 @@ import {
Switch,
useWatch,
} from 'ui'
-import { GenericSkeletonLoader, PageSection, PageSectionContent } from 'ui-patterns'
import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
@@ -33,6 +32,8 @@ import {
MultiSelectorList,
MultiSelectorTrigger,
} from 'ui-patterns/multi-select'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { z } from 'zod'
import { ExposedSchemaSelector, internalSchemasCannotExpose } from './ExposedSchemaSelector'
@@ -48,7 +49,7 @@ import { privilegeKeys } from '@/data/privileges/keys'
import { useUpdateDefaultPrivilegesMutation } from '@/data/privileges/update-default-privileges-mutation'
import { useUpdateExposedEntitiesMutation } from '@/data/privileges/update-exposed-entities-mutation'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM } from '@/lib/constants'
import { noop } from '@/lib/void'
@@ -136,7 +137,12 @@ export const PostgrestConfig = () => {
const { can: canUpdatePostgrestConfigPermission, isSuccess: isPermissionsLoaded } =
useAsyncCheckPermissions(PermissionAction.UPDATE, 'custom_config_postgrest')
+ // PostgREST config (exposed schemas, extra search path, max rows, pool size) is persisted via
+ // the platform API, which isn't available self-hosted (the values come from env vars there).
const canUpdatePostgrestConfig = IS_PLATFORM && canUpdatePostgrestConfigPermission
+ // Entity exposure (tables, functions, default privileges) is applied with SQL GRANT/REVOKE
+ // directly against the database, so it works both on the platform and self-hosted.
+ const canUpdateExposedEntities = canUpdatePostgrestConfigPermission
const defaultValues = useMemo(() => {
return {
@@ -191,16 +197,20 @@ export const PostgrestConfig = () => {
})
}
- await updatePostgrestConfig(
- {
- projectRef,
- dbSchema,
- maxRows: values.maxRows,
- dbExtraSearchPath: values.dbExtraSearchPath.join(','),
- dbPool: values.dbPool ? values.dbPool : null,
- },
- { onError: noop }
- )
+ // The PostgREST config endpoint isn't available self-hosted, so only persist these fields on
+ // the platform. Entity exposure above is applied via SQL and works in both environments.
+ if (canUpdatePostgrestConfig) {
+ await updatePostgrestConfig(
+ {
+ projectRef,
+ dbSchema,
+ maxRows: values.maxRows,
+ dbExtraSearchPath: values.dbExtraSearchPath.join(','),
+ dbPool: values.dbPool ? values.dbPool : null,
+ },
+ { onError: noop }
+ )
+ }
await Promise.all([
queryClient.invalidateQueries({
@@ -428,7 +438,7 @@ export const PostgrestConfig = () => {
<div>
<Switch
size="large"
- disabled={!canUpdatePostgrestConfig}
+ disabled={!canUpdateExposedEntities}
checked={field.value}
onCheckedChange={field.onChange}
/>
@@ -568,22 +578,20 @@ export const PostgrestConfig = () => {
)}
</form>
</Form>
- {IS_PLATFORM && (
- <CardFooter className="border-t">
- <FormActions
- form={formId}
- isSubmitting={isUpdating}
- hasChanges={form.formState.isDirty}
- handleReset={resetForm}
- disabled={!canUpdatePostgrestConfig}
- helper={
- isPermissionsLoaded && !canUpdatePostgrestConfigPermission
- ? "You need additional permissions to update your project's API settings"
- : undefined
- }
- />
- </CardFooter>
- )}
+ <CardFooter className="border-t">
+ <FormActions
+ form={formId}
+ isSubmitting={isUpdating}
+ hasChanges={form.formState.isDirty}
+ handleReset={resetForm}
+ disabled={!canUpdateExposedEntities}
+ helper={
+ isPermissionsLoaded && !canUpdateExposedEntities
+ ? "You need additional permissions to update your project's API settings"
+ : undefined
+ }
+ />
+ </CardFooter>
</Card>
{IS_PLATFORM && (
<Card className="mb-4">
diff --git a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
index db2b8e2ef4d..22b304adde1 100644
--- a/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/Addons.tsx
@@ -13,7 +13,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection } from 'ui-patterns/PageSection'
@@ -32,7 +32,7 @@ import {
} from '@/components/interfaces/Billing/Subscription/Subscription.utils'
import { ProjectUpdateDisabledTooltip } from '@/components/interfaces/Organization/BillingSettings/ProjectUpdateDisabledTooltip'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { ResourceItem } from '@/components/ui/Resource/ResourceItem'
import { ResourceList } from '@/components/ui/Resource/ResourceList'
diff --git a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
index 0bf56a72a55..b27ec4e139d 100644
--- a/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Addons/IPv4SidePanel.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
import { useEffect, useState } from 'react'
import { toast } from 'sonner'
import { cn, RadioGroup, RadioGroupLargeItem, SidePanel } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { TaxDisclaimer } from '@/components/interfaces/Billing/TaxDisclaimer'
import { DocsButton } from '@/components/ui/DocsButton'
diff --git a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
index 83bcb9f257d..0a2b5927bf6 100644
--- a/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/BannedIPs.tsx
@@ -4,6 +4,7 @@ import { Globe } from 'lucide-react'
import { useState } from 'react'
import { toast } from 'sonner'
import { Badge, Card, CardContent, Skeleton } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import {
PageSection,
PageSectionContent,
@@ -11,22 +12,28 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+} from 'ui-patterns/PageSection'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
+import { HighAvailabilityDisabledSectionNotice } from '@/components/ui/HighAvailability/HighAvailabilityDisabledSectionNotice'
import { useBannedIPsDeleteMutation } from '@/data/banned-ips/banned-ips-delete-mutations'
import { useBannedIPsQuery } from '@/data/banned-ips/banned-ips-query'
import { useUserIPAddressQuery } from '@/data/misc/user-ip-address-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
+const HA_DISABLED_TITLE = 'Network bans unavailable on High Availability projects'
+const HA_DISABLED_DESCRIPTION =
+ "We're working to bring network bans to High Availability projects. Contact support if this is blocking your work."
+
export const BannedIPs = () => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
+ const { isHighAvailability } = useHighAvailability()
const [selectedIPToUnban, setSelectedIPToUnban] = useState<string | null>(null) // Track the selected IP for unban
@@ -52,6 +59,11 @@ export const BannedIPs = () => {
},
})
+ const isSectionDisabled = isHighAvailability || !canUnbanNetworks
+ const sectionDisabledReason = isHighAvailability
+ ? HA_DISABLED_TITLE
+ : 'You need additional permissions to unban networks'
+
const { mutate: unbanIPs, isPending: isUnbanning } = useBannedIPsDeleteMutation({
onSuccess: () => {
toast.success('IP address successfully unbanned')
@@ -90,49 +102,56 @@ export const BannedIPs = () => {
<DocsButton href={`${DOCS_URL}/reference/cli/supabase-network-bans`} />
</PageSectionMeta>
<PageSectionContent>
- {ipListLoading ? (
- <Card>
- <CardContent className="space-y-4">
- <Skeleton className="h-4 w-full" />
- <Skeleton className="h-4 w-full" />
- </CardContent>
- </Card>
- ) : ipListError ? (
- <AlertError error={ipListError} subject="Failed to retrieve banned IP addresses" />
- ) : ipList.banned_ipv4_addresses.length > 0 ? (
- <Card>
- {ipList.banned_ipv4_addresses.map((ip) => (
- <CardContent key={ip} className="flex items-center justify-between">
- <div className="flex items-center space-x-5">
- <Globe size={16} className="text-foreground-lighter" />
- <p className="text-sm font-mono">{ip}</p>
- {ip === userIPAddress && <Badge>Your IP address</Badge>}
- </div>
- <ButtonTooltip
- variant="default"
- disabled={!canUnbanNetworks}
- onClick={() => openConfirmationModal(ip)}
- tooltip={{
- content: {
- side: 'bottom',
- text: !canUnbanNetworks
- ? 'You need additional permissions to unban networks'
- : undefined,
- },
- }}
- >
- Unban IP
- </ButtonTooltip>
- </CardContent>
- ))}
- </Card>
- ) : (
- <Card>
- <CardContent className="text-foreground text-sm">
- There are no banned IP addresses for your project
- </CardContent>
- </Card>
+ {isHighAvailability && (
+ <div className="mb-4">
+ <HighAvailabilityDisabledSectionNotice
+ title={HA_DISABLED_TITLE}
+ description={HA_DISABLED_DESCRIPTION}
+ />
+ </div>
)}
+ {!isHighAvailability &&
+ (ipListLoading ? (
+ <Card>
+ <CardContent className="space-y-4">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-full" />
+ </CardContent>
+ </Card>
+ ) : ipListError ? (
+ <AlertError error={ipListError} subject="Failed to retrieve banned IP addresses" />
+ ) : ipList.banned_ipv4_addresses.length > 0 ? (
+ <Card>
+ {ipList.banned_ipv4_addresses.map((ip) => (
+ <CardContent key={ip} className="flex items-center justify-between">
+ <div className="flex items-center space-x-5">
+ <Globe size={16} className="text-foreground-lighter" />
+ <p className="text-sm font-mono">{ip}</p>
+ {ip === userIPAddress && <Badge>Your IP address</Badge>}
+ </div>
+ <ButtonTooltip
+ variant="default"
+ disabled={isSectionDisabled}
+ onClick={() => openConfirmationModal(ip)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: isSectionDisabled ? sectionDisabledReason : undefined,
+ },
+ }}
+ >
+ Unban IP
+ </ButtonTooltip>
+ </CardContent>
+ ))}
+ </Card>
+ ) : (
+ <Card>
+ <CardContent className="text-foreground text-sm">
+ There are no banned IP addresses for your project
+ </CardContent>
+ </Card>
+ ))}
</PageSectionContent>
</PageSection>
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionLogging.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionLogging.tsx
index cf30774357b..5290347e0ad 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionLogging.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionLogging.tsx
@@ -6,6 +6,7 @@ import { useEffect, useMemo } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Switch } from 'ui'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
PageSectionAside,
@@ -13,11 +14,10 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+} from 'ui-patterns/PageSection'
import z from 'zod'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
import { usePostgresConfigurationUpdateMutation } from '@/data/config/postgres-config-mutation'
diff --git a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
index 36104ba7e43..1d89f386db3 100644
--- a/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/ConnectionPooling/ConnectionPooling.tsx
@@ -21,7 +21,7 @@ import {
InputGroupText,
Separator,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -35,7 +35,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import z from 'zod'
import { POOLING_OPTIMIZATIONS } from './ConnectionPooling.constants'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { FormActions } from '@/components/ui/Forms/FormActions'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
index 79de0684859..7b0d1499db4 100644
--- a/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DatabaseSettings/ResetDbPassword.tsx
@@ -37,5 +37,3 @@ export const ResetDbPassword = ({ disabled = false }) => {
</PageSection>
)
}
-
-export default ResetDbPassword
diff --git a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
index ee568cd6024..45ab64cc64b 100644
--- a/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/DiskSizeConfiguration.tsx
@@ -11,7 +11,7 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
+} from 'ui-patterns/PageSection'
import { Markdown } from '@/components/interfaces/Markdown'
import DiskSizeConfigurationModal from '@/components/interfaces/Settings/Database/DiskSizeConfigurationModal'
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
index 9aaafb4ebb7..2e247c35eee 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessConfiguration.tsx
@@ -23,15 +23,15 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
import {
PageSection,
PageSectionContent,
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
-import { Admonition } from 'ui-patterns/admonition'
-import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
+} from 'ui-patterns/PageSection'
import type { JitUserRule, SheetMode } from './JitDbAccess.types'
import {
@@ -43,7 +43,7 @@ import { JitDbAccessDeleteDialog } from './JitDbAccessDeleteDialog'
import { JitDbAccessRuleSheet } from './JitDbAccessRuleSheet'
import { JitDbAccessRulesTable } from './JitDbAccessRulesTable'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
import { InlineLink, InlineLinkClassName } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRoleGrantFields.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRoleGrantFields.tsx
index bc4fbcec402..619f7721e2e 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRoleGrantFields.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRoleGrantFields.tsx
@@ -9,10 +9,10 @@ import {
SelectValue,
WarningIcon,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { SingleValueFieldArray } from 'ui-patterns/form/SingleValueFieldArray/SingleValueFieldArray'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import type { JitRoleGrantDraft, JitRoleOption, JitUserRuleDraft } from './JitDbAccess.types'
import { createEmptyIpRange, getRelativeDatetimeByMode } from './JitDbAccess.utils'
diff --git a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
index 480a970261f..3b5af9abac3 100644
--- a/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/JitDatabaseAccess/JitDbAccessRuleSheet.tsx
@@ -22,7 +22,7 @@ import {
SheetHeader,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
index 3e5b156d3bc..f4275aa8748 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/NetworkRestrictions.tsx
@@ -13,9 +13,6 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- Tooltip,
- TooltipContent,
- TooltipTrigger,
} from 'ui'
import {
PageSection,
@@ -24,7 +21,7 @@ import {
PageSectionMeta,
PageSectionSummary,
PageSectionTitle,
-} from 'ui-patterns'
+} from 'ui-patterns/PageSection'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import AddRestrictionModal from './AddRestrictionModal'
@@ -33,32 +30,43 @@ import DisallowAllModal from './DisallowAllModal'
import RemoveRestrictionModal from './RemoveRestrictionModal'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { DocsButton } from '@/components/ui/DocsButton'
+import { HighAvailabilityDisabledSectionNotice } from '@/components/ui/HighAvailability/HighAvailabilityDisabledSectionNotice'
import { useNetworkRestrictionsQuery } from '@/data/network-restrictions/network-restrictions-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
+const HA_DISABLED_TITLE = 'Network restrictions unavailable on High Availability projects'
+const HA_DISABLED_DESCRIPTION =
+ "We're working to bring network restrictions to High Availability projects. Contact support if this is blocking your work."
+
interface AccessButtonProps {
disabled: boolean
+ disabledTooltip?: string
onClick: (value: boolean) => void
}
-const AllowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
- <Tooltip>
- <TooltipTrigger asChild>
- <Button variant="default" disabled={disabled} onClick={() => onClick(true)}>
- Allow all access
- </Button>
- </TooltipTrigger>
- {disabled && (
- <TooltipContent side="bottom">
- You need additional permissions to update network restrictions
- </TooltipContent>
- )}
- </Tooltip>
+const getDisabledTooltip = (disabled: boolean, disabledTooltip?: string) =>
+ disabled ? disabledTooltip : undefined
+
+const AllowAllAccessButton = ({ disabled, disabledTooltip, onClick }: AccessButtonProps) => (
+ <ButtonTooltip
+ variant="default"
+ disabled={disabled}
+ onClick={() => onClick(true)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: getDisabledTooltip(disabled, disabledTooltip),
+ },
+ }}
+ >
+ Allow all access
+ </ButtonTooltip>
)
-const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
+const DisallowAllAccessButton = ({ disabled, disabledTooltip, onClick }: AccessButtonProps) => (
<ButtonTooltip
disabled={disabled}
variant="default"
@@ -66,9 +74,7 @@ const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
tooltip={{
content: {
side: 'bottom',
- text: disabled
- ? 'You need additional permissions to update network restrictions'
- : undefined,
+ text: getDisabledTooltip(disabled, disabledTooltip),
},
}}
>
@@ -79,6 +85,7 @@ const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
export const NetworkRestrictions = () => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
+ const { isHighAvailability } = useHighAvailability()
const [isAddingAddress, setIsAddingAddress] = useState<undefined | 'IPv4' | 'IPv6'>()
const [isAllowingAll, setIsAllowingAll] = useState(false)
const [isDisallowingAll, setIsDisallowingAll] = useState(false)
@@ -98,6 +105,11 @@ export const NetworkRestrictions = () => {
}
)
+ const isSectionDisabled = isHighAvailability || !canUpdateNetworkRestrictions
+ const sectionDisabledReason = isHighAvailability
+ ? HA_DISABLED_TITLE
+ : 'You need additional permissions to update network restrictions'
+
const hasAccessToRestrictions = data?.entitlement === 'allowed'
const ipv4Restrictions = data?.config?.dbAllowedCidrs ?? []
// @ts-ignore [Joshen] API typing issue
@@ -121,14 +133,14 @@ export const NetworkRestrictions = () => {
</PageSectionSummary>
<PageSectionAside className="flex items-center gap-x-2">
<DocsButton href={`${DOCS_URL}/guides/platform/network-restrictions`} />
- {!canUpdateNetworkRestrictions ? (
+ {!canUpdateNetworkRestrictions || isHighAvailability ? (
<ButtonTooltip
disabled
variant="primary"
tooltip={{
content: {
side: 'bottom',
- text: 'You need additional permissions to update network restrictions',
+ text: sectionDisabledReason,
},
}}
>
@@ -139,7 +151,7 @@ export const NetworkRestrictions = () => {
<DropdownMenuTrigger asChild>
<Button
variant="primary"
- disabled={!canUpdateNetworkRestrictions}
+ disabled={isSectionDisabled}
iconRight={<ChevronDown size={14} />}
>
Add restriction
@@ -166,140 +178,171 @@ export const NetworkRestrictions = () => {
</PageSectionAside>
</PageSectionMeta>
<PageSectionContent>
- {isLoading ? (
- <Card>
- <CardContent>
- <div className="space-y-2">
- <ShimmeringLoader />
- <ShimmeringLoader className="w-[70%]" />
- <ShimmeringLoader className="w-[50%]" />
- </div>
- </CardContent>
- </Card>
- ) : hasApplyError ? (
- <Card>
- <CardContent>
- <div className="flex items-center justify-between">
+ {isHighAvailability && (
+ <div className="mb-4">
+ <HighAvailabilityDisabledSectionNotice
+ title={HA_DISABLED_TITLE}
+ description={HA_DISABLED_DESCRIPTION}
+ />
+ </div>
+ )}
+ {!isHighAvailability &&
+ (isLoading ? (
+ <Card>
+ <CardContent>
<div className="space-y-2">
- <div className="flex items-center space-x-2">
- <AlertCircle size={20} strokeWidth={1.5} className="text-foreground-light" />
- <p className="text-sm">
- Your network restrictions were not applied correctly
- </p>
- </div>
- <p className="text-sm text-foreground-light">
- Please try to add your network restrictions again
- </p>
- </div>
- <div className="flex items-center space-x-2">
- <AllowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
- onClick={setIsAllowingAll}
- />
- <DisallowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
- onClick={setIsDisallowingAll}
- />
- </div>
- </div>
- </CardContent>
- </Card>
- ) : (
- <Card>
- {isUninitialized || isAllowedAll ? (
- <CardContent className="flex items-center justify-between">
- <div className="flex items-start space-x-4">
- <div className="space-y-0.5">
- <p className="text-foreground text-sm">
- Your database can be accessed by all IP addresses
- </p>
- <p className="text-foreground-light text-sm">
- You may start limiting access to your database by adding a network
- restriction.
- </p>
- </div>
- </div>
- <div>
- <DisallowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
- onClick={setIsDisallowingAll}
- />
+ <ShimmeringLoader />
+ <ShimmeringLoader className="w-[70%]" />
+ <ShimmeringLoader className="w-[50%]" />
</div>
</CardContent>
- ) : isDisallowedAll ? (
- <CardContent className="flex items-center justify-between">
- <div className="flex items-start space-x-4">
- <Lock size={20} className="text-foreground-light" strokeWidth={1.5} />
- <div className="space-y-1">
- <p className="text-foreground-light text-sm">
- Your database <span className="text-amber-900 opacity-80">cannot</span> be
- accessed externally
- </p>
- <p className="text-foreground-light text-sm">
- All external IP addresses have been disallowed from accessing your project's
- database.
- </p>
- <p className="text-foreground-light text-sm">
- Note: Restrictions only apply to your database, and not to Supabase services
+ </Card>
+ ) : hasApplyError ? (
+ <Card>
+ <CardContent>
+ <div className="flex items-center justify-between">
+ <div className="space-y-2">
+ <div className="flex items-center space-x-2">
+ <AlertCircle
+ size={20}
+ strokeWidth={1.5}
+ className="text-foreground-light"
+ />
+ <p className="text-sm">
+ Your network restrictions were not applied correctly
+ </p>
+ </div>
+ <p className="text-sm text-foreground-light">
+ Please try to add your network restrictions again
</p>
</div>
- </div>
- <div>
- <AllowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
- onClick={setIsAllowingAll}
- />
- </div>
- </CardContent>
- ) : (
- <>
- <CardHeader className="md:flex-row md:items-center justify-between">
- <CardDescription className="text-foreground-light">
- <p>Only the following IP addresses have access to your database.</p>
- <p>
- You may remove all of them to allow all IP addresses to have access to your
- database.
- </p>
- <p>
- Note: Restrictions only apply to your database, and not to Supabase services
- </p>
- </CardDescription>
<div className="flex items-center space-x-2">
<AllowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
onClick={setIsAllowingAll}
/>
<DisallowAllAccessButton
- disabled={!canUpdateNetworkRestrictions}
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
onClick={setIsDisallowingAll}
/>
</div>
- </CardHeader>
- <CardContent className="py-0">
- <div className="divide-y">
- {restrictedIps.map((ip) => {
- return (
- <div key={ip} className="py-4 flex items-center justify-between">
- <div className="flex items-center space-x-5">
- <Globe size={16} className="text-foreground-lighter" />
- <Badge>{ipv4Restrictions.includes(ip) ? 'IPv4' : 'IPv6'}</Badge>
- <p className="text-sm font-mono">{ip}</p>
- </div>
- <Button
- variant="default"
- onClick={() => setSelectedRestrictionToRemove(ip)}
- >
- Remove
- </Button>
- </div>
- )
- })}
+ </div>
+ </CardContent>
+ </Card>
+ ) : (
+ <Card>
+ {isUninitialized || isAllowedAll ? (
+ <CardContent className="flex items-center justify-between">
+ <div className="flex items-start space-x-4">
+ <div className="space-y-0.5">
+ <p className="text-foreground text-sm">
+ Your database can be accessed by all IP addresses
+ </p>
+ <p className="text-foreground-light text-sm">
+ You may start limiting access to your database by adding a network
+ restriction.
+ </p>
+ </div>
+ </div>
+ <div>
+ <DisallowAllAccessButton
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
+ onClick={setIsDisallowingAll}
+ />
</div>
</CardContent>
- </>
- )}
- </Card>
- )}
+ ) : isDisallowedAll ? (
+ <CardContent className="flex items-center justify-between">
+ <div className="flex items-start space-x-4">
+ <Lock size={20} className="text-foreground-light" strokeWidth={1.5} />
+ <div className="space-y-1">
+ <p className="text-foreground-light text-sm">
+ Your database <span className="text-amber-900 opacity-80">cannot</span> be
+ accessed externally
+ </p>
+ <p className="text-foreground-light text-sm">
+ All external IP addresses have been disallowed from accessing your
+ project's database.
+ </p>
+ <p className="text-foreground-light text-sm">
+ Note: Restrictions only apply to your database, and not to Supabase
+ services
+ </p>
+ </div>
+ </div>
+ <div>
+ <AllowAllAccessButton
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
+ onClick={setIsAllowingAll}
+ />
+ </div>
+ </CardContent>
+ ) : (
+ <>
+ <CardHeader className="md:flex-row md:items-center justify-between">
+ <CardDescription className="text-foreground-light">
+ <p>Only the following IP addresses have access to your database.</p>
+ <p>
+ You may remove all of them to allow all IP addresses to have access to
+ your database.
+ </p>
+ <p>
+ Note: Restrictions only apply to your database, and not to Supabase
+ services
+ </p>
+ </CardDescription>
+ <div className="flex items-center space-x-2">
+ <AllowAllAccessButton
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
+ onClick={setIsAllowingAll}
+ />
+ <DisallowAllAccessButton
+ disabled={isSectionDisabled}
+ disabledTooltip={sectionDisabledReason}
+ onClick={setIsDisallowingAll}
+ />
+ </div>
+ </CardHeader>
+ <CardContent className="py-0">
+ <div className="divide-y">
+ {restrictedIps.map((ip) => {
+ return (
+ <div key={ip} className="py-4 flex items-center justify-between">
+ <div className="flex items-center space-x-5">
+ <Globe size={16} className="text-foreground-lighter" />
+ <Badge>{ipv4Restrictions.includes(ip) ? 'IPv4' : 'IPv6'}</Badge>
+ <p className="text-sm font-mono">{ip}</p>
+ </div>
+ <ButtonTooltip
+ variant="default"
+ disabled={isSectionDisabled}
+ onClick={() => setSelectedRestrictionToRemove(ip)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: getDisabledTooltip(
+ isSectionDisabled,
+ sectionDisabledReason
+ ),
+ },
+ }}
+ >
+ Remove
+ </ButtonTooltip>
+ </div>
+ )
+ })}
+ </div>
+ </CardContent>
+ </>
+ )}
+ </Card>
+ ))}
</PageSectionContent>
</PageSection>
diff --git a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
index 4dea1c1814b..5c1bfb0a53f 100644
--- a/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
+++ b/apps/studio/components/interfaces/Settings/Database/NetworkRestrictions/RemoveRestrictionModal.tsx
@@ -10,7 +10,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useNetworkRestrictionsQuery } from '@/data/network-restrictions/network-restrictions-query'
import { useNetworkRestrictionsApplyMutation } from '@/data/network-restrictions/network-retrictions-apply-mutation'
diff --git a/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx b/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx
index 9648baed9be..d4ee5778de4 100644
--- a/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx
+++ b/apps/studio/components/interfaces/Settings/General/ComplianceConfig/ProjectComplianceMode.tsx
@@ -13,7 +13,7 @@ import {
PageSectionTitle,
} from 'ui-patterns/PageSection'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { InlineLink } from '@/components/ui/InlineLink'
import { useComplianceConfigUpdateMutation } from '@/data/config/project-compliance-config-mutation'
diff --git a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/DNSRecord.tsx b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/DNSRecord.tsx
index 1dee9db314f..15eddc03696 100644
--- a/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/DNSRecord.tsx
+++ b/apps/studio/components/interfaces/Settings/General/CustomDomainConfig/DNSRecord.tsx
@@ -18,5 +18,3 @@ export const DNSRecord = ({ type, name, value }: DNSRecordProps) => {
</div>
)
}
-
-export default DNSRecord
diff --git a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
index d98545f1d66..c6b6c440440 100644
--- a/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
+++ b/apps/studio/components/interfaces/Settings/General/DashboardPreferences.tsx
@@ -21,7 +21,7 @@ import {
FormControl,
FormField,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
PageSection,
@@ -30,7 +30,7 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
-import ShimmeringLoader, { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { DatabaseSelector } from '@/components/ui/DatabaseSelector'
diff --git a/apps/studio/components/interfaces/Settings/General/General.tsx b/apps/studio/components/interfaces/Settings/General/General.tsx
index d660aaa9429..8525945abb4 100644
--- a/apps/studio/components/interfaces/Settings/General/General.tsx
+++ b/apps/studio/components/interfaces/Settings/General/General.tsx
@@ -4,7 +4,7 @@ import { IS_PLATFORM } from 'common'
import { useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Card, CardContent, CardFooter, Form, FormControl, FormField, Input } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import {
diff --git a/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx b/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
index 18831b0c7a8..9a0085353d7 100644
--- a/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
+++ b/apps/studio/components/interfaces/Settings/General/ProjectAccessSection.tsx
@@ -21,7 +21,7 @@ import {
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { summarizeProjectAccess } from './General.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useOrganizationRolesV2Query } from '@/data/organization-members/organization-roles-query'
import { useOrganizationMembersQuery } from '@/data/organizations/organization-members-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
diff --git a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
index 5ab2e71883c..e6e265d6eae 100644
--- a/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
+++ b/apps/studio/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectButton.tsx
@@ -23,7 +23,7 @@ import {
SelectValue,
WarningIcon,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
index fdd9b65f092..cde130f2aab 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureActivity.tsx
@@ -26,7 +26,7 @@ import { DateRangePicker } from '@/components/ui/DateRangePicker'
import { DocsButton } from '@/components/ui/DocsButton'
import Panel from '@/components/ui/Panel'
import { DataPoint } from '@/data/analytics/constants'
-import { mapMultiResponseToAnalyticsData } from '@/data/analytics/infra-monitoring-queries'
+import { mapResponseToAnalyticsData } from '@/data/analytics/infra-monitoring-queries'
import {
InfraMonitoringAttribute,
useInfraMonitoringAttributesQuery,
@@ -166,7 +166,7 @@ export const InfrastructureActivity = () => {
const transformedData = useMemo(() => {
if (!infraMonitoringData) return undefined
- return mapMultiResponseToAnalyticsData(infraMonitoringData, INFRA_ATTRIBUTES, dateFormat)
+ return mapResponseToAnalyticsData(infraMonitoringData, INFRA_ATTRIBUTES, dateFormat)
}, [infraMonitoringData, dateFormat])
const cpuUsageData = transformedData?.max_cpu_usage
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
index 160dce03c17..f8f898ad978 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.tsx
@@ -36,7 +36,7 @@ import { addRegionNodes, generateNodes, getDagreGraphLayout } from './InstanceCo
import { LoadBalancerNode, PrimaryNode, RegionNode, ReplicaNode } from './InstanceNode'
import MapView from './MapView'
import { RestartReplicaConfirmationModal } from './RestartReplicaConfirmationModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { useLoadBalancersQuery } from '@/data/read-replicas/load-balancers-query'
import { Database, useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
index 3ac1a9ae727..a36da60c59e 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx
@@ -19,7 +19,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import {
ERROR_STATES,
@@ -34,7 +34,7 @@ import {
} from './InstanceConfiguration.constants'
import { formatSeconds } from './InstanceConfiguration.utils'
import { metricColor } from './InstanceNode.utils'
-import SparkBar from '@/components/ui/SparkBar'
+import { SparkBar } from '@/components/ui/SparkBar'
import {
DatabaseInitEstimations,
ReplicaInitializationStatus,
diff --git a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
index 61ee64a8a2f..5274d4ac83b 100644
--- a/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
+++ b/apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureInfo.tsx
@@ -26,7 +26,7 @@ import {
ScaffoldSectionContent,
ScaffoldSectionDetail,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useProjectUpgradeEligibilityQuery } from '@/data/config/project-upgrade-eligibility-query'
import { useProjectServiceVersionsQuery } from '@/data/projects/project-service-versions'
import { useReadReplicasQuery } from '@/data/read-replicas/replicas-query'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
index b570d00c3a1..62d1dea190e 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/AWSPrivateLink/AWSPrivateLinkForm.tsx
@@ -17,7 +17,7 @@ import {
SheetSection,
SheetTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
index 1f181eb7617..8450bdee8d9 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/GithubIntegration/GithubSection.tsx
@@ -18,7 +18,7 @@ import { GitHubIntegrationConnectionForm } from './GitHubIntegrationConnectionFo
import { IntegrationConnectionItem } from '@/components/interfaces/Integrations/VercelGithub/IntegrationConnection'
import { EmptyIntegrationConnection } from '@/components/interfaces/Integrations/VercelGithub/IntegrationPanels'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useGitHubAuthorizationQuery } from '@/data/integrations/github-authorization-query'
import { useGitHubConnectionDeleteMutation } from '@/data/integrations/github-connection-delete-mutation'
import {
diff --git a/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx b/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx
index 03d16b8ca75..5422d72ba50 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/IntegrationsSettings.tsx
@@ -1,5 +1,5 @@
import { Card } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { AWSPrivateLinkSection } from './AWSPrivateLink/AWSPrivateLinkSection'
import { GitHubSection } from './GithubIntegration/GithubSection'
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
index d4807abd37c..f8b133fb6ec 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx
@@ -1,6 +1,7 @@
import { zodResolver } from '@hookform/resolvers/zod'
import Link from 'next/link'
-import { useForm } from 'react-hook-form'
+import { useState } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
import { toast } from 'sonner'
import {
Alert,
@@ -16,9 +17,13 @@ import {
Input,
Switch,
} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
import { FormActions } from '@/components/ui/Forms/FormActions'
+import { InlineLink } from '@/components/ui/InlineLink'
import type {
EnvironmentTargets,
Integration,
@@ -26,6 +31,7 @@ import type {
} from '@/data/integrations/integrations.types'
import { useVercelConnectionUpdateMutation } from '@/data/integrations/vercel-connection-update-mutate'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
const VercelIntegrationConnectionForm = ({
@@ -40,6 +46,8 @@ const VercelIntegrationConnectionForm = ({
// NOTE(kamil): Ignore sync targets for Vercel Marketplace as it's not synchronized using integration,
// but through a separate marketplace mechanism. It's not theoretically necessary, but we might have some stale data.
const { data: org } = useSelectedOrganizationQuery()
+ const { data: project } = useSelectedProjectQuery()
+ const isBranchingEnabled = project?.is_branch_enabled === true
const envSyncTargets =
org?.managed_by === 'vercel-marketplace' ? [] : (connection.env_sync_targets ?? [])
@@ -60,34 +68,58 @@ const VercelIntegrationConnectionForm = ({
},
})
+ const [showConfirmation, setShowConfirmation] = useState(false)
+ const [pendingValues, setPendingValues] = useState<z.infer<typeof FormSchema> | null>(null)
+
const { mutate: updateVercelConnection, isPending } = useVercelConnectionUpdateMutation({
onSuccess: () => {
form.reset(form.getValues())
+ setShowConfirmation(false)
+ setPendingValues(null)
toast.success(`Updated Vercel connection`)
},
})
- function onSubmit(data: z.infer<typeof FormSchema>) {
- const {
- environmentVariablesProduction,
- environmentVariablesPreview,
- environmentVariablesDevelopment,
- } = data
+ // Syncing the `preview` or `development` target sends this project's production credentials
+ // (anon and service role keys, database connection strings) to those Vercel environments. Watch
+ // the toggles so we can warn inline and gate the save behind a confirmation.
+ const [syncPreview, syncDevelopment] = useWatch({
+ control: form.control,
+ name: ['environmentVariablesPreview', 'environmentVariablesDevelopment'],
+ })
+ const isSyncingNonProdEnvs = syncPreview || syncDevelopment
- const envSyncTargets: string[] = []
+ const selectedNonProdTargets: string[] = []
+ if (pendingValues?.environmentVariablesPreview) selectedNonProdTargets.push('Preview')
+ if (pendingValues?.environmentVariablesDevelopment) selectedNonProdTargets.push('Development')
- if (environmentVariablesProduction) envSyncTargets.push('production')
- if (environmentVariablesPreview) envSyncTargets.push('preview')
- if (environmentVariablesDevelopment) envSyncTargets.push('development')
+ function performUpdate(data: z.infer<typeof FormSchema>) {
+ const targets: EnvironmentTargets[] = []
+
+ if (data.environmentVariablesProduction) targets.push('production')
+ if (data.environmentVariablesPreview) targets.push('preview')
+ if (data.environmentVariablesDevelopment) targets.push('development')
updateVercelConnection({
id: connection.id,
- envSyncTargets: envSyncTargets as EnvironmentTargets[],
+ envSyncTargets: targets,
publicEnvVarPrefix: data.publicEnvVarPrefix?.trim(),
organizationIntegrationId: integration.id,
})
}
+ function onSubmit(data: z.infer<typeof FormSchema>) {
+ // Always confirm when Preview/Development sync is enabled to discourage leaking production
+ // credentials into preview deployments and steer users toward Branching instead.
+ if (data.environmentVariablesPreview || data.environmentVariablesDevelopment) {
+ setPendingValues(data)
+ setShowConfirmation(true)
+ return
+ }
+
+ performUpdate(data)
+ }
+
const vercelConnectionFormId = `vercel-connection-form-${connection.id}`
return (
@@ -119,76 +151,127 @@ const VercelIntegrationConnectionForm = ({
</Alert>
) : (
<div>
- <h5 className="text-foreground ">
- Sync environment variables for selected target environments
- </h5>
+ <div className="space-y-1 mb-4">
+ <h5 className="text-foreground">Sync environment variables to Vercel</h5>
+ <p className="text-sm text-foreground-light">
+ Choose which Vercel environments receive this project's{' '}
+ <span className="text-foreground">production</span> credentials. Most projects
+ only need <code>production</code>.
+ </p>
+ <p className="text-sm text-foreground-light">
+ With{' '}
+ <InlineLink href={`/project/${project?.ref}/branches`}>Branching</InlineLink>{' '}
+ enabled, leave Preview and Development off: Branching gives each preview branch
+ its own database and syncs those credentials to your Vercel Preview deployments.
+ </p>
+ </div>
- <FormField
- control={form.control}
- name="environmentVariablesProduction"
- render={({ field }) => (
- <FormItem className="space-y-0 flex gap-x-4">
- <FormControl>
- <Switch
- disabled={disabled}
- className="mt-1"
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div>
- <FormLabel className="!text">Production</FormLabel>
- <FormDescription className="text-xs text-foreground-lighter">
- Sync environment variables for <code>production</code> environment.
- </FormDescription>
- </div>
- </FormItem>
+ <div className="space-y-4">
+ <FormField
+ control={form.control}
+ name="environmentVariablesProduction"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="flex-row-reverse"
+ label="Production"
+ description={
+ <>
+ Syncs to the Vercel <code>production</code> env.
+ </>
+ }
+ >
+ <FormControl>
+ <Switch
+ disabled={disabled}
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ </FormItemLayout>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="environmentVariablesPreview"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="flex-row-reverse"
+ label="Preview"
+ description={
+ <>
+ Syncs to the Vercel <code>preview</code> env.
+ </>
+ }
+ >
+ <FormControl>
+ <Switch
+ disabled={disabled}
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ </FormItemLayout>
+ )}
+ />
+ <FormField
+ control={form.control}
+ name="environmentVariablesDevelopment"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="flex-row-reverse"
+ label="Development"
+ description={
+ <>
+ Syncs to the Vercel <code>development</code> env.
+ </>
+ }
+ >
+ <FormControl>
+ <Switch
+ disabled={disabled}
+ checked={field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ </FormItemLayout>
+ )}
+ />
+
+ {isSyncingNonProdEnvs && (
+ <Admonition
+ type="warning"
+ title={
+ isBranchingEnabled
+ ? 'Not recommended with Branching'
+ : 'These environments will use production credentials'
+ }
+ >
+ <p>
+ Preview and Development sync your production credentials, including the
+ service role key and database password, to those Vercel environments.
+ </p>
+ {isBranchingEnabled ? (
+ <p>
+ <InlineLink href={`/project/${project?.ref}/branches`}>
+ Branching
+ </InlineLink>{' '}
+ already provisions isolated credentials for each preview branch. With
+ Preview enabled, deployments use production credentials until a branch
+ finishes provisioning, which can affect production data. We recommend
+ leaving Preview and Development off.
+ </p>
+ ) : (
+ <p>
+ To give preview deployments their own isolated credentials, use{' '}
+ <InlineLink href={`/project/${project?.ref}/branches`}>
+ Branching
+ </InlineLink>{' '}
+ instead.
+ </p>
+ )}
+ </Admonition>
)}
- />
- <FormField
- control={form.control}
- name="environmentVariablesPreview"
- render={({ field }) => (
- <FormItem className="space-y-0 flex gap-x-4">
- <FormControl>
- <Switch
- disabled={disabled}
- className="mt-1"
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div>
- <FormLabel className="!text">Preview</FormLabel>
- <FormDescription className="text-xs text-foreground-lighter">
- Sync environment variables for <code>preview</code> environment.
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
- <FormField
- control={form.control}
- name="environmentVariablesDevelopment"
- render={({ field }) => (
- <FormItem className="space-y-0 flex gap-x-4">
- <FormControl>
- <Switch
- disabled={disabled}
- className="mt-1"
- checked={field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- <div>
- <FormLabel className="!text">Development</FormLabel>
- <FormDescription className="text-xs text-foreground-lighter">
- Sync environment variables for <code>development</code> environment.
- </FormDescription>
- </div>
- </FormItem>
- )}
- />
+ </div>
</div>
)}
</div>
@@ -268,6 +351,49 @@ const VercelIntegrationConnectionForm = ({
/>
</div>
</form>
+
+ <ConfirmationModal
+ visible={showConfirmation}
+ variant="warning"
+ size="medium"
+ loading={isPending}
+ title="Sync production credentials?"
+ confirmLabel="Sync credentials"
+ confirmLabelLoading="Saving"
+ onCancel={() => {
+ setShowConfirmation(false)
+ setPendingValues(null)
+ }}
+ onConfirm={() => {
+ if (pendingValues) performUpdate(pendingValues)
+ }}
+ alert={{
+ title: 'These environments will use production credentials',
+ description:
+ 'Including the project ref, API URL, anon and service role keys, and database connection strings.',
+ }}
+ >
+ <div className="space-y-3 text-sm text-foreground-light">
+ <p>
+ This syncs your production credentials to the{' '}
+ <span className="text-foreground">{selectedNonProdTargets.join(' and ')}</span>{' '}
+ environment{selectedNonProdTargets.length > 1 ? 's' : ''} of your connected Vercel
+ project.
+ </p>
+ {isBranchingEnabled ? (
+ <p>
+ Branching already provisions isolated credentials for each preview branch. With this
+ enabled, deployments use production credentials until a branch finishes provisioning,
+ which can affect production data. We recommend leaving it off.
+ </p>
+ ) : (
+ <p>
+ To use isolated credentials for preview deployments instead, enable{' '}
+ <InlineLink href={`/project/${project?.ref}/branches`}>Branching</InlineLink>.
+ </p>
+ )}
+ </div>
+ </ConfirmationModal>
</Form>
)
}
diff --git a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
index 4b07624a1fd..7e0c4a775ff 100644
--- a/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
+++ b/apps/studio/components/interfaces/Settings/Integrations/VercelIntegration/VercelSection.tsx
@@ -22,7 +22,7 @@ import {
IntegrationInstallation,
} from '@/components/interfaces/Integrations/VercelGithub/IntegrationPanels'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useOrgIntegrationsQuery } from '@/data/integrations/integrations-query-org-only'
import { useIntegrationsVercelInstalledConnectionDeleteMutation } from '@/data/integrations/integrations-vercel-installed-connection-delete-mutation'
import { useVercelProjectsQuery } from '@/data/integrations/integrations-vercel-projects-query'
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
index a004c1a827f..8dbed9ecbb8 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogSelectionRenderers/DefaultPreviewSelectionRenderer.tsx
@@ -11,7 +11,7 @@ import {
DropdownMenuTrigger,
Separator,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { ErrorCodeDialog } from '../ErrorCodeDialog'
import type { LogSearchCallback, PreviewLogData } from '../Logs.types'
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
index 6d10869354f..e7f65e2e3ee 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogTable.tsx
@@ -512,7 +512,7 @@ export const LogTable = ({
)}
<Button
title="run-logs-query"
- variant={hasEditorValue ? 'primary' : 'alternative'}
+ variant="primary"
disabled={!hasEditorValue}
onClick={onRun}
iconRight={<Play size={12} />}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx b/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
index 1429d103166..ac160baa964 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.SavedQueriesItem.tsx
@@ -2,10 +2,11 @@ import { useParams } from 'common'
import { SqlEditor } from 'icons'
import { Edit, Trash } from 'lucide-react'
import { useRouter } from 'next/router'
+import { parseAsString, useQueryStates } from 'nuqs'
import { useState } from 'react'
import { toast } from 'sonner'
import { DropdownMenuItem, DropdownMenuSeparator } from 'ui'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
import { UpdateSavedQueryModal } from './Logs.UpdateSavedQueryModal'
import { LogsSidebarItem } from './SidebarV2/SidebarItem'
@@ -24,15 +25,26 @@ interface SavedQueriesItemProps {
}
}
-const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
+export const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
const router = useRouter()
- const { ref } = useParams()
+ const { ref, queryId } = useParams()
const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false)
const [showUpdateModal, setShowUpdateModal] = useState<boolean>(false)
+ const [_, setParams] = useQueryStates({
+ queryId: parseAsString.withDefault(''),
+ q: parseAsString.withDefault(''),
+ s: parseAsString.withDefault(''),
+ its: parseAsString.withDefault(''),
+ ite: parseAsString.withDefault(''),
+ })
+
const { mutate: deleteContent } = useContentDeleteMutation({
- onSuccess: () => {
+ onSuccess: (_, vars) => {
setShowConfirmModal(false)
+ if (queryId && vars.ids.includes(queryId)) {
+ setParams({ queryId: '', q: '', s: '', its: '', ite: '' })
+ }
toast.success('Successfully deleted query')
},
onError: (error) => {
@@ -94,15 +106,13 @@ const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
</DropdownMenuItem>
</>
}
- ></LogsSidebarItem>
+ />
<ConfirmationModal
variant="destructive"
visible={showConfirmModal}
confirmLabel="Delete query"
title="Confirm to delete saved query"
- onCancel={() => {
- setShowConfirmModal(false)
- }}
+ onCancel={() => setShowConfirmModal(false)}
onConfirm={onConfirmDelete}
>
<p className="text-sm text-foreground-light">
@@ -121,5 +131,3 @@ const SavedQueriesItem = ({ item }: SavedQueriesItemProps) => {
</>
)
}
-
-export default SavedQueriesItem
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
index 55103491782..ab6671faf79 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.constants.ts
@@ -286,8 +286,159 @@ limit 100;
},
]
+// ClickHouse rewrites of the custom BigQuery templates above, used when the OTEL
+// logs engine is on. Keyed by template label. Simple-mode templates are plain
+// event_message searches that work unchanged, so they have no entry here.
+const OTEL_TEMPLATE_SEARCH_STRINGS: Record<string, string> = {
+ 'Commits By User': `select
+ log_attributes['parsed.user_name'] as user_name,
+ count() as count
+from logs
+where source = 'postgres_logs'
+ and event_message like '%COMMIT%'
+group by user_name
+order by count desc
+limit 100`,
+ 'Metadata IP': `select
+ timestamp,
+ log_attributes['request.headers.x_real_ip'] as x_real_ip
+from logs
+where source = 'edge_logs'
+ and log_attributes['request.headers.x_real_ip'] != ''
+order by timestamp desc
+limit 100`,
+ 'Requests by Geography': `select
+ log_attributes['request.cf.country'] as country,
+ count() as count
+from logs
+where source = 'edge_logs'
+group by country
+order by count desc
+limit 100`,
+ 'Slow Response Time': `select
+ timestamp,
+ event_message,
+ toInt32OrZero(log_attributes['response.origin_time']) as origin_time
+from logs
+where source = 'edge_logs'
+ and toInt32OrZero(log_attributes['response.origin_time']) > 1000
+order by timestamp desc
+limit 100`,
+ '500 Request Codes': `select
+ timestamp,
+ event_message,
+ toInt32OrZero(log_attributes['response.status_code']) as status_code
+from logs
+where source = 'edge_logs'
+ and toInt32OrZero(log_attributes['response.status_code']) >= 500
+order by timestamp desc
+limit 100`,
+ 'Top Paths': `select
+ log_attributes['request.path'] as path,
+ log_attributes['request.search'] as params,
+ count() as c
+from logs
+where source = 'edge_logs'
+group by path, params
+order by c desc
+limit 100`,
+ 'REST Requests': `select
+ timestamp,
+ event_message
+from logs
+where source = 'edge_logs'
+ and log_attributes['request.path'] like '%rest/v1%'
+order by timestamp desc
+limit 100`,
+ Errors: `select
+ timestamp,
+ log_attributes['parsed.error_severity'] as error_severity,
+ event_message
+from logs
+where source = 'postgres_logs'
+ and log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+order by timestamp desc
+limit 100`,
+ 'Error Count by User': `select
+ count() as count,
+ log_attributes['parsed.user_name'] as user_name,
+ log_attributes['parsed.error_severity'] as error_severity
+from logs
+where source = 'postgres_logs'
+ and log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+group by user_name, error_severity
+order by count desc
+limit 100`,
+ 'Auth Endpoint Events': `select
+ timestamp,
+ event_message
+from logs
+where source = 'auth_logs'
+ and match(event_message, 'level.{3}(info|warning|error|fatal)')
+order by timestamp desc
+limit 100`,
+ 'Auth Audit Logs': `select
+ timestamp,
+ event_message,
+ log_attributes
+from logs
+where source = 'auth_audit_logs'
+order by timestamp desc
+limit 10`,
+ 'Storage Object Requests': `select
+ log_attributes['request.method'] as http_verb,
+ log_attributes['request.path'] as filepath,
+ count() as num_requests
+from logs
+where source = 'edge_logs'
+ and log_attributes['request.path'] like '%storage/v1/object/%'
+group by http_verb, filepath
+order by num_requests desc
+limit 100`,
+ 'Storage Egress Requests': `select
+ log_attributes['request.method'] as http_verb,
+ log_attributes['request.path'] as filepath,
+ (log_attributes['response.headers.cf_cache_status'] = 'HIT') as cached,
+ count() as num_requests
+from logs
+where source = 'edge_logs'
+ and (
+ log_attributes['request.path'] like '%storage/v1/object/%'
+ or log_attributes['request.path'] like '%storage/v1/render/%'
+ )
+ and log_attributes['request.method'] = 'GET'
+group by http_verb, filepath, cached
+order by num_requests desc
+limit 100`,
+ 'Storage Top Cache Misses': `select
+ log_attributes['request.path'] as path,
+ log_attributes['request.search'] as search,
+ count() as count
+from logs
+where source = 'edge_logs'
+ and startsWith(log_attributes['request.path'], '/storage/v1/object')
+ and log_attributes['request.method'] = 'GET'
+ and log_attributes['response.headers.cf_cache_status'] in ('MISS', 'NONE/UNKNOWN', 'EXPIRED', 'BYPASS', 'DYNAMIC')
+group by path, search
+order by count desc
+limit 100`,
+}
+
+/**
+ * Returns the log templates for the active engine. On the OTEL/ClickHouse engine
+ * the custom templates, written for BigQuery, are swapped for their ClickHouse
+ * rewrites; everything else is returned unchanged.
+ */
+export function getLogsTemplates(useOtel: boolean): LogTemplate[] {
+ if (!useOtel) return TEMPLATES
+ return TEMPLATES.map((template) => {
+ const otelSearchString = template.label && OTEL_TEMPLATE_SEARCH_STRINGS[template.label]
+ return otelSearchString ? { ...template, searchString: otelSearchString } : template
+ })
+}
+
type SqlFilterFn = (value: any) => SafeLogSqlFragment
-type SqlFilterEntry = SafeLogSqlFragment | SqlFilterFn
+export type SqlFilterEntry = SafeLogSqlFragment | SqlFilterFn
const _SQL_FILTER_COMMON: Record<string, SqlFilterEntry> = {
search_query: (value: string) =>
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.test.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.test.ts
new file mode 100644
index 00000000000..3d234244ab5
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.test.ts
@@ -0,0 +1,102 @@
+import { describe, expect, it } from 'vitest'
+
+import { otelFieldsFromKeys, toOtelFieldSchemas, type LogFieldSchema } from './Logs.fieldReference'
+
+const edgeSchema: LogFieldSchema = {
+ name: 'API Gateway',
+ reference: 'edge_logs',
+ fields: [
+ { path: 'id', type: 'string' },
+ { path: 'timestamp', type: 'datetime' },
+ { path: 'event_message', type: 'string' },
+ { path: 'identifier', type: 'string' },
+ { path: 'metadata.request.method', type: 'string' },
+ { path: 'metadata.request.cf.asn', type: 'number' },
+ ],
+}
+
+describe('toOtelFieldSchemas', () => {
+ it('keeps source name and reference', () => {
+ const [otel] = toOtelFieldSchemas([edgeSchema])
+ expect(otel.name).toBe('API Gateway')
+ expect(otel.reference).toBe('edge_logs')
+ })
+
+ it('keeps id/timestamp/event_message as real columns and adds source + severity_text', () => {
+ const [otel] = toOtelFieldSchemas([edgeSchema])
+ const paths = otel.fields.map((f) => f.path)
+ expect(paths.slice(0, 5)).toEqual([
+ 'id',
+ 'timestamp',
+ 'event_message',
+ 'severity_text',
+ 'source',
+ ])
+ })
+
+ it('moves non-column fields into log_attributes, dropping the metadata root', () => {
+ const [otel] = toOtelFieldSchemas([edgeSchema])
+ const paths = otel.fields.map((f) => f.path)
+ expect(paths).toContain("log_attributes['identifier']")
+ expect(paths).toContain("log_attributes['request.method']")
+ expect(paths).toContain("log_attributes['request.cf.asn']")
+ expect(paths).not.toContain('metadata.request.method')
+ expect(paths).not.toContain('identifier')
+ })
+
+ it('preserves the original field type for casting hints', () => {
+ const [otel] = toOtelFieldSchemas([edgeSchema])
+ const asn = otel.fields.find((f) => f.path === "log_attributes['request.cf.asn']")
+ expect(asn?.type).toBe('number')
+ })
+})
+
+describe('otelFieldsFromKeys', () => {
+ it('starts with the five base OTEL columns', () => {
+ const fields = otelFieldsFromKeys(['request.cf.asn'])
+ const paths = fields.map((f) => f.path)
+ expect(paths.slice(0, 5)).toEqual([
+ 'id',
+ 'timestamp',
+ 'event_message',
+ 'severity_text',
+ 'source',
+ ])
+ })
+
+ it('maps discovered keys to log_attributes lookups', () => {
+ const fields = otelFieldsFromKeys(['request.cf.asn', 'response.headers.x-foo'])
+ const paths = fields.map((f) => f.path)
+ expect(paths).toContain("log_attributes['request.cf.asn']")
+ expect(paths).toContain("log_attributes['response.headers.x-foo']")
+ })
+
+ it('excludes keys that are real OTEL columns', () => {
+ const fields = otelFieldsFromKeys([
+ 'id',
+ 'timestamp',
+ 'event_message',
+ 'severity_text',
+ 'source',
+ 'trace_id',
+ ])
+ const paths = fields.map((f) => f.path)
+ for (const column of ['id', 'timestamp', 'event_message', 'severity_text', 'source']) {
+ expect(paths.filter((p) => p === column)).toHaveLength(1)
+ expect(paths).not.toContain(`log_attributes['${column}']`)
+ }
+ expect(paths).toContain("log_attributes['trace_id']")
+ })
+
+ it('escapes quotes and backslashes in discovered keys', () => {
+ const fields = otelFieldsFromKeys(["weird'key", 'back\\slash'])
+ const paths = fields.map((f) => f.path)
+ expect(paths).toContain("log_attributes['weird''key']")
+ expect(paths).toContain("log_attributes['back\\\\slash']")
+ })
+
+ it('returns only base fields for an empty key list', () => {
+ const fields = otelFieldsFromKeys([])
+ expect(fields).toHaveLength(5)
+ })
+})
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.ts
new file mode 100644
index 00000000000..3f89c77b372
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.fieldReference.ts
@@ -0,0 +1,42 @@
+import { logConstants } from 'shared-data'
+
+export type LogFieldSchema = (typeof logConstants.schemas)[number]
+type LogField = LogFieldSchema['fields'][number]
+
+const OTEL_BASE_FIELDS: LogField[] = [
+ { path: 'id', type: 'string' },
+ { path: 'timestamp', type: 'datetime' },
+ { path: 'event_message', type: 'string' },
+ { path: 'severity_text', type: 'string' },
+ { path: 'source', type: 'string' },
+]
+
+const OTEL_COLUMN_PATHS = new Set(OTEL_BASE_FIELDS.map(({ path }) => path))
+
+const toOtelAttributeKey = (path: string) => path.replace(/^metadata\./, '')
+
+const toLogAttributePath = (key: string) =>
+ `log_attributes['${key.replace(/\\/g, '\\\\').replace(/'/g, "''")}']`
+
+const toOtelFieldSchema = (schema: LogFieldSchema): LogFieldSchema => ({
+ ...schema,
+ fields: [
+ ...OTEL_BASE_FIELDS,
+ ...schema.fields
+ .filter((field) => !OTEL_COLUMN_PATHS.has(field.path))
+ .map((field) => ({
+ path: toLogAttributePath(toOtelAttributeKey(field.path)),
+ type: field.type,
+ })),
+ ],
+})
+
+export const toOtelFieldSchemas = (schemas: LogFieldSchema[]): LogFieldSchema[] =>
+ schemas.map(toOtelFieldSchema)
+
+export function otelFieldsFromKeys(keys: string[]): LogFieldSchema['fields'] {
+ const attributeFields = keys
+ .filter((key) => !OTEL_COLUMN_PATHS.has(key))
+ .map((key) => ({ path: toLogAttributePath(key), type: 'string' as const }))
+ return [...OTEL_BASE_FIELDS, ...attributeFields]
+}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.templates.test.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.templates.test.ts
new file mode 100644
index 00000000000..f0ee03d2768
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.templates.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+
+import { getLogsTemplates, TEMPLATES } from './Logs.constants'
+
+const customTemplates = TEMPLATES.filter((t) => t.mode === 'custom')
+const bigQueryConstructs =
+ /unnest|cross join|left join|regexp_contains|cast\(\s*timestamp|count\(\*\)/i
+
+describe('getLogsTemplates', () => {
+ it('returns the original templates when the OTEL engine is off', () => {
+ expect(getLogsTemplates(false)).toBe(TEMPLATES)
+ })
+
+ it('gives every custom template a ClickHouse rewrite when OTEL is on', () => {
+ const otel = getLogsTemplates(true)
+ for (const template of customTemplates) {
+ const rewritten = otel.find((t) => t.label === template.label)
+ expect(rewritten, `missing OTEL rewrite for "${template.label}"`).toBeDefined()
+ expect(
+ rewritten!.searchString,
+ `"${template.label}" was not rewritten for ClickHouse`
+ ).not.toBe(template.searchString)
+ }
+ })
+
+ it('produces ClickHouse SQL with no BigQuery constructs', () => {
+ const otel = getLogsTemplates(true)
+ for (const template of otel.filter((t) => t.mode === 'custom')) {
+ expect(template.searchString, `"${template.label}" still targets logs table`).toMatch(
+ /from logs/i
+ )
+ expect(template.searchString, `"${template.label}" filters by source`).toMatch(/source\s*=/i)
+ expect(
+ template.searchString,
+ `"${template.label}" still contains a BigQuery construct`
+ ).not.toMatch(bigQueryConstructs)
+ }
+ })
+
+ it('leaves simple-mode templates unchanged on the OTEL engine', () => {
+ const otel = getLogsTemplates(true)
+ for (const template of TEMPLATES.filter((t) => t.mode === 'simple')) {
+ const same = otel.find((t) => t.label === template.label)
+ expect(same!.searchString).toBe(template.searchString)
+ }
+ })
+
+ it('maps nested BigQuery fields to the right log_attributes keys', () => {
+ const otel = getLogsTemplates(true)
+ const byLabel = (label: string) => otel.find((t) => t.label === label)!.searchString
+
+ expect(byLabel('Requests by Geography')).toContain("log_attributes['request.cf.country']")
+ expect(byLabel('Metadata IP')).toContain("log_attributes['request.headers.x_real_ip']")
+ expect(byLabel('Errors')).toContain("log_attributes['parsed.error_severity']")
+ expect(byLabel('Slow Response Time')).toContain(
+ "toInt32OrZero(log_attributes['response.origin_time'])"
+ )
+ })
+})
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
index f29dc87a703..38e6d799807 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.types.ts
@@ -3,7 +3,7 @@ import React from 'react'
import type { Datum } from '@/components/ui/Charts/Charts.types'
-interface Metadata {
+export interface Metadata {
[key: string]: string | number | Object | Object[] | any
}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.test.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.test.ts
new file mode 100644
index 00000000000..cddce409337
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.test.ts
@@ -0,0 +1,804 @@
+import { describe, expect, it } from 'vitest'
+
+import { LogsTableName } from './Logs.constants'
+import {
+ genChartQueryOtel,
+ genCountQueryOtel,
+ genDefaultQueryOtel,
+ genSingleLogQueryOtel,
+ mapOtelPreviewRow,
+ mapOtelSingleLogToLegacy,
+ otelTimestampToMicros,
+} from './Logs.utils.otel'
+import type { OtelLogRow } from '@/data/logs/otel-inspection.utils'
+import { formatSql } from '@/lib/formatSql'
+
+// Format generated SQL so snapshots are deterministic and full strings can be compared.
+const fmt = (fragment: string) => formatSql(fragment)
+
+describe('genDefaultQueryOtel', () => {
+ it('targets the OTEL logs table by source and aliases postgres columns', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.POSTGRES, {}, 100))).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['postgres_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['parsed.error_severity'] as error_severity,
+ log_attributes['parsed.detail'] as detail,
+ log_attributes['parsed.hint'] as hint
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('aliases edge columns to the leaf names the api renderer reads', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.EDGE, {}, 50))).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['edge_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['request.method'] as method,
+ log_attributes['request.path'] as path,
+ log_attributes['request.search'] as search,
+ log_attributes['response.status_code'] as status_code
+ from
+ logs
+ where
+ source = 'edge_logs'
+ order by
+ timestamp desc
+ limit
+ 50"
+ `)
+ })
+
+ it('maps pg_cron onto postgres_logs with the cron predicate', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.PG_CRON, {}))).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['pg_cron_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['parsed.error_severity'] as error_severity,
+ log_attributes['parsed.query'] as query
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ and (
+ log_attributes['parsed.application_name'] = 'pg_cron'
+ or event_message ilike '%cron job%'
+ )
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('selects only id/timestamp/event_message for tables without a column map', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.MULTIGRES, {}))).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['multigres_logs']
+ select
+ id,
+ timestamp,
+ event_message
+ from
+ logs
+ where
+ source = 'multigres_logs'
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('translates an edge status_code filter to a ClickHouse predicate', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.EDGE, { status_code: { error: true } })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['edge_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['request.method'] as method,
+ log_attributes['request.path'] as path,
+ log_attributes['request.search'] as search,
+ log_attributes['response.status_code'] as status_code
+ from
+ logs
+ where
+ source = 'edge_logs'
+ and (
+ toInt32OrZero (log_attributes['response.status_code']) between 500 and 599
+ )
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('translates a search_query filter to a case-insensitive event_message match', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.POSTGRES, { search_query: 'deadlock' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['postgres_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['parsed.error_severity'] as error_severity,
+ log_attributes['parsed.detail'] as detail,
+ log_attributes['parsed.hint'] as hint
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ and (event_message ilike '%deadlock%')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('uses the shared auth severity condition for the severity.error filter', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.AUTH, { severity: { error: true } })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['auth_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['level'] as level,
+ log_attributes['status'] as status,
+ log_attributes['path'] as path,
+ log_attributes['msg'] as msg,
+ log_attributes['error'] as error
+ from
+ logs
+ where
+ source = 'auth_logs'
+ and (
+ log_attributes['level'] in ('error', 'fatal')
+ or toInt32OrZero (log_attributes['status']) >= 500
+ )
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('falls back to a log_attributes equality for unknown filter keys', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.AUTH, { trace_id: 'abc-123' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['auth_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['level'] as level,
+ log_attributes['status'] as status,
+ log_attributes['path'] as path,
+ log_attributes['msg'] as msg,
+ log_attributes['error'] as error
+ from
+ logs
+ where
+ source = 'auth_logs'
+ and (log_attributes['trace_id'] = 'abc-123')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('combines multiple filters with AND alongside the source predicate', () => {
+ expect(
+ fmt(
+ genDefaultQueryOtel(LogsTableName.EDGE, {
+ status_code: { error: true },
+ method: { get: true },
+ })
+ )
+ ).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['edge_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['request.method'] as method,
+ log_attributes['request.path'] as path,
+ log_attributes['request.search'] as search,
+ log_attributes['response.status_code'] as status_code
+ from
+ logs
+ where
+ source = 'edge_logs'
+ and (
+ toInt32OrZero (log_attributes['response.status_code']) between 500 and 599
+ )
+ and (log_attributes['request.method'] = 'GET')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+})
+
+describe('genCountQueryOtel', () => {
+ it('counts rows for the source with translated auth filters', () => {
+ expect(fmt(genCountQueryOtel(LogsTableName.AUTH, { status_code: { server_error: true } })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Count Query (otel) ['auth_logs']
+ select
+ count() as count
+ from
+ logs
+ where
+ source = 'auth_logs'
+ and (
+ toInt32OrZero (log_attributes['status']) between 500 and 599
+ )"
+ `)
+ })
+})
+
+describe('genChartQueryOtel', () => {
+ const params = {
+ iso_timestamp_start: '2024-01-01T00:00:00.000Z',
+ iso_timestamp_end: '2024-01-01T00:30:00.000Z',
+ }
+
+ it('buckets by minute for short ranges and emits ok/error/warning counts', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.EDGE, params, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['edge_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ toInt32OrZero (log_attributes['response.status_code']) >= 500
+ )
+ or (
+ toInt32OrZero (log_attributes['response.status_code']) between 400 and 499
+ )
+ )
+ ) as ok_count,
+ countIf (
+ toInt32OrZero (log_attributes['response.status_code']) >= 500
+ ) as error_count,
+ countIf (
+ toInt32OrZero (log_attributes['response.status_code']) between 400 and 499
+ ) as warning_count
+ from
+ logs
+ where
+ source = 'edge_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('filters the function logs chart by the metadata.function_id override key', () => {
+ expect(
+ fmt(genChartQueryOtel(LogsTableName.FUNCTIONS, params, { 'metadata.function_id': 'abc-123' }))
+ ).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['function_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (log_attributes['level'] in ('error', 'fatal'))
+ or (log_attributes['level'] = 'warning')
+ )
+ ) as ok_count,
+ countIf (log_attributes['level'] in ('error', 'fatal')) as error_count,
+ countIf (log_attributes['level'] = 'warning') as warning_count
+ from
+ logs
+ where
+ source = 'function_logs'
+ and (log_attributes['function_id'] = 'abc-123')
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('buckets by hour for ranges longer than 12 hours', () => {
+ expect(
+ fmt(
+ genChartQueryOtel(
+ LogsTableName.POSTGRES,
+ {
+ iso_timestamp_start: '2024-01-01T00:00:00.000Z',
+ iso_timestamp_end: '2024-01-02T00:00:00.000Z',
+ },
+ {}
+ )
+ )
+ ).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['postgres_logs']
+ select
+ toStartOfHour (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+ )
+ or (
+ log_attributes['parsed.error_severity'] = 'WARNING'
+ )
+ )
+ ) as ok_count,
+ countIf (
+ log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+ ) as error_count,
+ countIf (
+ log_attributes['parsed.error_severity'] = 'WARNING'
+ ) as warning_count
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('classifies auth severity by level and status, matching the BigQuery conditions', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.AUTH, params, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['auth_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ log_attributes['level'] in ('error', 'fatal')
+ or toInt32OrZero (log_attributes['status']) >= 500
+ )
+ or (
+ log_attributes['level'] = 'warning'
+ or toInt32OrZero (log_attributes['status']) between 400 and 499
+ )
+ )
+ ) as ok_count,
+ countIf (
+ log_attributes['level'] in ('error', 'fatal')
+ or toInt32OrZero (log_attributes['status']) >= 500
+ ) as error_count,
+ countIf (
+ log_attributes['level'] = 'warning'
+ or toInt32OrZero (log_attributes['status']) between 400 and 499
+ ) as warning_count
+ from
+ logs
+ where
+ source = 'auth_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('uses JSONExtractString for multigres severity (event_message is a JSON string)', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.MULTIGRES, params, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['multigres_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ JSONExtractString (event_message, 'level') in ('ERROR', 'FATAL', 'PANIC')
+ )
+ or (
+ JSONExtractString (event_message, 'level') in ('WARN', 'WARNING')
+ )
+ )
+ ) as ok_count,
+ countIf (
+ JSONExtractString (event_message, 'level') in ('ERROR', 'FATAL', 'PANIC')
+ ) as error_count,
+ countIf (
+ JSONExtractString (event_message, 'level') in ('WARN', 'WARNING')
+ ) as warning_count
+ from
+ logs
+ where
+ source = 'multigres_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('counts pg_cron errors but never warnings, matching BigQuery (no pg_cron warning case)', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.PG_CRON, params, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['pg_cron_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+ )
+ or (0)
+ )
+ ) as ok_count,
+ countIf (
+ log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+ ) as error_count,
+ countIf (0) as warning_count
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ and (
+ log_attributes['parsed.application_name'] = 'pg_cron'
+ or event_message ilike '%cron job%'
+ )
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('emits constant-false severity for tables without a severity concept', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.STORAGE, params, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['storage_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (0)
+ or (0)
+ )
+ ) as ok_count,
+ countIf (0) as error_count,
+ countIf (0) as warning_count
+ from
+ logs
+ where
+ source = 'storage_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+
+ it('defaults the chart bucket to minute when no time range is given', () => {
+ expect(fmt(genChartQueryOtel(LogsTableName.EDGE, {}, {}))).toMatchInlineSnapshot(`
+ "-- Logs Chart Query (otel) ['edge_logs']
+ select
+ toStartOfMinute (timestamp) as timestamp,
+ countIf (
+ not (
+ (
+ toInt32OrZero (log_attributes['response.status_code']) >= 500
+ )
+ or (
+ toInt32OrZero (log_attributes['response.status_code']) between 400 and 499
+ )
+ )
+ ) as ok_count,
+ countIf (
+ toInt32OrZero (log_attributes['response.status_code']) >= 500
+ ) as error_count,
+ countIf (
+ toInt32OrZero (log_attributes['response.status_code']) between 400 and 499
+ ) as warning_count
+ from
+ logs
+ where
+ source = 'edge_logs'
+ group by
+ timestamp
+ order by
+ timestamp asc"
+ `)
+ })
+})
+
+describe('genSingleLogQueryOtel', () => {
+ it('fetches a single row by id with raw attributes', () => {
+ expect(fmt(genSingleLogQueryOtel('123e4567-e89b-12d3-a456-426614174000')))
+ .toMatchInlineSnapshot(`
+ "-- Single Log Query (otel)
+ select
+ id,
+ timestamp,
+ event_message,
+ source,
+ severity_text,
+ log_attributes
+ from
+ logs
+ where
+ id = '123e4567-e89b-12d3-a456-426614174000'
+ limit
+ 1"
+ `)
+ })
+
+ it('rejects a non-uuid id', () => {
+ expect(() => genSingleLogQueryOtel("1' OR '1'='1")).toThrow('Invalid logId')
+ })
+})
+
+describe('OTEL filter translation', () => {
+ it('translates the database filter for postgres', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.POSTGRES, { database: 'replica-1' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['postgres_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['identifier'] as identifier,
+ log_attributes['parsed.error_severity'] as error_severity,
+ log_attributes['parsed.detail'] as detail,
+ log_attributes['parsed.hint'] as hint
+ from
+ logs
+ where
+ source = 'postgres_logs'
+ and (log_attributes['identifier'] = 'replica-1')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('translates the database filter for supavisor', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.SUPAVISOR, { database: 'proj' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['supavisor_logs']
+ select
+ id,
+ timestamp,
+ event_message
+ from
+ logs
+ where
+ source = 'supavisor_logs'
+ and (log_attributes['project'] like 'proj%')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('drops the metadata root from an override key for function logs', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.FUNCTIONS, { 'metadata.function_id': 'abc-123' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['function_logs']
+ select
+ id,
+ timestamp,
+ event_message,
+ log_attributes['event_type'] as event_type,
+ log_attributes['function_id'] as function_id,
+ log_attributes['execution_id'] as execution_id,
+ log_attributes['level'] as level
+ from
+ logs
+ where
+ source = 'function_logs'
+ and (log_attributes['function_id'] = 'abc-123')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('translates the etl pipeline_id filter', () => {
+ expect(fmt(genDefaultQueryOtel(LogsTableName.ETL, { pipeline_id: '42' })))
+ .toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['etl_replication_logs']
+ select
+ id,
+ timestamp,
+ event_message
+ from
+ logs
+ where
+ source = 'etl_replication_logs'
+ and (log_attributes['pipeline_id'] = '42')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+
+ it('quotes a numeric etl pipeline_id so it compares as a string', () => {
+ // The replication "View logs" link puts pipeline_id in the `f` param as a
+ // number; JSON.parse keeps it numeric, so model that path here.
+ const filters = JSON.parse('{ "pipeline_id": 42 }')
+ expect(fmt(genDefaultQueryOtel(LogsTableName.ETL, filters))).toMatchInlineSnapshot(`
+ "-- Logs Preview Query (otel) ['etl_replication_logs']
+ select
+ id,
+ timestamp,
+ event_message
+ from
+ logs
+ where
+ source = 'etl_replication_logs'
+ and (log_attributes['pipeline_id'] = '42')
+ order by
+ timestamp desc
+ limit
+ 100"
+ `)
+ })
+})
+
+describe('otelTimestampToMicros', () => {
+ it('converts an ISO string to microseconds since epoch', () => {
+ const micros = otelTimestampToMicros('2024-01-01T00:00:00.000Z')
+ expect(micros).toBe(Date.UTC(2024, 0, 1) * 1000)
+ })
+
+ it('parses a space-separated ClickHouse datetime as UTC', () => {
+ const micros = otelTimestampToMicros('2024-01-01 00:00:00')
+ expect(micros).toBe(Date.UTC(2024, 0, 1) * 1000)
+ })
+
+ it('passes through numeric microseconds', () => {
+ const micros = otelTimestampToMicros(1704067200000000)
+ expect(micros).toBe(1704067200000000)
+ })
+
+ it('parses numeric microseconds supplied as a string', () => {
+ const micros = otelTimestampToMicros('1704067200000000')
+ expect(micros).toBe(1704067200000000)
+ })
+})
+
+describe('mapOtelPreviewRow', () => {
+ it('normalizes the timestamp to a microsecond number and keeps other columns', () => {
+ const row = mapOtelPreviewRow({
+ id: 'abc',
+ timestamp: '2024-01-01T00:00:00.000Z',
+ event_message: 'hello',
+ status_code: '200',
+ })
+ expect(row.timestamp).toBe(Date.UTC(2024, 0, 1) * 1000)
+ expect(row.event_message).toBe('hello')
+ expect((row as any).status_code).toBe('200')
+ })
+})
+
+describe('mapOtelSingleLogToLegacy', () => {
+ const baseRow: OtelLogRow = {
+ id: 'log-1',
+ timestamp: '2024-01-01T00:00:00.000Z',
+ source: 'edge_logs',
+ event_message: 'GET /rest/v1/foo',
+ log_attributes: {
+ 'request.method': 'GET',
+ 'request.path': '/rest/v1/foo',
+ 'request.search': '?select=*',
+ 'request.headers.user_agent': 'curl/8',
+ 'response.status_code': '200',
+ // Real OTEL gateway key is `sb_error_code` (BigQuery used `x_sb_error_code`).
+ 'response.headers.sb_error_code': 'none',
+ },
+ }
+
+ it('reconstructs the nested metadata shape the api panel reads', () => {
+ const log = mapOtelSingleLogToLegacy(baseRow, 'api') as any
+ expect(log.metadata[0].request[0].method).toBe('GET')
+ expect(log.metadata[0].request[0].path).toBe('/rest/v1/foo')
+ expect(log.metadata[0].request[0].search).toBe('?select=*')
+ expect(log.metadata[0].request[0].headers[0].user_agent).toBe('curl/8')
+ expect(log.metadata[0].response[0].status_code).toBe('200')
+ expect(log.metadata[0].response[0].headers[0].x_sb_error_code).toBe('none')
+ expect(log.timestamp).toBe(Date.UTC(2024, 0, 1) * 1000)
+ })
+
+ it('falls back to the legacy x_sb_error_code key when the OTEL key is absent', () => {
+ const row: OtelLogRow = {
+ ...baseRow,
+ log_attributes: {
+ 'request.method': 'GET',
+ 'response.status_code': '500',
+ // Only the legacy BigQuery-style key is present.
+ 'response.headers.x_sb_error_code': 'pgrst_error',
+ },
+ }
+ const log = mapOtelSingleLogToLegacy(row, 'api') as any
+ expect(log.metadata[0].response[0].headers[0].x_sb_error_code).toBe('pgrst_error')
+ })
+
+ it('reconstructs the nested parsed metadata for the database panel', () => {
+ const row: OtelLogRow = {
+ id: 'log-2',
+ timestamp: '2024-01-01T00:00:00.000Z',
+ source: 'postgres_logs',
+ event_message: 'ERROR: deadlock detected',
+ log_attributes: {
+ 'parsed.hint': 'retry',
+ 'parsed.detail': 'process 1 waits',
+ 'parsed.query': 'UPDATE foo',
+ },
+ }
+ const log = mapOtelSingleLogToLegacy(row, 'database') as any
+ expect(log.metadata[0].parsed[0].hint).toBe('retry')
+ expect(log.metadata[0].parsed[0].detail).toBe('process 1 waits')
+ expect(log.metadata[0].parsed[0].query).toBe('UPDATE foo')
+ })
+
+ it('returns a flat row with spread attributes for other query types', () => {
+ const row: OtelLogRow = {
+ id: 'log-3',
+ timestamp: '2024-01-01T00:00:00.000Z',
+ source: 'storage_logs',
+ event_message: 'object uploaded',
+ log_attributes: { level: 'info' },
+ }
+ const log = mapOtelSingleLogToLegacy(row, 'storage') as any
+ expect(log.metadata).toBeUndefined()
+ expect(log.level).toBe('info')
+ expect(log.event_message).toBe('object uploaded')
+ })
+
+ it('returns a safe empty row for an invalid (non-object) input', () => {
+ const log = mapOtelSingleLogToLegacy(undefined) as any
+ expect(log.id).toBe('')
+ expect(log.metadata).toBeUndefined()
+ })
+
+ it('fills api metadata with null when attributes are missing', () => {
+ const log = mapOtelSingleLogToLegacy({ log_attributes: {} }, 'api') as any
+ expect(log.metadata[0].request[0].method).toBeNull()
+ expect(log.metadata[0].response[0].status_code).toBeNull()
+ expect(log.metadata[0].response[0].headers[0].x_sb_error_code).toBeNull()
+ })
+
+ it('falls back to the legacy x_sb_error_code key for api rows', () => {
+ const log = mapOtelSingleLogToLegacy(
+ { log_attributes: { 'response.headers.x_sb_error_code': 'pgrst' } },
+ 'api'
+ ) as any
+ expect(log.metadata[0].response[0].headers[0].x_sb_error_code).toBe('pgrst')
+ })
+
+ it('fills database metadata with null when attributes are missing', () => {
+ const log = mapOtelSingleLogToLegacy({ log_attributes: {} }, 'database') as any
+ expect(log.metadata[0].parsed[0].hint).toBeNull()
+ expect(log.metadata[0].parsed[0].detail).toBeNull()
+ expect(log.metadata[0].parsed[0].query).toBeNull()
+ })
+})
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.ts
new file mode 100644
index 00000000000..9e999f6e455
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.otel.ts
@@ -0,0 +1,399 @@
+import dayjs from 'dayjs'
+import { z } from 'zod'
+
+import { LogsTableName, type SqlFilterEntry } from './Logs.constants'
+import type { Filters, LogData, LogsEndpointParams, Metadata, QueryType } from './Logs.types'
+import { buildWhereClauses } from './Logs.utils'
+import { parseOtelTimestamp } from '@/data/logs/otel-inspection.utils'
+import {
+ joinSqlFragments,
+ analyticsLiteral as lit,
+ safeSql,
+ type SafeLogSqlFragment,
+} from '@/data/logs/safe-analytics-sql'
+
+// Builds ClickHouse SQL for the OTEL `logs` table (one table for all sources,
+// fields in the `log_attributes` map). Mirrors the BigQuery builders in
+// Logs.utils.ts, aliasing columns to the names the row renderers already read.
+
+const attr = (key: string): SafeLogSqlFragment => safeSql`log_attributes[${lit(key)}]`
+const statusAsInt = (key: string): SafeLogSqlFragment => safeSql`toInt32OrZero(${attr(key)})`
+
+// Severity conditions, shared by the chart and the auth filters so a row is
+// classified the same everywhere.
+const HTTP_ERROR: SafeLogSqlFragment = safeSql`${statusAsInt('response.status_code')} >= 500`
+const HTTP_WARNING: SafeLogSqlFragment = safeSql`${statusAsInt('response.status_code')} BETWEEN 400 AND 499`
+const PG_ERROR: SafeLogSqlFragment = safeSql`${attr('parsed.error_severity')} IN ('ERROR', 'FATAL', 'PANIC')`
+const PG_WARNING: SafeLogSqlFragment = safeSql`${attr('parsed.error_severity')} = 'WARNING'`
+const FN_ERROR: SafeLogSqlFragment = safeSql`${attr('level')} IN ('error', 'fatal')`
+const FN_WARNING: SafeLogSqlFragment = safeSql`${attr('level')} = 'warning'`
+const MULTIGRES_ERROR: SafeLogSqlFragment = safeSql`JSONExtractString(event_message, 'level') IN ('ERROR', 'FATAL', 'PANIC')`
+const MULTIGRES_WARNING: SafeLogSqlFragment = safeSql`JSONExtractString(event_message, 'level') IN ('WARN', 'WARNING')`
+const AUTH_ERROR: SafeLogSqlFragment = safeSql`${attr('level')} IN ('error', 'fatal') OR ${statusAsInt('status')} >= 500`
+const AUTH_WARNING: SafeLogSqlFragment = safeSql`${attr('level')} = 'warning' OR ${statusAsInt('status')} BETWEEN 400 AND 499`
+const AUTH_INFO: SafeLogSqlFragment = safeSql`NOT (${AUTH_ERROR}) AND NOT (${AUTH_WARNING})`
+// Tables with no severity: every row counts as ok.
+const NO_MATCH: SafeLogSqlFragment = safeSql`0`
+
+const PG_CRON_CONDITION: SafeLogSqlFragment = safeSql`(${attr('parsed.application_name')} = 'pg_cron' OR event_message ILIKE '%cron job%')`
+
+const COMMON_FILTERS: Record<string, SqlFilterEntry> = {
+ search_query: (value: string) => safeSql`event_message ILIKE ${lit('%' + value + '%')}`,
+}
+const databaseFilter = (value: string): SafeLogSqlFragment =>
+ safeSql`${attr('identifier')} = ${lit(value)}`
+
+// ClickHouse filters per table. Tables not listed use COMMON_FILTERS only.
+const POSTGRES_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ database: databaseFilter,
+ 'severity.error': PG_ERROR,
+ 'severity.noError': safeSql`${attr('parsed.error_severity')} NOT IN ('ERROR', 'FATAL', 'PANIC')`,
+ 'severity.log': safeSql`${attr('parsed.error_severity')} = 'LOG'`,
+}
+const STATUS_CODE_FILTERS: Record<string, SqlFilterEntry> = {
+ 'status_code.error': safeSql`${statusAsInt('response.status_code')} BETWEEN 500 AND 599`,
+ 'status_code.success': safeSql`${statusAsInt('response.status_code')} BETWEEN 200 AND 299`,
+ 'status_code.warning': safeSql`${statusAsInt('response.status_code')} BETWEEN 400 AND 499`,
+}
+const EDGE_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ database: databaseFilter,
+ ...STATUS_CODE_FILTERS,
+ 'product.database': safeSql`${attr('request.path')} LIKE '/rest/%' OR ${attr('request.path')} LIKE '/graphql/%'`,
+ 'product.storage': safeSql`${attr('request.path')} LIKE '/storage/%'`,
+ 'product.auth': safeSql`${attr('request.path')} LIKE '/auth/%'`,
+ 'product.realtime': safeSql`${attr('request.path')} LIKE '/realtime/%'`,
+ 'method.get': safeSql`${attr('request.method')} = 'GET'`,
+ 'method.post': safeSql`${attr('request.method')} = 'POST'`,
+ 'method.put': safeSql`${attr('request.method')} = 'PUT'`,
+ 'method.patch': safeSql`${attr('request.method')} = 'PATCH'`,
+ 'method.delete': safeSql`${attr('request.method')} = 'DELETE'`,
+ 'method.options': safeSql`${attr('request.method')} = 'OPTIONS'`,
+}
+const FUNCTION_LOGS_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ 'severity.error': safeSql`${attr('level')} = 'error'`,
+ 'severity.notError': safeSql`${attr('level')} != 'error'`,
+ 'severity.log': safeSql`${attr('level')} = 'log'`,
+ 'severity.info': safeSql`${attr('level')} = 'info'`,
+ 'severity.debug': safeSql`${attr('level')} = 'debug'`,
+ 'severity.warn': safeSql`${attr('level')} = 'warn'`,
+}
+const AUTH_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ 'severity.error': AUTH_ERROR,
+ 'severity.warning': AUTH_WARNING,
+ 'severity.info': AUTH_INFO,
+ 'status_code.server_error': safeSql`${statusAsInt('status')} BETWEEN 500 AND 599`,
+ 'status_code.client_error': safeSql`${statusAsInt('status')} BETWEEN 400 AND 499`,
+ 'status_code.redirection': safeSql`${statusAsInt('status')} BETWEEN 300 AND 399`,
+ 'status_code.success': safeSql`${statusAsInt('status')} BETWEEN 200 AND 299`,
+ 'endpoints.admin': safeSql`match(${attr('path')}, '/admin')`,
+ 'endpoints.signup': safeSql`match(${attr('path')}, '/signup|/invite|/verify')`,
+ 'endpoints.authentication': safeSql`match(${attr('path')}, '/token|/authorize|/callback|/otp|/magiclink')`,
+ 'endpoints.recover': safeSql`match(${attr('path')}, '/recover')`,
+ 'endpoints.user': safeSql`match(${attr('path')}, '/user')`,
+ 'endpoints.logout': safeSql`match(${attr('path')}, '/logout')`,
+}
+const SUPAVISOR_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ database: (value: string) => safeSql`${attr('project')} LIKE ${lit(value + '%')}`,
+}
+const ETL_FILTERS: Record<string, SqlFilterEntry> = {
+ ...COMMON_FILTERS,
+ // pipeline_id arrives as a number, but log_attributes values are strings, so
+ // compare as a string. A numeric literal here is a ClickHouse type error.
+ pipeline_id: (value: string | number) => safeSql`${attr('pipeline_id')} = ${lit(String(value))}`,
+}
+
+const col = (key: string, alias: SafeLogSqlFragment): SafeLogSqlFragment =>
+ safeSql`${attr(key)} AS ${alias}`
+
+// What varies per table. Everything but `source` is optional, so a plain
+// process-log table is just `{ source }`.
+interface OtelSourceDescriptor {
+ source: string
+ // Columns beyond id/timestamp/event_message, aliased to the renderer names.
+ columns?: SafeLogSqlFragment[]
+ filterTemplates?: Record<string, SqlFilterEntry>
+ // Chart severity; absent means the table has no error/warning.
+ error?: SafeLogSqlFragment
+ warning?: SafeLogSqlFragment
+ // Always ANDed with the source filter (e.g. the pg_cron subset).
+ baseCondition?: SafeLogSqlFragment
+}
+
+const OTEL_SOURCES: Record<LogsTableName, OtelSourceDescriptor> = {
+ [LogsTableName.EDGE]: {
+ source: 'edge_logs',
+ columns: [
+ col('identifier', safeSql`identifier`),
+ col('request.method', safeSql`method`),
+ col('request.path', safeSql`path`),
+ col('request.search', safeSql`search`),
+ col('response.status_code', safeSql`status_code`),
+ ],
+ filterTemplates: EDGE_FILTERS,
+ error: HTTP_ERROR,
+ warning: HTTP_WARNING,
+ },
+ [LogsTableName.POSTGRES]: {
+ source: 'postgres_logs',
+ columns: [
+ col('identifier', safeSql`identifier`),
+ col('parsed.error_severity', safeSql`error_severity`),
+ col('parsed.detail', safeSql`detail`),
+ col('parsed.hint', safeSql`hint`),
+ ],
+ filterTemplates: POSTGRES_FILTERS,
+ error: PG_ERROR,
+ warning: PG_WARNING,
+ },
+ [LogsTableName.PG_CRON]: {
+ source: 'postgres_logs',
+ columns: [
+ col('parsed.error_severity', safeSql`error_severity`),
+ col('parsed.query', safeSql`query`),
+ ],
+ error: PG_ERROR,
+ // No warning bucket, to match BigQuery (where pg_cron has no warning case).
+ baseCondition: PG_CRON_CONDITION,
+ },
+ [LogsTableName.FUNCTIONS]: {
+ source: 'function_logs',
+ columns: [
+ col('event_type', safeSql`event_type`),
+ col('function_id', safeSql`function_id`),
+ col('execution_id', safeSql`execution_id`),
+ col('level', safeSql`level`),
+ ],
+ filterTemplates: FUNCTION_LOGS_FILTERS,
+ error: FN_ERROR,
+ warning: FN_WARNING,
+ },
+ [LogsTableName.FN_EDGE]: {
+ source: 'function_edge_logs',
+ columns: [
+ col('response.status_code', safeSql`status_code`),
+ col('request.method', safeSql`method`),
+ col('request.pathname', safeSql`pathname`),
+ col('function_id', safeSql`function_id`),
+ col('execution_id', safeSql`execution_id`),
+ col('execution_time_ms', safeSql`execution_time_ms`),
+ col('deployment_id', safeSql`deployment_id`),
+ col('version', safeSql`version`),
+ ],
+ filterTemplates: { ...COMMON_FILTERS, ...STATUS_CODE_FILTERS },
+ error: HTTP_ERROR,
+ warning: HTTP_WARNING,
+ },
+ [LogsTableName.AUTH]: {
+ source: 'auth_logs',
+ columns: [
+ col('level', safeSql`level`),
+ col('status', safeSql`status`),
+ col('path', safeSql`path`),
+ col('msg', safeSql`msg`),
+ col('error', safeSql`error`),
+ ],
+ filterTemplates: AUTH_FILTERS,
+ error: AUTH_ERROR,
+ warning: AUTH_WARNING,
+ },
+ [LogsTableName.MULTIGRES]: {
+ source: 'multigres_logs',
+ error: MULTIGRES_ERROR,
+ warning: MULTIGRES_WARNING,
+ },
+ [LogsTableName.POSTGREST]: {
+ source: 'postgrest_logs',
+ filterTemplates: { ...COMMON_FILTERS, database: databaseFilter },
+ },
+ [LogsTableName.SUPAVISOR]: { source: 'supavisor_logs', filterTemplates: SUPAVISOR_FILTERS },
+ [LogsTableName.ETL]: { source: 'etl_replication_logs', filterTemplates: ETL_FILTERS },
+ [LogsTableName.AUTH_AUDIT]: { source: 'auth_audit_logs' },
+ [LogsTableName.REALTIME]: { source: 'realtime_logs' },
+ [LogsTableName.STORAGE]: { source: 'storage_logs' },
+ [LogsTableName.PGBOUNCER]: { source: 'pgbouncer_logs' },
+ [LogsTableName.PG_UPGRADE]: { source: 'pg_upgrade_logs' },
+}
+
+// Fallback for filter keys with no template: `log_attributes[key] = value`.
+// Drops the clause on non-scalar or un-encodable input.
+const resolveUnknownOtelClause = (dotKey: string, value: unknown): SafeLogSqlFragment | null => {
+ if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+ return null
+ }
+ // OTEL drops the `metadata` root that BigQuery filter keys carry, so a
+ // `metadata.function_id` override maps to `log_attributes['function_id']`.
+ const attrKey = dotKey.startsWith('metadata.') ? dotKey.slice('metadata.'.length) : dotKey
+ try {
+ return safeSql`${attr(attrKey)} = ${lit(value)}`
+ } catch {
+ return null
+ }
+}
+
+const genOtelWhere = (table: LogsTableName, filters: Filters): SafeLogSqlFragment => {
+ const desc = OTEL_SOURCES[table]
+ const conditions: SafeLogSqlFragment[] = [safeSql`source = ${lit(desc.source)}`]
+ if (desc.baseCondition) conditions.push(desc.baseCondition)
+ conditions.push(
+ ...buildWhereClauses(
+ table,
+ filters,
+ desc.filterTemplates ?? COMMON_FILTERS,
+ resolveUnknownOtelClause
+ )
+ )
+ return safeSql`WHERE ${joinSqlFragments(conditions, ' AND ')}`
+}
+
+const genOtelSelectColumns = (table: LogsTableName): SafeLogSqlFragment => {
+ const columns: SafeLogSqlFragment[] = [
+ safeSql`id`,
+ safeSql`timestamp`,
+ safeSql`event_message`,
+ ...(OTEL_SOURCES[table].columns ?? []),
+ ]
+ return joinSqlFragments(columns, ', ')
+}
+
+export const genDefaultQueryOtel = (
+ table: LogsTableName,
+ filters: Filters,
+ limit: number = 100
+): SafeLogSqlFragment => {
+ return safeSql`-- Logs Preview Query (otel) [${lit(table)}]
+SELECT ${genOtelSelectColumns(table)}
+FROM logs
+${genOtelWhere(table, filters)}
+ORDER BY timestamp DESC
+LIMIT ${lit(limit)}`
+}
+
+export const genCountQueryOtel = (table: LogsTableName, filters: Filters): SafeLogSqlFragment => {
+ return safeSql`-- Logs Count Query (otel) [${lit(table)}]
+SELECT count() AS count FROM logs ${genOtelWhere(table, filters)}`
+}
+
+// Bucket by minute up to 12h, otherwise by hour (matches BigQuery).
+const otelChartTruncFn = (params: LogsEndpointParams): SafeLogSqlFragment => {
+ const ite = params.iso_timestamp_end ? dayjs(params.iso_timestamp_end) : dayjs()
+ const its = params.iso_timestamp_start ? dayjs(params.iso_timestamp_start) : dayjs()
+ const minuteDiff = ite.diff(its, 'minute')
+ const hourDiff = ite.diff(its, 'hour')
+ if (minuteDiff > 60 * 12) return safeSql`toStartOfHour`
+ if (hourDiff > 24 * 3) return safeSql`toStartOfDay`
+ return safeSql`toStartOfMinute`
+}
+
+export const genChartQueryOtel = (
+ table: LogsTableName,
+ params: LogsEndpointParams,
+ filters: Filters
+): SafeLogSqlFragment => {
+ const truncFn = otelChartTruncFn(params)
+ const desc = OTEL_SOURCES[table]
+ const err = desc.error ?? NO_MATCH
+ const warn = desc.warning ?? NO_MATCH
+ // The time range comes from the endpoint params, not the SQL.
+ return safeSql`-- Logs Chart Query (otel) [${lit(table)}]
+SELECT
+ ${truncFn}(timestamp) AS timestamp,
+ countIf(NOT ((${err}) OR (${warn}))) AS ok_count,
+ countIf(${err}) AS error_count,
+ countIf(${warn}) AS warning_count
+FROM logs
+${genOtelWhere(table, filters)}
+GROUP BY timestamp
+ORDER BY timestamp ASC`
+}
+
+// Reject non-uuid ids before putting them in the query (injection guard).
+export const genSingleLogQueryOtel = (id: string): SafeLogSqlFragment => {
+ if (!/^[0-9a-fA-F-]{1,64}$/.test(id)) {
+ throw new Error('Invalid logId')
+ }
+ return safeSql`-- Single Log Query (otel)
+SELECT id, timestamp, event_message, source, severity_text, log_attributes
+FROM logs
+WHERE id = ${lit(id)}
+LIMIT 1`
+}
+
+// Renderers and the pagination cursor expect a microsecond number.
+export const otelTimestampToMicros = (timestamp: unknown): number =>
+ parseOtelTimestamp(timestamp).getTime() * 1000
+
+export const mapOtelPreviewRow = (row: Record<string, any>): LogData => {
+ return { ...row, timestamp: otelTimestampToMicros(row.timestamp) } as LogData
+}
+
+// The api/database detail panels read a nested `metadata` shape, so rebuild it
+// from the flat attributes. Other tables use a flat row.
+// TODO: edge logs also carry the JWT/apikey keys, so the panel's API key / role
+// rows could be rebuilt here later.
+const SINGLE_LOG_METADATA: Partial<Record<QueryType, (attrs: Record<string, string>) => Metadata>> =
+ {
+ api: (attrs) => ({
+ request: [
+ {
+ method: attrs['request.method'] ?? null,
+ path: attrs['request.path'] ?? null,
+ search: attrs['request.search'] ?? null,
+ headers: [{ user_agent: attrs['request.headers.user_agent'] ?? null }],
+ },
+ ],
+ response: [
+ {
+ status_code: attrs['response.status_code'] ?? null,
+ // OTEL uses `sb_error_code`; BigQuery used `x_sb_error_code`. Fall back
+ // to the old key so the panel works during the migration.
+ headers: [
+ {
+ x_sb_error_code:
+ attrs['response.headers.sb_error_code'] ??
+ attrs['response.headers.x_sb_error_code'] ??
+ null,
+ },
+ ],
+ },
+ ],
+ }),
+ database: (attrs) => ({
+ parsed: [
+ {
+ hint: attrs['parsed.hint'] ?? null,
+ detail: attrs['parsed.detail'] ?? null,
+ query: attrs['parsed.query'] ?? null,
+ },
+ ],
+ }),
+ }
+
+// OTEL rows come back untyped from the analytics endpoint; validate the shape we
+// read instead of casting. log_attributes is a string-keyed string map.
+const OtelLogRowSchema = z.object({
+ id: z.string().optional(),
+ timestamp: z.union([z.string(), z.number()]).optional(),
+ event_message: z.string().optional(),
+ log_attributes: z.record(z.string(), z.string()).optional(),
+})
+
+export const mapOtelSingleLogToLegacy = (row: unknown, queryType?: QueryType): LogData => {
+ const parsed = OtelLogRowSchema.safeParse(row)
+ if (!parsed.success) {
+ console.error('Unexpected OTEL log row shape:', parsed.error.message)
+ return { id: '', timestamp: 0, event_message: '' }
+ }
+ const { id = '', timestamp, event_message = '', log_attributes = {} } = parsed.data
+ const base: LogData = { id, timestamp: otelTimestampToMicros(timestamp), event_message }
+
+ const buildMetadata = queryType ? SINGLE_LOG_METADATA[queryType] : undefined
+ if (buildMetadata) {
+ return { ...base, metadata: [buildMetadata(log_attributes)] }
+ }
+ return { ...base, ...log_attributes }
+}
diff --git a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
index 6fa1baa0be2..44be04b8b07 100644
--- a/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
+++ b/apps/studio/components/interfaces/Settings/Logs/Logs.utils.ts
@@ -11,6 +11,7 @@ import {
AUTH_LOG_WARNING_CONDITION,
LogsTableName,
SQL_FILTER_TEMPLATES,
+ type SqlFilterEntry,
} from './Logs.constants'
import type { Filters, LogData, LogsEndpointParams, QueryType } from './Logs.types'
import { convertResultsToCSV } from '@/components/interfaces/SQLEditor/UtilityPanel/Results.utils'
@@ -66,43 +67,43 @@ const getDotKeys = (obj: { [k: string]: unknown }, parent?: string): string[] =>
})
}
+// Fallback for filter keys with no template: a plain `key = value`.
+// Drops the clause on non-scalar or un-encodable input.
+const defaultResolveUnknownClause = (dotKey: string, value: unknown): SafeLogSqlFragment | null => {
+ if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+ return null
+ }
+ try {
+ return safeSql`${quotedIdent(dotKey)} = ${analyticsLiteral(value)}`
+ } catch {
+ return null
+ }
+}
+
/**
- * Root keys in the filter object are considered to be AND filters.
- * Nested keys under a root key are considered to be OR filters.
+ * Builds the AND-joined WHERE clauses for a table's filters. Top-level keys are
+ * ANDed, nested keys under one key are ORed.
*
- * For example:
- * ```
- * {my_value: 'something', nested: {id: 123, test: 123 }}
- * ```
- * This would be converted into `WHERE (my_value = 'something') and (id = 123 or test = 123)
- *
- * The template of the filter determines the actual filter statement. If no template is provided, a generic equality statement will be used.
- * This only applies for root keys of the filter.
- * For example:
- * ```
- * {'my.nested.value': 123}
- * ```
- * with no template, it will be converted into `WHERE (my.nested.value = 123)
- *
- * @returns a where statement with WHERE clause.
+ * `filterTemplates` and `resolveUnknownClause` can be passed in so the OTEL
+ * builders reuse this with their own ClickHouse conditions. Defaults keep the
+ * BigQuery behavior.
*/
-const buildWhereClauses = (table: LogsTableName, filters: Filters): SafeLogSqlFragment[] => {
+export const buildWhereClauses = (
+ table: LogsTableName,
+ filters: Filters,
+ filterTemplates: Record<string, SqlFilterEntry> = SQL_FILTER_TEMPLATES[table],
+ resolveUnknownClause: (
+ dotKey: string,
+ value: unknown
+ ) => SafeLogSqlFragment | null = defaultResolveUnknownClause
+): SafeLogSqlFragment[] => {
const keys = Object.keys(filters)
- const filterTemplates = SQL_FILTER_TEMPLATES[table]
const _resolveTemplateToStatement = (dotKey: string): SafeLogSqlFragment | null => {
const template = filterTemplates[dotKey]
const value = get(filters, dotKey)
if (template === undefined) {
- // Unknown filter from a filter override — generic equality predicate; drop on bad input.
- if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
- return null
- }
- try {
- return safeSql`${quotedIdent(dotKey)} = ${analyticsLiteral(value)}`
- } catch {
- return null
- }
+ return resolveUnknownClause(dotKey, value)
}
if (typeof template === 'function') {
@@ -141,8 +142,13 @@ const buildWhereClauses = (table: LogsTableName, filters: Filters): SafeLogSqlFr
.filter((s) => s !== null)
}
-const genWhereStatement = (table: LogsTableName, filters: Filters): SafeLogSqlFragment => {
- const clauses = buildWhereClauses(table, filters)
+export const genWhereStatement = (
+ table: LogsTableName,
+ filters: Filters,
+ filterTemplates?: Record<string, SqlFilterEntry>,
+ resolveUnknownClause?: (dotKey: string, value: unknown) => SafeLogSqlFragment | null
+): SafeLogSqlFragment => {
+ const clauses = buildWhereClauses(table, filters, filterTemplates, resolveUnknownClause)
return clauses.length > 0 ? safeSql`where ${joinSqlFragments(clauses, ' and ')}` : safeSql``
}
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
index 444cddf7969..ed9d6df9cf5 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsErrorRenderers/DefaultErrorRenderer.tsx
@@ -14,7 +14,7 @@ export const DefaultErrorRenderer: React.FC<ErrorRendererProps> = ({ error }) =>
language="json"
hideLineNumbers
value={typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
- className="w-full font-mono"
+ className="w-full font-mono px-4"
/>
</div>
)
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsExplorerOtelBanner.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsExplorerOtelBanner.tsx
new file mode 100644
index 00000000000..1c52f2f5265
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsExplorerOtelBanner.tsx
@@ -0,0 +1,34 @@
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+interface LogsExplorerOtelBannerProps {
+ isRewriting: boolean
+ onRewrite: () => void
+ onDismiss: () => void
+}
+
+export const LogsExplorerOtelBanner = ({
+ isRewriting,
+ onRewrite,
+ onDismiss,
+}: LogsExplorerOtelBannerProps) => {
+ return (
+ <Admonition
+ type="default"
+ layout="horizontal"
+ className="mb-0 rounded-none border-x-0 border-t-0"
+ title="Logs now run on a ClickHouse-backed engine"
+ description="This query needs to be adjusted to ClickHouse SQL, which the Assistant can do for you."
+ actions={
+ <div className="flex items-center gap-2">
+ <Button variant="default" size="tiny" loading={isRewriting} onClick={onRewrite}>
+ Rewrite with Assistant
+ </Button>
+ <Button variant="text" size="tiny" onClick={onDismiss}>
+ Dismiss
+ </Button>
+ </div>
+ }
+ />
+ )
+}
diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
index 7afed9f5cc4..27e0f4c2660 100644
--- a/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx
@@ -1,11 +1,12 @@
-import { useFlag } from 'common'
-import { BookOpen, Check, ChevronDown, ChevronsUpDown, Copy, ExternalLink, X } from 'lucide-react'
+import { useFlag, useParams } from 'common'
+import { BookOpen, Check, ChevronDown, ChevronsUpDown, Copy, ExternalLink } from 'lucide-react'
import Link from 'next/link'
import { ReactNode, useEffect, useState } from 'react'
import { logConstants } from 'shared-data'
import {
Badge,
Button,
+ Card,
cn,
Command,
CommandEmpty,
@@ -18,16 +19,27 @@ import {
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
- Label,
Popover,
PopoverContent,
PopoverTrigger,
- SidePanel,
- Switch,
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetSection,
+ SheetTitle,
+ SheetTrigger,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
Tooltip,
TooltipContent,
TooltipTrigger,
} from 'ui'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import {
EXPLORER_DATEPICKER_HELPERS,
@@ -35,21 +47,23 @@ import {
LogsTableName,
} from './Logs.constants'
import { DatePickerValue, LogsDatePicker } from './Logs.DatePickers'
+import { otelFieldsFromKeys, toOtelFieldSchemas } from './Logs.fieldReference'
import { LogsWarning, LogTemplate } from './Logs.types'
-import Table from '@/components/to-be-cleaned/Table'
+import { useOtelLogKeysQuery } from '@/data/logs/otel-log-keys-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useShowMultigresLogs } from '@/hooks/misc/useShowMultigresLogs'
import { DOCS_URL } from '@/lib/constants'
-export interface LogsQueryPanelProps {
+interface LogsQueryPanelProps {
templates?: LogTemplate[]
value: DatePickerValue
warnings: LogsWarning[]
onSelectTemplate: (template: LogTemplate) => void
onSelectSource: (source: string) => void
onDateChange: (value: DatePickerValue) => void
- useOtel?: boolean
- onUseOtelChange?: (value: boolean) => void
+ showRewriteAction?: boolean
+ isRewriting?: boolean
+ onRewrite?: () => void
}
function DropdownMenuItemContent({ name, desc }: { name: ReactNode; desc?: string }) {
@@ -61,20 +75,19 @@ function DropdownMenuItemContent({ name, desc }: { name: ReactNode; desc?: strin
)
}
-const LogsQueryPanel = ({
+export const LogsQueryPanel = ({
templates = [],
value,
warnings,
onSelectTemplate,
onSelectSource,
onDateChange,
- useOtel = false,
- onUseOtelChange,
+ showRewriteAction = false,
+ isRewriting = false,
+ onRewrite,
}: LogsQueryPanelProps) => {
const [showReference, setShowReference] = useState(false)
const { logsTemplates } = useIsFeatureEnabled(['logs:templates'])
- const showChToggleInLogExplorer = useFlag('showChToggleInLogExplorer')
- const otelToggleEnabled = !!showChToggleInLogExplorer && !!onUseOtelChange
const {
projectAuthAll: authEnabled,
@@ -101,11 +114,20 @@ const LogsQueryPanel = ({
const [open, setOpen] = useState(false)
const showMultigresLogs = useShowMultigresLogs()
- const schemas = logConstants.schemas.filter(
+ const useOtel = useFlag('otelLegacyLogs')
+ const baseSchemas = logConstants.schemas.filter(
(schema) => schema.reference !== 'multigres_logs' || showMultigresLogs
)
+ const schemas = useOtel ? toOtelFieldSchemas(baseSchemas) : baseSchemas
- const [selectedSchema, setSelectedSchema] = useState(schemas[0])
+ const [selectedRef, setSelectedRef] = useState(schemas[0]?.reference)
+ const selectedSchema = schemas.find((s) => s.reference === selectedRef) ?? schemas[0]
+
+ const { ref: projectRef } = useParams()
+ const { data: discoveredKeys, isPending: isLoadingKeys } = useOtelLogKeysQuery(
+ { projectRef, source: selectedRef },
+ { enabled: useOtel && showReference }
+ )
return (
<div className="flex items-center border-b bg-surface-100 h-(--header-height)">
@@ -167,30 +189,6 @@ const LogsQueryPanel = ({
helpers={EXPLORER_DATEPICKER_HELPERS}
/>
- {otelToggleEnabled && (
- <Tooltip>
- <TooltipTrigger asChild>
- <div className="flex items-center gap-2">
- <Switch
- id="logs-explorer-otel-toggle"
- checked={useOtel}
- onCheckedChange={(checked) => onUseOtelChange?.(checked)}
- />
- <Label
- htmlFor="logs-explorer-otel-toggle"
- className="text-xs text-foreground-light cursor-pointer"
- >
- OTEL endpoint
- </Label>
- </div>
- </TooltipTrigger>
- <TooltipContent side="bottom" className="max-w-xs">
- Run this query against the new ClickHouse-backed OTEL endpoint instead of
- BigQuery. Use to validate ClickHouse SQL before relying on it.
- </TooltipContent>
- </Tooltip>
- )}
-
<div
data-testid="log-explorer-warnings"
className={`transition-all duration-300 h-full ${
@@ -220,116 +218,142 @@ const LogsQueryPanel = ({
</div>
</div>
- <SidePanel
- size="large"
- header={
- <div className="flex flex-row justify-between items-center">
- <h3>Field Reference</h3>
- <Button
- variant="text"
- className="px-1"
- onClick={() => setShowReference(false)}
- icon={<X />}
- />
- </div>
- }
- visible={showReference}
- cancelText="Close"
- onCancel={() => setShowReference(false)}
- hideFooter
- triggerElement={
- <Button
- variant="text"
- onClick={() => setShowReference(true)}
- icon={<BookOpen />}
- className="px-2"
- >
- <span>Field Reference</span>
- </Button>
- }
- >
- <SidePanel.Content>
- <div className="pt-4 pb-2 space-y-1">
- <p className="text-sm">
- The following table shows all the available paths that can be queried from each
- respective source. Do note that to access nested keys, you would need to perform
- the necessary{' '}
- <Link
- href={`${DOCS_URL}/guides/platform/logs#unnesting-arrays`}
- target="_blank"
- rel="noreferrer"
- className="text-brand"
- >
- unnesting joins
- <ExternalLink
- size="14"
- className="ml-1 inline translate-y-[-2px]"
- strokeWidth={1.5}
- />
- </Link>
- </p>
- </div>
- </SidePanel.Content>
- <SidePanel.Separator />
-
- <div className="px-4 pb-4 flex flex-col gap-4">
- <Popover open={open} onOpenChange={setOpen}>
- <PopoverTrigger asChild>
+ <div className="flex items-center gap-1">
+ {showRewriteAction && onRewrite && (
+ <Tooltip>
+ <TooltipTrigger asChild>
<Button
- variant="default"
- role="combobox"
- size={'small'}
- aria-expanded={open}
- className="w-full justify-between"
- iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+ variant="outline"
+ loading={isRewriting}
+ onClick={onRewrite}
+ className="px-2"
>
- {value ? selectedSchema?.name : 'Select source...'}
+ Rewrite query to ClickHouse SQL
</Button>
- </PopoverTrigger>
- <PopoverContent className="p-0" sameWidthAsTrigger>
- <Command>
- <CommandInput placeholder="Search source..." />
- <CommandList>
- <CommandEmpty>No source found.</CommandEmpty>
- <CommandGroup>
- {schemas.map((schema) => (
- <CommandItem
- key={schema.reference}
- value={schema.reference}
- onSelect={() => {
- setSelectedSchema(schema)
- setOpen(false)
- }}
- >
- <Check
- className={cn(
- 'mr-2 h-4 w-4',
- selectedSchema === schema ? 'opacity-100' : 'opacity-0'
- )}
- />
- {schema.name}
- </CommandItem>
- ))}
- </CommandGroup>
- </CommandList>
- </Command>
- </PopoverContent>
- </Popover>
- <Table
- head={[
- <Table.th className="text-xs p-2!" key="path">
- Path
- </Table.th>,
- <Table.th key="type" className="text-xs p-2!">
- Type
- </Table.th>,
- ]}
- body={selectedSchema.fields.map((field) => (
- <Field key={field.path} field={field} />
- ))}
- />
- </div>
- </SidePanel>
+ </TooltipTrigger>
+ <TooltipContent side="bottom" className="w-72 text-center">
+ Logs now run on a ClickHouse-backed engine. Click to rewrite this query with the
+ Assistant.
+ </TooltipContent>
+ </Tooltip>
+ )}
+
+ <Sheet open={showReference} onOpenChange={setShowReference}>
+ <SheetTrigger asChild>
+ <Button variant="text" icon={<BookOpen />} className="px-2">
+ <span>Field Reference</span>
+ </Button>
+ </SheetTrigger>
+ <SheetContent size="lg" className="flex w-full flex-col gap-0 p-0">
+ <SheetHeader>
+ <SheetTitle>Field Reference</SheetTitle>
+ {useOtel ? (
+ <SheetDescription>
+ The following table shows the fields available on each source. Nested fields
+ live in the{' '}
+ <code className="text-code-inline text-xs !break-keep">log_attributes</code>{' '}
+ map and are read with{' '}
+ <code className="text-code-inline text-xs !break-keep">
+ log_attributes['key']
+ </code>{' '}
+ — no unnesting joins needed.
+ </SheetDescription>
+ ) : (
+ <SheetDescription>
+ The following table shows all the available paths that can be queried from
+ each respective source. Do note that to access nested keys, you would need to
+ perform the necessary{' '}
+ <Link
+ href={`${DOCS_URL}/guides/platform/logs#unnesting-arrays`}
+ target="_blank"
+ rel="noreferrer"
+ className="text-brand"
+ >
+ unnesting joins
+ <ExternalLink
+ size="14"
+ className="ml-1 inline translate-y-[-2px]"
+ strokeWidth={1.5}
+ />
+ </Link>
+ </SheetDescription>
+ )}
+ </SheetHeader>
+
+ <SheetSection className="flex flex-col gap-y-4 overflow-y-auto ">
+ <Popover open={open} onOpenChange={setOpen}>
+ <PopoverTrigger asChild>
+ <Button
+ variant="default"
+ role="combobox"
+ size={'small'}
+ aria-expanded={open}
+ className="w-full justify-between"
+ iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+ >
+ {value ? selectedSchema?.name : 'Select source...'}
+ </Button>
+ </PopoverTrigger>
+ <PopoverContent className="p-0" sameWidthAsTrigger>
+ <Command>
+ <CommandInput placeholder="Search source..." />
+ <CommandList>
+ <CommandEmpty>No source found.</CommandEmpty>
+ <CommandGroup>
+ {schemas.map((schema) => (
+ <CommandItem
+ key={schema.reference}
+ value={schema.reference}
+ onSelect={() => {
+ setSelectedRef(schema.reference)
+ setOpen(false)
+ }}
+ >
+ <Check
+ className={cn(
+ 'mr-2 h-4 w-4',
+ selectedSchema?.reference === schema.reference
+ ? 'opacity-100'
+ : 'opacity-0'
+ )}
+ />
+ {schema.name}
+ </CommandItem>
+ ))}
+ </CommandGroup>
+ </CommandList>
+ </Command>
+ </PopoverContent>
+ </Popover>
+
+ <Card className="overflow-y-auto">
+ <Table>
+ <TableHeader>
+ <TableRow>
+ <TableHead className="text-xs p-2!">Path</TableHead>
+ <TableHead className="text-xs p-2!">Type</TableHead>
+ </TableRow>
+ </TableHeader>
+ <TableBody>
+ {useOtel && isLoadingKeys
+ ? Array.from({ length: 3 }).map((_, i) => (
+ <TableRow key={i}>
+ <TableCell colSpan={2} className="p-2">
+ <ShimmeringLoader />
+ </TableCell>
+ </TableRow>
+ ))
+ : (useOtel
+ ? otelFieldsFromKeys(discoveredKeys ?? [])
+ : selectedSchema.fields
+ ).map((field) => <Field key={field.path} field={field} />)}
+ </TableBody>
+ </Table>
+ </Card>
+ </SheetSection>
+ </SheetContent>
+ </Sheet>
+ </div>
</div>
</div>
</div>
@@ -347,8 +371,8 @@ const Field = ({
const [isCopied, setIsCopied] = useState(false)
return (
- <Table.tr>
- <Table.td
+ <TableRow>
+ <TableCell
className="font-mono text-xs p-2! cursor-pointer hover:text-foreground transition flex items-center space-x-2"
onClick={() =>
copyToClipboard(field.path, () => {
@@ -373,10 +397,8 @@ const Field = ({
<TooltipContent side="bottom">Copy value</TooltipContent>
</Tooltip>
)}
- </Table.td>
- <Table.td className="font-mono text-xs p-2!">{field.type}</Table.td>
- </Table.tr>
+ </TableCell>
+ <TableCell className="font-mono text-xs p-2!">{field.type}</TableCell>
+ </TableRow>
)
}
-
-export default LogsQueryPanel
diff --git a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx b/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx
deleted file mode 100644
index 7fdc180da73..00000000000
--- a/apps/studio/components/interfaces/Settings/Logs/PreviewFilterPanelWithUniversal.tsx
+++ /dev/null
@@ -1,352 +0,0 @@
-import { useParams } from 'common'
-import dayjs from 'dayjs'
-import { Eye, EyeOff, RefreshCw, Terminal } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useMemo, useState } from 'react'
-import { Button, Calendar, cn, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import type {
- CustomOptionProps,
- FilterCondition,
- FilterGroup,
- FilterProperty,
-} from 'ui-patterns/FilterBar'
-import { FilterBar } from 'ui-patterns/FilterBar'
-
-import { FILTER_OPTIONS, LOG_ROUTES_WITH_REPLICA_SUPPORT, LogsTableName } from './Logs.constants'
-import { DatePickerValue } from './Logs.DatePickers'
-import type { Filters, LogSearchCallback, LogTemplate } from './Logs.types'
-import { DatabaseSelector } from '@/components/ui/DatabaseSelector'
-import { useLoadBalancersQuery } from '@/data/read-replicas/load-balancers-query'
-import { IS_PLATFORM } from '@/lib/constants'
-
-function isBooleanMap(v: unknown): v is Record<string, boolean> {
- return typeof v === 'object' && v !== null && !Array.isArray(v)
-}
-
-function CustomDateRangePicker({ onChange, onCancel }: CustomOptionProps) {
- const [dateRange, setDateRange] = useState<any | undefined>()
-
- return (
- <div className="w-full space-y-4">
- <Calendar
- initialFocus
- mode="range"
- defaultMonth={dateRange?.from}
- selected={dateRange}
- onSelect={setDateRange}
- numberOfMonths={2}
- />
- <div className="flex justify-end gap-2 py-3 px-4 border-t">
- <Button variant="default" onClick={onCancel}>
- Cancel
- </Button>
- <Button
- variant="primary"
- onClick={() => {
- if (dateRange?.from) {
- const from = dayjs(dateRange.from).toISOString()
- const to = dateRange.to ? dayjs(dateRange.to).toISOString() : dayjs().toISOString()
- onChange(`${from}|${to}`)
- }
- }}
- >
- Apply
- </Button>
- </div>
- </div>
- )
-}
-
-interface PreviewFilterPanelProps {
- defaultSearchValue?: string
- defaultToValue?: string
- defaultFromValue?: string
- templates?: any
- isLoading: boolean
- newCount: number
- onRefresh?: () => void
- onSearch?: LogSearchCallback
- onExploreClick?: () => void
- queryUrl: string
- onSelectTemplate: (template: LogTemplate) => void
- table: LogsTableName
- condensedLayout: Boolean
- isShowingEventChart: boolean
- onToggleEventChart: () => void
- csvData?: unknown[]
- onFiltersChange: (filters: Filters) => void
- filters: Filters
- onSelectedDatabaseChange: (id: string) => void
- className?: string
- selectedDatePickerValue: DatePickerValue
- setSelectedDatePickerValue: (value: DatePickerValue) => void
-}
-
-export const PreviewFilterPanelWithUniversal = ({
- isLoading,
- newCount,
- onRefresh,
- onSearch = () => {},
- defaultSearchValue = '',
- defaultFromValue,
- defaultToValue,
- onExploreClick,
- queryUrl,
- condensedLayout,
- isShowingEventChart,
- onToggleEventChart,
- csvData: _csvData,
- onFiltersChange,
- filters,
- table,
- onSelectedDatabaseChange,
- className,
- selectedDatePickerValue: _selectedDatePickerValue,
- setSelectedDatePickerValue: _setSelectedDatePickerValue,
-}: PreviewFilterPanelProps) => {
- const router = useRouter()
- const { ref } = useParams()
-
- const { data: loadBalancers } = useLoadBalancersQuery({ projectRef: ref })
-
- const showDatabaseSelector =
- IS_PLATFORM && LOG_ROUTES_WITH_REPLICA_SUPPORT.includes(router.pathname)
-
- const filterProperties = useMemo(() => {
- const tableFilters = FILTER_OPTIONS[table]
- if (!tableFilters) return []
-
- const properties: FilterProperty[] = []
-
- // Add date range filter
- properties.push({
- label: 'Time Range',
- name: 'timerange',
- type: 'string' as const,
- operators: ['='],
- options: [
- {
- label: 'Last 15 minutes',
- value: `${dayjs().subtract(15, 'minute').toISOString()}|${dayjs().toISOString()}`,
- },
- {
- label: 'Last 30 minutes',
- value: `${dayjs().subtract(30, 'minute').toISOString()}|${dayjs().toISOString()}`,
- },
- {
- label: 'Last hour',
- value: `${dayjs().subtract(1, 'hour').toISOString()}|${dayjs().toISOString()}`,
- },
- {
- label: 'Last 3 hours',
- value: `${dayjs().subtract(3, 'hour').toISOString()}|${dayjs().toISOString()}`,
- },
- {
- label: 'Last 24 hours',
- value: `${dayjs().subtract(24, 'hour').toISOString()}|${dayjs().toISOString()}`,
- },
- {
- label: 'Custom Range...',
- component: (props: CustomOptionProps) => <CustomDateRangePicker {...props} />,
- },
- ],
- })
-
- // Add table-specific filters
- Object.entries(tableFilters).forEach(([_key, filterSet]) => {
- properties.push({
- label: filterSet.label,
- name: filterSet.key,
- type: 'string' as const,
- operators: ['='],
- options: filterSet.options.map((option) => ({
- label: option.label,
- value: option.key,
- description: option.description,
- })),
- })
- })
-
- return properties
- }, [table])
-
- // Convert Logs.Filters to FilterBar.FilterGroup
- const filterBarFilters = useMemo(() => {
- const conditions: FilterCondition[] = []
-
- // Handle date range - only add from defaultValues if no timerange filter exists
- if ((defaultFromValue || defaultToValue) && !filters.timerange) {
- conditions.push({
- propertyName: 'timerange',
- operator: '=',
- value: `${defaultFromValue || ''}|${defaultToValue || ''}`,
- })
- }
-
- // Convert other filters
- Object.entries(filters).forEach(([key, value]) => {
- if (key === 'search_query') return // Skip search_query as it's handled in freeform text
-
- if (typeof value === 'object' && value !== null) {
- // If the filter object is empty, add a condition with no value
- if (Object.keys(value).length === 0) {
- conditions.push({
- propertyName: key,
- operator: '=',
- value: '',
- })
- return
- }
-
- // Handle active filters
- Object.entries(value as Record<string, boolean>).forEach(([subKey, isEnabled]) => {
- if (isEnabled) {
- conditions.push({
- propertyName: key,
- operator: '=',
- value: subKey,
- })
- }
- })
- } else if (value !== undefined && value !== null) {
- conditions.push({
- propertyName: key,
- operator: '=',
- value: String(value),
- })
- }
- })
-
- return {
- logicalOperator: 'AND',
- conditions,
- } as FilterGroup
- }, [filters, defaultFromValue, defaultToValue])
-
- const handleFilterChange = (filterGroup: FilterGroup) => {
- const newFilters: Filters = {}
- let hasTimeRange = false
-
- filterGroup.conditions.forEach((condition) => {
- if (!('propertyName' in condition)) return
-
- const propertyName = condition.propertyName
- if (!propertyName) return
-
- if (propertyName === 'timerange') {
- hasTimeRange = true
- if (condition.value) {
- const value = String(condition.value)
- const [from, to] = value.split('|')
- newFilters.timerange = { [value]: true }
- onSearch('datepicker-change', { from, to })
- } else {
- newFilters.timerange = {}
- onSearch('datepicker-change', { from: '', to: '' })
- }
- } else {
- if (!newFilters[propertyName]) {
- newFilters[propertyName] = {}
- }
-
- if (!condition.value) {
- return
- }
-
- if (typeof condition.value === 'string') {
- const current = newFilters[propertyName]
- const next = isBooleanMap(current) ? { ...current } : {}
- next[condition.value] = true
- newFilters[propertyName] = next
- }
- }
- })
-
- // If timerange was completely removed from the filter group
- if (!hasTimeRange) {
- onSearch('datepicker-change', { from: '', to: '' })
- }
-
- onFiltersChange(newFilters)
- }
-
- return (
- <div className={cn('flex w-full flex-col gap-2', condensedLayout ? ' p-3' : '', className)}>
- <div className="flex items-center justify-between gap-x-2">
- <div className="flex-1">
- <FilterBar
- filterProperties={filterProperties}
- filters={filterBarFilters}
- onFilterChange={handleFilterChange}
- freeformText={defaultSearchValue}
- onFreeformTextChange={(value) => onSearch('search-input-change', { query: value })}
- />
- </div>
-
- <div className="flex items-center gap-x-2">
- <Button
- title="refresh"
- variant="default"
- className="px-1.5"
- icon={
- <div className="relative">
- {newCount > 0 && (
- <div className="absolute -top-3 -right-3 flex items-center justify-center">
- <div className="absolute h-4 w-4 animate-ping rounded-full bg-brand opacity-60"></div>
- <div className="relative z-10 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-500 px-1 text-[10px] font-medium leading-none text-white">
- {newCount > 1000 ? `${Math.floor(newCount / 100) / 10}K` : newCount}
- </div>
- </div>
- )}
- <RefreshCw />
- </div>
- }
- loading={isLoading}
- disabled={isLoading}
- onClick={onRefresh}
- />
-
- <Button
- variant="default"
- onClick={() => onToggleEventChart()}
- icon={isShowingEventChart ? <Eye /> : <EyeOff />}
- >
- Chart
- </Button>
-
- {/* <CSVButton data={csvData} disabled={!Boolean(csvData)} title="Download data" /> */}
-
- {showDatabaseSelector ? (
- <>
- <Tooltip>
- <TooltipTrigger asChild>
- <Button asChild className="px-1.5" variant="default" icon={<Terminal />}>
- <Link href={queryUrl} />
- </Button>
- </TooltipTrigger>
- <TooltipContent side="bottom" className="text-xs">
- Open query in Logs Explorer
- </TooltipContent>
- </Tooltip>
- <DatabaseSelector
- onSelectId={onSelectedDatabaseChange}
- additionalOptions={
- table === LogsTableName.EDGE
- ? (loadBalancers ?? []).length > 0
- ? [{ id: `${ref}-all`, name: 'API Load Balancer' }]
- : []
- : []
- }
- />
- </>
- ) : (
- <Button asChild variant="default" onClick={onExploreClick}>
- <Link href={queryUrl}>Explore via query</Link>
- </Button>
- )}
- </div>
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
index 02518afc7f4..d0fdb2505ed 100644
--- a/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
+++ b/apps/studio/components/interfaces/Settings/Logs/RecentQueriesItem.tsx
@@ -23,7 +23,7 @@ const RecentQueriesItem: React.FC<Props> = ({ item }) => {
</Table.td>
<Table.td className="text-right">
<Button
- variant="alternative"
+ variant="primary"
iconRight={<Play size={10} />}
onClick={() =>
router.push(`/project/${ref}/logs/explorer?q=${encodeURIComponent(item.sql)}`)
diff --git a/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.test.ts b/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.test.ts
new file mode 100644
index 00000000000..1b4f0646410
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.test.ts
@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import {
+ buildClickhouseRewritePrompt,
+ detectLogSource,
+ looksLikeLegacyLogsQuery,
+ rewriteLogsSqlWithAI,
+ stripSqlCodeFences,
+} from './logs-sql-rewrite'
+
+describe('buildClickhouseRewritePrompt', () => {
+ it('includes the query, the schema, and a reply-with-only-SQL instruction', () => {
+ const prompt = buildClickhouseRewritePrompt('select count(*) from edge_logs')
+ expect(prompt).toContain('select count(*) from edge_logs')
+ expect(prompt).toContain('log_attributes')
+ expect(prompt).toContain("source = 'edge_logs'")
+ expect(prompt.toLowerCase()).toContain('reply with only')
+ })
+
+ it('spells out the FROM-to-logs conversion and shows a worked example', () => {
+ const prompt = buildClickhouseRewritePrompt('select 1 from postgres_logs')
+ expect(prompt).toContain("from logs where source = 'postgres_logs'")
+ expect(prompt.toLowerCase()).toContain('remove every')
+ expect(prompt).toContain('cross join unnest')
+ expect(prompt).toContain('BigQuery:')
+ expect(prompt).toContain('ClickHouse:')
+ expect(prompt).toContain("log_attributes['parsed.error_severity']")
+ })
+
+ it('lists the real log_attributes keys when provided and demands exact paths', () => {
+ const prompt = buildClickhouseRewritePrompt('select 1 from edge_logs', [
+ 'request.headers.x_real_ip',
+ 'request.cf.country',
+ ])
+ expect(prompt).toContain("log_attributes['request.headers.x_real_ip']")
+ expect(prompt).toContain("log_attributes['request.cf.country']")
+ expect(prompt.toLowerCase()).toContain('exact')
+ })
+
+ it('omits the keys section when none are provided', () => {
+ const prompt = buildClickhouseRewritePrompt('select 1 from edge_logs')
+ expect(prompt).not.toContain('actual log_attributes keys present')
+ })
+})
+
+describe('detectLogSource', () => {
+ it('reads an explicit source filter', () => {
+ expect(detectLogSource("select 1 from logs where source = 'edge_logs'")).toBe('edge_logs')
+ })
+
+ it('falls back to the legacy FROM table name', () => {
+ expect(detectLogSource('select 1 from edge_logs as t')).toBe('edge_logs')
+ })
+
+ it('maps pg_cron_logs to postgres_logs from either the FROM table or the source filter', () => {
+ expect(detectLogSource('select 1 from pg_cron_logs')).toBe('postgres_logs')
+ expect(detectLogSource("select 1 from logs where source = 'pg_cron_logs'")).toBe(
+ 'postgres_logs'
+ )
+ })
+
+ it('returns undefined for the bare logs table with no source', () => {
+ expect(detectLogSource('select 1 from logs limit 5')).toBeUndefined()
+ })
+
+ it('returns undefined when nothing matches', () => {
+ expect(detectLogSource('select 1')).toBeUndefined()
+ })
+})
+
+describe('looksLikeLegacyLogsQuery', () => {
+ it('flags per-service FROM tables', () => {
+ expect(looksLikeLegacyLogsQuery('select 1 from edge_logs')).toBe(true)
+ })
+
+ it('flags unnest joins and the cast-timestamp idiom', () => {
+ expect(looksLikeLegacyLogsQuery('select 1 from logs cross join unnest(metadata) as m')).toBe(
+ true
+ )
+ expect(looksLikeLegacyLogsQuery('select cast(timestamp as datetime) from logs')).toBe(true)
+ })
+
+ it('does not flag a ClickHouse query against the logs table', () => {
+ expect(
+ looksLikeLegacyLogsQuery("select timestamp from logs where source = 'edge_logs' limit 5")
+ ).toBe(false)
+ })
+})
+
+describe('stripSqlCodeFences', () => {
+ it('removes a ```sql fenced block', () => {
+ expect(stripSqlCodeFences('```sql\nselect 1 from logs\n```')).toBe('select 1 from logs')
+ })
+
+ it('removes a plain ``` fenced block', () => {
+ expect(stripSqlCodeFences('```\nselect 1\n```')).toBe('select 1')
+ })
+
+ it('leaves unfenced SQL untouched (trimmed)', () => {
+ expect(stripSqlCodeFences(' select 1 from logs ')).toBe('select 1 from logs')
+ })
+
+ it('extracts the fenced block when wrapped in prose', () => {
+ expect(stripSqlCodeFences('Here is the rewrite:\n```sql\nselect 1 from logs\n```')).toBe(
+ 'select 1 from logs'
+ )
+ })
+})
+
+describe('rewriteLogsSqlWithAI', () => {
+ afterEach(() => {
+ vi.unstubAllGlobals()
+ })
+
+ it('posts to the completion endpoint and returns the cleaned query', async () => {
+ const fetchMock = vi.fn().mockResolvedValue({
+ ok: true,
+ json: async () => '```sql\nselect 1 from logs\n```',
+ })
+ vi.stubGlobal('fetch', fetchMock)
+
+ const result = await rewriteLogsSqlWithAI({
+ sql: 'select 1 from edge_logs',
+ projectRef: 'abc',
+ })
+
+ expect(result).toBe('select 1 from logs')
+ const [url, init] = fetchMock.mock.calls[0]
+ expect(url).toContain('/api/ai/code/complete')
+ const body = JSON.parse(init.body)
+ expect(body.dialect).toBe('clickhouse')
+ expect(body.completionMetadata.selection).toBe('select 1 from edge_logs')
+ expect(body.completionMetadata.prompt.toLowerCase()).toContain('reply with only')
+ })
+
+ it('throws when the request fails', async () => {
+ vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: false, text: async () => 'boom' }))
+ await expect(rewriteLogsSqlWithAI({ sql: 'select 1', projectRef: 'abc' })).rejects.toThrow(
+ 'boom'
+ )
+ })
+
+ it('throws when the model returns an empty query', async () => {
+ vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true, json: async () => ' ' }))
+ await expect(rewriteLogsSqlWithAI({ sql: 'select 1', projectRef: 'abc' })).rejects.toThrow(
+ 'empty'
+ )
+ })
+})
diff --git a/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.ts b/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.ts
new file mode 100644
index 00000000000..ca532f204a4
--- /dev/null
+++ b/apps/studio/components/interfaces/Settings/Logs/logs-sql-rewrite.ts
@@ -0,0 +1,142 @@
+import { BASE_PATH } from '@/lib/constants'
+
+export const LOGS_SCHEMA_REFERENCE = `The logs table (ClickHouse) has these columns:
+- id (String)
+- timestamp (DateTime64, UTC) formatted like 2026-06-22T09:34:06.215000 (ISO 8601, microsecond precision, no trailing Z)
+- event_message (String): the raw log line
+- severity_text (String): log level when present
+- source (String): the service the log belongs to. Always filter by it, e.g. where source = 'edge_logs'.
+- log_attributes (Map(String, String)): structured per-source fields, read as log_attributes['key']. Values are strings, so wrap numeric ones in toInt32OrZero(...) for comparisons.
+
+Sources and their common log_attributes keys:
+- edge_logs: request.method, request.path, request.search, response.status_code, identifier
+- postgres_logs: parsed.error_severity, parsed.detail, parsed.hint, parsed.query, identifier
+- pg_cron logs live under source = 'postgres_logs' (parsed.error_severity, parsed.query)
+- auth_logs: level, status, path, msg, error
+- function_edge_logs: response.status_code, request.method, request.pathname, function_id, execution_id, execution_time_ms
+- function_logs: event_type, function_id, execution_id, level
+- storage_logs, realtime_logs, postgrest_logs, supavisor_logs, pgbouncer_logs: mostly id, timestamp, event_message, with extra fields in log_attributes
+
+Rules: always filter by source; the editor applies the selected time range so a timestamp filter is usually unnecessary; the old BigQuery unnest joins become log_attributes['key'] lookups (drop the metadata root).`
+
+function renderAvailableKeys(availableKeys?: string[]): string {
+ if (!availableKeys || availableKeys.length === 0) return ''
+ const list = availableKeys.map((key) => `- log_attributes['${key}']`).join('\n')
+ return `\nThe actual log_attributes keys present for this source are listed below. Use these EXACT keys — do not invent, shorten, or drop any dotted prefix. If a BigQuery field maps to one of these (e.g. request.headers.x_real_ip, request.cf.country), use the full key shown here:
+${list}\n`
+}
+
+export function buildClickhouseRewritePrompt(sql: string, availableKeys?: string[]): string {
+ return `${LOGS_SCHEMA_REFERENCE}
+${renderAvailableKeys(availableKeys)}
+Convert the BigQuery logs query below to ClickHouse SQL for the logs table. There are no per-service tables and no unnest joins in ClickHouse. Follow these rules exactly:
+
+1. Replace the FROM table with the single logs table and filter by source. The old table name is the source value: "from postgres_logs as t" becomes "from logs where source = 'postgres_logs'". This is required, never select from a table like postgres_logs or edge_logs.
+2. Remove every join that unnests metadata or its structs. This includes "cross join unnest(...)" and "left join unnest(...) on true".
+3. Replace any column that came from an unnest alias with a log_attributes lookup. A field off unnest(metadata) becomes log_attributes['field']; a field off a nested struct like unnest(m.parsed) becomes log_attributes['parsed.field'] (keep the struct name as a dotted prefix, drop the metadata root and every alias). When the actual keys are listed above, match against them and use the full dotted key exactly.
+4. Wrap numeric fields in toInt32OrZero(...) before comparing or aggregating them.
+5. Replace BigQuery functions with ClickHouse equivalents: regexp_contains(x, 'p') becomes match(x, 'p'), or x ILIKE '%p%' for a plain substring. Replace cast(timestamp as datetime) with timestamp. Use count() instead of count(*).
+6. Preserve the original select list, filters, group by, order by, and limit intent.
+
+Example.
+BigQuery:
+select count(t.timestamp) as count, p.error_severity
+from postgres_logs as t
+cross join unnest(metadata) as m
+cross join unnest(m.parsed) as p
+where p.error_severity in ('ERROR', 'FATAL', 'PANIC')
+group by p.error_severity
+order by count desc
+limit 100
+
+ClickHouse:
+select count() as count, log_attributes['parsed.error_severity'] as error_severity
+from logs
+where source = 'postgres_logs'
+ and log_attributes['parsed.error_severity'] in ('ERROR', 'FATAL', 'PANIC')
+group by log_attributes['parsed.error_severity']
+order by count desc
+limit 100
+
+Reply with ONLY the rewritten SQL query: no explanation, no comments, and no markdown code fences.
+
+${sql}`
+}
+
+export function stripSqlCodeFences(text: string): string {
+ const trimmed = text.trim()
+ const fenced = trimmed.match(/```(?:sql)?\s*\n?([\s\S]*?)\n?```/i)
+ return (fenced ? fenced[1] : trimmed).trim()
+}
+
+const SOURCE_ALIASES: Record<string, string> = {
+ pg_cron_logs: 'postgres_logs',
+}
+
+export function detectLogSource(sql: string): string | undefined {
+ const bySource = sql.match(/source\s*=\s*'([^']+)'/i)
+ if (bySource) {
+ const source = bySource[1].toLowerCase()
+ return SOURCE_ALIASES[source] ?? source
+ }
+ const byFrom = sql.match(/\bfrom\s+([a-z_][a-z0-9_]*)/i)
+ if (byFrom) {
+ const table = byFrom[1].toLowerCase()
+ if (table === 'logs') return undefined
+ return SOURCE_ALIASES[table] ?? table
+ }
+ return undefined
+}
+
+export function looksLikeLegacyLogsQuery(sql: string): boolean {
+ const lower = sql.toLowerCase()
+ if (/\bunnest\s*\(/.test(lower)) return true
+ if (/cast\s*\(\s*timestamp\s+as\s+datetime\s*\)/.test(lower)) return true
+ const byFrom = lower.match(/\bfrom\s+([a-z_][a-z0-9_]*)/)
+ return byFrom ? byFrom[1] !== 'logs' : false
+}
+
+export interface RewriteLogsSqlArgs {
+ sql: string
+ projectRef: string
+ connectionString?: string | null
+ orgSlug?: string
+ authorizationHeader?: string | null
+ availableKeys?: string[]
+}
+
+export async function rewriteLogsSqlWithAI(args: RewriteLogsSqlArgs) {
+ const { sql, projectRef, connectionString, orgSlug, authorizationHeader, availableKeys } = args
+
+ const response = await fetch(`${BASE_PATH}/api/ai/code/complete`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...(authorizationHeader ? { Authorization: authorizationHeader } : {}),
+ },
+ body: JSON.stringify({
+ projectRef,
+ connectionString,
+ language: 'sql',
+ dialect: 'clickhouse',
+ orgSlug,
+ completionMetadata: {
+ textBeforeCursor: '',
+ textAfterCursor: '',
+ language: 'pgsql',
+ prompt: buildClickhouseRewritePrompt(sql, availableKeys),
+ selection: sql,
+ },
+ }),
+ })
+
+ if (!response.ok) {
+ const errorText = await response.text()
+ throw new Error(errorText || 'Failed to rewrite the query')
+ }
+
+ const raw = await response.json()
+ const rewritten = stripSqlCodeFences(typeof raw === 'string' ? raw : String(raw))
+ if (!rewritten) throw new Error('The assistant returned an empty query')
+ return rewritten
+}
diff --git a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
index 3793449b1bf..f86c6c13bed 100644
--- a/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
+++ b/apps/studio/components/interfaces/SignIn/ForgotPasswordWizard.tsx
@@ -5,7 +5,7 @@ import { useRef, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, Form, FormControl, FormField, Input } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import * as z from 'zod'
@@ -76,6 +76,7 @@ const ConfirmResetCodeForm = ({ email }: { email: string }) => {
<Form {...codeForm}>
<form
id="code-input-form"
+ method="POST"
className="flex flex-col pt-4 space-y-4"
onSubmit={codeForm.handleSubmit(onCodeEntered)}
>
@@ -148,6 +149,7 @@ const ForgotPasswordForm = ({ onSuccess }: { onSuccess: (email: string) => void
<Form {...forgotPasswordForm}>
<form
id="forgot-password-form"
+ method="POST"
className="flex flex-col pt-4 space-y-4"
onSubmit={forgotPasswordForm.handleSubmit(onForgotPassword)}
>
diff --git a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
index e928bcbc81c..09cb69ccf4b 100644
--- a/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/ResetPasswordForm.tsx
@@ -76,7 +76,7 @@ export const ResetPasswordForm = () => {
return (
<Form {...form}>
- <form onSubmit={form.handleSubmit(onResetPassword)} className="space-y-4 pt-4">
+ <form method="POST" onSubmit={form.handleSubmit(onResetPassword)} className="space-y-4 pt-4">
{requireCurrentPassword && (
<FormField
control={form.control}
diff --git a/apps/studio/components/interfaces/SignIn/SignInForm.tsx b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
index db91be3317c..755d30a08d1 100644
--- a/apps/studio/components/interfaces/SignIn/SignInForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInForm.tsx
@@ -14,7 +14,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import z from 'zod'
import { LastSignInWrapper } from './LastSignInWrapper'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useAddLoginEvent } from '@/data/misc/audit-login-mutation'
import { getMfaAuthenticatorAssuranceLevel } from '@/data/profile/mfa-authenticator-assurance-level-query'
import { useLastSignIn } from '@/hooks/misc/useLastSignIn'
@@ -121,7 +121,12 @@ export const SignInForm = () => {
return (
<Form {...form}>
- <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
+ <form
+ id={formId}
+ method="POST"
+ className="flex flex-col gap-4"
+ onSubmit={form.handleSubmit(onSubmit)}
+ >
{authError && <AlertError error={authError} subject="Error while signing in" />}
<FormField
key="email"
diff --git a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
index 3ac88449fcc..88198f6808d 100644
--- a/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInMfaForm.tsx
@@ -14,7 +14,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import z from 'zod'
import { SupportLink } from '../Support/SupportLink'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useMfaChallengeAndVerifyMutation } from '@/data/profile/mfa-challenge-and-verify-mutation'
import { useMfaListFactorsQuery } from '@/data/profile/mfa-list-factors-query'
import { useSignOut } from '@/lib/auth'
@@ -128,7 +128,12 @@ export const SignInMfaForm = ({ context = 'sign-in' }: SignInMfaFormProps) => {
{isSuccessFactors && (
<Form {...form}>
- <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
+ <form
+ id={formId}
+ method="POST"
+ className="flex flex-col gap-4"
+ onSubmit={form.handleSubmit(onSubmit)}
+ >
<FormField
key="code"
name="code"
diff --git a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
index 5912d08543a..e27443d1363 100644
--- a/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignInSSOForm.tsx
@@ -73,7 +73,12 @@ export const SignInSSOForm = () => {
return (
<Form {...form}>
- <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
+ <form
+ id={formId}
+ method="POST"
+ className="flex flex-col gap-4"
+ onSubmit={form.handleSubmit(onSubmit)}
+ >
<FormField
key="email"
name="email"
diff --git a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
index f1bcacd97aa..14cbcbf82c4 100644
--- a/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
+++ b/apps/studio/components/interfaces/SignIn/SignUpForm.tsx
@@ -25,6 +25,8 @@ import PasswordConditionsHelper from './PasswordConditionsHelper'
import { useSignUpMutation } from '@/data/misc/signup-mutation'
import { BASE_PATH } from '@/lib/constants'
import { buildPathWithParams } from '@/lib/gotrue'
+import { classifyApiError, classifyValidationError } from '@/lib/telemetry/funnel-errors'
+import { useTrackFunnelError } from '@/lib/telemetry/use-track-funnel-error'
const schema = z.object({
email: z.string().min(1, 'Email is required').email('Must be a valid email'),
@@ -67,6 +69,8 @@ export const SignUpForm = () => {
token: parseAsString.withDefault(''),
})
+ const trackFunnelError = useTrackFunnelError()
+
const { mutate: signup, isPending: isSigningUp } = useSignUpMutation({
onSuccess: () => {
toast.success(`Signed up successfully!`)
@@ -76,6 +80,7 @@ export const SignUpForm = () => {
setCaptchaToken(null)
captchaRef.current?.resetCaptcha()
toast.error(`Failed to sign up: ${error.message}`)
+ trackFunnelError('signup', classifyApiError('signup', error), 'toast')
},
})
@@ -144,7 +149,14 @@ export const SignUpForm = () => {
)}
>
<Form {...form}>
- <form id={formId} className="flex flex-col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
+ <form
+ id={formId}
+ method="POST"
+ className="flex flex-col gap-4"
+ onSubmit={form.handleSubmit(onSubmit, (errors) =>
+ trackFunnelError('signup', classifyValidationError('signup', errors), 'form')
+ )}
+ >
<FormField
key="email"
name="email"
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/AnalyticsBucketDetails.constants.ts b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/AnalyticsBucketDetails.constants.ts
index fe4274afc4d..cb103ee81de 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/AnalyticsBucketDetails.constants.ts
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/AnalyticsBucketDetails.constants.ts
@@ -19,7 +19,7 @@ export const LABELS: Record<string, string> = {
export const DESCRIPTIONS: Record<string, string> = {
vault_aws_access_key_id: 'Matches the AWS access key ID from an S3 access key.',
vault_aws_secret_access_key: 'Matches the AWS secret access from an S3 access key.',
- vault_token: 'Corresponds to the service role key.',
+ vault_token: 'Corresponds to the secret or service role key.',
warehouse: 'Matches the name of this bucket.',
's3.endpoint': '',
catalog_uri: '',
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/BucketCallouts.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/BucketCallouts.tsx
new file mode 100644
index 00000000000..3876dbf344b
--- /dev/null
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/BucketCallouts.tsx
@@ -0,0 +1,136 @@
+import Link from 'next/link'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+import { SimpleConfigurationDetails } from './SimpleConfigurationDetails'
+import { WrapperMeta } from '@/components/interfaces/Integrations/Wrappers/Wrappers.types'
+import { ScaffoldSection } from '@/components/layouts/Scaffold'
+import { InlineLink } from '@/components/ui/InlineLink'
+import { DatabaseExtension } from '@/data/database-extensions/database-extensions-query'
+import { useIcebergWrapperCreateMutation } from '@/data/storage/iceberg-wrapper-create-mutation'
+import { DOCS_URL } from '@/lib/constants'
+import { isLessThan } from '@/lib/semver'
+
+export const ExtensionNotInstalled = ({
+ bucketName,
+ projectRef,
+ wrapperMeta,
+ wrappersExtension,
+}: {
+ bucketName?: string
+ projectRef: string
+ wrapperMeta: WrapperMeta
+ wrappersExtension: DatabaseExtension
+}) => {
+ const databaseNeedsUpgrading = isLessThan(
+ wrappersExtension?.default_version ?? '',
+ wrapperMeta?.minimumExtensionVersion ?? ''
+ )
+
+ return (
+ <>
+ <ScaffoldSection isFullWidth>
+ <Admonition type="warning" title="Missing required extension">
+ <p>
+ The Wrappers extension is required in order to query analytics tables.{' '}
+ {databaseNeedsUpgrading &&
+ 'Please first upgrade your database and then install the extension.'}{' '}
+ <InlineLink
+ href={`${DOCS_URL}/guides/database/extensions/wrappers/iceberg`}
+ target="_blank"
+ rel="noreferrer"
+ className="text-foreground-lighter hover:text-foreground transition-colors"
+ >
+ Learn more
+ </InlineLink>
+ </p>
+ <Button variant="default" asChild className="mt-2" onClick={() => {}}>
+ <Link
+ href={
+ databaseNeedsUpgrading
+ ? `/project/${projectRef}/settings/infrastructure`
+ : `/project/${projectRef}/database/extensions?filter=wrappers`
+ }
+ >
+ {databaseNeedsUpgrading ? 'Upgrade database' : 'Install extension'}
+ </Link>
+ </Button>
+ </Admonition>
+ </ScaffoldSection>
+ <SimpleConfigurationDetails bucketName={bucketName} />
+ </>
+ )
+}
+
+export const ExtensionNeedsUpgrade = ({
+ bucketName,
+ projectRef,
+ wrapperMeta,
+ wrappersExtension,
+}: {
+ bucketName?: string
+ projectRef: string
+ wrapperMeta: WrapperMeta
+ wrappersExtension: DatabaseExtension
+}) => {
+ // [Joshen] Default version is what's on the DB, so if the installed version is already the default version
+ // but still doesnt meet the minimum extension version, then DB upgrade is required
+ const databaseNeedsUpgrading =
+ wrappersExtension?.installed_version === wrappersExtension?.default_version
+
+ return (
+ <>
+ <ScaffoldSection isFullWidth>
+ <Admonition type="warning" title="Outdated extension version">
+ <p>
+ The {wrapperMeta.label} wrapper requires a minimum extension version of{' '}
+ {wrapperMeta.minimumExtensionVersion}. You have version{' '}
+ {wrappersExtension?.installed_version} installed. Please{' '}
+ {databaseNeedsUpgrading && 'first upgrade your database, and then '}update the extension
+ by disabling and enabling the Wrappers extension.
+ </p>
+ <p>
+ Before reinstalling the wrapper extension, you must first remove all existing wrappers.
+ Afterward, you can recreate the wrappers.
+ </p>
+ <Button asChild variant="default">
+ <Link
+ href={
+ databaseNeedsUpgrading
+ ? `/project/${projectRef}/settings/infrastructure`
+ : `/project/${projectRef}/database/extensions?filter=wrappers`
+ }
+ >
+ {databaseNeedsUpgrading ? 'Upgrade database' : 'Extensions'}
+ </Link>
+ </Button>
+ </Admonition>
+ </ScaffoldSection>
+ <SimpleConfigurationDetails bucketName={bucketName} />
+ </>
+ )
+}
+
+export const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
+ const { mutateAsync: createIcebergWrapper, isPending: isCreatingIcebergWrapper } =
+ useIcebergWrapperCreateMutation()
+
+ const onSetupWrapper = async () => {
+ if (!bucketName) return console.error('Bucket name is required')
+ await createIcebergWrapper({ bucketName })
+ }
+
+ return (
+ <>
+ <ScaffoldSection isFullWidth>
+ <Admonition type="warning" title="Missing integration">
+ <p>The Iceberg Wrapper integration is required in order to query analytics tables.</p>
+ <Button variant="default" loading={isCreatingIcebergWrapper} onClick={onSetupWrapper}>
+ Install wrapper
+ </Button>
+ </Admonition>
+ </ScaffoldSection>
+ <SimpleConfigurationDetails bucketName={bucketName} />
+ </>
+ )
+}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
index e96f0ae1688..a4e936a0d5d 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/NamespaceWithTables/TableRowComponent.tsx
@@ -345,7 +345,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen
href={`/project/${projectRef}/database/replication/${pipeline?.id}?search=${inferredPostgresTable.schema}.${inferredPostgresTable.name}`}
>
<Eye size={12} className="text-foreground-lighter" />
- <p>View replication</p>
+ <p>View pipeline</p>
</Link>
</DropdownMenuItem>
)}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx
index 386def2c402..6000042a6bf 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx
@@ -1,8 +1,11 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
import { Card } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { DESCRIPTIONS, LABELS, OPTION_ORDER } from './AnalyticsBucketDetails.constants'
import { CopyEnvButton } from './CopyEnvButton'
import { DecryptedReadOnlyInput } from './DecryptedReadOnlyInput'
+import { UpdateCatalogTokenDialog } from './UpdateCatalogTokenDialog'
import { useAnalyticsBucketWrapperInstance } from './useAnalyticsBucketWrapperInstance'
import { INTEGRATIONS } from '@/components/interfaces/Integrations/Landing/Integrations.constants'
import { WrapperMeta } from '@/components/interfaces/Integrations/Wrappers/Wrappers.types'
@@ -14,9 +17,16 @@ import {
ScaffoldSectionTitle,
} from '@/components/layouts/Scaffold'
import { InlineLink } from '@/components/ui/InlineLink'
+import { useAPIKeys } from '@/data/api-keys/api-keys-query'
+import { useVaultSecretDecryptedValueQuery } from '@/data/vault/vault-secret-decrypted-value-query'
+import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL } from '@/lib/constants'
export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string }) => {
+ const { data: project } = useSelectedProjectQuery()
+ const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
+
const integration = INTEGRATIONS.find((i) => i.id === 'iceberg_wrapper' && i.type === 'wrapper')
const wrapperMeta = (integration?.type === 'wrapper' && integration.meta) as WrapperMeta
@@ -24,6 +34,23 @@ export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string
const { data: wrapperInstance } = useAnalyticsBucketWrapperInstance({ bucketId: bucketName })
const wrapperValues = convertKVStringArrayToJson(wrapperInstance?.server_options ?? [])
+ const { data: decryptedToken, isSuccess: isSuccessVaultDecrypt } =
+ useVaultSecretDecryptedValueQuery(
+ {
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ id: wrapperValues?.vault_token,
+ },
+ { enabled: canReadAPIKeys }
+ )
+
+ const { data: apiKeysData, isSuccess: isSuccessApiKeys } = useAPIKeys(
+ { projectRef: project?.ref, reveal: true },
+ { enabled: canReadAPIKeys }
+ )
+
+ const isTokenValid = apiKeysData?.allSecretKeys.some((x) => x.api_key === decryptedToken)
+
if (!wrapperInstance) return null
return (
@@ -48,6 +75,17 @@ export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string
/>
</ScaffoldHeader>
+ {isSuccessApiKeys && isSuccessVaultDecrypt && !isTokenValid && (
+ <Admonition type="warning" title="Catalog token is no longer valid" className="mb-4">
+ <p>
+ The Iceberg wrapper's catalog token doesn't match with any of your project's API keys,
+ and hence authorization will fail when connecting to your bucket. Update the catalog
+ token to use any of your project's API keys.
+ </p>
+ {canReadAPIKeys && <UpdateCatalogTokenDialog vaultTokenId={wrapperValues?.vault_token} />}
+ </Admonition>
+ )}
+
<Card>
{wrapperMeta.server.options
.filter((option) => !option.hidden && wrapperValues[option.name])
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateCatalogTokenDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateCatalogTokenDialog.tsx
new file mode 100644
index 00000000000..21dc8212a49
--- /dev/null
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/UpdateCatalogTokenDialog.tsx
@@ -0,0 +1,148 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'common'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+ Button,
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogSection,
+ DialogSectionSeparator,
+ DialogTitle,
+ DialogTrigger,
+ Select,
+ SelectContent,
+ SelectGroup,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+
+import { InlineLink } from '@/components/ui/InlineLink'
+import { useAPIKeys } from '@/data/api-keys/api-keys-query'
+import { fdwKeys } from '@/data/fdw/keys'
+import { vaultSecretsKeys } from '@/data/vault/keys'
+import { useVaultSecretUpdateMutation } from '@/data/vault/vault-secret-update-mutation'
+import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
+
+export const UpdateCatalogTokenDialog = ({ vaultTokenId }: { vaultTokenId?: string }) => {
+ const { ref } = useParams()
+ const queryClient = useQueryClient()
+ const { data: project } = useSelectedProjectQuery()
+ const { can: canReadAPIKeys } = useAsyncCheckPermissions(PermissionAction.SECRETS_READ, '*')
+
+ const [open, setOpen] = useState(false)
+ const [selectedKey, setSelectedKey] = useState<string>()
+
+ const { data: apiKeysData, isPending } = useAPIKeys(
+ { projectRef: ref, reveal: true },
+ { enabled: canReadAPIKeys }
+ )
+ const { allSecretKeys } = apiKeysData ?? {}
+
+ const { mutate: updateVaultSecret, isPending: isUpdating } = useVaultSecretUpdateMutation({
+ onSuccess: async () => {
+ await Promise.all([
+ queryClient.invalidateQueries({ queryKey: fdwKeys.list(ref) }),
+ queryClient.invalidateQueries({
+ queryKey: vaultSecretsKeys.getDecryptedValue(ref, vaultTokenId),
+ }),
+ ])
+
+ toast.success('Successfully updated catalog token!')
+ setOpen(false)
+ },
+ })
+
+ const onSubmit = () => {
+ if (!project) return console.error('Project is required')
+ if (!vaultTokenId) return toast.error('ID of catalog token is missing')
+
+ updateVaultSecret({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ id: vaultTokenId,
+ secret: selectedKey,
+ skipClearCache: true,
+ })
+ }
+
+ useEffect(() => {
+ if (allSecretKeys?.length) setSelectedKey(allSecretKeys[0].api_key)
+ }, [allSecretKeys])
+
+ return (
+ <Dialog open={open} onOpenChange={setOpen}>
+ <DialogTrigger asChild>
+ <Button variant="default" className="mt-1">
+ Update catalog token
+ </Button>
+ </DialogTrigger>
+ <DialogContent aria-describedby={undefined}>
+ <DialogHeader>
+ <DialogTitle>Update Iceberg wrapper catalog token</DialogTitle>
+ </DialogHeader>
+ <DialogSectionSeparator />
+
+ {allSecretKeys?.length === 0 && (
+ <Admonition
+ type="default"
+ title="Project has no API secret keys"
+ className="rounded-none border-x-0 border-t-0"
+ >
+ <p>
+ Create an API secret key from your{' '}
+ <InlineLink href={`/project/${ref}/settings/api-keys`}>project's settings</InlineLink>{' '}
+ first
+ </p>
+ </Admonition>
+ )}
+ <DialogSection>
+ <FormItemLayout
+ isReactForm={false}
+ label="Select a secret key to use as your catalog token"
+ >
+ {isPending ? (
+ <ShimmeringLoader className="py-4" />
+ ) : (
+ <Select value={selectedKey} onValueChange={setSelectedKey}>
+ <SelectTrigger>
+ <SelectValue />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectGroup>
+ {apiKeysData?.allSecretKeys.map((x) => (
+ <SelectItem key={x.id} value={x.api_key}>
+ {x.prefix} •••
+ </SelectItem>
+ ))}
+ </SelectGroup>
+ </SelectContent>
+ </Select>
+ )}
+ </FormItemLayout>
+ </DialogSection>
+ <DialogFooter>
+ <Button variant="default" disabled={isUpdating} onClick={() => setOpen(false)}>
+ Cancel
+ </Button>
+ <Button
+ variant="primary"
+ disabled={!selectedKey}
+ loading={isUpdating}
+ onClick={() => onSubmit()}
+ >
+ Update token
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
index 4a19e1a2d7a..3bb5374afb7 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
@@ -1,18 +1,17 @@
import { useParams } from 'common'
import { uniq } from 'lodash'
import { Loader2 } from 'lucide-react'
-import Link from 'next/link'
import { useRouter } from 'next/router'
import { parseAsBoolean, useQueryState } from 'nuqs'
import { useEffect, useMemo, useState } from 'react'
import { Button, Card, CardContent } from 'ui'
-import { EmptyStatePresentational } from 'ui-patterns'
-import { Admonition } from 'ui-patterns/admonition'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { GenericTableLoader } from 'ui-patterns/ShimmeringLoader'
import { DeleteAnalyticsBucketModal } from '../DeleteAnalyticsBucketModal'
import { useSelectedAnalyticsBucket } from '../useSelectedAnalyticsBucket'
import { HIDE_REPLICATION_USER_FLOW } from './AnalyticsBucketDetails.constants'
+import { ExtensionNeedsUpgrade, ExtensionNotInstalled, WrapperMissing } from './BucketCallouts'
import { BucketHeader } from './BucketHeader'
import { CreateTableInstructions } from './CreateTable/CreateTableInstructions'
import { NamespaceWithTables } from './NamespaceWithTables'
@@ -30,18 +29,10 @@ import {
ScaffoldSection,
ScaffoldSectionTitle,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
-import { InlineLink } from '@/components/ui/InlineLink'
-import {
- DatabaseExtension,
- useDatabaseExtensionsQuery,
-} from '@/data/database-extensions/database-extensions-query'
-import { useReplicationPipelineStatusQuery } from '@/data/replication/pipeline-status-query'
-import { useStartPipelineMutation } from '@/data/replication/start-pipeline-mutation'
+import { AlertError } from '@/components/ui/AlertError'
+import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-extensions-query'
import { useIcebergNamespacesQuery } from '@/data/storage/iceberg-namespaces-query'
-import { useIcebergWrapperCreateMutation } from '@/data/storage/iceberg-wrapper-create-mutation'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-import { DOCS_URL } from '@/lib/constants'
export const AnalyticBucketDetails = () => {
const router = useRouter()
@@ -66,30 +57,14 @@ export const AnalyticBucketDetails = () => {
const [pollIntervalNamespaces, setPollIntervalNamespaces] = useState(0)
const [pollIntervalNamespaceTables, setPollIntervalNamespaceTables] = useState(0)
- const { mutateAsync: startPipeline, isPending: isStartingPipeline } = useStartPipelineMutation()
-
const {
publication,
- pipeline,
icebergWrapper: wrapperInstance,
isLoadingWrapperInstance,
} = useAnalyticsBucketAssociatedEntities({
projectRef,
bucketId: bucket?.name,
})
- const { data, isSuccess: isSuccessPipelineStatus } = useReplicationPipelineStatusQuery(
- { projectRef, pipelineId: pipeline?.id },
- {
- refetchInterval: (query) => {
- const data = query.state.data
- if (data?.status.name !== 'started') return 4000
- else return false
- },
- }
- )
- const pipelineStatus = data?.status.name
- const isPipelineRunning = pipelineStatus === 'started'
- const isPipelineStopped = ['failed', 'stopped'].includes(pipelineStatus ?? '')
const wrapperValues = convertKVStringArrayToJson(wrapperInstance?.server_options ?? [])
const integration = INTEGRATIONS.find((i) => i.id === 'iceberg_wrapper' && i.type === 'wrapper')
@@ -224,69 +199,20 @@ export const AnalyticBucketDetails = () => {
) : null}
</>
) : (
- <>
- {!!pipeline && !!isSuccessPipelineStatus && !isPipelineRunning && (
- <Admonition
- type="note"
- layout="horizontal"
- className="[&>div]:pl-10 [&>div]:translate-y-[-3px]"
- childProps={{ title: { className: 'block capitalize-sentence' } }}
- showIcon={isPipelineStopped}
- title={
- isPipelineStopped
- ? `Replication on the bucket has ${pipelineStatus}`
- : `${pipelineStatus} replication on the bucket...`
- }
- description={
- isPipelineStopped
- ? 'Data changes from Postgres tables is currently not streaming to their corresponding analytics bucket table'
- : 'Data changes from Postgres tables will resume streaming once pipeline has started'
- }
- actions={
- <div className="flex items-center gap-x-2">
- <Button asChild variant="default">
- <Link
- href={`/project/${projectRef}/database/replication/${pipeline.replicator_id}`}
- >
- View replication
- </Link>
- </Button>
- {isPipelineStopped && (
- <Button
- variant="default"
- loading={isStartingPipeline}
- onClick={async () => {
- if (projectRef) {
- await startPipeline({ projectRef, pipelineId: pipeline.id })
- }
- }}
- >
- Restart
- </Button>
- )}
- </div>
- }
- >
- {!isPipelineStopped && (
- <Loader2 size={18} className="absolute top-1.5 left-[3px] animate-spin" />
- )}
- </Admonition>
- )}
- <div className="flex flex-col gap-y-10">
- {namespaces.map(({ namespace, schema, tables }) => (
- <NamespaceWithTables
- key={namespace}
- namespace={namespace}
- sourceType="direct"
- schema={schema}
- tables={tables as any}
- wrapperValues={wrapperValues}
- pollIntervalNamespaceTables={pollIntervalNamespaceTables}
- setPollIntervalNamespaceTables={setPollIntervalNamespaceTables}
- />
- ))}
- </div>
- </>
+ <div className="flex flex-col gap-y-10">
+ {namespaces.map(({ namespace, schema, tables }) => (
+ <NamespaceWithTables
+ key={namespace}
+ namespace={namespace}
+ sourceType="direct"
+ schema={schema}
+ tables={tables as any}
+ wrapperValues={wrapperValues}
+ pollIntervalNamespaceTables={pollIntervalNamespaceTables}
+ setPollIntervalNamespaceTables={setPollIntervalNamespaceTables}
+ />
+ ))}
+ </div>
)}
</ScaffoldSection>
@@ -329,125 +255,3 @@ export const AnalyticBucketDetails = () => {
</>
)
}
-
-const ExtensionNotInstalled = ({
- bucketName,
- projectRef,
- wrapperMeta,
- wrappersExtension,
-}: {
- bucketName?: string
- projectRef: string
- wrapperMeta: WrapperMeta
- wrappersExtension: DatabaseExtension
-}) => {
- const databaseNeedsUpgrading =
- (wrappersExtension?.default_version ?? '') < (wrapperMeta?.minimumExtensionVersion ?? '')
-
- return (
- <>
- <ScaffoldSection isFullWidth>
- <Admonition type="warning" title="Missing required extension">
- <p>
- The Wrappers extension is required in order to query analytics tables.{' '}
- {databaseNeedsUpgrading &&
- 'Please first upgrade your database and then install the extension.'}{' '}
- <InlineLink
- href={`${DOCS_URL}/guides/database/extensions/wrappers/iceberg`}
- target="_blank"
- rel="noreferrer"
- className="text-foreground-lighter hover:text-foreground transition-colors"
- >
- Learn more
- </InlineLink>
- </p>
- <Button variant="default" asChild className="mt-2" onClick={() => {}}>
- <Link
- href={
- databaseNeedsUpgrading
- ? `/project/${projectRef}/settings/infrastructure`
- : `/project/${projectRef}/database/extensions?filter=wrappers`
- }
- >
- {databaseNeedsUpgrading ? 'Upgrade database' : 'Install extension'}
- </Link>
- </Button>
- </Admonition>
- </ScaffoldSection>
- <SimpleConfigurationDetails bucketName={bucketName} />
- </>
- )
-}
-
-const ExtensionNeedsUpgrade = ({
- bucketName,
- projectRef,
- wrapperMeta,
- wrappersExtension,
-}: {
- bucketName?: string
- projectRef: string
- wrapperMeta: WrapperMeta
- wrappersExtension: DatabaseExtension
-}) => {
- // [Joshen] Default version is what's on the DB, so if the installed version is already the default version
- // but still doesnt meet the minimum extension version, then DB upgrade is required
- const databaseNeedsUpgrading =
- wrappersExtension?.installed_version === wrappersExtension?.default_version
-
- return (
- <>
- <ScaffoldSection isFullWidth>
- <Admonition type="warning" title="Outdated extension version">
- <p>
- The {wrapperMeta.label} wrapper requires a minimum extension version of{' '}
- {wrapperMeta.minimumExtensionVersion}. You have version{' '}
- {wrappersExtension?.installed_version} installed. Please{' '}
- {databaseNeedsUpgrading && 'first upgrade your database, and then '}update the extension
- by disabling and enabling the Wrappers extension.
- </p>
- <p>
- Before reinstalling the wrapper extension, you must first remove all existing wrappers.
- Afterward, you can recreate the wrappers.
- </p>
- <Button asChild variant="default">
- <Link
- href={
- databaseNeedsUpgrading
- ? `/project/${projectRef}/settings/infrastructure`
- : `/project/${projectRef}/database/extensions?filter=wrappers`
- }
- >
- {databaseNeedsUpgrading ? 'Upgrade database' : 'Extensions'}
- </Link>
- </Button>
- </Admonition>
- </ScaffoldSection>
- <SimpleConfigurationDetails bucketName={bucketName} />
- </>
- )
-}
-
-const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
- const { mutateAsync: createIcebergWrapper, isPending: isCreatingIcebergWrapper } =
- useIcebergWrapperCreateMutation()
-
- const onSetupWrapper = async () => {
- if (!bucketName) return console.error('Bucket name is required')
- await createIcebergWrapper({ bucketName })
- }
-
- return (
- <>
- <ScaffoldSection isFullWidth>
- <Admonition type="warning" title="Missing integration">
- <p>The Iceberg Wrapper integration is required in order to query analytics tables.</p>
- <Button variant="default" loading={isCreatingIcebergWrapper} onClick={onSetupWrapper}>
- Install wrapper
- </Button>
- </Admonition>
- </ScaffoldSection>
- <SimpleConfigurationDetails bucketName={bucketName} />
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
index 4a6df2b1c3b..d9327afd527 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketForm.tsx
@@ -14,7 +14,7 @@ import {
SheetFooter,
SheetSection,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import z from 'zod'
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
index 2fc5305e7cb..ef3505c7b2e 100644
--- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
+++ b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
@@ -16,16 +16,16 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent, PageSectionTitle } from 'ui-patterns/PageSection'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { EmptyBucketState } from '../EmptyBucketState'
import { CreateBucketButton } from '../NewBucketButton'
import { CreateAnalyticsBucketModal } from './CreateAnalyticsBucketModal'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { AlphaNotice } from '@/components/ui/AlphaNotice'
import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
import { useAnalyticsBucketsQuery } from '@/data/storage/analytics-buckets-query'
diff --git a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/index.tsx b/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/index.tsx
deleted file mode 100644
index f829967b1ac..00000000000
--- a/apps/studio/components/interfaces/Storage/BucketFilePickerDialog/index.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useBreakpoint } from 'common'
-import {
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
- Sheet,
- SheetContent,
- SheetHeader,
- SheetTitle,
-} from 'ui'
-
-import { BucketFilePickerExplorer } from './BucketFilePickerExplorer'
-import { BucketFilePickerStateContextProvider } from './BucketFilePickerState'
-import type { Bucket } from '@/data/storage/buckets-query'
-
-export type BucketsFilePickerDialogProps = {
- open: boolean
- onOpenChange: (open: boolean) => void
- selectedBucket: Bucket
- acceptedFileExtensions?: string[]
- onSelect: (value: string) => void
-}
-
-export function BucketsFilePickerDialog({
- open,
- onOpenChange,
- selectedBucket,
- acceptedFileExtensions,
- onSelect,
-}: BucketsFilePickerDialogProps) {
- const isMobileLayout = useBreakpoint('lg')
-
- const handleSelect = (value: string) => {
- onSelect(value)
- onOpenChange(false)
- }
-
- return (
- <>
- {isMobileLayout ? (
- <Sheet open={open} onOpenChange={onOpenChange}>
- <SheetContent side="bottom" className="flex h-[85vh] flex-col gap-0 p-0">
- <SheetHeader className="flex flex-row items-center gap-2 border-b border-overlay px-4 py-3 text-left">
- <SheetTitle className="min-w-0 flex-1 text-left">Choose a file</SheetTitle>
- </SheetHeader>
- <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col px-2 pb-3 pt-2">
- <BucketFilePickerStateContextProvider
- bucket={selectedBucket}
- maxFiles={1}
- acceptedFileExtensions={acceptedFileExtensions}
- >
- <BucketFilePickerExplorer onSelect={handleSelect} />
- </BucketFilePickerStateContextProvider>
- </div>
- </SheetContent>
- </Sheet>
- ) : (
- <Dialog open={open} onOpenChange={onOpenChange}>
- <DialogContent
- size="xxlarge"
- className="flex h-[85vh] max-h-[500px] max-w-5xl flex-col gap-0 overflow-hidden p-0"
- >
- <DialogHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4">
- <DialogTitle className="min-w-0 flex-1">Choose a file</DialogTitle>
- </DialogHeader>
- <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-3">
- <BucketFilePickerStateContextProvider
- bucket={selectedBucket}
- maxFiles={1}
- acceptedFileExtensions={acceptedFileExtensions}
- >
- <BucketFilePickerExplorer onSelect={handleSelect} />
- </BucketFilePickerStateContextProvider>
- </div>
- </DialogContent>
- </Dialog>
- )}
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
index 86390fc6ad9..b527971903e 100644
--- a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/BucketsPicker.tsx
@@ -22,7 +22,7 @@ import { STORAGE_BUCKET_SORT } from '../Storage.constants'
import { useStoragePreference } from '../StorageExplorer/useStoragePreference'
import { BucketsTable } from './BucketsTable'
import type { AllowedBucketType } from './types'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
import { usePaginatedBucketsQuery, type Bucket } from '@/data/storage/buckets-query'
diff --git a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx b/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx
deleted file mode 100644
index 5c5fcab384e..00000000000
--- a/apps/studio/components/interfaces/Storage/BucketsPickerDialog/index.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useBreakpoint } from 'common'
-import {
- Button,
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
- Sheet,
- SheetContent,
- SheetHeader,
- SheetTitle,
-} from 'ui'
-
-import { BucketsPicker } from './BucketsPicker'
-import type { AllowedBucketType } from './types'
-import type { Bucket } from '@/data/storage/buckets-query'
-
-export type BucketsPickerDialogProps = {
- open: boolean
- onOpenChange: (open: boolean) => void
- acceptedFileExtensions?: string[]
- hideUnsupportedFiles?: boolean
- onSelect: (bucket: Bucket) => void
- allowedBucketType: AllowedBucketType
-}
-
-export function BucketsPickerDialog({
- open,
- onOpenChange,
- onSelect,
- allowedBucketType,
-}: BucketsPickerDialogProps) {
- const isMobileLayout = useBreakpoint('lg')
-
- return (
- <>
- {isMobileLayout ? (
- <Sheet open={open} onOpenChange={onOpenChange}>
- <SheetContent side="bottom" className="flex h-[85vh] flex-col gap-0 p-0">
- <SheetHeader className="flex flex-row items-center gap-2 border-b border-overlay px-4 py-3 text-left">
- <Button variant="text" size="tiny" className="shrink-0">
- Buckets
- </Button>
- <SheetTitle className="min-w-0 flex-1 text-left">Select a bucket</SheetTitle>
- </SheetHeader>
- <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col px-2 pb-3 pt-2">
- <BucketsPicker onSelectBucket={onSelect} allowedBucketType={allowedBucketType} />
- </div>
- </SheetContent>
- </Sheet>
- ) : (
- <Dialog open={open} onOpenChange={onOpenChange}>
- <DialogContent
- size="xxlarge"
- className="flex h-[85vh] max-h-[500px] max-w-5xl flex-col gap-0 overflow-hidden p-0"
- >
- <DialogHeader className="flex flex-row items-center gap-2 border-b border-overlay px-6 py-4">
- <Button variant="text" size="tiny" className="shrink-0">
- Buckets
- </Button>
- <DialogTitle className="min-w-0 flex-1">Select a bucket</DialogTitle>
- </DialogHeader>
- <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-3">
- <BucketsPicker onSelectBucket={onSelect} allowedBucketType={allowedBucketType} />
- </div>
- </DialogContent>
- </Dialog>
- )}
- </>
- )
-}
diff --git a/apps/studio/components/interfaces/Storage/BucketsUpgradePlan.tsx b/apps/studio/components/interfaces/Storage/BucketsUpgradePlan.tsx
index d0404546cf7..e8c44e5c574 100644
--- a/apps/studio/components/interfaces/Storage/BucketsUpgradePlan.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketsUpgradePlan.tsx
@@ -1,6 +1,6 @@
import { useParams } from 'common'
import { AnalyticsBucket as AnalyticsBucketIcon, VectorBucket as VectorBucketIcon } from 'icons'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
diff --git a/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx b/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx
index 939a6eec618..6f120dc6456 100644
--- a/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/DeleteBucketModal.tsx
@@ -27,11 +27,17 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
schema: 'storage',
})
- const { mutateAsync: deletePolicy, isPending: isDeletingPolicies } =
- useDatabasePolicyDeleteMutation()
+ const { mutateAsync: deletePolicy } = useDatabasePolicyDeleteMutation()
const { mutate: deleteBucket, isPending: isDeletingBucket } = useBucketDeleteMutation({
onSuccess: async () => {
+ // Close the modal and navigate away as soon as the bucket itself is deleted, so
+ // policy cleanup below (which can be slow) doesn't hold the loading state or block
+ // the success feedback.
+ toast.success(`Successfully deleted bucket ${bucket.id}`)
+ onClose()
+ if (bucketId) router.push(`/project/${projectRef}/storage/files`)
+
if (!project) return console.error('Project is required')
// Clean up policies from the corresponding bucket that was deleted
@@ -42,20 +48,18 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
return policyBucket === bucket.name
})
+ if (bucketPolicies.length === 0) return
+
try {
await Promise.all(
bucketPolicies.map((policy) =>
deletePolicy({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
+ projectRef: project.ref,
+ connectionString: project.connectionString,
originalPolicy: policy,
})
)
)
-
- toast.success(`Successfully deleted bucket ${bucket.id}`)
- if (!!bucketId) router.push(`/project/${projectRef}/storage/files`)
- onClose()
} catch (error) {
toast.success(
`Successfully deleted bucket ${bucket.id}. However, there was a problem deleting the policies tied to the bucket. Please review them in the storage policies section`
@@ -76,7 +80,7 @@ export const DeleteBucketModal = ({ visible, bucket, onClose }: DeleteBucketModa
size="medium"
variant="destructive"
title={`Delete bucket “${bucket.id}”`}
- loading={isDeletingBucket || isDeletingPolicies}
+ loading={isDeletingBucket}
confirmPlaceholder="Type bucket name"
confirmString={bucket.id}
confirmLabel="Delete bucket"
diff --git a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
index bb827d0e4dc..d0a3a8f047b 100644
--- a/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -24,7 +24,7 @@ import {
SelectValue,
Switch,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { z } from 'zod'
diff --git a/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx b/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
index 22eef639108..edbb38a5c85 100644
--- a/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
+++ b/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
@@ -10,7 +10,7 @@ import {
DialogSectionSeparator,
DialogTitle,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { useBucketEmptyMutation } from '@/data/storage/bucket-empty-mutation'
import type { Bucket } from '@/data/storage/buckets-query'
diff --git a/apps/studio/components/interfaces/Storage/EmptyBucketState.tsx b/apps/studio/components/interfaces/Storage/EmptyBucketState.tsx
index 7b152a46c03..2edc4f74694 100644
--- a/apps/studio/components/interfaces/Storage/EmptyBucketState.tsx
+++ b/apps/studio/components/interfaces/Storage/EmptyBucketState.tsx
@@ -1,5 +1,5 @@
import { BucketPlus } from 'icons'
-import { EmptyStatePresentational } from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
import { CreateBucketButton } from './NewBucketButton'
import { BUCKET_TYPES } from './Storage.constants'
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketsTable.LoadMoreRow.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketsTable.LoadMoreRow.tsx
index ef6eafbef6b..169b5732faf 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketsTable.LoadMoreRow.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketsTable.LoadMoreRow.tsx
@@ -1,7 +1,7 @@
import { useIntersectionObserver } from '@uidotdev/usehooks'
import { useEffect, type ReactNode } from 'react'
import { TableCell, TableRow } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import type { BucketsTablePaginationProps } from './BucketsTable.types'
import { VirtualizedTableCell, VirtualizedTableRow } from '@/components/ui/VirtualizedTable'
diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
index 94fb01eb6c3..db17240ed84 100644
--- a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
+++ b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx
@@ -12,7 +12,7 @@ import {
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
@@ -25,7 +25,7 @@ import { STORAGE_BUCKET_SORT } from '../Storage.constants'
import { useStoragePreference } from '../StorageExplorer/useStoragePreference'
import { BucketsTable } from './BucketsTable'
import { useFilesBucketsShortcuts } from './useFilesBucketsShortcuts'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
diff --git a/apps/studio/components/interfaces/Storage/Storage.types.ts b/apps/studio/components/interfaces/Storage/Storage.types.ts
index e1828531762..3b55265bca9 100644
--- a/apps/studio/components/interfaces/Storage/Storage.types.ts
+++ b/apps/studio/components/interfaces/Storage/Storage.types.ts
@@ -1,5 +1,5 @@
import { STORAGE_ROW_STATUS, STORAGE_ROW_TYPES } from './Storage.constants'
-import type { PolicyFormField } from '@/components/interfaces/Auth/Policies/Policies.types'
+import { PolicyFormField } from './StoragePolicies/StoragePolicies.types'
export interface StoragePolicyFormField extends PolicyFormField {
allowedOperations: string[]
diff --git a/apps/studio/components/interfaces/Storage/Storage.utils.ts b/apps/studio/components/interfaces/Storage/Storage.utils.ts
index 4bf56bb1569..0ba74d57c70 100644
--- a/apps/studio/components/interfaces/Storage/Storage.utils.ts
+++ b/apps/studio/components/interfaces/Storage/Storage.utils.ts
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from './Storage.constants'
import type { StoragePolicyFormField } from './Storage.types'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { WrapperMeta } from '@/components/interfaces/Integrations/Wrappers/Wrappers.types'
import { convertKVStringArrayToJson } from '@/components/interfaces/Integrations/Wrappers/Wrappers.utils'
import { FDW } from '@/data/fdw/fdws-query'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyAllowedOperation.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyAllowedOperation.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyAllowedOperation.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyDefinition.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyDefinition.tsx
index c83b2fe9aa2..b5e40edcdd1 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyDefinition.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyDefinition.tsx
@@ -4,7 +4,7 @@ import { HelpCircle } from 'lucide-react'
import { useEffect } from 'react'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import SqlEditor from '@/components/ui/SqlEditor'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
interface PolicyDefinitionProps {
operation: string
@@ -68,7 +68,11 @@ const PolicyDefinition = ({
</p>
</div>
<div className={`w-2/3 ${showCheck(operation) ? 'h-32' : 'h-56'}`}>
- <SqlEditor defaultValue={definition} onInputChange={onUpdatePolicyUsing} />
+ <CodeEditor
+ language="pgsql"
+ defaultValue={definition}
+ onInputChange={onUpdatePolicyUsing}
+ />
</div>
</div>
)}
@@ -108,7 +112,7 @@ const PolicyDefinition = ({
</p>
</div>
<div className={`w-2/3 ${showUsing(operation) ? 'h-32' : 'h-56'}`}>
- <SqlEditor defaultValue={check} onInputChange={onUpdatePolicyCheck} />
+ <CodeEditor language="pgsql" defaultValue={check} onInputChange={onUpdatePolicyCheck} />
</div>
</div>
)}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyEditorFooter.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyEditorFooter.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyEditorFooter.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyName.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyName.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyName.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyRoles.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyRoles.tsx
index c0e57e7bc6f..0985835ec15 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/PolicyRoles.tsx
@@ -9,7 +9,7 @@ import {
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { SYSTEM_ROLES } from '@/components/interfaces/Database/Roles/Roles.constants'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useDatabaseRolesQuery } from '@/data/database-roles/database-roles-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/index.tsx
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditor/index.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditor/index.tsx
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.constants.ts b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/PolicyEditorModal.constants.ts
similarity index 100%
rename from apps/studio/components/interfaces/Auth/Policies/Policies.constants.ts
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/PolicyEditorModal.constants.ts
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/PolicyEditorModalTitle.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/PolicyEditorModalTitle.tsx
index ba194252cb3..044a4acaffd 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModalTitle.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/PolicyEditorModalTitle.tsx
@@ -2,7 +2,7 @@ import { noop } from 'lodash'
import { ChevronLeft, FlaskConical } from 'lucide-react'
import { Button } from 'ui'
-import { POLICY_MODAL_VIEWS } from '../Policies.constants'
+import { POLICY_MODAL_VIEWS } from './PolicyEditorModal.constants'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
@@ -16,7 +16,7 @@ interface PolicyEditorModalTitleProps {
onToggleFeaturePreviewModal: () => void
}
-const PolicyEditorModalTitle = ({
+export const PolicyEditorModalTitle = ({
view,
schema,
table,
@@ -65,5 +65,3 @@ const PolicyEditorModalTitle = ({
</div>
)
}
-
-export default PolicyEditorModalTitle
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/index.tsx
similarity index 94%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/index.tsx
index 0a59f44c760..7a82ff90e73 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorModal/index.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyEditorModal/index.tsx
@@ -4,7 +4,10 @@ import { useCallback, useEffect, useState } from 'react'
import { toast } from 'sonner'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from 'ui'
-import { POLICY_MODAL_VIEWS } from '../Policies.constants'
+import { PolicyEditor } from '../PolicyEditor'
+import { PolicyReview } from '../PolicyReview'
+import { PolicySelection } from '../PolicySelection'
+import { PolicyTemplates } from '../PolicyTemplates'
import {
DraftPostgresPolicyCreatePayload,
DraftPostgresPolicyUpdatePayload,
@@ -12,22 +15,21 @@ import {
PolicyForReview,
PostgresPolicyCreatePayload,
PostgresPolicyUpdatePayload,
-} from '../Policies.types'
+} from '../StoragePolicies.types'
import {
createPayloadForCreatePolicy,
createPayloadForUpdatePolicy,
createSQLPolicy,
-} from '../Policies.utils'
-import { PolicyEditor } from '../PolicyEditor'
-import { PolicyReview } from '../PolicyReview'
-import PolicySelection from '../PolicySelection'
-import PolicyTemplates from '../PolicyTemplates'
-import { PolicyTemplate } from '../PolicyTemplates/PolicyTemplates.constants'
-import { getGeneralPolicyTemplates } from './PolicyEditorModal.constants'
-import PolicyEditorModalTitle from './PolicyEditorModalTitle'
+} from '../StoragePolicies.utils'
+import { POLICY_MODAL_VIEWS } from './PolicyEditorModal.constants'
+import { PolicyEditorModalTitle } from './PolicyEditorModalTitle'
import { useFeaturePreviewModal } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import {
+ getGeneralPolicyTemplates,
+ type PolicyTemplate,
+} from '@/components/interfaces/Database/Policies/Policies.constants'
import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useConfirmOnClose } from '@/hooks/ui/useConfirmOnClose'
// Call only from a user-gesture handler (the Save click). Promotes the draft payload's
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyReview.tsx
similarity index 80%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyReview.tsx
index c0366f3add0..a22c7c18ab2 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyReview.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyReview.tsx
@@ -2,8 +2,8 @@ import { isEmpty, noop } from 'lodash'
import { useState } from 'react'
import { Button, DialogFooter, DialogSection } from 'ui'
-import type { PolicyForReview } from './Policies.types'
-import SqlEditor from '@/components/ui/SqlEditor'
+import type { PolicyForReview } from './StoragePolicies.types'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
interface PolicyReviewProps {
policy: PolicyForReview
@@ -22,7 +22,7 @@ export const PolicyReview = ({
onSelectSave()
}
- let formattedSQLStatement = policy.statement || ''
+ const formattedSQLStatement = policy.statement || ''
return (
<>
@@ -44,9 +44,14 @@ export const PolicyReview = ({
</div>
) : (
<div className="space-y-2">
- <span>{policy.description}</span>
+ <p>{policy.description}</p>
<div className="h-40">
- <SqlEditor readOnly defaultValue={formattedSQLStatement} />
+ <CodeEditor
+ hideLineNumbers
+ isReadOnly
+ language="pgsql"
+ defaultValue={formattedSQLStatement}
+ />
</div>
</div>
)}
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicySelection.tsx
similarity index 98%
rename from apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicySelection.tsx
index c1a7fc666cf..06dc7a89ade 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicySelection.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicySelection.tsx
@@ -12,7 +12,7 @@ interface PolicySelectionProps {
onToggleFeaturePreviewModal?: () => void
}
-const PolicySelection = ({
+export const PolicySelection = ({
description = '',
showAssistantPreview,
onViewTemplates = noop,
@@ -89,5 +89,3 @@ const PolicySelection = ({
</DialogSection>
)
}
-
-export default PolicySelection
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatePreview.tsx
similarity index 76%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatePreview.tsx
index a7fd8f01fbe..4e4effeaa91 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatePreview.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatePreview.tsx
@@ -1,7 +1,7 @@
import { isEmpty } from 'lodash'
-import { PolicyTemplate } from './PolicyTemplates.constants'
-import SqlEditor from '@/components/ui/SqlEditor'
+import { type PolicyTemplate } from '@/components/interfaces/Database/Policies/Policies.constants'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
interface TemplatePreviewProps {
selectedTemplate: PolicyTemplate
@@ -10,7 +10,7 @@ interface TemplatePreviewProps {
const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
const { id, templateName, description, statement } = selectedTemplate
return (
- <div className="space-y-8 md:w-[70%]">
+ <div className="space-y-8 md:w-[100%]">
{!isEmpty(selectedTemplate) && (
<div className="flex h-full flex-col justify-between">
<div className="my-5 h-full space-y-6 px-6">
@@ -23,7 +23,7 @@ const TemplatePreview = ({ selectedTemplate }: TemplatePreviewProps) => {
<div className="space-y-2">
<label className="text-foreground-light text-sm">Policy SQL template:</label>
<div className="h-64">
- <SqlEditor readOnly queryId={id} defaultValue={statement} />
+ <CodeEditor isReadOnly id={id} language="pgsql" defaultValue={statement} />
</div>
</div>
</div>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatesList.tsx
similarity index 93%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatesList.tsx
index 9e7afbcb273..4ece27c1cc1 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/TemplatesList.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/TemplatesList.tsx
@@ -1,7 +1,7 @@
import { noop } from 'lodash'
import { Menu } from 'ui'
-import { PolicyTemplate } from './PolicyTemplates.constants'
+import { type PolicyTemplate } from '@/components/interfaces/Database/Policies/Policies.constants'
interface TemplatesListProps {
templates: PolicyTemplate[]
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/index.tsx
similarity index 91%
rename from apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
rename to apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/index.tsx
index 201e0adbb9f..4c1157a19df 100644
--- a/apps/studio/components/interfaces/Auth/Policies/PolicyTemplates/index.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/PolicyTemplates/index.tsx
@@ -2,9 +2,9 @@ import { isEmpty, noop } from 'lodash'
import { useState } from 'react'
import { Button, DialogSectionSeparator } from 'ui'
-import { PolicyTemplate } from './PolicyTemplates.constants'
import TemplatePreview from './TemplatePreview'
import TemplatesList from './TemplatesList'
+import { type PolicyTemplate } from '@/components/interfaces/Database/Policies/Policies.constants'
interface PolicyTemplatesProps {
templates?: PolicyTemplate[]
@@ -12,7 +12,7 @@ interface PolicyTemplatesProps {
onUseTemplate?: (template: PolicyTemplate) => void
}
-const PolicyTemplates = ({
+export const PolicyTemplates = ({
templates = [],
templatesNote = '',
onUseTemplate = noop,
@@ -45,5 +45,3 @@ const PolicyTemplates = ({
</div>
)
}
-
-export default PolicyTemplates
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
index 70948cb1bed..79a7110b4b7 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.tsx
@@ -3,7 +3,6 @@ import { isEmpty } from 'lodash'
import { parseAsString, useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { toast } from 'sonner'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
@@ -14,17 +13,18 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { formatPoliciesForStorage, UNGROUPED_POLICY_SYMBOL } from '../Storage.utils'
-import { StoragePoliciesBucketRow } from './StoragePoliciesBucketRow'
-import { BucketsPolicies, type SelectBucketPolicyForAction } from './StoragePoliciesBucketsSection'
-import { StoragePoliciesEditPolicyModal } from './StoragePoliciesEditPolicyModal'
+import { PolicyEditorModal } from './PolicyEditorModal'
import type {
PostgresPolicyCreatePayload,
PostgresPolicyUpdatePayload,
-} from '@/components/interfaces/Auth/Policies/Policies.types'
-import { PolicyEditorModal } from '@/components/interfaces/Auth/Policies/PolicyEditorModal'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+} from './StoragePolicies.types'
+import { StoragePoliciesBucketRow } from './StoragePoliciesBucketRow'
+import { BucketsPolicies, type SelectBucketPolicyForAction } from './StoragePoliciesBucketsSection'
+import { StoragePoliciesEditPolicyModal } from './StoragePoliciesEditPolicyModal'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { useDatabasePoliciesQuery } from '@/data/database-policies/database-policies-query'
import { useDatabasePolicyCreateMutation } from '@/data/database-policies/database-policy-create-mutation'
import { useDatabasePolicyDeleteMutation } from '@/data/database-policies/database-policy-delete-mutation'
diff --git a/apps/studio/components/interfaces/Auth/Policies/Policies.types.ts b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.types.ts
similarity index 95%
rename from apps/studio/components/interfaces/Auth/Policies/Policies.types.ts
rename to apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.types.ts
index 911fb6426fc..4461bfd9fbb 100644
--- a/apps/studio/components/interfaces/Auth/Policies/Policies.types.ts
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.types.ts
@@ -58,3 +58,8 @@ export interface DraftPostgresPolicyUpdatePayload extends Omit<
definition?: DisplayableSqlFragment
check?: DisplayableSqlFragment
}
+
+export interface PolicyForReview {
+ description?: string
+ statement?: string
+}
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.utils.ts b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.utils.ts
new file mode 100644
index 00000000000..a9131a949ad
--- /dev/null
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicies.utils.ts
@@ -0,0 +1,158 @@
+import type { PGPolicy } from '@supabase/pg-meta'
+import { untrustedSql } from '@supabase/pg-meta'
+import { has, isEmpty, isEqual } from 'lodash'
+
+import {
+ DraftPostgresPolicyCreatePayload,
+ DraftPostgresPolicyUpdatePayload,
+ PolicyFormField,
+ PolicyForReview,
+} from './StoragePolicies.types'
+
+/**
+ * Returns an array of SQL statements that will preview in the review step of the policy editor
+ * @param {*} policyFormFields { name, using, check, command }
+ */
+
+export const createSQLPolicy = (
+ policyFormFields: PolicyFormField,
+ originalPolicyFormFields?: PGPolicy
+) => {
+ const { definition, check } = policyFormFields
+ const formattedPolicyFormFields = {
+ ...policyFormFields,
+ definition: definition
+ ? definition.replace(/\s+/g, ' ').trim()
+ : definition === undefined
+ ? null
+ : definition,
+ check: check ? check.replace(/\s+/g, ' ').trim() : check === undefined ? null : check,
+ }
+
+ if (!originalPolicyFormFields || isEmpty(originalPolicyFormFields)) {
+ return createSQLStatementForCreatePolicy(formattedPolicyFormFields)
+ }
+
+ // If there are no changes, return an empty object
+ if (isEqual(policyFormFields, originalPolicyFormFields)) {
+ return {}
+ }
+
+ // Extract out all the fields that updated
+ const fieldsToUpdate: any = {}
+ if (!isEqual(formattedPolicyFormFields.name, originalPolicyFormFields.name)) {
+ fieldsToUpdate.name = formattedPolicyFormFields.name
+ }
+ if (!isEqual(formattedPolicyFormFields.definition, originalPolicyFormFields.definition)) {
+ fieldsToUpdate.definition = formattedPolicyFormFields.definition
+ }
+ if (!isEqual(formattedPolicyFormFields.check, originalPolicyFormFields.check)) {
+ fieldsToUpdate.check = formattedPolicyFormFields.check
+ }
+ if (!isEqual(formattedPolicyFormFields.roles, originalPolicyFormFields.roles)) {
+ fieldsToUpdate.roles = formattedPolicyFormFields.roles
+ }
+
+ if (!isEmpty(fieldsToUpdate)) {
+ return createSQLStatementForUpdatePolicy(formattedPolicyFormFields, fieldsToUpdate)
+ }
+
+ return {}
+}
+
+const createSQLStatementForCreatePolicy = (policyFormFields: PolicyFormField): PolicyForReview => {
+ const { name, definition, check, command, schema, table } = policyFormFields
+ const roles = policyFormFields.roles.length === 0 ? ['public'] : policyFormFields.roles
+ const description = `Add policy for the ${command} operation under the policy "${name}"`
+ const statement = [
+ `CREATE POLICY "${name}" ON "${schema}"."${table}"`,
+ `AS PERMISSIVE FOR ${command}`,
+ `TO ${roles.join(', ')}`,
+ `${definition ? `USING (${definition})` : ''}`,
+ `${check ? `WITH CHECK (${check})` : ''}`,
+ ].join('\n')
+
+ return { description, statement }
+}
+
+const createSQLStatementForUpdatePolicy = (
+ policyFormFields: PolicyFormField,
+ fieldsToUpdate: Partial<PolicyFormField>
+): PolicyForReview => {
+ const { name, schema, table } = policyFormFields
+
+ const definitionChanged = has(fieldsToUpdate, ['definition'])
+ const checkChanged = has(fieldsToUpdate, ['check'])
+ const nameChanged = has(fieldsToUpdate, ['name'])
+ const rolesChanged = has(fieldsToUpdate, ['roles'])
+
+ const parameters = Object.keys(fieldsToUpdate)
+ const description = `Update policy's ${
+ parameters.length === 1
+ ? parameters[0]
+ : `${parameters.slice(0, parameters.length - 1).join(', ')} and ${
+ parameters[parameters.length - 1]
+ }`
+ } `
+ const roles =
+ (fieldsToUpdate?.roles ?? []).length === 0 ? ['public'] : (fieldsToUpdate.roles as string[])
+
+ const alterStatement = `ALTER POLICY "${name}" ON "${schema}"."${table}"`
+ const statement = [
+ 'BEGIN;',
+ ...(definitionChanged ? [` ${alterStatement} USING (${fieldsToUpdate.definition});`] : []),
+ ...(checkChanged ? [` ${alterStatement} WITH CHECK (${fieldsToUpdate.check});`] : []),
+ ...(rolesChanged ? [` ${alterStatement} TO ${roles.join(', ')};`] : []),
+ ...(nameChanged ? [` ${alterStatement} RENAME TO "${fieldsToUpdate.name}";`] : []),
+ 'COMMIT;',
+ ].join('\n')
+
+ return { description, statement }
+}
+
+// These constructors return DRAFT payloads — `definition`/`check` are still
+// `DisplayableSqlFragment`. Promotion to `SafeSqlFragment` must happen at the user gesture
+// (the Save click in `PolicyEditorModal`), not here, since this module has no guarantee that
+// it was reached via a deliberate user action.
+export const createPayloadForCreatePolicy = (
+ policyFormFields: PolicyFormField
+): DraftPostgresPolicyCreatePayload => {
+ const { name, schema, table, command, definition, check, roles } = policyFormFields
+ return {
+ name,
+ schema,
+ table,
+ action: 'PERMISSIVE',
+ command: command || undefined,
+ definition: !definition ? undefined : untrustedSql(definition),
+ check: !check ? undefined : untrustedSql(check),
+ roles: roles.length > 0 ? roles : undefined,
+ }
+}
+
+export const createPayloadForUpdatePolicy = (
+ policyFormFields: PolicyFormField,
+ originalPolicyFormFields: PGPolicy
+): DraftPostgresPolicyUpdatePayload => {
+ const { definition, check } = policyFormFields
+ const formattedDefinition = definition ? definition.replace(/\s+/g, ' ').trim() : definition
+ const formattedCheck = check ? check.replace(/\s+/g, ' ').trim() : check
+
+ const payload: DraftPostgresPolicyUpdatePayload = { id: originalPolicyFormFields.id }
+
+ if (!isEqual(policyFormFields.name, originalPolicyFormFields.name)) {
+ payload.name = policyFormFields.name
+ }
+ if (!isEqual(formattedDefinition, originalPolicyFormFields.definition)) {
+ payload.definition = !formattedDefinition ? undefined : untrustedSql(formattedDefinition)
+ }
+ if (!isEqual(formattedCheck, originalPolicyFormFields.check)) {
+ payload.check = !formattedCheck ? undefined : untrustedSql(formattedCheck)
+ }
+ if (!isEqual(policyFormFields.roles, originalPolicyFormFields.roles)) {
+ if (policyFormFields.roles.length === 0) payload.roles = ['public']
+ else payload.roles = policyFormFields.roles || undefined
+ }
+
+ return payload
+}
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
index 71a38c40a86..45980164747 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketRow.tsx
@@ -18,8 +18,8 @@ import {
TooltipTrigger,
} from 'ui'
-import { PolicyRow } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyRow'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import { PolicyRow } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyRow'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { PUBLIC_BUCKET_TOOLTIP } from '@/components/interfaces/Storage/Storage.constants'
import { Bucket } from '@/data/storage/buckets-query'
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
index c0dc1be5a37..ac2243ddc8d 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx
@@ -9,7 +9,6 @@ import {
type ReactNode,
} from 'react'
import { Button, cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import {
PageSection,
@@ -19,10 +18,11 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { StoragePoliciesBucketRow } from './StoragePoliciesBucketRow'
import StoragePoliciesPlaceholder from './StoragePoliciesPlaceholder'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { useMainScrollContainer } from '@/components/layouts/MainScrollContainerContext'
import { NoSearchResults } from '@/components/ui/NoSearchResults'
import { type Bucket } from '@/data/storage/buckets-query'
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
index 1ae1d79785e..070b1c814e4 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditPolicyModal.tsx
@@ -8,13 +8,13 @@ import {
createPayloadsForAddPolicy,
createSQLPolicies,
} from '../Storage.utils'
+import { POLICY_MODAL_VIEWS } from './PolicyEditorModal/PolicyEditorModal.constants'
+import { PolicySelection } from './PolicySelection'
+import { PolicyTemplates } from './PolicyTemplates'
import { STORAGE_POLICY_TEMPLATES } from './StoragePolicies.constants'
-import StoragePoliciesEditor from './StoragePoliciesEditor'
-import StoragePoliciesReview from './StoragePoliciesReview'
+import { StoragePoliciesEditor } from './StoragePoliciesEditor'
+import { StoragePoliciesReview } from './StoragePoliciesReview'
import { StoragePolicyEditorModalTitle } from './StoragePolicyEditorModalTitle'
-import { POLICY_MODAL_VIEWS } from '@/components/interfaces/Auth/Policies/Policies.constants'
-import PolicySelection from '@/components/interfaces/Auth/Policies/PolicySelection'
-import PolicyTemplates from '@/components/interfaces/Auth/Policies/PolicyTemplates'
const newPolicyTemplate: any = {
name: '',
@@ -171,6 +171,7 @@ export const StoragePoliciesEditPolicyModal = ({
<DialogContent
size={view === POLICY_MODAL_VIEWS.SELECTION ? 'medium' : 'xxlarge'}
hideClose={view !== POLICY_MODAL_VIEWS.TEMPLATES}
+ className="flex max-h-[calc(100vh-8rem)] flex-col gap-0 overflow-hidden p-0"
>
<DialogHeader>
<DialogTitle>
@@ -182,37 +183,41 @@ export const StoragePoliciesEditPolicyModal = ({
</DialogTitle>
</DialogHeader>
<DialogSectionSeparator />
- {view === POLICY_MODAL_VIEWS.SELECTION ? (
- <PolicySelection
- description="PostgreSQL policies control access to your files and folders"
- onViewTemplates={onViewTemplates}
- onViewEditor={() => onViewEditor('new')}
- showAssistantPreview={false}
- />
- ) : view === POLICY_MODAL_VIEWS.EDITOR ? (
- <StoragePoliciesEditor
- policyFormFields={policyFormFields}
- onViewTemplates={onViewTemplates}
- onUpdatePolicyName={onUpdatePolicyName}
- onUpdatePolicyDefinition={onUpdatePolicyDefinition}
- onToggleOperation={onToggleOperation}
- onUpdatePolicyRoles={onUpdatePolicyRoles}
- onReviewPolicy={validatePolicyEditorFormFields}
- />
- ) : view === POLICY_MODAL_VIEWS.TEMPLATES ? (
- <PolicyTemplates
- templates={STORAGE_POLICY_TEMPLATES as any[]}
- onUseTemplate={onUseTemplate}
- templatesNote={''}
- />
- ) : view === POLICY_MODAL_VIEWS.REVIEW ? (
+ {view === POLICY_MODAL_VIEWS.REVIEW ? (
<StoragePoliciesReview
policyStatements={policyStatementsForReview}
onSelectBack={onViewEditor}
onSelectSave={onReviewSave}
/>
) : (
- <div />
+ <div className="min-h-0 flex-1 overflow-y-auto">
+ {view === POLICY_MODAL_VIEWS.SELECTION ? (
+ <PolicySelection
+ description="PostgreSQL policies control access to your files and folders"
+ onViewTemplates={onViewTemplates}
+ onViewEditor={() => onViewEditor('new')}
+ showAssistantPreview={false}
+ />
+ ) : view === POLICY_MODAL_VIEWS.EDITOR ? (
+ <StoragePoliciesEditor
+ policyFormFields={policyFormFields}
+ onViewTemplates={onViewTemplates}
+ onUpdatePolicyName={onUpdatePolicyName}
+ onUpdatePolicyDefinition={onUpdatePolicyDefinition}
+ onToggleOperation={onToggleOperation}
+ onUpdatePolicyRoles={onUpdatePolicyRoles}
+ onReviewPolicy={validatePolicyEditorFormFields}
+ />
+ ) : view === POLICY_MODAL_VIEWS.TEMPLATES ? (
+ <PolicyTemplates
+ templates={STORAGE_POLICY_TEMPLATES as any[]}
+ onUseTemplate={onUseTemplate}
+ templatesNote={''}
+ />
+ ) : (
+ <div />
+ )}
+ </div>
)}
</DialogContent>
</Dialog>
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
index 93e400ed95b..981c35abacd 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesEditor.tsx
@@ -3,9 +3,9 @@ import { Button, Checkbox, cn, DialogSection, DialogSectionSeparator } from 'ui'
import { STORAGE_CLIENT_LIBRARY_MAPPINGS } from '../Storage.constants'
import { deriveAllowedClientLibraryMethods } from '../Storage.utils'
-import { PolicyName } from '@/components/interfaces/Auth/Policies/PolicyEditor/PolicyName'
-import { PolicyRoles } from '@/components/interfaces/Auth/Policies/PolicyEditor/PolicyRoles'
-import SqlEditor from '@/components/ui/SqlEditor'
+import { PolicyName } from './PolicyEditor/PolicyName'
+import { PolicyRoles } from './PolicyEditor/PolicyRoles'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { DOCS_URL } from '@/lib/constants'
const PolicyDefinition = ({ definition = '', onUpdatePolicyDefinition = () => {} }) => {
@@ -20,7 +20,11 @@ const PolicyDefinition = ({ definition = '', onUpdatePolicyDefinition = () => {}
</p>
</div>
<div className="h-56 md:w-2/3">
- <SqlEditor defaultValue={definition} onInputChange={onUpdatePolicyDefinition} />
+ <CodeEditor
+ language="pgsql"
+ defaultValue={definition}
+ onInputChange={onUpdatePolicyDefinition}
+ />
</div>
</div>
)
@@ -145,7 +149,7 @@ const PolicyEditorFooter = ({ onViewTemplates = () => {}, onReviewPolicy = () =>
// [Refactor] All these update methods could be summarised into one single function probably
-const StoragePoliciesEditor = ({
+export const StoragePoliciesEditor = ({
policyFormFields = {},
onViewTemplates = noop,
onUpdatePolicyName = noop,
@@ -190,5 +194,3 @@ const StoragePoliciesEditor = ({
</>
)
}
-
-export default StoragePoliciesEditor
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
index 92f3c5d192a..d4b687a3c5b 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePoliciesReview.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react'
import { Button, DialogFooter, DialogSection, DialogSectionSeparator } from 'ui'
-import SqlEditor from '@/components/ui/SqlEditor'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
const ReviewEmptyState = () => {
return (
@@ -17,7 +17,7 @@ interface StoragePoliciesReviewProps {
onSelectSave: any
}
-const StoragePoliciesReview = ({
+export const StoragePoliciesReview = ({
policyStatements = [],
onSelectBack = () => {},
onSelectSave = () => {},
@@ -46,9 +46,14 @@ const StoragePoliciesReview = ({
let formattedSQLStatement = policy.statement || ''
return (
<div key={`policy_${idx}`} className="space-y-2">
- <span>{policy.description}</span>
+ <p className="text-sm">{policy.description}</p>
<div className="h-40">
- <SqlEditor readOnly defaultValue={formattedSQLStatement} />
+ <CodeEditor
+ hideLineNumbers
+ isReadOnly
+ language="pgsql"
+ defaultValue={formattedSQLStatement}
+ />
</div>
</div>
)
@@ -69,5 +74,3 @@ const StoragePoliciesReview = ({
</>
)
}
-
-export default StoragePoliciesReview
diff --git a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
index 820da1dd73b..7138302232b 100644
--- a/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
+++ b/apps/studio/components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx
@@ -3,7 +3,7 @@ import { ChevronLeft, X } from 'lucide-react'
import { Dialog as DialogPrimitive } from 'radix-ui'
import { cn } from 'ui'
-import { POLICY_MODAL_VIEWS } from '@/components/interfaces/Auth/Policies/Policies.constants'
+import { POLICY_MODAL_VIEWS } from './PolicyEditorModal/PolicyEditorModal.constants'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
index 97ff713cd8f..f4f54e73b91 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/S3Connection.tsx
@@ -44,9 +44,9 @@ import { CreateCredentialModal } from './CreateCredentialModal'
import { RevokeCredentialModal } from './RevokeCredentialModal'
import { StorageCredItem } from './StorageCredItem'
import { getConnectionURL } from './StorageSettings.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
import { useProjectStorageConfigUpdateUpdateMutation } from '@/data/config/project-storage-config-update-mutation'
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
deleted file mode 100644
index 33ae91b104e..00000000000
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useParams } from 'common'
-import dayjs from 'dayjs'
-import { useState } from 'react'
-import { toast } from 'sonner'
-import {
- Button,
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogSection,
- DialogSectionSeparator,
- DialogTitle,
- DialogTrigger,
-} from 'ui'
-import { Admonition, TimestampInfo } from 'ui-patterns'
-
-import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
-import { InlineLink } from '@/components/ui/InlineLink'
-import { useProjectStorageConfigUpdateUpdateMutation } from '@/data/config/project-storage-config-update-mutation'
-import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
-
-// [Joshen] Will be decided by Storage team, temp setting to 15th December 2025 UTC (3 months buffer)
-const MIGRATION_DEADLINE = '2025-12-15T00:00:00'
-
-export const StorageListV2MigrationCallout = () => {
- const deadline = dayjs(MIGRATION_DEADLINE).utc(true)
- const currentDate = dayjs.utc()
- const remainingMonths = Math.ceil(deadline.diff(currentDate, 'months', true))
-
- return (
- <Admonition
- type="note"
- title="A new version of Storage is available for your project"
- description={
- <>
- <p>
- Get access to the List-V2 endpoint for improved performance and the ability to enable
- Analytics buckets to your storage system.
- </p>
- {remainingMonths <= 1 && (
- <p>
- Your project's Storage will be automatically upgraded by{' '}
- <TimestampInfo
- displayAs="utc"
- utcTimestamp={MIGRATION_DEADLINE}
- className="text-sm text-inherit font-medium"
- labelFormat="DD MMM YYYY HH:mm (UTC)"
- />{' '}
- if the upgrade is not completed by then.
- </p>
- )}
- </>
- }
- actions={<StorageListV2MigrationDialog />}
- />
- )
-}
-
-export const StorageListV2MigratingCallout = () => {
- return (
- <Admonition
- type="note"
- title="Project storage is currently upgrading"
- description="This notice will be closed once the upgrade has been completed. Hang tight!"
- />
- )
-}
-
-const StorageListV2MigrationDialog = () => {
- const { ref } = useParams()
- const { can: canUpdateStorageSettings } = useAsyncCheckPermissions(
- PermissionAction.STORAGE_ADMIN_WRITE,
- '*'
- )
-
- const [open, setOpen] = useState(false)
-
- const { mutate: updateStorageConfig, isPending: isUpdating } =
- useProjectStorageConfigUpdateUpdateMutation({
- onSuccess: () => {
- toast.success(`Project's storage will be upgraded shortly!`)
- setOpen(false)
- },
- })
-
- const onConfirmUpgrade = () => {
- if (!ref) return console.error('Project ref is required')
- updateStorageConfig({ projectRef: ref, external: { upstreamTarget: 'canary' } })
- }
-
- return (
- <Dialog open={open} onOpenChange={setOpen}>
- <DialogTrigger asChild>
- <ButtonTooltip
- variant="primary"
- disabled={!canUpdateStorageSettings}
- tooltip={{
- content: {
- side: 'bottom',
- text: !canUpdateStorageSettings
- ? 'You need additional permissions to upgrade storage'
- : undefined,
- },
- }}
- >
- Upgrade Storage
- </ButtonTooltip>
- </DialogTrigger>
- <DialogContent>
- <DialogHeader>
- <DialogTitle>Upgrade your project's Storage</DialogTitle>
- <DialogDescription>
- Get access to Analytics buckets and an improved list method
- </DialogDescription>
- </DialogHeader>
-
- <DialogSectionSeparator />
-
- <Admonition
- type="warning"
- className="rounded-none border-x-0 border-t-0"
- title="Migration required to optimise the database schema for upgrade"
- description="We recommend running the update during periods of lower activity, although minimal to no disruption is expected."
- />
-
- <DialogSection className="flex flex-col gap-y-2">
- <p className="text-sm">
- Depending on the number of objects in your Storage, the migration can take up to 24
- hours to finish.
- </p>
-
- <p className="text-sm">
- The upgrade will increase your disk size to about 15 - 25% and IOPS will be used to
- create new efficient indexes as well as denormalising tables.
- </p>
-
- <p className="text-sm">
- Ensure that your database instance has not{' '}
- <InlineLink href={`/project/${ref}/settings/compute-and-disk#disk-size`}>
- scaled disk
- </InlineLink>{' '}
- within the last 6h and you have at least 60%{' '}
- <InlineLink href={`/project/${ref}/settings/infrastructure#infrastructure-activity`}>
- CPU capacity
- </InlineLink>{' '}
- before proceeding.
- </p>
- </DialogSection>
-
- <DialogFooter>
- <Button variant="default" disabled={isUpdating} onClick={() => setOpen(false)}>
- Cancel
- </Button>
- <Button variant="primary" loading={isUpdating} onClick={() => onConfirmUpgrade()}>
- Upgrade now
- </Button>
- </DialogFooter>
- </DialogContent>
- </Dialog>
- )
-}
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
index 9c6cf3a62cf..245ef423660 100644
--- a/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageSettings/StorageSettings.tsx
@@ -1,6 +1,6 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { IS_PLATFORM, useFlag, useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
import { useEffect, useMemo, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { toast } from 'sonner'
@@ -29,10 +29,6 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { StorageFileSizeLimitErrorMessage } from './StorageFileSizeLimitErrorMessage'
-import {
- StorageListV2MigratingCallout,
- StorageListV2MigrationCallout,
-} from './StorageListV2MigrationCallout'
import {
STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_CAPPED,
STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED,
@@ -44,9 +40,9 @@ import {
encodeBucketLimitErrorMessage,
} from './StorageSettings.utils'
import { ValidateSizeLimit } from './StorageSettings.ValidateSizeLimit'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { InlineLink } from '@/components/ui/InlineLink'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useProjectStorageConfigQuery } from '@/data/config/project-storage-config-query'
import { useProjectStorageConfigUpdateUpdateMutation } from '@/data/config/project-storage-config-update-mutation'
@@ -70,8 +66,6 @@ export const StorageSettings = () => {
const { ref: projectRef } = useParams()
const { data: project } = useSelectedProjectQuery()
- const showMigrationCallout = useFlag('storageMigrationCallout')
-
const { can: canReadStorageSettings, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
PermissionAction.STORAGE_ADMIN_READ,
'*'
@@ -88,10 +82,6 @@ export const StorageSettings = () => {
isSuccess,
isError,
} = useProjectStorageConfigQuery({ projectRef })
- const isListV2UpgradeAvailable =
- !!config && !config.capabilities.list_v2 && config.external.upstreamTarget === 'main'
- const isListV2Upgrading =
- !!config && !config.capabilities.list_v2 && config.external.upstreamTarget === 'canary'
const {
runCondition: sizeLimitCheckCondition,
@@ -282,209 +272,200 @@ export const StorageSettings = () => {
/>
)}
{isSuccess && (
- <>
- {showMigrationCallout && (
- <>
- {isListV2UpgradeAvailable && <StorageListV2MigrationCallout />}
- {isListV2Upgrading && <StorageListV2MigratingCallout />}
- </>
- )}
- <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
- <Card>
- <CardContent>
- <FormField
- control={form.control}
- name="imageTransformationEnabled"
- render={({ field }) => (
- <FormItemLayout
- layout="flex-row-reverse"
- label="Enable image transformation"
- description={
- <>
- Optimize and resize images on the fly.{' '}
- <InlineLink
- href={`${DOCS_URL}/guides/storage/serving/image-transformations`}
- >
- Learn more
- </InlineLink>
- .
- </>
- }
- >
- <FormControl>
- <Switch
- size="large"
- disabled={
- !hasAccessToImageTransformations || !canUpdateStorageSettings
- }
- checked={hasAccessToImageTransformations && field.value}
- onCheckedChange={field.onChange}
- />
- </FormControl>
- </FormItemLayout>
- )}
- />
- </CardContent>
-
- <CardContent>
- <FormField
- control={form.control}
- name="fileSizeLimit"
- render={({ field }) => (
- <FormItemLayout
- hideMessage
- layout="flex-row-reverse"
- label="Global file size limit"
- description={
- <>
- Restrict the size of files uploaded across all buckets.{' '}
- <InlineLink
- href={`${DOCS_URL}/guides/storage/uploads/file-limits`}
- >
- Learn more
- </InlineLink>
- .
- {!shouldAutoValidateBucketLimits && (
- <p>
- Ensure that the global limit is greater than that of
- individual buckets
- </p>
- )}
- </>
- }
- >
- <FormControl>
- <div className="flex items-center justify-end">
- <Input
- type="number"
- {...field}
- onChange={(e) => {
- field.onChange(e)
- form.clearErrors('fileSizeLimit')
- }}
- className="w-32 rounded-r-none border-r-0"
- disabled={
- !hasAccessToFileSizeConfiguration ||
- !canUpdateStorageSettings
- }
- />
- <FormField
- control={form.control}
- name="unit"
- render={({ field: unitField }) => (
- <Select
- value={unitField.value}
- onValueChange={(val) => {
- unitField.onChange(val)
- form.clearErrors('fileSizeLimit')
- }}
- disabled={
- !hasAccessToFileSizeConfiguration ||
- !canUpdateStorageSettings
- }
- >
- <SelectTrigger className="w-[90px] text-xs font-mono rounded-l-none bg-surface-300">
- <SelectValue placeholder="Choose a prefix">
- {storageUnit}
- </SelectValue>
- </SelectTrigger>
- <SelectContent>
- {Object.values(StorageSizeUnits).map((unit: string) => (
- <SelectItem
- key={unit}
- disabled={!hasAccessToFileSizeConfiguration}
- value={unit}
- >
- {unit}
- </SelectItem>
- ))}
- </SelectContent>
- </Select>
- )}
- />
- </div>
- </FormControl>
- {sizeLimitCheckCondition === 'confirm' && (
- <ValidateSizeLimit
- onValidate={sizeLimitCheckQuery}
- projectRef={projectRef}
- isLoadingBucketEstimate={isBucketEstimatePending}
- />
- )}
- </FormItemLayout>
- )}
- />
- {fileSizeLimitError && (
- <FormMessage className="ml-auto mt-2 text-right w-1/2">
- <StorageFileSizeLimitErrorMessage
- error={fileSizeLimitError}
- projectRef={projectRef}
- />
- </FormMessage>
- )}
- </CardContent>
- {hasLimitedStorageAccess && (
- <UpgradeToPro
- fullWidth
- variant="primary"
- source="storageSizeLimit"
- featureProposition="configure upload file size limits in Storage"
- primaryText="Free Plan has a fixed upload file size limit of 50 MB"
- secondaryText={`Upgrade to Pro Plan for a configurable upload file size limit of ${formatBytes(
- STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
- )} and unlock image transformations.`}
- />
- )}
- {isSpendCapOn && (
- <UpgradeToPro
- fullWidth
- addon="spendCap"
- variant="default"
- source="storageSizeLimit"
- featureProposition="increase the file upload size limits in Storage"
- buttonText="Disable spend cap"
- primaryText="Reduced max upload file size limit due to spend cap"
- secondaryText={`Disable your spend cap to allow file uploads of up to ${formatBytes(
- STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
- )}.`}
- />
- )}
-
- {!canUpdateStorageSettings && (
- <CardContent>
- <p className="text-sm text-foreground-light">
- You need additional permissions to update storage settings
- </p>
- </CardContent>
- )}
-
- <CardFooter className="justify-end space-x-2">
- {form.formState.isDirty && (
- <Button
- variant="default"
- type="reset"
- onClick={() => form.reset()}
- disabled={
- !form.formState.isDirty || !canUpdateStorageSettings || isUpdating
+ <form id={formId} onSubmit={form.handleSubmit(onSubmit)}>
+ <Card>
+ <CardContent>
+ <FormField
+ control={form.control}
+ name="imageTransformationEnabled"
+ render={({ field }) => (
+ <FormItemLayout
+ layout="flex-row-reverse"
+ label="Enable image transformation"
+ description={
+ <>
+ Optimize and resize images on the fly.{' '}
+ <InlineLink
+ href={`${DOCS_URL}/guides/storage/serving/image-transformations`}
+ >
+ Learn more
+ </InlineLink>
+ .
+ </>
}
>
- Cancel
- </Button>
+ <FormControl>
+ <Switch
+ size="large"
+ disabled={
+ !hasAccessToImageTransformations || !canUpdateStorageSettings
+ }
+ checked={hasAccessToImageTransformations && field.value}
+ onCheckedChange={field.onChange}
+ />
+ </FormControl>
+ </FormItemLayout>
)}
+ />
+ </CardContent>
+
+ <CardContent>
+ <FormField
+ control={form.control}
+ name="fileSizeLimit"
+ render={({ field }) => (
+ <FormItemLayout
+ hideMessage
+ layout="flex-row-reverse"
+ label="Global file size limit"
+ description={
+ <>
+ Restrict the size of files uploaded across all buckets.{' '}
+ <InlineLink
+ href={`${DOCS_URL}/guides/storage/uploads/file-limits`}
+ >
+ Learn more
+ </InlineLink>
+ .
+ {!shouldAutoValidateBucketLimits && (
+ <p>
+ Ensure that the global limit is greater than that of
+ individual buckets
+ </p>
+ )}
+ </>
+ }
+ >
+ <FormControl>
+ <div className="flex items-center justify-end">
+ <Input
+ type="number"
+ {...field}
+ onChange={(e) => {
+ field.onChange(e)
+ form.clearErrors('fileSizeLimit')
+ }}
+ className="w-32 rounded-r-none border-r-0"
+ disabled={
+ !hasAccessToFileSizeConfiguration || !canUpdateStorageSettings
+ }
+ />
+ <FormField
+ control={form.control}
+ name="unit"
+ render={({ field: unitField }) => (
+ <Select
+ value={unitField.value}
+ onValueChange={(val) => {
+ unitField.onChange(val)
+ form.clearErrors('fileSizeLimit')
+ }}
+ disabled={
+ !hasAccessToFileSizeConfiguration ||
+ !canUpdateStorageSettings
+ }
+ >
+ <SelectTrigger className="w-[90px] text-xs font-mono rounded-l-none bg-surface-300">
+ <SelectValue placeholder="Choose a prefix">
+ {storageUnit}
+ </SelectValue>
+ </SelectTrigger>
+ <SelectContent>
+ {Object.values(StorageSizeUnits).map((unit: string) => (
+ <SelectItem
+ key={unit}
+ disabled={!hasAccessToFileSizeConfiguration}
+ value={unit}
+ >
+ {unit}
+ </SelectItem>
+ ))}
+ </SelectContent>
+ </Select>
+ )}
+ />
+ </div>
+ </FormControl>
+ {sizeLimitCheckCondition === 'confirm' && (
+ <ValidateSizeLimit
+ onValidate={sizeLimitCheckQuery}
+ projectRef={projectRef}
+ isLoadingBucketEstimate={isBucketEstimatePending}
+ />
+ )}
+ </FormItemLayout>
+ )}
+ />
+ {fileSizeLimitError && (
+ <FormMessage className="ml-auto mt-2 text-right w-1/2">
+ <StorageFileSizeLimitErrorMessage
+ error={fileSizeLimitError}
+ projectRef={projectRef}
+ />
+ </FormMessage>
+ )}
+ </CardContent>
+ {hasLimitedStorageAccess && (
+ <UpgradeToPro
+ fullWidth
+ variant="primary"
+ source="storageSizeLimit"
+ featureProposition="configure upload file size limits in Storage"
+ primaryText="Free Plan has a fixed upload file size limit of 50 MB"
+ secondaryText={`Upgrade to Pro Plan for a configurable upload file size limit of ${formatBytes(
+ STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
+ )} and unlock image transformations.`}
+ />
+ )}
+ {isSpendCapOn && (
+ <UpgradeToPro
+ fullWidth
+ addon="spendCap"
+ variant="default"
+ source="storageSizeLimit"
+ featureProposition="increase the file upload size limits in Storage"
+ buttonText="Disable spend cap"
+ primaryText="Reduced max upload file size limit due to spend cap"
+ secondaryText={`Disable your spend cap to allow file uploads of up to ${formatBytes(
+ STORAGE_FILE_SIZE_LIMIT_MAX_BYTES_UNCAPPED
+ )}.`}
+ />
+ )}
+
+ {!canUpdateStorageSettings && (
+ <CardContent>
+ <p className="text-sm text-foreground-light">
+ You need additional permissions to update storage settings
+ </p>
+ </CardContent>
+ )}
+
+ <CardFooter className="justify-end space-x-2">
+ {form.formState.isDirty && (
<Button
- variant={hasLimitedStorageAccess ? 'default' : 'primary'}
- type="submit"
- loading={isUpdating}
+ variant="default"
+ type="reset"
+ onClick={() => form.reset()}
disabled={
- !canUpdateStorageSettings || isUpdating || !form.formState.isDirty
+ !form.formState.isDirty || !canUpdateStorageSettings || isUpdating
}
>
- Save
+ Cancel
</Button>
- </CardFooter>
- </Card>
- </form>
- </>
+ )}
+ <Button
+ variant={hasLimitedStorageAccess ? 'default' : 'primary'}
+ type="submit"
+ loading={isUpdating}
+ disabled={
+ !canUpdateStorageSettings || isUpdating || !form.formState.isDirty
+ }
+ >
+ Save
+ </Button>
+ </CardFooter>
+ </Card>
+ </form>
)}
</>
)}
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
index d642e0a5689..8bf96c3df3e 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
@@ -23,7 +23,7 @@ import {
SheetTitle,
SheetTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import z from 'zod'
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/RegionLimitation.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/RegionLimitation.tsx
index bb7f7cdce1e..d8b133dc5eb 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/RegionLimitation.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/RegionLimitation.tsx
@@ -1,12 +1,9 @@
import { VectorBucket } from 'icons'
import { AWS_REGIONS } from 'shared-data'
import { Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-import {
- EmptyStatePresentational,
- PageContainer,
- PageSection,
- PageSectionContent,
-} from 'ui-patterns'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { AVAILABLE_REPLICA_REGIONS } from '@/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants'
import { AlphaNotice } from '@/components/ui/AlphaNotice'
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
index 9f19a022317..d50be9764c4 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketTableExamplesSheet.tsx
@@ -22,7 +22,7 @@ import {
SheetTitle,
SheetTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { useS3VectorsWrapperExtension } from '../useS3VectorsWrapper'
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
index e125a56697c..20d6811b4b9 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/index.tsx
@@ -44,7 +44,7 @@ import {
ScaffoldSectionDescription,
ScaffoldSectionTitle,
} from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useVectorBucketQuery } from '@/data/storage/vector-bucket-query'
import { useVectorBucketsIndexesQuery } from '@/data/storage/vector-buckets-indexes-query'
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketsErrorState.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketsErrorState.tsx
index 6bd95e679e3..f5720a9eaf1 100644
--- a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketsErrorState.tsx
+++ b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketsErrorState.tsx
@@ -1,5 +1,5 @@
import { VectorBucketsLocalDisabledState } from './VectorBucketsLocalDisabledState'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useDeploymentMode } from '@/hooks/misc/useDeploymentMode'
import type { ResponseError } from '@/types'
diff --git a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
index b0478b0eda0..b41c76a478b 100644
--- a/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
+++ b/apps/studio/components/interfaces/Support/LinkSupportTicketPage.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { Button, cn, DialogSectionSeparator } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { LinkSupportTicketForm } from './LinkSupportTicketForm'
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
index b9edd290bff..f587e28a2a5 100644
--- a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
+++ b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -7,9 +7,9 @@ import Link from 'next/link'
import type { UseFormReturn } from 'react-hook-form'
import { toast } from 'sonner'
import { Button, cn, CommandGroup, CommandItem, FormControl, FormField } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
-import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import type { ExtendedSupportCategories } from './Support.constants'
import type { SupportFormValues } from './SupportForm.schema'
diff --git a/apps/studio/components/interfaces/Support/Success.tsx b/apps/studio/components/interfaces/Support/Success.tsx
index 7e43b1cf8c7..3ac45a837e7 100644
--- a/apps/studio/components/interfaces/Support/Success.tsx
+++ b/apps/studio/components/interfaces/Support/Success.tsx
@@ -65,7 +65,7 @@ export const Success = ({
<Button
asChild
variant="default"
- icon={<IconDiscord size={16} fill="hsl(var(--background-default))" />}
+ icon={<IconDiscord size={16} fill="var(--background-default)" />}
>
<Link href="https://discord.supabase.com/" target="_blank">
Join Discord
diff --git a/apps/studio/components/interfaces/Support/SupportSuccessSection.tsx b/apps/studio/components/interfaces/Support/SupportSuccessSection.tsx
deleted file mode 100644
index d8178166152..00000000000
--- a/apps/studio/components/interfaces/Support/SupportSuccessSection.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import type { ReactNode } from 'react'
-import { cn } from 'ui'
-
-interface SupportSuccessSectionProps {
- icon?: ReactNode
- title: string
- description: ReactNode
- action?: ReactNode
- children?: ReactNode
- className?: string
- headerClassName?: string
-}
-
-export function SupportSuccessSection({
- icon,
- title,
- description,
- action,
- children,
- className,
- headerClassName,
-}: SupportSuccessSectionProps) {
- const hasIcon = icon !== undefined
-
- return (
- <div className={cn('w-full py-1', className)}>
- <div className="flex flex-col gap-4">
- <div
- className={cn(
- 'flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between',
- headerClassName
- )}
- >
- <div className={cn('flex min-w-0 flex-1 items-start', hasIcon ? 'gap-3' : 'gap-0')}>
- {hasIcon && (
- <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-background">
- {icon}
- </div>
- )}
- <div className="min-w-0 space-y-1">
- <h4 className="text-sm font-medium text-foreground">{title}</h4>
- <div className="text-sm text-foreground-light">{description}</div>
- </div>
- </div>
- {action && <div className="shrink-0 sm:ml-4">{action}</div>}
- </div>
- {children && <div className={cn(hasIcon && 'sm:pl-[52px]')}>{children}</div>}
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/SupportEmailVerification/SupportEmailVerification.tsx b/apps/studio/components/interfaces/SupportEmailVerification/SupportEmailVerification.tsx
index a069588c854..76c46d62b13 100644
--- a/apps/studio/components/interfaces/SupportEmailVerification/SupportEmailVerification.tsx
+++ b/apps/studio/components/interfaces/SupportEmailVerification/SupportEmailVerification.tsx
@@ -1,6 +1,7 @@
import { useParams } from 'common'
import { useEffect } from 'react'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { InterstitialLayout, SupabaseLogo } from '@/components/layouts/InterstitialLayout'
import { useVerifyEmailMutation } from '@/data/support/support-email-verification-mutation'
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index f54d2f3fa50..189c57fc216 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -182,7 +182,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
}
return (
- <div className="sb-grid-header__inner">
+ <div className="flex items-center space-x-2">
{showHeaderActions && (
<div className="flex items-center gap-x-2">
{isReadOnly && (
diff --git a/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx b/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
deleted file mode 100644
index 4c00de4812c..00000000000
--- a/apps/studio/components/interfaces/TableGridEditor/IndexAdvisorPopover.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Lightbulb } from 'lucide-react'
-import { Button, Popover, PopoverContent, PopoverTrigger } from 'ui'
-
-import { EnableIndexAdvisorButton } from '../QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton'
-
-export const IndexAdvisorPopover = () => {
- return (
- <Popover modal={false}>
- <PopoverTrigger asChild>
- <Button variant="default" icon={<Lightbulb strokeWidth={1.5} />}>
- Index Advisor
- </Button>
- </PopoverTrigger>
- <PopoverContent className="w-80 text-sm" align="end">
- <h4 className="flex items-center gap-2">
- <Lightbulb size={16} /> Index Advisor
- </h4>
- <div className="grid gap-2 mt-4 text-foreground-light text-xs">
- <p>Index Advisor recommends indexes to improve query performance on this table.</p>
- <p>Enable Index Advisor to get recommendations based on your actual query patterns.</p>
- <div className="mt-2">
- <EnableIndexAdvisorButton />
- </div>
- </div>
- </PopoverContent>
- </Popover>
- )
-}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
index 636138b553a..6704c06902c 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/InputField.tsx
@@ -1,5 +1,5 @@
import { includes, noop } from 'lodash'
-import { Edit, Eye } from 'lucide-react'
+import { Edit, Expand, Eye } from 'lucide-react'
import {
DropdownMenu,
DropdownMenuContent,
@@ -278,11 +278,10 @@ export const InputField = ({
<InputGroupButton
variant="default"
type="button"
+ icon={isEditable ? <Edit /> : <Expand />}
+ className="px-1.5"
onClick={() => onEditJson({ column: field.name, value: field.value })}
- icon={isEditable ? <Edit /> : <Eye />}
- >
- {isEditable ? 'Edit' : 'View JSON'}
- </InputGroupButton>
+ />
</InputGroupAddon>
</InputGroup>
</FormItemLayout>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonCodeEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonCodeEditor.tsx
deleted file mode 100644
index 49f9c13dcfe..00000000000
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonCodeEditor.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Editor, { OnChange } from '@monaco-editor/react'
-import { noop } from 'lodash'
-
-// [Joshen] Should just use CodeEditor instead of declaring Editor here so that all the mount logic is consistent
-
-interface JsonCodeEditorProps {
- value: string
- readOnly?: boolean
- onInputChange: OnChange
-}
-
-export const JsonCodeEditor = ({
- value = '',
- readOnly = false,
- onInputChange = noop,
-}: JsonCodeEditorProps) => {
- return (
- <Editor
- className="monaco-editor"
- theme="supabase"
- defaultLanguage="json"
- value={value}
- loading={<h4>Loading</h4>}
- options={{
- readOnly,
- tabSize: 2,
- fontSize: 13,
- minimap: {
- enabled: false,
- },
- wordWrap: 'on',
- fixedOverflowWidgets: true,
- lineNumbersMinChars: 4,
- }}
- onMount={(editor) => {
- editor.changeViewZones((accessor) => {
- accessor.addZone({
- afterLineNumber: 0,
- heightInPx: 4,
- domNode: document.createElement('div'),
- })
- })
- editor.focus()
- }}
- onChange={onInputChange}
- />
- )
-}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
index 1fbc235d376..23b4f9280ca 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/index.tsx
@@ -1,3 +1,4 @@
+import type { OnMount } from '@monaco-editor/react'
import { MAX_CHARACTERS } from '@supabase/pg-meta/src/query/table-row-query'
import { useParams } from 'common'
import { AlignLeft } from 'lucide-react'
@@ -8,8 +9,8 @@ import { Button, cn, SidePanel } from 'ui'
import { ActionBar } from '../../ActionBar'
import { isValueTruncated } from '../RowEditor.utils'
import { DrilldownViewer } from './DrilldownViewer/DrilldownViewer'
-import { JsonCodeEditor } from './JsonCodeEditor'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { TwoOptionToggle } from '@/components/ui/TwoOptionToggle'
import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
import { isTableLike } from '@/data/table-editor/table-editor-types'
@@ -60,16 +61,33 @@ export const JsonEditor = ({
const { mutate: getCellValue, isPending, isSuccess, reset } = useGetCellValueMutation()
- const validateJSON = async (resolve: () => void) => {
- try {
- const newJsonStr = removeJSONTrailingComma(jsonStr)
- const minifiedJSON = minifyJSON(newJsonStr)
- if (onSaveJSON) onSaveJSON(minifiedJSON, resolve)
- } catch (error: any) {
- resolve()
- toast.error('JSON seems to have an invalid structure.')
- }
- }
+ const validateJSON = useCallback(
+ async (nextValue: string, resolve: () => void) => {
+ try {
+ const newJsonStr = removeJSONTrailingComma(nextValue)
+ const minifiedJSON = minifyJSON(newJsonStr)
+ if (onSaveJSON) onSaveJSON(minifiedJSON, resolve)
+ } catch (error: any) {
+ resolve()
+ toast.error('JSON seems to have an invalid structure.')
+ }
+ },
+ [onSaveJSON]
+ )
+
+ const handleEditorMount: OnMount = useCallback(
+ (editor, monaco) => {
+ if (readOnly) return
+
+ editor.addAction({
+ id: 'save-value',
+ label: 'Save value',
+ keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
+ run: () => validateJSON(editor.getValue(), () => undefined),
+ })
+ },
+ [readOnly, validateJSON]
+ )
const prettify = () => {
const res = prettifyJSON(jsonStr)
@@ -166,18 +184,20 @@ export const JsonEditor = ({
closePanel={onClose}
backButtonLabel={backButtonLabel}
applyButtonLabel={applyButtonLabel}
- applyFunction={readOnly ? undefined : validateJSON}
+ applyFunction={readOnly ? undefined : (resolve) => validateJSON(jsonStr, resolve)}
/>
}
>
<div className="flex flex-auto h-full flex-col gap-y-4 relative">
{view === 'edit' ? (
<div className="w-full h-full grow">
- <JsonCodeEditor
+ <CodeEditor
key={jsonString}
- readOnly={readOnly}
- onInputChange={(val) => setJsonStr(val ?? '')}
+ isReadOnly={readOnly}
+ language="json"
value={(jsonStr ?? '').toString()}
+ onInputChange={(val) => setJsonStr(val ?? '')}
+ onMount={handleEditorMount}
/>
</div>
) : (
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
index ced4a6bc70a..6c4b5a08f37 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
@@ -18,6 +18,7 @@ import {
validateFields,
} from './RowEditor.utils'
import { TextEditor } from './TextEditor'
+import { getStableRowIdentifiers } from '@/components/grid/utils/queueOperationUtils'
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
import { useForeignKeyConstraintsQuery } from '@/data/database/foreign-key-constraints-query'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -144,7 +145,7 @@ export const RowEditor = ({
identifiers[column.name] =
column.format === 'bytea' ? convertByteaToHex(row![column.name]) : row![column.name]
})
- configuration.identifiers = identifiers
+ configuration.identifiers = getStableRowIdentifiers(row!, identifiers)
configuration.rowIdx = row!.idx
}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
index a64bdd1bf68..8a03bca1b88 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/TextEditor.tsx
@@ -1,7 +1,6 @@
-import { Editor } from '@monaco-editor/react'
+import type { OnMount } from '@monaco-editor/react'
import { MAX_CHARACTERS } from '@supabase/pg-meta/src/query/table-row-query'
import { useParams } from 'common'
-import { Loader } from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
import remarkGfm from 'remark-gfm'
import { toast } from 'sonner'
@@ -10,6 +9,7 @@ import { Button, cn, SidePanel } from 'ui'
import { ActionBar } from '../ActionBar'
import { isValueTruncated } from './RowEditor.utils'
import { Markdown } from '@/components/interfaces/Markdown'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { TwoOptionToggle } from '@/components/ui/TwoOptionToggle'
import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
import { isTableLike } from '@/data/table-editor/table-editor-types'
@@ -78,9 +78,26 @@ export const TextEditor = ({
)
}
- const saveValue = (resolve: () => void) => {
- if (onSaveField) onSaveField(strValue, resolve)
- }
+ const saveValue = useCallback(
+ (nextValue: string, resolve: () => void) => {
+ if (onSaveField) onSaveField(nextValue, resolve)
+ },
+ [onSaveField]
+ )
+
+ const handleEditorMount: OnMount = useCallback(
+ (editor, monaco) => {
+ if (readOnly) return
+
+ editor.addAction({
+ id: 'save-value',
+ label: 'Save value',
+ keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
+ run: () => saveValue(editor.getValue(), () => undefined),
+ })
+ },
+ [readOnly, saveValue]
+ )
useEffect(() => {
if (visible) {
@@ -122,42 +139,20 @@ export const TextEditor = ({
closePanel={onClose}
backButtonLabel="Cancel"
applyButtonLabel="Save value"
- applyFunction={readOnly ? undefined : saveValue}
+ applyFunction={readOnly ? undefined : (resolve) => saveValue(strValue, resolve)}
/>
}
>
<div className="relative flex flex-auto h-full flex-col gap-y-4">
{view === 'edit' ? (
<div className="w-full h-full grow">
- <Editor
+ <CodeEditor
key={value}
- theme="supabase"
- className="monaco-editor"
- defaultLanguage="markdown"
- value={strValue}
- loading={<Loader className="animate-spin" strokeWidth={2} size={20} />}
- options={{
- readOnly,
- tabSize: 2,
- fontSize: 13,
- minimap: {
- enabled: false,
- },
- wordWrap: 'on',
- fixedOverflowWidgets: true,
- lineNumbersMinChars: 4,
- }}
- onMount={(editor) => {
- editor.changeViewZones((accessor) => {
- accessor.addZone({
- afterLineNumber: 0,
- heightInPx: 4,
- domNode: document.createElement('div'),
- })
- })
- editor.focus()
- }}
- onChange={(val) => setStrValue(val ?? '')}
+ isReadOnly={readOnly}
+ language="markdown"
+ value={strValue ?? ''}
+ onInputChange={(val) => setStrValue(val ?? '')}
+ onMount={handleEditorMount}
/>
</div>
) : (
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
index 42d782b88ec..05a0d70b445 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.tsx
@@ -35,11 +35,8 @@ import {
import { TableEditor } from './TableEditor/TableEditor'
import type { ImportContent } from './TableEditor/TableEditor.types'
import { useTableRowOperations } from '@/components/grid/hooks/useTableRowOperations'
+import { getStableRowIdentifiers } from '@/components/grid/utils/queueOperationUtils'
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
-import {
- acceptGeneratedPolicy,
- type GeneratedPolicy,
-} from '@/components/interfaces/Auth/Policies/Policies.utils'
import { DiscardChangesConfirmationDialog } from '@/components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
import { databasePoliciesKeys } from '@/data/database-policies/keys'
import { useDatabasePublicationCreateMutation } from '@/data/database-publications/database-publications-create-mutation'
@@ -82,7 +79,6 @@ type SaveTableParamsBase = {
columns: ColumnField[]
foreignKeyRelations: ForeignKey[]
resolve: () => void
- generatedPolicies?: GeneratedPolicy[]
}
type SaveTableParamsNew = SaveTableParamsBase & {
@@ -318,7 +314,7 @@ export const SidePanelEditor = ({
const { row, column } = selectedValueForJsonEdit
payload = { [column]: value === null ? null : JSON.parse(value as any) }
selectedTable.primary_keys.forEach((column) => (identifiers[column.name] = row![column.name]))
- configuration = { identifiers, rowIdx: row.idx }
+ configuration = { identifiers: getStableRowIdentifiers(row!, identifiers), rowIdx: row.idx }
} else if (snap.sidePanel?.type === 'cell') {
const column = snap.sidePanel.value?.column
const row = snap.sidePanel.value?.row
@@ -326,7 +322,7 @@ export const SidePanelEditor = ({
if (!column || !row) return
payload = { [column]: value === null ? null : value }
selectedTable.primary_keys.forEach((column) => (identifiers[column.name] = row![column.name]))
- configuration = { identifiers, rowIdx: row.idx }
+ configuration = { identifiers: getStableRowIdentifiers(row!, identifiers), rowIdx: row.idx }
}
if (payload !== undefined && configuration !== undefined) {
@@ -354,7 +350,10 @@ export const SidePanelEditor = ({
})
const isNewRecord = false
- const configuration = { identifiers, rowIdx: row.idx }
+ const configuration = {
+ identifiers: getStableRowIdentifiers(row, identifiers),
+ rowIdx: row.idx,
+ }
await saveRow(value, isNewRecord, configuration, (error) => {
if (error) {
@@ -594,7 +593,6 @@ export const SidePanelEditor = ({
configuration,
columns,
foreignKeyRelations,
- generatedPolicies = [],
resolve,
}: SaveTableParams) => {
let toastId
@@ -659,7 +657,6 @@ export const SidePanelEditor = ({
'table.has_rls': isRLSEnabled ? 1 : 0,
'table.has_foreign_keys': foreignKeyRelations.length > 0 ? 1 : 0,
'table.has_import': importContent !== undefined ? 1 : 0,
- 'table.generated_policies_count': generatedPolicies.length,
'project.region': project?.region ?? 'local',
...(project?.cloud_provider && {
'project.cloud_provider': project.cloud_provider,
@@ -670,13 +667,7 @@ export const SidePanelEditor = ({
})
try {
- // The Save click is the explicit user gesture that promotes generated policy
- // SQL (programmatic or AI) to executable. Programmatic fragments are already
- // SafeSqlFragment; AI fragments are UntrustedSqlFragment — both are accepted
- // here before being passed into createTable.
- const acceptedPolicies = generatedPolicies.map(acceptGeneratedPolicy)
-
- const { table, failedPolicies } = await createTable({
+ const { table } = await createTable({
projectRef: project?.ref!,
connectionString: project?.connectionString,
toastId,
@@ -685,13 +676,10 @@ export const SidePanelEditor = ({
foreignKeyRelations,
isRLSEnabled,
importContent,
- generatedPolicies: acceptedPolicies,
- onCreatePoliciesSuccess: () => track('rls_generated_policies_created'),
track,
})
createTableSpan.setAttribute('table.created', 1)
- createTableSpan.setAttribute('table.failed_policies', failedPolicies.length)
await Sentry.startSpan(
{ name: 'create_table.post_creation', op: 'db.table.post_creation' },
@@ -732,24 +720,7 @@ export const SidePanelEditor = ({
}
)
- // Show success toast after everything is complete
- if (failedPolicies.length > 0) {
- toast.success(
- `Table ${table.name} is created successfully, but we ran into issues creating ${failedPolicies.length} policie${failedPolicies.length > 1 ? 's' : ''}`,
- {
- id: toastId,
- description: (
- <ul className="list-disc pl-6">
- {failedPolicies.map((x) => (
- <li key={x.name}>{x.name}</li>
- ))}
- </ul>
- ),
- }
- )
- } else {
- toast.success(`Table ${table.name} is good to go!`, { id: toastId })
- }
+ toast.success(`Table ${table.name} is good to go!`, { id: toastId })
onTableCreated(table)
} catch (error) {
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.createTable.test.ts b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.createTable.test.ts
index 02e843e0f2c..2f5b366797a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.createTable.test.ts
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.createTable.test.ts
@@ -132,7 +132,6 @@ describe('createTable', () => {
})
expect(mockTrack).toHaveBeenCalledWith('table_created', {
- has_generated_policies: false,
method: 'table_editor',
schema_name: 'public',
table_name: 'test_table',
@@ -148,7 +147,6 @@ describe('createTable', () => {
)
expect(result).toStrictEqual({
- failedPolicies: [],
table: mockTableResult,
})
})
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
index ac043ff81a7..63b72069d9d 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.utils.tsx
@@ -1,4 +1,5 @@
import * as Sentry from '@sentry/nextjs'
+import type { PGTablePrimaryKey } from '@supabase/pg-meta'
import pgMeta, {
getAddForeignKeySQL,
getAddPrimaryKeySQL,
@@ -11,7 +12,6 @@ import pgMeta, {
getUpdateIdentitySequenceSQL,
type ForeignKey,
} from '@supabase/pg-meta'
-import type { PGTablePrimaryKey } from '@supabase/pg-meta'
import { joinSqlFragments, safeSql, type SafeSqlFragment } from '@supabase/pg-meta/src/pg-format'
import { Query } from '@supabase/pg-meta/src/query'
import { chunk, find, isEmpty, isEqual } from 'lodash'
@@ -26,12 +26,10 @@ import type { ColumnField, CreateColumnPayload, UpdateColumnPayload } from './Si
import { checkIfRelationChanged } from './TableEditor/ForeignKeysManagement/ForeignKeysManagement.utils'
import type { ImportContent } from './TableEditor/TableEditor.types'
import type { SupaRow } from '@/components/grid/types'
-import { type AcceptedGeneratedPolicy } from '@/components/interfaces/Auth/Policies/Policies.utils'
-import SparkBar from '@/components/ui/SparkBar'
+import { SparkBar } from '@/components/ui/SparkBar'
import { createDatabaseColumn } from '@/data/database-columns/database-column-create-mutation'
import { deleteDatabaseColumn } from '@/data/database-columns/database-column-delete-mutation'
import { updateDatabaseColumn } from '@/data/database-columns/database-column-update-mutation'
-import { createDatabasePolicy } from '@/data/database-policies/database-policy-create-mutation'
import type { Constraint } from '@/data/database/constraints-query'
import { ForeignKeyConstraint } from '@/data/database/foreign-key-constraints-query'
import { databaseKeys } from '@/data/database/keys'
@@ -443,8 +441,6 @@ export const createTable = async ({
foreignKeyRelations,
isRLSEnabled,
importContent,
- generatedPolicies = [],
- onCreatePoliciesSuccess,
track,
}: {
projectRef: string
@@ -459,8 +455,6 @@ export const createTable = async ({
foreignKeyRelations: ForeignKey[]
isRLSEnabled: boolean
importContent?: ImportContent
- generatedPolicies?: AcceptedGeneratedPolicy[]
- onCreatePoliciesSuccess?: () => void
track: Track
}) => {
const queryClient = getQueryClient()
@@ -545,51 +539,10 @@ export const createTable = async ({
}
)
- // 6. Create generated RLS policies if any
- // [Joshen] Possible area for optimization to create all policies in a single query call
- // Can be subsequently added to the table creation SQL as well for a single transaction
-
- const failedPolicies: AcceptedGeneratedPolicy[] = []
- if (generatedPolicies.length > 0 && isRLSEnabled) {
- await Sentry.startSpan(
- { name: 'create_table.create_policies', op: 'db.policies.create' },
- async (span) => {
- span.setAttribute('policies.count', generatedPolicies.length)
- toast.loading(`Creating ${generatedPolicies.length} policies for table...`, { id: toastId })
- await Promise.all(
- generatedPolicies.map(async (policy) => {
- try {
- return await createDatabasePolicy({
- projectRef,
- connectionString,
- payload: {
- name: policy.name,
- table: policy.table,
- schema: policy.schema,
- definition: policy.definition,
- check: policy.check,
- action: policy.action,
- command: policy.command,
- roles: policy.roles,
- },
- })
- } catch (error: any) {
- console.error('Failed to generate policy', error.message)
- failedPolicies.push(policy)
- }
- })
- )
- span.setAttribute('policies.failed_count', failedPolicies.length)
- onCreatePoliciesSuccess?.()
- }
- )
- }
-
track('table_created', {
method: 'table_editor',
schema_name: payload.schema,
table_name: payload.name,
- has_generated_policies: generatedPolicies.length > 0 && isRLSEnabled,
})
if (isRLSEnabled) {
@@ -726,7 +679,7 @@ export const createTable = async ({
)
// Finally, return the created table
- return { table, failedPolicies }
+ return { table }
}
/** TODO: Refactor to do in a single transaction */
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
index 2b5e465c415..80175c081a9 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadSheetFileUpload.tsx
@@ -2,7 +2,7 @@ import { FileText, Loader } from 'lucide-react'
import { DragEvent, useCallback, useRef, useState, type ChangeEvent } from 'react'
import { Button, cn } from 'ui'
-import SparkBar from '@/components/ui/SparkBar'
+import { SparkBar } from '@/components/ui/SparkBar'
interface SpreadSheetFileUploadProps {
parseProgress: number
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.tsx
index bd8894b58c4..ebd6b5c413d 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImport.tsx
@@ -2,7 +2,13 @@ import type { PGTable } from '@supabase/pg-meta'
import { noop } from 'lodash'
import { useCallback, type ChangeEvent, type DragEvent } from 'react'
import { toast } from 'sonner'
-import { SidePanel, Tabs } from 'ui'
+import {
+ SidePanel,
+ Tabs_Shadcn_ as Tabs,
+ TabsContent_Shadcn_ as TabsContent,
+ TabsList_Shadcn_ as TabsList,
+ TabsTrigger_Shadcn_ as TabsTrigger,
+} from 'ui'
import { ActionBar } from '../ActionBar'
import type { ImportContent } from '../TableEditor/TableEditor.types'
@@ -112,8 +118,12 @@ export const SpreadsheetImport = ({
>
<SidePanel.Content>
<div className="pt-6">
- <Tabs block type="pills" activeId={tab} onChange={handleSwitchTab}>
- <Tabs.Panel id="fileUpload" label="Upload CSV">
+ <Tabs value={tab} onValueChange={handleSwitchTab}>
+ <TabsList className="grid w-full grid-cols-2">
+ <TabsTrigger value="fileUpload">Upload CSV</TabsTrigger>
+ <TabsTrigger value="pasteText">Paste text</TabsTrigger>
+ </TabsList>
+ <TabsContent value="fileUpload">
<SpreadsheetFileDropZone
file={hasAttachedFile(state) ? state.file : undefined}
parseProgress={
@@ -122,13 +132,13 @@ export const SpreadsheetImport = ({
onUploadFile={handleUploadFile}
onRemoveFile={handleRemoveFile}
/>
- </Tabs.Panel>
- <Tabs.Panel id="pasteText" label="Paste text">
+ </TabsContent>
+ <TabsContent value="pasteText">
<SpreadsheetInputZone
text={hasAttachedText(state) ? state.text : ''}
onInputChange={handleInputText}
/>
- </Tabs.Panel>
+ </TabsContent>
</Tabs>
</div>
</SidePanel.Content>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/useSpreadsheetImport.ts b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/useSpreadsheetImport.ts
index 0aaa35a8971..fc231f0dd3e 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/useSpreadsheetImport.ts
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/useSpreadsheetImport.ts
@@ -4,7 +4,7 @@ import { toast } from 'sonner'
import type { SpreadsheetData } from './SpreadsheetImport.types'
import { parseSpreadsheet, parseSpreadsheetText } from './SpreadsheetImport.utils'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useTableEditorStateSnapshot } from '@/state/table-editor'
interface NoFileState {
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
index c1d276ac102..756de361299 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ApiAccessToggle.tsx
@@ -13,7 +13,7 @@ import {
} from 'react'
import { usePreviousDistinct } from 'react-use'
import { Button, Switch } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { getApiEndpoint } from '@/components/interfaces/Integrations/DataApi/DataApi.utils'
@@ -320,7 +320,7 @@ export const ApiAccessToggle = ({
<div className="space-y-3">
<div className="flex items-center justify-between gap-3">
<div>
- <h5>Data API Access</h5>
+ <h5>Data API access</h5>
<p className="text-sm text-foreground-lighter">
Allow this table to be queried via Supabase client libraries or the API directly
</p>
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
index bbc84257119..d4c2ef0de94 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx
@@ -269,7 +269,7 @@ export const Column = ({
size="small"
value={column.defaultValue ?? ''}
disabled={column.format.includes('int') && column.isIdentity}
- className={`rounded-sm bg-surface-100 lg:gap-0 ${
+ className={`rounded-sm lg:gap-0 ${
column.format.includes('int') && column.isIdentity ? 'opacity-50' : ''
}`}
suggestions={suggestions}
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
index 63fc7626aa3..504bae7822a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ForeignKeysManagement/ForeignKeysManagement.tsx
@@ -7,7 +7,7 @@ import type { ForeignKey } from '../../ForeignKeySelector/ForeignKeySelector.typ
import type { TableField } from '../TableEditor.types'
import { ForeignKeyRow } from './ForeignKeyRow'
import { checkIfRelationChanged } from './ForeignKeysManagement.utils'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { useForeignKeyConstraintsQuery } from '@/data/database/foreign-key-constraints-query'
import { useQuerySchemaState } from '@/hooks/misc/useSchemaQueryState'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
index a7fb5b04002..a8313d0cd1a 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -2,7 +2,7 @@ import { isEmpty, noop } from 'lodash'
import { useContext, useEffect, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
import { Badge, Checkbox, Input, SidePanel } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { ActionBar } from '../ActionBar'
@@ -242,7 +242,6 @@ export const TableEditor = ({
columns,
foreignKeyRelations: fkRelations,
resolve,
- generatedPolicies: [],
})
} else if (isDuplicating) {
const payload: SaveTablePayloadFor<'duplicate'> = {
@@ -256,7 +255,6 @@ export const TableEditor = ({
columns,
foreignKeyRelations: fkRelations,
resolve,
- generatedPolicies: [],
})
} else {
const payload: SaveTablePayloadFor<'update'> = {
@@ -271,7 +269,6 @@ export const TableEditor = ({
columns,
foreignKeyRelations: fkRelations,
resolve,
- generatedPolicies: [],
})
}
} else {
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
index ec1b2ad97e1..5044db1a0a2 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/TableDefinition.tsx
@@ -1,18 +1,16 @@
-import Editor from '@monaco-editor/react'
import { useParams } from 'common'
-import { useTheme } from 'next-themes'
import Link from 'next/link'
-import { useMemo, useRef } from 'react'
+import { useMemo } from 'react'
import { Button } from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { Footer } from '@/components/grid/components/footer/Footer'
+import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
import { useTableDefinitionQuery } from '@/data/database/table-definition-query'
import { useViewDefinitionQuery } from '@/data/database/view-definition-query'
import { Entity, isTableLike, isViewLike } from '@/data/table-editor/table-editor-types'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { formatSql } from '@/lib/formatSql'
-import { timeout } from '@/lib/helpers'
export interface TableDefinitionProps {
entity?: Entity
@@ -20,9 +18,6 @@ export interface TableDefinitionProps {
export const TableDefinition = ({ entity }: TableDefinitionProps) => {
const { ref } = useParams()
- const editorRef = useRef(null)
- const monacoRef = useRef(null)
- const { resolvedTheme } = useTheme()
const { data: project } = useSelectedProjectQuery()
const viewResult = useViewDefinitionQuery(
@@ -55,24 +50,6 @@ export const TableDefinition = ({ entity }: TableDefinitionProps) => {
[definition]
)
- const handleEditorOnMount = async (editor: any, monaco: any) => {
- editorRef.current = editor
- monacoRef.current = monaco
-
- // add margin above first line
- editor.changeViewZones((accessor: any) => {
- accessor.addZone({
- afterLineNumber: 0,
- heightInPx: 4,
- domNode: document.createElement('div'),
- })
- })
-
- // when editor did mount, it will need a delay before focus() works properly
- await timeout(500)
- editor?.focus()
- }
-
if (isLoading) {
return (
<div className="h-full grid">
@@ -98,23 +75,8 @@ export const TableDefinition = ({ entity }: TableDefinitionProps) => {
Open in SQL Editor
</Link>
</Button>
- <Editor
- className="monaco-editor"
- theme={resolvedTheme?.includes('dark') ? 'vs-dark' : 'vs'}
- onMount={handleEditorOnMount}
- defaultLanguage="pgsql"
- value={formattedDefinition}
- path={''}
- options={{
- domReadOnly: true,
- readOnly: true,
- tabSize: 2,
- fontSize: 13,
- minimap: { enabled: false },
- wordWrap: 'on',
- fixedOverflowWidgets: true,
- }}
- />
+
+ <CodeEditor isReadOnly language="pgsql" value={formattedDefinition} />
</div>
<Footer />
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.test.ts b/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.test.ts
index 1b7419f1326..e79948922f9 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.test.ts
+++ b/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.test.ts
@@ -181,7 +181,7 @@ describe('TableEntity.utils: formatTableRowsToSQL', () => {
describe('TableEntity.utils: getTablePoliciesUrl', () => {
it('builds the policies url for plain schema and name values', () => {
expect(getTablePoliciesUrl('abc', 'public', 'users')).toBe(
- '/project/abc/auth/policies?search=users&schema=public'
+ '/project/abc/database/policies?search=users&schema=public'
)
})
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.ts b/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.ts
index ea9d789cc4d..dc09cc2b9d3 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.ts
+++ b/apps/studio/components/interfaces/TableGridEditor/TableEntity.utils.ts
@@ -29,7 +29,7 @@ export const getTablePoliciesUrl = (
schema: string | undefined,
name: string | undefined
): string => {
- return `/project/${projectRef ?? ''}/auth/policies?search=${encodeURIComponent(
+ return `/project/${projectRef ?? ''}/database/policies?search=${encodeURIComponent(
name ?? ''
)}&schema=${encodeURIComponent(schema ?? '')}`
}
diff --git a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
index c25fe9e79ec..b0a2f2d4c54 100644
--- a/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/TableGridEditor.tsx
@@ -5,7 +5,8 @@ import { useRouter } from 'next/router'
import { parseAsString, useQueryState } from 'nuqs'
import { useCallback } from 'react'
import { Button } from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import DeleteConfirmationDialogs from './DeleteConfirmationDialogs'
import { SidePanelEditor } from './SidePanelEditor/SidePanelEditor'
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx
deleted file mode 100644
index fa70470b0e7..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/BlockField.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Skeleton } from 'ui'
-
-import { BlockFieldProps } from '../../types'
-import { TruncatedTextWithPopover } from './TruncatedTextWithPopover'
-import { DataTableColumnStatusCode } from '@/components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
-import { DataTableSheetRowAction } from '@/components/ui/DataTable/DataTableSheetRowAction'
-
-export const BlockField = ({
- config,
- data,
- enrichedData,
- isLoading,
- filterFields,
- table,
-}: BlockFieldProps) => {
- const value = config.getValue(data, enrichedData)
- const displayValue = value ?? 'No value'
- const stringValue = String(displayValue)
-
- const shouldShowSkeleton = config.requiresEnrichedData && isLoading && !value
-
- const filterField = filterFields.find((field) => field.value === config.id)
- const isFilterable = !!filterField
-
- // Special handling for status field and key fields
- const isStatusField = config.id === 'status'
- const isApiKeyField = config.id === 'api_key_role'
-
- // Truncation config
- const maxLength = config.maxLength || 50 // Default to 50 characters
-
- const fieldContent = (
- <>
- <dt className="text-[13.5px] text-foreground-light">{config.label}</dt>
- <dd className="text-right">
- {shouldShowSkeleton ? (
- <Skeleton className="h-4 w-24" />
- ) : isStatusField && displayValue !== 'N/A' ? (
- <DataTableColumnStatusCode value={displayValue} level={data?.level} className="text-xs" />
- ) : isApiKeyField && displayValue !== 'N/A' ? (
- <TruncatedTextWithPopover
- text={stringValue}
- maxLength={maxLength}
- className="px-2 py-1 text-xs font-mono border border-border rounded-sm bg-surface-100"
- />
- ) : displayValue !== 'N/A' ? (
- <TruncatedTextWithPopover
- text={stringValue}
- maxLength={maxLength}
- className={`text-sm font-mono ${
- isFilterable ? 'text-foreground cursor-pointer hover:underline' : 'text-foreground'
- }`}
- />
- ) : (
- <span
- className={`text-sm font-mono ${
- isFilterable ? 'text-foreground cursor-pointer hover:underline' : 'text-foreground'
- } text-foreground-light`}
- >
- {displayValue}
- </span>
- )}
- </dd>
- </>
- )
-
- if (isFilterable && !shouldShowSkeleton && displayValue !== 'N/A') {
- return (
- <DataTableSheetRowAction
- fieldValue={config.id}
- filterFields={filterFields}
- value={stringValue}
- table={table}
- className="flex justify-between items-center py-1 px-2 rounded-sm hover:bg-accent/50 cursor-pointer w-full hover:bg-surface-400"
- >
- {fieldContent}
- </DataTableSheetRowAction>
- )
- }
-
- return <div className="flex justify-between items-center py-1 px-2">{fieldContent}</div>
-}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx
deleted file mode 100644
index c210412ea46..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/FieldWithSeeMore.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Table } from '@tanstack/react-table'
-import { X } from 'lucide-react'
-import { useState } from 'react'
-import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, Skeleton } from 'ui'
-
-import { BlockFieldConfig } from '../../types'
-import { BlockField } from './BlockField'
-import { DataTableFilterField } from '@/components/ui/DataTable/DataTable.types'
-
-// Single source of truth for field row styling
-export const FieldRow = ({
- label,
- value,
- expandButton,
-}: {
- label: string
- value: React.ReactNode
- expandButton?: React.ReactNode
-}) => (
- <div className="flex justify-between items-center py-1 px-2">
- <dt className="flex items-center gap-2 text-[13.5px] text-foreground-light">
- <span>{label}</span>
- {expandButton}
- </dt>
- <dd className="text-right">{value}</dd>
- </div>
-)
-
-interface FieldWithSeeMoreProps {
- primaryField: BlockFieldConfig
- additionalFields: BlockFieldConfig[]
- data: any
- enrichedData?: any
- isLoading?: boolean
- filterFields: DataTableFilterField<any>[]
- table: Table<any>
- showValueAsBadge?: boolean
-}
-
-// Primary field with expandable additional details
-export const FieldWithSeeMore = ({
- primaryField,
- additionalFields,
- data,
- enrichedData,
- isLoading,
- filterFields,
- table,
- showValueAsBadge = false,
-}: FieldWithSeeMoreProps) => {
- const [isOpen, setIsOpen] = useState(false)
- const hasAdditionalData = additionalFields.some(
- (field) => field.getValue(data, enrichedData) && field.getValue(data, enrichedData) !== 'N/A'
- )
-
- const primaryValue = primaryField.getValue(data, enrichedData)
- const shouldShowSkeleton = primaryField.requiresEnrichedData && isLoading && !primaryValue
- const isApiKeyField = primaryField.id === 'api_key_role'
-
- // Common value rendering logic
- const renderValue = () => {
- if (shouldShowSkeleton) {
- return <Skeleton className="h-4 w-24" />
- }
-
- if (isApiKeyField && primaryValue && primaryValue !== 'N/A') {
- return (
- <span className="border border-border rounded-sm px-2 py-1 bg-surface-100 text-xs font-mono text-foreground">
- {primaryValue}
- </span>
- )
- }
-
- if (showValueAsBadge && primaryValue && primaryValue !== 'N/A') {
- return <Badge variant="secondary">{primaryValue}</Badge>
- }
-
- return (
- <span
- className={`text-sm font-mono text-foreground ${
- primaryValue === 'N/A' ? 'text-foreground-light' : ''
- }`}
- >
- {primaryValue ?? 'N/A'}
- </span>
- )
- }
-
- const expandButton = hasAdditionalData ? (
- <CollapsibleTrigger asChild>
- <button className="w-3 h-3 flex items-center justify-center selection:font-mono text-foreground-lighter text-xs hover:text-foreground-light bg-foreground-muted/75 rounded-sm [&[data-state=open]>svg]:rotate-180 hover:bg-foreground-lighter">
- <X size={10} className="text-background-surface-400 rotate-45" strokeWidth={3} />
- </button>
- </CollapsibleTrigger>
- ) : undefined
-
- return (
- <div className="border-t border-border">
- {hasAdditionalData ? (
- <Collapsible open={isOpen} onOpenChange={setIsOpen}>
- <FieldRow label={primaryField.label} value={renderValue()} expandButton={expandButton} />
- <CollapsibleContent className="transition-all data-closed:animate-collapsible-up data-open:animate-collapsible-down">
- <div className="mt-1">
- {additionalFields.map((field) => (
- <BlockField
- key={field.id}
- config={field}
- data={data}
- enrichedData={enrichedData}
- isLoading={isLoading}
- filterFields={filterFields}
- table={table}
- />
- ))}
- </div>
- </CollapsibleContent>
- </Collapsible>
- ) : (
- <FieldRow label={primaryField.label} value={renderValue()} />
- )}
- </div>
- )
-}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/TruncatedTextWithPopover.tsx b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/TruncatedTextWithPopover.tsx
deleted file mode 100644
index 809f06a994e..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/components/shared/TruncatedTextWithPopover.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useState } from 'react'
-import { Popover, PopoverContent, PopoverTrigger } from 'ui'
-
-interface TruncatedTextWithPopoverProps {
- text: string
- maxLength?: number
- className?: string
- children?: React.ReactNode
-}
-
-export const TruncatedTextWithPopover = ({
- text,
- maxLength = 50,
- className = '',
- children,
-}: TruncatedTextWithPopoverProps) => {
- const [isOpen, setIsOpen] = useState(false)
- const isTruncated = text.length > maxLength
- const truncatedText = isTruncated ? text.substring(0, maxLength) + '...' : text
-
- // If not truncated, just render the text without popover
- if (!isTruncated) {
- return children ? <>{children}</> : <span className={className}>{text}</span>
- }
-
- // If truncated, render with popover
- return (
- <Popover open={isOpen} onOpenChange={setIsOpen}>
- <PopoverTrigger asChild>
- <span className={`cursor-help ${className}`}>{children || truncatedText}</span>
- </PopoverTrigger>
- <PopoverContent className="max-w-md p-3 wrap-break-word" side="top">
- <div className="text-sm font-mono whitespace-pre-wrap">{text}</div>
- </PopoverContent>
- </Popover>
- )
-}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/config/fieldHelpers.ts b/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/config/fieldHelpers.ts
deleted file mode 100644
index a96245f8f53..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/ServiceFlow/config/fieldHelpers.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import { BlockFieldConfig } from '../types'
-
-/**
- * Common field configuration helpers to reduce duplication
- */
-
-// Helper for simple fields that fallback from enrichedData to data
-export const createField = (
- id: string,
- label: string,
- enrichedKey?: string,
- dataKey?: string,
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const eKey = enrichedKey || id
- const dKey = dataKey || id
- return enrichedData?.[eKey] || data?.[dKey]
- },
- requiresEnrichedData,
-})
-
-// Helper for truncated text fields
-export const createTruncatedField = (
- id: string,
- label: string,
- maxLength: number,
- enrichedKey?: string,
- dataKey?: string,
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const eKey = enrichedKey || id
- const dKey = dataKey || id
- const value = enrichedData?.[eKey] || data?.[dKey]
- if (!value || typeof value !== 'string') return value
- return value.length > maxLength ? `${value.substring(0, maxLength)}...` : value
- },
- requiresEnrichedData,
-})
-
-// Helper for ID fields that show truncated version
-export const createIdField = (
- id: string,
- label: string,
- truncateLength = 8,
- enrichedKey?: string,
- dataKey?: string,
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const eKey = enrichedKey || id
- const dKey = dataKey || id
- const value = enrichedData?.[eKey] || data?.[dKey]
- if (!value) return null
- const stringValue = String(value)
- return truncateLength ? `${stringValue.substring(0, truncateLength)}...` : stringValue
- },
- requiresEnrichedData,
-})
-
-// Helper for time/duration fields
-export const createTimeField = (
- id: string,
- label: string,
- unit = 'ms',
- enrichedKey?: string,
- dataKey?: string,
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const eKey = enrichedKey || id
- const dKey = dataKey || id
- const time = enrichedData?.[eKey] || data?.[dKey]
- return time ? `${time}${unit}` : null
- },
- requiresEnrichedData,
-})
-
-// Helper for status fields with fallback logic
-export const createStatusField = (
- id: string = 'status',
- label: string = 'Status'
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => enrichedData?.status || data?.status,
-})
-
-// Helper for path/filename extraction
-export const createFileNameField = (
- id: string,
- label: string,
- pathKey = 'path',
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const path = enrichedData?.[pathKey] || data?.[pathKey]
- if (!path) return null
- // Remove query parameters and hash, get last segment
- const cleanPath = path.split('?')[0].split('#')[0]
- const segments = cleanPath.split('/')
- return segments[segments.length - 1] || null
- },
- requiresEnrichedData,
-})
-
-// Helper for conditional fields based on error status
-export const createConditionalField = (
- id: string,
- label: string,
- getValue: (data: any, enrichedData?: any) => any,
- errorValue: string = 'Unavailable',
- deletedValue: string = 'Object deleted',
- requiresEnrichedData = false
-): BlockFieldConfig => ({
- id,
- label,
- getValue: (data, enrichedData) => {
- const status = enrichedData?.status || data?.status
- const numStatus = Number(status)
-
- if (status === 404 || status === '404') {
- return deletedValue
- } else if (numStatus >= 400) {
- return errorValue
- }
-
- return getValue(data, enrichedData)
- },
- requiresEnrichedData,
-})
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.constants.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.constants.tsx
index 8abac9cca6d..36dd514026a 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.constants.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.constants.tsx
@@ -16,17 +16,21 @@ import {
export const REGIONS = ['ams', 'fra', 'gru', 'hkg', 'iad', 'syd'] as const
export const METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'] as const
-export const LOG_TYPES = [
- 'postgres',
- 'postgrest',
- 'auth',
- 'storage',
- 'edge function',
- 'realtime',
- 'supavisor',
- 'pgbouncer',
-] as const
-export const DEFAULT_LOG_TYPES = ['postgres', 'postgrest'] as const
+export const LOG_TYPES_LABELS = {
+ edge: 'API Gateway',
+ postgres: 'Postgres',
+ postgrest: 'PostgREST',
+ auth: 'Auth',
+ storage: 'Storage',
+ 'edge function': 'Edge Function',
+ realtime: 'Realtime',
+ supavisor: 'Supavisor',
+ pgbouncer: 'PgBouncer',
+}
+
+type LogType = keyof typeof LOG_TYPES_LABELS
+export const LOG_TYPES = Object.keys(LOG_TYPES_LABELS) as [LogType, ...LogType[]]
+export const DEFAULT_LOG_TYPES = ['postgres', 'edge'] as const
const parseAsSort = createParser({
parse(queryValue: string) {
@@ -68,7 +72,10 @@ export const SEARCH_PARAMS_PARSER = {
id: parseAsString,
// View options
- hide_connection_logs: parseAsBoolean.withDefault(true),
+ show_connection_logs: parseAsBoolean.withDefault(true),
+ edge_auth: parseAsBoolean.withDefault(true),
+ edge_storage: parseAsBoolean.withDefault(true),
+ edge_postgrest: parseAsBoolean.withDefault(true),
}
const POSTGRES_STATUS_CODE_LABELS = {
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
index ef131636e14..4ae39344de1 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.fields.tsx
@@ -1,6 +1,6 @@
import { cn } from 'ui'
-import { LOG_TYPES, METHODS, STATUS_CODE_LABELS } from './UnifiedLogs.constants'
+import { LOG_TYPES_LABELS, METHODS, STATUS_CODE_LABELS } from './UnifiedLogs.constants'
import { ColumnSchema } from './UnifiedLogs.schema'
import { getLevelLabel } from './UnifiedLogs.utils'
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
@@ -22,43 +22,32 @@ export const filterFields = [
value: 'log_type',
type: 'checkbox',
defaultOpen: true,
- options: LOG_TYPES.map((type) => ({ label: type, value: type })),
+ options: Object.entries(LOG_TYPES_LABELS).map(([value, label]) => ({
+ label,
+ value,
+ options:
+ // [Joshen] Nested options are treated as just boolean toggles atm for simplicity
+ // Refer to DataTableFilterCheckbox for their logic
+ value === 'edge'
+ ? [
+ { label: 'Auth', value: 'edge_auth' },
+ { label: 'Storage', value: 'edge_storage' },
+ { label: 'Postgrest', value: 'edge_postgrest' },
+ ]
+ : value === 'postgres'
+ ? [{ label: 'Connection logs', value: 'show_connection_logs' }]
+ : [],
+ })),
component: (props: Option) => {
return (
- <div className="flex w-full items-center justify-between gap-2">
- <span className="capitalize text-foreground/70 group-hover:text-accent-foreground text-xs">
- {props.label.replace('_', ' ')}
+ <div className="flex items-center w-full justify-between gap-2">
+ <span className="text-foreground/70 group-hover:text-accent-foreground text-xs">
+ {props.label}
</span>
</div>
)
},
},
- {
- label: 'Status',
- value: 'status',
- type: 'checkbox',
- defaultOpen: true,
- options: [],
- hasDynamicOptions: true,
- component: (props: Option) => {
- if (typeof props.value === 'boolean') return null
- if (typeof props.value === 'undefined') return null
-
- const statusValue = String(props.value)
- const statusLabel = STATUS_CODE_LABELS[statusValue as keyof typeof STATUS_CODE_LABELS]
-
- return (
- <div className="flex items-center gap-2 w-full min-w-0">
- <span className="shrink-0 text-foreground">{statusValue}</span>
- {statusLabel && (
- <span className="text-[0.7rem] text-foreground-lighter truncate" title={statusLabel}>
- {statusLabel}
- </span>
- )}
- </div>
- )
- },
- },
{
label: 'Level',
value: 'level',
@@ -81,11 +70,37 @@ export const filterFields = [
)
},
},
+ {
+ label: 'Status',
+ value: 'status',
+ type: 'checkbox',
+ defaultOpen: false,
+ options: [],
+ hasDynamicOptions: true,
+ component: (props: Option) => {
+ if (typeof props.value === 'boolean') return null
+ if (typeof props.value === 'undefined') return null
+
+ const statusValue = String(props.value)
+ const statusLabel = STATUS_CODE_LABELS[statusValue as keyof typeof STATUS_CODE_LABELS]
+
+ return (
+ <div className="flex items-center gap-2 w-full min-w-0">
+ <span className="shrink-0 text-foreground">{statusValue}</span>
+ {statusLabel && (
+ <span className="text-[0.7rem] text-foreground-lighter truncate" title={statusLabel}>
+ {statusLabel}
+ </span>
+ )}
+ </div>
+ )
+ },
+ },
{
label: 'Method',
value: 'method',
type: 'checkbox',
- defaultOpen: true,
+ defaultOpen: false,
options: METHODS.map((method) => ({ label: method, value: method })),
component: (props: Option) => {
return (
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
index ba73e93c0b4..69b419ec01e 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.test.ts
@@ -17,28 +17,28 @@ const withFilters = (...entries: string[]) => ({ ...baseSearch, filter: entries
describe('UnifiedLogs.queries (OTEL flat)', () => {
describe('getUnifiedLogsQuery', () => {
- it('defaults to postgres + postgrest log types when none specified', () => {
+ it('defaults to postgres + edge log types when none specified', () => {
const sql = getUnifiedLogsQuery(baseSearch)
- expect(sql).toContain(`source = 'postgres_logs'`)
- // postgrest = edge_logs filtered by /rest/ path
- expect(sql).toContain(
- `source = 'edge_logs' AND log_attributes['request.path'] LIKE '%/rest/%'`
- )
- })
-
- it('routes the `edge` log type to edge_logs without /rest/ or /storage/ paths', () => {
- const sql = getUnifiedLogsQuery(withFilters('log_type:eq:edge'))
- expect(sql).toContain(`NOT LIKE '%/rest/%'`)
- expect(sql).toContain(`NOT LIKE '%/storage/%'`)
const where = sql.split(/\bWHERE\b/)[1] ?? ''
- expect(where).not.toContain(`source = 'postgres_logs'`)
+ expect(where).toContain(`source = 'postgres_logs'`)
+ expect(where).toContain(`source = 'edge_logs'`)
+ expect(where).not.toContain(`source = 'postgrest_logs'`)
})
- it('routes the `storage` log type to edge_logs filtered by /storage/', () => {
+ it('routes the `postgrest` log type solely to postgrest_logs (mutually exclusive from edge_logs)', () => {
+ const sql = getUnifiedLogsQuery(withFilters('log_type:eq:postgrest'))
+ const where = sql.split(/\bWHERE\b/)[1] ?? ''
+ expect(where).toContain(`source = 'postgrest_logs'`)
+ expect(where).not.toContain(`source = 'edge_logs'`)
+ expect(where).not.toContain(`log_attributes['request.path'] LIKE '%/rest/%'`)
+ })
+
+ it('routes the `storage` log type solely to storage_logs (mutually exclusive from edge_logs)', () => {
const sql = getUnifiedLogsQuery(withFilters('log_type:eq:storage'))
- expect(sql).toContain(
- `source = 'edge_logs' AND log_attributes['request.path'] LIKE '%/storage/%'`
- )
+ const where = sql.split(/\bWHERE\b/)[1] ?? ''
+ expect(where).toContain(`source = 'storage_logs'`)
+ expect(where).not.toContain(`source = 'edge_logs'`)
+ expect(where).not.toContain(`log_attributes['request.path'] LIKE '%/storage/%'`)
})
it('escapes single quotes in filter values to prevent SQL injection', () => {
@@ -111,19 +111,58 @@ describe('UnifiedLogs.queries (OTEL flat)', () => {
expect(sql).not.toContain(`'%error%%'`)
})
- it('excludes connection log messages by default (hide_connection_logs=true)', () => {
- const sql = getUnifiedLogsQuery({ ...baseSearch, hide_connection_logs: true } as any)
+ it('excludes connection log messages when show_connection_logs=false', () => {
+ const sql = getUnifiedLogsQuery({ ...baseSearch, show_connection_logs: false } as any)
expect(sql).toContain("source != 'postgres_logs'")
expect(sql).toContain("event_message NOT LIKE 'connection received%'")
expect(sql).toContain("event_message NOT LIKE 'connection authenticated%'")
expect(sql).toContain("event_message NOT LIKE 'connection authorized%'")
})
- it('includes connection log messages when hide_connection_logs=false', () => {
- const sql = getUnifiedLogsQuery({ ...baseSearch, hide_connection_logs: false } as any)
+ it('includes connection log messages by default (show_connection_logs=true)', () => {
+ const sql = getUnifiedLogsQuery({ ...baseSearch, show_connection_logs: true } as any)
expect(sql).not.toContain("event_message NOT LIKE 'connection received%'")
})
+ it.each([
+ ['edge_auth', '%/auth/%'],
+ ['edge_storage', '%/storage/%'],
+ ['edge_postgrest', '%/rest/%'],
+ ] as const)('excludes %s-pathed requests from edge_logs when %s=false', (key, pathFilter) => {
+ const sql = getUnifiedLogsQuery({ ...baseSearch, [key]: false } as any)
+ expect(sql).toContain("source != 'edge_logs'")
+ expect(sql).toContain(`log_attributes['request.path'] NOT LIKE '${pathFilter}'`)
+ })
+
+ it('does not filter edge_logs by service path by default (all edge_* toggles true)', () => {
+ const sql = getUnifiedLogsQuery(baseSearch)
+ expect(sql).not.toContain("log_attributes['request.path'] NOT LIKE '%/auth/%'")
+ expect(sql).not.toContain("log_attributes['request.path'] NOT LIKE '%/storage/%'")
+ expect(sql).not.toContain("log_attributes['request.path'] NOT LIKE '%/rest/%'")
+ })
+
+ it('leaves dedicated auth_logs/storage_logs/postgrest_logs rows untouched by the edge_* toggles', () => {
+ // These toggles only hide traffic nested inside the `edge_logs` (API
+ // Gateway) source — the dedicated sources are separate log types now
+ // that log types are mutually exclusive, so they shouldn't be scoped by
+ // a `source != 'edge_logs' OR ...` guard meant for gateway rows.
+ const sql = getUnifiedLogsQuery({
+ ...baseSearch,
+ edge_auth: false,
+ edge_storage: false,
+ edge_postgrest: false,
+ } as any)
+ expect(sql).toContain(
+ "(source != 'edge_logs' OR log_attributes['request.path'] NOT LIKE '%/auth/%')"
+ )
+ expect(sql).toContain(
+ "(source != 'edge_logs' OR log_attributes['request.path'] NOT LIKE '%/storage/%')"
+ )
+ expect(sql).toContain(
+ "(source != 'edge_logs' OR log_attributes['request.path'] NOT LIKE '%/rest/%')"
+ )
+ })
+
it('does not emit subqueries or CTEs (rejected by the OTEL endpoint)', () => {
const sql = getUnifiedLogsQuery(baseSearch)
expect(sql).not.toMatch(/WITH\s+\w+\s+AS\s*\(/i)
@@ -144,7 +183,7 @@ describe('UnifiedLogs.queries (OTEL flat)', () => {
expect(sql).toContain('arrayJoin([')
expect(sql).toContain('multiIf(')
expect(sql).toContain(`facet = 'total', 'all'`)
- for (const lt of ['edge', 'postgrest', 'storage', 'postgres', 'edge function', 'auth']) {
+ for (const lt of ['postgrest', 'storage', 'postgres', 'edge function', 'auth']) {
expect(sql).toContain(`'${lt}'`)
}
for (const lvl of ['success', 'warning', 'error']) {
@@ -157,17 +196,36 @@ describe('UnifiedLogs.queries (OTEL flat)', () => {
})
it('honours an active log_type filter in the total count scan', () => {
- const sql = getLogsCountQuery(withFilters('log_type:eq:edge'))
+ const sql = getLogsCountQuery(withFilters('log_type:eq:storage'))
// Assert on the WHERE only: value expressions mention other sources inline.
const totalWhere = whereOfBranchContaining(sql, `'all'`)
- expect(totalWhere).toContain(`source = 'edge_logs'`)
+ expect(totalWhere).toContain(`source = 'storage_logs'`)
+ expect(totalWhere).not.toContain(`source = 'edge_logs'`)
expect(totalWhere).not.toContain(`source = 'postgres_logs'`)
})
it('gives the log_type facet its own scan that excludes the log_type filter', () => {
- const sql = getLogsCountQuery(withFilters('log_type:eq:edge'))
+ const sql = getLogsCountQuery(withFilters('log_type:eq:postgrest'))
const logTypeWhere = whereOfBranchContaining(sql, `'log_type'`)
- expect(logTypeWhere).not.toContain(`NOT LIKE '%/rest/%'`)
+ expect(logTypeWhere).not.toContain(`LIKE '%/rest/%'`)
+ })
+
+ it('applies the connection-logs filter to every count scan so badges match the list', () => {
+ const sql = getLogsCountQuery({ ...baseSearch, show_connection_logs: false } as any)
+ const scans = sql.split(/\bUNION ALL\b/)
+ expect(scans.length).toBeGreaterThan(1)
+ for (const scan of scans) {
+ expect(scan).toContain("event_message NOT LIKE 'connection received%'")
+ }
+ })
+
+ it('applies the edge_* service filters to every count scan so badges match the list', () => {
+ const sql = getLogsCountQuery({ ...baseSearch, edge_postgrest: false } as any)
+ const scans = sql.split(/\bUNION ALL\b/)
+ expect(scans.length).toBeGreaterThan(1)
+ for (const scan of scans) {
+ expect(scan).toContain("log_attributes['request.path'] NOT LIKE '%/rest/%'")
+ }
})
})
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
index 30121d41b21..2968e77238b 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.queries.ts
@@ -55,9 +55,9 @@ const HTTP_STATUS_EXPR: SafeLogSqlFragment = safeSql`if(source = 'auth_logs', lo
* logs; the UI surfaces gateway HTTP traffic for those buckets.
*/
const LOG_TYPE_CONDITION: Record<string, SafeLogSqlFragment> = {
- edge: safeSql`source = 'edge_logs' AND ${ATTR.path} NOT LIKE '%/rest/%' AND ${ATTR.path} NOT LIKE '%/storage/%'`,
- postgrest: safeSql`source = 'edge_logs' AND ${ATTR.path} LIKE '%/rest/%'`,
- storage: safeSql`source = 'edge_logs' AND ${ATTR.path} LIKE '%/storage/%'`,
+ edge: safeSql`source = 'edge_logs'`,
+ postgrest: safeSql`source = 'postgrest_logs'`,
+ storage: safeSql`source = 'storage_logs'`,
postgres: safeSql`source = 'postgres_logs'`,
'edge function': safeSql`source = 'function_edge_logs'`,
auth: safeSql`source = 'auth_logs'`,
@@ -67,9 +67,11 @@ const LOG_TYPE_CONDITION: Record<string, SafeLogSqlFragment> = {
}
// Derived `log_type` column for SELECT / GROUP BY / countIf use.
+// WHEN source = 'edge_logs' AND ${ATTR.path} LIKE '%/rest/%' THEN 'postgrest'
+// WHEN source = 'edge_logs' AND ${ATTR.path} LIKE '%/storage/%' THEN 'storage'
const LOG_TYPE_EXPR: SafeLogSqlFragment = safeSql`CASE
- WHEN source = 'edge_logs' AND ${ATTR.path} LIKE '%/rest/%' THEN 'postgrest'
- WHEN source = 'edge_logs' AND ${ATTR.path} LIKE '%/storage/%' THEN 'storage'
+ WHEN source = 'postgrest_logs' THEN 'postgrest'
+ WHEN source = 'storage_logs' THEN 'storage'
WHEN source = 'edge_logs' THEN 'edge'
WHEN source = 'postgres_logs' THEN 'postgres'
WHEN source = 'function_edge_logs' THEN 'edge function'
@@ -292,22 +294,54 @@ const buildBaseWhere = (
}
}
+ const searchParamsFilter = applySearchParamsFilter(search)
+ if (searchParamsFilter) parts.push(searchParamsFilter)
+
return parts
}
+// Path substrings that identify which downstream service an `edge_logs`
+// (API Gateway) row was routed to. Mirrors the convention already used by
+// the sibling Logs Explorer (Logs.constants.ts / Logs.utils.otel.ts) and by
+// ServiceFlow.sql.ts within this same feature.
+const EDGE_SERVICE_PATH_FILTER: Record<'edge_auth' | 'edge_storage' | 'edge_postgrest', string> = {
+ edge_auth: '%/auth/%',
+ edge_storage: '%/storage/%',
+ edge_postgrest: '%/rest/%',
+}
+
/**
- * Returns a WHERE condition that excludes Postgres connection lifecycle messages.
- * Applied only to the row query and chart query so sidebar facets remain unaffected
- * (the OTEL endpoint's UNION ALL count query fails silently when this condition is
- * included there, returning empty facet data).
+ * Returns view-option WHERE conditions — toggles from the filter sidebar that
+ * hide a subset of rows without being a `filter` URL param (Postgres
+ * connection lifecycle messages, and per-service traffic nested inside the
+ * API Gateway `edge_logs` source). Shared by every query via `buildBaseWhere`,
+ * so the row list, chart and sidebar facet counts stay in sync (otherwise the
+ * badges over-count by the rows the list hides).
*/
-const connectionLogsFilter = (search: QuerySearchParamsType): SafeLogSqlFragment | null => {
- if (!search.hide_connection_logs) return null
- return safeSql`(source != 'postgres_logs' OR (
- event_message NOT LIKE 'connection received%' AND
- event_message NOT LIKE 'connection authenticated%' AND
- event_message NOT LIKE 'connection authorized%'
- ))`
+const applySearchParamsFilter = (search: QuerySearchParamsType): SafeLogSqlFragment | null => {
+ const conditions: SafeLogSqlFragment[] = []
+
+ // Visible by default — only an explicit `false` hides connection logs.
+ if (search.show_connection_logs === false) {
+ conditions.push(safeSql`(source != 'postgres_logs' OR (
+ event_message NOT LIKE 'connection received%' AND
+ event_message NOT LIKE 'connection authenticated%' AND
+ event_message NOT LIKE 'connection authorized%'
+ ))`)
+ }
+
+ // Visible by default — only an explicit `false` hides that service's
+ // requests within the API Gateway log type.
+ for (const key of ['edge_auth', 'edge_storage', 'edge_postgrest'] as const) {
+ if (search[key] === false) {
+ conditions.push(
+ safeSql`(source != 'edge_logs' OR ${ATTR.path} NOT LIKE ${lit(EDGE_SERVICE_PATH_FILTER[key])})`
+ )
+ }
+ }
+
+ if (conditions.length === 0) return null
+ return safeSql`(${joinSqlFragments(conditions, ' AND ')})`
}
/**
@@ -315,8 +349,6 @@ const connectionLogsFilter = (search: QuerySearchParamsType): SafeLogSqlFragment
*/
export const getUnifiedLogsQuery = (search: QuerySearchParamsType): SafeLogSqlFragment => {
const conditions = buildBaseWhere(search)
- const connFilter = connectionLogsFilter(search)
- if (connFilter) conditions.push(connFilter)
return safeSql`
SELECT ${rowProjection()}
FROM logs
@@ -442,8 +474,6 @@ export const getLogsChartQuery = (search: QuerySearchParamsType): SafeLogSqlFrag
const truncationLevel = calculateChartBucketing(search)
const truncFn = truncationFunction(truncationLevel)
const conditions = buildBaseWhere(search)
- const connFilter = connectionLogsFilter(search)
- if (connFilter) conditions.push(connFilter)
return safeSql`
SELECT
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
index 6d261b9ddce..ebbb41527bb 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx
@@ -29,7 +29,6 @@ import {
import { RefreshButton } from '../../ui/DataTable/RefreshButton'
import { generateDynamicColumns, UNIFIED_LOGS_COLUMNS } from './components/Columns'
-import { ConnectionLogsToggle } from './components/ConnectionLogsToggle'
import { DownloadLogsButton } from './components/DownloadLogsButton'
import { LogsFilterBar } from './components/LogsFilterBar'
import { LogsListPanel } from './components/LogsListPanel'
@@ -70,7 +69,7 @@ import { useShortcut } from '@/state/shortcuts/useShortcut'
export const CHART_CONFIG = {
success: {
label: <TooltipLabel level="success" />,
- color: 'hsl(var(--foreground-muted))',
+ color: 'var(--foreground-muted)',
},
warning: {
label: <TooltipLabel level="warning" />,
@@ -377,7 +376,6 @@ export const UnifiedLogs = () => {
isFilterBarOpen={isFilterBarOpen}
setIsFilterBarOpen={setIsFilterBarOpen}
dateRangeDisabled={{ after: new Date() }}
- afterFilters={<ConnectionLogsToggle />}
/>
<ResizableHandle withHandle />
<ResizablePanel
@@ -461,7 +459,7 @@ export const UnifiedLogs = () => {
className={cn(
'h-full [&>div]:h-full',
'[&_thead_th]:[border-top:none]! [&_thead_th]:[border-bottom:none]!',
- '[&_thead_th]:[box-shadow:inset_0_-1px_0_hsl(var(--border-default))]!',
+ '[&_thead_th]:[box-shadow:inset_0_-1px_0_var(--border-default)]!',
'[&_thead_th]:text-foreground-lighter! [&_thead_tr:hover]:bg-surface-75',
'[&_thead_tr]:border-b-0! [&_tbody_tr]:border-b-0!'
)}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
new file mode 100644
index 00000000000..431ce1bb0b7
--- /dev/null
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.test.ts
@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildUnifiedLogsUrl } from './UnifiedLogs.utils'
+
+describe('buildUnifiedLogsUrl', () => {
+ const parse = (url: string) => {
+ const [path, query] = url.split('?')
+ return { path, params: new URLSearchParams(query) }
+ }
+
+ it('targets the project logs route with a log_type filter', () => {
+ const { path, params } = parse(buildUnifiedLogsUrl({ projectRef: 'abc', logType: 'postgres' }))
+ expect(path).toBe('/project/abc/logs')
+ expect(params.get('filter')).toBe('log_type:eq:postgres')
+ expect(params.has('date')).toBe(false)
+ })
+
+ it('preserves multi-word log types once decoded', () => {
+ const { params } = parse(buildUnifiedLogsUrl({ projectRef: 'abc', logType: 'edge function' }))
+ expect(params.get('filter')).toBe('log_type:eq:edge function')
+ })
+
+ it('adds the date range as an epoch-ms pair when start and end are provided', () => {
+ const start = new Date('2026-05-08T00:00:00.000Z')
+ const end = new Date('2026-05-08T01:00:00.000Z')
+ const { params } = parse(
+ buildUnifiedLogsUrl({ projectRef: 'abc', logType: 'auth', start, end })
+ )
+ expect(params.get('date')).toBe(`${start.valueOf()}-${end.valueOf()}`)
+ })
+
+ it('accepts ISO strings for the date range', () => {
+ const start = '2026-05-08T00:00:00.000Z'
+ const end = '2026-05-08T01:00:00.000Z'
+ const { params } = parse(
+ buildUnifiedLogsUrl({ projectRef: 'abc', logType: 'auth', start, end })
+ )
+ expect(params.get('date')).toBe(`${new Date(start).valueOf()}-${new Date(end).valueOf()}`)
+ })
+
+ it('omits the date range when only one bound is provided', () => {
+ const { params } = parse(
+ buildUnifiedLogsUrl({ projectRef: 'abc', logType: 'storage', start: new Date() })
+ )
+ expect(params.has('date')).toBe(false)
+ })
+})
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
index bc2c09fea07..21421486332 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.utils.ts
@@ -1,9 +1,31 @@
import { type Table as TTable } from '@tanstack/react-table'
import { cn } from 'ui'
+import { LOG_TYPES_LABELS } from './UnifiedLogs.constants'
import { FacetMetadataSchema } from './UnifiedLogs.schema'
import { LEVELS } from '@/components/ui/DataTable/DataTable.constants'
+export type UnifiedLogType = keyof typeof LOG_TYPES_LABELS
+
+export const buildUnifiedLogsUrl = ({
+ projectRef,
+ logType,
+ start,
+ end,
+}: {
+ projectRef: string
+ logType: UnifiedLogType
+ start?: string | Date
+ end?: string | Date
+}) => {
+ const params = new URLSearchParams()
+ params.append('filter', `log_type:eq:${logType}`)
+ if (start && end) {
+ params.set('date', `${new Date(start).valueOf()}-${new Date(end).valueOf()}`)
+ }
+ return `/project/${projectRef}/logs?${params.toString()}`
+}
+
export const getFacetedUniqueValues = <TData>(facets?: Record<string, FacetMetadataSchema>) => {
return (_table: TTable<TData>, columnId: string) => {
return new Map(facets?.[columnId]?.rows?.map(({ value, total }) => [value, total]) || [])
diff --git a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
index dede3b3cb4f..f42e66ef45f 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/UnifiedLogsBanner.tsx
@@ -1,30 +1,42 @@
+import { useParams } from 'common'
import { CircleHelpIcon, Undo2 } from 'lucide-react'
+import { useRouter } from 'next/router'
import { Badge, Button, cn } from 'ui'
+import {
+ useFeaturePreviewModal,
+ useUnifiedLogsPreview,
+} from '../App/FeaturePreview/FeaturePreviewContext'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
interface UnifiedLogsBannerProps {
- variant: 'promo' | 'utility'
- onEnable?: () => void
- onMoreInfo?: () => void
- onSwitchBack?: () => void
className?: string
}
-export function UnifiedLogsBanner({
- variant,
- onEnable,
- onMoreInfo,
- onSwitchBack,
- className,
-}: UnifiedLogsBannerProps) {
+export function UnifiedLogsBanner({ className = 'mx-4 mt-4' }: UnifiedLogsBannerProps) {
+ const router = useRouter()
+ const { ref } = useParams()
+
+ const { selectFeaturePreview } = useFeaturePreviewModal()
+ const { enable, disable, isDefaultOptIn, isEnabled } = useUnifiedLogsPreview()
+
const cardClassName = cn(
'rounded-lg border p-4 space-y-3 text-left',
'bg-muted/10 border-border/50',
className
)
- if (variant === 'utility') {
+ const onSwitchBack = () => {
+ disable()
+ router.push(`/project/${ref}/logs/explorer`)
+ }
+
+ const onEnable = () => {
+ enable()
+ router.push(`/project/${ref}/logs`)
+ }
+
+ if (isEnabled && !isDefaultOptIn) {
return (
<div className={cn('rounded-lg border px-4 py-3', 'bg-muted/10 border-border/50', className)}>
<div className="flex items-center justify-between gap-3">
@@ -50,16 +62,28 @@ export function UnifiedLogsBanner({
</div>
<h3 className="font-medium text-sm text-foreground">Introducing unified logs</h3>
<div className="flex justify-start items-start gap-x-2">
- <Button variant="default" onClick={onEnable}>
- Enable preview
- </Button>
- <ButtonTooltip
- variant="default"
- className="px-1.5"
- icon={<CircleHelpIcon />}
- onClick={onMoreInfo}
- tooltip={{ content: { side: 'bottom', text: 'More information' } }}
- />
+ {isDefaultOptIn ? (
+ <Button
+ variant="default"
+ icon={<CircleHelpIcon />}
+ onClick={() => selectFeaturePreview('supabase-ui-preview-unified-logs')}
+ >
+ More information
+ </Button>
+ ) : (
+ <>
+ <Button variant="default" onClick={onEnable}>
+ Enable preview
+ </Button>
+ <ButtonTooltip
+ variant="default"
+ className="px-1.5"
+ icon={<CircleHelpIcon />}
+ onClick={() => selectFeaturePreview('supabase-ui-preview-unified-logs')}
+ tooltip={{ content: { side: 'bottom', text: 'More information' } }}
+ />
+ </>
+ )}
</div>
</div>
)
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/AuthUserHoverCard.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/AuthUserHoverCard.tsx
deleted file mode 100644
index 4f902b66f1b..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/components/AuthUserHoverCard.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { User } from 'lucide-react'
-import {
- HoverCard,
- HoverCardContent,
- HoverCardTrigger,
-} from 'ui/src/components/shadcn/ui/hover-card'
-
-interface AuthUserHoverCardProps {
- authUser: string
-}
-
-export const AuthUserHoverCard = ({ authUser }: AuthUserHoverCardProps) => {
- if (!authUser) return null
-
- return (
- <HoverCard closeDelay={0}>
- <HoverCardTrigger className="flex items-center justify-center bg-surface-100 border rounded-full">
- <User size={14} className="text-foreground-lighter" />
- </HoverCardTrigger>
- <HoverCardContent className="w-80 p-4">
- <div className="space-y-2">
- <div className="flex items-center gap-2">
- <User size={20} className="text-foreground" />
- <h4 className="font-medium">User Details</h4>
- </div>
- <div className="space-y-1">
- <div className="text-sm">
- <span className="font-medium">ID/Email:</span> {authUser}
- </div>
- {/* Additional user details can be added here if available */}
- </div>
- </div>
- </HoverCardContent>
- </HoverCard>
- )
-}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
index 24226623f0f..20af0e5e7e3 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/Columns.tsx
@@ -56,7 +56,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
enableHiding: false,
enableResizing: false,
enableSorting: false,
- filterFn: (_row, _columnId, _filterValue) => true,
+ filterFn: () => true,
size: 48,
minSize: 48,
maxSize: 48,
@@ -76,7 +76,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
enableHiding: false,
enableResizing: false,
enableSorting: false,
- filterFn: (_row, _columnId, _filterValue) => true,
+ filterFn: () => true,
size: 48,
minSize: 48,
maxSize: 48,
@@ -93,7 +93,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
const date = new Date(row.getValue<ColumnSchema['date']>('date'))
return <HoverCardTimestamp date={date} />
},
- filterFn: (_row, _columnId, _filterValue) => true,
+ filterFn: () => true,
enableResizing: false,
enableSorting: false,
size: 140,
@@ -118,7 +118,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
)
},
enableHiding: false,
- filterFn: (_row, _columnId, _filterValue) => true,
+ filterFn: () => true,
enableResizing: false,
enableSorting: false,
size: 40,
@@ -169,7 +169,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
</div>
)
},
- filterFn: (_row, _columnId, _filterValue) => true,
+ filterFn: () => true,
enableResizing: false,
enableSorting: false,
size: 70,
@@ -206,6 +206,7 @@ export function generateDynamicColumns({ data }: { data: ColumnSchema[] }): {
{
accessorKey: 'pathname',
header: 'Pathname',
+ filterFn: () => true,
enableSorting: false,
enableResizing: false,
size: 250,
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/ConnectionLogsToggle.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/ConnectionLogsToggle.tsx
deleted file mode 100644
index f44ad84d033..00000000000
--- a/apps/studio/components/interfaces/UnifiedLogs/components/ConnectionLogsToggle.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { useQueryStates } from 'nuqs'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Checkbox, Label } from 'ui'
-
-import { SEARCH_PARAMS_PARSER } from '../UnifiedLogs.constants'
-
-export const ConnectionLogsToggle = () => {
- const [{ hide_connection_logs }, setSearch] = useQueryStates(SEARCH_PARAMS_PARSER)
-
- return (
- <Accordion type="multiple" defaultValue={['misc']}>
- <AccordionItem value="misc" className="border-none">
- <div className="flex items-center gap-2 pr-2">
- <AccordionTrigger className="flex-1 px-2 py-0 hover:no-underline data-[state=closed]:text-muted-foreground data-open:text-foreground focus-within:data-closed:text-foreground hover:data-closed:text-foreground">
- <div className="flex items-center gap-2 truncate py-2">
- <p className="text-sm">Misc</p>
- </div>
- </AccordionTrigger>
- </div>
- <AccordionContent>
- <div className="p-1">
- <div className="rounded-sm border border-border">
- <div className="group relative flex items-center space-x-2 px-2 py-2 hover:bg-accent/50">
- <Checkbox
- id="connection-logs"
- checked={!hide_connection_logs}
- onCheckedChange={(checked) => setSearch({ hide_connection_logs: !checked })}
- />
- <Label
- htmlFor="connection-logs"
- className="flex w-full cursor-pointer items-center justify-between gap-2 text-[0.8rem] font-normal text-foreground/70 group-hover:text-accent-foreground"
- >
- Connection logs
- </Label>
- </div>
- </div>
- </div>
- </AccordionContent>
- </AccordionItem>
- </Accordion>
- )
-}
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/HoverCardTimestamp.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/HoverCardTimestamp.tsx
index 57f7c28af71..75c46ca5024 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/HoverCardTimestamp.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/HoverCardTimestamp.tsx
@@ -1,5 +1,5 @@
import { cn } from 'ui'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
interface HoverCardTimestampProps {
date: Date
diff --git a/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx b/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
index 2b8d4a8f6af..4596974f61f 100644
--- a/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
+++ b/apps/studio/components/interfaces/UnifiedLogs/components/LogsFilterBar.tsx
@@ -6,7 +6,7 @@ import {
type FilterBarHandle,
type FilterGroup,
type FilterProperty,
-} from 'ui-patterns'
+} from 'ui-patterns/FilterBar'
import {
isLogsFilterColumnValue,
diff --git a/apps/studio/components/interfaces/UserDropdown.tsx b/apps/studio/components/interfaces/UserDropdown.tsx
index 8a87fa472ca..ae004c1a9c1 100644
--- a/apps/studio/components/interfaces/UserDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown.tsx
@@ -1,4 +1,3 @@
-import { useFlag } from 'common'
import { FlaskConical, Loader2, ScrollText, User2 } from 'lucide-react'
import { useTheme } from 'next-themes'
import Link from 'next/link'
@@ -16,7 +15,6 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
singleThemes,
- Theme,
} from 'ui'
import { ButtonTooltip } from '../ui/ButtonTooltip'
@@ -42,7 +40,6 @@ export function UserDropdown({
const { theme, setTheme } = useTheme()
const appStateSnapshot = useAppStateSnapshot()
const profileShowEmailEnabled = useIsFeatureEnabled('profile:show_email')
- const timezonePickerEnabled = useFlag('timezonePicker')
const { username, avatarUrl, primaryEmail, isLoading } = useProfileNameAndPicture()
const { toggleFeaturePreviewModal } = useFeaturePreviewModal()
@@ -105,7 +102,9 @@ export function UserDropdown({
</span>
)}
</div>
+
<DropdownMenuSeparator />
+
<DropdownMenuGroup>
<DropdownMenuItem className="flex gap-2 cursor-pointer" asChild>
<Link
@@ -141,6 +140,7 @@ export function UserDropdown({
</DropdownMenuGroup>
</>
)}
+
<DropdownMenuGroup>
<DropdownMenuLabel>Theme</DropdownMenuLabel>
<DropdownMenuRadioGroup
@@ -149,7 +149,7 @@ export function UserDropdown({
setTheme(value)
}}
>
- {singleThemes.map((theme: Theme) => (
+ {singleThemes.map((theme) => (
<DropdownMenuRadioItem
key={theme.value}
value={theme.value}
@@ -160,14 +160,13 @@ export function UserDropdown({
))}
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
- {timezonePickerEnabled && (
- <>
- <DropdownMenuSeparator />
- <DropdownMenuGroup>
- <TimezoneDropdown />
- </DropdownMenuGroup>
- </>
- )}
+
+ <DropdownMenuSeparator />
+
+ <DropdownMenuGroup>
+ <TimezoneDropdown />
+ </DropdownMenuGroup>
+
{showUpgradeCta && (
<>
<DropdownMenuSeparator />
diff --git a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
index 8844d7d7a06..f48990d77ec 100644
--- a/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
+++ b/apps/studio/components/interfaces/UserDropdown/TimezoneDropdown.tsx
@@ -23,8 +23,9 @@ import { useTrack } from '@/lib/telemetry/track'
const AUTO_OPTION_VALUE = '__auto__'
export const TimezoneDropdown = () => {
- const { timezone, storedTimezone, setTimezone, isAutoDetected } = useTimezone()
const track = useTrack()
+ const { timezone, storedTimezone, setTimezone, isAutoDetected } = useTimezone()
+
const [open, setOpen] = useState(false)
// The "Auto detect" row always advertises the browser's own timezone, even
diff --git a/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx b/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
index a1132003e60..24786257a5b 100644
--- a/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
+++ b/apps/studio/components/layouts/AdvisorsLayout/AdvisorRulesLayout.tsx
@@ -1,7 +1,7 @@
import { LOCAL_STORAGE_KEYS, useParams } from 'common'
import { PropsWithChildren } from 'react'
-import DefaultLayout from '../DefaultLayout'
+import { DefaultLayout } from '../DefaultLayout'
import { PageLayout } from '../PageLayout/PageLayout'
import AdvisorsLayout from './AdvisorsLayout'
import { useIsAdvisorRulesEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
diff --git a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
index 760a051d3a0..bbd73078f5c 100644
--- a/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/BranchDropdown.tsx
@@ -1,6 +1,6 @@
import { useParams } from 'common'
import { useState } from 'react'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { AppLayoutDropdownError, AppLayoutDropdownWithPopover } from './AppLayoutDropdown'
import { BranchBadge } from './BranchBadge'
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
deleted file mode 100644
index 430a08c131d..00000000000
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPlanNotice.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { AlertCircleIcon } from 'lucide-react'
-import Link from 'next/link'
-import { Alert, AlertDescription, AlertTitle, Button } from 'ui'
-
-import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
-import { useAppStateSnapshot } from '@/state/app-state'
-
-export const BranchingPlanNotice = () => {
- const snap = useAppStateSnapshot()
- const { data: selectedOrg } = useSelectedOrganizationQuery()
-
- return (
- <Alert className="rounded-none px-7 py-6 [&>svg]:top-6 [&>svg]:left-6 border-0 border-t">
- <AlertCircleIcon />
- <AlertTitle>Database branching is only available on the Pro Plan and above</AlertTitle>
- <AlertDescription>
- Go to your organization's billing settings and upgrade your plan to enable branching for
- this project
- </AlertDescription>
- <AlertDescription>
- <Button size="tiny" variant="default" className="mt-4">
- <Link
- href={`/org/${selectedOrg?.slug}/billing?panel=subscriptionPlan&source=enableBranchingButton`}
- onClick={() => snap.setShowCreateBranchModal(false)}
- >
- Upgrade to Pro
- </Link>
- </Button>
- </AlertDescription>
- </Alert>
- )
-}
diff --git a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx b/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
deleted file mode 100644
index 79b96ac88a1..00000000000
--- a/apps/studio/components/layouts/AppLayout/EnableBranchingButton/BranchingPostgresVersionNotice.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useParams } from 'common'
-import { AlertCircleIcon } from 'lucide-react'
-import Link from 'next/link'
-import { Alert, AlertDescription, AlertTitle, Button } from 'ui'
-
-import { useAppStateSnapshot } from '@/state/app-state'
-
-export const BranchingPostgresVersionNotice = () => {
- const { ref } = useParams()
- const snap = useAppStateSnapshot()
-
- return (
- <Alert className="rounded-none px-7 py-6 [&>svg]:top-6 [&>svg]:left-6 border-t-0! border-l-0! border-r-0!">
- <AlertCircleIcon />
- <AlertTitle className="text-base">
- Your project needs to be on Postgres 15 to enable branching
- </AlertTitle>
- <AlertDescription>
- Head over to your project's infrastructure settings to upgrade to the latest version of
- Postgres before enabling branching.
- </AlertDescription>
- <AlertDescription>
- <Button size="tiny" variant="default" className="mt-4">
- <Link
- href={`/project/${ref}/settings/infrastructure`}
- onClick={() => snap.setShowCreateBranchModal(false)}
- >
- Head to project settings
- </Link>
- </Button>
- </AlertDescription>
- </Alert>
- )
-}
diff --git a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
index 6680af603d1..e16b39c433f 100644
--- a/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
+++ b/apps/studio/components/layouts/AppLayout/NoticeBanner.tsx
@@ -1,7 +1,7 @@
import { LOCAL_STORAGE_KEYS, useParams } from 'common'
import dayjs from 'dayjs'
import { useRouter } from 'next/router'
-import { TimestampInfo } from 'ui-patterns'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { HeaderBanner } from '@/components/interfaces/Organization/HeaderBanner'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
diff --git a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
index 3cbf12abc33..a995829b43c 100644
--- a/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/OrganizationDropdown.tsx
@@ -3,7 +3,7 @@ import { Boxes } from 'lucide-react'
import { useRouter } from 'next/router'
import { useState } from 'react'
import { Badge, cn } from 'ui'
-import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns'
+import { GenericSkeletonLoader, ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { AppLayoutDropdownError, AppLayoutDropdownWithPopover } from './AppLayoutDropdown'
import { OrganizationDropdownCommandContent } from './OrganizationDropdownCommandContent'
diff --git a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
index ce8f6ff14ca..77b0dab49eb 100644
--- a/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
+++ b/apps/studio/components/layouts/AppLayout/ProjectDropdown.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
import type { ComponentProps } from 'react'
import { useState } from 'react'
import { Button, CommandGroup, CommandItem } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { AppLayoutDropdownTriggerButton } from './AppLayoutDropdown'
import { sanitizeRoute } from './ProjectDropdown.utils'
diff --git a/apps/studio/components/layouts/AuthLayout/Auth.Commands.tsx b/apps/studio/components/layouts/AuthLayout/Auth.Commands.tsx
index 1d22aaf6203..3538c5e0ce0 100644
--- a/apps/studio/components/layouts/AuthLayout/Auth.Commands.tsx
+++ b/apps/studio/components/layouts/AuthLayout/Auth.Commands.tsx
@@ -38,13 +38,6 @@ export function useAuthGotoCommands(options?: CommandOptions) {
route: `/project/${ref}/auth/users`,
defaultHidden: true,
},
- {
- id: 'nav-auth-policies',
- name: 'Policies',
- value: 'Auth: Policies (RLS)',
- route: `/project/${ref}/auth/policies`,
- defaultHidden: true,
- },
...(authenticationSignInProviders
? [
{
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
index 557684c5246..dd425cce66c 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.test.ts
@@ -141,9 +141,11 @@ describe('generateAuthMenu', () => {
const menu = generateAuthMenu({ ...allFeaturesEnabled, ref: 'my-project' })
const users = findItem(menu, 'Users')
const oauthApps = findItem(menu, 'OAuth Apps')
+ const policies = findItem(menu, 'Policies')
expect(users?.url).toBe('/project/my-project/auth/users')
expect(oauthApps?.url).toBe('/project/my-project/auth/oauth-apps')
+ expect(policies?.url).toBe('/project/my-project/database/policies')
})
it('hides Passkeys when passkeys feature is false', () => {
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
index c27fa348dd8..632611d1292 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.utils.ts
@@ -1,10 +1,14 @@
import { useFlag, useParams } from 'common'
+import { ArrowUpRight } from 'lucide-react'
+import { createElement } from 'react'
import type { ProductMenuGroup } from '@/components/ui/ProductMenu/ProductMenu.types'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { IS_PLATFORM } from '@/lib/constants'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
+const ExternalLinkIcon = createElement(ArrowUpRight, { strokeWidth: 1, className: 'h-4 w-4' })
+
export interface GenerateAuthMenuOptions {
ref?: string
isPlatform: boolean
@@ -87,9 +91,10 @@ export function generateAuthMenu(options: GenerateAuthMenuOptions): ProductMenuG
{
name: 'Policies',
key: 'policies',
- url: `${baseUrl}/policies`,
+ url: `/project/${ref}/database/policies`,
+ rightIcon: ExternalLinkIcon,
items: [],
- shortcutId: SHORTCUT_IDS.NAV_AUTH_POLICIES,
+ // shortcutId: SHORTCUT_IDS.NAV_AUTH_POLICIES,
},
...(isPlatform
? [
diff --git a/apps/studio/components/layouts/DatabaseLayout/Database.Commands.tsx b/apps/studio/components/layouts/DatabaseLayout/Database.Commands.tsx
index 47e1184dcaf..8c3787ae22f 100644
--- a/apps/studio/components/layouts/DatabaseLayout/Database.Commands.tsx
+++ b/apps/studio/components/layouts/DatabaseLayout/Database.Commands.tsx
@@ -60,6 +60,13 @@ export function useDatabaseGotoCommands(options?: CommandOptions) {
route: `/project/${ref}/database/functions`,
defaultHidden: true,
},
+ {
+ id: 'nav-database-policies',
+ name: 'Policies',
+ value: 'Database: Policies (RLS)',
+ route: `/project/${ref}/database/policies`,
+ defaultHidden: true,
+ },
{
id: 'nav-database-extensions',
name: 'Extensions',
@@ -157,6 +164,12 @@ export function useDatabaseGotoCommands(options?: CommandOptions) {
route: `/project/${ref}/database/indexes`,
icon: () => <Database />,
},
+ {
+ id: 'run-view-database-policies',
+ name: 'View and create RLS policies',
+ route: `/project/${ref}/database/policies`,
+ icon: () => <Database />,
+ },
...(databaseRoles
? [
{
diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
index d110a2ceee5..3a24136e309 100644
--- a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
+++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
@@ -1,53 +1,35 @@
import { useParams } from 'common'
-import { ArrowUpRight } from 'lucide-react'
-import {
- useIsColumnLevelPrivilegesEnabled,
- useIsMarketplaceEnabled,
-} from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
+import { useIsColumnLevelPrivilegesEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useIsETLPrivateAlpha } from '@/components/interfaces/Database/Replication/useIsETLPrivateAlpha'
import type {
ProductMenuGroup,
ProductMenuGroupItem,
} from '@/components/ui/ProductMenu/ProductMenu.types'
-import { useDatabaseExtensionsQuery } from '@/data/database-extensions/database-extensions-query'
import { useProjectAddonsQuery } from '@/data/subscriptions/project-addons-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM } from '@/lib/constants'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
-const ExternalLinkIcon = <ArrowUpRight strokeWidth={1} className="h-4 w-4" />
-
export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => {
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
- const {
- databaseReplication: showPgReplicate,
- databaseRoles: showRoles,
- integrationsWrappers: showWrappers,
- } = useIsFeatureEnabled(['database:replication', 'database:roles', 'integrations:wrappers'])
+ const { databaseReplication: showPgReplicate, databaseRoles: showRoles } = useIsFeatureEnabled([
+ 'database:replication',
+ 'database:roles',
+ 'integrations:wrappers',
+ ])
- const { data } = useDatabaseExtensionsQuery({
- projectRef: project?.ref,
- connectionString: project?.connectionString,
- })
const { data: addons } = useProjectAddonsQuery({ projectRef: project?.ref })
- const pgNetExtensionExists = (data ?? []).some((ext) => ext.name === 'pg_net')
const pitrEnabled = addons?.selected_addons.some((addon) => addon.type === 'pitr') ?? false
const columnLevelPrivileges = useIsColumnLevelPrivilegesEnabled()
const enablePgReplicate = useIsETLPrivateAlpha()
const getDatabaseURL = (path: string) => `/project/${ref}/database/${path}`
- // In the new marketplace revamped page the `category=wrapper` query param has
- // changed to `type=wrapper`. So fix this link below based on which version is
- // the user viewing.
- const isMarketplaceEnabled = useIsMarketplaceEnabled()
- const wrappersLinkParamName = isMarketplaceEnabled ? 'type' : 'category'
-
return [
{
title: 'Database Management',
@@ -103,8 +85,14 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => {
],
},
{
- title: 'Configuration',
+ title: 'Access Control',
items: [
+ {
+ name: 'Policies',
+ key: 'policies',
+ url: getDatabaseURL('policies'),
+ shortcutId: SHORTCUT_IDS.NAV_DATABASE_POLICIES,
+ },
showRoles && {
name: 'Roles',
key: 'roles',
@@ -117,12 +105,11 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => {
url: getDatabaseURL('column-privileges'),
shortcutId: SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES,
},
- {
- name: 'Policies',
- key: 'policies',
- url: `/project/${ref}/auth/policies`,
- rightIcon: ExternalLinkIcon,
- },
+ ].filter(Boolean) as ProductMenuGroupItem[],
+ },
+ {
+ title: 'Configuration',
+ items: [
{
name: 'Settings',
key: 'settings',
@@ -154,42 +141,7 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => {
url: getDatabaseURL('migrations'),
shortcutId: SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS,
},
- showWrappers && {
- name: 'Wrappers',
- key: 'wrappers',
- url: `/project/${ref}/integrations?${wrappersLinkParamName}=wrapper`,
- rightIcon: ExternalLinkIcon,
- },
- pgNetExtensionExists && {
- name: 'Database Webhooks',
- key: 'hooks',
- url: `/project/${ref}/integrations/webhooks/overview`,
- rightIcon: ExternalLinkIcon,
- },
].filter(Boolean) as ProductMenuGroupItem[],
},
- {
- title: 'Tools',
- items: [
- {
- name: 'Security Advisor',
- key: 'security-advisor',
- url: `/project/${ref}/advisors/security`,
- rightIcon: ExternalLinkIcon,
- },
- {
- name: 'Performance Advisor',
- key: 'performance-advisor',
- url: `/project/${ref}/advisors/performance`,
- rightIcon: ExternalLinkIcon,
- },
- {
- name: 'Query Performance',
- key: 'query-performance',
- url: `/project/${ref}/observability/query-performance`,
- rightIcon: ExternalLinkIcon,
- },
- ],
- },
]
}
diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseTriggersLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseTriggersLayout.tsx
index 375aa6ba03f..c9a41fc8d99 100644
--- a/apps/studio/components/layouts/DatabaseLayout/DatabaseTriggersLayout.tsx
+++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseTriggersLayout.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
import DatabaseLayout from './DatabaseLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
type DatabaseTriggersLayoutProps = PropsWithChildren
diff --git a/apps/studio/components/layouts/DefaultLayout.tsx b/apps/studio/components/layouts/DefaultLayout.tsx
index 5670934aafc..58e3b7b9883 100644
--- a/apps/studio/components/layouts/DefaultLayout.tsx
+++ b/apps/studio/components/layouts/DefaultLayout.tsx
@@ -126,5 +126,3 @@ export const DefaultLayout = ({
</SidebarProvider>
)
}
-
-export default DefaultLayout
diff --git a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
index c72a5408135..f32b32e2cb7 100644
--- a/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
+++ b/apps/studio/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx
@@ -25,7 +25,6 @@ import {
PopoverTrigger,
Separator,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import {
PageHeader,
@@ -37,6 +36,7 @@ import {
PageHeaderSummary,
PageHeaderTitle,
} from 'ui-patterns/PageHeader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { ProjectLayout } from '../ProjectLayout'
import EdgeFunctionsLayout from './EdgeFunctionsLayout'
@@ -44,7 +44,7 @@ import { EdgeFunctionTesterSheet } from '@/components/interfaces/Functions/EdgeF
import { useFunctionsDetailShortcuts } from '@/components/interfaces/Functions/useFunctionsDetailShortcuts'
import CopyButton from '@/components/ui/CopyButton'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
import { useEdgeFunctionBodyQuery } from '@/data/edge-functions/edge-function-body-query'
diff --git a/apps/studio/components/layouts/Integrations/IntegrationsProductMenu.tsx b/apps/studio/components/layouts/Integrations/IntegrationsProductMenu.tsx
index 4496bc097f3..a33f5e20844 100644
--- a/apps/studio/components/layouts/Integrations/IntegrationsProductMenu.tsx
+++ b/apps/studio/components/layouts/Integrations/IntegrationsProductMenu.tsx
@@ -1,12 +1,12 @@
import { useParams } from 'common'
import { useRouter } from 'next/router'
import { Menu, Separator } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { getCategoryParamFromAsPath, getIntegrationsPageFromPathname } from './Integrations.utils'
import { generateIntegrationsMenu } from './IntegrationsMenu.utils'
import { useInstalledIntegrations } from '@/components/interfaces/Integrations/Landing/useInstalledIntegrations'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ProductMenu } from '@/components/ui/ProductMenu'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
index 9d2af4613f3..993dda2f7db 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsLayout.tsx
@@ -4,7 +4,7 @@ import { PropsWithChildren } from 'react'
import { ProjectLayout } from '../ProjectLayout'
import { LogsSidebarMenuV2 } from './LogsSidebarMenuV2'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
index 6ac286ae309..bb2596db57f 100644
--- a/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
+++ b/apps/studio/components/layouts/LogsLayout/LogsSidebarMenuV2.tsx
@@ -1,17 +1,9 @@
-import { IS_PLATFORM, useFlag, useParams } from 'common'
+import { IS_PLATFORM, useParams } from 'common'
import { ChevronRight, Plus } from 'lucide-react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React, { useState } from 'react'
-import {
- Badge,
- Button,
- cn,
- Collapsible,
- CollapsibleContent,
- CollapsibleTrigger,
- Separator,
-} from 'ui'
+import { Button, cn, Collapsible, CollapsibleContent, CollapsibleTrigger, Separator } from 'ui'
import {
InnerSideBarEmptyPanel,
InnerSideBarFilters,
@@ -21,15 +13,12 @@ import {
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { FeaturePreviewSidebarPanel } from '../../ui/FeaturePreviewSidebarPanel'
-import {
- useFeaturePreviewModal,
- useUnifiedLogsPreview,
-} from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useIsETLPrivateAlpha } from '@/components/interfaces/Database/Replication/useIsETLPrivateAlpha'
import { LOG_DRAIN_TYPES } from '@/components/interfaces/LogDrains/LogDrains.constants'
-import SavedQueriesItem from '@/components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
+import { SavedQueriesItem } from '@/components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
import { LogsSidebarItem } from '@/components/interfaces/Settings/Logs/SidebarV2/SidebarItem'
import { UnifiedLogsBanner } from '@/components/interfaces/UnifiedLogs/UnifiedLogsBanner'
+import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { useContentQuery } from '@/data/content/content-query'
import { useReplicationSourcesQuery } from '@/data/replication/sources-query'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
@@ -64,10 +53,6 @@ export function LogsSidebarMenuV2() {
const router = useRouter()
const { ref } = useParams() as { ref: string }
- const unifiedLogsFlagEnabled = useFlag('unifiedLogs')
- const { selectFeaturePreview } = useFeaturePreviewModal()
- const { enable: enableUnifiedLogs, isEligible: isUnifiedLogsEligible } = useUnifiedLogsPreview()
-
const [searchText, setSearchText] = useState('')
const {
@@ -225,32 +210,7 @@ export function LogsSidebarMenuV2() {
return (
<div className="pb-4 relative">
- {IS_PLATFORM && !unifiedLogsFlagEnabled && (
- <FeaturePreviewSidebarPanel
- className="mx-4 mt-4"
- illustration={<Badge variant="default">Coming soon</Badge>}
- title="New logs"
- description="Get early access"
- actions={
- <Link href="https://forms.supabase.com/unified-logs-signup" target="_blank">
- <Button variant="default" size="tiny">
- Early access
- </Button>
- </Link>
- }
- />
- )}
- {isUnifiedLogsEligible && (
- <UnifiedLogsBanner
- variant="promo"
- className="mx-4 mt-4"
- onEnable={() => {
- enableUnifiedLogs()
- router.push(`/project/${ref}/logs`)
- }}
- onMoreInfo={() => selectFeaturePreview('supabase-ui-preview-unified-logs')}
- />
- )}
+ <UnifiedLogsBanner />
<div
className={cn(
@@ -265,15 +225,18 @@ export function LogsSidebarMenuV2() {
aria-labelledby="Search collections"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
- ></InnerSideBarFilterSearchInput>
+ />
</InnerSideBarFilters>
- <Button
+ <ButtonTooltip
+ asChild
variant="default"
icon={<Plus className="text-foreground" />}
className="w-[26px]"
- onClick={() => router.push(`/project/${ref}/logs/explorer`)}
- />
+ tooltip={{ content: { text: 'New query', side: 'bottom' } }}
+ >
+ <Link href={`/project/${ref}/logs/explorer`} />
+ </ButtonTooltip>
</div>
{templatesEnabled && (
<div className="px-2">
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
index 4d22659cd19..a01143df780 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -17,7 +17,7 @@ import {
PopoverSeparator,
TextArea,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import {
convertB64toBlob,
diff --git a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
index 9cf129270c9..c5dea166e95 100644
--- a/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
+++ b/apps/studio/components/layouts/Navigation/LayoutHeader/LayoutHeader.tsx
@@ -6,7 +6,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { ReactNode, useMemo } from 'react'
import { Badge, cn } from 'ui'
-import { CommandMenuTriggerInput } from 'ui-patterns'
+import { CommandMenuTriggerInput } from 'ui-patterns/CommandMenu'
import { BreadcrumbsView } from './BreadcrumbsView'
import { FeedbackDropdown } from './FeedbackDropdown/FeedbackDropdown'
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
index b9b7e606cb0..82db548a6b5 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/MobileNavigationBar.tsx
@@ -3,7 +3,7 @@ import { ChevronLeft, Menu } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'
import { Button, cn } from 'ui'
-import { MobileSheetNav } from 'ui-patterns'
+import { MobileSheetNav } from 'ui-patterns/MobileSheetNav'
import { HomeIcon } from '../LayoutHeader/HomeIcon'
import { useMobileSheet } from './MobileSheetContext'
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelectorSheetTabTrigger.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelectorSheetTabTrigger.tsx
index 43382c07717..6453a4eb5c8 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelectorSheetTabTrigger.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/ProjectBranchSelectorSheetTabTrigger.tsx
@@ -45,9 +45,9 @@ export function ProjectBranchSelectorSheetTabTrigger({
>
<path
d="M5.49365 31L0.493652 0V62L5.49365 31Z"
- className="fill-[hsl(var(--background-dash-sidebar))] group-data-[state=active]:fill-[hsl(var(--background-surface-200))]"
+ className="fill-[var(--background-dash-sidebar)] group-data-[state=active]:fill-[var(--background-surface-200)]"
/>
- <path d="M0.493652 0L5.49365 31L0.493652 62" stroke="hsl(var(--border-default))" />
+ <path d="M0.493652 0L5.49365 31L0.493652 62" stroke="var(--border-default)" />
</svg>
)}
</TabsTrigger_Shadcn_>
diff --git a/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx b/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
index 60350900db2..ad3ae93e090 100644
--- a/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
+++ b/apps/studio/components/layouts/Navigation/NavigationBar/StudioMobileSheetNav.tsx
@@ -1,5 +1,6 @@
import type { ReactNode } from 'react'
-import { CommandWrapper, MobileSheetNav } from 'ui-patterns'
+import { CommandWrapper } from 'ui-patterns/CommandMenu'
+import { MobileSheetNav } from 'ui-patterns/MobileSheetNav'
import {
SIDEBAR_KEYS,
diff --git a/apps/studio/components/layouts/ObservabilityLayout/Observability.Commands.tsx b/apps/studio/components/layouts/ObservabilityLayout/Observability.Commands.tsx
deleted file mode 100644
index ebfbd4bb87a..00000000000
--- a/apps/studio/components/layouts/ObservabilityLayout/Observability.Commands.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useParams } from 'common'
-import { useMemo } from 'react'
-import type { CommandOptions, ICommand } from 'ui-patterns/CommandMenu'
-import { orderSectionFirst, useQuery, useRegisterCommands } from 'ui-patterns/CommandMenu'
-
-import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
-import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
-
-const QUERY_PERFORMANCE_COMMAND_ID = 'nav-reports-query-performance'
-
-export function useReportsGotoCommands(options?: CommandOptions) {
- let { ref } = useParams()
- ref ||= '_'
-
- const { reportsAll } = useIsFeatureEnabled(['reports:all'])
-
- const commandQuery = useQuery()?.toLowerCase() ?? ''
- const prioritizeQueryPerformance = commandQuery.includes('query')
-
- const orderQueryPerformanceCommand = useMemo(() => {
- if (!prioritizeQueryPerformance) return undefined
-
- return (existingCommands: ICommand[], incomingCommands: ICommand[]) => {
- const filteredExisting = existingCommands.filter(
- (command) => command.id !== QUERY_PERFORMANCE_COMMAND_ID
- )
-
- return [...incomingCommands, ...filteredExisting]
- }
- }, [prioritizeQueryPerformance])
-
- const orderNavigateSection = useMemo<CommandOptions['orderSection'] | undefined>(() => {
- return prioritizeQueryPerformance ? orderSectionFirst : options?.orderSection
- }, [options?.orderSection, prioritizeQueryPerformance])
-
- useRegisterCommands(
- COMMAND_MENU_SECTIONS.NAVIGATE,
- reportsAll
- ? [
- {
- id: 'nav-reports',
- name: 'Reports',
- route: `/project/${ref}/observability`,
- defaultHidden: true,
- },
- {
- id: 'nav-reports-api',
- name: 'API Reports',
- route: `/project/${ref}/observability/api-overview`,
- defaultHidden: true,
- },
- {
- id: 'nav-reports-storage',
- name: 'Storage Reports',
- route: `/project/${ref}/observability/storage`,
- defaultHidden: true,
- },
- {
- id: 'nav-reports-database',
- name: 'Database Reports',
- route: `/project/${ref}/observability/database`,
- defaultHidden: true,
- },
- ]
- : [],
- {
- ...options,
- orderSection: orderNavigateSection,
- deps: [ref, orderNavigateSection, ...(options?.deps ?? [])],
- }
- )
-
- useRegisterCommands(
- COMMAND_MENU_SECTIONS.NAVIGATE,
- reportsAll
- ? [
- {
- id: QUERY_PERFORMANCE_COMMAND_ID,
- name: 'Query Performance Reports',
- route: `/project/${ref}/observability/query-performance`,
- defaultHidden: true,
- },
- ]
- : [],
- {
- ...options,
- orderCommands: orderQueryPerformanceCommand ?? options?.orderCommands,
- orderSection: orderNavigateSection,
- deps: [ref, orderQueryPerformanceCommand, orderNavigateSection, ...(options?.deps ?? [])],
- }
- )
-}
diff --git a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
index e99fad30b63..052ffd9a585 100644
--- a/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
+++ b/apps/studio/components/layouts/ObservabilityLayout/ObservabilityMenu.tsx
@@ -6,8 +6,8 @@ import { parseAsBoolean, useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Menu } from 'ui'
-import { InnerSideBarEmptyPanel } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { InnerSideBarEmptyPanel } from 'ui-patterns/InnerSideMenu'
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { generateObservabilityMenuItems } from './ObservabilityMenu.utils'
diff --git a/apps/studio/components/layouts/ProjectIntegrationsLayout.tsx b/apps/studio/components/layouts/ProjectIntegrationsLayout.tsx
index 244b489bdba..51ca726cb0b 100644
--- a/apps/studio/components/layouts/ProjectIntegrationsLayout.tsx
+++ b/apps/studio/components/layouts/ProjectIntegrationsLayout.tsx
@@ -2,12 +2,12 @@ import { IS_PLATFORM, useFeatureFlags, useParams } from 'common'
import { useRouter } from 'next/router'
import { PropsWithChildren } from 'react'
import { Menu, Separator } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { useInstalledIntegrations } from '@/components/interfaces/Integrations/Landing/useInstalledIntegrations'
import { ProjectLayout } from '@/components/layouts/ProjectLayout'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { ProductMenu } from '@/components/ui/ProductMenu'
import { useMarketplaceCategoriesQuery } from '@/data/marketplace/integration-categories-query'
import { useMarketplaceIntegrationsQuery } from '@/data/marketplace/integrations-query'
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
index 84f627e8ac8..b5ac80bea02 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/MobileMenuContent.tsx
@@ -6,7 +6,7 @@ import { ChevronLeft } from 'lucide-react'
import { useRouter } from 'next/router'
import React, { useMemo } from 'react'
import { Button, cn, Separator, SidebarGroup, SidebarMenu } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { resolveSectionDisplay } from './MobileMenuContent.utils'
import { getProductMenuComponent } from './mobileProductMenuRegistry'
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
index c9856d25270..b753d3b076e 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuContent.tsx
@@ -5,7 +5,7 @@ import { Blocks, Boxes, ChartArea, ChevronLeft, Receipt, Settings, Users } from
import { useRouter } from 'next/router'
import React, { useMemo } from 'react'
import { Button, cn, SidebarGroup, SidebarMenu } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { getOrgMenuComponent } from './mobileOrgMenuRegistry'
import type { OrgNavItem } from './OrgMenuContent.utils'
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx
index e059682c89d..7f3b5b486d2 100644
--- a/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider.tsx
@@ -5,7 +5,7 @@ import { parseAsString, useQueryState } from 'nuqs'
import { useEffect, useEffectEvent, type PropsWithChildren } from 'react'
import { getSupportLinkQueryParams } from '@/components/ui/HelpPanel/HelpPanel.utils'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
index f4a5ebbdf90..25dcf86ec2b 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
@@ -10,7 +10,8 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
-import { Admonition, TimestampInfo } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { DropdownMenuItemTooltip } from '@/components/ui/DropdownMenuItemTooltip'
import { InlineLink } from '@/components/ui/InlineLink'
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
index d97a5a22165..326d9bbe68e 100644
--- a/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/PausedState/ProjectPausedState.tsx
@@ -12,8 +12,8 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { TimestampInfo } from 'ui-patterns'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import { PauseDisabledState } from './PauseDisabledState'
import { ResumeProjectButton } from '@/components/interfaces/Project/ResumeProjectButton'
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectContext.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectContext.tsx
index 1365e8ef4de..d4ecdd8c26b 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectContext.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectContext.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren } from 'react'
import { DatabaseSelectorStateContextProvider } from '@/state/database-selector'
import { RoleImpersonationStateContextProvider } from '@/state/role-impersonation-state'
+import { SqlEditorSaveCoordinatorProvider } from '@/state/sql-editor/sql-editor-save-coordinator'
import { TableEditorStateContextProvider } from '@/state/table-editor'
import { TabsStateContextProvider } from '@/state/tabs'
@@ -18,7 +19,7 @@ export const ProjectContextProvider = ({
<TabsStateContextProvider key={`tabs-state-${projectRef}`}>
<DatabaseSelectorStateContextProvider key={`database-selector-state-${projectRef}`}>
<RoleImpersonationStateContextProvider key={`role-impersonation-state-${projectRef}`}>
- {children}
+ <SqlEditorSaveCoordinatorProvider>{children}</SqlEditorSaveCoordinatorProvider>
</RoleImpersonationStateContextProvider>
</DatabaseSelectorStateContextProvider>
</TabsStateContextProvider>
diff --git a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx b/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx
deleted file mode 100644
index 129d171a004..00000000000
--- a/apps/studio/components/layouts/ProjectLayout/RestorePaidPlanProjectNotice.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ExternalLink } from 'lucide-react'
-import { Alert, AlertDescription, AlertTitle, Button, WarningIcon } from 'ui'
-
-import { DOCS_URL } from '@/lib/constants'
-
-export const RestorePaidPlanProjectNotice = () => {
- return (
- <Alert>
- <WarningIcon />
- <AlertTitle>Project will count towards compute usage once restored</AlertTitle>
- <AlertDescription>
- For every hour your instance is active, we will bill you based on the compute size of your
- project.
- </AlertDescription>
- <AlertDescription className="mt-3">
- <Button asChild variant="default" icon={<ExternalLink />}>
- <a
- href={`${DOCS_URL}/guides/platform/manage-your-usage/compute`}
- target="_blank"
- rel="noreferrer"
- >
- More information
- </a>
- </Button>
- </AlertDescription>
- </Alert>
- )
-}
diff --git a/apps/studio/components/layouts/ProjectLayout/index.test.tsx b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
index 8fca42fbcc8..6a2ebf1f56b 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.test.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.test.tsx
@@ -193,7 +193,6 @@ vi.mock('@/components/ui/BannerStack/Banners/BannerUnifiedLogs', () => ({
vi.mock('@/components/interfaces/App/FeaturePreview/FeaturePreviewContext', () => ({
useUnifiedLogsPreview: () => ({
isEnabled: false,
- isEligible: false,
isLoading: false,
enable: () => {},
disable: () => {},
@@ -392,7 +391,9 @@ describe('FREE_MICRO_UPGRADE banner', () => {
await waitFor(() => {
expect(mockDismissBanner).toHaveBeenCalledWith('free-micro-upgrade-banner')
})
- expect(mockAddBanner).not.toHaveBeenCalled()
+ expect(mockAddBanner).not.toHaveBeenCalledWith(
+ expect.objectContaining({ id: 'free-micro-upgrade-banner' })
+ )
})
it('calls dismissBanner when compute warnings are cleared', async () => {
@@ -410,7 +411,9 @@ describe('FREE_MICRO_UPGRADE banner', () => {
await waitFor(() => {
expect(mockDismissBanner).toHaveBeenCalledWith('free-micro-upgrade-banner')
})
- expect(mockAddBanner).not.toHaveBeenCalled()
+ expect(mockAddBanner).not.toHaveBeenCalledWith(
+ expect.objectContaining({ id: 'free-micro-upgrade-banner' })
+ )
})
it('calls dismissBanner when project is not nano compute', async () => {
@@ -421,6 +424,8 @@ describe('FREE_MICRO_UPGRADE banner', () => {
await waitFor(() => {
expect(mockDismissBanner).toHaveBeenCalledWith('free-micro-upgrade-banner')
})
- expect(mockAddBanner).not.toHaveBeenCalled()
+ expect(mockAddBanner).not.toHaveBeenCalledWith(
+ expect.objectContaining({ id: 'free-micro-upgrade-banner' })
+ )
})
})
diff --git a/apps/studio/components/layouts/ProjectLayout/index.tsx b/apps/studio/components/layouts/ProjectLayout/index.tsx
index 6d811bdb278..c083583c8fb 100644
--- a/apps/studio/components/layouts/ProjectLayout/index.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/index.tsx
@@ -1,4 +1,4 @@
-import { LOCAL_STORAGE_KEYS, mergeRefs, useParams } from 'common'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS, mergeRefs, useParams } from 'common'
import { AnimatePresence, motion } from 'framer-motion'
import { XIcon } from 'lucide-react'
import Head from 'next/head'
@@ -41,7 +41,6 @@ import { RestoreFailedState } from './RestoreFailedState'
import { RestoringState } from './RestoringState'
import { UnhealthyState } from './UnhealthyState'
import { UpgradingState } from './UpgradingState'
-import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { CreateBranchModal } from '@/components/interfaces/BranchManagement/CreateBranchModal'
import { ProjectAPIDocs } from '@/components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
import { BannerFreeMicroUpgrade } from '@/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade'
@@ -143,7 +142,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
const { data: resourceWarnings } = useResourceWarningsQuery({
slug: selectedOrganization?.slug,
})
- const projectResourceWarnings = resourceWarnings?.find(
+ const projectResourceWarnings = (Array.isArray(resourceWarnings) ? resourceWarnings : []).find(
(w) => w.project === selectedProject?.ref
)
const isComputeNearExhaustion =
@@ -161,7 +160,6 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
LOCAL_STORAGE_KEYS.UNIFIED_LOGS_BANNER_DISMISSED,
false
)
- const { isEligible: showUnifiedLogsBanner } = useUnifiedLogsPreview()
const [isProjectIntegrationBannerDismissed, setIsProjectIntegrationBannerDismissed] =
useLocalStorageQuery(
getProjectIntegrationBannerDismissKey({
@@ -241,7 +239,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
useEffect(() => {
if (!selectedProject?.ref) return
- if (showUnifiedLogsBanner && !isUnifiedLogsBannerDismissed) {
+ if (IS_PLATFORM && !isUnifiedLogsBannerDismissed) {
addBanner({
id: BANNER_ID.UNIFIED_LOGS,
isDismissed: false,
@@ -251,13 +249,7 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
} else {
dismissBanner(BANNER_ID.UNIFIED_LOGS)
}
- }, [
- selectedProject?.ref,
- showUnifiedLogsBanner,
- isUnifiedLogsBannerDismissed,
- addBanner,
- dismissBanner,
- ])
+ }, [selectedProject?.ref, isUnifiedLogsBannerDismissed, addBanner, dismissBanner])
useLayoutEffect(() => {
const unregister = registerOpenMenu(() => {
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.test.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.test.tsx
index 6892203fd98..cdd4b125676 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.test.tsx
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.test.tsx
@@ -205,7 +205,7 @@ describe('ProjectNeedsSecuring', () => {
fireEvent.click(screen.getByText('invoices'))
expect(mockRouterPush).toHaveBeenCalledWith(
- '/project/project-ref/auth/policies?schema=public&search=invoices'
+ '/project/project-ref/database/policies?schema=public&search=invoices'
)
})
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.test.ts b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.test.ts
index 42d8dc33170..5684676a8ea 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.test.ts
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.test.ts
@@ -63,7 +63,7 @@ describe('ProjectNeedsSecuring.utils: buildSecurityPromptMarkdown', () => {
describe('ProjectNeedsSecuring.utils: getTablePoliciesHref', () => {
it('builds the policies href with plain values', () => {
expect(getTablePoliciesHref('abc', 'public', 'invoices')).toBe(
- '/project/abc/auth/policies?schema=public&search=invoices'
+ '/project/abc/database/policies?schema=public&search=invoices'
)
})
@@ -90,7 +90,7 @@ describe('ProjectNeedsSecuring.utils: getTablePoliciesHref', () => {
it('falls back to empty strings for undefined inputs', () => {
expect(getTablePoliciesHref(undefined, undefined, undefined)).toBe(
- '/project//auth/policies?schema=&search='
+ '/project//database/policies?schema=&search='
)
})
})
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.ts b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.ts
index 86980be37e3..518b5ae6736 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.ts
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils.ts
@@ -11,7 +11,7 @@ export const getTablePoliciesHref = (
schema: string | undefined,
name: string | undefined
): string => {
- return `/project/${projectRef ?? ''}/auth/policies?schema=${encodeURIComponent(
+ return `/project/${projectRef ?? ''}/database/policies?schema=${encodeURIComponent(
schema ?? ''
)}&search=${encodeURIComponent(name ?? '')}`
}
diff --git a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
index 0c61b94ed1b..2b897d78724 100644
--- a/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
+++ b/apps/studio/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuringView.tsx
@@ -46,7 +46,7 @@ import {
} from './ProjectNeedsSecuring.utils'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { AiAssistantDropdown } from '@/components/ui/AiAssistantDropdown'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { createNavigationHandler } from '@/lib/navigation'
import { useAiAssistantStateSnapshot } from '@/state/ai-assistant-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
diff --git a/apps/studio/components/layouts/ProjectSettingsLayout/ProjectSettings.Commands.tsx b/apps/studio/components/layouts/ProjectSettingsLayout/ProjectSettings.Commands.tsx
index 1b7258539a0..9a992684534 100644
--- a/apps/studio/components/layouts/ProjectSettingsLayout/ProjectSettings.Commands.tsx
+++ b/apps/studio/components/layouts/ProjectSettingsLayout/ProjectSettings.Commands.tsx
@@ -58,7 +58,7 @@ export function useProjectSettingsGotoCommands(options?: CommandOptions) {
name: 'Auth Settings',
route: authenticationSignInProviders
? `/project/${ref}/auth/providers`
- : `/project/${ref}/auth/policies`,
+ : `/project/${ref}/database/policies`,
defaultHidden: true,
},
...(platformWebhooksEnabled
diff --git a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
index c07c63d9345..e2be2602639 100644
--- a/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
+++ b/apps/studio/components/layouts/RealtimeLayout/RealtimeLayout.tsx
@@ -1,14 +1,14 @@
import { Realtime } from 'icons'
-import { ExternalLink } from 'lucide-react'
import Head from 'next/head'
import { useRouter } from 'next/router'
import type { PropsWithChildren } from 'react'
-import { Button } from 'ui'
import { ProjectLayout } from '../ProjectLayout'
import { generateRealtimeMenu } from './RealtimeMenu.utils'
+import { HighAvailabilityDisabledEmptyState } from '@/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState'
import { ProductMenu } from '@/components/ui/ProductMenu'
import { ProductMenuShortcuts } from '@/components/ui/ProductMenu/ProductMenuShortcuts'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { withAuth } from '@/hooks/misc/withAuth'
@@ -31,11 +31,12 @@ export interface RealtimeLayoutProps {
export const RealtimeLayout = ({ title, children }: PropsWithChildren<RealtimeLayoutProps>) => {
const { data: project } = useSelectedProjectQuery()
+ const { isHighAvailability } = useHighAvailability()
const router = useRouter()
const page = router.pathname.split('/')[4]
const menu = generateRealtimeMenu(project)
- if (!!project?.high_availability) {
+ if (isHighAvailability) {
return (
<>
<Head>
@@ -46,26 +47,11 @@ export const RealtimeLayout = ({ title, children }: PropsWithChildren<RealtimeLa
id="panel-project-content"
className="h-full w-full xl:min-w-[600px] flex items-center justify-center overflow-y-auto overflow-x-hidden bg-dash-sidebar p-6 @container"
>
- <div className="flex max-w-md flex-col items-center gap-y-5 text-center">
- <div className="flex h-12 w-12 items-center justify-center rounded-lg border border-strong bg-surface-100 text-foreground-light">
- <Realtime size={22} strokeWidth={1.5} />
- </div>
- <div className="flex flex-col gap-y-2">
- <h3 className="text-base text-foreground">
- Realtime is not available for High Availability projects
- </h3>
- <p className="text-sm text-foreground-light">
- Realtime is not currently available for projects with High Availability. Reach out
- to our support team if you're interested in using this feature with your High
- Availability project.
- </p>
- </div>
- <Button asChild variant="default" icon={<ExternalLink />}>
- <a href="https://supabase.com/support" target="_blank" rel="noopener noreferrer">
- Contact support
- </a>
- </Button>
- </div>
+ <HighAvailabilityDisabledEmptyState
+ icon={<Realtime size={22} strokeWidth={1.5} />}
+ title="Realtime unavailable on High Availability projects"
+ description="We're working to bring realtime to High Availability projects. Contact support if this is blocking your work."
+ />
</main>
</>
)
diff --git a/apps/studio/components/layouts/SQLEditorLayout/PrivateSqlSnippetEmpty.tsx b/apps/studio/components/layouts/SQLEditorLayout/PrivateSqlSnippetEmpty.tsx
index f448e6fe5c6..ab5610689bb 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/PrivateSqlSnippetEmpty.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/PrivateSqlSnippetEmpty.tsx
@@ -1,6 +1,6 @@
import { Pointer } from 'lucide-react'
import { TreeViewItem } from 'ui'
-import { InnerSideBarEmptyPanel } from 'ui-patterns'
+import { InnerSideBarEmptyPanel } from 'ui-patterns/InnerSideMenu'
export const EmptyPrivateQueriesPanel = () => (
<InnerSideBarEmptyPanel
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
index f3ab98967a3..2dc29b01f0d 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorMenu.tsx
@@ -29,7 +29,7 @@ import { useLocalStorage } from '@/hooks/misc/useLocalStorage'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
import { getAppStateSnapshot } from '@/state/app-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export const SQLEditorMenu = () => {
const router = useRouter()
@@ -135,14 +135,20 @@ export const SQLEditorMenu = () => {
</InnerSideBarFilterSearchInput>
</InnerSideBarFilters>
<DropdownMenu>
- <DropdownMenuTrigger asChild>
- <Button
- data-testid="sql-editor-new-query-button"
- variant="default"
- icon={<Plus className="text-foreground" />}
- className="w-[26px]"
- />
- </DropdownMenuTrigger>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <DropdownMenuTrigger asChild>
+ <Button
+ data-testid="sql-editor-new-query-button"
+ variant="default"
+ icon={<Plus className="text-foreground" />}
+ className="w-[26px]"
+ aria-label="Create a new query"
+ />
+ </DropdownMenuTrigger>
+ </TooltipTrigger>
+ <TooltipContent side="bottom">Create a new query</TooltipContent>
+ </Tooltip>
<DropdownMenuContent align="end" side="bottom" className="w-48">
<DropdownMenuItem className="gap-x-2" onClick={() => handleNewQuery()}>
<FilePlus size={14} />
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/DeleteSnippetsModal.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/DeleteSnippetsModal.tsx
index b4444814c2c..53a5cc3d01b 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/DeleteSnippetsModal.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/DeleteSnippetsModal.tsx
@@ -5,7 +5,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { useContentDeleteMutation } from '@/data/content/content-delete-mutation'
import { Snippet } from '@/data/content/sql-folders-query'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
export const DeleteSnippetsModal = ({
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ReferenceSnippetsSection.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ReferenceSnippetsSection.tsx
index fb552dc36d2..ab7eed3532b 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ReferenceSnippetsSection.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ReferenceSnippetsSection.tsx
@@ -5,8 +5,8 @@ import {
InnerSideMenuCollapsible,
InnerSideMenuCollapsibleContent,
InnerSideMenuCollapsibleTrigger,
-} from 'ui-patterns'
-import { InnerSideMenuDataItem } from 'ui-patterns/InnerSideMenu'
+ InnerSideMenuDataItem,
+} from 'ui-patterns/InnerSideMenu'
import { DEFAULT_SECTION_STATE, type SectionState } from './SQLEditorNav.constants'
import { useLocalStorage } from '@/hooks/misc/useLocalStorage'
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
index 35c7021f9cb..db4ade77062 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorNav.tsx
@@ -5,14 +5,14 @@ import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { TreeView } from 'ui'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import {
InnerSideBarEmptyPanel,
InnerSideMenuCollapsible,
InnerSideMenuCollapsibleContent,
InnerSideMenuCollapsibleTrigger,
InnerSideMenuSeparator,
-} from 'ui-patterns'
-import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+} from 'ui-patterns/InnerSideMenu'
import { DeleteSnippetsModal } from './DeleteSnippetsModal'
import { ReferenceSnippetsSection } from './ReferenceSnippetsSection'
@@ -34,11 +34,12 @@ import { useContentCountQuery } from '@/data/content/content-count-query'
import { useContentDeleteMutation } from '@/data/content/content-delete-mutation'
import { useSQLSnippetFoldersDeleteMutation } from '@/data/content/sql-folders-delete-mutation'
import { Snippet, SnippetFolder, useSQLSnippetFoldersQuery } from '@/data/content/sql-folders-query'
-import { useSqlSnippetsQuery, type SqlSnippet } from '@/data/content/sql-snippets-query'
+import { useSqlSnippetsQuery } from '@/data/content/sql-snippets-query'
import { useLocalStorage } from '@/hooks/misc/useLocalStorage'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
-import { useSnippetFolders, useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { isNewFolder } from '@/state/sql-editor/sql-editor-lifecycle'
+import { useSnippetFolders, useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
interface SQLEditorNavProps {
@@ -204,7 +205,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => {
let snippets = favoriteSqlSnippetsData?.pages.flatMap((page) => page.contents ?? []) ?? []
if (snippet && snippet.favorite && !snippets.find((x) => x.id === snippet.id)) {
- snippets.push(snippet as SqlSnippet)
+ snippets.push(snippet)
}
return (
@@ -255,7 +256,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => {
let snippets = sharedSqlSnippetsData?.pages.flatMap((page) => page.contents ?? []) ?? []
if (snippet && snippet.visibility === 'project' && !snippets.find((x) => x.id === snippet.id)) {
- snippets.push(snippet as SqlSnippet)
+ snippets.push(snippet)
}
return (
@@ -420,7 +421,7 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => {
useEffect(() => {
if (projectRef && privateSnippetsPages?.pages) {
privateSnippetsPages.pages.forEach((page) => {
- page.contents?.forEach((snippet: Snippet) => {
+ page.contents?.forEach((snippet) => {
snapV2.addSnippet({ projectRef, snippet })
})
page.folders?.forEach((folder) => snapV2.addFolder({ projectRef, folder }))
@@ -719,10 +720,11 @@ export const SQLEditorNav = ({ sort = 'inserted_at' }: SQLEditorNavProps) => {
onSelectShare={() => setSelectedSnippetToShare(element.metadata as Snippet)}
onEditSave={(name: string) => {
// [Joshen] Inline editing only for folders for now
- if (name.length === 0 && element.id === 'new-folder') {
- snapV2.removeFolder(element.id as string)
+ const folderId = element.id as string
+ if (name.length === 0 && isNewFolder(snapV2.folders[folderId]?.status)) {
+ snapV2.removeFolder(folderId)
} else if (name.length > 0) {
- snapV2.saveFolder({ id: element.id as string, name })
+ snapV2.saveFolder({ id: folderId, name })
}
}}
hasNextPage={hasNextPage}
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
index 2235f37d60e..828f99b7687 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx
@@ -29,14 +29,19 @@ import {
} from 'ui'
import { createSqlSnippetSkeletonV2 } from '@/components/interfaces/SQLEditor/SQLEditor.utils'
-import { getContentById } from '@/data/content/content-id-query'
+import { getContentById, getSqlSnippetById } from '@/data/content/content-id-query'
import { useSQLSnippetFolderContentsQuery } from '@/data/content/sql-folder-contents-query'
import { Snippet } from '@/data/content/sql-folders-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useProfile } from '@/lib/profile'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import {
+ isFolderEditing,
+ isFolderSaving,
+ type FolderStatus,
+} from '@/state/sql-editor/sql-editor-lifecycle'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
interface SQLEditorTreeViewItemProps extends Omit<
ComponentProps<typeof TreeViewItem>,
@@ -44,7 +49,7 @@ interface SQLEditorTreeViewItemProps extends Omit<
> {
element: any
isMultiSelected?: boolean
- status?: 'editing' | 'saving' | 'idle'
+ status?: FolderStatus
getNodeProps: () => any
onSelectCreate?: () => void
onSelectDelete?: () => void
@@ -105,8 +110,8 @@ export const SQLEditorTreeViewItem = ({
const isSharedSnippet = element.metadata.visibility === 'project'
const isFavorite = element.metadata.favorite
- const isEditing = status === 'editing'
- const isSaving = status === 'saving'
+ const isEditing = isFolderEditing(status)
+ const isSaving = isFolderSaving(status)
const { can: canCreateSQLSnippet } = useAsyncCheckPermissions(
PermissionAction.CREATE,
@@ -188,12 +193,8 @@ export const SQLEditorTreeViewItem = ({
// opened have no content loaded yet, so fetch it before toggling.
const storeSnippet = snapV2.snippets[snippetId]
if (!storeSnippet?.snippet.content) {
- const data = await getContentById({ projectRef, id: snippetId })
- // getContentById returns a union content; narrow to the SQL variant (the
- // only kind the SQL editor loads) via its discriminating field.
- if ('unchecked_sql' in data.content) {
- snapV2.setSnippet(projectRef, { ...data, content: data.content })
- }
+ const snippet = await getSqlSnippetById({ projectRef, id: snippetId })
+ snapV2.setSnippet(projectRef, snippet)
}
if (isFavorite) snapV2.removeFavorite(snippetId)
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
index 99d2c3e09ff..f3cd44d3ef6 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/ShareSnippetModal.tsx
@@ -6,7 +6,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { getContentById } from '@/data/content/content-id-query'
import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
import { Snippet } from '@/data/content/sql-folders-query'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import type { SqlSnippets } from '@/types'
export const ShareSnippetModal = ({
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
index dfeb09ed800..ad35294d4c2 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/UnshareSnippetModal.tsx
@@ -6,7 +6,7 @@ import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { getContentById } from '@/data/content/content-id-query'
import { useContentUpsertMutation } from '@/data/content/content-upsert-mutation'
import { Snippet } from '@/data/content/sql-folders-query'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import type { SqlSnippets } from '@/types'
export const UnshareSnippetModal = ({
diff --git a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
index 0c95f7a8691..e1b5d4ec6e9 100644
--- a/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
+++ b/apps/studio/components/layouts/SQLEditorLayout/SqlEditor.Commands.tsx
@@ -26,7 +26,8 @@ import {
import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
import { orderCommandSectionsByPriority } from '@/components/interfaces/App/CommandMenu/ordering'
-import { useSqlSnippetsQuery, type SqlSnippet } from '@/data/content/sql-snippets-query'
+import { type SnippetWithContent } from '@/data/content/sql-folders-query'
+import { useSqlSnippetsQuery } from '@/data/content/sql-snippets-query'
import {
useInfiniteTablesQuery,
usePrefetchTables,
@@ -185,7 +186,7 @@ function SnippetSelector({
canCreateNew,
}: {
projectRef: string | undefined
- snippets: Array<SqlSnippet> | undefined
+ snippets: Array<SnippetWithContent> | undefined
canCreateNew: boolean
}) {
const router = useRouter()
@@ -244,7 +245,7 @@ function SnippetSelector({
)
}
-function snippetValue(snippet: SqlSnippet) {
+function snippetValue(snippet: SnippetWithContent) {
if (snippet.type !== 'sql') return ''
return escapeAttributeSelector(
`${snippet.id}-${snippet.name}-${snippet?.content?.unchecked_sql.slice(0, 30)}`
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index c6a13814147..82b246ec302 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -365,7 +365,7 @@ export const EntityListItem = ({
<DropdownMenuItem key="view-policies" className="space-x-2" asChild>
<Link
key="view-policies"
- href={`/project/${projectRef}/auth/policies?schema=${encodeURIComponent(selectedSchema ?? '')}&search=${encodeURIComponent(String(entity.id))}`}
+ href={`/project/${projectRef}/database/policies?schema=${encodeURIComponent(selectedSchema ?? '')}&search=${encodeURIComponent(String(entity.id))}`}
>
<Lock size={12} className="shrink-0" />
<span>View policies</span>
diff --git a/apps/studio/components/layouts/TableEditorLayout/ExportAllRows.tsx b/apps/studio/components/layouts/TableEditorLayout/ExportAllRows.tsx
index c20db337c0e..34df92f17d4 100644
--- a/apps/studio/components/layouts/TableEditorLayout/ExportAllRows.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/ExportAllRows.tsx
@@ -30,7 +30,7 @@ import { tableEditorKeys } from '@/data/table-editor/keys'
import { getTableEditor, type TableEditorData } from '@/data/table-editor/table-editor-query'
import { isTableLike } from '@/data/table-editor/table-editor-types'
import { fetchAllTableRows } from '@/data/table-rows/table-rows-query'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { DOCS_URL } from '@/lib/constants'
import type { RoleImpersonationState } from '@/lib/role-impersonation'
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
index 882aa8ad5e8..f9b7fb32cef 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
@@ -7,7 +7,7 @@ import { SaveQueueActionBar } from '@/components/grid/components/footer/operatio
import { useIsQueueOperationsEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
import { BannerTableEditorQueueOperations } from '@/components/ui/BannerStack/Banners/BannerTableEditorQueueOperations'
import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index 75543eb2207..43c120841e7 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -3,7 +3,17 @@ import { keepPreviousData } from '@tanstack/react-query'
import { useParams } from 'common'
import { Filter, Plus } from 'lucide-react'
import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Button, Checkbox, Label, Popover, PopoverContent, PopoverTrigger } from 'ui'
+import {
+ Button,
+ Checkbox,
+ Label,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from 'ui'
import {
InnerSideBarEmptyPanel,
InnerSideBarFilters,
@@ -23,7 +33,7 @@ import { ErrorMatcher } from '@/components/interfaces/ErrorHandling/ErrorMatcher
import { EditorMenuListSkeleton } from '@/components/layouts/TableEditorLayout/EditorMenuListSkeleton'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { InfiniteListDefault, LoaderForIconMenuItems } from '@/components/ui/InfiniteList'
-import SchemaSelector from '@/components/ui/SchemaSelector'
+import { SchemaSelector } from '@/components/ui/SchemaSelector'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { ENTITY_TYPE } from '@/data/entity-types/entity-type-constants'
import { useEntityTypesQuery } from '@/data/entity-types/entity-types-infinite-query'
@@ -240,11 +250,17 @@ export const TableEditorMenu = () => {
</InnerSideBarFilterSearchInput>
<Popover>
<PopoverTrigger asChild>
- <Button
- variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
- className="h-[32px] md:h-[28px] px-1.5"
- icon={<Filter />}
- />
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Button
+ variant={visibleTypes.length !== 5 ? 'default' : 'dashed'}
+ className="h-[32px] md:h-[28px] px-1.5"
+ icon={<Filter />}
+ aria-label="Filter"
+ />
+ </TooltipTrigger>
+ <TooltipContent side="bottom">Filter</TooltipContent>
+ </Tooltip>
</PopoverTrigger>
<PopoverContent className="p-0 w-56" side="bottom" align="center">
<div className="px-3 pt-3 pb-2 flex flex-col gap-y-2">
diff --git a/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx b/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx
deleted file mode 100644
index 8bd139d1f17..00000000000
--- a/apps/studio/components/layouts/Tabs/MigrateToPostgres.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { motion } from 'framer-motion'
-import { BaggageClaim, BookOpen } from 'lucide-react'
-import { Button } from 'ui'
-
-// not in use yet
-export const MigrateToPostgres = () => (
- <motion.div
- className="w-full rounded-lg overflow-hidden relative border border-muted"
- variants={{
- hidden: { opacity: 0, scale: 0.96, y: 15 },
- show: {
- opacity: 1,
- scale: 1,
- y: 0,
- transition: {
- type: 'spring',
- stiffness: 600,
- damping: 50,
- staggerChildren: 0.08,
- delayChildren: 0.03,
- },
- },
- }}
- >
- <div className="absolute inset-0 bg-linear-to-r from-background-surface-200 via-background-surface-200 to-transparent"></div>
- <div className="relative z-10 px-5 py-4 h-full flex gap-5 items-center justify-between">
- <div className="flex flex-col gap-3">
- <div className="flex gap-4">
- <div className="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-surface-300 border">
- <BaggageClaim size={14} className="text-foreground-light" strokeWidth={1.5} />
- </div>
- <div className="flex flex-col gap-1">
- <h2 className="text-base text-foreground">Migrate your Database to Postgres</h2>
- <p className="text-xs text-foreground-light max-w-md">
- Already have a database? Migrate any database to Supabase to access backups, RESTful
- auto APIs, Authentication and more.
- </p>
- </div>
- </div>
- </div>
- <Button variant="default" className="rounded-full" iconRight={<BookOpen />}>
- Migrate to Postgres
- </Button>
- </div>
- </motion.div>
-)
diff --git a/apps/studio/components/layouts/Tabs/Tabs.utils.ts b/apps/studio/components/layouts/Tabs/Tabs.utils.ts
index 3e1582745f1..eae4578697f 100644
--- a/apps/studio/components/layouts/Tabs/Tabs.utils.ts
+++ b/apps/studio/components/layouts/Tabs/Tabs.utils.ts
@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef } from 'react'
import { Entity } from '@/data/entity-types/entity-types-infinite-query'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { createTabId, editorEntityTypes, useTabsStateSnapshot } from '@/state/tabs'
export function useTableEditorTabsCleanUp() {
diff --git a/apps/studio/components/to-be-cleaned/KeyMap.tsx b/apps/studio/components/to-be-cleaned/KeyMap.tsx
deleted file mode 100644
index a68221cabb2..00000000000
--- a/apps/studio/components/to-be-cleaned/KeyMap.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Render keyMap
- *
- * @param {String} keyMap ex: Command+Enter ; separate key using +
- */
-
-const customKeyChars: any = {
- command: '⌘',
- control: '⌃',
- option: '⌥',
- enter: '↵',
-}
-
-const KeyMap = ({ keyMap }: any) => {
- if (!keyMap) return null
-
- const keys = keyMap.split('+')
- const keymapRender = keys.map((key: any) => {
- let keyChar = key
- if (key.toLowerCase() in customKeyChars) keyChar = customKeyChars[key.toLowerCase()]
- return (
- <span key={key} className={`btn-keymap ${keyChar.length > 1 ? 'px-2' : ''}`}>
- {keyChar}
- </span>
- )
- })
- return <p className="inline-flex space-x-1.5">{keymapRender}</p>
-}
-
-export default KeyMap
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index 6db42ca1442..62ec0219eea 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -8,9 +8,9 @@ import { Eraser, Pencil, X } from 'lucide-react'
import { useRouter } from 'next/router'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Button, cn, KeyboardShortcut } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
-import AlertError from '../AlertError'
+import { AlertError } from '../AlertError'
import { ButtonTooltip } from '../ButtonTooltip'
import { ErrorBoundary } from '../ErrorBoundary/ErrorBoundary'
import { ASSISTANT_ERRORS } from './AiAssistant.constants'
@@ -54,7 +54,7 @@ import { useAiAssistantState, useAiAssistantStateSnapshot } from '@/state/ai-ass
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
interface AIAssistantProps {
initialMessages?: MessageType[] | undefined
@@ -414,7 +414,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
},
]}
>
- <div className={cn('flex flex-col h-full w-full md:h-full max-h-dvh', className)}>
+ <div className={cn('flex bg-card flex-col h-full w-full md:h-full max-h-dvh', className)}>
<AIAssistantHeader
isChatLoading={isChatLoading}
onNewChat={snap.newChat}
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
index f399e554541..801f35fb939 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.utils.ts
@@ -127,7 +127,7 @@ export const getContextualInvalidationKeys = ({
(
{
'auth/users': [authKeys.usersInfinite(ref)],
- 'auth/policies': [databasePoliciesKeys.list(ref)],
+ 'database/policies': [databasePoliciesKeys.list(ref)],
'database/functions': [databaseKeys.databaseFunctions(ref)],
'database/tables': [
tableKeys.list(ref, schema, { includeColumns: true }),
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
index 41a3a40d447..81f8edc91c2 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
@@ -9,7 +9,7 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ButtonTooltip } from '../ButtonTooltip'
import { AIAssistantChatSelector } from './AIAssistantChatSelector'
@@ -39,7 +39,7 @@ export const AIAssistantHeader = ({
const [isOptInModalOpen, setIsOptInModalOpen] = useState(false)
return (
<div className="z-30 sticky top-0">
- <div className="border-b border-b-muted flex items-center bg gap-x-4 pl-4 pr-3 min-h-(--header-height)">
+ <div className="border-b border-b-muted flex items-center bg-card gap-x-4 pl-4 pr-3 min-h-(--header-height)">
<div className="text-sm flex-1 flex items-center">
<AiIconAnimation size={20} allowHoverEffect={false} />
<span className="text-border-stronger dark:text-border-strong ml-3">
diff --git a/apps/studio/components/ui/AIAssistantPanel/hooks.ts b/apps/studio/components/ui/AIAssistantPanel/hooks.ts
deleted file mode 100644
index 70a2f231bdc..00000000000
--- a/apps/studio/components/ui/AIAssistantPanel/hooks.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-interface UseAutoScrollProps {
- enabled?: boolean
-}
-
-export function useAutoScroll({ enabled = true }: UseAutoScrollProps = {}) {
- const [container, setContainer] = useState<HTMLDivElement | null>(null)
- const [isSticky, setIsSticky] = useState(true)
- const isStickyRef = useRef(true)
- const lastScrollHeightRef = useRef<number>(null)
-
- const ref = useCallback((element: HTMLDivElement | null) => {
- if (element) {
- setContainer(element)
- }
- }, [])
-
- const scrollToEnd = useCallback(() => {
- if (container) {
- isStickyRef.current = true
- setIsSticky(true)
- container.scrollTo({
- top: container.scrollHeight,
- behavior: 'smooth',
- })
- }
- }, [container])
-
- useEffect(() => {
- if (!container || !enabled) return
-
- let timeoutId: NodeJS.Timeout
-
- const resizeObserver = new ResizeObserver(() => {
- clearTimeout(timeoutId)
- timeoutId = setTimeout(() => {
- if (
- lastScrollHeightRef.current != null &&
- container.scrollHeight !== lastScrollHeightRef.current
- ) {
- lastScrollHeightRef.current = container.scrollHeight
- if (isStickyRef.current) {
- scrollToEnd()
- }
- }
- }, 100)
- })
-
- const handleScroll = () => {
- const isAtBottom =
- Math.abs(container.scrollHeight - container.scrollTop - container.clientHeight) < 10
-
- isStickyRef.current = isAtBottom
- setIsSticky(isAtBottom)
- }
-
- // Observe all children of the container
- Array.from(container.children).forEach((child) => {
- resizeObserver.observe(child)
- })
-
- container.addEventListener('scroll', handleScroll)
-
- return () => {
- clearTimeout(timeoutId)
- resizeObserver.disconnect()
- container.removeEventListener('scroll', handleScroll)
- }
- }, [container, enabled, scrollToEnd])
-
- return { ref, isSticky, scrollToEnd, setIsSticky }
-}
diff --git a/apps/studio/components/ui/AIEditor/index.tsx b/apps/studio/components/ui/AIEditor/index.tsx
index 63076cff831..bf13b87850b 100644
--- a/apps/studio/components/ui/AIEditor/index.tsx
+++ b/apps/studio/components/ui/AIEditor/index.tsx
@@ -1,23 +1,25 @@
-import Editor, { Monaco, OnMount } from '@monaco-editor/react'
+import { Monaco, OnMount } from '@monaco-editor/react'
import { AnimatePresence, motion } from 'framer-motion'
import type { editor as monacoEditor } from 'monaco-editor'
import { useCallback, useEffect, useRef, useState } from 'react'
import { toast } from 'sonner'
import { KeyboardShortcut } from 'ui'
-import { useSetCommandMenuOpen } from 'ui-patterns'
+import { useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
+import { CodeEditor, type ValidLanguages } from '../CodeEditor/CodeEditor'
import { DiffEditor } from '../DiffEditor'
import ResizableAIWidget from './ResizableAIWidget'
import { getEditorSelectionParts } from './utils'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { constructHeaders } from '@/data/fetchers'
+import { useLatest } from '@/hooks/misc/useLatest'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
interface AIEditorProps {
id?: string
- language?: string
+ language: ValidLanguages
value?: string
defaultValue?: string
aiEndpoint?: string
@@ -71,14 +73,9 @@ export const AIEditor = ({
const isCommandMenuHotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.COMMAND_MENU_OPEN)
const setCommandMenuOpen = useSetCommandMenuOpen()
- const executeQueryRef = useRef(executeQuery)
- executeQueryRef.current = executeQuery
-
- const commandMenuHotkeyEnabledRef = useRef(isCommandMenuHotkeyEnabled)
- commandMenuHotkeyEnabledRef.current = isCommandMenuHotkeyEnabled
-
- const setCommandMenuOpenRef = useRef(setCommandMenuOpen)
- setCommandMenuOpenRef.current = setCommandMenuOpen
+ const executeQueryRef = useLatest(executeQuery)
+ const commandMenuHotkeyEnabledRef = useLatest(isCommandMenuHotkeyEnabled)
+ const setCommandMenuOpenRef = useLatest(setCommandMenuOpen)
const [currentValue, setCurrentValue] = useState(value || defaultValue)
const [isDiffMode, setIsDiffMode] = useState(false)
@@ -218,15 +215,17 @@ export const AIEditor = ({
if (language === 'javascript' || language === 'typescript') {
// The Deno libs are loaded as a raw text via raw-loader in next.config.ts. They're passed as raw text to the
- // Monaco editor.
- import('@/public/deno/edge-runtime.d.ts' as string)
+ // Monaco editor. The @vite-ignore stops Vite/Rolldown's dep scanner from following the dynamic import and
+ // trying to parse the .d.ts declarations as runtime modules — that crashes the scan in vite 8.0.13+ and
+ // cascades into SSR pre-bundling breakage.
+ import(/* @vite-ignore */ '@/public/deno/edge-runtime.d.ts' as string)
.then((module) => {
monaco.languages.typescript.typescriptDefaults.addExtraLib(module.default)
})
.catch((error) => {
console.error('Failed to load Deno edge-runtime typings:', error)
})
- import('@/public/deno/lib.deno.d.ts' as string)
+ import(/* @vite-ignore */ '@/public/deno/lib.deno.d.ts' as string)
.then((module) => {
monaco.languages.typescript.typescriptDefaults.addExtraLib(module.default)
})
@@ -235,17 +234,6 @@ export const AIEditor = ({
})
}
- if (!!executeQueryRef.current) {
- editor.addAction({
- id: 'run-query',
- label: 'Run Query',
- keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
- contextMenuGroupId: 'operation',
- contextMenuOrder: 0,
- run: () => executeQueryRef.current?.(),
- })
- }
-
refreshCloseAction()
// Add AI Assistant toggle keybinding (Cmd+I)
@@ -279,11 +267,6 @@ export const AIEditor = ({
setCommandMenuOpenRef.current(true)
}
})
-
- if (autoFocus) {
- if (editor.getValue().length === 1) editor.setPosition({ lineNumber: 1, column: 2 })
- editor.focus()
- }
}
const handlePrompt = async (
@@ -323,19 +306,6 @@ export const AIEditor = ({
}
}
- const defaultOptions: monacoEditor.IStandaloneEditorConstructionOptions = {
- tabSize: 2,
- fontSize: 13,
- readOnly,
- minimap: { enabled: false },
- wordWrap: 'on',
- lineNumbers: 'on',
- folding: false,
- padding: { top: 4 },
- lineNumbersMinChars: 3,
- ...options,
- }
-
useEffect(() => {
setCurrentValue(value || defaultValue)
}, [value, defaultValue])
@@ -412,19 +382,20 @@ export const AIEditor = ({
</div>
) : (
<div className="w-full h-full relative">
- {/* [Joshen] Refactor: Use CodeEditor.tsx instead, reduce duplicate declaration of Editor */}
- <Editor
- theme="supabase"
+ <CodeEditor
language={language}
+ autofocus={autoFocus}
+ className={className}
+ isReadOnly={readOnly}
+ options={options}
value={currentValue}
- options={defaultOptions}
- onChange={(value: string | undefined) => {
+ onInputChange={(value) => {
const newValue = value || ''
setCurrentValue(newValue)
onChange?.(newValue)
}}
onMount={handleEditorOnMount}
- className={className}
+ actions={{ runQuery: { enabled: true, callback: () => executeQueryRef.current?.() } }}
/>
{promptState.isOpen && editorRef.current && (
<ResizableAIWidget
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
index b8f372f441b..dc231bd5080 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelBody.tsx
@@ -1,6 +1,6 @@
import { AlertTriangle, ChevronRight, Inbox } from 'lucide-react'
import { Badge, Button, cn } from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import type { AdvisorItem } from './AdvisorPanel.types'
import {
diff --git a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
index 1b03c5a8b23..7af901f84e8 100644
--- a/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/AdvisorPanelHeader.tsx
@@ -1,5 +1,6 @@
import { ChevronLeft, X } from 'lucide-react'
import { Badge } from 'ui'
+import { TimestampInfo } from 'ui-patterns/TimestampInfo'
import type { AdvisorItem } from './AdvisorPanel.types'
import {
@@ -20,16 +21,9 @@ interface AdvisorPanelHeaderProps {
export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPanelHeaderProps) => {
const displayTitle = selectedItem ? getAdvisorPanelItemDisplayTitle(selectedItem) : undefined
const secondaryText = selectedItem ? getAdvisorItemSecondaryText(selectedItem) : undefined
- const metadataText = selectedItem
- ? (secondaryText ??
- (selectedItem.createdAt ? formatItemDate(selectedItem.createdAt) : undefined))
- : undefined
- // Only capitalize date strings (e.g. "a few seconds ago"); entity strings
- // like "public.users" must not be case-altered.
- const metadataCapitalize =
- selectedItem !== undefined &&
- secondaryText === undefined &&
- selectedItem.createdAt !== undefined
+ const createdAt = selectedItem?.createdAt
+
+ const metadataCapitalize = selectedItem !== undefined && secondaryText === undefined
return (
<div className="border-b px-4 py-3 flex items-center gap-3">
@@ -43,13 +37,19 @@ export const AdvisorPanelHeader = ({ selectedItem, onBack, onClose }: AdvisorPan
<div className="flex items-center gap-2 overflow-hidden flex-1">
<div className="flex-1 flex flex-col">
<span className="heading-default">{displayTitle}</span>
- {metadataText && (
+ {selectedItem?.source !== 'notification' && secondaryText ? (
<span
className={`text-xs text-foreground-light${metadataCapitalize ? ' capitalize-sentence' : ''}`}
>
- {metadataText}
+ {secondaryText}
</span>
- )}
+ ) : createdAt ? (
+ <TimestampInfo
+ className="w-fit capitalize-sentence"
+ utcTimestamp={createdAt}
+ label={formatItemDate(createdAt)}
+ />
+ ) : null}
</div>
{selectedItem && (
<Badge variant={severityBadgeVariants[selectedItem.severity]}>
diff --git a/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx b/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
index d0ecf76f504..8952da6e26f 100644
--- a/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
+++ b/apps/studio/components/ui/AdvisorPanel/NotificationDetail.tsx
@@ -40,13 +40,17 @@ export const NotificationDetail = ({ notification, onUpdateStatus }: Notificatio
<Link
title={organization.name}
href={`/org/${organization.slug}/general`}
- className="text-link"
+ className="text-sm text-link"
>
{organization.name}
</Link>
)}
{project !== undefined && (
- <Link title={project.name} href={`/project/${project.ref}`} className="text-link">
+ <Link
+ title={project.name}
+ href={`/project/${project.ref}`}
+ className="text-sm text-link"
+ >
{project.name}
</Link>
)}
diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx
index dc4b7805fe4..96746430a20 100644
--- a/apps/studio/components/ui/AlertError.tsx
+++ b/apps/studio/components/ui/AlertError.tsx
@@ -112,5 +112,3 @@ export const AlertError = ({
/>
)
}
-
-export default AlertError
diff --git a/apps/studio/components/ui/AlphaNotice.tsx b/apps/studio/components/ui/AlphaNotice.tsx
index bcf8a80fe62..fe53c97d71d 100644
--- a/apps/studio/components/ui/AlphaNotice.tsx
+++ b/apps/studio/components/ui/AlphaNotice.tsx
@@ -2,7 +2,7 @@ import { ExternalLink } from 'lucide-react'
import Link from 'next/link'
import { PropsWithChildren } from 'react'
import { Badge, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { BASE_PATH } from '@/lib/constants'
diff --git a/apps/studio/components/ui/AutoEnableRLSNotice.tsx b/apps/studio/components/ui/AutoEnableRLSNotice.tsx
index bb3b9e7e559..368678b418f 100644
--- a/apps/studio/components/ui/AutoEnableRLSNotice.tsx
+++ b/apps/studio/components/ui/AutoEnableRLSNotice.tsx
@@ -5,8 +5,6 @@ import { useMemo, useState } from 'react'
import { toast } from 'sonner'
import {
Button,
- Card,
- CardContent,
Dialog,
DialogContent,
DialogDescription,
@@ -17,6 +15,7 @@ import {
DialogTitle,
DialogTrigger,
} from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { CodeBlock } from 'ui-patterns/CodeBlock'
import { AUTO_ENABLE_RLS_EVENT_TRIGGER_SQL } from '@/components/interfaces/Database/Triggers/EventTriggersList/EventTriggers.constants'
@@ -60,32 +59,25 @@ export const AutoEnableRLSNotice = ({ iconOnly }: { iconOnly?: boolean }) => {
}
return (
- <Card>
- <CardContent className="flex items-center justify-between">
- <div className="flex items-center gap-x-4">
- <div className="rounded-lg bg-surface-300 text-foreground-light w-10 h-10 flex items-center justify-center">
- <ShieldCheck size={18} />
- </div>
- <div className="text-sm">
- <p>Auto-enable RLS for new tables</p>
- <p className="text-foreground-lighter">
- Create an event trigger that enables Row Level Security on all new tables
- </p>
- </div>
- </div>
-
- <div className="flex items-center gap-x-2">
+ <Admonition
+ type="note"
+ layout="responsive"
+ title="Automatically enable Row Level Security (RLS) on new tables"
+ description="Protect future tables by automatically enabling RLS whenever a table is created."
+ actions={
+ <>
<CreateEnsureRLSTriggerDialog />
<ButtonTooltip
icon={<X />}
variant="text"
- className="w-7"
- tooltip={{ content: { side: 'bottom', text: 'Minimize' } }}
+ className="w-6"
+ tooltip={{ content: { side: 'bottom', text: 'Dismiss' } }}
+ aria-label="Dismiss RLS notice"
onClick={() => setIsMinimized(true)}
/>
- </div>
- </CardContent>
- </Card>
+ </>
+ }
+ />
)
}
@@ -131,36 +123,41 @@ const CreateEnsureRLSTriggerDialog = ({ iconOnly }: { iconOnly?: boolean }) => {
tooltip={{ content: { side: 'bottom', text: 'Auto-enable RLS for new tables' } }}
/>
) : (
- <Button variant="primary">Learn more</Button>
+ <Button variant="default">Set up trigger</Button>
)}
</DialogTrigger>
<DialogContent size="large">
<DialogHeader>
- <DialogTitle>Automatically enable RLS for newly created tables</DialogTitle>
- <DialogDescription>Secure your data using Postgres Row Level Security</DialogDescription>
+ <DialogTitle>Automatically enable RLS for new tables</DialogTitle>
+ <DialogDescription>
+ Protect future tables with a built-in database trigger.
+ </DialogDescription>
</DialogHeader>
<DialogSectionSeparator />
<DialogSection className="text-sm flex flex-col gap-y-2">
<p>
- Tables in exposed schemas (default being the{' '}
- <code className="text-code-inline">public</code> schema) are accessible to anyone.
- Hence, we highly recommend enabling RLS on all such tables.
+ Tables in exposed schemas such as <code className="text-code-inline">public</code> are
+ reachable through your project’s API. Enable Row Level Security (RLS) on these tables so
+ access is governed by the policies you define, not just the project API key.
</p>
<p>
- You can set up a database trigger to enable RLS automatically on all new tables with the
- following SQL:
+ This trigger automatically enables RLS whenever a new table is created. Review the SQL
+ before creating it:
</p>
</DialogSection>
- <CodeBlock language="sql" className="language-sql px-0 border-x-0 rounded-none h-64">
+ <CodeBlock
+ language="sql"
+ className="language-sql px-0 border-x-0 border-b-0 rounded-none h-64"
+ >
{AUTO_ENABLE_RLS_EVENT_TRIGGER_SQL.trim()}
</CodeBlock>
<DialogFooter>
<Button variant="default" disabled={isCreating} onClick={() => setOpen(false)}>
- Close
+ Cancel
</Button>
<ButtonTooltip
disabled={!canCreateTriggers}
@@ -175,7 +172,7 @@ const CreateEnsureRLSTriggerDialog = ({ iconOnly }: { iconOnly?: boolean }) => {
},
}}
>
- Create ensure_rls trigger
+ Create trigger
</ButtonTooltip>
</DialogFooter>
</DialogContent>
diff --git a/apps/studio/components/ui/Charts/ChartHandler.tsx b/apps/studio/components/ui/Charts/ChartHandler.tsx
deleted file mode 100644
index 52b5921ab47..00000000000
--- a/apps/studio/components/ui/Charts/ChartHandler.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import dayjs from 'dayjs'
-import { Activity, BarChartIcon, Loader2 } from 'lucide-react'
-import { useRouter } from 'next/router'
-import { PropsWithChildren, useMemo, useState } from 'react'
-import { Button, Tooltip, TooltipContent, TooltipTrigger, WarningIcon } from 'ui'
-
-import type { ChartData } from './Charts.types'
-import AreaChart from '@/components/ui/Charts/AreaChart'
-import BarChart from '@/components/ui/Charts/BarChart'
-import { AnalyticsInterval } from '@/data/analytics/constants'
-import { mapMultiResponseToAnalyticsData } from '@/data/analytics/infra-monitoring-queries'
-import {
- InfraMonitoringAttribute,
- useInfraMonitoringAttributesQuery,
-} from '@/data/analytics/infra-monitoring-query'
-import {
- ProjectDailyStatsAttribute,
- useProjectDailyStatsQuery,
-} from '@/data/analytics/project-daily-stats-query'
-import { useDatabaseSelectorStateSnapshot } from '@/state/database-selector'
-
-interface ChartHandlerProps {
- id?: string
- label: string
- attribute: string
- provider: 'infra-monitoring' | 'daily-stats'
- startDate: string
- endDate: string
- interval: string
- customDateFormat?: string
- defaultChartStyle?: 'bar' | 'line'
- hideChartType?: boolean
- data?: ChartData
- isLoading?: boolean
- format?: string
- highlightedValue?: string | number
- syncId?: string
-}
-
-/**
- * Controls chart display state. Optionally fetches static chart data if data is not provided.
- *
- * If the `data` prop is provided, it will disable automatic chart data fetching and pass the data directly to the chart render.
- * - loading state can also be provided through the `isLoading` prop, to display loading placeholders. Ignored if `data` key not provided.
- * - if `isLoading=true` and `data` is `undefined`, loading error message will be shown.
- *
- * Provided data must be in the expected chart format.
- */
-const ChartHandler = ({
- label,
- attribute,
- provider,
- startDate,
- endDate,
- interval,
- customDateFormat,
- children = null,
- defaultChartStyle = 'bar',
- hideChartType = false,
- data,
- isLoading,
- format,
- highlightedValue,
- syncId,
- ...otherProps
-}: PropsWithChildren<ChartHandlerProps>) => {
- const router = useRouter()
- const { ref } = router.query
-
- const state = useDatabaseSelectorStateSnapshot()
- const [chartStyle, setChartStyle] = useState<string>(defaultChartStyle)
-
- const databaseIdentifier = state.selectedDatabaseId
-
- const { data: dailyStatsData, isPending: isFetchingDailyStats } = useProjectDailyStatsQuery(
- {
- projectRef: ref as string,
- attribute: attribute as ProjectDailyStatsAttribute,
- startDate: dayjs(startDate).format('YYYY-MM-DD'),
- endDate: dayjs(endDate).format('YYYY-MM-DD'),
- },
- { enabled: provider === 'daily-stats' && data === undefined }
- )
-
- const { data: infraMonitoringData, isPending: isFetchingInfraMonitoring } =
- useInfraMonitoringAttributesQuery(
- {
- projectRef: ref as string,
- attributes: [attribute as InfraMonitoringAttribute],
- startDate,
- endDate,
- interval: interval as AnalyticsInterval,
- databaseIdentifier,
- },
- { enabled: provider === 'infra-monitoring' && data === undefined }
- )
-
- const transformedInfraData = useMemo(() => {
- if (!infraMonitoringData) return undefined
- const mapped = mapMultiResponseToAnalyticsData(infraMonitoringData, [
- attribute as InfraMonitoringAttribute,
- ])
- return mapped[attribute]
- }, [infraMonitoringData, attribute])
-
- const chartData =
- data ||
- (provider === 'infra-monitoring'
- ? transformedInfraData
- : provider === 'daily-stats'
- ? dailyStatsData
- : undefined)
-
- const loading =
- isLoading ||
- (provider === 'infra-monitoring'
- ? isFetchingInfraMonitoring
- : provider === 'daily-stats'
- ? isFetchingDailyStats
- : isLoading)
-
- const shouldHighlightMaxValue =
- provider === 'daily-stats' &&
- !attribute.includes('ingress') &&
- !attribute.includes('egress') &&
- chartData !== undefined &&
- 'maximum' in chartData
- const shouldHighlightTotalGroupedValue = chartData !== undefined && 'totalGrouped' in chartData
-
- const _highlightedValue =
- highlightedValue !== undefined
- ? highlightedValue
- : shouldHighlightMaxValue
- ? chartData?.maximum
- : provider === 'daily-stats'
- ? chartData?.total
- : shouldHighlightTotalGroupedValue
- ? chartData?.totalGrouped?.[attribute]
- : (chartData?.data[chartData?.data.length - 1] as any)?.[attribute as any]
-
- if (loading) {
- return (
- <div className="flex h-52 w-full flex-col items-center justify-center gap-y-2">
- <Loader2 size={18} className="animate-spin text-border-strong" />
- <p className="text-xs text-foreground-lighter">Loading data for {label}</p>
- </div>
- )
- }
-
- if (chartData === undefined) {
- return (
- <div className="flex h-64 w-full flex-col items-center justify-center gap-y-2 border border-dashed rounded-md">
- <WarningIcon />
- <p className="text-xs text-foreground-lighter">Unable to load data for {label}</p>
- </div>
- )
- }
-
- return (
- <div className="h-full w-full">
- <div className="absolute right-6 z-10 flex justify-between">
- {!hideChartType && (
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- variant="default"
- className="px-1.5"
- icon={chartStyle === 'bar' ? <Activity /> : <BarChartIcon />}
- onClick={() => setChartStyle(chartStyle === 'bar' ? 'line' : 'bar')}
- />
- </TooltipTrigger>
- <TooltipContent side="left" align="center">
- View as {chartStyle === 'bar' ? 'line chart' : 'bar chart'}
- </TooltipContent>
- </Tooltip>
- )}
- {children}
- </div>
- {chartStyle === 'bar' ? (
- <BarChart
- data={(chartData?.data ?? []) as any}
- format={format || chartData?.format}
- xAxisKey={'period_start'}
- yAxisKey={attribute}
- highlightedValue={_highlightedValue}
- title={label}
- customDateFormat={customDateFormat}
- syncId={syncId}
- {...otherProps}
- />
- ) : (
- <AreaChart
- data={(chartData?.data ?? []) as any}
- format={format || chartData?.format}
- xAxisKey="period_start"
- yAxisKey={attribute}
- highlightedValue={_highlightedValue}
- title={label}
- customDateFormat={customDateFormat}
- syncId={syncId}
- {...otherProps}
- />
- )}
- </div>
- )
-}
-
-export default ChartHandler
diff --git a/apps/studio/components/ui/Charts/Charts.constants.ts b/apps/studio/components/ui/Charts/Charts.constants.ts
index 4ec14cdd103..53441ca068c 100644
--- a/apps/studio/components/ui/Charts/Charts.constants.ts
+++ b/apps/studio/components/ui/Charts/Charts.constants.ts
@@ -3,14 +3,14 @@
// For ChartHandler
export const CHART_COLORS = {
- TICK: 'hsl(var(--background-overlay-hover))',
- AXIS: 'hsl(var(--background-overlay-hover))',
- GREEN_1: 'hsl(var(--brand-default))', // #3ECF8E
+ TICK: 'var(--background-overlay-hover)',
+ AXIS: 'var(--background-overlay-hover)',
+ GREEN_1: 'hsl(var(--brand-default))',
GREEN_2: 'hsl(var(--brand-500))',
RED_1: 'hsl(var(--destructive-default))',
RED_2: 'hsl(var(--destructive-500))',
- REFERENCE_LINE: 'hsl(var(--foreground-muted))',
- REFERENCE_LINE_TEXT: 'hsl(var(--foreground-muted))',
+ REFERENCE_LINE: 'var(--foreground-muted)',
+ REFERENCE_LINE_TEXT: 'var(--foreground-muted)',
}
const LIGHT_STACKED_CHART_COLORS = [
diff --git a/apps/studio/components/ui/Charts/ReportSettings.tsx b/apps/studio/components/ui/Charts/ReportSettings.tsx
index 2b1299c1b92..17248926ddf 100644
--- a/apps/studio/components/ui/Charts/ReportSettings.tsx
+++ b/apps/studio/components/ui/Charts/ReportSettings.tsx
@@ -1,6 +1,6 @@
import { Settings } from 'lucide-react'
import { useState } from 'react'
-import { cn, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Label, Switch } from 'ui'
+import { Label, Popover, PopoverContent, PopoverTrigger, Switch } from 'ui'
import { useChartHoverState } from './useChartHoverState'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -14,46 +14,43 @@ export const ReportSettings = ({ chartId }: ReportSettingsProps) => {
const { syncHover, syncTooltip, setSyncHover, setSyncTooltip } = useChartHoverState(chartId)
return (
- <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
- <DropdownMenuTrigger asChild>
+ <Popover open={isOpen} onOpenChange={setIsOpen}>
+ <PopoverTrigger asChild>
<ButtonTooltip
variant="default"
icon={<Settings />}
className="w-7"
tooltip={{ content: { side: 'bottom', text: 'Report settings' } }}
/>
- </DropdownMenuTrigger>
- <DropdownMenuContent align="start" side="bottom" className="w-64 p-3">
- <div className="space-y-4">
- <Label htmlFor="sync-hover" className="text-sm font-normal">
- <div className="flex items-center justify-between space-x-2">
- Sync chart headers
- <Switch id="sync-hover" checked={syncHover} onCheckedChange={setSyncHover} />
- </div>
- <p className="text-xs text-foreground-light mt-1">
- When enabled, hovering over any chart will update headers across all charts
- </p>
- </Label>
-
- <Label htmlFor="sync-tooltips" className="text-sm font-normal flex flex-col">
- <div className="flex items-center justify-between space-x-2">
- Sync tooltips
- <Switch
- id="sync-tooltips"
- checked={syncTooltip}
- disabled={!syncHover}
- onCheckedChange={setSyncTooltip}
- />
- </div>
- <p className="text-xs text-foreground-light mt-1">
- When enabled, also shows tooltips on all charts.{' '}
- <span className={cn(syncHover ? 'text-foreground-light' : 'text-foreground')}>
- Requires header sync.
- </span>
+ </PopoverTrigger>
+ <PopoverContent align="center" side="bottom" className="w-64 p-3 flex flex-col gap-y-4">
+ <div className="flex items-start justify-between space-x-2">
+ <Label htmlFor="sync-hover" className="text-xs">
+ <p>Sync chart headers</p>
+ <p className="text-xs text-foreground-light mt-1 text-balance">
+ Hovering over any chart will update headers across all charts
</p>
</Label>
+ <Switch id="sync-hover" checked={syncHover} onCheckedChange={setSyncHover} />
</div>
- </DropdownMenuContent>
- </DropdownMenu>
+
+ {syncHover && (
+ <div className="flex items-start justify-between space-x-2">
+ <Label htmlFor="sync-tooltips" className="text-xs">
+ <p>Sync tooltips</p>
+ <p className="text-xs text-foreground-light mt-1 text-balance">
+ Shows tooltips on all charts
+ </p>
+ </Label>
+ <Switch
+ id="sync-tooltips"
+ checked={syncTooltip}
+ disabled={!syncHover}
+ onCheckedChange={setSyncTooltip}
+ />
+ </div>
+ )}
+ </PopoverContent>
+ </Popover>
)
}
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx
new file mode 100644
index 00000000000..d4f6d10fea7
--- /dev/null
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.test.tsx
@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+import { CodeEditor } from './CodeEditor'
+import { render } from '@/tests/helpers'
+
+/**
+ * CodeEditor applies a default `h-full` so editors with no explicit height fill their container
+ * (GraphiQL, etc.). Callers that DO set a height (e.g. the email template editor's `h-96`) must
+ * win — otherwise the editor collapses to a single line.
+ *
+ * This regressed once already: #47339 appended the default as `cn(className, 'monaco-editor',
+ * 'h-full')`, and tailwind-merge keeps the *last* conflicting height utility, so the trailing
+ * `h-full` clobbered caller heights. #47350 fixed it by passing `className` last. These tests
+ * lock that ordering in.
+ *
+ * The `<div className={...}>` that receives the class is rendered by @monaco-editor/react before
+ * Monaco loads, so it's present in jsdom without a working editor.
+ */
+describe('CodeEditor height class precedence', () => {
+ const getEditorEl = (container: HTMLElement) => container.querySelector('.monaco-editor')
+
+ it('lets a caller-supplied height win over the default h-full (regression #47350)', () => {
+ const { container } = render(<CodeEditor language="pgsql" className="h-96" />)
+
+ const editor = getEditorEl(container)
+ expect(editor, 'editor wrapper should render').toBeTruthy()
+ expect(editor).toHaveClass('h-96')
+ expect(editor, 'default h-full must not override the caller height').not.toHaveClass('h-full')
+ })
+
+ it('falls back to the default h-full when the caller sets no height', () => {
+ const { container } = render(<CodeEditor language="pgsql" />)
+
+ const editor = getEditorEl(container)
+ expect(editor, 'editor wrapper should render').toBeTruthy()
+ expect(editor).toHaveClass('h-full')
+ })
+})
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
index c9d5f4d2f9f..f912bdf6e49 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.tsx
@@ -1,11 +1,12 @@
import Editor, { EditorProps, Monaco, OnChange, OnMount, useMonaco } from '@monaco-editor/react'
import { merge, noop } from 'lodash'
+import { Loader2 } from 'lucide-react'
import type { editor } from 'monaco-editor'
import { RefObject, useEffect, useRef, useState } from 'react'
-import { cn, LogoLoader } from 'ui'
+import { cn } from 'ui'
import { useSetCommandMenuOpen } from 'ui-patterns/CommandMenu'
-import { alignEditor } from './CodeEditor.utils'
+import { alignEditor, BASE_MONACO_EDITOR_OPTIONS } from './CodeEditor.utils'
import { Markdown } from '@/components/interfaces/Markdown'
import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
@@ -21,14 +22,26 @@ const DEFAULT_ACTIONS = {
placeholderFill: { enabled: true },
}
+export type ValidLanguages =
+ | 'pgsql'
+ | 'json'
+ | 'html'
+ | 'typescript'
+ | 'javascript'
+ | 'css'
+ | 'csv'
+ | 'plaintext'
+ | 'markdown'
+
interface CodeEditorProps {
id?: string
- language: 'pgsql' | 'json' | 'html' | 'typescript' | 'plaintext' | undefined
+ language: ValidLanguages
autofocus?: boolean
defaultValue?: string
isReadOnly?: boolean
hideLineNumbers?: boolean
className?: string
+ wrapperClassName?: string
loading?: boolean
options?: EditorProps['options']
value?: string
@@ -57,6 +70,7 @@ export const CodeEditor = ({
isReadOnly = false,
hideLineNumbers = false,
className,
+ wrapperClassName,
loading,
options,
value,
@@ -95,18 +109,13 @@ export const CodeEditor = ({
const optionsMerged = merge(
{
- tabSize: 2,
- fontSize: 13,
+ ...BASE_MONACO_EDITOR_OPTIONS,
+ domReadOnly: isReadOnly,
readOnly: isReadOnly,
- minimap: { enabled: false },
- wordWrap: 'on',
- fixedOverflowWidgets: true,
- contextmenu: true,
lineNumbers: hideLineNumbers ? 'off' : undefined,
glyphMargin: hideLineNumbers ? false : undefined,
lineNumbersMinChars: hideLineNumbers ? 0 : 4,
folding: hideLineNumbers ? false : undefined,
- scrollBeyondLastLine: false,
},
options
)
@@ -245,11 +254,18 @@ export const CodeEditor = ({
<Editor
path={id}
theme="supabase"
- className={cn(className, 'monaco-editor')}
+ // `h-full` keeps this wrapper filling its container even if a global `.monaco-editor`
+ // rule flips it to `position: absolute` (which happens after visiting GraphiQL, since it
+ // injects a second copy of Monaco's CSS onto the shared instance). Without an explicit
+ // height, an absolutely-positioned wrapper collapses to 0 and Monaco lays out at ~5px.
+ // Order matters: `h-full` is a default, so a caller-supplied height in `className`
+ // (e.g. `h-96`) wins via tailwind-merge instead of being clobbered.
+ className={cn('monaco-editor', 'h-full', className)}
+ wrapperProps={{ className: wrapperClassName }}
value={value ?? undefined}
language={language}
defaultValue={defaultValue ?? undefined}
- loading={loading || <LogoLoader />}
+ loading={loading || <Loader2 className="animate-spin" strokeWidth={2} size={20} />}
options={optionsMerged}
onMount={handleMount}
onChange={onChangeContent}
diff --git a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
index 5540d9d1456..a33b18bf56e 100644
--- a/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
+++ b/apps/studio/components/ui/CodeEditor/CodeEditor.utils.ts
@@ -1,6 +1,26 @@
-export const alignEditor = (editor: any) => {
+import type { editor } from 'monaco-editor'
+
+/**
+ * Base Monaco editor options shared across Studio's editors so font size, indentation and
+ * chrome stay consistent everywhere a Monaco editor is rendered. CodeEditor layers per-instance
+ * options (read-only, line numbers) on top; GraphiQL (which runs its own Monaco instance) layers
+ * its own padding/glyphMargin on top via `editor.updateOptions`.
+ *
+ * Keep this as the single source of truth — don't redeclare these values at call sites.
+ */
+export const BASE_MONACO_EDITOR_OPTIONS: editor.IStandaloneEditorConstructionOptions = {
+ tabSize: 2,
+ fontSize: 13,
+ minimap: { enabled: false },
+ wordWrap: 'on',
+ fixedOverflowWidgets: true,
+ contextmenu: true,
+ scrollBeyondLastLine: false,
+}
+
+export const alignEditor = (editor: editor.IStandaloneCodeEditor) => {
// Add margin above first line
- editor.changeViewZones((accessor: any) => {
+ editor.changeViewZones((accessor) => {
accessor.addZone({
afterLineNumber: 0,
heightInPx: 4,
diff --git a/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx b/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx
index 487d36c618e..dc91a0ebc9a 100644
--- a/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx
+++ b/apps/studio/components/ui/CountdownTimer/CountdownTimerRadial.tsx
@@ -35,7 +35,7 @@ const CountdownTimerRadial = ({ progress }: CountdownTimerRadialProps) => {
className="first:fill-foreground-muted/50 last:fill-background-200"
polarRadius={[16, 11]}
/>
- <RadialBar dataKey="timeRemaining" cornerRadius={2} />
+ <RadialBar dataKey="timeRemaining" cornerRadius={2} isAnimationActive={false} />
</RadialBarChart>
</ChartContainer>
@@ -48,7 +48,7 @@ const CountdownTimerRadial = ({ progress }: CountdownTimerRadialProps) => {
innerRadius={14}
outerRadius={5}
>
- <RadialBar dataKey="hand" cornerRadius={2} isAnimationActive={true} />
+ <RadialBar dataKey="hand" cornerRadius={2} isAnimationActive={false} />
</RadialBarChart>
</ChartContainer>
</div>
diff --git a/apps/studio/components/ui/DataTable/DataTable.types.ts b/apps/studio/components/ui/DataTable/DataTable.types.ts
index cb500d6aedb..ac3fd3937cb 100644
--- a/apps/studio/components/ui/DataTable/DataTable.types.ts
+++ b/apps/studio/components/ui/DataTable/DataTable.types.ts
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react'
export type Option = {
label: string
value: string
+ options?: Option[]
}
export type DatePreset = {
diff --git a/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnHeader.tsx b/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnHeader.tsx
deleted file mode 100644
index ee6f6127aec..00000000000
--- a/apps/studio/components/ui/DataTable/DataTableColumn/DataTableColumnHeader.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type Column } from '@tanstack/react-table'
-import { TanStackTableHeadSort } from 'ui-patterns/Table'
-
-interface DataTableColumnHeaderProps<TData, TValue> {
- column: Column<TData, TValue>
- title: string
- className?: string
-}
-
-/**
- * @deprecated Use `TanStackTableHeadSort` from `ui-patterns/Table` instead.
- */
-export const DataTableColumnHeader = <TData, TValue>({
- column,
- title,
- className,
-}: DataTableColumnHeaderProps<TData, TValue>) => {
- return (
- <TanStackTableHeadSort column={column} className={className}>
- {title}
- </TanStackTableHeadSort>
- )
-}
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
index 4905fae0397..69bf1912450 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx
@@ -1,4 +1,5 @@
-import { Search } from 'lucide-react'
+import { Minus, Plus, Search } from 'lucide-react'
+import { useQueryStates } from 'nuqs'
import { useState } from 'react'
import { Checkbox, cn, Label, Skeleton } from 'ui'
@@ -7,6 +8,7 @@ import { formatCompactNumber } from '../DataTable.utils'
import { InputWithAddons } from '../primitives/InputWithAddons'
import { useDataTable } from '../providers/DataTableProvider'
import { DataTableFilterCheckboxLoader } from './DataTableFilterCheckboxLoader'
+import { SEARCH_PARAMS_PARSER } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.constants'
export function DataTableFilterCheckbox<TData>({
value: _value,
@@ -15,6 +17,22 @@ export function DataTableFilterCheckbox<TData>({
}: DataTableCheckboxFilterField<TData>) {
const value = _value as string
const [inputValue, setInputValue] = useState('')
+ const [expandedOptions, setExpandedOptions] = useState<Set<string>>(new Set())
+ const [searchParams, setSearchParams] = useQueryStates(SEARCH_PARAMS_PARSER)
+
+ // Nested options map 1:1 to a boolean search param via their `value`
+ // (e.g. `show_connection_logs`), so they can be read/written generically.
+ const getBooleanParam = (key: string) => Boolean(searchParams[key as keyof typeof searchParams])
+ const setBooleanParam = (key: string, val: boolean) =>
+ setSearchParams({ [key]: val } as Partial<typeof searchParams>)
+
+ const toggleExpanded = (key: string) =>
+ setExpandedOptions((prev) => {
+ const next = new Set(prev)
+ if (next.has(key)) next.delete(key)
+ else next.add(key)
+ return next
+ })
const { table, columnFilters, isLoading, isLoadingCounts, getFacetedUniqueValues } =
useDataTable()
@@ -56,8 +74,7 @@ export function DataTableFilterCheckbox<TData>({
onChange={(e) => setInputValue(e.target.value)}
/>
) : null}
- {/* FIXME: due to the added max-h and overflow-y-auto, the hover state and border is laying on top of the scroll bar */}
- <div className="max-h-[200px] overflow-y-auto rounded-sm border border-border empty:border-none">
+ <div className="max-h-[215px] overflow-y-auto rounded-sm border border-border empty:border-none">
{filterOptions.length === 0 && inputValue !== '' ? (
<div className="flex items-center justify-center px-2 py-4 text-center">
<div className="space-y-0.5">
@@ -66,18 +83,20 @@ export function DataTableFilterCheckbox<TData>({
</div>
</div>
) : (
- filterOptions
- // TODO: we shoudn't sort the options here, instead filterOptions should be sorted by default
- // .sort((a, b) => a.label.localeCompare(b.label))
- .map((option, index) => {
- const checked = filters.includes(option.value)
+ filterOptions.map((option, index) => {
+ const checked = filters.includes(option.value)
+ const optionKey = String(option.value)
+ const hasNested = (option.options ?? []).length > 0
+ const isExpanded = expandedOptions.has(optionKey)
- return (
+ return (
+ <div
+ key={String(option.value)}
+ className={cn('py-2', index !== filterOptions.length - 1 ? 'border-b' : undefined)}
+ >
<div
- key={String(option.value)}
className={cn(
- 'group relative flex items-center space-x-2 px-2 py-2 hover:bg-accent/50',
- index !== filterOptions.length - 1 ? 'border-b' : undefined
+ 'group relative flex items-center space-x-2 px-2 hover:bg-accent/50'
)}
>
<Checkbox
@@ -92,7 +111,7 @@ export function DataTableFilterCheckbox<TData>({
/>
<Label
htmlFor={`${value}-${option.value}`}
- className="flex w-full items-center justify-between gap-2 text-foreground/70 group-hover:text-accent-foreground text-[0.8rem] min-w-0"
+ className="relative flex w-full items-center justify-between gap-2 text-foreground/70 group-hover:text-accent-foreground text-[0.8rem] min-w-0"
>
<div className="flex-1 min-w-0 overflow-hidden">
{Component ? (
@@ -101,6 +120,21 @@ export function DataTableFilterCheckbox<TData>({
<span className="truncate font-normal block">{option.label}</span>
)}
</div>
+ {hasNested && (
+ <button
+ type="button"
+ aria-label={isExpanded ? 'Collapse' : 'Expand'}
+ aria-expanded={isExpanded}
+ onClick={() => toggleExpanded(optionKey)}
+ className={cn(
+ 'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-foreground-lighter',
+ 'hover:bg-selection hover:text-foreground',
+ 'absolute top-0 right-10'
+ )}
+ >
+ {isExpanded ? <Minus size={12} /> : <Plus size={12} />}
+ </button>
+ )}
<span className="shrink-0 flex items-center justify-center font-mono text-xs">
{isLoadingCounts ? (
<Skeleton className="h-4 w-4" />
@@ -114,16 +148,65 @@ export function DataTableFilterCheckbox<TData>({
type="button"
onClick={() => column?.setFilterValue([option.value])}
className={cn(
- 'absolute inset-y-0 right-0 hidden font-normal text-muted-foreground backdrop-blur-xs hover:text-foreground group-hover:block',
+ 'absolute inset-y-0 right-0 -top-0.5 hidden font-normal text-muted-foreground backdrop-blur-xs hover:text-foreground group-hover:block',
'rounded-md ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2'
)}
>
- <span className="px-2">only</span>
+ <span className="pr-2">only</span>
</button>
</Label>
</div>
- )
- })
+
+ {hasNested &&
+ isExpanded &&
+ option.options?.map((optionNested, nestedIndex) => {
+ const nestedChecked = getBooleanParam(optionNested.value)
+ const isLastNested = nestedIndex === (option.options?.length ?? 0) - 1
+
+ return (
+ <div
+ key={optionNested.value}
+ className={cn(
+ 'group/nested relative flex items-stretch',
+ nestedIndex === 0 && '[&>div:last-child]:pt-2'
+ )}
+ >
+ <div aria-hidden className="relative w-7 shrink-0">
+ {isLastNested ? (
+ <span
+ className={cn(
+ 'absolute left-4 top-0 w-3 rounded-bl-sm border-b border-l border-border',
+ option.options?.length === 1 ? 'h-[60%]' : 'h-1/2'
+ )}
+ />
+ ) : (
+ <>
+ <span className="absolute left-4 top-0 h-full w-px bg-border" />
+ <span className="absolute left-4 top-[55%] h-px w-3 bg-border" />
+ </>
+ )}
+ </div>
+ <div className="flex flex-1 items-center gap-x-2 rounded-sm py-1 pr-2 hover:bg-accent/50 min-w-0">
+ <Checkbox
+ id={`${value}-${optionNested.value}`}
+ checked={nestedChecked}
+ onCheckedChange={(isChecked) =>
+ setBooleanParam(optionNested.value, Boolean(isChecked))
+ }
+ />
+ <Label
+ htmlFor={`${value}-${optionNested.value}`}
+ className="flex w-full cursor-pointer items-center text-[0.8rem] font-normal text-foreground/70 group-hover/nested:text-accent-foreground min-w-0"
+ >
+ <span className="truncate text-xs">{optionNested.label}</span>
+ </Label>
+ </div>
+ </div>
+ )
+ })}
+ </div>
+ )
+ })
)}
</div>
</div>
diff --git a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
index 676abf9b672..57b1f166306 100644
--- a/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx
@@ -66,7 +66,7 @@ export function DataTableFilterCheckboxAsync<TData>({
onChange={(e) => setInputValue(e.target.value)}
/>
- <div className="max-h-[200px] overflow-y-auto rounded-sm border border-border empty:border-none">
+ <div className="max-h-[215px] overflow-y-auto rounded-sm border border-border empty:border-none">
{filterOptions.length === 0 ? (
<div className="flex items-center justify-center px-2 py-3 text-center">
<div className="space-y-0.5">
diff --git a/apps/studio/components/ui/DataTable/DataTableHeaderLayout.tsx b/apps/studio/components/ui/DataTable/DataTableHeaderLayout.tsx
deleted file mode 100644
index 3a7f19778b9..00000000000
--- a/apps/studio/components/ui/DataTable/DataTableHeaderLayout.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { forwardRef, PropsWithChildren, useEffect, useRef } from 'react'
-import { cn } from 'ui'
-
-export const DataTableHeaderLayout = forwardRef<
- HTMLDivElement,
- PropsWithChildren<{
- setTopBarHeight: (height: number) => void
- }>
->(({ setTopBarHeight, ...props }, _ref) => {
- const topBarRef = useRef<HTMLDivElement>(null)
-
- useEffect(() => {
- const observer = new ResizeObserver(() => {
- const rect = topBarRef.current?.getBoundingClientRect()
- if (rect) {
- setTopBarHeight(rect.height)
- }
- })
-
- const topBar = topBarRef.current
- if (!topBar) return
-
- observer.observe(topBar)
- return () => observer.unobserve(topBar)
- }, [topBarRef])
-
- return (
- <div
- ref={topBarRef}
- className={cn('flex flex-col gap-4 bg-background p-2', 'top-0 z-10 pb-4')}
- {...props}
- />
- )
-})
-DataTableHeaderLayout.displayName = 'DataTableHeaderLayout'
diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
index 8ca89276707..a29ac3b1c6c 100644
--- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
@@ -5,7 +5,7 @@ import { LoaderCircle } from 'lucide-react'
import { useQueryState } from 'nuqs'
import { Fragment, UIEvent, useCallback, useRef } from 'react'
import { Button, cn, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { AlertError } from '../AlertError'
import { formatCompactNumber } from './DataTable.utils'
diff --git a/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx b/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx
deleted file mode 100644
index cee10d24cd9..00000000000
--- a/apps/studio/components/ui/DataTable/DataTableSheetDetails.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { ChevronDown, ChevronUp, X } from 'lucide-react'
-import { ReactNode, useCallback, useEffect, useMemo } from 'react'
-import { Button, cn, Separator, Skeleton, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-
-import { Kbd } from './primitives/Kbd'
-import { useDataTable } from './providers/DataTableProvider'
-
-export interface DataTableSheetDetailsProps {
- title?: ReactNode
- titleClassName?: string
- children?: ReactNode
-}
-
-export function DataTableSheetDetails({
- title,
- titleClassName,
- children,
-}: DataTableSheetDetailsProps) {
- const { table, rowSelection, isLoading } = useDataTable()
-
- const selectedRowKey = Object.keys(rowSelection)?.[0]
-
- const selectedRow = useMemo(() => {
- if (isLoading && !selectedRowKey) return
- return table.getRowModel().rows.find((row) => row.id === selectedRowKey)
- }, [selectedRowKey, isLoading, table])
-
- const index = table.getRowModel().rows.findIndex((row) => row.id === selectedRow?.id)
-
- const nextId = useMemo(() => table.getRowModel().rows[index + 1]?.id, [index, table])
-
- const prevId = useMemo(() => table.getRowModel().rows[index - 1]?.id, [index, table])
-
- const onPrev = useCallback(() => {
- if (prevId) table.setRowSelection({ [prevId]: true })
- }, [prevId, table])
-
- const onNext = useCallback(() => {
- if (nextId) table.setRowSelection({ [nextId]: true })
- }, [nextId, table])
-
- useEffect(() => {
- const down = (e: KeyboardEvent) => {
- if (!selectedRowKey) return
-
- // REMINDER: prevent dropdown navigation inside of sheet to change row selection
- const activeElement = document.activeElement
- const isMenuActive = activeElement?.closest('[role="menu"]')
-
- if (isMenuActive) return
-
- if (e.key === 'ArrowUp') {
- e.preventDefault()
- onPrev()
- }
- if (e.key === 'ArrowDown') {
- e.preventDefault()
- onNext()
- }
- }
-
- document.addEventListener('keydown', down)
- return () => document.removeEventListener('keydown', down)
- }, [selectedRowKey, onNext, onPrev])
-
- return (
- <div className="relative bg-sidebar">
- <div className="flex items-center justify-between gap-2 pl-5 pr-2 py-1">
- <h5 className={cn(titleClassName, 'truncate text-left')}>
- {isLoading && !selectedRowKey ? <Skeleton className="h-7 w-36" /> : title}
- </h5>
- <div className="flex h-7 items-center gap-1">
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- size="tiny"
- variant="text"
- disabled={!prevId}
- onClick={onPrev}
- className="px-1"
- icon={<ChevronUp />}
- />
- </TooltipTrigger>
- <TooltipContent>
- <p>
- Navigate <Kbd>↑</Kbd>
- </p>
- </TooltipContent>
- </Tooltip>
-
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- size="tiny"
- variant="text"
- disabled={!nextId}
- onClick={onNext}
- className="px-1"
- icon={<ChevronDown />}
- />
- </TooltipTrigger>
- <TooltipContent>
- <p>
- Navigate <Kbd>↓</Kbd>
- </p>
- </TooltipContent>
- </Tooltip>
- <Separator orientation="vertical" className="mx-1" />
-
- <Button
- size="tiny"
- variant="text"
- onClick={() => table.resetRowSelection()}
- className="px-1"
- icon={<X />}
- />
- </div>
- </div>
- <Separator />
- {children}
- </div>
- )
-}
diff --git a/apps/studio/components/ui/DataTable/DataTableToolbar.tsx b/apps/studio/components/ui/DataTable/DataTableToolbar.tsx
deleted file mode 100644
index 7deab48fb3b..00000000000
--- a/apps/studio/components/ui/DataTable/DataTableToolbar.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { PanelLeftClose, PanelLeftOpen } from 'lucide-react'
-import { ReactNode, useMemo } from 'react'
-import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
-
-import { formatCompactNumber } from './DataTable.utils'
-import { DataTableFilterControlsDrawer } from './DataTableFilters/DataTableFilterControlsDrawer'
-import { DataTableResetButton } from './DataTableResetButton'
-import { DataTableViewOptions } from './DataTableViewOptions'
-import { Kbd } from './primitives/Kbd'
-import { useDataTable } from './providers/DataTableProvider'
-import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
-import { useShortcut } from '@/state/shortcuts/useShortcut'
-
-interface DataTableToolbarProps {
- renderActions?: () => ReactNode
- isFilterBarOpen: boolean
- setIsFilterBarOpen: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export function DataTableToolbar({
- renderActions,
- isFilterBarOpen,
- setIsFilterBarOpen,
-}: DataTableToolbarProps) {
- const { table, isLoading, columnFilters } = useDataTable()
- const filters = table.getState().columnFilters
-
- useShortcut(SHORTCUT_IDS.DATA_TABLE_TOGGLE_FILTERS, () => setIsFilterBarOpen((prev) => !prev))
-
- const rows = useMemo(
- () => ({
- total: table.getCoreRowModel().rows.length,
- filtered: table.getFilteredRowModel().rows.length,
- }),
- [isLoading, columnFilters]
- )
-
- return (
- <div className="flex flex-wrap items-center justify-between gap-4">
- <div className="flex flex-wrap items-center gap-2">
- <Tooltip>
- <TooltipTrigger asChild>
- <Button
- size="tiny"
- variant="default"
- icon={isFilterBarOpen ? <PanelLeftClose /> : <PanelLeftOpen />}
- onClick={() => setIsFilterBarOpen((prev) => !prev)}
- className="hidden sm:flex"
- >
- <span className="hidden md:block">{isFilterBarOpen ? 'Hide' : 'Show'} Controls</span>
- </Button>
- </TooltipTrigger>
- <TooltipContent side="right">
- <p>
- Toggle controls with{' '}
- <Kbd className="ml-1 text-muted-foreground group-hover:text-accent-foreground">
- <span className="mr-1">⌘</span>
- <span>B</span>
- </Kbd>
- </p>
- </TooltipContent>
- </Tooltip>
- <div className="block sm:hidden">
- <DataTableFilterControlsDrawer />
- </div>
- <div>
- <p className="hidden text-sm text-muted-foreground sm:block">
- <span className="font-mono font-medium">{formatCompactNumber(rows.filtered)}</span> of{' '}
- <span className="font-mono font-medium">{formatCompactNumber(rows.total)}</span> row(s){' '}
- <span className="sr-only sm:not-sr-only">filtered</span>
- </p>
- <p className="block text-sm text-muted-foreground sm:hidden">
- <span className="font-mono font-medium">{formatCompactNumber(rows.filtered)}</span>{' '}
- row(s)
- </p>
- </div>
- </div>
- <div className="ml-auto flex items-center gap-2">
- {filters.length ? <DataTableResetButton /> : null}
- {renderActions?.()}
- <DataTableViewOptions />
- </div>
- </div>
- )
-}
diff --git a/apps/studio/components/ui/DataTable/FilterSideBar.tsx b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
index afeb19bcd56..71fb110655c 100644
--- a/apps/studio/components/ui/DataTable/FilterSideBar.tsx
+++ b/apps/studio/components/ui/DataTable/FilterSideBar.tsx
@@ -1,7 +1,6 @@
import { useParams } from 'common'
import Link from 'next/link'
-import { useRouter } from 'next/router'
-import React, { useEffect, type ReactNode } from 'react'
+import { cloneElement, Dispatch, SetStateAction, useEffect } from 'react'
import { Badge, Button, cn, ResizablePanel, usePanelRef } from 'ui'
import { FeaturePreviewSidebarPanel } from '../FeaturePreviewSidebarPanel'
@@ -9,34 +8,23 @@ import { DateRangeDisabled } from './DataTable.types'
import { DataTableFilterControls } from './DataTableFilters/DataTableFilterControls'
import { DataTableResetButton } from './DataTableResetButton'
import { useDataTable } from './providers/DataTableProvider'
-import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { LOG_DRAIN_TYPES } from '@/components/interfaces/LogDrains/LogDrains.constants'
import { UnifiedLogsBanner } from '@/components/interfaces/UnifiedLogs/UnifiedLogsBanner'
interface FilterSideBarProps {
isFilterBarOpen: boolean
- setIsFilterBarOpen: React.Dispatch<React.SetStateAction<boolean>>
+ setIsFilterBarOpen: Dispatch<SetStateAction<boolean>>
dateRangeDisabled?: DateRangeDisabled
- afterFilters?: ReactNode
}
export function FilterSideBar({
isFilterBarOpen,
setIsFilterBarOpen,
dateRangeDisabled,
- afterFilters,
}: FilterSideBarProps) {
- const router = useRouter()
const { ref } = useParams()
const { table } = useDataTable()
- const { disable: disableUnifiedLogs, isEligible: isUnifiedLogsEligible } = useUnifiedLogsPreview()
-
- const handleGoBackToOldLogs = () => {
- disableUnifiedLogs()
- router.push(`/project/${ref}/logs/explorer`)
- }
-
const panelRef = usePanelRef()
useEffect(() => {
@@ -68,23 +56,16 @@ export function FilterSideBar({
<div className="flex h-[48px] items-center justify-between gap-3">
<div className="flex items-center gap-2">
<p className="text-foreground text-lg">Logs</p>
- {isUnifiedLogsEligible && <Badge variant="default">Beta</Badge>}
+ <Badge variant="default">Beta</Badge>
</div>
{table.getState().columnFilters.length ? <DataTableResetButton /> : null}
</div>
</div>
- {isUnifiedLogsEligible && (
- <UnifiedLogsBanner
- variant="utility"
- className="mx-4 mt-4"
- onSwitchBack={handleGoBackToOldLogs}
- />
- )}
+ <UnifiedLogsBanner />
<div className="flex-1 p-2 sm:overflow-y-scroll">
<DataTableFilterControls dateRangeDisabled={dateRangeDisabled} />
- {afterFilters}
<FeaturePreviewSidebarPanel
className="mx-2 my-4"
title="Capture your logs"
@@ -93,9 +74,7 @@ export function FilterSideBar({
<div className="flex items-center gap-4">
{LOG_DRAIN_TYPES.filter((t) =>
['datadog', 'sentry', 'webhook', 'loki'].includes(t.value)
- ).map((type) =>
- React.cloneElement(type.icon, { height: 20, width: 20, key: type.value })
- )}
+ ).map((type) => cloneElement(type.icon, { height: 20, width: 20, key: type.value }))}
</div>
}
actions={
diff --git a/apps/studio/components/ui/DataTable/LiveRow.tsx b/apps/studio/components/ui/DataTable/LiveRow.tsx
deleted file mode 100644
index 1b1305dd7ac..00000000000
--- a/apps/studio/components/ui/DataTable/LiveRow.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { TableCell, TableRow } from 'ui'
-
-export function LiveRow({ colSpan }: { colSpan: number }) {
- return (
- <TableRow>
- <TableCell className="relative w-(--header-level-size) min-w-(--header-level-size) max-w-(--header-level-size) border-b border-r border-t border-info">
- <div className="flex items-center justify-center">
- <span className="absolute inline-flex h-2.5 w-2.5 animate-ping rounded-full bg-brand opacity-75"></span>
- <span className="relative inline-flex h-2.5 w-2.5 rounded-full bg-brand"></span>
- </div>
- </TableCell>
- <TableCell colSpan={colSpan} className="border-b border-r border-t text-foreground">
- Live Mode
- </TableCell>
- </TableRow>
- )
-}
diff --git a/apps/studio/components/ui/DateRangePicker.tsx b/apps/studio/components/ui/DateRangePicker.tsx
index 9f981512456..3ed8f71000b 100644
--- a/apps/studio/components/ui/DateRangePicker.tsx
+++ b/apps/studio/components/ui/DateRangePicker.tsx
@@ -251,5 +251,3 @@ export const DateRangePicker = ({
</DropdownMenu>
)
}
-
-export default DateRangePicker
diff --git a/apps/studio/components/ui/DiffEditor.tsx b/apps/studio/components/ui/DiffEditor.tsx
index d348ae2d0f8..a8777fd034d 100644
--- a/apps/studio/components/ui/DiffEditor.tsx
+++ b/apps/studio/components/ui/DiffEditor.tsx
@@ -25,6 +25,7 @@ const DEFAULT_OPTIONS: monacoEditor.IStandaloneDiffEditorConstructionOptions = {
lineNumbersMinChars: 3,
scrollBeyondLastLine: false,
renderSideBySide: false,
+ renderGutterMenu: false,
padding: { top: 4 },
}
diff --git a/apps/studio/components/ui/DocsButton.tsx b/apps/studio/components/ui/DocsButton.tsx
index c4a0df06575..9a3de4e8e9e 100644
--- a/apps/studio/components/ui/DocsButton.tsx
+++ b/apps/studio/components/ui/DocsButton.tsx
@@ -5,9 +5,10 @@ interface DocsButtonProps {
href: string
abbrev?: boolean
className?: string
+ topic?: string
}
-export const DocsButton = ({ href, abbrev = true, className }: DocsButtonProps) => {
+export const DocsButton = ({ href, abbrev = true, className, topic }: DocsButtonProps) => {
return (
<Button
asChild
@@ -16,7 +17,12 @@ export const DocsButton = ({ href, abbrev = true, className }: DocsButtonProps)
icon={<BookOpen />}
onClick={(e) => e.stopPropagation()}
>
- <a target="_blank" rel="noopener noreferrer" href={href}>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ href={href}
+ aria-label={topic ? `${topic} documentation (opens in new tab)` : undefined}
+ >
{abbrev ? 'Docs' : 'Documentation'}
</a>
</Button>
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
index 807557c5f0f..8a557c2b082 100644
--- a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
+++ b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
@@ -50,7 +50,7 @@ import {
suffixWithLimit,
} from '@/components/interfaces/SQLEditor/SQLEditor.utils'
import { useAddDefinitions } from '@/components/interfaces/SQLEditor/useAddDefinitions'
-import Results from '@/components/interfaces/SQLEditor/UtilityPanel/Results'
+import { Results } from '@/components/interfaces/SQLEditor/UtilityPanel/Results'
import { SqlRunButton } from '@/components/interfaces/SQLEditor/UtilityPanel/RunButton'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { useContentIdQuery } from '@/data/content/content-id-query'
@@ -66,7 +66,7 @@ import { editorPanelState, useEditorPanelStateSnapshot } from '@/state/editor-pa
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
export const EditorPanel = () => {
const {
@@ -274,7 +274,7 @@ export const EditorPanel = () => {
}
return (
- <div className="flex h-full flex-col bg-background">
+ <div className="flex h-full flex-col bg-card">
<div className="border-b border-b-muted flex items-center justify-between gap-x-4 pl-4 pr-3 h-(--header-height)">
{isEditingTitle ? (
<input
@@ -482,7 +482,7 @@ export const EditorPanel = () => {
</div>
<div className="flex-1 overflow-hidden flex flex-col h-full">
- <div className="flex-1 min-h-0 relative [&_.monaco-editor]:!bg [&_.monaco-editor_.margin]:!bg [&_.monaco-editor_.monaco-editor-background]:!bg">
+ <div className="flex-1 min-h-0 relative [&_.monaco-editor]:!bg-card [&_.monaco-editor_.margin]:!bg-card [&_.monaco-editor_.monaco-editor-background]:!bg-card">
<AIEditor
autoFocus
language="pgsql"
@@ -507,7 +507,7 @@ export const EditorPanel = () => {
wordWrap: 'on',
lineNumbers: 'on',
folding: false,
- padding: { top: 16 },
+ padding: { top: 12 },
lineNumbersMinChars: 3,
}}
executeQuery={onExecuteSql}
@@ -516,7 +516,6 @@ export const EditorPanel = () => {
openAIAssistantShortcutEnabled={isAIAssistantHotkeyEnabled}
/>
</div>
-
{error !== undefined && (
<div className="shrink-0">
<Admonition
@@ -539,7 +538,6 @@ export const EditorPanel = () => {
/>
</div>
)}
-
{showWarning && (
<SqlWarningAdmonition
className="border-t"
@@ -557,7 +555,6 @@ export const EditorPanel = () => {
}}
/>
)}
-
{results !== undefined && results.length > 0 && (
<div
className={cn(
@@ -593,7 +590,6 @@ export const EditorPanel = () => {
</p>
</div>
)}
-
<div className="relative shrink-0 flex items-center gap-2 justify-end px-5 py-4 w-full border-t">
{(isUpserting || saveStatus !== 'idle') && (
<div
@@ -684,5 +680,3 @@ export const EditorPanel = () => {
</div>
)
}
-
-export default EditorPanel
diff --git a/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
index be3593e61ae..f5e37a2d175 100644
--- a/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
+++ b/apps/studio/components/ui/ErrorBoundary/ClientSideExceptionHandler.tsx
@@ -3,7 +3,7 @@ import { safeLocalStorage, safeSessionStorage } from 'common'
import { ExternalLink } from 'lucide-react'
import { useRouter } from 'next/router'
import { Button, cn } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import CopyButton from '../CopyButton'
import { InlineLinkClassName } from '../InlineLink'
diff --git a/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditor.utils.ts b/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditor.utils.ts
index 716c40289db..174944f1af3 100644
--- a/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditor.utils.ts
+++ b/apps/studio/components/ui/FileExplorerAndEditor/FileExplorerAndEditor.utils.ts
@@ -38,7 +38,17 @@ export const isBinaryFile = (fileName: string): boolean => {
return binaryExtensions.includes(extension || '')
}
-export const getLanguageFromFileName = (fileName: string): string => {
+type EditorLanguage =
+ | 'typescript'
+ | 'javascript'
+ | 'json'
+ | 'html'
+ | 'css'
+ | 'markdown'
+ | 'csv'
+ | 'plaintext'
+
+export const getLanguageFromFileName = (fileName: string): EditorLanguage => {
const extension = fileName.split('.').pop()?.toLowerCase()
switch (extension) {
case 'ts':
diff --git a/apps/studio/components/ui/Forms/Form.constants.ts b/apps/studio/components/ui/Forms/Form.constants.ts
deleted file mode 100644
index e3910fabb06..00000000000
--- a/apps/studio/components/ui/Forms/Form.constants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as z from 'zod'
-
-export const StringNumberOrNull = z
- .string()
- .transform((v) => (v === '' ? null : v))
- .nullable()
- .refine((value) => value === null || !isNaN(Number(value)), {
- message: 'Invalid number',
- })
- .transform((value) => (value === null ? null : Number(value)))
-
-/**
- * [Joshen] After wrangling with RHF I think this is the easiest way to handle nullable number fields
- * - Declare the field normally as you would in the zod form schema (e.g field: z.number().nullable())
- * - In the InputField, add a form.register call `{...form.register('field_name', { setValueAs: setValueAsNullableNumber })}`
- */
-export const setValueAsNullableNumber = (v: any) => (v === '' || v === null ? null : parseInt(v))
diff --git a/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState.tsx b/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState.tsx
new file mode 100644
index 00000000000..f1cc7df91b9
--- /dev/null
+++ b/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState.tsx
@@ -0,0 +1,32 @@
+import type { LucideIcon } from 'lucide-react'
+import { Server } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { cn } from 'ui'
+import { EmptyStatePresentational } from 'ui-patterns/EmptyStatePresentational'
+
+const DEFAULT_TITLE = 'This feature is unavailable on High Availability projects'
+const DEFAULT_DESCRIPTION =
+ "We're working to bring this feature to High Availability projects. Contact support if this is blocking your work."
+
+interface HighAvailabilityDisabledEmptyStateProps {
+ title?: string
+ description?: ReactNode
+ icon?: LucideIcon | ReactNode
+ className?: string
+}
+
+export function HighAvailabilityDisabledEmptyState({
+ title = DEFAULT_TITLE,
+ description = DEFAULT_DESCRIPTION,
+ icon = Server,
+ className,
+}: HighAvailabilityDisabledEmptyStateProps) {
+ return (
+ <EmptyStatePresentational
+ icon={icon}
+ title={title}
+ description={description}
+ className={cn('w-full max-w-md mx-auto', className)}
+ />
+ )
+}
diff --git a/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledSectionNotice.tsx b/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledSectionNotice.tsx
new file mode 100644
index 00000000000..50188ff9856
--- /dev/null
+++ b/apps/studio/components/ui/HighAvailability/HighAvailabilityDisabledSectionNotice.tsx
@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import { Admonition } from 'ui-patterns/admonition'
+
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
+
+const DEFAULT_TITLE = 'This feature is unavailable on High Availability projects'
+const DEFAULT_DESCRIPTION =
+ "We're working to bring this feature to High Availability projects. Contact support if this is blocking your work."
+
+interface HighAvailabilityDisabledSectionNoticeProps {
+ title?: string
+ description?: ReactNode
+}
+
+export function HighAvailabilityDisabledSectionNotice({
+ title = DEFAULT_TITLE,
+ description = DEFAULT_DESCRIPTION,
+}: HighAvailabilityDisabledSectionNoticeProps) {
+ const { isHighAvailability } = useHighAvailability()
+
+ if (!isHighAvailability) return null
+
+ return (
+ <Admonition type="default" title={title}>
+ <p className="text-sm text-foreground-light">{description}</p>
+ </Admonition>
+ )
+}
diff --git a/apps/studio/components/ui/HighQueryCost.tsx b/apps/studio/components/ui/HighQueryCost.tsx
index ceb63c37c43..4d9432f08ef 100644
--- a/apps/studio/components/ui/HighQueryCost.tsx
+++ b/apps/studio/components/ui/HighQueryCost.tsx
@@ -14,7 +14,7 @@ import {
TooltipContent,
TooltipTrigger,
} from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { DocsButton } from './DocsButton'
import { InlineLinkClassName } from './InlineLink'
diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
index 1a2f195b8b0..26e7b376dc1 100644
--- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
+++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
@@ -1,3 +1,4 @@
+import { useFlag, useParams } from 'common'
import { BookOpen, Check, ChevronsUpDown, Copy, ExternalLink, List, X } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'
@@ -23,7 +24,12 @@ import {
import { DocsButton } from '../DocsButton'
import { LOGS_EXPLORER_DOCS_URL } from '@/components/interfaces/Settings/Logs/Logs.constants'
+import {
+ otelFieldsFromKeys,
+ toOtelFieldSchemas,
+} from '@/components/interfaces/Settings/Logs/Logs.fieldReference'
import Table from '@/components/to-be-cleaned/Table'
+import { useOtelLogKeysQuery } from '@/data/logs/otel-log-keys-query'
import { DOCS_URL } from '@/lib/constants'
export interface LogsExplorerHeaderProps {
@@ -33,7 +39,16 @@ export interface LogsExplorerHeaderProps {
const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
const [showReference, setShowReference] = useState(false)
const [open, setOpen] = useState(false)
- const [selectedSchema, setSelectedSchema] = useState(logConstants.schemas[0])
+ const useOtel = useFlag('otelLegacyLogs')
+ const schemas = useOtel ? toOtelFieldSchemas(logConstants.schemas) : logConstants.schemas
+ const [selectedRef, setSelectedRef] = useState(schemas[0]?.reference)
+ const selectedSchema = schemas.find((s) => s.reference === selectedRef) ?? schemas[0]
+
+ const { ref: projectRef } = useParams()
+ const { data: discoveredKeys, isPending: isLoadingKeys } = useOtelLogKeysQuery(
+ { projectRef, source: selectedRef },
+ { enabled: useOtel && showReference }
+ )
return (
<div className="flex flex-col md:flex-row md:items-center gap-4 md:gap-8 transition-all pb-6 justify-between">
@@ -79,24 +94,33 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
>
<SidePanel.Content>
<div className="pt-4 pb-2 space-y-1">
- <p className="text-sm">
- The following table shows all the available paths that can be queried from each
- respective source. Do note that to access nested keys, you would need to perform the
- necessary{' '}
- <Link
- href={`${DOCS_URL}/guides/platform/logs#unnesting-arrays`}
- target="_blank"
- rel="noreferrer"
- className="text-brand"
- >
- unnesting joins
- <ExternalLink
- size={14}
- className="ml-1 inline translate-y-[-2px]"
- strokeWidth={1.5}
- />
- </Link>
- </p>
+ {useOtel ? (
+ <p className="text-sm">
+ The following table shows the fields available on each source. Nested fields live
+ in the <code className="text-xs">log_attributes</code> map and are read with{' '}
+ <code className="text-xs">log_attributes['key']</code> — no unnesting joins
+ needed.
+ </p>
+ ) : (
+ <p className="text-sm">
+ The following table shows all the available paths that can be queried from each
+ respective source. Do note that to access nested keys, you would need to perform
+ the necessary{' '}
+ <Link
+ href={`${DOCS_URL}/guides/platform/logs#unnesting-arrays`}
+ target="_blank"
+ rel="noreferrer"
+ className="text-brand"
+ >
+ unnesting joins
+ <ExternalLink
+ size={14}
+ className="ml-1 inline translate-y-[-2px]"
+ strokeWidth={1.5}
+ />
+ </Link>
+ </p>
+ )}
</div>
</SidePanel.Content>
<SidePanel.Separator />
@@ -120,19 +144,21 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
<CommandList>
<CommandEmpty>No source found.</CommandEmpty>
<CommandGroup>
- {logConstants.schemas.map((schema) => (
+ {schemas.map((schema) => (
<CommandItem
key={schema.reference}
value={schema.reference}
onSelect={() => {
- setSelectedSchema(schema)
+ setSelectedRef(schema.reference)
setOpen(false)
}}
>
<Check
className={cn(
'mr-2 h-4 w-4',
- selectedSchema === schema ? 'opacity-100' : 'opacity-0'
+ selectedSchema?.reference === schema.reference
+ ? 'opacity-100'
+ : 'opacity-0'
)}
/>
{schema.name}
@@ -143,19 +169,26 @@ const LogsExplorerHeader = ({ subtitle }: LogsExplorerHeaderProps) => {
</Command>
</PopoverContent>
</Popover>
- <Table
- head={[
- <Table.th className="text-xs p-2!" key="path">
- Path
- </Table.th>,
- <Table.th key="type" className="text-xs p-2!">
- Type
- </Table.th>,
- ]}
- body={selectedSchema.fields.map((field) => (
- <Field key={field.path} field={field} />
- ))}
- />
+ {useOtel && isLoadingKeys ? (
+ <p className="text-sm text-foreground-light py-2">Loading fields…</p>
+ ) : (
+ <Table
+ head={[
+ <Table.th className="text-xs p-2!" key="path">
+ Path
+ </Table.th>,
+ <Table.th key="type" className="text-xs p-2!">
+ Type
+ </Table.th>,
+ ]}
+ body={(() => {
+ const fields = useOtel
+ ? otelFieldsFromKeys(discoveredKeys ?? [])
+ : selectedSchema.fields
+ return fields.map((field) => <Field key={field.path} field={field} />)
+ })()}
+ />
+ )}
</div>
</SidePanel>
</div>
diff --git a/apps/studio/components/ui/NoPermission.tsx b/apps/studio/components/ui/NoPermission.tsx
index c4e379a9fc3..90d8c3c32bd 100644
--- a/apps/studio/components/ui/NoPermission.tsx
+++ b/apps/studio/components/ui/NoPermission.tsx
@@ -6,7 +6,7 @@ interface NoPermissionProps {
}
export const NoPermission = ({ resourceText, isFullPage = false }: NoPermissionProps) => {
- const NoPermissionMessage = () => (
+ const NoPermissionMessage = (
<Admonition
type="warning"
title={`You need additional permissions to ${resourceText}`}
@@ -17,14 +17,10 @@ export const NoPermission = ({ resourceText, isFullPage = false }: NoPermissionP
if (isFullPage) {
return (
<div className="flex h-full items-center justify-center">
- <div className="max-w-lg">
- <NoPermissionMessage />
- </div>
+ <div className="max-w-lg">{NoPermissionMessage}</div>
</div>
)
} else {
- return <NoPermissionMessage />
+ return NoPermissionMessage
}
}
-
-export default NoPermission
diff --git a/apps/studio/components/ui/Panel.tsx b/apps/studio/components/ui/Panel.tsx
index 4612f135103..6387e97d8b6 100644
--- a/apps/studio/components/ui/Panel.tsx
+++ b/apps/studio/components/ui/Panel.tsx
@@ -103,9 +103,9 @@ const PanelNotice = forwardRef<
className="absolute inset-0 mt-[-5px]"
style={{
backgroundImage: `
- linear-gradient(to right, hsl(var(--background-200)/1) 0%, hsl(var(--background-200)/1) 30%, hsl(var(--background-200)/0) 100%),
- linear-gradient(to right, hsl(var(--border-default)/0.33) 1px, transparent 1px),
- linear-gradient(to bottom, hsl(var(--border-default)/0.33) 1px, transparent 1px)
+ linear-gradient(to right, oklch(from var(--background-200) l c h / 1) 0%, oklch(from var(--background-200) l c h / 1) 30%, oklch(from var(--background-200) l c h / 0) 100%),
+ linear-gradient(to right, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px),
+ linear-gradient(to bottom, oklch(from var(--border-default) l c h / 0.33) 1px, transparent 1px)
`,
backgroundSize: '100% 100%, 15px 15px, 15px 15px',
backgroundPosition: '0 0, 0 0, 0 0',
diff --git a/apps/studio/components/ui/PartnerIcon.tsx b/apps/studio/components/ui/PartnerIcon.tsx
index a7b60581a39..dd1c4107008 100644
--- a/apps/studio/components/ui/PartnerIcon.tsx
+++ b/apps/studio/components/ui/PartnerIcon.tsx
@@ -53,7 +53,10 @@ function getPartnerIcon(
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
- <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="hsl(var(--foreground-default) / 1)" />
+ <path
+ d="M37.5274 0L75.0548 65H0L37.5274 0Z"
+ fill="oklch(from var(--foreground-default) l c h / 1)"
+ />
</svg>
)
case MANAGED_BY.AWS_MARKETPLACE:
@@ -68,7 +71,7 @@ function getPartnerIcon(
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
- <g fill="hsl(var(--foreground-default) / 1)" transform="scale(1.25)">
+ <g fill="oklch(from var(--foreground-default) l c h / 1)" transform="scale(1.25)">
<path d="M4.51 7.687c0 .197.02.357.058.475.042.117.096.245.17.384a.233.233 0 01.037.123c0 .053-.032.107-.1.16l-.336.224a.255.255 0 01-.138.048c-.054 0-.107-.026-.16-.074a1.652 1.652 0 01-.192-.251 4.137 4.137 0 01-.164-.315c-.416.491-.937.737-1.565.737-.447 0-.804-.129-1.064-.385-.261-.256-.394-.598-.394-1.025 0-.454.16-.822.484-1.1.325-.278.756-.416 1.304-.416.18 0 .367.016.564.042.197.027.4.07.612.118v-.39c0-.406-.085-.689-.25-.854-.17-.166-.458-.246-.868-.246-.186 0-.377.022-.574.07a4.23 4.23 0 00-.575.181 1.525 1.525 0 01-.186.07.326.326 0 01-.085.016c-.075 0-.112-.054-.112-.166v-.262c0-.085.01-.15.037-.186a.399.399 0 01.15-.113c.185-.096.409-.176.67-.24.26-.07.537-.101.83-.101.633 0 1.096.144 1.394.432.293.288.442.726.442 1.314v1.73h.01zm-2.161.811c.175 0 .356-.032.548-.096.192-.064.362-.182.505-.342a.848.848 0 00.181-.341c.032-.129.054-.283.054-.465V7.03a4.43 4.43 0 00-.49-.09 3.996 3.996 0 00-.5-.033c-.357 0-.617.07-.793.214-.176.144-.26.347-.26.614 0 .25.063.437.196.566.128.133.314.197.559.197zm4.273.577c-.096 0-.16-.016-.202-.054-.043-.032-.08-.106-.112-.208l-1.25-4.127a.938.938 0 01-.048-.214c0-.085.042-.133.127-.133h.522c.1 0 .17.016.207.053.043.032.075.107.107.208l.894 3.535.83-3.535c.026-.106.058-.176.101-.208a.365.365 0 01.213-.053h.426c.1 0 .17.016.212.053.043.032.08.107.102.208l.84 3.578.92-3.578a.459.459 0 01.107-.208.347.347 0 01.208-.053h.495c.085 0 .133.043.133.133 0 .027-.006.054-.01.086a.768.768 0 01-.038.133l-1.283 4.127c-.031.107-.069.177-.111.209a.34.34 0 01-.203.053h-.457c-.101 0-.17-.016-.213-.053-.043-.038-.08-.107-.101-.214L8.213 5.37l-.82 3.439c-.026.107-.058.176-.1.213-.043.038-.118.054-.213.054h-.458zm6.838.144a3.51 3.51 0 01-.82-.096c-.266-.064-.473-.134-.612-.214-.085-.048-.143-.101-.165-.15a.38.38 0 01-.031-.149v-.272c0-.112.042-.166.122-.166a.3.3 0 01.096.016c.032.011.08.032.133.054.18.08.378.144.585.187.213.042.42.064.633.064.336 0 .596-.059.777-.176a.575.575 0 00.277-.508.52.52 0 00-.144-.373c-.095-.102-.276-.193-.537-.278l-.772-.24c-.388-.123-.676-.305-.851-.545a1.275 1.275 0 01-.266-.774c0-.224.048-.422.143-.593.096-.17.224-.32.384-.438.16-.122.34-.213.553-.277.213-.064.436-.091.67-.091.118 0 .24.005.357.021.122.016.234.038.346.06.106.026.208.052.303.085.096.032.17.064.224.096a.461.461 0 01.16.133.289.289 0 01.047.176v.251c0 .112-.042.171-.122.171a.552.552 0 01-.202-.064 2.428 2.428 0 00-1.022-.208c-.303 0-.543.048-.708.15-.165.1-.25.256-.25.475 0 .149.053.277.16.379.106.101.303.202.585.293l.756.24c.383.123.66.294.825.513.165.219.244.47.244.748 0 .23-.047.437-.138.619a1.435 1.435 0 01-.388.47c-.165.133-.362.23-.591.299-.24.075-.49.112-.761.112z" />
<path
diff --git a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts
index 68343a88118..1afca9a16dd 100644
--- a/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts
+++ b/apps/studio/components/ui/ProjectSettings/DisplayApiSettings.utils.ts
@@ -1,7 +1,7 @@
import dayjs from 'dayjs'
import { useRef } from 'react'
-import useLogsQuery from '@/hooks/analytics/useLogsQuery'
+import { useLogsQuery } from '@/hooks/analytics/useLogsQuery'
export function useLastUsedAPIKeysLogQuery({
projectRef,
diff --git a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
index b64761076ba..1189824467c 100644
--- a/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
+++ b/apps/studio/components/ui/ProjectUpgradeFailedBanner.tsx
@@ -3,7 +3,7 @@ import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import { useParams } from 'common'
import dayjs from 'dayjs'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { InlineLink } from './InlineLink'
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
diff --git a/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx b/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
index 8e70d54fcfa..2f620af18ec 100644
--- a/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
+++ b/apps/studio/components/ui/QueryBlock/EditQueryButton.tsx
@@ -12,13 +12,13 @@ import {
import { ButtonTooltip } from '../ButtonTooltip'
import { useIsInlineEditorEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
-import useNewQuery from '@/components/interfaces/SQLEditor/hooks'
+import { useNewQuery } from '@/components/interfaces/SQLEditor/hooks'
import { DiffType } from '@/components/interfaces/SQLEditor/SQLEditor.types'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { useTrack } from '@/lib/telemetry/track'
import { editorPanelState } from '@/state/editor-panel-state'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
-import { useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { useSqlEditorDiffRequestSnapshot } from '@/state/sql-editor/sql-editor-diff-request'
interface EditQueryButtonProps {
id?: string
@@ -38,7 +38,7 @@ export const EditQueryButton = ({
const router = useRouter()
const { newQuery } = useNewQuery()
- const sqlEditorSnap = useSqlEditorV2StateSnapshot()
+ const diffRequest = useSqlEditorDiffRequestSnapshot()
const { closeSidebar, openSidebar } = useSidebarManagerSnapshot()
const isInSQLEditor = router.pathname.includes('/sql')
@@ -102,12 +102,10 @@ export const EditQueryButton = ({
</DropdownMenuTrigger>
{!!sql && (
<DropdownMenuContent className="w-36">
- <DropdownMenuItem onClick={() => sqlEditorSnap.setDiffContent(sql, DiffType.Addition)}>
+ <DropdownMenuItem onClick={() => diffRequest.requestDiff(sql, DiffType.Addition)}>
Insert code
</DropdownMenuItem>
- <DropdownMenuItem
- onClick={() => sqlEditorSnap.setDiffContent(sql, DiffType.Modification)}
- >
+ <DropdownMenuItem onClick={() => diffRequest.requestDiff(sql, DiffType.Modification)}>
Replace code
</DropdownMenuItem>
<DropdownMenuItem onClick={() => newQuery(sql, title)}>
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
index c586fb79f6a..97907d4edb3 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.tsx
@@ -21,7 +21,7 @@ import {
} from './QueryBlock.utils'
import { ReportBlockContainer } from '@/components/interfaces/Reports/ReportBlock/ReportBlockContainer'
import { ChartConfig } from '@/components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
-import Results from '@/components/interfaces/SQLEditor/UtilityPanel/Results'
+import { Results } from '@/components/interfaces/SQLEditor/UtilityPanel/Results'
export const DEFAULT_CHART_CONFIG: ChartConfig = {
type: 'bar',
@@ -348,12 +348,12 @@ export const QueryBlock = ({
)
}
/>
- <Bar radius={1} dataKey={yKey} fill="hsl(var(--chart-1))">
+ <Bar radius={1} dataKey={yKey} fill="var(--chart-1)">
{chartData?.map((_: any, index: number) => (
<Cell
key={`cell-${index}`}
className="transition-all duration-100"
- fill="hsl(var(--chart-1))"
+ fill="var(--chart-1)"
opacity={focusDataIndex === undefined || focusDataIndex === index ? 1 : 0.4}
enableBackground={12}
/>
diff --git a/apps/studio/components/ui/QueryBlock/QueryBlock.utils.ts b/apps/studio/components/ui/QueryBlock/QueryBlock.utils.ts
index 7a7ffbb9708..342f5b17a60 100644
--- a/apps/studio/components/ui/QueryBlock/QueryBlock.utils.ts
+++ b/apps/studio/components/ui/QueryBlock/QueryBlock.utils.ts
@@ -1,4 +1,4 @@
-import { ChartConfig } from '@/components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
+import type { ChartConfig } from '@/components/interfaces/SQLEditor/UtilityPanel/ChartConfig'
export const checkHasNonPositiveValues = (data: Record<string, unknown>[], key: string): boolean =>
data.some((row) => (row[key] as number) <= 0)
@@ -47,16 +47,19 @@ export const formatLogTick = (value: number): string => {
return value.toLocaleString()
}
-export const getCumulativeResults = (results: { rows: any[] }, config: ChartConfig) => {
+export const getCumulativeResults = (results: { rows: readonly any[] }, config: ChartConfig) => {
if (!results?.rows?.length) {
return []
}
const cumulativeResults = results.rows.reduce((acc, row) => {
const prev = acc[acc.length - 1] || {}
+ // Coerce to Number before adding: Postgres returns `bigint`, `numeric`,
+ // `money` and `count(*)` columns as strings, so a bare `+` would
+ // concatenate (e.g. "10" + "20" -> "1020") instead of summing.
const next = {
...row,
- [config.yKey]: (prev[config.yKey] || 0) + row[config.yKey],
+ [config.yKey]: (Number(prev[config.yKey]) || 0) + (Number(row[config.yKey]) || 0),
}
return [...acc, next]
}, [])
diff --git a/apps/studio/components/ui/SchemaSelector.tsx b/apps/studio/components/ui/SchemaSelector.tsx
index e4b50fd9086..a04328e0367 100644
--- a/apps/studio/components/ui/SchemaSelector.tsx
+++ b/apps/studio/components/ui/SchemaSelector.tsx
@@ -229,5 +229,3 @@ export const SchemaSelector = forwardRef<HTMLDivElement, SchemaSelectorProps>(
)
SchemaSelector.displayName = 'SchemaSelector'
-
-export default SchemaSelector
diff --git a/apps/studio/components/ui/SparkBar.tsx b/apps/studio/components/ui/SparkBar.tsx
index dafbdbf8327..b283adc67d3 100644
--- a/apps/studio/components/ui/SparkBar.tsx
+++ b/apps/studio/components/ui/SparkBar.tsx
@@ -75,5 +75,3 @@ export const SparkBar = ({
)
}
}
-
-export default SparkBar
diff --git a/apps/studio/components/ui/SqlEditor.tsx b/apps/studio/components/ui/SqlEditor.tsx
deleted file mode 100644
index 9a8fb6d2711..00000000000
--- a/apps/studio/components/ui/SqlEditor.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import Editor, { OnChange, useMonaco } from '@monaco-editor/react'
-import { noop } from 'lodash'
-import { useEffect, useRef } from 'react'
-import { LogoLoader } from 'ui'
-
-import { formatSql } from '@/lib/formatSql'
-
-// [Joshen] We should deprecate this and use CodeEditor instead
-
-interface SqlEditorProps {
- contextmenu?: boolean
- defaultValue?: string
- language?: string
- onInputChange?: OnChange
- queryId?: string
- readOnly?: boolean
-}
-
-/**
- * @deprecated Use CodeEditor instead
- */
-const SqlEditor = ({
- queryId,
- language = 'pgsql',
- defaultValue = '',
- readOnly = false,
- contextmenu = true,
- onInputChange = noop,
-}: SqlEditorProps) => {
- const monaco = useMonaco()
- const editorRef = useRef<any>(null)
-
- useEffect(() => {
- if (monaco) {
- // Enable pgsql format
- const formatprovider = monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
- async provideDocumentFormattingEdits(model: any) {
- const value = model.getValue()
- const formatted = formatSql(value)
- return [
- {
- range: model.getFullModelRange(),
- text: formatted,
- },
- ]
- },
- })
-
- return () => {
- formatprovider.dispose()
- }
- }
- }, [monaco])
-
- useEffect(() => {
- if (editorRef.current) {
- // add margin above first line
- editorRef.current?.changeViewZones((accessor: any) => {
- accessor.addZone({
- afterLineNumber: 0,
- heightInPx: 4,
- domNode: document.createElement('div'),
- })
- })
- }
- }, [queryId])
-
- const onMount = (editor: any, _monaco: any) => {
- editorRef.current = editor
-
- // Add margin above first line
- editor.changeViewZones((accessor: any) => {
- accessor.addZone({
- afterLineNumber: 0,
- heightInPx: 4,
- domNode: document.createElement('div'),
- })
- })
- }
-
- return (
- <Editor
- className="monaco-editor"
- theme="supabase"
- defaultLanguage={language}
- defaultValue={defaultValue}
- path={queryId}
- loading={<LogoLoader />}
- options={{
- readOnly,
- tabSize: 2,
- fontSize: 13,
- minimap: {
- enabled: false,
- },
- wordWrap: 'on',
- fixedOverflowWidgets: true,
- contextmenu: contextmenu,
- }}
- onMount={onMount}
- onChange={onInputChange}
- />
- )
-}
-
-export default SqlEditor
diff --git a/apps/studio/components/ui/SqlWarningAdmonition.tsx b/apps/studio/components/ui/SqlWarningAdmonition.tsx
index 6c89532ab16..d8cb41f5324 100644
--- a/apps/studio/components/ui/SqlWarningAdmonition.tsx
+++ b/apps/studio/components/ui/SqlWarningAdmonition.tsx
@@ -1,5 +1,5 @@
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
export interface SqlWarningAdmonitionProps {
warningType: 'hasWriteOperation' | 'hasUnknownFunctions'
diff --git a/apps/studio/components/ui/UnknownInterface.tsx b/apps/studio/components/ui/UnknownInterface.tsx
index ff7ba4ef08d..fcbf30d68f8 100644
--- a/apps/studio/components/ui/UnknownInterface.tsx
+++ b/apps/studio/components/ui/UnknownInterface.tsx
@@ -1,6 +1,6 @@
import Link from 'next/link'
import { Button, cn } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
export const UnknownInterface = ({
urlBack,
diff --git a/apps/studio/components/ui/UpgradeToPro.tsx b/apps/studio/components/ui/UpgradeToPro.tsx
index c7e8b5ebf28..b8e6b0f81a0 100644
--- a/apps/studio/components/ui/UpgradeToPro.tsx
+++ b/apps/studio/components/ui/UpgradeToPro.tsx
@@ -1,6 +1,6 @@
import { ReactNode } from 'react'
import { cn } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { DocsButton } from './DocsButton'
import { UpgradePlanButton } from './UpgradePlanButton'
diff --git a/apps/studio/data/analytics/functions-req-stats-query.ts b/apps/studio/data/analytics/functions-req-stats-query.ts
deleted file mode 100644
index 88f04586fbe..00000000000
--- a/apps/studio/data/analytics/functions-req-stats-query.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { operations } from 'api-types'
-
-import { analyticsKeys } from './keys'
-import { get, handleError } from '@/data/fetchers'
-import { UseCustomQueryOptions } from '@/types'
-
-export type FunctionsReqStatsVariables = {
- projectRef?: string
- functionId?: string
- interval?: operations['FunctionsLogsController_getRequestStats']['parameters']['query']['interval']
-}
-
-export type FunctionsReqStatsResponse = any
-
-export async function getFunctionsReqStats(
- { projectRef, functionId, interval }: FunctionsReqStatsVariables,
- signal?: AbortSignal
-) {
- if (!projectRef) {
- throw new Error('projectRef is required')
- }
- if (!functionId) {
- throw new Error('functionId is required')
- }
- if (!interval) {
- throw new Error('interval is required')
- }
-
- const { data, error } = await get(
- '/platform/projects/{ref}/analytics/endpoints/functions.req-stats',
- {
- params: {
- path: {
- ref: projectRef,
- },
- query: {
- function_id: functionId,
- interval,
- },
- },
- signal,
- }
- )
-
- if (error) handleError(error)
-
- return data
-}
-
-export type FunctionsReqStatsData = Awaited<ReturnType<typeof getFunctionsReqStats>>
-export type FunctionsReqStatsError = unknown
-
-export const useFunctionsReqStatsQuery = <TData = FunctionsReqStatsData>(
- { projectRef, functionId, interval }: FunctionsReqStatsVariables,
- {
- enabled = true,
- ...options
- }: UseCustomQueryOptions<FunctionsReqStatsData, FunctionsReqStatsError, TData> = {}
-) =>
- useQuery<FunctionsReqStatsData, FunctionsReqStatsError, TData>({
- queryKey: analyticsKeys.functionsReqStats(projectRef, { functionId, interval }),
- queryFn: ({ signal }) => getFunctionsReqStats({ projectRef, functionId, interval }, signal),
- enabled:
- enabled &&
- typeof projectRef !== 'undefined' &&
- typeof functionId !== 'undefined' &&
- typeof interval !== 'undefined',
- ...options,
- })
diff --git a/apps/studio/data/analytics/functions-resource-usage-query.ts b/apps/studio/data/analytics/functions-resource-usage-query.ts
deleted file mode 100644
index 44622300a9d..00000000000
--- a/apps/studio/data/analytics/functions-resource-usage-query.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { operations } from 'api-types'
-
-import { analyticsKeys } from './keys'
-import { get, handleError } from '@/data/fetchers'
-import { UseCustomQueryOptions } from '@/types'
-
-export type FunctionsResourceUsageVariables = {
- projectRef?: string
- functionId?: string
- interval?: operations['FunctionsLogsController_getRequestStats']['parameters']['query']['interval']
-}
-
-export type FunctionsResourceUsageResponse = any
-
-export async function getFunctionsResourceUsage(
- { projectRef, functionId, interval }: FunctionsResourceUsageVariables,
- signal?: AbortSignal
-) {
- if (!projectRef) {
- throw new Error('projectRef is required')
- }
- if (!functionId) {
- throw new Error('functionId is required')
- }
- if (!interval) {
- throw new Error('interval is required')
- }
-
- const { data, error } = await get(
- '/platform/projects/{ref}/analytics/endpoints/functions.resource-usage',
- {
- params: {
- path: {
- ref: projectRef,
- },
- query: {
- function_id: functionId,
- interval,
- },
- },
- signal,
- }
- )
-
- if (error) handleError(error)
-
- return data
-}
-
-export type FunctionsResourceUsageData = Awaited<ReturnType<typeof getFunctionsResourceUsage>>
-export type FunctionsResourceUsageError = unknown
-
-export const useFunctionsResourceUsageQuery = <TData = FunctionsResourceUsageData>(
- { projectRef, functionId, interval }: FunctionsResourceUsageVariables,
- {
- enabled = true,
- ...options
- }: UseCustomQueryOptions<FunctionsResourceUsageData, FunctionsResourceUsageError, TData> = {}
-) =>
- useQuery<FunctionsResourceUsageData, FunctionsResourceUsageError, TData>({
- queryKey: analyticsKeys.functionsResourceUsage(projectRef, { functionId, interval }),
- queryFn: ({ signal }) =>
- getFunctionsResourceUsage({ projectRef, functionId, interval }, signal),
- enabled:
- enabled &&
- typeof projectRef !== 'undefined' &&
- typeof functionId !== 'undefined' &&
- typeof interval !== 'undefined',
- ...options,
- })
diff --git a/apps/studio/data/analytics/infra-monitoring-queries.test.ts b/apps/studio/data/analytics/infra-monitoring-queries.test.ts
index 0720e41806f..b8be88aa2f3 100644
--- a/apps/studio/data/analytics/infra-monitoring-queries.test.ts
+++ b/apps/studio/data/analytics/infra-monitoring-queries.test.ts
@@ -1,11 +1,7 @@
import dayjs from 'dayjs'
import { describe, expect, it } from 'vitest'
-import {
- aggregate1MinTo2Min,
- mapMultiResponseToAnalyticsData,
- mapResponseToAnalyticsData,
-} from './infra-monitoring-queries'
+import { aggregate1MinTo2Min, mapResponseToAnalyticsData } from './infra-monitoring-queries'
import type {
InfraMonitoringMultiData,
InfraMonitoringMultiResponse,
@@ -166,13 +162,6 @@ describe('mapResponseToAnalyticsData', () => {
})
})
-// Test deprecated alias still works
-describe('mapMultiResponseToAnalyticsData (deprecated)', () => {
- it('is an alias for mapResponseToAnalyticsData', () => {
- expect(mapMultiResponseToAnalyticsData).toBe(mapResponseToAnalyticsData)
- })
-})
-
describe('2m interval aggregation', () => {
it('aggregates 1m data points into 2m buckets for multi-attribute response', () => {
const mock1MinData: InfraMonitoringMultiResponse = {
diff --git a/apps/studio/data/analytics/infra-monitoring-queries.ts b/apps/studio/data/analytics/infra-monitoring-queries.ts
index f3f812dcebd..6c58dc24906 100644
--- a/apps/studio/data/analytics/infra-monitoring-queries.ts
+++ b/apps/studio/data/analytics/infra-monitoring-queries.ts
@@ -221,6 +221,3 @@ export function mapResponseToAnalyticsData(
},
}
}
-
-/** @deprecated Use mapResponseToAnalyticsData instead */
-export const mapMultiResponseToAnalyticsData = mapResponseToAnalyticsData
diff --git a/apps/studio/data/api-keys/api-key-id-update-mutation.ts b/apps/studio/data/api-keys/api-key-id-update-mutation.ts
deleted file mode 100644
index 108e43667ad..00000000000
--- a/apps/studio/data/api-keys/api-key-id-update-mutation.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { toast } from 'sonner'
-
-import { apiKeysKeys } from './keys'
-import { handleError, patch } from '@/data/fetchers'
-import type { ResponseError, UseCustomMutationOptions } from '@/types'
-
-export interface UpdateAPIKeybyIdVariables {
- projectRef?: string
- id?: string
- description?: string
-}
-
-export async function updateAPIKeysById(
- { projectRef, id, description }: UpdateAPIKeybyIdVariables,
- signal?: AbortSignal
-) {
- if (typeof projectRef === 'undefined') throw new Error('projectRef is required')
- if (typeof id === 'undefined') throw new Error('API key ID is required')
-
- const { data, error } = await patch('/v1/projects/{ref}/api-keys/{id}', {
- params: {
- path: { ref: projectRef, id },
- query: { reveal: false },
- },
- body: {
- description: description,
- },
- signal,
- })
-
- if (error) {
- handleError(error)
- }
-
- return data
-}
-
-export type ResourceUpdateData = Awaited<ReturnType<typeof updateAPIKeysById>>
-
-export const useResourceUpdateMutation = ({
- onSuccess,
- onError,
- ...options
-}: Omit<
- UseCustomMutationOptions<ResourceUpdateData, ResponseError, UpdateAPIKeybyIdVariables>,
- 'mutationFn'
-> = {}) => {
- const queryClient = useQueryClient()
-
- return useMutation<ResourceUpdateData, ResponseError, UpdateAPIKeybyIdVariables>({
- mutationFn: (vars) => updateAPIKeysById(vars),
- async onSuccess(data, variables, context) {
- const { projectRef } = variables
-
- await queryClient.invalidateQueries({ queryKey: apiKeysKeys.list(projectRef) })
-
- await onSuccess?.(data, variables, context)
- },
- async onError(data, variables, context) {
- if (onError === undefined) {
- toast.error(`Failed to mutate: ${data.message}`)
- } else {
- onError(data, variables, context)
- }
- },
- ...options,
- })
-}
diff --git a/apps/studio/data/content/content-id-query.ts b/apps/studio/data/content/content-id-query.ts
index df6a1f8ea8b..681e7c645ca 100644
--- a/apps/studio/data/content/content-id-query.ts
+++ b/apps/studio/data/content/content-id-query.ts
@@ -4,6 +4,7 @@ import { components } from 'api-types'
import type { Content } from './content-query'
import { remapSqlContentField } from './content-remap'
import { contentKeys } from './keys'
+import type { SnippetWithContent } from './sql-folders-query'
import { get, handleError } from '@/data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
@@ -33,6 +34,43 @@ export async function getContentById(
export type ContentIdData = Awaited<ReturnType<typeof getContentById>>
export type ContentIdError = ResponseError
+// SQL-editor-specific fetch: the editor only ever loads SQL snippets, so the
+// content body is typed as SQL content and the result is a SnippetWithContent
+// (status 'saved') ready to drop into the store — no narrowing/casting at the
+// call site. Reports etc. keep using the generic getContentById above.
+export async function getSqlSnippetById(
+ { projectRef, id }: { projectRef?: string; id?: string },
+ signal?: AbortSignal
+): Promise<SnippetWithContent> {
+ if (typeof projectRef === 'undefined') throw new Error('projectRef is required')
+ if (typeof id === 'undefined') throw new Error('Content ID is required')
+
+ const { data, error } = await get('/platform/projects/{ref}/content/item/{id}', {
+ params: { path: { ref: projectRef, id } },
+ signal,
+ })
+
+ if (error) throw handleError(error)
+ const snippet = remapSqlContentField(data as unknown as Omit<SnippetWithContent, 'status'>)
+ return { ...snippet, status: 'saved' }
+}
+
+export type SqlSnippetByIdData = Awaited<ReturnType<typeof getSqlSnippetById>>
+
+export const useSqlSnippetByIdQuery = <TData = SqlSnippetByIdData>(
+ { projectRef, id }: { projectRef?: string; id?: string },
+ {
+ enabled = true,
+ ...options
+ }: UseCustomQueryOptions<SqlSnippetByIdData, ContentIdError, TData> = {}
+) =>
+ useQuery<SqlSnippetByIdData, ContentIdError, TData>({
+ queryKey: contentKeys.resource(projectRef, id),
+ queryFn: ({ signal }) => getSqlSnippetById({ projectRef, id }, signal),
+ enabled: enabled && typeof projectRef !== 'undefined' && typeof id !== 'undefined',
+ ...options,
+ })
+
export const useContentIdQuery = <TData = ContentIdData>(
{ projectRef, id }: { projectRef?: string; id?: string },
{ enabled = true, ...options }: UseCustomQueryOptions<ContentIdData, ContentIdError, TData> = {}
diff --git a/apps/studio/data/content/content-remap.test.ts b/apps/studio/data/content/content-remap.test.ts
new file mode 100644
index 00000000000..c2fa305e6e2
--- /dev/null
+++ b/apps/studio/data/content/content-remap.test.ts
@@ -0,0 +1,103 @@
+import { untrustedSql } from '@supabase/pg-meta'
+import { describe, expect, it } from 'vitest'
+
+import { remapSqlContentField, remapSqlContentFields, unmapSqlContentField } from './content-remap'
+
+const SQL_SNIPPET = {
+ id: 'a0eebc99-9c0b-4ef8-bb6d-6bb9bd380a11',
+ type: 'sql' as const,
+ name: 'My query',
+ content: {
+ sql: 'SELECT 1',
+ content_id: 'a0eebc99-9c0b-4ef8-bb6d-6bb9bd380a11',
+ schema_version: '1.0',
+ },
+}
+
+describe('remapSqlContentField', () => {
+ it('remaps content.sql to content.unchecked_sql for SQL snippets', () => {
+ const result = remapSqlContentField(SQL_SNIPPET)
+
+ expect(result.content).toEqual({
+ content_id: SQL_SNIPPET.content.content_id,
+ schema_version: '1.0',
+ unchecked_sql: untrustedSql('SELECT 1'),
+ })
+ expect(result.content).not.toHaveProperty('sql')
+ })
+
+ it('leaves non-SQL content types unchanged', () => {
+ const report = { id: '1', type: 'report' as const, content: { foo: 'bar' } }
+
+ expect(remapSqlContentField(report)).toBe(report)
+ })
+
+ it('leaves SQL snippets without a content field unchanged', () => {
+ const snippet = { id: '1', type: 'sql' as const, name: 'No content' }
+
+ expect(remapSqlContentField(snippet)).toBe(snippet)
+ })
+
+ it('leaves SQL snippets whose content has no sql field unchanged', () => {
+ const snippet = {
+ id: '1',
+ type: 'sql' as const,
+ content: { content_id: '1', schema_version: '1.0', unchecked_sql: untrustedSql('x') },
+ }
+
+ expect(remapSqlContentField(snippet)).toBe(snippet)
+ })
+})
+
+describe('remapSqlContentFields', () => {
+ it('remaps every SQL snippet in a list', () => {
+ const items = [SQL_SNIPPET, { id: '2', type: 'report' as const }]
+
+ const result = remapSqlContentFields(items)
+ const remappedSql = result.find((item) => item.type === 'sql')
+
+ expect(remappedSql && 'content' in remappedSql && remappedSql.content).toMatchObject({
+ unchecked_sql: untrustedSql('SELECT 1'),
+ })
+ expect(result[1]).toBe(items[1])
+ })
+})
+
+describe('unmapSqlContentField', () => {
+ it('remaps content.unchecked_sql back to content.sql for the API', () => {
+ const snippet = remapSqlContentField(SQL_SNIPPET)
+
+ const result = unmapSqlContentField(snippet)
+
+ expect(result.content).toEqual({
+ content_id: SQL_SNIPPET.content.content_id,
+ schema_version: '1.0',
+ sql: untrustedSql('SELECT 1'),
+ })
+ expect(result.content).not.toHaveProperty('unchecked_sql')
+ })
+
+ it('leaves non-SQL content types unchanged', () => {
+ const report = { id: '1', type: 'report' as const, content: { foo: 'bar' } }
+
+ expect(unmapSqlContentField(report)).toBe(report)
+ })
+
+ it('leaves SQL snippets whose content has no unchecked_sql field unchanged', () => {
+ const snippet = {
+ id: '1',
+ type: 'sql' as const,
+ content: { content_id: '1', schema_version: '1.0', sql: 'SELECT 1' },
+ }
+
+ expect(unmapSqlContentField(snippet)).toBe(snippet)
+ })
+})
+
+describe('remap/unmap round-trip', () => {
+ it('returns the original content shape after remap then unmap', () => {
+ const result = unmapSqlContentField(remapSqlContentField(SQL_SNIPPET))
+
+ expect(result.content).toEqual(SQL_SNIPPET.content)
+ })
+})
diff --git a/apps/studio/data/content/content-upsert-mutation.test.ts b/apps/studio/data/content/content-upsert-mutation.test.ts
new file mode 100644
index 00000000000..6c632d57e2c
--- /dev/null
+++ b/apps/studio/data/content/content-upsert-mutation.test.ts
@@ -0,0 +1,75 @@
+import { untrustedSql } from '@supabase/pg-meta'
+import { HttpResponse } from 'msw'
+import { describe, expect, it } from 'vitest'
+
+import { upsertContent } from './content-upsert-mutation'
+import { addAPIMock } from '@/tests/lib/msw'
+
+const SNIPPET_ID = 'a0eebc99-9c0b-4ef8-bb6d-6bb9bd380a11'
+const FOLDER_ID = 'c2eebc99-9c0b-4ef8-bb6d-6bb9bd380a13'
+
+const payload = {
+ id: SNIPPET_ID,
+ type: 'sql' as const,
+ name: 'Moved query',
+ visibility: 'user' as const,
+ project_id: 1,
+ owner_id: 1,
+ folder_id: FOLDER_ID,
+ content: {
+ content_id: SNIPPET_ID,
+ schema_version: '1.0',
+ unchecked_sql: untrustedSql('SELECT 1'),
+ },
+}
+
+describe('upsertContent', () => {
+ it('remaps content.sql to unchecked_sql in the upsert response', async () => {
+ // Self-hosted (and the management API) persist + return the SQL body under `content.sql`;
+ // the editor reads `content.unchecked_sql`. Move/rename consume this response directly, so it
+ // must be remapped — otherwise the editor renders blank until a refetch.
+ addAPIMock({
+ method: 'put',
+ path: '/platform/projects/:ref/content',
+ response: async ({ request }) => {
+ const body = (await request.json()) as { id: string; name: string; type: string }
+ return HttpResponse.json({
+ id: SNIPPET_ID,
+ type: 'sql',
+ name: body.name,
+ description: '',
+ favorite: false,
+ folder_id: FOLDER_ID,
+ inserted_at: '2024-01-01T00:00:00.000Z',
+ updated_at: '2024-01-01T00:00:00.000Z',
+ visibility: 'user',
+ owner_id: 1,
+ project_id: 1,
+ content: {
+ sql: 'SELECT 1',
+ content_id: SNIPPET_ID,
+ schema_version: '1.0',
+ },
+ })
+ },
+ })
+
+ const result = await upsertContent({ projectRef: 'default', payload })
+
+ expect(result?.status).toBe('saved')
+ expect(result?.content?.unchecked_sql).toEqual(untrustedSql('SELECT 1'))
+ expect(result?.content).not.toHaveProperty('sql')
+ })
+
+ it('returns null when the API responds with no snippet', async () => {
+ addAPIMock({
+ method: 'put',
+ path: '/platform/projects/:ref/content',
+ response: () => HttpResponse.json(null),
+ })
+
+ const result = await upsertContent({ projectRef: 'default', payload })
+
+ expect(result).toBeNull()
+ })
+})
diff --git a/apps/studio/data/content/content-upsert-mutation.ts b/apps/studio/data/content/content-upsert-mutation.ts
index 967dcb8629a..26640dbb066 100644
--- a/apps/studio/data/content/content-upsert-mutation.ts
+++ b/apps/studio/data/content/content-upsert-mutation.ts
@@ -2,9 +2,9 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import { toast } from 'sonner'
import type { Content } from './content-query'
-import { unmapSqlContentField } from './content-remap'
+import { remapSqlContentField, unmapSqlContentField } from './content-remap'
import { contentKeys } from './keys'
-import type { Snippet } from './sql-folders-query'
+import type { Snippet, SnippetWithContent } from './sql-folders-query'
import type { components } from '@/data/api'
import { handleError, put } from '@/data/fetchers'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
@@ -23,7 +23,7 @@ export type UpsertContentVariables = {
export async function upsertContent(
{ projectRef, payload }: UpsertContentVariables,
signal?: AbortSignal
-) {
+): Promise<SnippetWithContent | null> {
const { data, error } = await put('/platform/projects/{ref}/content', {
params: { path: { ref: projectRef } },
body: unmapSqlContentField(payload),
@@ -32,7 +32,8 @@ export async function upsertContent(
})
if (error) handleError(error)
- return data as Snippet | null
+ const snippet = data as Snippet | null
+ return snippet === null ? null : { ...remapSqlContentField(snippet), status: 'saved' }
}
export type UpsertContentData = Awaited<ReturnType<typeof upsertContent>>
diff --git a/apps/studio/data/content/snippet-status.ts b/apps/studio/data/content/snippet-status.ts
new file mode 100644
index 00000000000..bd89e2fd4c9
--- /dev/null
+++ b/apps/studio/data/content/snippet-status.ts
@@ -0,0 +1,19 @@
+/**
+ * The lifecycle of a snippet in the SQL editor, modelled as a single set of
+ * mutually-exclusive states.
+ *
+ * The status is attached to a snippet as it enters the app: 'saved' when
+ * fetched from the database (see the snippet queries in this directory) and
+ * 'new' when created locally (see createSqlSnippetSkeletonV2). The transition
+ * and predicate helpers live in state/sql-editor/sql-editor-lifecycle.
+ */
+export type SnippetStatus =
+ // Never persisted to the database (created locally this session):
+ | 'new' // idle, never saved
+ | 'new_saving' // first save in flight
+ | 'new_save_failed' // first save failed
+ // Persisted to the database at least once:
+ | 'saved' // no pending changes
+ | 'unsaved' // has pending local edits
+ | 'saving' // re-save in flight
+ | 'save_failed' // last save failed
diff --git a/apps/studio/data/content/sql-folder-contents-query.ts b/apps/studio/data/content/sql-folder-contents-query.ts
index 94a275e4eb4..e14671bae97 100644
--- a/apps/studio/data/content/sql-folder-contents-query.ts
+++ b/apps/studio/data/content/sql-folder-contents-query.ts
@@ -1,7 +1,7 @@
import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
import { contentKeys } from './keys'
-import { SNIPPET_PAGE_LIMIT } from './sql-folders-query'
+import { SNIPPET_PAGE_LIMIT, withSavedStatus } from './sql-folders-query'
import { get, handleError } from '@/data/fetchers'
import type { ResponseError, UseCustomInfiniteQueryOptions } from '@/types'
@@ -39,6 +39,7 @@ export async function getSQLSnippetFolderContents(
if (error) handleError(error)
return {
...data.data,
+ contents: (data.data.contents ?? []).map(withSavedStatus),
cursor: data.cursor,
}
}
diff --git a/apps/studio/data/content/sql-folders-query.ts b/apps/studio/data/content/sql-folders-query.ts
index 9aa534fc84a..36d31c6a505 100644
--- a/apps/studio/data/content/sql-folders-query.ts
+++ b/apps/studio/data/content/sql-folders-query.ts
@@ -2,8 +2,9 @@ import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
import { components } from 'api-types'
import { contentKeys } from './keys'
+import type { SnippetStatus } from './snippet-status'
import { get, handleError } from '@/data/fetchers'
-import type { ResponseError, UseCustomInfiniteQueryOptions } from '@/types'
+import type { ResponseError, SqlSnippets, UseCustomInfiniteQueryOptions } from '@/types'
export type SnippetFolderResponse = components['schemas']['GetUserContentFolderResponse']['data']
export type SnippetFolder =
@@ -11,6 +12,19 @@ export type SnippetFolder =
export type Snippet =
components['schemas']['GetUserContentFolderResponse']['data']['contents'][number]
+export interface SnippetWithContent extends Snippet {
+ content?: SqlSnippets.Content
+ status: SnippetStatus
+}
+
+// Attaches the 'saved' lifecycle status to a snippet as it crosses from the
+// database into the app. Generic so it preserves any loaded content on the
+// snippet, and types `status` as the full SnippetStatus (not the 'saved'
+// literal) so the result is a regular SnippetWithContent.
+export function withSavedStatus<T extends Snippet>(snippet: T): T & { status: SnippetStatus } {
+ return { ...snippet, status: 'saved' }
+}
+
export type SQLSnippetFolderVariables = {
projectRef?: string
cursor?: string
@@ -48,6 +62,7 @@ export async function getSQLSnippetFolders(
if (error) handleError(error)
return {
...data.data,
+ contents: (data.data.contents ?? []).map(withSavedStatus),
cursor: data.cursor,
}
}
diff --git a/apps/studio/data/content/sql-snippets-query.ts b/apps/studio/data/content/sql-snippets-query.ts
index ce63bb28e50..afd112f9535 100644
--- a/apps/studio/data/content/sql-snippets-query.ts
+++ b/apps/studio/data/content/sql-snippets-query.ts
@@ -3,9 +3,9 @@ import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'
import { Content } from './content-query'
import { remapSqlContentFields } from './content-remap'
import { contentKeys } from './keys'
-import { SNIPPET_PAGE_LIMIT } from './sql-folders-query'
+import { SNIPPET_PAGE_LIMIT, withSavedStatus, type Snippet } from './sql-folders-query'
import { get } from '@/data/fetchers'
-import { UseCustomInfiniteQueryOptions } from '@/types'
+import type { SqlSnippets, UseCustomInfiniteQueryOptions } from '@/types'
export type SqlSnippet = Extract<Content, { type: 'sql' }>
@@ -49,9 +49,12 @@ export async function getSqlSnippets(
throw error
}
+ const snippets = remapSqlContentFields(
+ data.data as unknown as Array<Snippet & { content?: SqlSnippets.Content }>
+ )
return {
cursor: data.cursor,
- contents: remapSqlContentFields(data.data as unknown as SqlSnippet[]),
+ contents: snippets.map(withSavedStatus),
}
}
diff --git a/apps/studio/data/database-extensions/database-extensions-query.ts b/apps/studio/data/database-extensions/database-extensions-query.ts
index 5e293a0dcfe..4de92df2958 100644
--- a/apps/studio/data/database-extensions/database-extensions-query.ts
+++ b/apps/studio/data/database-extensions/database-extensions-query.ts
@@ -6,6 +6,7 @@ import { databaseExtensionsKeys } from './keys'
import { executeSql } from '@/data/sql/execute-sql-mutation'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from '@/lib/constants'
+import { EMPTY_ARR } from '@/lib/void'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
export type DatabaseExtension = components['schemas']['PostgresExtension'] & {
@@ -26,7 +27,7 @@ export async function getDatabaseExtensions(
{ projectRef, connectionString, sql, queryKey: ['database-extensions'] },
signal
)
- return result as DatabaseExtension[]
+ return (Array.isArray(result) ? result : EMPTY_ARR) as DatabaseExtension[]
}
export type DatabaseExtensionsData = Awaited<ReturnType<typeof getDatabaseExtensions>>
diff --git a/apps/studio/data/database-policies/database-policies-query.ts b/apps/studio/data/database-policies/database-policies-query.ts
index 38c687419d1..1a9bf0cea0a 100644
--- a/apps/studio/data/database-policies/database-policies-query.ts
+++ b/apps/studio/data/database-policies/database-policies-query.ts
@@ -2,7 +2,7 @@ import { DEFAULT_PLATFORM_APPLICATION_NAME } from '@supabase/pg-meta/src/constan
import { useQuery } from '@tanstack/react-query'
import { databasePoliciesKeys } from './keys'
-import type { Policy } from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
+import type { Policy } from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
import { get, handleError } from '@/data/fetchers'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from '@/lib/constants'
diff --git a/apps/studio/data/database/database-query-constants.ts b/apps/studio/data/database/database-query-constants.ts
deleted file mode 100644
index f05a837a205..00000000000
--- a/apps/studio/data/database/database-query-constants.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// https://www.postgresql.org/docs/current/catalog-pg-constraint.html
-export enum FOREIGN_KEY_CASCADE_ACTION {
- NO_ACTION = 'a',
- RESTRICT = 'r',
- CASCADE = 'c',
- SET_NULL = 'n',
- SET_DEFAULT = 'd',
-}
diff --git a/apps/studio/data/database/entity-definitions-query.ts b/apps/studio/data/database/entity-definitions-query.ts
deleted file mode 100644
index a016eaca4ba..00000000000
--- a/apps/studio/data/database/entity-definitions-query.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { getEntityDefinitionsSql } from '@supabase/pg-meta'
-import { useQuery } from '@tanstack/react-query'
-
-import { databaseKeys } from './keys'
-import { executeSql } from '@/data/sql/execute-sql-mutation'
-import { ResponseError, UseCustomQueryOptions } from '@/types'
-
-export type EntityDefinitionsVariables = {
- limit?: number
- projectRef?: string
- connectionString?: string | null
- schemas: string[]
-}
-
-export async function getEntityDefinitions(
- { projectRef, connectionString, schemas, limit }: EntityDefinitionsVariables,
- signal?: AbortSignal
-) {
- const sql = getEntityDefinitionsSql({ schemas, limit })
- const { result } = await executeSql(
- {
- projectRef,
- connectionString,
- sql,
- queryKey: ['entity-definitions', schemas],
- },
- signal
- )
-
- return result[0].data.definitions
-}
-
-type EntityDefinition = { id: number; sql: string }
-export type EntityDefinitionsData = EntityDefinition[]
-export type EntityDefinitionsError = ResponseError
-
-export const useEntityDefinitionsQuery = <TData = EntityDefinitionsData>(
- { projectRef, connectionString, schemas, limit }: EntityDefinitionsVariables,
- {
- enabled = true,
- ...options
- }: UseCustomQueryOptions<EntityDefinitionsData, EntityDefinitionsError, TData> = {}
-) =>
- useQuery<EntityDefinitionsData, EntityDefinitionsError, TData>({
- queryKey: databaseKeys.entityDefinitions(projectRef, schemas),
- queryFn: ({ signal }) =>
- getEntityDefinitions({ projectRef, connectionString, schemas, limit }, signal),
- enabled: enabled && typeof projectRef !== 'undefined' && schemas.length > 0,
- ...options,
- })
diff --git a/apps/studio/data/database/pgbouncer-status-query.ts b/apps/studio/data/database/pgbouncer-status-query.ts
deleted file mode 100644
index 6354168e155..00000000000
--- a/apps/studio/data/database/pgbouncer-status-query.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-
-import { databaseKeys } from './keys'
-import { get, handleError } from '@/data/fetchers'
-import type { ResponseError, UseCustomQueryOptions } from '@/types'
-
-export type PgbouncerStatusVariables = {
- projectRef?: string
-}
-
-export async function getPgbouncerStatus(
- { projectRef }: PgbouncerStatusVariables,
- signal?: AbortSignal
-) {
- if (!projectRef) throw new Error('projectRef is required')
-
- const { data, error } = await get('/platform/projects/{ref}/config/pgbouncer/status', {
- params: { path: { ref: projectRef } },
- signal,
- })
- if (error) handleError(error)
- return data
-}
-
-export type PgbouncerStatusData = Awaited<ReturnType<typeof getPgbouncerStatus>>
-export type PgbouncerStatusError = ResponseError
-
-export const usePgbouncerStatusQuery = <TData = PgbouncerStatusData>(
- { projectRef }: PgbouncerStatusVariables,
- {
- enabled = true,
- ...options
- }: UseCustomQueryOptions<PgbouncerStatusData, PgbouncerStatusError, TData> = {}
-) =>
- useQuery<PgbouncerStatusData, PgbouncerStatusError, TData>({
- queryKey: databaseKeys.pgbouncerStatus(projectRef),
- queryFn: ({ signal }) => getPgbouncerStatus({ projectRef }, signal),
- enabled: enabled && typeof projectRef !== 'undefined',
- ...options,
- })
diff --git a/apps/studio/data/database/schemas-query.ts b/apps/studio/data/database/schemas-query.ts
index 9cdced293f7..fe2a816fdcf 100644
--- a/apps/studio/data/database/schemas-query.ts
+++ b/apps/studio/data/database/schemas-query.ts
@@ -4,6 +4,7 @@ import { z } from 'zod'
import { databaseKeys } from './keys'
import { executeSql } from '@/data/sql/execute-sql-mutation'
+import { EMPTY_ARR } from '@/lib/void'
import { ResponseError, UseCustomQueryOptions } from '@/types'
export type SchemasVariables = {
@@ -32,7 +33,7 @@ export async function getSchemas(
signal
)
- return result
+ return Array.isArray(result) ? result : EMPTY_ARR
}
export const useSchemasQuery = <TData = SchemasData>(
diff --git a/apps/studio/data/entitlements/entitlements-query.ts b/apps/studio/data/entitlements/entitlements-query.ts
index 832ad627abe..697fdcdbb46 100644
--- a/apps/studio/data/entitlements/entitlements-query.ts
+++ b/apps/studio/data/entitlements/entitlements-query.ts
@@ -3,6 +3,7 @@ import type { components } from 'api-types'
import { get, handleError } from '@/data/fetchers'
import { organizationKeys } from '@/data/organizations/keys'
+import { EMPTY_ARR } from '@/lib/void'
import { UseCustomQueryOptions } from '@/types'
import { ResponseError } from '@/types/base'
@@ -32,7 +33,10 @@ export async function getEntitlements(
})
if (error) handleError(error)
- return data
+ return {
+ ...data,
+ entitlements: Array.isArray(data?.entitlements) ? data.entitlements : EMPTY_ARR,
+ }
}
export type EntitlementsData = Awaited<ReturnType<typeof getEntitlements>>
diff --git a/apps/studio/data/fdw/fdws-query.ts b/apps/studio/data/fdw/fdws-query.ts
index 66005773fb8..b081cbfd78b 100644
--- a/apps/studio/data/fdw/fdws-query.ts
+++ b/apps/studio/data/fdw/fdws-query.ts
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
import { fdwKeys } from './keys'
import { executeSql } from '@/data/sql/execute-sql-mutation'
+import { EMPTY_ARR } from '@/lib/void'
import { ResponseError, UseCustomQueryOptions } from '@/types'
export type FDWColumn = {
@@ -43,7 +44,7 @@ export async function getFDWs(
signal
)
- return result as FDW[]
+ return (Array.isArray(result) ? result : EMPTY_ARR) as FDW[]
}
export type FDWsData = Awaited<ReturnType<typeof getFDWs>>
diff --git a/apps/studio/data/lint/lint-query.ts b/apps/studio/data/lint/lint-query.ts
index 06280a23079..44c7db0c0f6 100644
--- a/apps/studio/data/lint/lint-query.ts
+++ b/apps/studio/data/lint/lint-query.ts
@@ -5,6 +5,7 @@ import { lintKeys } from './keys'
import { get, handleError } from '@/data/fetchers'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { PROJECT_STATUS } from '@/lib/constants'
+import { EMPTY_ARR } from '@/lib/void'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
type ProjectLintsVariables = {
@@ -24,7 +25,7 @@ export async function getProjectLints({ projectRef }: ProjectLintsVariables, sig
if (error) handleError(error)
- return data
+ return Array.isArray(data) ? data : EMPTY_ARR
}
export type ProjectLintsData = Awaited<ReturnType<typeof getProjectLints>>
diff --git a/apps/studio/data/logs/otel-inspection.utils.ts b/apps/studio/data/logs/otel-inspection.utils.ts
index 125d9ebb512..8963d25997b 100644
--- a/apps/studio/data/logs/otel-inspection.utils.ts
+++ b/apps/studio/data/logs/otel-inspection.utils.ts
@@ -12,6 +12,17 @@ export type OtelLogRow = {
log_attributes?: Record<string, any>
}
+// OTEL timestamps arrive as an ISO string (sometimes space-separated, no zone)
+// or as numeric microseconds. Strings have a `T` or `-`; anything else is micros.
+export function parseOtelTimestamp(timestamp: unknown): Date {
+ const ts = String(timestamp ?? '')
+ const looksLikeIso = /[T-]/.test(ts)
+ if (!looksLikeIso) return new Date(Number(ts) / 1000)
+ const withT = ts.includes(' ') ? ts.replace(' ', 'T') : ts
+ const hasTz = /Z$|[+-]\d{2}:?\d{2}$/.test(withT)
+ return new Date(hasTz ? withT : `${withT}Z`)
+}
+
const httpStatusToLevel = (status: number): Level => {
if (status >= 500) return 'error'
if (status >= 400) return 'warning'
diff --git a/apps/studio/data/logs/otel-log-keys-query.ts b/apps/studio/data/logs/otel-log-keys-query.ts
new file mode 100644
index 00000000000..c4918af0af8
--- /dev/null
+++ b/apps/studio/data/logs/otel-log-keys-query.ts
@@ -0,0 +1,45 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { executeAnalyticsSql } from './execute-analytics-sql'
+import { logsAllEndpointUrl } from './logs-endpoint'
+import { analyticsLiteral, safeSql } from './safe-analytics-sql'
+
+const LOOKBACK_HOURS = 24 * 7
+
+export async function fetchOtelLogKeys({
+ projectRef,
+ source,
+ signal,
+}: {
+ projectRef: string
+ source: string
+ signal?: AbortSignal
+}): Promise<string[]> {
+ const end = new Date()
+ const start = new Date(end.getTime() - LOOKBACK_HOURS * 60 * 60 * 1000)
+ const sql = safeSql`SELECT arrayJoin(mapKeys(log_attributes)) AS key, count() AS n FROM logs WHERE source = ${analyticsLiteral(source)} GROUP BY key ORDER BY n DESC LIMIT 500`
+ const data = await executeAnalyticsSql({
+ projectRef,
+ endpoint: logsAllEndpointUrl(true),
+ sql,
+ iso_timestamp_start: start.toISOString(),
+ iso_timestamp_end: end.toISOString(),
+ method: 'post',
+ signal,
+ })
+ const rows = (data?.result ?? []) as { key: string }[]
+ return rows.map((r) => r.key).filter(Boolean)
+}
+
+export function useOtelLogKeysQuery(
+ { projectRef, source }: { projectRef?: string; source?: string },
+ { enabled = true }: { enabled?: boolean } = {}
+) {
+ return useQuery({
+ queryKey: ['projects', projectRef, 'otel-log-keys', source],
+ queryFn: ({ signal }) =>
+ fetchOtelLogKeys({ projectRef: projectRef ?? '', source: source ?? '', signal }),
+ enabled: enabled && Boolean(projectRef) && Boolean(source),
+ staleTime: 5 * 60 * 1000,
+ })
+}
diff --git a/apps/studio/data/logs/unified-logs-infinite-query.ts b/apps/studio/data/logs/unified-logs-infinite-query.ts
index edf5d868175..61af3c1b476 100644
--- a/apps/studio/data/logs/unified-logs-infinite-query.ts
+++ b/apps/studio/data/logs/unified-logs-infinite-query.ts
@@ -4,6 +4,7 @@ import { useFlag } from 'common'
import { executeAnalyticsSql } from './execute-analytics-sql'
import { logsKeys } from './keys'
import { logsAllEndpointUrl, pickLogsQueryBuilder } from './logs-endpoint'
+import { parseOtelTimestamp } from './otel-inspection.utils'
import { analyticsLiteral, safeSql } from './safe-analytics-sql'
import { extractLogMetadata } from './unified-logs.utils'
import { getUnifiedLogsQuery } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.queries'
@@ -124,16 +125,7 @@ export async function getUnifiedLogs(
const resultData = data?.result ?? []
const result = resultData.map((row: any) => {
- // Disambiguate timestamp shape by format, not by Number.isFinite — a
- // numeric string of microseconds is always finite, so checking finite-
- // ness can't tell us whether the value is microseconds or already-ms.
- // ISO-like strings contain `T` or `-` and are parsed via Date; anything
- // else is treated as numeric microseconds-since-epoch.
- const ts = String(row.timestamp ?? '')
- const looksLikeIso = /[T-]/.test(ts)
- const date = looksLikeIso
- ? new Date(/Z$|[+-]\d{2}:?\d{2}$/.test(ts) ? ts : `${ts}Z`)
- : new Date(Number(ts) / 1000)
+ const date = parseOtelTimestamp(row.timestamp)
const { status, method, pathname } = extractLogMetadata(row)
diff --git a/apps/studio/data/misc/parse-query-mutation.ts b/apps/studio/data/misc/parse-query-mutation.ts
index 0a36df7bca5..a30e4eb930d 100644
--- a/apps/studio/data/misc/parse-query-mutation.ts
+++ b/apps/studio/data/misc/parse-query-mutation.ts
@@ -6,9 +6,12 @@ import { BASE_PATH } from '@/lib/constants'
import { ResponseError, UseCustomMutationOptions } from '@/types'
type ParseSQLQueryVariables = { sql: string }
+export type ParseSQLQueryOperations = 'SELECT' | 'INSERT' | 'UPDATE' | 'DELETE' | undefined
export type ParseSQLQueryResponse = {
tables: string[]
- operation: 'SELECT' | 'INSERT' | 'UPDATE' | 'DELETE' | undefined
+ operation: ParseSQLQueryOperations
+ whereClause: string | null
+ statementCount: number
}
export async function parseSQLQuery({ sql }: ParseSQLQueryVariables) {
diff --git a/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts b/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
index c15e19deea5..ccd70b2cd29 100644
--- a/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
+++ b/apps/studio/data/organization-members/organization-invitation-accept-mutation.ts
@@ -3,6 +3,7 @@ import { toast } from 'sonner'
import { handleError, post } from '@/data/fetchers'
import { invalidateOrganizationsQuery } from '@/data/organizations/organizations-query'
+import { invalidatePermissionsQuery } from '@/data/permissions/permissions-query'
import { useInvalidateProjectsInfiniteQuery } from '@/data/projects/org-projects-infinite-query'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
@@ -47,8 +48,11 @@ export const useOrganizationAcceptInvitationMutation = ({
>({
mutationFn: (vars) => acceptOrganizationInvitation(vars),
async onSuccess(data, variables, context) {
- await invalidateOrganizationsQuery(queryClient)
- await invalidateProjectsQuery()
+ await Promise.all([
+ invalidateOrganizationsQuery(queryClient),
+ invalidateProjectsQuery(),
+ invalidatePermissionsQuery(queryClient),
+ ])
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
diff --git a/apps/studio/data/permissions/permissions-query.ts b/apps/studio/data/permissions/permissions-query.ts
index 8102973331f..29805386523 100644
--- a/apps/studio/data/permissions/permissions-query.ts
+++ b/apps/studio/data/permissions/permissions-query.ts
@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, type QueryClient } from '@tanstack/react-query'
import { useIsLoggedIn } from 'common'
import { permissionKeys } from './keys'
@@ -44,3 +44,7 @@ export const usePermissionsQuery = <TData = PermissionsData>({
staleTime: 5 * 60 * 1000,
})
}
+
+export function invalidatePermissionsQuery(client: QueryClient) {
+ return client.invalidateQueries({ queryKey: permissionKeys.list() })
+}
diff --git a/apps/studio/data/projects/projects-infinite-query.ts b/apps/studio/data/projects/projects-infinite-query.ts
index fe114fa911e..0e3b4dfcaf5 100644
--- a/apps/studio/data/projects/projects-infinite-query.ts
+++ b/apps/studio/data/projects/projects-infinite-query.ts
@@ -70,9 +70,9 @@ export const useProjectsInfiniteQuery = <TData = ProjectsInfiniteData>(
const page = pages.length
const currentTotalCount = page * limit
// @ts-ignore [Joshen] API type issue for Version 2 endpoints
- const totalCount = lastPage.pagination.count
+ const totalCount = lastPage?.pagination?.count
- if (currentTotalCount >= totalCount) return undefined
+ if (totalCount === undefined || currentTotalCount >= totalCount) return undefined
return page
},
...options,
diff --git a/apps/studio/data/replication/create-destination-pipeline-mutation.test.ts b/apps/studio/data/replication/create-destination-pipeline-mutation.test.ts
index ed6c4c089c1..66004344a18 100644
--- a/apps/studio/data/replication/create-destination-pipeline-mutation.test.ts
+++ b/apps/studio/data/replication/create-destination-pipeline-mutation.test.ts
@@ -78,4 +78,37 @@ describe('buildDucklakeApiConfig', () => {
},
})
})
+
+ it('omits blank custom secret fields when requested', () => {
+ expect(
+ buildDucklakeApiConfig(
+ {
+ catalogUrl: ' ',
+ dataPath: 's3://bucket/path',
+ poolSize: 4,
+ s3AccessKeyId: '',
+ s3SecretAccessKey: '\n',
+ s3Region: 'eu-west-1',
+ s3Endpoint: 's3.example.com',
+ s3UrlStyle: 'path',
+ s3UseSsl: true,
+ metadataSchema: 'ducklake',
+ },
+ { omitBlankSecrets: true }
+ )
+ ).toEqual({
+ ducklake: {
+ catalog_url: undefined,
+ data_path: 's3://bucket/path',
+ pool_size: 4,
+ s3_access_key_id: undefined,
+ s3_secret_access_key: undefined,
+ s3_region: 'eu-west-1',
+ s3_endpoint: 's3.example.com',
+ s3_url_style: 'path',
+ s3_use_ssl: true,
+ metadata_schema: 'ducklake',
+ },
+ })
+ })
})
diff --git a/apps/studio/data/replication/create-destination-pipeline-mutation.ts b/apps/studio/data/replication/create-destination-pipeline-mutation.ts
index a2682ea00d3..4be39468cd0 100644
--- a/apps/studio/data/replication/create-destination-pipeline-mutation.ts
+++ b/apps/studio/data/replication/create-destination-pipeline-mutation.ts
@@ -2,6 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
import type { components } from 'api-types'
import { toast } from 'sonner'
+import { optionalSecret } from './destination-secret-utils'
import { replicationKeys } from './keys'
import { handleError, post } from '@/data/fetchers'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
@@ -66,9 +67,20 @@ function isDucklakeSupabaseConfig(
return 'catalogProjectRef' in config
}
+const maybeOmitBlankSecret = (value: string | undefined, omitBlankSecrets: boolean) => {
+ if (omitBlankSecrets) return optionalSecret(value)
+
+ return value
+}
+
// Maps the studio-side DuckLake config to the snake_case `{ ducklake: ... }` payload accepted
// by the platform API. Shared by the create / update / validate mutations.
-export function buildDucklakeApiConfig(config: DucklakeDestinationConfig) {
+export function buildDucklakeApiConfig(
+ config: DucklakeDestinationConfig,
+ options: { omitBlankSecrets?: boolean } = {}
+) {
+ const omitBlankSecrets = options.omitBlankSecrets ?? false
+
if (isDucklakeSupabaseConfig(config)) {
return {
ducklake: {
@@ -92,11 +104,11 @@ export function buildDucklakeApiConfig(config: DucklakeDestinationConfig) {
return {
ducklake: {
- catalog_url: config.catalogUrl,
+ catalog_url: maybeOmitBlankSecret(config.catalogUrl, omitBlankSecrets),
data_path: config.dataPath,
pool_size: config.poolSize,
- s3_access_key_id: config.s3AccessKeyId,
- s3_secret_access_key: config.s3SecretAccessKey,
+ s3_access_key_id: maybeOmitBlankSecret(config.s3AccessKeyId, omitBlankSecrets),
+ s3_secret_access_key: maybeOmitBlankSecret(config.s3SecretAccessKey, omitBlankSecrets),
s3_region: config.s3Region,
s3_endpoint: config.s3Endpoint,
s3_url_style: config.s3UrlStyle,
diff --git a/apps/studio/data/replication/delete-tenant-mutation.ts b/apps/studio/data/replication/delete-tenant-mutation.ts
index d7696c6225c..26033fae249 100644
--- a/apps/studio/data/replication/delete-tenant-mutation.ts
+++ b/apps/studio/data/replication/delete-tenant-mutation.ts
@@ -55,7 +55,7 @@ export const useDeleteReplicationTenantMutation = ({
},
async onError(data, variables, context) {
if (onError === undefined) {
- toast.error(`Failed to disable external replication: ${data.message}`)
+ toast.error(`Failed to disable Pipelines: ${data.message}`)
} else {
onError(data, variables, context)
}
diff --git a/apps/studio/data/replication/destination-secret-utils.test.ts b/apps/studio/data/replication/destination-secret-utils.test.ts
new file mode 100644
index 00000000000..e9838d5e8e1
--- /dev/null
+++ b/apps/studio/data/replication/destination-secret-utils.test.ts
@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+
+import { optionalSecret } from './destination-secret-utils'
+
+describe('optionalSecret', () => {
+ it('omits blank secret values', () => {
+ expect(optionalSecret('')).toBeUndefined()
+ expect(optionalSecret(' ')).toBeUndefined()
+ expect(optionalSecret(undefined)).toBeUndefined()
+ })
+
+ it('omits masked placeholder values even when shortened', () => {
+ expect(optionalSecret('••••••••••••••••')).toBeUndefined()
+ expect(optionalSecret('••••••••')).toBeUndefined()
+ expect(optionalSecret(' •••••• ')).toBeUndefined()
+ })
+
+ it('keeps provided replacement secrets', () => {
+ expect(optionalSecret('new-secret')).toBe('new-secret')
+ })
+})
diff --git a/apps/studio/data/replication/destination-secret-utils.ts b/apps/studio/data/replication/destination-secret-utils.ts
new file mode 100644
index 00000000000..bda1f5ea666
--- /dev/null
+++ b/apps/studio/data/replication/destination-secret-utils.ts
@@ -0,0 +1,11 @@
+const MASKED_SECRET_PLACEHOLDER_PATTERN = /^•+$/
+
+export const optionalSecret = (value: string | undefined) => {
+ const trimmed = value?.trim()
+
+ if (!trimmed || MASKED_SECRET_PLACEHOLDER_PATTERN.test(trimmed)) {
+ return undefined
+ }
+
+ return value
+}
diff --git a/apps/studio/data/replication/update-destination-pipeline-mutation.ts b/apps/studio/data/replication/update-destination-pipeline-mutation.ts
index 53695c9e458..ea537ae95ea 100644
--- a/apps/studio/data/replication/update-destination-pipeline-mutation.ts
+++ b/apps/studio/data/replication/update-destination-pipeline-mutation.ts
@@ -7,6 +7,7 @@ import {
buildDucklakeApiConfig,
DestinationConfig,
} from './create-destination-pipeline-mutation'
+import { optionalSecret } from './destination-secret-utils'
import { replicationKeys } from './keys'
import { handleError, post } from '@/data/fetchers'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
@@ -27,6 +28,11 @@ export type UpdateDestinationPipelineParams = {
}
}
+type UpdateDestinationPipelineBody =
+ components['schemas']['UpdateReplicationDestinationPipelineBody']
+type UpdateDestinationConfig = UpdateDestinationPipelineBody['destination_config']
+type UpdatePipelineConfig = UpdateDestinationPipelineBody['pipeline_config']
+
async function updateDestinationPipeline(
{
destinationId: destinationId,
@@ -48,7 +54,7 @@ async function updateDestinationPipeline(
if (!projectRef) throw new Error('projectRef is required')
// Build destination_config based on the type
- let destination_config: components['schemas']['UpdateReplicationDestinationPipelineBody']['destination_config']
+ let destination_config: UpdateDestinationConfig
if ('bigQuery' in destinationConfig) {
const { projectId, datasetId, serviceAccountKey, connectionPoolSize, maxStalenessMins } =
@@ -57,11 +63,11 @@ async function updateDestinationPipeline(
big_query: {
project_id: projectId,
dataset_id: datasetId,
- service_account_key: serviceAccountKey,
+ service_account_key: optionalSecret(serviceAccountKey),
connection_pool_size: connectionPoolSize,
max_staleness_mins: maxStalenessMins,
},
- } as components['schemas']['UpdateReplicationDestinationPipelineBody']['destination_config']
+ } as UpdateDestinationConfig
} else if ('iceberg' in destinationConfig) {
const {
projectRef: icebergProjectRef,
@@ -78,17 +84,17 @@ async function updateDestinationPipeline(
project_ref: icebergProjectRef,
warehouse_name: warehouseName,
namespace: namespace,
- catalog_token: catalogToken,
- s3_access_key_id: s3AccessKeyId,
- s3_secret_access_key: s3SecretAccessKey,
+ catalog_token: optionalSecret(catalogToken),
+ s3_access_key_id: optionalSecret(s3AccessKeyId),
+ s3_secret_access_key: optionalSecret(s3SecretAccessKey),
s3_region: s3Region,
},
},
- }
+ } as UpdateDestinationConfig
} else if ('ducklake' in destinationConfig) {
- destination_config = buildDucklakeApiConfig(
- destinationConfig.ducklake
- ) as components['schemas']['UpdateReplicationDestinationPipelineBody']['destination_config']
+ destination_config = buildDucklakeApiConfig(destinationConfig.ducklake, {
+ omitBlankSecrets: true,
+ }) as UpdateDestinationConfig
} else if ('snowflake' in destinationConfig) {
const { accountId, user, privateKey, privateKeyPassphrase, database, schema, role } =
destinationConfig.snowflake
@@ -96,13 +102,13 @@ async function updateDestinationPipeline(
snowflake: {
account_id: accountId,
user,
- private_key: privateKey,
- private_key_passphrase: privateKeyPassphrase,
+ private_key: optionalSecret(privateKey),
+ private_key_passphrase: optionalSecret(privateKeyPassphrase),
database,
schema,
role,
},
- } as unknown as components['schemas']['UpdateReplicationDestinationPipelineBody']['destination_config']
+ } as unknown as UpdateDestinationConfig
} else {
throw new Error(
'Invalid destination config: must specify bigQuery, iceberg, ducklake, or snowflake'
@@ -125,8 +131,7 @@ async function updateDestinationPipeline(
destination_config,
source_id: sourceId,
destination_name: destinationName,
- pipeline_config:
- pipeline_config as components['schemas']['UpdateReplicationDestinationPipelineBody']['pipeline_config'],
+ pipeline_config: pipeline_config as UpdatePipelineConfig,
},
signal,
}
diff --git a/apps/studio/data/storage/bucket-delete-mutation.ts b/apps/studio/data/storage/bucket-delete-mutation.ts
index e789f7de73e..67870781f21 100644
--- a/apps/studio/data/storage/bucket-delete-mutation.ts
+++ b/apps/studio/data/storage/bucket-delete-mutation.ts
@@ -45,9 +45,17 @@ export const useBucketDeleteMutation = ({
return useMutation<BucketDeleteData, ResponseError, BucketDeleteVariables>({
mutationFn: (vars) => deleteBucket(vars),
async onSuccess(data, variables, context) {
- const { projectRef } = variables
- await queryClient.invalidateQueries({ queryKey: storageKeys.buckets(projectRef) })
+ const { projectRef, id } = variables
+
+ const deletedBucketQueryKey = storageKeys.bucket(projectRef, id)
+ await queryClient.cancelQueries({ queryKey: deletedBucketQueryKey })
+ queryClient.removeQueries({ queryKey: deletedBucketQueryKey })
+
await onSuccess?.(data, variables, context)
+
+ // Fire-and-forget: only the bucket list needs refreshing, and it shouldn't block
+ // onSuccess (modal close/navigation) above.
+ void queryClient.invalidateQueries({ queryKey: storageKeys.bucketsList(projectRef) })
},
async onError(data, variables, context) {
if (onError === undefined) {
diff --git a/apps/studio/data/storage/buckets-query.ts b/apps/studio/data/storage/buckets-query.ts
index f566d1b7445..ab9896e98e0 100644
--- a/apps/studio/data/storage/buckets-query.ts
+++ b/apps/studio/data/storage/buckets-query.ts
@@ -227,6 +227,11 @@ export const useBucketInfoQueryPreferCached = (bucketId?: string, projectRef?: s
const shouldRetryBucketsQuery = (failureCount: number, error: unknown) => {
if (error instanceof ResponseError) {
+ // If the bucket doesn't exist or was deleted, don't retry — it will never succeed.
+ if (error.code === 404) {
+ return false
+ }
+
if (
error.message.includes('Missing tenant config') ||
error.message.includes('Project has no active API keys')
diff --git a/apps/studio/data/subscriptions/project-addons-query.ts b/apps/studio/data/subscriptions/project-addons-query.ts
index 5f98d4c310e..28a7b7cd25c 100644
--- a/apps/studio/data/subscriptions/project-addons-query.ts
+++ b/apps/studio/data/subscriptions/project-addons-query.ts
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query'
import { subscriptionKeys } from './keys'
import { get, handleError } from '@/data/fetchers'
import { IS_PLATFORM } from '@/lib/constants'
+import { EMPTY_ARR } from '@/lib/void'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
export type ProjectAddonsVariables = {
@@ -24,7 +25,11 @@ export async function getProjectAddons(
})
if (error) handleError(error)
- return data
+ return {
+ ...data,
+ selected_addons: Array.isArray(data?.selected_addons) ? data.selected_addons : EMPTY_ARR,
+ available_addons: Array.isArray(data?.available_addons) ? data.available_addons : EMPTY_ARR,
+ }
}
export type ProjectAddonsData = Awaited<ReturnType<typeof getProjectAddons>>
diff --git a/apps/studio/data/table-rows/operation-queue-save-mutation.test.ts b/apps/studio/data/table-rows/operation-queue-save-mutation.test.ts
new file mode 100644
index 00000000000..e81a01e92fb
--- /dev/null
+++ b/apps/studio/data/table-rows/operation-queue-save-mutation.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import { getOperationSqlStatements } from './operation-queue-save-mutation'
+import type { Entity } from '@/data/table-editor/table-editor-types'
+import { QueuedOperation, QueuedOperationType } from '@/state/table-editor-operation-queue.types'
+
+const usersTable = { id: 1, name: 'users', schema: 'public' } as Entity
+
+function createEditOperation(
+ columnName: string,
+ newValue: unknown,
+ rowIdentifiers: Record<string, unknown> = { id: 1 }
+): QueuedOperation {
+ return {
+ id: `${columnName}-${String(newValue)}`,
+ tableId: 1,
+ timestamp: 1,
+ type: QueuedOperationType.EDIT_CELL_CONTENT,
+ payload: {
+ rowIdentifiers,
+ columnName,
+ oldValue: undefined,
+ newValue,
+ table: usersTable,
+ enumArrayColumns: [],
+ },
+ }
+}
+
+describe('getOperationSqlStatements', () => {
+ it('merges edits for the same row into one update statement', () => {
+ const statements = getOperationSqlStatements([
+ createEditOperation('id', '4'),
+ createEditOperation('name', 'Ram 1'),
+ ])
+
+ expect(statements).toHaveLength(1)
+
+ const sql = String(statements[0])
+ expect(sql).toContain('update public.users set (id,name)')
+ expect(sql).toContain('"id":"4"')
+ expect(sql).toContain('"name":"Ram 1"')
+ expect(sql.match(/where id = 1/g)).toHaveLength(1)
+ })
+
+ it('keeps edits for different rows as separate update statements', () => {
+ const statements = getOperationSqlStatements([
+ createEditOperation('name', 'Ram 1', { id: 1 }),
+ createEditOperation('name', 'Shyam 1', { id: 2 }),
+ ])
+
+ expect(statements).toHaveLength(2)
+ expect(String(statements[0])).toContain('where id = 1')
+ expect(String(statements[1])).toContain('where id = 2')
+ })
+
+ it('does not merge rows whose identifier values would collide with delimiter keys', () => {
+ const statements = getOperationSqlStatements([
+ createEditOperation('name', 'Row 1', { a: 'x', b: 'y|b:z' }),
+ createEditOperation('name', 'Row 2', { a: 'x|b:y', b: 'z' }),
+ ])
+
+ expect(statements).toHaveLength(2)
+ })
+})
diff --git a/apps/studio/data/table-rows/operation-queue-save-mutation.ts b/apps/studio/data/table-rows/operation-queue-save-mutation.ts
index 67c554cd151..e31e920e8fc 100644
--- a/apps/studio/data/table-rows/operation-queue-save-mutation.ts
+++ b/apps/studio/data/table-rows/operation-queue-save-mutation.ts
@@ -11,9 +11,22 @@ import type { PendingAddRow } from '@/components/grid/types'
import { executeSql } from '@/data/sql/execute-sql-mutation'
import { RoleImpersonationState, wrapWithRoleImpersonation } from '@/lib/role-impersonation'
import { isRoleImpersonationEnabled } from '@/state/role-impersonation-state'
-import { QueuedOperation, QueuedOperationType } from '@/state/table-editor-operation-queue.types'
+import {
+ isEditCellContentOperation,
+ QueuedOperation,
+ QueuedOperationType,
+ type EditCellContentOperation,
+} from '@/state/table-editor-operation-queue.types'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
+function getEditCellOperationRowKey(operation: EditCellContentOperation): string {
+ const rowIdentifiersKey = JSON.stringify(
+ Object.entries(operation.payload.rowIdentifiers).sort(([a], [b]) => a.localeCompare(b))
+ )
+
+ return `${operation.tableId}:${rowIdentifiersKey}`
+}
+
export type OperationQueueSaveVariables = {
projectRef: string
connectionString?: string | null
@@ -81,6 +94,55 @@ function sortOperations(operations: readonly QueuedOperation[]): QueuedOperation
})
}
+function stripTrailingSemicolon(sql: SafeSqlFragment): SafeSqlFragment {
+ return (sql.endsWith(';') ? sql.slice(0, -1) : sql) as SafeSqlFragment
+}
+
+export function getOperationSqlStatements(
+ operations: readonly QueuedOperation[]
+): Array<SafeSqlFragment> {
+ const statements: Array<SafeSqlFragment> = []
+ const editCellOperationsByRow = new Map<string, EditCellContentOperation[]>()
+
+ for (const operation of sortOperations(operations)) {
+ if (!isEditCellContentOperation(operation)) {
+ statements.push(stripTrailingSemicolon(getOperationSql(operation)))
+ continue
+ }
+
+ const key = getEditCellOperationRowKey(operation)
+ const existing = editCellOperationsByRow.get(key)
+ if (existing) {
+ existing.push(operation)
+ continue
+ }
+ editCellOperationsByRow.set(key, [operation])
+ }
+
+ for (const editCellOperations of editCellOperationsByRow.values()) {
+ const firstOperation = editCellOperations[0]
+ const { table, rowIdentifiers } = firstOperation.payload
+
+ statements.push(
+ stripTrailingSemicolon(
+ getTableRowUpdateSql({
+ table: { id: table.id, name: table.name, schema: table.schema },
+ configuration: { identifiers: rowIdentifiers },
+ payload: Object.fromEntries(
+ editCellOperations.map(({ payload }) => [payload.columnName, payload.newValue])
+ ),
+ enumArrayColumns: [
+ ...new Set(editCellOperations.flatMap(({ payload }) => payload.enumArrayColumns ?? [])),
+ ],
+ returning: false,
+ })
+ )
+ )
+ }
+
+ return statements
+}
+
/**
* Saves all queued operations in a single database transaction.
* If any operation fails, the entire transaction is rolled back.
@@ -95,11 +157,7 @@ export async function saveOperationQueue({
return { result: [] }
}
- const sortedOperations = sortOperations(operations)
- const statements: Array<SafeSqlFragment> = sortedOperations.map((op) => {
- const sql = getOperationSql(op)
- return (sql.endsWith(';') ? sql.slice(0, -1) : sql) as SafeSqlFragment
- })
+ const statements = getOperationSqlStatements(operations)
const transactionSql = wrapWithTransaction(safeSql`${joinSqlFragments(statements, ';\n')};`)
diff --git a/apps/studio/data/table-rows/utils.test.ts b/apps/studio/data/table-rows/utils.test.ts
new file mode 100644
index 00000000000..d6e449618d8
--- /dev/null
+++ b/apps/studio/data/table-rows/utils.test.ts
@@ -0,0 +1,59 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatFilterValue } from './utils'
+import type { Filter } from '@/components/grid/types'
+
+const table = {
+ columns: [
+ { name: 'id', format: 'int8' },
+ { name: 'count', format: 'int4' },
+ { name: 'name', format: 'text' },
+ { name: 'price', format: 'numeric' },
+ ],
+}
+
+const makeFilter = (column: string, value: any): Filter => ({
+ column,
+ operator: '=',
+ value,
+})
+
+describe('formatFilterValue', () => {
+ it('returns the value untouched for non-numerical columns', () => {
+ expect(formatFilterValue(table, makeFilter('name', '123'))).toBe('123')
+ })
+
+ it('coerces in-range numerical values to a number', () => {
+ expect(formatFilterValue(table, makeFilter('count', '42'))).toBe(42)
+ expect(formatFilterValue(table, makeFilter('id', '-42'))).toBe(-42)
+ })
+
+ it('returns the original string when the value is not a valid number', () => {
+ expect(formatFilterValue(table, makeFilter('count', 'abc'))).toBe('abc')
+ })
+
+ it('preserves large positive bigints as strings to avoid precision loss', () => {
+ const int8Max = '9223372036854775807'
+ expect(formatFilterValue(table, makeFilter('id', int8Max))).toBe(int8Max)
+ })
+
+ // Regression: the previous implementation only guarded the upper bound
+ // (numberValue > MAX_SAFE_INTEGER), so large negative bigints were converted
+ // through Number() and silently rounded, producing a wrong filter value.
+ it('preserves large negative bigints as strings to avoid precision loss', () => {
+ const int8Min = '-9223372036854775808'
+ expect(formatFilterValue(table, makeFilter('id', int8Min))).toBe(int8Min)
+
+ const justBelowSafe = '-9007199254740993'
+ expect(formatFilterValue(table, makeFilter('id', justBelowSafe))).toBe(justBelowSafe)
+ })
+
+ it('keeps the exact safe-integer bounds as numbers', () => {
+ expect(formatFilterValue(table, makeFilter('id', String(Number.MAX_SAFE_INTEGER)))).toBe(
+ Number.MAX_SAFE_INTEGER
+ )
+ expect(formatFilterValue(table, makeFilter('id', String(Number.MIN_SAFE_INTEGER)))).toBe(
+ Number.MIN_SAFE_INTEGER
+ )
+ })
+})
diff --git a/apps/studio/data/table-rows/utils.ts b/apps/studio/data/table-rows/utils.ts
index 4feb6adb43d..80aa54d9ded 100644
--- a/apps/studio/data/table-rows/utils.ts
+++ b/apps/studio/data/table-rows/utils.ts
@@ -18,9 +18,9 @@ export function formatFilterValue(
const column = table.columns.find((x) => x.name == filter.column)
if (column && isNumericalColumn(column.format)) {
const numberValue = Number(filter.value)
- // Supports BigInt filter values
- if (Number.isNaN(numberValue) || numberValue > Number.MAX_SAFE_INTEGER) return filter.value
- else return Number(filter.value)
+ if (Number.isNaN(numberValue) || Math.abs(numberValue) > Number.MAX_SAFE_INTEGER)
+ return filter.value
+ else return numberValue
}
return filter.value
}
diff --git a/apps/studio/data/usage/resource-warnings-query.ts b/apps/studio/data/usage/resource-warnings-query.ts
index df7385ea546..73ef9ca1565 100644
--- a/apps/studio/data/usage/resource-warnings-query.ts
+++ b/apps/studio/data/usage/resource-warnings-query.ts
@@ -4,6 +4,7 @@ import { IS_PLATFORM } from 'common'
import { usageKeys } from './keys'
import type { components } from '@/data/api'
import { get, handleError } from '@/data/fetchers'
+import { EMPTY_ARR } from '@/lib/void'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
export type ResourceWarningsVariables = {
@@ -26,7 +27,7 @@ export async function getResourceWarnings(
})
if (error) handleError(error)
- return data
+ return Array.isArray(data) ? data : EMPTY_ARR
}
export type ResourceWarning = components['schemas']['ProjectResourceWarningsResponse']
diff --git a/apps/studio/data/utils/deployment-commit-query.ts b/apps/studio/data/utils/deployment-commit-query.ts
index 44df7f26534..8729bd57cfd 100644
--- a/apps/studio/data/utils/deployment-commit-query.ts
+++ b/apps/studio/data/utils/deployment-commit-query.ts
@@ -5,7 +5,15 @@ import { BASE_PATH } from '@/lib/constants'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
export async function getDeploymentCommit() {
- const response = await fetchHandler(`${BASE_PATH}/api/get-deployment-commit`)
+ // `credentials: 'omit'` drops cookies for this one request — including the
+ // `__vdpl` skew-protection pin (TanStack, see router.tsx). With no pin cookie,
+ // Vercel's edge routes it to the LATEST deployment, so this check can detect a
+ // newer version even while the rest of the session stays pinned. The endpoint
+ // is public (no auth needed), and we keep the basePath URL so it still routes
+ // to studio in production (root `/api/*` there is the marketing site).
+ const response = await fetchHandler(`${BASE_PATH}/api/get-deployment-commit`, {
+ credentials: 'omit',
+ })
return (await response.json()) as { commitSha: string; commitTime: string }
}
diff --git a/apps/studio/data/utils/pagination.ts b/apps/studio/data/utils/pagination.ts
deleted file mode 100644
index ea72c3e45d6..00000000000
--- a/apps/studio/data/utils/pagination.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Utils for use in queries / mutations */
-
-export const DEFAULT_PAGE_SIZE = 100
-
-export function getPagination(page?: number, size: number = DEFAULT_PAGE_SIZE) {
- const limit = size
- const from = page ? page * limit : 0
- const to = page ? from + size - 1 : size - 1
-
- return { from, to }
-}
diff --git a/apps/studio/data/vault/vault-secret-update-mutation.ts b/apps/studio/data/vault/vault-secret-update-mutation.ts
index 942f722fdf8..f53237d998e 100644
--- a/apps/studio/data/vault/vault-secret-update-mutation.ts
+++ b/apps/studio/data/vault/vault-secret-update-mutation.ts
@@ -10,6 +10,7 @@ export type VaultSecretUpdateVariables = {
projectRef: string
connectionString?: string | null
id: string
+ skipClearCache?: boolean
} & Partial<VaultSecret>
export async function updateVaultSecret({
@@ -40,9 +41,15 @@ export const useVaultSecretUpdateMutation = ({
return useMutation<VaultSecretUpdateData, ResponseError, VaultSecretUpdateVariables>({
mutationFn: (vars) => updateVaultSecret(vars),
async onSuccess(data, variables, context) {
- const { id, projectRef } = variables
+ const { id, projectRef, skipClearCache = false } = variables
await Promise.all([
- queryClient.removeQueries({ queryKey: vaultSecretsKeys.getDecryptedValue(projectRef, id) }),
+ !skipClearCache
+ ? queryClient.removeQueries({
+ queryKey: vaultSecretsKeys.getDecryptedValue(projectRef, id),
+ })
+ : queryClient.invalidateQueries({
+ queryKey: vaultSecretsKeys.getDecryptedValue(projectRef, id),
+ }),
queryClient.invalidateQueries({ queryKey: vaultSecretsKeys.list(projectRef) }),
])
await onSuccess?.(data, variables, context)
diff --git a/apps/studio/fonts/CustomFont-Black.woff2 b/apps/studio/fonts/CustomFont-Black.woff2
deleted file mode 100644
index e3c834e57f2..00000000000
Binary files a/apps/studio/fonts/CustomFont-Black.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-BlackItalic.woff2 b/apps/studio/fonts/CustomFont-BlackItalic.woff2
deleted file mode 100644
index f84036283ec..00000000000
Binary files a/apps/studio/fonts/CustomFont-BlackItalic.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-Bold.woff2 b/apps/studio/fonts/CustomFont-Bold.woff2
deleted file mode 100644
index 5e7af459481..00000000000
Binary files a/apps/studio/fonts/CustomFont-Bold.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-BoldItalic.woff2 b/apps/studio/fonts/CustomFont-BoldItalic.woff2
deleted file mode 100644
index ac0edd55fd3..00000000000
Binary files a/apps/studio/fonts/CustomFont-BoldItalic.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-Book.woff2 b/apps/studio/fonts/CustomFont-Book.woff2
deleted file mode 100644
index abd31f7ec27..00000000000
Binary files a/apps/studio/fonts/CustomFont-Book.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-BookItalic.woff2 b/apps/studio/fonts/CustomFont-BookItalic.woff2
deleted file mode 100644
index d326c8672cc..00000000000
Binary files a/apps/studio/fonts/CustomFont-BookItalic.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/CustomFont-Medium.woff2 b/apps/studio/fonts/CustomFont-Medium.woff2
deleted file mode 100644
index c07131ddec9..00000000000
Binary files a/apps/studio/fonts/CustomFont-Medium.woff2 and /dev/null differ
diff --git a/apps/studio/fonts/index.ts b/apps/studio/fonts/index.ts
index 272cd5acd2d..431e1d45203 100644
--- a/apps/studio/fonts/index.ts
+++ b/apps/studio/fonts/index.ts
@@ -1,53 +1,44 @@
-import { Source_Code_Pro } from 'next/font/google'
+import { Manrope } from 'next/font/google'
import localFont from 'next/font/local'
-export const customFont = localFont({
- variable: '--font-custom',
+export const manrope = Manrope({
+ variable: '--font-manrope',
display: 'swap',
- fallback: ['Circular', 'custom-font', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
+ subsets: ['latin'],
+})
+
+export const inter = localFont({
+ variable: '--font-inter',
+ display: 'swap',
+ fallback: ['system-ui', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
src: [
{
- path: './CustomFont-Book.woff2',
- weight: '400',
+ path: './inter/InterVariable.woff2',
+ weight: '100 900',
style: 'normal',
},
{
- path: './CustomFont-BookItalic.woff2',
- weight: '400',
- style: 'italic',
- },
- {
- path: './CustomFont-Medium.woff2',
- weight: '500',
- style: 'normal',
- },
- {
- path: './CustomFont-Bold.woff2',
- weight: '700',
- style: 'normal',
- },
- {
- path: './CustomFont-BoldItalic.woff2',
- weight: '700',
- style: 'italic',
- },
- {
- path: './CustomFont-Black.woff2',
- weight: '800',
- style: 'normal',
- },
- {
- path: './CustomFont-BlackItalic.woff2',
- weight: '800',
+ path: './inter/InterVariable-Italic.woff2',
+ weight: '100 900',
style: 'italic',
},
],
})
-export const sourceCodePro = Source_Code_Pro({
- subsets: ['latin'],
- fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+export const sourceCodePro = localFont({
variable: '--font-source-code-pro',
display: 'swap',
- weight: ['400', '500', '600', '700'],
+ fallback: ['Source Code Pro', 'Office Code Pro', 'Menlo', 'monospace'],
+ src: [
+ {
+ path: './source-code-pro/SourceCodePro-Variable.woff2',
+ weight: '200 900',
+ style: 'normal',
+ },
+ {
+ path: './source-code-pro/SourceCodePro-Variable-Italic.woff2',
+ weight: '200 900',
+ style: 'italic',
+ },
+ ],
})
diff --git a/apps/studio/fonts/inter/InterVariable-Italic.woff2 b/apps/studio/fonts/inter/InterVariable-Italic.woff2
new file mode 100644
index 00000000000..2f06c65192b
Binary files /dev/null and b/apps/studio/fonts/inter/InterVariable-Italic.woff2 differ
diff --git a/apps/studio/fonts/inter/InterVariable.woff2 b/apps/studio/fonts/inter/InterVariable.woff2
new file mode 100644
index 00000000000..d15208de03c
Binary files /dev/null and b/apps/studio/fonts/inter/InterVariable.woff2 differ
diff --git a/apps/studio/fonts/source-code-pro/SourceCodePro-Variable-Italic.woff2 b/apps/studio/fonts/source-code-pro/SourceCodePro-Variable-Italic.woff2
new file mode 100644
index 00000000000..893f998497c
Binary files /dev/null and b/apps/studio/fonts/source-code-pro/SourceCodePro-Variable-Italic.woff2 differ
diff --git a/apps/studio/fonts/source-code-pro/SourceCodePro-Variable.woff2 b/apps/studio/fonts/source-code-pro/SourceCodePro-Variable.woff2
new file mode 100644
index 00000000000..bc303f50c5d
Binary files /dev/null and b/apps/studio/fonts/source-code-pro/SourceCodePro-Variable.woff2 differ
diff --git a/apps/studio/hooks/analytics/useLogsPreview.tsx b/apps/studio/hooks/analytics/useLogsPreview.tsx
index 6dc632f4f14..4521066f0aa 100644
--- a/apps/studio/hooks/analytics/useLogsPreview.tsx
+++ b/apps/studio/hooks/analytics/useLogsPreview.tsx
@@ -1,4 +1,5 @@
import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { useFlag } from 'common'
import dayjs from 'dayjs'
import { useCallback, useMemo, useState } from 'react'
@@ -24,7 +25,14 @@ import {
genCountQuery,
genDefaultQuery,
} from '@/components/interfaces/Settings/Logs/Logs.utils'
+import {
+ genChartQueryOtel,
+ genCountQueryOtel,
+ genDefaultQueryOtel,
+ mapOtelPreviewRow,
+} from '@/components/interfaces/Settings/Logs/Logs.utils.otel'
import { executeAnalyticsSql } from '@/data/logs/execute-analytics-sql'
+import { logsAllEndpointUrl, pickLogsQueryBuilder } from '@/data/logs/logs-endpoint'
interface LogsPreviewHook {
logData: LogData[]
@@ -55,6 +63,10 @@ function useLogsPreview({
const defaultHelper = getDefaultHelper(PREVIEWER_DATEPICKER_HELPERS)
const [latestRefresh, setLatestRefresh] = useState(new Date().toISOString())
+ // When on, query the OTEL endpoint instead of BigQuery. logsAllEndpointUrl is
+ // inlined in each queryFn (not hoisted) so useOtel stays the only query dep.
+ const useOtel = useFlag('otelLegacyLogs')
+
const {
timestampStart: urlTimestampStart,
timestampEnd: urlTimestampEnd,
@@ -81,8 +93,13 @@ function useLogsPreview({
)
const defaultSql = useMemo(
- () => genDefaultQuery(table, mergedFilters, limit),
- [table, mergedFilters, limit]
+ () =>
+ pickLogsQueryBuilder(useOtel, genDefaultQueryOtel, genDefaultQuery)(
+ table,
+ mergedFilters,
+ limit
+ ),
+ [useOtel, table, mergedFilters, limit]
)
const params: LogsEndpointParams = useMemo(
@@ -95,8 +112,8 @@ function useLogsPreview({
)
const queryKey = useMemo(
- () => ['projects', projectRef, 'logs', params, defaultSql],
- [projectRef, params, defaultSql]
+ () => ['projects', projectRef, 'logs', params, defaultSql, { otel: useOtel }],
+ [projectRef, params, defaultSql, useOtel]
)
const {
@@ -113,14 +130,18 @@ function useLogsPreview({
queryFn: async ({ signal, pageParam }) => {
const data = await executeAnalyticsSql({
projectRef,
- endpoint: '/platform/projects/{ref}/analytics/endpoints/logs.all',
+ endpoint: logsAllEndpointUrl(useOtel),
sql: defaultSql,
iso_timestamp_start: params.iso_timestamp_start ?? '',
iso_timestamp_end: (pageParam || params.iso_timestamp_end) ?? '',
method: 'get',
signal,
})
- return data as unknown as Logs
+ const logs = data as unknown as Logs
+ if (useOtel && logs?.result) {
+ return { ...logs, result: logs.result.map(mapOtelPreviewRow) } as Logs
+ }
+ return logs
},
refetchOnWindowFocus: false,
initialPageParam: undefined as string | undefined,
@@ -153,7 +174,10 @@ function useLogsPreview({
return { logData, error, oldestTimestamp }
}, [data?.pages])
- const countQuerySql = useMemo(() => genCountQuery(table, mergedFilters), [table, mergedFilters])
+ const countQuerySql = useMemo(
+ () => pickLogsQueryBuilder(useOtel, genCountQueryOtel, genCountQuery)(table, mergedFilters),
+ [useOtel, table, mergedFilters]
+ )
const countQueryKey = useMemo(
() => [
'projects',
@@ -166,9 +190,10 @@ function useLogsPreview({
iso_timestamp_end: timestampEnd,
table,
mergedFilters,
+ otel: useOtel,
},
],
- [projectRef, countQuerySql, latestRefresh, timestampEnd, table, mergedFilters]
+ [projectRef, countQuerySql, latestRefresh, timestampEnd, table, mergedFilters, useOtel]
)
const { data: countData } = useQuery({
@@ -176,7 +201,7 @@ function useLogsPreview({
queryFn: async ({ signal }) => {
const data = await executeAnalyticsSql({
projectRef,
- endpoint: '/platform/projects/{ref}/analytics/endpoints/logs.all',
+ endpoint: logsAllEndpointUrl(useOtel),
sql: countQuerySql,
iso_timestamp_start: latestRefresh,
iso_timestamp_end: timestampEnd ?? '',
@@ -193,8 +218,9 @@ function useLogsPreview({
const newCount = countData?.result?.[0]?.count ?? 0
const chartQuery = useMemo(
- () => genChartQuery(table, params, mergedFilters),
- [table, params, mergedFilters]
+ () =>
+ pickLogsQueryBuilder(useOtel, genChartQueryOtel, genChartQuery)(table, params, mergedFilters),
+ [useOtel, table, params, mergedFilters]
)
const chartQueryKey = useMemo(
() => [
@@ -206,9 +232,10 @@ function useLogsPreview({
sql: chartQuery,
iso_timestamp_start: timestampStart,
iso_timestamp_end: timestampEnd,
+ otel: useOtel,
},
],
- [projectRef, chartQuery, timestampStart, timestampEnd]
+ [projectRef, chartQuery, timestampStart, timestampEnd, useOtel]
)
const { data: eventChartResponse, refetch: refreshEventChart } = useQuery({
@@ -216,7 +243,7 @@ function useLogsPreview({
queryFn: async ({ signal }) => {
const data = await executeAnalyticsSql({
projectRef,
- endpoint: '/platform/projects/{ref}/analytics/endpoints/logs.all',
+ endpoint: logsAllEndpointUrl(useOtel),
sql: chartQuery,
iso_timestamp_start: timestampStart,
iso_timestamp_end: timestampEnd ?? '',
diff --git a/apps/studio/hooks/analytics/useLogsQuery.tsx b/apps/studio/hooks/analytics/useLogsQuery.tsx
index 18a761a0222..e9bba8e4a30 100644
--- a/apps/studio/hooks/analytics/useLogsQuery.tsx
+++ b/apps/studio/hooks/analytics/useLogsQuery.tsx
@@ -138,4 +138,3 @@ export const useLogsQuery = (
setParams,
}
}
-export default useLogsQuery
diff --git a/apps/studio/hooks/analytics/useLogsUrlState.ts b/apps/studio/hooks/analytics/useLogsUrlState.ts
index ea3b670faad..939efd3891b 100644
--- a/apps/studio/hooks/analytics/useLogsUrlState.ts
+++ b/apps/studio/hooks/analytics/useLogsUrlState.ts
@@ -1,4 +1,5 @@
import { createParser, useQueryState } from 'nuqs'
+import { useCallback } from 'react'
import { Filters } from '@/components/interfaces/Settings/Logs/Logs.types'
@@ -67,34 +68,55 @@ export function useLogsUrlState() {
const selectedLogId = selectedLogIdValue || null
const filters = filtersValue || defaultState.filters
- const setSearch = (value: string) => {
- setSearchValue(value || defaultState.search)
- }
+ const setSearch = useCallback(
+ (value: string) => {
+ setSearchValue(value || defaultState.search)
+ },
+ [setSearchValue]
+ )
- const setTimeRange = (start: string, end: string) => {
- setTimestampStartValue(start || defaultState.timestampStart)
- setTimestampEndValue(end || defaultState.timestampEnd)
- }
+ const setTimeRange = useCallback(
+ (start: string, end: string) => {
+ setTimestampStartValue(start || defaultState.timestampStart)
+ setTimestampEndValue(end || defaultState.timestampEnd)
+ },
+ [setTimestampStartValue, setTimestampEndValue]
+ )
- const setSelectedLogId = (value: string | null) => {
- setSelectedLogIdValue(value || '')
- }
+ const setSelectedLogId = useCallback(
+ (value: string | null) => {
+ setSelectedLogIdValue(value || '')
+ },
+ [setSelectedLogIdValue]
+ )
- const setFilters = (value: Filters) => {
- setFiltersValue(value || defaultState.filters)
- }
+ const setFilters = useCallback(
+ (value: Filters) => {
+ setFiltersValue(value || defaultState.filters)
+ },
+ [setFiltersValue]
+ )
- const updateFilter = (key: string, value: any) => {
- setFilters({ ...filters, [key]: value })
- }
+ const updateFilter = useCallback(
+ (key: string, value: any) => {
+ setFilters({ ...filters, [key]: value })
+ },
+ [filters, setFilters]
+ )
- const reset = () => {
+ const reset = useCallback(() => {
setSearch(defaultState.search)
setTimestampStartValue(defaultState.timestampStart)
setTimestampEndValue(defaultState.timestampEnd)
setSelectedLogIdValue('')
setFiltersValue(defaultState.filters)
- }
+ }, [
+ setSearch,
+ setTimestampStartValue,
+ setTimestampEndValue,
+ setSelectedLogIdValue,
+ setFiltersValue,
+ ])
return {
// State
diff --git a/apps/studio/hooks/analytics/useSingleLog.tsx b/apps/studio/hooks/analytics/useSingleLog.tsx
index 136194cee68..1ea50e7b2d2 100644
--- a/apps/studio/hooks/analytics/useSingleLog.tsx
+++ b/apps/studio/hooks/analytics/useSingleLog.tsx
@@ -1,4 +1,6 @@
import { useQuery } from '@tanstack/react-query'
+import { useFlag } from 'common'
+import { useMemo } from 'react'
import { LOGS_TABLES } from '@/components/interfaces/Settings/Logs/Logs.constants'
import type {
@@ -8,7 +10,12 @@ import type {
QueryType,
} from '@/components/interfaces/Settings/Logs/Logs.types'
import { genSingleLogQuery } from '@/components/interfaces/Settings/Logs/Logs.utils'
+import {
+ genSingleLogQueryOtel,
+ mapOtelSingleLogToLegacy,
+} from '@/components/interfaces/Settings/Logs/Logs.utils.otel'
import { executeAnalyticsSql } from '@/data/logs/execute-analytics-sql'
+import { logsAllEndpointUrl } from '@/data/logs/logs-endpoint'
import { safeSql } from '@/data/logs/safe-analytics-sql'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
@@ -32,7 +39,23 @@ function useSingleLog({
paramsToMerge,
}: SingleLogParams): SingleLogHook {
const table = queryType ? LOGS_TABLES[queryType] : undefined
- const sql = id && table ? genSingleLogQuery(table, id) : safeSql``
+
+ // When on, fetch the log from the OTEL endpoint instead of BigQuery.
+ const useOtel = useFlag('otelLegacyLogs')
+ const endpoint = logsAllEndpointUrl(useOtel)
+
+ const sql = useMemo(() => {
+ if (!id || !table) return safeSql``
+ if (useOtel) {
+ try {
+ return genSingleLogQueryOtel(id)
+ } catch {
+ // Malformed (non-uuid) id — emit nothing rather than throwing in render.
+ return safeSql``
+ }
+ }
+ return genSingleLogQuery(table, id)
+ }, [id, table, useOtel])
const enabled = Boolean(id && table)
@@ -56,11 +79,12 @@ function useSingleLog({
queryType,
paramsToMerge?.iso_timestamp_start,
paramsToMerge?.iso_timestamp_end,
+ { otel: useOtel },
],
queryFn: async ({ signal }) => {
const data = await executeAnalyticsSql({
projectRef,
- endpoint: '/platform/projects/{ref}/analytics/endpoints/logs.all',
+ endpoint,
sql,
iso_timestamp_start: paramsToMerge?.iso_timestamp_start ?? '',
iso_timestamp_end: paramsToMerge?.iso_timestamp_end ?? '',
@@ -76,7 +100,8 @@ function useSingleLog({
})
let error: null | string | object = rcError ? (rcError as any).message : null
- const result = data?.result ? data.result[0] : undefined
+ const rawResult = data?.result ? data.result[0] : undefined
+ const result = rawResult && useOtel ? mapOtelSingleLogToLegacy(rawResult, queryType) : rawResult
return {
data: !!result
diff --git a/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts b/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts
index d663866fba4..cded29e609f 100644
--- a/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts
+++ b/apps/studio/hooks/branches/useEdgeFunctionsDiff.ts
@@ -280,5 +280,3 @@ export const useEdgeFunctionsDiff = ({
clearDiffsOptimistically,
}
}
-
-export default useEdgeFunctionsDiff
diff --git a/apps/studio/hooks/misc/useCheckEntitlements.ts b/apps/studio/hooks/misc/useCheckEntitlements.ts
index 9d4765c7dbf..5e749b3c7cd 100644
--- a/apps/studio/hooks/misc/useCheckEntitlements.ts
+++ b/apps/studio/hooks/misc/useCheckEntitlements.ts
@@ -69,7 +69,7 @@ export function useHasEntitlementAccess(organizationSlug?: string) {
return useCallback(
(key: string) =>
IS_PLATFORM
- ? (entitlementsData?.entitlements.find((e) => e.feature.key === key)?.hasAccess ?? false)
+ ? (entitlementsData?.entitlements?.find((e) => e.feature.key === key)?.hasAccess ?? false)
: true,
[entitlementsData]
)
@@ -107,7 +107,7 @@ export function useCheckEntitlements(
// If no organization slug, no access
if (!finalOrgSlug) return { entitlement: null }
- const entitlement = entitlementsData?.entitlements.find(
+ const entitlement = entitlementsData?.entitlements?.find(
(entitlement) => entitlement.feature.key === featureKey
)
diff --git a/apps/studio/hooks/misc/useHighAvailability.constants.ts b/apps/studio/hooks/misc/useHighAvailability.constants.ts
new file mode 100644
index 00000000000..dfcfd795668
--- /dev/null
+++ b/apps/studio/hooks/misc/useHighAvailability.constants.ts
@@ -0,0 +1,5 @@
+export const MULTIGRES_SCHEMA_NAME = 'multigres'
+
+export function resolveHighAvailability(project?: { high_availability?: boolean | null }) {
+ return project?.high_availability ?? false
+}
diff --git a/apps/studio/hooks/misc/useHighAvailability.ts b/apps/studio/hooks/misc/useHighAvailability.ts
new file mode 100644
index 00000000000..19beae75764
--- /dev/null
+++ b/apps/studio/hooks/misc/useHighAvailability.ts
@@ -0,0 +1,25 @@
+import { MULTIGRES_SCHEMA_NAME, resolveHighAvailability } from './useHighAvailability.constants'
+import { useSelectedProjectQuery } from './useSelectedProject'
+
+export { MULTIGRES_SCHEMA_NAME, resolveHighAvailability }
+
+export function useHighAvailability() {
+ const { data: project, isPending } = useSelectedProjectQuery()
+
+ const isHighAvailability = resolveHighAvailability(project)
+
+ return {
+ isHighAvailability,
+ isHighAvailabilityDisabled: !isHighAvailability,
+ isPending,
+ }
+}
+
+export function filterSchemasForHighAvailability<T extends { name: string }>(
+ schemas: T[],
+ isHighAvailability: boolean
+) {
+ if (!isHighAvailability) return schemas
+
+ return schemas.filter((schema) => schema.name !== MULTIGRES_SCHEMA_NAME)
+}
diff --git a/apps/studio/hooks/misc/useInterval.ts b/apps/studio/hooks/misc/useInterval.ts
deleted file mode 100644
index 3e72cd2aca2..00000000000
--- a/apps/studio/hooks/misc/useInterval.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export function useInterval(callback: () => void, delay: number | false) {
- const savedCallback = useRef(callback)
-
- useEffect(() => {
- savedCallback.current = callback
- }, [callback])
-
- useEffect(() => {
- if (delay === false) {
- return
- }
-
- const id = setInterval(() => {
- savedCallback.current()
- }, delay)
-
- return () => {
- clearInterval(id)
- }
- }, [delay])
-}
diff --git a/apps/studio/hooks/misc/useLatest.ts b/apps/studio/hooks/misc/useLatest.ts
index dd29313d4e8..4ab463c05d9 100644
--- a/apps/studio/hooks/misc/useLatest.ts
+++ b/apps/studio/hooks/misc/useLatest.ts
@@ -5,5 +5,3 @@ export const useLatest = <T>(value: T): { readonly current: T } => {
ref.current = value
return ref
}
-
-export default useLatest
diff --git a/apps/studio/hooks/misc/useSchemasForAi.ts b/apps/studio/hooks/misc/useSchemasForAi.ts
deleted file mode 100644
index 6bc31602c38..00000000000
--- a/apps/studio/hooks/misc/useSchemasForAi.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { LOCAL_STORAGE_KEYS } from 'common'
-import { Dispatch, SetStateAction } from 'react'
-
-import { useLocalStorageQuery } from '@/hooks/misc/useLocalStorage'
-
-/**
- * Returns which schemas are ok to be sent to AI.
- */
-export function useSchemasForAi(
- ref: string
-): readonly [string[], Dispatch<SetStateAction<string[]>>] {
- const [enabledSchemas, setEnabledSchemas] = useLocalStorageQuery(
- LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_SCHEMA(ref),
- ['public']
- )
-
- if (!ref) return [[], () => {}]
-
- return [enabledSchemas, setEnabledSchemas]
-}
diff --git a/apps/studio/hooks/misc/withAuth.tsx b/apps/studio/hooks/misc/withAuth.tsx
index 0088f9f9a08..b480149fbf9 100644
--- a/apps/studio/hooks/misc/withAuth.tsx
+++ b/apps/studio/hooks/misc/withAuth.tsx
@@ -67,13 +67,18 @@ export function withAuth<T>(
const isLoggedIn = Boolean(session)
const isFinishedLoading = !isLoading && !isAALLoading
+ const isCorrectLevel = options.useHighestAAL
+ ? aalData?.currentLevel === aalData?.nextLevel
+ : true
+ const needsMfaElevation = isLoggedIn && !isCorrectLevel
+
const redirectToSignIn = useCallback(() => {
let pathname = location.pathname
if (BASE_PATH) {
pathname = pathname.replace(BASE_PATH, '')
}
- if (pathname === '/sign-in') {
+ if (pathname === '/sign-in' || pathname === '/sign-in-mfa') {
// If the user is already on the sign in page, we don't need to redirect them
return
}
@@ -81,11 +86,19 @@ export function withAuth<T>(
const searchParams = new URLSearchParams(location.search)
searchParams.set('returnTo', pathname)
+ if (needsMfaElevation) {
+ // Session is valid at AAL1 but needs to be elevated to AAL2. Preserve the session
+ // and send the user to the MFA challenge — typically the IdP-initiated SSO path,
+ // where the user lands directly on /dashboard without going through /sign-in-mfa.
+ router.push(`/sign-in-mfa?${searchParams.toString()}`)
+ return
+ }
+
// Sign out before redirecting to sign in page incase the user is stuck in a loading state
signOut().finally(() => {
router.push(`/sign-in?${searchParams.toString()}`)
})
- }, [router, signOut])
+ }, [router, signOut, needsMfaElevation])
useEffect(() => {
if (!isFinishedLoading) {
@@ -106,10 +119,6 @@ export function withAuth<T>(
}
}, [isFinishedLoading, router, redirectToSignIn])
- const isCorrectLevel = options.useHighestAAL
- ? aalData?.currentLevel === aalData?.nextLevel
- : true
-
const shouldRedirect = isFinishedLoading && (!isLoggedIn || !isCorrectLevel)
useEffect(() => {
diff --git a/apps/studio/hooks/ui/useConfirmOnClose.tsx b/apps/studio/hooks/ui/useConfirmOnClose.tsx
index 7e19dc2a61b..576827463a8 100644
--- a/apps/studio/hooks/ui/useConfirmOnClose.tsx
+++ b/apps/studio/hooks/ui/useConfirmOnClose.tsx
@@ -1,6 +1,6 @@
import { useCallback, useMemo, useState } from 'react'
-import useLatest from '../misc/useLatest'
+import { useLatest } from '../misc/useLatest'
export interface ConfirmOnCloseModalProps {
visible: boolean
diff --git a/apps/studio/hooks/ui/useUrlState.ts b/apps/studio/hooks/ui/useUrlState.ts
index 919b5f2a843..3c9543e9eb8 100644
--- a/apps/studio/hooks/ui/useUrlState.ts
+++ b/apps/studio/hooks/ui/useUrlState.ts
@@ -1,7 +1,7 @@
import { useRouter } from 'next/router'
import { useCallback, useMemo, type Dispatch, type SetStateAction } from 'react'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
export type UrlStateParams = {
[k: string]: string | string[] | undefined
diff --git a/apps/studio/hooks/use-check-latest-deploy.tsx b/apps/studio/hooks/use-check-latest-deploy.tsx
index f695da8f0b4..8e1d4a073a7 100644
--- a/apps/studio/hooks/use-check-latest-deploy.tsx
+++ b/apps/studio/hooks/use-check-latest-deploy.tsx
@@ -6,6 +6,7 @@ import { toast } from 'sonner'
import { Button, StatusIcon } from 'ui'
import { useDeploymentCommitQuery } from '@/data/utils/deployment-commit-query'
+import { BASE_PATH } from '@/lib/constants'
const DeployCheckToast = ({ id }: { id: string | number }) => {
const router = useRouter()
@@ -24,7 +25,16 @@ const DeployCheckToast = ({ id }: { id: string | number }) => {
<Button variant="outline" onClick={() => toast.dismiss(id)}>
Not now
</Button>
- <Button onClick={() => router.reload()}>Refresh</Button>
+ <Button
+ onClick={() => {
+ // Clear the deployment pin so the reload lands on the latest
+ // version. No-op on Next (the cookie isn't set there).
+ document.cookie = `__vdpl=; Path=${BASE_PATH || '/'}; Max-Age=0`
+ router.reload()
+ }}
+ >
+ Refresh
+ </Button>
</div>
</div>
)
diff --git a/apps/studio/lib/ai/model.utils.ts b/apps/studio/lib/ai/model.utils.ts
index 905c650dff3..0174c2904ec 100644
--- a/apps/studio/lib/ai/model.utils.ts
+++ b/apps/studio/lib/ai/model.utils.ts
@@ -51,6 +51,11 @@ export const DEFAULT_COMPLETION_MODEL = openaiModelEntry({
reasoningEffort: 'none',
})
+export const LOGS_REWRITE_MODEL = openaiModelEntry({
+ id: 'gpt-5.4-nano',
+ reasoningEffort: 'low',
+})
+
// Single source of truth for all Assistant chat model variants and their reasoning levels.
// Models with requiresAdvanceModelEntitlement false are available to all users; true requires the assistant.advance_model entitlement.
export const ASSISTANT_MODELS = [
diff --git a/apps/studio/lib/ai/prompts.ts b/apps/studio/lib/ai/prompts.ts
index 81c6f0435f6..3a74b8b6dcc 100644
--- a/apps/studio/lib/ai/prompts.ts
+++ b/apps/studio/lib/ai/prompts.ts
@@ -786,6 +786,15 @@ export const SQL_COMPLETION_INSTRUCTIONS = `
Do not quote identifiers unless they actually require it (uppercase letters, reserved words, or special characters). Plain lowercase identifiers should not be quoted.
`
+export const CLICKHOUSE_LOGS_COMPLETION_INSTRUCTIONS = `
+# Supabase logs SQL (ClickHouse)
+You are writing SQL for Supabase logs, which run on a ClickHouse-backed engine. This is NOT Postgres and NOT BigQuery. Output valid ClickHouse SQL only.
+- All logs are in a single table named \`logs\`, keyed by a \`source\` column. There are no per-service tables (no \`edge_logs\`, \`postgres_logs\`, and so on) and no \`unnest\` joins.
+- Per-source fields live in the \`log_attributes\` Map(String, String), read as \`log_attributes['key']\`. Map values are strings, so wrap numeric ones in \`toInt32OrZero(...)\`.
+- Use ClickHouse functions, not Postgres or BigQuery ones. Use \`match(col, 'regex')\` or \`col ILIKE '%text%'\` instead of \`regexp_contains\`, \`count()\` instead of \`count(*)\`, and select the \`timestamp\` column directly instead of \`cast(timestamp as datetime)\`.
+- Do not quote identifiers with double quotes and do not append a trailing semicolon.
+`
+
export const LIMITATIONS_PROMPT = `
# Limitations
- You are to only answer Supabase, database, or edge function related questions. All other questions should be declined with a polite message.
diff --git a/apps/studio/lib/ai/tools/fallback-tools.ts b/apps/studio/lib/ai/tools/fallback-tools.ts
index d2f7819d178..2a3ed2329a6 100644
--- a/apps/studio/lib/ai/tools/fallback-tools.ts
+++ b/apps/studio/lib/ai/tools/fallback-tools.ts
@@ -1,6 +1,5 @@
import { getEntityDefinitionsSql } from '@supabase/pg-meta'
import { tool } from 'ai'
-// import { processSql, renderSupabaseJs } from '@supabase/sql-to-rest'
import { IS_PLATFORM } from 'common'
import { stripIndent } from 'common-tags'
import { z } from 'zod'
diff --git a/apps/studio/lib/ai/util.ts b/apps/studio/lib/ai/util.ts
index 953f1e58227..21b47997f7e 100644
--- a/apps/studio/lib/ai/util.ts
+++ b/apps/studio/lib/ai/util.ts
@@ -32,7 +32,7 @@ export async function selectWeightedKey<T extends string>(
const keys = Object.keys(weights) as T[]
const encoder = new TextEncoder()
const data = encoder.encode(input)
- const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+ const hashBuffer = await crypto.subtle.digest('SHA-256', data as BufferSource)
// Use first 4 bytes (32 bit integer)
const hashInt = new DataView(hashBuffer).getUint32(0)
diff --git a/apps/studio/lib/api/self-hosted/constants.ts b/apps/studio/lib/api/self-hosted/constants.ts
index 6e4f10f8b13..8df9f1549d7 100644
--- a/apps/studio/lib/api/self-hosted/constants.ts
+++ b/apps/studio/lib/api/self-hosted/constants.ts
@@ -2,8 +2,7 @@
// Schemas exposed via PostgREST Data API, read from the PGRST_DB_SCHEMAS env var
// that is passed to the Studio container via docker-compose / CLI.
-export const DEFAULT_EXPOSED_SCHEMAS =
- process.env.PGRST_DB_SCHEMAS ?? 'public,storage,graphql_public'
+export const DEFAULT_EXPOSED_SCHEMAS = process.env.PGRST_DB_SCHEMAS ?? 'public,graphql_public'
export const ENCRYPTION_KEY = process.env.PG_META_CRYPTO_KEY || 'SAMPLE_KEY'
export const POSTGRES_PORT = parseInt(process.env.POSTGRES_PORT || '5432', 10)
diff --git a/apps/studio/lib/api/self-hosted/generate-types.test.ts b/apps/studio/lib/api/self-hosted/generate-types.test.ts
index 69cc822137f..5d0c70d49df 100644
--- a/apps/studio/lib/api/self-hosted/generate-types.test.ts
+++ b/apps/studio/lib/api/self-hosted/generate-types.test.ts
@@ -14,6 +14,14 @@ vi.mock('./util', () => ({
assertSelfHosted: vi.fn(),
}))
+// A distinctive, non-default value so the assertions verify the URL reflects the
+// configured exposed schemas (PGRST_DB_SCHEMAS) — whatever they are — rather than
+// coupling the test to a specific default.
+const EXPOSED_SCHEMAS = 'public,custom_schema,graphql_public'
+vi.mock('./constants', () => ({
+ DEFAULT_EXPOSED_SCHEMAS: 'public,custom_schema,graphql_public',
+}))
+
describe('api/self-hosted/generate-types', () => {
let mockFetchGet: ReturnType<typeof vi.fn>
let mockAssertSelfHosted: ReturnType<typeof vi.fn>
@@ -37,57 +45,17 @@ describe('api/self-hosted/generate-types', () => {
expect(mockAssertSelfHosted).toHaveBeenCalled()
})
- it('should fetch from correct URL with schema params', async () => {
+ it('should request types for the configured exposed schemas', async () => {
mockFetchGet.mockResolvedValue({ types: 'export type User = {}' })
await generateTypescriptTypes({ headers: {} })
- expect(mockFetchGet).toHaveBeenCalledWith(
- expect.stringContaining('http://localhost:8080/generators/typescript'),
- expect.any(Object)
- )
-
const callUrl = mockFetchGet.mock.calls[0][0]
- expect(callUrl).toContain('included_schema=public,graphql_public,storage')
- expect(callUrl).toContain('excluded_schemas=')
- })
-
- it('should include correct schemas in URL', async () => {
- mockFetchGet.mockResolvedValue({ types: '' })
-
- await generateTypescriptTypes({ headers: {} })
-
- const callUrl = mockFetchGet.mock.calls[0][0]
- expect(callUrl).toContain('public')
- expect(callUrl).toContain('graphql_public')
- expect(callUrl).toContain('storage')
- })
-
- it('should exclude system schemas', async () => {
- mockFetchGet.mockResolvedValue({ types: '' })
-
- await generateTypescriptTypes({ headers: {} })
-
- const callUrl = mockFetchGet.mock.calls[0][0]
- const excludedSchemas = [
- 'auth',
- 'cron',
- 'extensions',
- 'graphql',
- 'net',
- 'pgsodium',
- 'pgsodium_masks',
- 'realtime',
- 'supabase_functions',
- 'supabase_migrations',
- 'vault',
- '_analytics',
- '_realtime',
- ]
-
- excludedSchemas.forEach((schema) => {
- expect(callUrl).toContain(schema)
- })
+ expect(callUrl).toContain('http://localhost:8080/generators/typescript')
+ // Forwards the exposed-schemas config verbatim as the plural allowlist param.
+ expect(callUrl).toContain(`included_schemas=${EXPOSED_SCHEMAS}`)
+ // No hardcoded exclude list — the exposed-schemas config is the source of truth.
+ expect(callUrl).not.toContain('excluded_schemas=')
})
it('should pass headers to fetchGet', async () => {
@@ -128,15 +96,5 @@ describe('api/self-hosted/generate-types', () => {
expect(mockFetchGet).toHaveBeenCalledWith(expect.any(String), { headers: undefined })
})
-
- it('should construct URL with both included and excluded schemas', async () => {
- mockFetchGet.mockResolvedValue({ types: '' })
-
- await generateTypescriptTypes({ headers: {} })
-
- const callUrl = mockFetchGet.mock.calls[0][0]
- expect(callUrl).toContain('included_schema=')
- expect(callUrl).toContain('excluded_schemas=')
- })
})
})
diff --git a/apps/studio/lib/api/self-hosted/generate-types.ts b/apps/studio/lib/api/self-hosted/generate-types.ts
index 76e8068200e..8dac69c89eb 100644
--- a/apps/studio/lib/api/self-hosted/generate-types.ts
+++ b/apps/studio/lib/api/self-hosted/generate-types.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_EXPOSED_SCHEMAS } from './constants'
import { assertSelfHosted } from './util'
import { fetchGet } from '@/data/fetchers'
import { PG_META_URL } from '@/lib/constants'
@@ -21,26 +22,12 @@ export async function generateTypescriptTypes({
}: GenerateTypescriptTypesOptions): Promise<GenerateTypescriptTypesResult | ResponseError> {
assertSelfHosted()
- const includedSchema = ['public', 'graphql_public', 'storage'].join(',')
-
- const excludedSchema = [
- 'auth',
- 'cron',
- 'extensions',
- 'graphql',
- 'net',
- 'pgsodium',
- 'pgsodium_masks',
- 'realtime',
- 'supabase_functions',
- 'supabase_migrations',
- 'vault',
- '_analytics',
- '_realtime',
- ].join(',')
-
+ // Use the schemas actually exposed via PostgREST (PGRST_DB_SCHEMAS) so generated
+ // types match the Data API surface, instead of a hardcoded include/exclude list.
+ // Note the param is `included_schemas` (plural) — pg-meta treats a non-empty list
+ // as a strict allowlist; the singular spelling is silently ignored (includes all).
const response = await fetchGet<GenerateTypescriptTypesResult>(
- `${PG_META_URL}/generators/typescript?included_schema=${includedSchema}&excluded_schemas=${excludedSchema}`,
+ `${PG_META_URL}/generators/typescript?included_schemas=${DEFAULT_EXPOSED_SCHEMAS}`,
{ headers }
)
diff --git a/apps/studio/lib/api/snippets.utils.test.ts b/apps/studio/lib/api/snippets.utils.test.ts
index f218ada61ae..7cff947defc 100644
--- a/apps/studio/lib/api/snippets.utils.test.ts
+++ b/apps/studio/lib/api/snippets.utils.test.ts
@@ -238,6 +238,23 @@ describe('snippets.utils', () => {
await expect(getFilesystemEntries()).rejects.toThrow('Permission denied')
})
+
+ it('should skip reading file content when includeContent is false', async () => {
+ mockedFS.access.mockResolvedValue(undefined)
+ mockedFS.readdir.mockResolvedValue([
+ { name: 'snippet1.sql', isDirectory: () => false, isFile: () => true },
+ { name: 'snippet2.sql', isDirectory: () => false, isFile: () => true },
+ ] as any)
+ mockedFS.stat.mockResolvedValue({ birthtime: new Date('2023-01-01') } as any)
+
+ const entries = await getFilesystemEntries({ includeContent: false })
+
+ const files = entries.filter((e) => e.type === 'file')
+ expect(files).toHaveLength(2)
+ expect(files.every((f) => f.content === undefined)).toBe(true)
+ // Listings should never touch file contents off disk.
+ expect(mockedFS.readFile).not.toHaveBeenCalled()
+ })
})
describe('getSnippet', () => {
@@ -658,6 +675,45 @@ describe('snippets.utils', () => {
expect(result.snippets).toHaveLength(1)
})
+
+ it('should omit content but keep metadata when includeContent is false', async () => {
+ mockedFS.access.mockResolvedValue(undefined)
+ mockedFS.readdir.mockResolvedValue([
+ { name: 'test-snippet.sql', isDirectory: () => false, isFile: () => true },
+ ] as any)
+ mockedFS.stat.mockResolvedValue({ birthtime: new Date('2023-01-01T10:00:00Z') } as any)
+
+ const result = await getSnippets({ includeContent: false })
+
+ expect(result.snippets).toHaveLength(1)
+ const snippet = result.snippets[0]
+
+ // Matches the Management API folder-listing contract: metadata, no SQL body.
+ expect(snippet).not.toHaveProperty('content')
+ expect(snippet).toMatchObject({
+ name: 'test-snippet',
+ type: 'sql',
+ visibility: 'user',
+ folder_id: null,
+ })
+ expect(snippet.id).toBeDefined()
+ // Listing must not read file contents off disk.
+ expect(mockedFS.readFile).not.toHaveBeenCalled()
+ })
+
+ it('searches by name without reading content when includeContent is false', async () => {
+ mockedFS.access.mockResolvedValue(undefined)
+ mockedFS.readdir.mockResolvedValue([
+ { name: 'user-query.sql', isDirectory: () => false, isFile: () => true },
+ { name: 'admin-report.sql', isDirectory: () => false, isFile: () => true },
+ ] as any)
+ mockedFS.stat.mockResolvedValue({ birthtime: new Date('2023-01-01') } as any)
+
+ const result = await getSnippets({ searchTerm: 'user', includeContent: false })
+
+ expect(result.snippets.map((s) => s.name)).toEqual(['user-query'])
+ expect(mockedFS.readFile).not.toHaveBeenCalled()
+ })
})
describe('saveSnippet', () => {
diff --git a/apps/studio/lib/api/snippets.utils.ts b/apps/studio/lib/api/snippets.utils.ts
index 133a7d63b3b..e0361847fa3 100644
--- a/apps/studio/lib/api/snippets.utils.ts
+++ b/apps/studio/lib/api/snippets.utils.ts
@@ -69,35 +69,46 @@ export type FilesystemEntry = {
createdAt: Date
}
+/**
+ * Snippet without its SQL body — the shape returned for listings, matching the Management API
+ * contract (`GetUserContentFolderResponse.data.contents[]` has no `content`). The body is loaded
+ * on demand via the item endpoint (`getSnippet`).
+ */
+export type SnippetMetadata = Omit<Snippet, 'content'>
+
+const buildSnippetMetadata = (
+ filename: string,
+ folderId: string | null,
+ createdAt: Date
+): SnippetMetadata => ({
+ id: generateDeterministicUuid([folderId, `${filename}.sql`]),
+ inserted_at: createdAt.toISOString(),
+ updated_at: createdAt.toISOString(),
+ type: 'sql',
+ name: filename.replace('.sql', ''),
+ description: '',
+ favorite: false,
+ visibility: 'user',
+ project_id: 1,
+ folder_id: folderId,
+ owner_id: 1,
+ owner: { id: 1, username: 'johndoe' },
+ updated_by: { id: 1, username: 'johndoe' },
+})
+
const buildSnippet = (
filename: string,
content: string,
folderId: string | null,
createdAt: Date
-) => {
- const snippet: Snippet = {
- id: generateDeterministicUuid([folderId, `${filename}.sql`]),
- inserted_at: createdAt.toISOString(),
- updated_at: createdAt.toISOString(),
- type: 'sql',
- name: filename.replace('.sql', ''),
- description: '',
- favorite: false,
- content: {
- sql: content,
- content_id: uuidv4(),
- schema_version: '1.0',
- },
- visibility: 'user',
- project_id: 1,
- folder_id: folderId,
- owner_id: 1,
- owner: { id: 1, username: 'johndoe' },
- updated_by: { id: 1, username: 'johndoe' },
- }
-
- return snippet
-}
+): Snippet => ({
+ ...buildSnippetMetadata(filename, folderId, createdAt),
+ content: {
+ sql: content,
+ content_id: uuidv4(),
+ schema_version: '1.0',
+ },
+})
const buildFolder = (name: string) => {
const folder: Folder = {
@@ -121,10 +132,14 @@ const sanitizeName = (name: string): string => {
}
/**
- * Gets a complete snapshot of the filesystem structure including files and folders
+ * Gets a snapshot of the filesystem structure including files and folders.
+ * Pass `includeContent: false` for listings (sidebar/folder tree), which only need metadata —
+ * this skips reading every `.sql` file off disk.
* @returns An array of files and folders with their metadata
*/
-export async function getFilesystemEntries(): Promise<FilesystemEntry[]> {
+export async function getFilesystemEntries({
+ includeContent = true,
+}: { includeContent?: boolean } = {}): Promise<FilesystemEntry[]> {
if (SNIPPETS_DIR === '') {
throw new Error(
'SNIPPETS_MANAGEMENT_FOLDER env var is not set. Please set it to use snippets properly.'
@@ -171,7 +186,7 @@ export async function getFilesystemEntries(): Promise<FilesystemEntry[]> {
await readEntriesRecursively(itemPath, item.name)
} else if (item.isFile() && item.name.endsWith('.sql')) {
const [content, stats] = await Promise.all([
- fs.readFile(itemPath, 'utf-8'),
+ includeContent ? fs.readFile(itemPath, 'utf-8') : Promise.resolve(undefined),
fs.stat(itemPath),
])
const snippetName = item.name.replace('.sql', '')
@@ -181,7 +196,7 @@ export async function getFilesystemEntries(): Promise<FilesystemEntry[]> {
name: snippetName,
type: 'file',
folderId: folderId,
- content: content,
+ content,
createdAt: stats.birthtime,
})
}
@@ -208,24 +223,42 @@ export const getSnippet = async (snippetId: string) => {
)
}
-/**
- * Gets a filtered paginated list of snippets based on the provided criteria
- */
-export const getSnippets = async ({
- searchTerm,
- limit,
- cursor,
- sort,
- sortOrder,
- folderId,
-}: {
+interface GetSnippetsParams {
searchTerm?: string
limit?: number
cursor?: string
sortOrder?: 'asc' | 'desc'
sort?: 'name' | 'inserted_at'
folderId?: string | null
-}): Promise<{ cursor: string | undefined; snippets: Snippet[] }> => {
+ /**
+ * Listings (sidebar/folder tree) only need metadata; the SQL body is loaded on demand via the
+ * item endpoint. Pass `false` to omit `content` and skip reading files off disk. Defaults to
+ * `true` for the flat `/content` endpoint, which the contract returns with content.
+ */
+ includeContent?: boolean
+}
+
+/**
+ * Gets a filtered paginated list of snippets based on the provided criteria
+ */
+export function getSnippets(
+ params: GetSnippetsParams & { includeContent: false }
+): Promise<{ cursor: string | undefined; snippets: SnippetMetadata[] }>
+export function getSnippets(
+ params?: GetSnippetsParams & { includeContent?: true }
+): Promise<{ cursor: string | undefined; snippets: Snippet[] }>
+export async function getSnippets({
+ searchTerm,
+ limit,
+ cursor,
+ sort,
+ sortOrder,
+ folderId,
+ includeContent = true,
+}: GetSnippetsParams = {}): Promise<{
+ cursor: string | undefined
+ snippets: Snippet[] | SnippetMetadata[]
+}> {
// Normalize and set default values
const normalizedSearchTerm = searchTerm?.trim() ?? ''
const normalizedLimit = limit ?? 100
@@ -242,10 +275,9 @@ export const getSnippets = async ({
throw new Error('Limit cannot exceed 1000')
}
- const entries = await getFilesystemEntries()
+ const entries = await getFilesystemEntries({ includeContent })
const files = entries.filter(
- (entry): entry is FilesystemEntry & { type: 'file'; content: string } =>
- entry.type === 'file' && entry.content !== undefined && entry.content !== null
+ (entry): entry is FilesystemEntry & { type: 'file' } => entry.type === 'file'
)
// Filter snippets based on search term or folder
@@ -294,7 +326,9 @@ export const getSnippets = async ({
return {
cursor: nextCursor,
snippets: finalSnippets.map((file) =>
- buildSnippet(file.name, file.content, file.folderId, file.createdAt)
+ includeContent
+ ? buildSnippet(file.name, file.content ?? '', file.folderId, file.createdAt)
+ : buildSnippetMetadata(file.name, file.folderId, file.createdAt)
),
}
}
@@ -410,7 +444,7 @@ export async function updateSnippet(id: string, updates: DeepPartial<Snippet>):
}
export const getFolders = async (folderId: string | null = null): Promise<Folder[]> => {
- const entries = await getFilesystemEntries()
+ const entries = await getFilesystemEntries({ includeContent: false })
const folders = entries
.filter(
(entry): entry is FilesystemEntry & { type: 'folder' } =>
diff --git a/apps/studio/lib/constants/infrastructure.ts b/apps/studio/lib/constants/infrastructure.ts
index 9a0503fb7de..6da86976f6d 100644
--- a/apps/studio/lib/constants/infrastructure.ts
+++ b/apps/studio/lib/constants/infrastructure.ts
@@ -70,7 +70,10 @@ export const PROVIDERS = {
AWS_NIMBUS: {
id: 'AWS_NIMBUS',
name: 'AWS (Nimbus)',
- default_region: AWS_REGIONS_DEFAULT,
+ default_region:
+ process.env.NEXT_PUBLIC_ENVIRONMENT !== 'prod'
+ ? AWS_REGIONS.SOUTHEAST_ASIA
+ : AWS_REGIONS.EAST_US,
regions: { ...AWS_REGIONS },
},
} as const
diff --git a/apps/studio/lib/hosted-api-allowlist.ts b/apps/studio/lib/hosted-api-allowlist.ts
new file mode 100644
index 00000000000..614d863ddc3
--- /dev/null
+++ b/apps/studio/lib/hosted-api-allowlist.ts
@@ -0,0 +1,37 @@
+// [Joshen] Allowlist of API endpoints supported in hosted (platform) mode.
+// Every other /api/* route must 404 in platform mode. Shared by the Next
+// middleware (proxy.ts) and the TanStack request middleware (start.ts) so
+// the list can't drift between the two frameworks while both run in parallel.
+export const HOSTED_SUPPORTED_API_URLS = [
+ '/ai/sql/generate-v4',
+ '/ai/sql/policy',
+ '/ai/feedback/rate',
+ '/ai/code/complete',
+ '/ai/sql/cron-v2',
+ '/ai/sql/title-v2',
+ '/ai/sql/filter-v1',
+ '/ai/onboarding/design',
+ '/ai/feedback/classify',
+ '/ai/docs',
+ '/ai/sql/parse-client-code',
+ '/get-ip-address',
+ '/get-utc-time',
+ '/get-deployment-commit',
+ '/check-cname',
+ '/edge-functions/test',
+ '/edge-functions/body',
+ '/generate-attachment-url',
+ '/incident-status',
+ '/incident-banner',
+ '/status-override',
+ '/api/integrations/stripe-sync',
+ '/content/graphql',
+ '/parse-query',
+]
+
+// `pathname` must be basePath-relative — Next's `nextUrl.pathname` already is,
+// and the TanStack guard strips BASE_PATH before calling. Entries are path
+// suffixes, so `endsWith` stays correct regardless.
+export function isHostedSupportedApiPath(pathname: string): boolean {
+ return HOSTED_SUPPORTED_API_URLS.some((url) => pathname.endsWith(url))
+}
diff --git a/apps/studio/lib/notifier.ts b/apps/studio/lib/notifier.ts
new file mode 100644
index 00000000000..8c63ef31837
--- /dev/null
+++ b/apps/studio/lib/notifier.ts
@@ -0,0 +1,10 @@
+/**
+ * A minimal dependency-injection contract for surfacing user-facing
+ * notifications (toasts). It is structurally a subset of sonner's `toast`, so
+ * the real `toast` can be passed directly while tests pass a spy — letting
+ * modules that need to notify stay free of a hard sonner import.
+ */
+export interface Notifier {
+ success: (message: string) => void
+ error: (message: string) => void
+}
diff --git a/apps/studio/lib/role-impersonation.ts b/apps/studio/lib/role-impersonation.ts
index 5d49df34485..0f6353f12b7 100644
--- a/apps/studio/lib/role-impersonation.ts
+++ b/apps/studio/lib/role-impersonation.ts
@@ -126,7 +126,7 @@ function encodeBase64Url(data: ArrayBuffer | Uint8Array | string): string {
function genKey(rawKey: string) {
return window.crypto.subtle.importKey(
'raw',
- encodeText(rawKey),
+ encodeText(rawKey) as BufferSource,
{ name: 'HMAC', hash: 'SHA-256' },
false,
['sign', 'verify']
@@ -144,7 +144,7 @@ async function createToken(jwtPayload: object, key: string) {
await window.crypto.subtle.sign(
{ name: 'HMAC' },
await genKey(key),
- encodeText(headerAndPayload)
+ encodeText(headerAndPayload) as BufferSource
)
)
)
diff --git a/apps/studio/lib/telemetry.test.tsx b/apps/studio/lib/telemetry.test.tsx
index 4d2d1656a78..3537b94fab4 100644
--- a/apps/studio/lib/telemetry.test.tsx
+++ b/apps/studio/lib/telemetry.test.tsx
@@ -7,6 +7,8 @@ const mocks = vi.hoisted(() => ({
identify: vi.fn(),
useUser: vi.fn(),
useOrganizationsQuery: vi.fn(),
+ setUser: vi.fn(),
+ setTag: vi.fn(),
}))
vi.mock('common', async (importOriginal) => {
@@ -34,7 +36,8 @@ vi.mock('@/hooks/misc/useSelectedOrganization', () => ({
}))
vi.mock('@sentry/nextjs', () => ({
- setUser: vi.fn(),
+ setUser: (...args: unknown[]) => mocks.setUser(...args),
+ setTag: (...args: unknown[]) => mocks.setTag(...args),
}))
const USER_ID = 'user-abc-123'
@@ -48,6 +51,8 @@ describe('Telemetry — posthog identify mirroring', () => {
mocks.identify.mockReset()
mocks.useUser.mockReset()
mocks.useOrganizationsQuery.mockReset()
+ mocks.setUser.mockReset()
+ mocks.setTag.mockReset()
})
it('fires identify with both org_count and signup_timestamp when user and orgs are loaded', async () => {
@@ -146,3 +151,32 @@ describe('Telemetry — posthog identify mirroring', () => {
expect(mocks.identify).not.toHaveBeenCalled()
})
})
+
+describe('Telemetry — Sentry user identification', () => {
+ beforeEach(() => {
+ mocks.identify.mockReset()
+ mocks.useUser.mockReset()
+ mocks.useOrganizationsQuery.mockReset()
+ mocks.setUser.mockReset()
+ })
+
+ it('sets the raw (un-hashed) user id on Sentry', async () => {
+ mocks.useUser.mockReturnValue({ id: USER_ID, created_at: CREATED_AT })
+ mocks.useOrganizationsQuery.mockReturnValue({ data: orgs(1) })
+
+ render(<Telemetry />)
+
+ await waitFor(() => {
+ expect(mocks.setUser).toHaveBeenCalledWith({ id: USER_ID })
+ })
+ })
+
+ it('does not set a Sentry user when the user is not logged in', async () => {
+ mocks.useUser.mockReturnValue(null)
+ mocks.useOrganizationsQuery.mockReturnValue({ data: orgs(1) })
+
+ render(<Telemetry />)
+ await new Promise((r) => setTimeout(r, 10))
+ expect(mocks.setUser).not.toHaveBeenCalled()
+ })
+})
diff --git a/apps/studio/lib/telemetry.tsx b/apps/studio/lib/telemetry.tsx
index 9ae59ef7441..cdf1a5b1c00 100644
--- a/apps/studio/lib/telemetry.tsx
+++ b/apps/studio/lib/telemetry.tsx
@@ -1,5 +1,5 @@
import * as Sentry from '@sentry/nextjs'
-import { LOCAL_STORAGE_KEYS, PageTelemetry, posthogClient, safeLocalStorage, useUser } from 'common'
+import { PageTelemetry, posthogClient, useParams, useUser } from 'common'
import { useEffect, useRef } from 'react'
import { useConsentToast } from 'ui-patterns/consent'
@@ -7,16 +7,6 @@ import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { API_URL, IS_PLATFORM } from '@/lib/constants'
-const getAnonId = async (id: string) => {
- const encoder = new TextEncoder()
- const data = encoder.encode(id)
- const hashBuffer = await crypto.subtle.digest('SHA-256', data)
- const hashArray = Array.from(new Uint8Array(hashBuffer))
- const base64String = btoa(hashArray.map((byte) => String.fromCharCode(byte)).join(''))
-
- return base64String
-}
-
export function Telemetry() {
// Although this is "technically" breaking the rules of hooks
// IS_PLATFORM never changes within a session, so this won't cause any issues
@@ -29,6 +19,9 @@ export function Telemetry() {
const user = useUser()
+ // Project ref from the URL params, mirroring the backend's `request.params.ref`
+ const { ref: projectRef } = useParams()
+
// Mirror the user's org-list length into a PostHog person property so feature
// flags and analytics can segment by current org membership. signup_timestamp
// is set on the same identify so flag audiences requiring both properties see
@@ -60,22 +53,16 @@ export function Telemetry() {
useEffect(() => {
// don't set the sentry user id if the user hasn't logged in (so that Sentry errors show null user id instead of anonymous id)
- if (!user?.id) {
- return
+ if (user?.id) {
+ Sentry.setUser({ id: user.id })
}
- const setSentryId = async () => {
- let sentryUserId = safeLocalStorage.getItem(LOCAL_STORAGE_KEYS.SENTRY_USER_ID)
- if (!sentryUserId) {
- sentryUserId = await getAnonId(user?.id)
- safeLocalStorage.setItem(LOCAL_STORAGE_KEYS.SENTRY_USER_ID, sentryUserId)
- }
- Sentry.setUser({ id: sentryUserId })
- }
-
- // if an error happens, continue without setting a sentry id
- setSentryId().catch((e) => console.error(e))
- }, [user?.id])
+ // Tag Sentry events with the current project ref and customer org slug so backend/
+ // frontend errors can be filtered by project / org. Passing a null value clears
+ // the tag, so stale values don't leak across navigation.
+ Sentry.setTag('project_ref', projectRef ?? null)
+ Sentry.setTag('org_slug', organization?.slug ?? null)
+ }, [user?.id, projectRef, organization?.slug])
return (
<PageTelemetry
diff --git a/apps/studio/lib/telemetry/funnel-errors.test.ts b/apps/studio/lib/telemetry/funnel-errors.test.ts
new file mode 100644
index 00000000000..6abe0049b6d
--- /dev/null
+++ b/apps/studio/lib/telemetry/funnel-errors.test.ts
@@ -0,0 +1,114 @@
+import type { FieldErrors } from 'react-hook-form'
+import { describe, expect, it } from 'vitest'
+
+import { classifyApiError, classifyStripeError, classifyValidationError } from './funnel-errors'
+
+describe('classifyApiError', () => {
+ it('classifies connection timeout as network', () => {
+ expect(classifyApiError('signup', { errorType: 'connection-timeout' })).toEqual({
+ errorCategory: 'network',
+ errorReason: 'connection_timeout',
+ })
+ })
+
+ it('classifies a missing status code as network_error', () => {
+ expect(classifyApiError('project_creation', { message: 'Failed to fetch' })).toEqual({
+ errorCategory: 'network',
+ errorReason: 'network_error',
+ })
+ })
+
+ it('classifies 429 as rate_limited regardless of message', () => {
+ expect(classifyApiError('signup', { code: 429, message: 'whatever' })).toEqual({
+ errorCategory: 'api',
+ errorReason: 'rate_limited',
+ errorCode: 429,
+ })
+ })
+
+ it('classifies 5xx as server_error', () => {
+ expect(classifyApiError('org_creation', { code: 500, message: 'boom' })).toEqual({
+ errorCategory: 'api',
+ errorReason: 'server_error',
+ errorCode: 500,
+ })
+ })
+
+ it('matches a known 4xx signup message to a reason slug', () => {
+ expect(classifyApiError('signup', { code: 400, message: 'User already registered' })).toEqual({
+ errorCategory: 'api',
+ errorReason: 'email_already_registered',
+ errorCode: 400,
+ })
+ })
+
+ it('matches a known 4xx project message to a reason slug', () => {
+ expect(
+ classifyApiError('project_creation', {
+ code: 403,
+ message: 'Your organization can only have 2 projects',
+ })
+ ).toEqual({ errorCategory: 'api', errorReason: 'project_limit_reached', errorCode: 403 })
+ })
+
+ it('falls back to other for an unmapped 4xx message', () => {
+ expect(classifyApiError('signup', { code: 400, message: 'totally novel error' })).toEqual({
+ errorCategory: 'api',
+ errorReason: 'other',
+ errorCode: 400,
+ })
+ })
+})
+
+describe('classifyValidationError', () => {
+ it('maps a signup password error to password_invalid', () => {
+ expect(
+ classifyValidationError('signup', { password: { type: 'too_small' } } as FieldErrors)
+ ).toEqual({
+ errorCategory: 'validation',
+ errorReason: 'password_invalid',
+ })
+ })
+
+ it('respects field priority (email before password)', () => {
+ expect(
+ classifyValidationError('signup', {
+ email: { type: 'invalid' },
+ password: { type: 'too_small' },
+ } as FieldErrors)
+ ).toEqual({ errorCategory: 'validation', errorReason: 'email_invalid' })
+ })
+
+ it('maps an org name error to org_name_missing', () => {
+ expect(
+ classifyValidationError('org_creation', { name: { type: 'too_small' } } as FieldErrors)
+ ).toEqual({
+ errorCategory: 'validation',
+ errorReason: 'org_name_missing',
+ })
+ })
+
+ it('falls back to other for an unmapped field', () => {
+ expect(
+ classifyValidationError('project_creation', { somethingNew: { type: 'x' } } as FieldErrors)
+ ).toEqual({ errorCategory: 'validation', errorReason: 'other' })
+ })
+})
+
+describe('classifyStripeError', () => {
+ it('maps a decline_code to a card reason slug', () => {
+ expect(
+ classifyStripeError({ code: 'card_declined', decline_code: 'insufficient_funds' })
+ ).toEqual({
+ errorCategory: 'payment',
+ errorReason: 'card_insufficient_funds',
+ })
+ })
+
+ it('falls back to payment_failed for an unknown code', () => {
+ expect(classifyStripeError({ code: 'mystery' })).toEqual({
+ errorCategory: 'payment',
+ errorReason: 'payment_failed',
+ })
+ })
+})
diff --git a/apps/studio/lib/telemetry/funnel-errors.ts b/apps/studio/lib/telemetry/funnel-errors.ts
new file mode 100644
index 00000000000..67c92592fed
--- /dev/null
+++ b/apps/studio/lib/telemetry/funnel-errors.ts
@@ -0,0 +1,155 @@
+import type { FieldErrors } from 'react-hook-form'
+
+export type FunnelOrigin = 'signup' | 'project_creation' | 'org_creation'
+export type ErrorCategory = 'validation' | 'api' | 'network' | 'payment' | 'unknown'
+
+export interface FunnelErrorClassification {
+ errorCategory: ErrorCategory
+ errorReason: FunnelErrorReason
+ errorCode?: number
+}
+
+const RATE_LIMIT_STATUS = 429
+
+const API_REASON_PATTERNS = {
+ signup: [
+ [/already registered|already been registered|already exists/i, 'email_already_registered'],
+ [/rate limit|too many requests|after \d+ second/i, 'rate_limited'],
+ [/captcha/i, 'captcha_failed'],
+ [/password/i, 'password_rejected'],
+ [/valid email|invalid email|email address/i, 'email_invalid'],
+ ],
+ project_creation: [
+ [/already exists/i, 'project_name_taken'],
+ [/free plan|free tier/i, 'free_tier_limit'],
+ [/limit|maximum number|can only have/i, 'project_limit_reached'],
+ [/payment|invoice|overdue|past due|billing/i, 'billing_issue'],
+ [/region/i, 'region_unavailable'],
+ [/db_pass|password/i, 'db_password_rejected'],
+ ],
+ org_creation: [
+ [/already exists|name.*taken/i, 'org_name_taken'],
+ [/payment|card|invoice|billing/i, 'billing_issue'],
+ [/limit/i, 'org_limit_reached'],
+ ],
+} as const satisfies Record<FunnelOrigin, ReadonlyArray<readonly [RegExp, string]>>
+
+const VALIDATION_FIELD_REASONS = {
+ signup: {
+ email: 'email_invalid',
+ password: 'password_invalid',
+ },
+ project_creation: {
+ organization: 'organization_missing',
+ projectName: 'project_name_invalid',
+ dbPass: 'db_password_weak',
+ dbPassStrength: 'db_password_weak',
+ dbRegion: 'region_missing',
+ cloudProvider: 'cloud_provider_invalid',
+ postgresVersion: 'postgres_version_missing',
+ highAvailability: 'incompatible_options',
+ useOrioleDb: 'incompatible_options',
+ },
+ org_creation: {
+ name: 'org_name_missing',
+ kind: 'org_kind_invalid',
+ size: 'org_size_invalid',
+ },
+} as const satisfies Record<FunnelOrigin, Readonly<Record<string, string>>>
+
+const STRIPE_DECLINE_REASONS = {
+ insufficient_funds: 'card_insufficient_funds',
+ card_declined: 'card_declined',
+ expired_card: 'card_expired',
+ incorrect_cvc: 'card_incorrect_cvc',
+ incorrect_number: 'card_incorrect_number',
+ processing_error: 'card_processing_error',
+} as const satisfies Record<string, string>
+
+const GENERIC_REASONS = [
+ 'rate_limited',
+ 'server_error',
+ 'connection_timeout',
+ 'network_error',
+ 'payment_failed',
+ 'payment_error',
+ 'oriole_unavailable',
+ 'unauthorized',
+ 'forbidden',
+ 'not_found',
+ 'other',
+] as const
+
+type ValuesOf<T> = T extends Readonly<Record<string, infer V extends string>> ? V : never
+
+export type FunnelErrorReason =
+ | (typeof API_REASON_PATTERNS)[FunnelOrigin][number][1]
+ | ValuesOf<(typeof VALIDATION_FIELD_REASONS)[FunnelOrigin]>
+ | ValuesOf<typeof STRIPE_DECLINE_REASONS>
+ | (typeof GENERIC_REASONS)[number]
+
+const STATUS_REASONS: Readonly<Partial<Record<number, FunnelErrorReason>>> = {
+ 401: 'unauthorized',
+ 403: 'forbidden',
+ 404: 'not_found',
+}
+
+export function classifyApiError(origin: FunnelOrigin, error: unknown): FunnelErrorClassification {
+ const err = error as { code?: unknown; errorType?: unknown; message?: unknown }
+ const code = typeof err?.code === 'number' ? err.code : undefined
+ const message = typeof err?.message === 'string' ? err.message : ''
+
+ if (err?.errorType === 'connection-timeout') {
+ return { errorCategory: 'network', errorReason: 'connection_timeout' }
+ }
+ if (code === undefined) {
+ return { errorCategory: 'network', errorReason: 'network_error' }
+ }
+ if (code === RATE_LIMIT_STATUS) {
+ return { errorCategory: 'api', errorReason: 'rate_limited', errorCode: code }
+ }
+ if (code >= 500) {
+ return { errorCategory: 'api', errorReason: 'server_error', errorCode: code }
+ }
+ for (const [pattern, reason] of API_REASON_PATTERNS[origin]) {
+ if (pattern.test(message)) {
+ return { errorCategory: 'api', errorReason: reason, errorCode: code }
+ }
+ }
+ const statusReason = STATUS_REASONS[code]
+ if (statusReason) {
+ return { errorCategory: 'api', errorReason: statusReason, errorCode: code }
+ }
+ return { errorCategory: 'api', errorReason: 'other', errorCode: code }
+}
+
+export function classifyValidationError(
+ origin: FunnelOrigin,
+ errors: FieldErrors
+): FunnelErrorClassification {
+ const fieldErrors = errors as Record<string, unknown>
+ const reasons = VALIDATION_FIELD_REASONS[origin] as Readonly<Record<string, FunnelErrorReason>>
+ for (const field of Object.keys(reasons)) {
+ if (fieldErrors[field]) {
+ return { errorCategory: 'validation', errorReason: reasons[field] }
+ }
+ }
+ return { errorCategory: 'validation', errorReason: 'other' }
+}
+
+export function classifyStripeError(error: unknown): FunnelErrorClassification {
+ const err = error as { code?: unknown; decline_code?: unknown }
+ const key =
+ typeof err?.decline_code === 'string'
+ ? err.decline_code
+ : typeof err?.code === 'string'
+ ? err.code
+ : undefined
+ const reason = key
+ ? (STRIPE_DECLINE_REASONS as Readonly<Record<string, FunnelErrorReason>>)[key]
+ : undefined
+ if (reason) {
+ return { errorCategory: 'payment', errorReason: reason }
+ }
+ return { errorCategory: 'payment', errorReason: 'payment_failed' }
+}
diff --git a/apps/studio/lib/telemetry/track.ts b/apps/studio/lib/telemetry/track.ts
index 43dd260cb5f..88f615e7bfa 100644
--- a/apps/studio/lib/telemetry/track.ts
+++ b/apps/studio/lib/telemetry/track.ts
@@ -3,7 +3,7 @@ import { TelemetryEvent, TelemetryGroups } from 'common/telemetry-constants'
import { useRouter } from 'next/router'
import { useCallback } from 'react'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { API_URL } from '@/lib/constants'
diff --git a/apps/studio/lib/telemetry/use-track-funnel-error.ts b/apps/studio/lib/telemetry/use-track-funnel-error.ts
new file mode 100644
index 00000000000..3aa00091a55
--- /dev/null
+++ b/apps/studio/lib/telemetry/use-track-funnel-error.ts
@@ -0,0 +1,28 @@
+import { useCallback } from 'react'
+
+import type { FunnelErrorClassification, FunnelOrigin } from '@/lib/telemetry/funnel-errors'
+import { useTrack } from '@/lib/telemetry/track'
+
+// Matches the existing dashboard_error_created capture rate; keeps PostHog volume bounded.
+const SAMPLE_RATE = 0.1
+
+export function useTrackFunnelError() {
+ const track = useTrack()
+ return useCallback(
+ (
+ origin: FunnelOrigin,
+ classification: FunnelErrorClassification,
+ source: 'toast' | 'form' = 'toast'
+ ) => {
+ if (Math.random() >= SAMPLE_RATE) return
+ track('dashboard_error_created', {
+ source,
+ origin,
+ errorCategory: classification.errorCategory,
+ errorReason: classification.errorReason,
+ ...(classification.errorCode !== undefined && { errorCode: classification.errorCode }),
+ })
+ },
+ [track]
+ )
+}
diff --git a/apps/studio/next.config.ts b/apps/studio/next.config.ts
index bdaba9c3961..0f956022608 100644
--- a/apps/studio/next.config.ts
+++ b/apps/studio/next.config.ts
@@ -5,6 +5,12 @@ import { withSentryConfig } from '@sentry/nextjs'
import type { NextConfig } from 'next'
import { getCSP } from './csp'
+import {
+ getMaintenanceRedirects,
+ PLATFORM_REDIRECTS,
+ SELF_HOSTED_REDIRECTS,
+ SHARED_REDIRECTS,
+} from './redirects.shared'
const withBundleAnalyzer = bundleAnalyzer({
enabled: process.env.ANALYZE === 'true',
@@ -61,423 +67,15 @@ const nextConfig = {
]
},
async redirects() {
+ // Rules live in `redirects.shared.ts` (shared with `vercel.ts`). Next
+ // auto-prepends `basePath` to source and destination on its own,
+ // except for the special `/` → basePath bounce below which opts out
+ // via `basePath: false`.
+ const isPlatform = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+ const maintenance = process.env.MAINTENANCE_MODE === 'true'
return [
- ...(process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
- ? [
- {
- source: '/',
- has: [
- {
- type: 'query' as const,
- key: 'next',
- value: 'new-project',
- },
- ],
- destination: '/new/new-project',
- permanent: false,
- },
- {
- source: '/',
- destination: '/org',
- permanent: false,
- },
- {
- source: '/register',
- destination: '/sign-up',
- permanent: false,
- },
- {
- source: '/signup',
- destination: '/sign-up',
- permanent: false,
- },
- {
- source: '/signin',
- destination: '/sign-in',
- permanent: false,
- },
- {
- source: '/login',
- destination: '/sign-in',
- permanent: false,
- },
- {
- source: '/log-in',
- destination: '/sign-in',
- permanent: false,
- },
- {
- source: '/project/:ref/building',
- destination: '/project/:ref',
- permanent: false,
- },
- ]
- : [
- {
- source: '/',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/register',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/signup',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/signin',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/login',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/log-in',
- destination: '/project/default',
- permanent: false,
- },
- {
- source: '/project/:ref/building',
- destination: '/project/:ref',
- permanent: false,
- },
- ]),
- {
- source: '/project/:ref/auth',
- destination: '/project/:ref/auth/users',
- permanent: true,
- },
- {
- source: '/project/:ref/auth/advanced',
- destination: '/project/:ref/auth/performance',
- permanent: true,
- },
- {
- source: '/project/:ref/database',
- destination: '/project/:ref/database/tables',
- permanent: true,
- },
- {
- source: '/project/:ref/database/graphiql',
- destination: '/project/:ref/api/graphiql',
- permanent: true,
- },
- {
- source: '/project/:ref/storage',
- destination: '/project/:ref/storage/files',
- permanent: true,
- },
- {
- source: '/project/:ref/storage/buckets',
- destination: '/project/:ref/storage/files',
- permanent: true,
- },
- {
- source: '/project/:ref/storage/policies',
- destination: '/project/:ref/storage/files/policies',
- permanent: true,
- },
- {
- source: '/project/:ref/storage/buckets/:bucketId',
- destination: '/project/:ref/storage/files/buckets/:bucketId',
- permanent: true,
- },
- {
- permanent: true,
- source: '/project/:ref/settings/api-keys/new',
- destination: '/project/:ref/settings/api-keys',
- },
- {
- source: '/project/:ref/settings/storage',
- destination: '/project/:ref/storage/files/settings',
- permanent: true,
- },
- {
- source: '/project/:ref/storage/settings',
- destination: '/project/:ref/storage/files/settings',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/database',
- destination: '/project/:ref/database/settings',
- permanent: true,
- },
- {
- source: '/project/:ref/settings',
- destination: '/project/:ref/settings/general',
- permanent: true,
- },
- {
- source: '/project/:ref/auth/settings',
- destination: '/project/:ref/auth/users',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/subscription',
- has: [
- {
- type: 'query',
- key: 'panel',
- value: 'subscriptionPlan',
- },
- ],
- destination: '/org/_/billing?panel=subscriptionPlan',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/subscription',
- has: [
- {
- type: 'query',
- key: 'panel',
- value: 'pitr',
- },
- ],
- destination: '/project/:ref/settings/addons?panel=pitr',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/subscription',
- has: [
- {
- type: 'query',
- key: 'panel',
- value: 'computeInstance',
- },
- ],
- destination: '/project/:ref/settings/compute-and-disk',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/subscription',
- has: [
- {
- type: 'query',
- key: 'panel',
- value: 'customDomain',
- },
- ],
- destination: '/project/:ref/settings/addons?panel=customDomain',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/subscription',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- permanent: true,
- source: '/project/:ref/settings/jwt/signing-keys',
- destination: '/project/:ref/settings/jwt',
- },
- {
- source: '/project/:ref/database/api-logs',
- destination: '/project/:ref/logs/edge-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/database/postgres-logs',
- destination: '/project/:ref/logs/postgres-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/database/postgrest-logs',
- destination: '/project/:ref/logs/postgrest-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/database/pgbouncer-logs',
- destination: '/project/:ref/logs/pooler-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/logs/pgbouncer-logs',
- destination: '/project/:ref/logs/pooler-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/database/realtime-logs',
- destination: '/project/:ref/logs/realtime-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/storage/logs',
- destination: '/project/:ref/logs/storage-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/auth/logs',
- destination: '/project/:ref/logs/auth-logs',
- permanent: true,
- },
- {
- source: '/project/:ref/logs-explorer',
- destination: '/project/:ref/logs/explorer',
- permanent: true,
- },
- {
- source: '/project/:ref/sql/quickstarts',
- destination: '/project/:ref/sql/examples',
- permanent: true,
- },
- {
- source: '/org/:slug/settings',
- destination: '/org/:slug/general',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/update',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/update/free',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/update/pro',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/update/team',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/billing/update/enterprise',
- destination: '/org/_/billing',
- permanent: true,
- },
- {
- permanent: true,
- source: '/project/:ref/reports/linter',
- destination: '/project/:ref/database/linter',
- },
- {
- permanent: true,
- source: '/project/:ref/reports',
- destination: '/project/:ref/observability',
- },
- {
- permanent: true,
- source: '/project/:ref/reports/:path*',
- destination: '/project/:ref/observability/:path*',
- },
- {
- permanent: true,
- source: '/project/:ref/query-performance',
- destination: '/project/:ref/observability/query-performance',
- },
- {
- permanent: true,
- source: '/project/:ref/advisors/query-performance',
- destination: '/project/:ref/observability/query-performance',
- },
- {
- permanent: true,
- source: '/project/:ref/database/query-performance',
- destination: '/project/:ref/observability/query-performance',
- },
- {
- permanent: true,
- source: '/project/:ref/auth/column-privileges',
- destination: '/project/:ref/database/column-privileges',
- },
- {
- permanent: true,
- source: '/project/:ref/database/linter',
- destination: '/project/:ref/database/security-advisor',
- },
- {
- permanent: true,
- source: '/project/:ref/database/security-advisor',
- destination: '/project/:ref/advisors/security',
- },
- {
- permanent: true,
- source: '/project/:ref/database/performance-advisor',
- destination: '/project/:ref/advisors/performance',
- },
- {
- permanent: true,
- source: '/project/:ref/database/webhooks',
- destination: '/project/:ref/integrations/webhooks/overview',
- },
- {
- permanent: true,
- source: '/project/:ref/database/wrappers',
- destination: '/project/:ref/integrations?category=wrapper',
- },
- {
- permanent: true,
- source: '/project/:ref/database/cron-jobs',
- destination: '/project/:ref/integrations/cron',
- },
- {
- permanent: true,
- source: '/project/:ref/api/graphiql',
- destination: '/project/:ref/integrations/graphiql',
- },
- {
- permanent: true,
- source: '/project/:ref/settings/vault/secrets',
- destination: '/project/:ref/integrations/vault/secrets',
- },
- {
- permanent: true,
- source: '/project/:ref/settings/vault/keys',
- destination: '/project/:ref/integrations/vault/keys',
- },
- {
- permanent: true,
- source: '/project/:ref/integrations/cron-jobs',
- destination: '/project/:ref/integrations/cron',
- },
- {
- permanent: true,
- source: '/project/:ref/settings/warehouse',
- destination: '/project/:ref/settings/general',
- },
- {
- permanent: true,
- source: '/project/:ref/settings/functions',
- destination: '/project/:ref/functions/secrets',
- },
- {
- source: '/org/:slug/invoices',
- destination: '/org/:slug/billing#invoices',
- permanent: true,
- },
- {
- source: '/projects',
- destination: '/organizations',
- permanent: false,
- },
- {
- source: '/project/:ref/settings/auth',
- destination: '/project/:ref/auth/providers',
- permanent: true,
- },
- {
- source: '/project/:ref/settings/api',
- destination: '/project/:ref/integrations/data_api/overview',
- permanent: false,
- },
- {
- source: '/project/:ref/api',
- destination: '/project/:ref/integrations/data_api/docs',
- permanent: false,
- },
-
+ ...(isPlatform ? PLATFORM_REDIRECTS : SELF_HOSTED_REDIRECTS),
+ ...SHARED_REDIRECTS,
...(process.env.NEXT_PUBLIC_BASE_PATH?.length
? [
{
@@ -488,22 +86,7 @@ const nextConfig = {
},
]
: []),
-
- ...(process.env.MAINTENANCE_MODE === 'true'
- ? [
- {
- source: '/((?!maintenance|img).*)', // Redirect all paths except /maintenance and /img
- destination: '/maintenance',
- permanent: false,
- },
- ]
- : [
- {
- source: '/maintenance',
- destination: '/',
- permanent: false,
- },
- ]),
+ ...getMaintenanceRedirects(maintenance),
]
},
async headers() {
diff --git a/apps/studio/package.json b/apps/studio/package.json
index 5c1c9f7e86b..6e33001d93c 100644
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -6,9 +6,17 @@
"scripts": {
"preinstall": "npx only-allow pnpm",
"predev": "node scripts/clean-turbopack-cache.mjs",
- "dev": "next dev -p ${STUDIO_PORT:-8082}",
- "build": "next build && if [ \"$SKIP_ASSET_UPLOAD\" != \"1\" ]; then ./../../scripts/upload-static-assets.sh; fi",
- "start": "next start -p 8082",
+ "dev": "node scripts/dispatch.js dev",
+ "build": "node scripts/dispatch.js build",
+ "start": "node scripts/dispatch.js start",
+ "preview": "vite preview --mode ${MODE:-production} --port 8082",
+ "dev:next": "next dev -p ${STUDIO_PORT:-8082}",
+ "build:next": "next build && if [ \"$SKIP_ASSET_UPLOAD\" != \"1\" ]; then ./../../scripts/upload-static-assets.sh; fi",
+ "start:next": "next start -p 8082",
+ "dev:tanstack": "NODE_OPTIONS=--max-old-space-size=8192 vite dev --port ${STUDIO_PORT:-8082}",
+ "build:tanstack": "vite build --mode ${MODE:-production} && pnpm smoke:tanstack",
+ "smoke:tanstack": "node scripts/smoke-server.mjs",
+ "start:tanstack": "node scripts/serve.js",
"lint": "eslint .",
"lint:ratchet": "tsx scripts/ratchet-eslint-rules.ts --rule react-hooks/exhaustive-deps --rule import/no-anonymous-default-export --rule @tanstack/query/exhaustive-deps --rule @typescript-eslint/no-explicit-any --rule no-restricted-imports --rule no-restricted-exports --rule react/no-unstable-nested-components",
"clean": "rimraf node_modules tsconfig.tsbuildinfo .next .turbo",
@@ -51,10 +59,11 @@
"@hookform/resolvers": "^3.1.1",
"@mjackson/multipart-parser": "^0.10.1",
"@modelcontextprotocol/sdk": "^1.29.0",
- "@monaco-editor/react": "^4.6.0",
+ "@monaco-editor/react": "catalog:",
"@next/bundle-analyzer": "16.2.3",
"@number-flow/react": "^0.3.2",
"@sentry/nextjs": "catalog:",
+ "@sentry/react": "^10.27.0",
"@std/path": "npm:@jsr/std__path@^1.0.8",
"@stripe/react-stripe-js": "6.1.0",
"@stripe/stripe-js": "9.1.0",
@@ -63,13 +72,17 @@
"@supabase/pg-meta": "workspace:*",
"@supabase/realtime-js": "catalog:",
"@supabase/shared-types": "0.1.88",
- "@supabase/sql-to-rest": "^0.1.6",
"@supabase/supabase-js": "catalog:",
- "@tanstack/react-hotkeys": "^0.9.1",
- "@tanstack/react-query": "^5.0.0",
- "@tanstack/react-query-devtools": "^5.0.0",
- "@tanstack/react-table": "^8.21.3",
- "@tanstack/react-virtual": "^3.13.12",
+ "@tanstack/react-devtools": "^0.10.3",
+ "@tanstack/react-hotkeys": "^0.10.0",
+ "@tanstack/react-query": "~5.83.0",
+ "@tanstack/react-query-devtools": "~5.90.2",
+ "@tanstack/react-router": "catalog:",
+ "@tanstack/react-router-devtools": "^1.166.13",
+ "@tanstack/react-router-ssr-query": "^1.166.12",
+ "@tanstack/react-start": "catalog:",
+ "@tanstack/react-table": "catalog:",
+ "@tanstack/react-virtual": "^3.13.24",
"@types/d3-geo": "^3.1.0",
"@uidotdev/usehooks": "^2.4.1",
"@vercel/functions": "^2.1.0",
@@ -96,15 +109,13 @@
"http-status": "^2.1.0",
"icons": "workspace:*",
"idb": "^8.0.2",
- "immutability-helper": "^3.1.1",
"ip-num": "^1.5.1",
"json-logic-js": "^2.0.2",
"lodash": "catalog:",
"lucide-react": "^0.436.0",
"markdown-table": "^3.0.3",
- "memoize-one": "^5.0.1",
"mime-db": "^1.53.0",
- "monaco-editor": "0.52.2",
+ "monaco-editor": "catalog:",
"next": "catalog:",
"next-themes": "catalog:",
"nuqs": "2.7.1",
@@ -112,7 +123,6 @@
"openapi-fetch": "0.12.4",
"papaparse": "^5.3.1",
"path-to-regexp": "^8.0.0",
- "pg-minify": "^1.6.3",
"radix-ui": "catalog:",
"randombytes": "^2.1.0",
"react": "catalog:",
@@ -133,7 +143,6 @@
"shared-data": "workspace:*",
"sonner": "^1.5.0",
"sql-formatter": "^15.0.0",
- "sqlstring": "^2.3.2",
"streamdown": "^1.3.0",
"@stripe/sync-engine": "1.0.32",
"swiper": "^12.1.2",
@@ -154,6 +163,8 @@
"@graphql-typed-document-node/core": "^3.2.0",
"@radix-ui/react-use-escape-keydown": "^1.1.1",
"@smithy/property-provider": "^4.0.4",
+ "@tailwindcss/vite": "4.2.4",
+ "@tanstack/devtools-vite": "^0.6.0",
"@testing-library/dom": "^10.0.0",
"@testing-library/jest-dom": "^6.6.0",
"@testing-library/react": "^16.0.0",
@@ -163,20 +174,16 @@
"@types/file-saver": "^2.0.2",
"@types/json-logic-js": "^1.2.1",
"@types/lodash": "^4.14.172",
- "@types/markdown-table": "^3.0.0",
"@types/mime-db": "^1.43.5",
"@types/node": "catalog:",
"@types/papaparse": "^5.3.1",
"@types/randombytes": "^2.0.3",
"@types/react": "catalog:",
- "@types/react-beautiful-dnd": "^13.1.2",
- "@types/react-datepicker": "^4.3.4",
"@types/react-dom": "catalog:",
"@types/react-grid-layout": "^1.3.0",
"@types/react-simple-maps": "^3.0.1",
- "@types/recharts": "^1.8.23",
- "@types/sqlstring": "^2.3.0",
"@types/zxcvbn": "^4.4.1",
+ "@vercel/config": "^0.2.1",
"@vitejs/plugin-react": "catalog:",
"@vitest/coverage-v8": "catalog:",
"@vitest/ui": "catalog:",
@@ -199,7 +206,6 @@
"postcss": "catalog:",
"raw-loader": "^4.0.2",
"require-in-the-middle": "^8.0.0",
- "tailwindcss": "catalog:",
"tsconfig": "workspace:*",
"tsx": "catalog:",
"typescript": "catalog:",
diff --git a/apps/studio/pages/_app.tsx b/apps/studio/pages/_app.tsx
index f55fde22c31..2a4421b4a1d 100644
--- a/apps/studio/pages/_app.tsx
+++ b/apps/studio/pages/_app.tsx
@@ -1,5 +1,4 @@
import '@/styles/code.css'
-import '@/styles/editor.css'
import '@/styles/focus.css'
import '@/styles/globals.css'
import '@/styles/graphiql-base.css'
@@ -39,7 +38,7 @@ import { NuqsAdapter } from 'nuqs/adapters/next/pages'
import { ErrorInfo, useCallback, useEffect, useState, type ComponentProps } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { TooltipProvider } from 'ui'
-import { TimestampInfoProvider } from 'ui-patterns'
+import { TimestampInfoProvider } from 'ui-patterns/TimestampInfo'
import { StudioCommandMenu } from '@/components/interfaces/App/CommandMenu'
import { StudioCommandProvider as CommandProvider } from '@/components/interfaces/App/CommandMenu/StudioCommandProvider'
@@ -53,7 +52,7 @@ import { GlobalErrorBoundaryState } from '@/components/ui/ErrorBoundary/GlobalEr
import { GlobalShortcuts } from '@/components/ui/GlobalShortcuts/GlobalShortcuts'
import { getCLIReleaseVersion } from '@/data/misc/cli-release-version-query'
import { useRootQueryClient } from '@/data/query-client'
-import { customFont, sourceCodePro } from '@/fonts'
+import { inter, manrope, sourceCodePro } from '@/fonts'
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import { AuthProvider } from '@/lib/auth'
@@ -119,18 +118,14 @@ const TimestampInfoTimezoneBridge = ({ children }: { children: React.ReactNode }
return <TimestampInfoProvider timezone={timezone}>{children}</TimestampInfoProvider>
}
-loader.config({
- // [Joshen] Attempt for offline support/bypass ISP issues is to store the assets required for monaco
- // locally. We're however, only storing the assets which we need (based on what the network tab loads
- // while using monaco). If we end up facing more effort trying to maintain this, probably to either
- // use cloudflare or find some way to pull all the files from a CDN via a CLI, rather than tracking individual files
- // The alternative was to import * as monaco from 'monaco-editor' but i couldn't get it working
- paths: {
- vs: IS_PLATFORM
- ? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs'
- : `${BASE_PATH}/monaco-editor`,
- },
-})
+// [Ivan] Serve the Monaco assets locally from the public folder. The worker bootstrap
+// (vs/base/worker/workerMain.js) loads the language workers (e.g. tsWorker.js) via fetch()
+// from inside the web worker. A root-relative path fails to resolve there in some browsers
+// (Firefox throws "... is not a valid URL"), so we point `vs` at an absolute URL including
+// the origin. Guarded on `window` since this module is also evaluated during SSR.
+if (typeof window !== 'undefined') {
+ loader.config({ paths: { vs: `${window.location.origin}${BASE_PATH}/monaco-editor/vs` } })
+}
// [Joshen TODO] Once we settle on the new nav layout - we'll need a lot of clean up in terms of our layout components
// a lot of them are unnecessary and introduce way too many cluttered CSS especially with the height styles that make
@@ -191,7 +186,7 @@ function CustomApp({ Component, pageProps }: AppPropsWithLayout) {
{/* [Alaister]: This has to be an inline style tag here and not a separate component due to next/font */}
<style
dangerouslySetInnerHTML={{
- __html: `:root{--font-custom:${customFont.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
+ __html: `:root{--font-sans:${inter.style.fontFamily};--font-heading:${manrope.style.fontFamily};--font-source-code-pro:${sourceCodePro.style.fontFamily};}`,
}}
/>
{/* Speed up initial API loading times by pre-connecting to the API domain */}
diff --git a/apps/studio/pages/_document.tsx b/apps/studio/pages/_document.tsx
index 4ed23910d2d..8560136df0f 100644
--- a/apps/studio/pages/_document.tsx
+++ b/apps/studio/pages/_document.tsx
@@ -1,6 +1,6 @@
import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
-import { BASE_PATH, IS_PLATFORM } from '@/lib/constants'
+import { inter, manrope, sourceCodePro } from '@/fonts'
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
@@ -12,20 +12,8 @@ class MyDocument extends Document {
render() {
return (
<Html lang="en">
- <Head>
- {/* Workaround for https://github.com/suren-atoyan/monaco-react/issues/272 */}
- <link
- rel="stylesheet"
- type="text/css"
- data-name="vs/editor/editor.main"
- href={
- IS_PLATFORM
- ? 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/editor/editor.main.css'
- : `${BASE_PATH}/monaco-editor/editor/editor.main.css`
- }
- />
- </Head>
- <body>
+ <Head />
+ <body className={`${inter.variable} ${manrope.variable} ${sourceCodePro.variable}`}>
<Main />
<NextScript />
</body>
diff --git a/apps/studio/pages/account/security.tsx b/apps/studio/pages/account/security.tsx
index a6d8dfdb5cc..c52cf454728 100644
--- a/apps/studio/pages/account/security.tsx
+++ b/apps/studio/pages/account/security.tsx
@@ -1,5 +1,6 @@
import { Lock } from 'lucide-react'
import { Badge, Card, CardContent, CardHeader } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
@@ -40,6 +41,15 @@ const Security: NextPageWithLayout = () => {
</PageHeaderMeta>
</PageHeader>
<PageContainer size="small">
+ {data?.totp.length === 1 && (
+ <Admonition
+ className="mt-8"
+ type="danger"
+ layout="horizontal"
+ title="Avoid being locked out"
+ description="Add a backup sign-in method now. Otherwise, losing access to your authenticator app will permanently lock you out of your account."
+ />
+ )}
<Card className="mt-8">
<CardHeader className="py-3 flex flex-row items-center justify-between">
<div className="flex flex-row gap-4 items-center py-1 mb-0">
diff --git a/apps/studio/pages/api/ai/code/complete.ts b/apps/studio/pages/api/ai/code/complete.ts
index 46ab01332db..1c2d8218662 100644
--- a/apps/studio/pages/api/ai/code/complete.ts
+++ b/apps/studio/pages/api/ai/code/complete.ts
@@ -9,8 +9,9 @@ import { executeSql } from '@/data/sql/execute-sql-mutation'
import { AiOptInLevel } from '@/hooks/misc/useOrgOptedIntoAi'
import { getOrgAIDetails } from '@/lib/ai/ai-details'
import { getModel } from '@/lib/ai/model'
-import { DEFAULT_COMPLETION_MODEL } from '@/lib/ai/model.utils'
+import { DEFAULT_COMPLETION_MODEL, LOGS_REWRITE_MODEL } from '@/lib/ai/model.utils'
import {
+ CLICKHOUSE_LOGS_COMPLETION_INSTRUCTIONS,
COMPLETION_PROMPT,
EDGE_FUNCTION_PROMPT,
PG_BEST_PRACTICES,
@@ -128,6 +129,7 @@ const requestBodySchema = z.object({
connectionString: z.string().nullish(),
orgSlug: z.string().optional(),
language: z.string().optional(),
+ dialect: z.enum(['postgres', 'clickhouse']).optional(),
})
async function handler(req: NextApiRequest, res: NextApiResponse) {
@@ -148,8 +150,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
return res.status(400).json({ error: 'Invalid request body', issues: parseError.issues })
}
- const { completionMetadata, projectRef, connectionString, orgSlug, language } = data
+ const { completionMetadata, projectRef, connectionString, orgSlug, language, dialect } = data
const { textBeforeCursor, textAfterCursor, prompt, selection } = completionMetadata
+ const isClickhouse = dialect === 'clickhouse'
const authorization = req.headers.authorization
let aiOptInLevel: AiOptInLevel = IS_PLATFORM ? 'disabled' : 'schema'
@@ -168,7 +171,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
systemProviderOptions,
} = await getModel({
provider: 'openai',
- modelEntry: DEFAULT_COMPLETION_MODEL,
+ modelEntry: isClickhouse ? LOGS_REWRITE_MODEL : DEFAULT_COMPLETION_MODEL,
})
if (modelError) {
@@ -180,7 +183,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
...(authorization && { Authorization: authorization }),
}
- const includeSchema = aiOptInLevel !== 'disabled'
+ const includeSchema = !isClickhouse && aiOptInLevel !== 'disabled'
// Fetch schema list first so we can determine which schemas to load DDL for.
// These are best-effort — if they fail, we proceed without DDL context.
@@ -227,29 +230,36 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
otherSchemas: schemas.filter((s) => !fetchedSchemaSet.has(s.name)).map((s) => s.name),
}
- // Important: do not use dynamic content in the system prompt or Bedrock will not cache it
- const system = source`
- ${COMPLETION_PROMPT}
- ${language === 'sql' ? SQL_COMPLETION_INSTRUCTIONS : ''}
- ${language === 'sql' ? PG_BEST_PRACTICES : EDGE_FUNCTION_PROMPT}
- ${SECURITY_PROMPT}
- `
+ const system = isClickhouse
+ ? source`
+ You rewrite SQL queries to ClickHouse SQL for the Supabase logs table.
+ Output only the rewritten SQL query: no explanation, no markdown, and no code fences.
+ ${CLICKHOUSE_LOGS_COMPLETION_INSTRUCTIONS}
+ ${SECURITY_PROMPT}
+ `
+ : source`
+ ${COMPLETION_PROMPT}
+ ${language === 'sql' ? `${SQL_COMPLETION_INSTRUCTIONS}\n${PG_BEST_PRACTICES}` : EDGE_FUNCTION_PROMPT}
+ ${SECURITY_PROMPT}
+ `
- const userMessage = source`
- ## Database Schema
+ const userMessage = isClickhouse
+ ? prompt
+ : source`
+ ## Database Schema
- ${buildDatabaseSchemaSection({ includeSchema, schemaListResult, schemaDDLResult })}
+ ${buildDatabaseSchemaSection({ includeSchema, schemaListResult, schemaDDLResult })}
- ## Code
+ ## Code
- \`\`\`${language ?? ''}
- ${textBeforeCursor}<selection>${selection}</selection>${textAfterCursor}
- \`\`\`
+ \`\`\`${language ?? ''}
+ ${textBeforeCursor}<selection>${selection}</selection>${textAfterCursor}
+ \`\`\`
- ## Instruction
+ ## Instruction
- ${prompt}
- `
+ ${prompt}
+ `
// Note: these must be of type `CoreMessage` to prevent AI SDK from stripping `providerOptions`
// https://github.com/vercel/ai/blob/81ef2511311e8af34d75e37fc8204a82e775e8c3/packages/ai/core/prompt/standardize-prompt.ts#L83-L88
diff --git a/apps/studio/pages/api/parse-query.ts b/apps/studio/pages/api/parse-query.ts
index 4ca8ce1e5cb..b11f6190749 100644
--- a/apps/studio/pages/api/parse-query.ts
+++ b/apps/studio/pages/api/parse-query.ts
@@ -1,20 +1,14 @@
import { parse } from 'libpg-query'
import { NextApiRequest, NextApiResponse } from 'next'
-const getOperation = async (sql: string) => {
- const ast = await parse(sql)
- const stmt = ast.stmts?.[0]?.stmt
-
- if (!stmt) return null
-
+const getOperation = (stmt: Record<string, unknown>) => {
if ('SelectStmt' in stmt) return 'SELECT'
if ('InsertStmt' in stmt) return 'INSERT'
if ('UpdateStmt' in stmt) return 'UPDATE'
if ('DeleteStmt' in stmt) return 'DELETE'
}
-const getTablesInQuery = async (sql: string) => {
- const ast = await parse(sql)
+const getTablesInQuery = (ast: unknown) => {
const tables: string[] = []
function traverse(node: unknown): void {
@@ -40,6 +34,67 @@ const getTablesInQuery = async (sql: string) => {
return [...new Set(tables)].sort((a, b) => a.localeCompare(b))
}
+// libpg-query nodes only expose the location of their own leading token (e.g. a BoolExpr's
+// location is its "AND"/"OR" operator, not the start of its left operand), and some nodes
+// (SortBy) use -1 as an "unset" sentinel. Recursing to the smallest non-negative location in
+// a subtree gives the true start of that subtree's text in the original SQL.
+const getMinLocation = (node: unknown): number | undefined => {
+ if (!node || typeof node !== 'object') return undefined
+ const obj = node as Record<string, unknown>
+ let min: number | undefined
+ const consider = (loc: unknown) => {
+ if (typeof loc === 'number' && loc >= 0 && (min === undefined || loc < min)) min = loc
+ }
+ consider(obj.location)
+ for (const value of Object.values(obj)) {
+ if (Array.isArray(value)) value.forEach((item) => consider(getMinLocation(item)))
+ else if (value && typeof value === 'object') consider(getMinLocation(value))
+ }
+ return min
+}
+
+// Clauses that can immediately follow WHERE in each statement type, paired with the keyword
+// that introduces them in the original SQL — used to find where the WHERE condition's text
+// ends, since libpg-query has no deparser to do this for us.
+const FOLLOWING_CLAUSES: Record<string, [field: string, keyword: RegExp][]> = {
+ SelectStmt: [
+ ['groupClause', /\bgroup\s+by\b/i],
+ ['havingClause', /\bhaving\b/i],
+ ['windowClause', /\bwindow\b/i],
+ ['sortClause', /\border\s+by\b/i],
+ ['limitOffset', /\boffset\b/i],
+ ['limitCount', /\blimit\b/i],
+ ['lockingClause', /\bfor\b/i],
+ ],
+ UpdateStmt: [['returningList', /\breturning\b/i]],
+ DeleteStmt: [['returningList', /\breturning\b/i]],
+}
+
+const getWhereClauseText = (sql: string, stmtType: string, stmt: Record<string, unknown>) => {
+ const start = getMinLocation(stmt.whereClause)
+ if (start === undefined) return null
+
+ const candidateEnds: number[] = []
+ for (const [field, keyword] of FOLLOWING_CLAUSES[stmtType] ?? []) {
+ const value = stmt[field]
+ const node = Array.isArray(value) ? value[0] : value
+ if (!node) continue
+
+ // Bound the keyword search to before the clause's own expression when we know where that
+ // starts; otherwise (e.g. lockingClause, which carries no location at all) search onward.
+ const exprStart = getMinLocation(node)
+ const window =
+ exprStart !== undefined && exprStart > start ? sql.slice(start, exprStart) : sql.slice(start)
+ const match = keyword.exec(window)
+ if (match) candidateEnds.push(start + match.index)
+ else if (exprStart !== undefined && exprStart > start) candidateEnds.push(exprStart)
+ }
+
+ const end =
+ candidateEnds.length > 0 ? Math.min(...candidateEnds) : sql.replace(/;\s*$/, '').length
+ return sql.slice(start, end).trim()
+}
+
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== 'POST') {
res.setHeader('Allow', ['POST'])
@@ -53,9 +108,19 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
return res.status(400).json({ error: 'Missing or invalid "sql" in request body' })
}
- const tables = await getTablesInQuery(sql)
- const operation = await getOperation(sql)
- return res.status(200).json({ tables, operation })
+ const ast = await parse(sql)
+ const statementCount = ast.stmts?.length ?? 0
+ const stmt = ast.stmts?.[0]?.stmt as Record<string, unknown> | undefined
+ const [stmtType, stmtNode] = stmt ? Object.entries(stmt)[0] : []
+
+ const tables = getTablesInQuery(ast)
+ const operation = stmt ? getOperation(stmt) : null
+ const whereClause =
+ stmtType && stmtNode
+ ? getWhereClauseText(sql, stmtType, stmtNode as Record<string, unknown>)
+ : null
+
+ return res.status(200).json({ tables, operation, whereClause, statementCount })
} catch (error) {
const message =
(error as { sqlDetails?: { message?: string } })?.sqlDetails?.message ??
diff --git a/apps/studio/pages/api/platform/projects/[ref]/config/postgrest.ts b/apps/studio/pages/api/platform/projects/[ref]/config/postgrest.ts
index 2e494abe7ea..b8514526b91 100644
--- a/apps/studio/pages/api/platform/projects/[ref]/config/postgrest.ts
+++ b/apps/studio/pages/api/platform/projects/[ref]/config/postgrest.ts
@@ -2,6 +2,7 @@ import { components } from 'api-types'
import { NextApiRequest, NextApiResponse } from 'next'
import apiWrapper from '@/lib/api/apiWrapper'
+import { DEFAULT_EXPOSED_SCHEMAS } from '@/lib/api/self-hosted/constants'
export default (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
@@ -21,7 +22,7 @@ const handleGet = async (_req: NextApiRequest, res: NextApiResponse) => {
const responseObj: components['schemas']['GetPostgrestConfigResponse'] = {
db_anon_role: 'anon',
db_extra_search_path: process.env.PGRST_DB_EXTRA_SEARCH_PATH ?? 'public',
- db_schema: process.env.PGRST_DB_SCHEMAS ?? 'public,storage,graphql_public',
+ db_schema: DEFAULT_EXPOSED_SCHEMAS,
jwt_secret:
process.env.AUTH_JWT_SECRET ?? 'super-secret-jwt-token-with-at-least-32-characters-long',
max_rows: Number(process.env.PGRST_DB_MAX_ROWS) || 1000,
diff --git a/apps/studio/pages/api/platform/projects/[ref]/content/count.ts b/apps/studio/pages/api/platform/projects/[ref]/content/count.ts
index 0edde385c5d..dc3c09f68a0 100644
--- a/apps/studio/pages/api/platform/projects/[ref]/content/count.ts
+++ b/apps/studio/pages/api/platform/projects/[ref]/content/count.ts
@@ -26,6 +26,7 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse) => {
try {
const { snippets } = await getSnippets({
searchTerm: params?.name,
+ includeContent: false,
})
if (params?.name) {
return res.status(200).json({
diff --git a/apps/studio/pages/api/platform/projects/[ref]/content/folders/[id].ts b/apps/studio/pages/api/platform/projects/[ref]/content/folders/[id].ts
index ed8564c1111..ac599cef62b 100644
--- a/apps/studio/pages/api/platform/projects/[ref]/content/folders/[id].ts
+++ b/apps/studio/pages/api/platform/projects/[ref]/content/folders/[id].ts
@@ -30,6 +30,8 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse<GetRespons
const folderId = (req.query.id as string) ?? null
const folders = await getFolders(folderId)
+ // Folder listings return metadata only (no SQL body) to match the Management API contract; the
+ // editor loads each snippet's content on demand via the item endpoint.
const { cursor, snippets } = await getSnippets({
searchTerm: params?.name,
cursor: params?.cursor,
@@ -37,6 +39,7 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse<GetRespons
limit: params?.limit ? Number(params.limit) : undefined,
sort: params?.sort_by,
sortOrder: params?.sort_order,
+ includeContent: false,
})
return res.status(200).json({ data: { folders: folders, contents: snippets }, cursor })
diff --git a/apps/studio/pages/api/platform/projects/[ref]/content/folders/index.ts b/apps/studio/pages/api/platform/projects/[ref]/content/folders/index.ts
index 1861df8c9f2..be8f426d3e0 100644
--- a/apps/studio/pages/api/platform/projects/[ref]/content/folders/index.ts
+++ b/apps/studio/pages/api/platform/projects/[ref]/content/folders/index.ts
@@ -31,12 +31,15 @@ const handleGetAll = async (req: NextApiRequest, res: NextApiResponse<GetRespons
const params = req.query as GetRequestData
const folders = await getFolders()
+ // Folder listings return metadata only (no SQL body) to match the Management API contract; the
+ // editor loads each snippet's content on demand via the item endpoint.
const { cursor, snippets } = await getSnippets({
searchTerm: params?.name,
limit: params?.limit ? Number(params.limit) : undefined,
cursor: params?.cursor,
sort: params?.sort_by,
sortOrder: params?.sort_order,
+ includeContent: false,
})
res.status(200).json({ data: { folders, contents: snippets }, cursor })
diff --git a/apps/studio/pages/api/platform/projects/[ref]/content/index.ts b/apps/studio/pages/api/platform/projects/[ref]/content/index.ts
index 53718b73d12..bf700e882f0 100644
--- a/apps/studio/pages/api/platform/projects/[ref]/content/index.ts
+++ b/apps/studio/pages/api/platform/projects/[ref]/content/index.ts
@@ -12,6 +12,17 @@ import {
updateSnippet,
} from '@/lib/api/snippets.utils'
+// Next.js defaults the API body parser to a 1mb limit, which rejects large SQL
+// snippets (e.g. multi-thousand-line RPCs) with a 413 before they can be saved.
+// Match the 5mb limit already used by the AI SQL endpoint.
+export const config = {
+ api: {
+ bodyParser: {
+ sizeLimit: '5mb',
+ },
+ },
+}
+
const wrappedHandler = (req: NextApiRequest, res: NextApiResponse) => apiWrapper(req, res, handler)
async function handler(req: NextApiRequest, res: NextApiResponse) {
diff --git a/apps/studio/pages/cli/login.tsx b/apps/studio/pages/cli/login.tsx
index 29132db3263..3ef79b48dd9 100644
--- a/apps/studio/pages/cli/login.tsx
+++ b/apps/studio/pages/cli/login.tsx
@@ -5,7 +5,8 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useEffectEvent, useRef, useState, type ReactNode } from 'react'
import { Button, Card, CardContent } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import {
InterstitialAccountRow,
diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index 02a69b9ee89..1b55a32e4b9 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -117,6 +117,14 @@ const CreateProject = () => {
const { data: organizationData } = useOrganizationsQuery()
const organization = organizationData?.find((x) => x.slug === slug)
+ const hasTrackedFormExposed = useRef(false)
+ useEffect(() => {
+ if (hasTrackedFormExposed.current) return
+ if (!slug) return
+ hasTrackedFormExposed.current = true
+ track('project_creation_form_exposed', { surface: 'vercel' }, { organization: slug })
+ }, [slug, track])
+
/**
* array of integrations installed
*/
diff --git a/apps/studio/pages/new/[slug].tsx b/apps/studio/pages/new/[slug].tsx
index 57ef2d799b3..f4d2b74a564 100644
--- a/apps/studio/pages/new/[slug].tsx
+++ b/apps/studio/pages/new/[slug].tsx
@@ -1,12 +1,12 @@
import { zodResolver } from '@hookform/resolvers/zod'
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { useFlag, useParams } from 'common'
+import { useFeatureFlags, useFlag, useParams } from 'common'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { PropsWithChildren, useEffect, useMemo, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { AWS_REGIONS, type CloudProvider } from 'shared-data'
+import { PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react'
+import { useForm, useFormState } from 'react-hook-form'
+import { type CloudProvider } from 'shared-data'
import { toast } from 'sonner'
import { Button, Form, useWatch } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
@@ -37,7 +37,7 @@ import {
GitHubRepositoryField,
useGitHubRepositoryOptions,
} from '@/components/interfaces/Settings/Integrations/GithubIntegration/GitHubRepositoryField'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { WizardLayoutWithoutAuth } from '@/components/layouts/WizardLayout'
import Panel from '@/components/ui/Panel'
import { useAvailableOrioleImageVersion } from '@/data/config/project-creation-postgres-versions-query'
@@ -71,13 +71,16 @@ import { usePHFlag } from '@/hooks/ui/useFlag'
import { DOCS_URL, PROJECT_STATUS, PROVIDERS, useDefaultProvider } from '@/lib/constants'
import { buildStudioPageTitle } from '@/lib/page-title'
import { useProfile } from '@/lib/profile'
+import { classifyApiError, classifyValidationError } from '@/lib/telemetry/funnel-errors'
import { useTrack } from '@/lib/telemetry/track'
+import { useTrackFunnelError } from '@/lib/telemetry/use-track-funnel-error'
import type { NextPageWithLayout } from '@/types'
const sizesWithNoCostConfirmationRequired: DesiredInstanceSize[] = ['micro', 'small']
const Wizard: NextPageWithLayout = () => {
const track = useTrack()
+ const trackFunnelError = useTrackFunnelError()
const router = useRouter()
const { slug, projectName } = useParams()
const { appTitle } = useCustomContent(['app:title'])
@@ -103,7 +106,7 @@ const Wizard: NextPageWithLayout = () => {
'integrations.github_connections'
)
- const smartRegionEnabled = useFlag('enableSmartRegion')
+ const { hasLoaded: flagsLoaded } = useFeatureFlags()
const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate')
const showInternalOnlyConfiguration = useFlag('newProjectInternalOnlyConfiguration')
@@ -166,6 +169,9 @@ const Wizard: NextPageWithLayout = () => {
projectName: watchedProjectName,
highAvailability,
} = useWatch({ control: form.control })
+ const { dirtyFields } = useFormState(form)
+ const isDbRegionDirty = dirtyFields.dbRegion
+ const smartRegionEnabled = cloudProvider !== 'AWS_NIMBUS'
// Read dirty state during render rather than depending on form.formState in the
// effect — form.formState is a Proxy that gets a new reference every render, which
@@ -175,18 +181,6 @@ const Wizard: NextPageWithLayout = () => {
form.formState
).isDirty
- useEffect(() => {
- if (dataApiRevokeOnCreateDefaultFlag === undefined) return
- if (isDataApiDefaultPrivilegesDirty) return
- setValue(
- 'dataApiDefaultPrivileges',
- !isInDataApiRevokeTreatment(dataApiRevokeOnCreateDefaultFlag),
- {
- shouldDirty: false,
- }
- )
- }, [dataApiRevokeOnCreateDefaultFlag, isDataApiDefaultPrivilegesDirty, setValue])
-
// [Charis] Since the form is updated in a useEffect, there is an edge case
// when switching from free to paid, where canChooseInstanceSize is true for
// an in-between render, but watchedInstanceSize is still undefined from the
@@ -227,12 +221,13 @@ const Wizard: NextPageWithLayout = () => {
? 0
: monthlyInstancePrice(instanceSize) - availableComputeCredits
- const { data: _defaultRegion, error: defaultRegionError } = useDefaultRegionQuery(
+ const selectedCloudProvider = cloudProvider as CloudProvider
+ const { data: autoDefaultRegion, error: defaultRegionError } = useDefaultRegionQuery(
{
- cloudProvider: PROVIDERS[defaultProvider].id,
+ cloudProvider: selectedCloudProvider,
},
{
- enabled: !smartRegionEnabled,
+ enabled: flagsLoaded && !smartRegionEnabled,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchInterval: false,
@@ -249,27 +244,26 @@ const Wizard: NextPageWithLayout = () => {
desiredInstanceSize: instanceSize as DesiredInstanceSize,
},
{
- enabled: smartRegionEnabled,
+ enabled: flagsLoaded && smartRegionEnabled,
refetchOnMount: false,
refetchOnWindowFocus: false,
refetchInterval: false,
refetchOnReconnect: false,
}
)
+
const recommendedSmartRegion = smartRegionEnabled
? availableRegionsData?.recommendations.smartGroup.name
: ''
+ const fixedDefaultRegion = PROVIDERS[selectedCloudProvider].default_region.displayName
const regionError =
smartRegionEnabled && defaultProvider !== 'AWS_NIMBUS'
? availableRegionsError
: defaultRegionError
- const defaultRegion =
- defaultProvider === 'AWS_NIMBUS'
- ? AWS_REGIONS.EAST_US.displayName
- : smartRegionEnabled
- ? availableRegionsData?.recommendations.smartGroup.name
- : _defaultRegion
+ const defaultRegion = smartRegionEnabled
+ ? availableRegionsData?.recommendations.smartGroup.name
+ : (autoDefaultRegion ?? fixedDefaultRegion)
const canCreateProject = isAdmin && !freePlanWithExceedingLimits && !hasOutstandingInvoices
const canConfigureGitHubOnCreate =
@@ -327,6 +321,10 @@ const Wizard: NextPageWithLayout = () => {
)
router.push(`/project/${res.ref}`)
},
+ onError: (error) => {
+ toast.error(`Failed to create new project: ${error.message}`)
+ trackFunnelError('project_creation', classifyApiError('project_creation', error), 'toast')
+ },
})
const onSubmitWithComputeCostsConfirmation = async (values: z.infer<typeof FormSchema>) => {
@@ -366,6 +364,11 @@ const Wizard: NextPageWithLayout = () => {
} = values
if (useOrioleDb && !availableOrioleVersion) {
+ trackFunnelError(
+ 'project_creation',
+ { errorCategory: 'validation', errorReason: 'oriole_unavailable' },
+ 'toast'
+ )
return toast.error('No available OrioleDB image found, only Postgres is available')
}
@@ -426,6 +429,14 @@ const Wizard: NextPageWithLayout = () => {
createProject(data)
}
+ const hasTrackedFormExposed = useRef(false)
+ useEffect(() => {
+ if (hasTrackedFormExposed.current) return
+ if (!isOrganizationsSuccess || !canCreateProject || !currentOrg) return
+ hasTrackedFormExposed.current = true
+ track('project_creation_form_exposed', { surface: 'main' })
+ }, [isOrganizationsSuccess, canCreateProject, currentOrg, track])
+
useEffect(() => {
// Only set once to ensure compute credits dont change while project is being created
if (allOrgProjects && allOrgProjects.length > 0 && !allProjects) {
@@ -447,27 +458,24 @@ const Wizard: NextPageWithLayout = () => {
if (projectName) setValue('projectName', projectName || '')
}, [slug, setValue, projectName])
- const isDbRegionDirty = getFieldState('dbRegion', form.formState).isDirty
useEffect(() => {
if (!isDbRegionDirty && defaultRegion) {
setValue('dbRegion', defaultRegion)
}
}, [defaultRegion, isDbRegionDirty, setValue])
- useEffect(() => {
- if (regionError) {
- resetField('dbRegion', {
- defaultValue: PROVIDERS[defaultProvider].default_region.displayName,
- })
- }
- }, [regionError, resetField, defaultProvider])
-
useEffect(() => {
if (!isDbRegionDirty && recommendedSmartRegion) {
setValue('dbRegion', recommendedSmartRegion)
}
}, [recommendedSmartRegion, isDbRegionDirty, setValue])
+ useEffect(() => {
+ if (regionError && fixedDefaultRegion) {
+ resetField('dbRegion', { defaultValue: fixedDefaultRegion })
+ }
+ }, [regionError, resetField, fixedDefaultRegion])
+
useEffect(() => {
if (highAvailability && cloudProvider !== 'AWS_K8S') {
setValue('cloudProvider', 'AWS_K8S')
@@ -494,6 +502,18 @@ const Wizard: NextPageWithLayout = () => {
})
}, [githubRepositoryName, watchedProjectName, setValue])
+ useEffect(() => {
+ if (dataApiRevokeOnCreateDefaultFlag === undefined) return
+ if (isDataApiDefaultPrivilegesDirty) return
+ setValue(
+ 'dataApiDefaultPrivileges',
+ !isInDataApiRevokeTreatment(dataApiRevokeOnCreateDefaultFlag),
+ {
+ shouldDirty: false,
+ }
+ )
+ }, [dataApiRevokeOnCreateDefaultFlag, isDataApiDefaultPrivilegesDirty, setValue])
+
return (
<>
{/* Wizard layouts set the visual header but not the browser tab title. */}
@@ -502,7 +522,15 @@ const Wizard: NextPageWithLayout = () => {
<meta name="description" content="Supabase Studio" />
</Head>
<Form {...form}>
- <form onSubmit={form.handleSubmit(onSubmitWithComputeCostsConfirmation)}>
+ <form
+ onSubmit={form.handleSubmit(onSubmitWithComputeCostsConfirmation, (errors) =>
+ trackFunnelError(
+ 'project_creation',
+ classifyValidationError('project_creation', errors),
+ 'form'
+ )
+ )}
+ >
<Panel
loading={!isOrganizationsSuccess}
title={
diff --git a/apps/studio/pages/org/[slug]/documents.tsx b/apps/studio/pages/org/[slug]/documents.tsx
index 7cee99b18c6..fa4325b4d61 100644
--- a/apps/studio/pages/org/[slug]/documents.tsx
+++ b/apps/studio/pages/org/[slug]/documents.tsx
@@ -5,7 +5,7 @@ import {
PageHeaderMeta,
PageHeaderSummary,
PageHeaderTitle,
-} from 'ui-patterns'
+} from 'ui-patterns/PageHeader'
import { Documents } from '@/components/interfaces/Organization/Documents/Documents'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/general.tsx
index a5170df5af1..4eec2e6ab4f 100644
--- a/apps/studio/pages/org/[slug]/general.tsx
+++ b/apps/studio/pages/org/[slug]/general.tsx
@@ -9,7 +9,7 @@ import {
} from 'ui-patterns/PageHeader'
import { GeneralSettings } from '@/components/interfaces/Organization/GeneralSettings/GeneralSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout'
import { usePermissionsQuery } from '@/data/permissions/permissions-query'
diff --git a/apps/studio/pages/org/[slug]/index.tsx b/apps/studio/pages/org/[slug]/index.tsx
index 57bb03caaa7..409d7327658 100644
--- a/apps/studio/pages/org/[slug]/index.tsx
+++ b/apps/studio/pages/org/[slug]/index.tsx
@@ -1,12 +1,12 @@
import { useIsMFAEnabled } from 'common'
import Link from 'next/link'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ProjectList } from '@/components/interfaces/Home/ProjectList/ProjectList'
import { HomePageActions } from '@/components/interfaces/HomePageActions'
import { PlanUsageCard } from '@/components/interfaces/ProjectHome/PlanUsageCard'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
diff --git a/apps/studio/pages/org/[slug]/integrations.tsx b/apps/studio/pages/org/[slug]/integrations.tsx
index 0aa36a51f55..9fdce80d0b3 100644
--- a/apps/studio/pages/org/[slug]/integrations.tsx
+++ b/apps/studio/pages/org/[slug]/integrations.tsx
@@ -8,7 +8,7 @@ import {
} from 'ui-patterns/PageHeader'
import { IntegrationSettings } from '@/components/interfaces/Organization/IntegrationSettings/IntegrationSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/org/[slug]/security.tsx b/apps/studio/pages/org/[slug]/security.tsx
index aa6f36dc5e3..261e98b69d9 100644
--- a/apps/studio/pages/org/[slug]/security.tsx
+++ b/apps/studio/pages/org/[slug]/security.tsx
@@ -8,7 +8,7 @@ import {
} from 'ui-patterns/PageHeader'
import { SecuritySettings } from '@/components/interfaces/Organization/SecuritySettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
diff --git a/apps/studio/pages/org/[slug]/team.tsx b/apps/studio/pages/org/[slug]/team.tsx
index 7b4372fb74b..0ddb6d7b49b 100644
--- a/apps/studio/pages/org/[slug]/team.tsx
+++ b/apps/studio/pages/org/[slug]/team.tsx
@@ -1,7 +1,7 @@
import { LogoLoader } from 'ui'
import { TeamSettings } from '@/components/interfaces/Organization/TeamSettings/TeamSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import { usePermissionsQuery } from '@/data/permissions/permissions-query'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
diff --git a/apps/studio/pages/org/[slug]/usage.tsx b/apps/studio/pages/org/[slug]/usage.tsx
index 1276d6cb7c3..44698cb23ff 100644
--- a/apps/studio/pages/org/[slug]/usage.tsx
+++ b/apps/studio/pages/org/[slug]/usage.tsx
@@ -1,5 +1,5 @@
import { Usage } from '@/components/interfaces/Organization/Usage/Usage'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import OrganizationLayout from '@/components/layouts/OrganizationLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/org/_/[[...routeSlug]].tsx b/apps/studio/pages/org/_/[[...routeSlug]].tsx
index b910436b218..f40cf881fbd 100644
--- a/apps/studio/pages/org/_/[[...routeSlug]].tsx
+++ b/apps/studio/pages/org/_/[[...routeSlug]].tsx
@@ -3,6 +3,7 @@ import Head from 'next/head'
import { useRouter } from 'next/router'
import { cn } from 'ui'
+import { parseCatchAllRoute } from '@/compat/next/router'
import {
Header,
LoadingCardView,
@@ -20,7 +21,10 @@ import { buildStudioPageTitle } from '@/lib/page-title'
const GenericOrganizationPage: NextPage = () => {
const router = useRouter()
const { appTitle } = useCustomContent(['app:title'])
- const { routeSlug, ...queryParams } = router.query
+ // Normalise the catch-all path across Next (`routeSlug: string[]`) and
+ // TanStack (`_splat: string`) so downstream URL building (buildOrgUrl)
+ // keeps working — see parseCatchAllRoute.
+ const { segments: routeSlug, queryParams } = parseCatchAllRoute(router.query, 'routeSlug')
const queryString =
Object.keys(queryParams).length > 0
? new URLSearchParams(queryParams as Record<string, string>).toString()
diff --git a/apps/studio/pages/organizations.tsx b/apps/studio/pages/organizations.tsx
index 98fb524116e..8ea61cabe20 100644
--- a/apps/studio/pages/organizations.tsx
+++ b/apps/studio/pages/organizations.tsx
@@ -1,11 +1,9 @@
-import { useParams } from 'common'
import { Plus, Search } from 'lucide-react'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { Button, Skeleton } from 'ui'
-import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { NoOrganizationsState } from '@/components/interfaces/Home/ProjectList/EmptyStates'
@@ -27,8 +25,6 @@ const OrganizationsPage: NextPageWithLayout = () => {
const router = useRouter()
const { appTitle } = useCustomContent(['app:title'])
const [search, setSearch] = useState('')
- const { error: orgNotFoundError, org: orgSlug } = useParams()
- const orgNotFound = orgNotFoundError === 'org_not_found'
const pageTitle = buildStudioPageTitle({
section: 'Organizations',
brand: appTitle || 'Supabase',
@@ -52,8 +48,7 @@ const OrganizationsPage: NextPageWithLayout = () => {
useEffect(() => {
// If there are no organizations, force the user to create one
- // unless the user is on the not found page
- if (isSuccess && organizations.length <= 0 && !orgNotFound) {
+ if (isSuccess && organizations.length <= 0) {
router.push('/new')
}
}, [isSuccess, organizations])
@@ -66,20 +61,6 @@ const OrganizationsPage: NextPageWithLayout = () => {
</Head>
<ScaffoldContainer>
<ScaffoldSection isFullWidth className="flex flex-col gap-y-4">
- {orgNotFound && (
- <Admonition
- type="destructive"
- title="Organization not found"
- description={
- <>
- The organization <code className="text-code-inline">{orgSlug}</code> does not
- exist or you do not have permission to access to it. Contact the the owner if you
- believe this is a mistake.
- </>
- }
- />
- )}
-
{organizations.length > 0 && (
<div className="flex items-center justify-between gap-x-2 md:gap-x-3">
<Input
diff --git a/apps/studio/pages/partners/stripe/projects/login.tsx b/apps/studio/pages/partners/stripe/projects/login.tsx
index b47974f4e79..bb1afc2a829 100644
--- a/apps/studio/pages/partners/stripe/projects/login.tsx
+++ b/apps/studio/pages/partners/stripe/projects/login.tsx
@@ -5,7 +5,8 @@ import Head from 'next/head'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { Button } from 'ui'
-import { Admonition, ShimmeringLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import {
InterstitialAccountRow,
diff --git a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx
index 5c953f5384d..723c8047e81 100644
--- a/apps/studio/pages/project/[ref]/auth/audit-logs.tsx
+++ b/apps/studio/pages/project/[ref]/auth/audit-logs.tsx
@@ -13,9 +13,9 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { AuditLogsForm } from '@/components/interfaces/Auth/AuditLogsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/hooks.tsx b/apps/studio/pages/project/[ref]/auth/hooks.tsx
index e86b3668d63..c941e734e0d 100644
--- a/apps/studio/pages/project/[ref]/auth/hooks.tsx
+++ b/apps/studio/pages/project/[ref]/auth/hooks.tsx
@@ -1,5 +1,4 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
@@ -10,12 +9,13 @@ import {
PageHeaderTitle,
} from 'ui-patterns/PageHeader'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { HooksListing } from '@/components/interfaces/Auth/Hooks/HooksListing'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/mfa.tsx b/apps/studio/pages/project/[ref]/auth/mfa.tsx
index 93e6ca14057..4cd007eaf79 100644
--- a/apps/studio/pages/project/[ref]/auth/mfa.tsx
+++ b/apps/studio/pages/project/[ref]/auth/mfa.tsx
@@ -13,8 +13,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { MfaAuthSettingsForm } from '@/components/interfaces/Auth/MfaAuthSettingsForm/MfaAuthSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx b/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx
index 30bd8430415..9b44e7ae864 100644
--- a/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx
+++ b/apps/studio/pages/project/[ref]/auth/oauth-apps.tsx
@@ -1,4 +1,3 @@
-import { PageSection, PageSectionContent } from 'ui-patterns'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
@@ -7,10 +6,11 @@ import {
PageHeaderSummary,
PageHeaderTitle,
} from 'ui-patterns/PageHeader'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { OAuthAppsList } from '@/components/interfaces/Auth/OAuthApps/OAuthAppsList'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/oauth-server.tsx b/apps/studio/pages/project/[ref]/auth/oauth-server.tsx
index 73f7c6ed452..ad3350c2567 100644
--- a/apps/studio/pages/project/[ref]/auth/oauth-server.tsx
+++ b/apps/studio/pages/project/[ref]/auth/oauth-server.tsx
@@ -10,7 +10,7 @@ import {
import { OAuthServerSettingsForm } from '@/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/overview.tsx b/apps/studio/pages/project/[ref]/auth/overview.tsx
index 3216c32d1e6..c1471399345 100644
--- a/apps/studio/pages/project/[ref]/auth/overview.tsx
+++ b/apps/studio/pages/project/[ref]/auth/overview.tsx
@@ -13,7 +13,7 @@ import {
import { OverviewLearnMore } from '@/components/interfaces/Auth/Overview/OverviewLearnMore'
import { OverviewMetrics } from '@/components/interfaces/Auth/Overview/OverviewMetrics'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { useAuthOverviewQuery } from '@/data/auth/auth-overview-query'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/pages/project/[ref]/auth/passkeys.tsx b/apps/studio/pages/project/[ref]/auth/passkeys.tsx
index 4d1ae271667..6a03b867e0f 100644
--- a/apps/studio/pages/project/[ref]/auth/passkeys.tsx
+++ b/apps/studio/pages/project/[ref]/auth/passkeys.tsx
@@ -12,7 +12,7 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { PasskeysSettingsForm } from '@/components/interfaces/Auth/Passkeys/PasskeysSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import type { NextPageWithLayout } from '@/types'
const PasskeysPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/auth/performance.tsx b/apps/studio/pages/project/[ref]/auth/performance.tsx
index 01d69fb7f81..ffd935d7c03 100644
--- a/apps/studio/pages/project/[ref]/auth/performance.tsx
+++ b/apps/studio/pages/project/[ref]/auth/performance.tsx
@@ -13,8 +13,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { PerformanceSettingsForm } from '@/components/interfaces/Auth/PerformanceSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/auth/protection.tsx b/apps/studio/pages/project/[ref]/auth/protection.tsx
index fc0924248e1..02cdfd2ce47 100644
--- a/apps/studio/pages/project/[ref]/auth/protection.tsx
+++ b/apps/studio/pages/project/[ref]/auth/protection.tsx
@@ -13,8 +13,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { ProtectionAuthSettingsForm } from '@/components/interfaces/Auth/ProtectionAuthSettingsForm/ProtectionAuthSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/auth/providers.tsx b/apps/studio/pages/project/[ref]/auth/providers.tsx
index d0dcea5bbd6..70d51d19b4d 100644
--- a/apps/studio/pages/project/[ref]/auth/providers.tsx
+++ b/apps/studio/pages/project/[ref]/auth/providers.tsx
@@ -1,24 +1,22 @@
-import { useFlag } from 'common'
import { PageContainer } from 'ui-patterns/PageContainer'
import { AuthProvidersForm } from '@/components/interfaces/Auth/AuthProvidersForm'
import { BasicAuthSettingsForm } from '@/components/interfaces/Auth/BasicAuthSettingsForm'
import { CustomAuthProviders } from '@/components/interfaces/Auth/CustomAuthProviders'
import { AuthProvidersLayout } from '@/components/layouts/AuthLayout/AuthProvidersLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import type { NextPageWithLayout } from '@/types'
const ProvidersPage: NextPageWithLayout = () => {
const showProviders = useIsFeatureEnabled('authentication:show_providers')
const showCustomProviders = useIsFeatureEnabled('authentication:show_custom_providers')
- const isOauthProvidersEnabled = useFlag('CustomOauthProviders')
return (
<PageContainer size="default">
<BasicAuthSettingsForm />
{showProviders && <AuthProvidersForm />}
- {showCustomProviders && isOauthProvidersEnabled && <CustomAuthProviders />}
+ {showCustomProviders && <CustomAuthProviders />}
</PageContainer>
)
}
diff --git a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
index dcdac29b599..f09a72daccb 100644
--- a/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
+++ b/apps/studio/pages/project/[ref]/auth/rate-limits.tsx
@@ -14,9 +14,9 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { RateLimits } from '@/components/interfaces/Auth/RateLimits/RateLimits'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/auth/sessions.tsx b/apps/studio/pages/project/[ref]/auth/sessions.tsx
index 9b4f96b3e65..1ef04b4557f 100644
--- a/apps/studio/pages/project/[ref]/auth/sessions.tsx
+++ b/apps/studio/pages/project/[ref]/auth/sessions.tsx
@@ -12,8 +12,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { SessionsAuthSettingsForm } from '@/components/interfaces/Auth/SessionsAuthSettingsForm/SessionsAuthSettingsForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/smtp.tsx b/apps/studio/pages/project/[ref]/auth/smtp.tsx
index 1c512bebeb7..e6856e5a38e 100644
--- a/apps/studio/pages/project/[ref]/auth/smtp.tsx
+++ b/apps/studio/pages/project/[ref]/auth/smtp.tsx
@@ -1,12 +1,12 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { SmtpForm } from '@/components/interfaces/Auth/SmtpForm/SmtpForm'
import { AuthEmailsLayout } from '@/components/layouts/AuthLayout/AuthEmailsLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
index 01346476643..93a4c95abb0 100644
--- a/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates/[templateId].tsx
@@ -21,7 +21,7 @@ import {
FormField,
Switch,
} from 'ui'
-import { Admonition, GenericSkeletonLoader } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
@@ -40,21 +40,22 @@ import {
PageSectionSummary,
PageSectionTitle,
} from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import * as z from 'zod'
import { TEMPLATES_SCHEMAS } from '@/components/interfaces/Auth/EmailTemplates/AuthTemplatesValidation'
import { CustomEmailTemplateRestrictionAdmonition } from '@/components/interfaces/Auth/EmailTemplates/CustomEmailTemplateRestrictionAdmonition'
-import { EMAIL_TEMPLATE_DOCS_ANCHORS } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants'
+import { AUTH_EMAIL_TEMPLATES_DOCS_PATH } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.constants'
import {
isCustomEmailTemplateEditingRestricted,
isCustomEmailTemplateRestrictionStatusKnown,
slugifyTitle,
} from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates.utils'
+import { SendEmailHookActiveAdmonition } from '@/components/interfaces/Auth/EmailTemplates/SendEmailHookActiveAdmonition'
import { TemplateEditor } from '@/components/interfaces/Auth/EmailTemplates/TemplateEditor'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import { InlineLink } from '@/components/ui/InlineLink'
import { NoPermission } from '@/components/ui/NoPermission'
import { useAuthConfigQuery } from '@/data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from '@/data/auth/auth-config-update-mutation'
@@ -99,6 +100,9 @@ const RedirectToTemplates = () => {
projectInsertedAt: selectedProject?.inserted_at,
})
const isTemplateEditorReadOnly = !isTemplateRestrictionStatusKnown || isTemplateEditBlocked
+ const hasSendEmailHook = !!(
+ authConfig?.HOOK_SEND_EMAIL_ENABLED && authConfig?.HOOK_SEND_EMAIL_URI
+ )
const { mutate: updateAuthConfig, isPending: isUpdatingConfig } = useAuthConfigUpdateMutation({
onError: (error) => {
@@ -208,13 +212,8 @@ const RedirectToTemplates = () => {
{template.purpose || 'Configure and customize email templates.'}
</PageHeaderDescription>
</PageHeaderSummary>
- <PageHeaderAside className="flex items-center gap-3">
- <InlineLink href={`${DOCS_URL}/guides/auth/auth-email-templates#terminology`}>
- Terminology
- </InlineLink>
- <DocsButton
- href={`${DOCS_URL}/guides/local-development/customizing-email-templates#${EMAIL_TEMPLATE_DOCS_ANCHORS[template.id]}`}
- />
+ <PageHeaderAside>
+ <DocsButton href={`${DOCS_URL}${AUTH_EMAIL_TEMPLATES_DOCS_PATH}`} />
</PageHeaderAside>
</PageHeaderMeta>
</PageHeader>
@@ -286,7 +285,7 @@ const RedirectToTemplates = () => {
)}
<PageSection>
- {showConfigurationSection && (
+ {(showConfigurationSection || isTemplateEditBlocked) && (
<PageSectionMeta>
<PageSectionSummary>
<PageSectionTitle>Content</PageSectionTitle>
@@ -294,11 +293,16 @@ const RedirectToTemplates = () => {
</PageSectionMeta>
)}
<PageSectionContent>
- {isTemplateEditBlocked && (
+ {isTemplateEditBlocked && !hasSendEmailHook && (
<div className="mb-4">
<CustomEmailTemplateRestrictionAdmonition />
</div>
)}
+ {hasSendEmailHook && (
+ <div className="mb-4">
+ <SendEmailHookActiveAdmonition />
+ </div>
+ )}
<Card>
<TemplateEditor template={template} isReadOnly={isTemplateEditorReadOnly} />
</Card>
diff --git a/apps/studio/pages/project/[ref]/auth/templates/index.tsx b/apps/studio/pages/project/[ref]/auth/templates/index.tsx
index 5bb1b874d1f..f02769b959f 100644
--- a/apps/studio/pages/project/[ref]/auth/templates/index.tsx
+++ b/apps/studio/pages/project/[ref]/auth/templates/index.tsx
@@ -1,12 +1,12 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { GenericSkeletonLoader } from 'ui-patterns'
import { PageContainer } from 'ui-patterns/PageContainer'
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { EmailTemplates } from '@/components/interfaces/Auth/EmailTemplates/EmailTemplates'
import { AuthEmailsLayout } from '@/components/layouts/AuthLayout/AuthEmailsLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/third-party.tsx b/apps/studio/pages/project/[ref]/auth/third-party.tsx
index 216f852dba0..188bdd3abd4 100644
--- a/apps/studio/pages/project/[ref]/auth/third-party.tsx
+++ b/apps/studio/pages/project/[ref]/auth/third-party.tsx
@@ -5,8 +5,8 @@ import { PageContainer } from 'ui-patterns/PageContainer'
import { ThirdPartyAuthForm } from '@/components/interfaces/Auth/ThirdPartyAuthForm'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
import { AuthProvidersLayout } from '@/components/layouts/AuthLayout/AuthProvidersLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
index 414ea18c80b..81f42779c0c 100644
--- a/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
+++ b/apps/studio/pages/project/[ref]/auth/url-configuration.tsx
@@ -13,8 +13,8 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { RedirectUrls } from '@/components/interfaces/Auth/RedirectUrls/RedirectUrls'
import SiteUrl from '@/components/interfaces/Auth/SiteUrl/SiteUrl'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/users.tsx b/apps/studio/pages/project/[ref]/auth/users.tsx
index 8f40389363e..be7691ad503 100644
--- a/apps/studio/pages/project/[ref]/auth/users.tsx
+++ b/apps/studio/pages/project/[ref]/auth/users.tsx
@@ -1,6 +1,6 @@
import { UsersV2 } from '@/components/interfaces/Auth/Users/UsersV2'
import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import type { NextPageWithLayout } from '@/types'
const UsersPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/branches/index.tsx b/apps/studio/pages/project/[ref]/branches/index.tsx
index ac37bdaede7..102a0783c76 100644
--- a/apps/studio/pages/project/[ref]/branches/index.tsx
+++ b/apps/studio/pages/project/[ref]/branches/index.tsx
@@ -3,7 +3,7 @@ import { useParams } from 'common'
import { partition } from 'lodash'
import { MessageCircle } from 'lucide-react'
import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useState, type PropsWithChildren } from 'react'
import { toast } from 'sonner'
import { Button } from 'ui'
@@ -189,73 +189,74 @@ const BranchesPage: NextPageWithLayout = () => {
)
}
-BranchesPage.getLayout = (page) => {
- const BranchesPageWrapper = () => {
- const snap = useAppStateSnapshot()
- const { can: canCreateBranches } = useAsyncCheckPermissions(
- PermissionAction.CREATE,
- 'preview_branches',
- {
- resource: { is_default: false },
- }
- )
+// Hoisted out of `getLayout` so the TanStack route can import it
+// directly. Same shape and identical body as before — accepts the page
+// content as `children` instead of capturing it from a closure.
+export const BranchesPageWrapper = ({ children }: PropsWithChildren) => {
+ const snap = useAppStateSnapshot()
+ const { can: canCreateBranches } = useAsyncCheckPermissions(
+ PermissionAction.CREATE,
+ 'preview_branches',
+ {
+ resource: { is_default: false },
+ }
+ )
- const primaryActions = (
- <ButtonTooltip
- variant="primary"
- disabled={!canCreateBranches}
- onClick={() => snap.setShowCreateBranchModal(true)}
- tooltip={{
- content: {
- side: 'bottom',
- text: !canCreateBranches
- ? 'You need additional permissions to create branches'
- : undefined,
- },
- }}
+ const primaryActions = (
+ <ButtonTooltip
+ variant="primary"
+ disabled={!canCreateBranches}
+ onClick={() => snap.setShowCreateBranchModal(true)}
+ tooltip={{
+ content: {
+ side: 'bottom',
+ text: !canCreateBranches
+ ? 'You need additional permissions to create branches'
+ : undefined,
+ },
+ }}
+ >
+ Create branch
+ </ButtonTooltip>
+ )
+
+ const secondaryActions = (
+ <div className="flex items-center gap-x-2">
+ <Button
+ asChild
+ variant="text"
+ icon={<MessageCircle className="text-muted" strokeWidth={1} />}
>
- Create branch
- </ButtonTooltip>
- )
-
- const secondaryActions = (
- <div className="flex items-center gap-x-2">
- <Button
- asChild
- variant="text"
- icon={<MessageCircle className="text-muted" strokeWidth={1} />}
+ <a
+ target="_blank"
+ rel="noreferrer"
+ href="https://github.com/orgs/supabase/discussions/18937"
>
- <a
- target="_blank"
- rel="noreferrer"
- href="https://github.com/orgs/supabase/discussions/18937"
- >
- Branching feedback
- </a>
- </Button>
- <DocsButton href={`${DOCS_URL}/guides/platform/branching`} />
- </div>
- )
-
- return (
- <PageLayout
- title="Branches"
- subtitle="Manage your database preview branches and deployments"
- primaryActions={primaryActions}
- secondaryActions={secondaryActions}
- >
- {page}
- </PageLayout>
- )
- }
+ Branching feedback
+ </a>
+ </Button>
+ <DocsButton href={`${DOCS_URL}/guides/platform/branching`} />
+ </div>
+ )
return (
- <DefaultLayout>
- <BranchLayout>
- <BranchesPageWrapper />
- </BranchLayout>
- </DefaultLayout>
+ <PageLayout
+ title="Branches"
+ subtitle="Manage your database preview branches and deployments"
+ primaryActions={primaryActions}
+ secondaryActions={secondaryActions}
+ >
+ {children}
+ </PageLayout>
)
}
+BranchesPage.getLayout = (page) => (
+ <DefaultLayout>
+ <BranchLayout>
+ <BranchesPageWrapper>{page}</BranchesPageWrapper>
+ </BranchLayout>
+ </DefaultLayout>
+)
+
export default BranchesPage
diff --git a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
index 3f3d163aea7..10aeeec6669 100644
--- a/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
+++ b/apps/studio/pages/project/[ref]/branches/merge-requests.tsx
@@ -22,12 +22,12 @@ import {
import { BranchSelector } from '@/components/interfaces/BranchManagement/BranchSelector'
import { PullRequestsEmptyState } from '@/components/interfaces/BranchManagement/EmptyStates'
import BranchLayout from '@/components/layouts/BranchLayout/BranchLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useBranchUpdateMutation } from '@/data/branches/branch-update-mutation'
import { Branch, useBranchesQuery } from '@/data/branches/branches-query'
import { useGitHubConnectionsQuery } from '@/data/integrations/github-connections-query'
@@ -300,7 +300,7 @@ const MergeRequestsPage: NextPageWithLayout = () => {
)
}
-const MergeRequestsPageWrapper = ({ children }: PropsWithChildren<{}>) => {
+export const MergeRequestsPageWrapper = ({ children }: PropsWithChildren<{}>) => {
const router = useRouter()
const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
diff --git a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
index f65f79a470b..1c7d72cbf30 100644
--- a/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/pitr.tsx
@@ -1,8 +1,8 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
-import { AlertCircle } from 'lucide-react'
+import { AlertCircle, DatabaseBackup } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
@@ -18,14 +18,16 @@ import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/Databas
import { PITRNotice } from '@/components/interfaces/Database/Backups/PITR/PITRNotice'
import { PITRSelection } from '@/components/interfaces/Database/Backups/PITR/PITRSelection'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import AlertError from '@/components/ui/AlertError'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { HighAvailabilityDisabledEmptyState } from '@/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState'
+import { NoPermission } from '@/components/ui/NoPermission'
import { UpgradeToPro } from '@/components/ui/UpgradeToPro'
import { useBackupsQuery } from '@/data/database/backups-query'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useIsOrioleDbInAws, useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { DOCS_URL, PROJECT_STATUS } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
@@ -64,7 +66,8 @@ DatabasePhysicalBackups.getLayout = (page) => (
const PITR = () => {
const { ref: projectRef } = useParams()
- const { data: project } = useSelectedProjectQuery()
+ const { data: project, isPending: isProjectPending } = useSelectedProjectQuery()
+ const { isHighAvailability } = useHighAvailability()
const { hasAccess: hasAccessToPitr, isLoading: isLoadingEntitlements } =
useCheckEntitlements('pitr.available_variants')
const isOrioleDbInAws = useIsOrioleDbInAws()
@@ -76,7 +79,7 @@ const PITR = () => {
isSuccess,
} = useBackupsQuery({ projectRef })
- const isLoading = isLoadingBackups || isLoadingEntitlements
+ const isLoading = isLoadingBackups || isLoadingEntitlements || isProjectPending
const isEnabled = backups?.pitr_enabled
const isActiveHealthy = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
@@ -101,21 +104,23 @@ const PITR = () => {
)
}
- if (project?.high_availability) {
+ if (isLoading) {
+ return <GenericSkeletonLoader />
+ }
+
+ if (isHighAvailability) {
return (
- <Admonition
- type="default"
- title="Database backups are not available for High Availability projects"
- description="High Availability projects do not support Point-in-Time Recovery (PITR) backups"
- >
- <DocsButton abbrev={false} className="mt-2" href={DOCS_URL} />
- </Admonition>
+ <HighAvailabilityDisabledEmptyState
+ icon={DatabaseBackup}
+ title="Point-in-Time Recovery unavailable on High Availability projects"
+ description="We're working to bring point-in-time recovery to High Availability projects. Contact support if this is blocking your work."
+ className="max-w-none mx-0"
+ />
)
}
return (
<>
- {isLoading && <GenericSkeletonLoader />}
{isError && <AlertError error={error} subject="Failed to retrieve PITR backups" />}
{isSuccess && (
<>
@@ -124,7 +129,11 @@ const PITR = () => {
addon={hasAccessToPitr ? 'pitr' : undefined}
source="pitr"
featureProposition="enable Point-in-Time Recovery"
- primaryText="Point in Time Recovery is a Pro Plan add-on"
+ primaryText={
+ hasAccessToPitr
+ ? 'Point in Time Recovery is available as an add-on'
+ : 'Point in Time Recovery is a Pro Plan add-on'
+ }
secondaryText={
!hasAccessToPitr
? 'Roll back your database to a specific second. Starts at $100/month. Pro Plan already includes daily backups at no extra cost.'
diff --git a/apps/studio/pages/project/[ref]/database/backups/restore-to-new-project.tsx b/apps/studio/pages/project/[ref]/database/backups/restore-to-new-project.tsx
index ed6bfbf717b..8745655e4ec 100644
--- a/apps/studio/pages/project/[ref]/database/backups/restore-to-new-project.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/restore-to-new-project.tsx
@@ -12,7 +12,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/DatabaseBackupsNav'
import { RestoreToNewProject } from '@/components/interfaces/Database/RestoreToNewProject/RestoreToNewProject'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
index e04b620bdc1..dd77bf41bda 100644
--- a/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
+++ b/apps/studio/pages/project/[ref]/database/backups/scheduled.tsx
@@ -1,7 +1,7 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import { Info } from 'lucide-react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
@@ -16,11 +16,11 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { BackupsList } from '@/components/interfaces/Database/Backups/BackupsList'
import DatabaseBackupsNav from '@/components/interfaces/Database/Backups/DatabaseBackupsNav'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
-import AlertError from '@/components/ui/AlertError'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import InformationBox from '@/components/ui/InformationBox'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useBackupsQuery } from '@/data/database/backups-query'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useIsOrioleDbInAws } from '@/hooks/misc/useSelectedProject'
diff --git a/apps/studio/pages/project/[ref]/database/column-privileges.tsx b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
index d882afb19e1..841c79d275a 100644
--- a/apps/studio/pages/project/[ref]/database/column-privileges.tsx
+++ b/apps/studio/pages/project/[ref]/database/column-privileges.tsx
@@ -20,9 +20,9 @@ import PrivilegesHead from '@/components/interfaces/Database/Privileges/Privileg
import PrivilegesTable from '@/components/interfaces/Database/Privileges/PrivilegesTable'
import { ProtectedSchemaWarning } from '@/components/interfaces/Database/ProtectedSchemaWarning'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { FeaturePreviewBadge } from '@/components/ui/FeaturePreviewBadge'
import { PgRole, useDatabaseRolesQuery } from '@/data/database-roles/database-roles-query'
diff --git a/apps/studio/pages/project/[ref]/database/extensions.tsx b/apps/studio/pages/project/[ref]/database/extensions.tsx
index 5c56361d6cf..0d20aa7facc 100644
--- a/apps/studio/pages/project/[ref]/database/extensions.tsx
+++ b/apps/studio/pages/project/[ref]/database/extensions.tsx
@@ -12,9 +12,9 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { Extensions } from '@/components/interfaces/Database/Extensions/Extensions'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/database/functions.tsx b/apps/studio/pages/project/[ref]/database/functions.tsx
index 3c2f32bd082..d4945b30693 100644
--- a/apps/studio/pages/project/[ref]/database/functions.tsx
+++ b/apps/studio/pages/project/[ref]/database/functions.tsx
@@ -13,7 +13,7 @@ import { FunctionsList } from '@/components/interfaces/Database/Functions/Functi
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/database/migrations.tsx b/apps/studio/pages/project/[ref]/database/migrations.tsx
index df018c9c8c2..e57b15dd6fd 100644
--- a/apps/studio/pages/project/[ref]/database/migrations.tsx
+++ b/apps/studio/pages/project/[ref]/database/migrations.tsx
@@ -11,7 +11,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import Migrations from '@/components/interfaces/Database/Migrations/Migrations'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/auth/policies.tsx b/apps/studio/pages/project/[ref]/database/policies.tsx
similarity index 94%
rename from apps/studio/pages/project/[ref]/auth/policies.tsx
rename to apps/studio/pages/project/[ref]/database/policies.tsx
index 43efa9f4c6c..654a48de3fb 100644
--- a/apps/studio/pages/project/[ref]/auth/policies.tsx
+++ b/apps/studio/pages/project/[ref]/database/policies.tsx
@@ -22,16 +22,16 @@ import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { useIsInlineEditorEnabled } from '@/components/interfaces/Account/Preferences/useDashboardSettings'
import { useIsRLSTesterEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
-import { Policies } from '@/components/interfaces/Auth/Policies/Policies'
-import { PoliciesDataProvider } from '@/components/interfaces/Auth/Policies/PoliciesDataContext'
-import { getGeneralPolicyTemplates } from '@/components/interfaces/Auth/Policies/PolicyEditorModal/PolicyEditorModal.constants'
-import { PolicyEditorPanel } from '@/components/interfaces/Auth/Policies/PolicyEditorPanel'
+import { Policies } from '@/components/interfaces/Database/Policies/Policies'
+import { getGeneralPolicyTemplates } from '@/components/interfaces/Database/Policies/Policies.constants'
+import { PoliciesDataProvider } from '@/components/interfaces/Database/Policies/PoliciesDataContext'
+import { PolicyEditorPanel } from '@/components/interfaces/Database/Policies/PolicyEditorPanel'
import {
generatePolicyUpdateSQL,
type Policy,
-} from '@/components/interfaces/Auth/Policies/PolicyTableRow/PolicyTableRow.utils'
-import { RLSTesterSheet } from '@/components/interfaces/Auth/RLSTester/RLSTesterSheet'
-import AuthLayout from '@/components/layouts/AuthLayout/AuthLayout'
+} from '@/components/interfaces/Database/Policies/PolicyTableRow/PolicyTableRow.utils'
+import { RLSTesterSheet } from '@/components/interfaces/Database/RLSTester/RLSTesterSheet'
+import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { getExposedSchemas } from '@/components/layouts/ProjectNeedsSecuring/ProjectNeedsSecuring.utils'
@@ -97,7 +97,7 @@ const getTableFilterState = (tables: PGTable[], policies: Array<Policy>, searchS
return { tables: sortedTables, visibleTableIds }
}
-const AuthPoliciesPage: NextPageWithLayout = () => {
+const DatabasePoliciesPage: NextPageWithLayout = () => {
const [schema, setSchema] = useQueryState(
'schema',
parseAsString.withDefault('public').withOptions({ history: 'replace' })
@@ -401,10 +401,10 @@ const AuthPoliciesPage: NextPageWithLayout = () => {
)
}
-AuthPoliciesPage.getLayout = (page) => (
+DatabasePoliciesPage.getLayout = (page) => (
<DefaultLayout>
- <AuthLayout title="Policies">{page}</AuthLayout>
+ <DatabaseLayout title="Policies">{page}</DatabaseLayout>
</DefaultLayout>
)
-export default AuthPoliciesPage
+export default DatabasePoliciesPage
diff --git a/apps/studio/pages/project/[ref]/database/publications/[id].tsx b/apps/studio/pages/project/[ref]/database/publications/[id].tsx
index 26ba821eea1..965c22faa2a 100644
--- a/apps/studio/pages/project/[ref]/database/publications/[id].tsx
+++ b/apps/studio/pages/project/[ref]/database/publications/[id].tsx
@@ -1,6 +1,8 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
-import { PageContainer, PageSection, PageSectionContent, ShimmeringLoader } from 'ui-patterns'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { PublicationsTables } from '@/components/interfaces/Database/Publications/PublicationsTables'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
diff --git a/apps/studio/pages/project/[ref]/database/replication/[pipelineId].tsx b/apps/studio/pages/project/[ref]/database/replication/[pipelineId].tsx
index b9b2d9b1200..e1caff23d17 100644
--- a/apps/studio/pages/project/[ref]/database/replication/[pipelineId].tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/[pipelineId].tsx
@@ -5,7 +5,7 @@ import { useContext, useEffect } from 'react'
import { ReplicationPipelineStatus } from '@/components/interfaces/Database/Replication/ReplicationPipelineStatus/ReplicationPipelineStatus'
import { useIsETLPrivateAlpha } from '@/components/interfaces/Database/Replication/useIsETLPrivateAlpha'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
import { FormHeader } from '@/components/ui/Forms/FormHeader'
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
diff --git a/apps/studio/pages/project/[ref]/database/replication/index.tsx b/apps/studio/pages/project/[ref]/database/replication/index.tsx
index 3c5c2797df3..2d48e5b2721 100644
--- a/apps/studio/pages/project/[ref]/database/replication/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/index.tsx
@@ -1,13 +1,13 @@
-import { Admonition } from 'ui-patterns/admonition'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { Destinations } from '@/components/interfaces/Database/Replication/Destinations'
import { ReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram'
-import { EmptyReplicationDiagram } from '@/components/interfaces/Database/Replication/ReplicationDiagram/EmptyReplicationDiagram'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
+import { HighAvailabilityDisabledEmptyState } from '@/components/ui/HighAvailability/HighAvailabilityDisabledEmptyState'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
+import { useHighAvailability } from '@/hooks/misc/useHighAvailability'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { PipelineRequestStatusProvider } from '@/state/replication-pipeline-request-status'
@@ -15,12 +15,24 @@ import type { NextPageWithLayout } from '@/types'
const DatabaseReplicationPage: NextPageWithLayout = () => {
const { data: selectedProject, isPending } = useSelectedProjectQuery()
+ const { isHighAvailability } = useHighAvailability()
const showPgReplicate = useIsFeatureEnabled('database:replication')
if (!showPgReplicate) {
return <UnknownInterface urlBack={`/project/${selectedProject?.ref}/database/schemas`} />
}
+ if (isHighAvailability) {
+ return (
+ <div className="flex h-full w-full items-center justify-center p-6">
+ <HighAvailabilityDisabledEmptyState
+ title="Replication unavailable on High Availability projects"
+ description="We're working to bring replication to High Availability projects. Contact support if this is blocking your work."
+ />
+ </div>
+ )
+ }
+
return (
<PipelineRequestStatusProvider>
<ScaffoldContainer>
@@ -30,8 +42,8 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
<h3 className="text-foreground text-xl prose">Replication</h3>
</div>
<p className="prose text-sm max-w-full">
- Deploy read replicas across multiple regions, or replicate database changes to
- external data warehouses and analytics platforms
+ Deploy Read Replicas across multiple regions, or use Pipelines to replicate database
+ changes to analytics destinations.
</p>
</div>
</ScaffoldSection>
@@ -41,31 +53,6 @@ const DatabaseReplicationPage: NextPageWithLayout = () => {
<ScaffoldContainer>
<GenericSkeletonLoader />
</ScaffoldContainer>
- ) : selectedProject?.high_availability ? (
- <>
- <EmptyReplicationDiagram />
-
- <ScaffoldContainer>
- <ScaffoldSection isFullWidth className="pt-6!">
- <Admonition
- variant="default"
- title="Replication is not available for High Availability projects"
- >
- Replication is not currently available for projects with High Availability. Please
- contact{' '}
- <a
- href="https://supabase.com/support"
- target="_blank"
- rel="noopener noreferrer"
- className="text-primary underline"
- >
- support
- </a>{' '}
- if you are interested in using this feature with your High Availability project.
- </Admonition>
- </ScaffoldSection>
- </ScaffoldContainer>
- </>
) : (
<>
<ReplicationDiagram />
diff --git a/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
index 20d6fd32952..f622cc986f3 100644
--- a/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
+++ b/apps/studio/pages/project/[ref]/database/replication/replica/[replicaId].tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/router'
import { useEffect, useMemo, useState } from 'react'
import { AWS_REGIONS } from 'shared-data'
import { Badge, Button } from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { ReadReplicaDetails } from '@/components/interfaces/Database/Replication/ReadReplicas/ReadReplicaDetails'
import {
diff --git a/apps/studio/pages/project/[ref]/database/roles.tsx b/apps/studio/pages/project/[ref]/database/roles.tsx
index 72858064332..eb8d11f45d0 100644
--- a/apps/studio/pages/project/[ref]/database/roles.tsx
+++ b/apps/studio/pages/project/[ref]/database/roles.tsx
@@ -11,7 +11,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { RolesList } from '@/components/interfaces/Database/Roles/RolesList'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/database/schemas.tsx b/apps/studio/pages/project/[ref]/database/schemas.tsx
index b9599326390..b57e53abf4a 100644
--- a/apps/studio/pages/project/[ref]/database/schemas.tsx
+++ b/apps/studio/pages/project/[ref]/database/schemas.tsx
@@ -2,7 +2,7 @@ import { ReactFlowProvider } from '@xyflow/react'
import { SchemaGraph } from '@/components/interfaces/Database/Schemas/SchemaGraph'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import type { NextPageWithLayout } from '@/types'
const SchemasPage: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/database/tables/[id].tsx b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
index f3c71b629cd..500c9c3142b 100644
--- a/apps/studio/pages/project/[ref]/database/tables/[id].tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/[id].tsx
@@ -7,7 +7,7 @@ import { ColumnList } from '@/components/interfaces/Database/Tables/ColumnList'
import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { useTableEditorQuery } from '@/data/table-editor/table-editor-query'
import { isTableLike } from '@/data/table-editor/table-editor-types'
diff --git a/apps/studio/pages/project/[ref]/database/tables/index.tsx b/apps/studio/pages/project/[ref]/database/tables/index.tsx
index ddeebe6f27b..19c890d153c 100644
--- a/apps/studio/pages/project/[ref]/database/tables/index.tsx
+++ b/apps/studio/pages/project/[ref]/database/tables/index.tsx
@@ -7,7 +7,7 @@ import { TableList } from '@/components/interfaces/Database/Tables/TableList'
import DeleteConfirmationDialogs from '@/components/interfaces/TableGridEditor/DeleteConfirmationDialogs'
import { SidePanelEditor } from '@/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import { AutoEnableRLSNotice } from '@/components/ui/AutoEnableRLSNotice'
import { Entity, isTableLike, postgresTableToEntity } from '@/data/table-editor/table-editor-types'
diff --git a/apps/studio/pages/project/[ref]/database/types.tsx b/apps/studio/pages/project/[ref]/database/types.tsx
index 1950b0ddc64..85bb0f18adc 100644
--- a/apps/studio/pages/project/[ref]/database/types.tsx
+++ b/apps/studio/pages/project/[ref]/database/types.tsx
@@ -10,7 +10,7 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { EnumeratedTypes } from '@/components/interfaces/Database/EnumeratedTypes/EnumeratedTypes'
import DatabaseLayout from '@/components/layouts/DatabaseLayout/DatabaseLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import type { NextPageWithLayout } from '@/types'
const DatabaseEnumeratedTypes: NextPageWithLayout = () => {
diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/details.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/details.tsx
index 5dd7dbee8d9..b0882b49d97 100644
--- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/details.tsx
+++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/details.tsx
@@ -1,5 +1,5 @@
import { EdgeFunctionDetails } from '@/components/interfaces/Functions/EdgeFunctionDetails/EdgeFunctionDetails'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import EdgeFunctionDetailsLayout from '@/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
index 7dc16f1c30e..6af3b79b1ad 100644
--- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
+++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/index.tsx
@@ -13,11 +13,11 @@ import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { EdgeFunctionOverview } from '@/components/interfaces/Functions/EdgeFunctionOverview/EdgeFunctionOverview'
import { EdgeFunctionRecentInvocations } from '@/components/interfaces/Functions/EdgeFunctionRecentInvocations'
import ReportWidget from '@/components/interfaces/Reports/ReportWidget'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import EdgeFunctionDetailsLayout from '@/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout'
import AreaChart from '@/components/ui/Charts/AreaChart'
import StackedBarChart from '@/components/ui/Charts/StackedBarChart'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import {
FunctionsCombinedStatsVariables,
useFunctionsCombinedStatsQuery,
diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx
index db6a67fb74f..e83fcaca488 100644
--- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx
+++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/invocations.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import EdgeFunctionDetailsLayout from '@/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout'
import { useEdgeFunctionQuery } from '@/data/edge-functions/edge-function-query'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx b/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx
index 3052a78b1c2..d1bc886bb83 100644
--- a/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx
+++ b/apps/studio/pages/project/[ref]/functions/[functionSlug]/logs.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import EdgeFunctionDetailsLayout from '@/components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout'
import { useEdgeFunctionQuery } from '@/data/edge-functions/edge-function-query'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/functions/index.tsx b/apps/studio/pages/project/[ref]/functions/index.tsx
index 07e4eb8bbb9..35c3eb790c6 100644
--- a/apps/studio/pages/project/[ref]/functions/index.tsx
+++ b/apps/studio/pages/project/[ref]/functions/index.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
import { parseAsString, parseAsStringLiteral, useQueryState } from 'nuqs'
import React, { useMemo, useRef } from 'react'
import { Button, Card, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
@@ -30,9 +30,9 @@ import { EdgeFunctionsListItem } from '@/components/interfaces/Functions/EdgeFun
import { FunctionsEmptyState } from '@/components/interfaces/Functions/FunctionsEmptyState'
import { TerminalInstructionsDialog } from '@/components/interfaces/Functions/TerminalInstructionsDialog'
import { useFunctionsListShortcuts } from '@/components/interfaces/Functions/useFunctionsListShortcuts'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import EdgeFunctionsLayout from '@/components/layouts/EdgeFunctionsLayout/EdgeFunctionsLayout'
-import AlertError from '@/components/ui/AlertError'
+import { AlertError } from '@/components/ui/AlertError'
import { DocsButton } from '@/components/ui/DocsButton'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useEdgeFunctionsQuery } from '@/data/edge-functions/edge-functions-query'
diff --git a/apps/studio/pages/project/[ref]/index.tsx b/apps/studio/pages/project/[ref]/index.tsx
index 428d2974266..2199478aa20 100644
--- a/apps/studio/pages/project/[ref]/index.tsx
+++ b/apps/studio/pages/project/[ref]/index.tsx
@@ -1,5 +1,5 @@
import { ProjectHome } from '@/components/interfaces/ProjectHome/Home'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { ProjectLayoutWithAuth } from '@/components/layouts/ProjectLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
index 27f42c19b2d..2e88ba89ded 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { useRouter } from 'next/router'
import { useEffect, useMemo } from 'react'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
PageHeader,
diff --git a/apps/studio/pages/project/[ref]/integrations/index.tsx b/apps/studio/pages/project/[ref]/integrations/index.tsx
index 970de70a53d..b8c4ddbb007 100644
--- a/apps/studio/pages/project/[ref]/integrations/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/index.tsx
@@ -4,7 +4,6 @@ import { Search } from 'lucide-react'
import { useRouter } from 'next/router'
import { parseAsString, useQueryState } from 'nuqs'
import { useMemo, type ReactNode } from 'react'
-import { ShimmeringLoader } from 'ui-patterns'
import { Input } from 'ui-patterns/DataInputs/Input'
import { PageContainer } from 'ui-patterns/PageContainer'
import {
@@ -16,6 +15,7 @@ import {
PageHeaderTitle,
} from 'ui-patterns/PageHeader'
import { PageSection, PageSectionContent, PageSectionMeta } from 'ui-patterns/PageSection'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
import { useIsMarketplaceEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import {
diff --git a/apps/studio/pages/project/[ref]/logs/auth-logs.tsx b/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
index c5110601a92..1720f34c65c 100644
--- a/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/auth-logs.tsx
@@ -1,9 +1,9 @@
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/cron-logs.tsx b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
index 8b071de599b..8ef5847fbec 100644
--- a/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/cron-logs.tsx
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
index 5f69d2b3650..92f517db324 100644
--- a/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/dedicated-pooler-logs.tsx
@@ -5,7 +5,7 @@ import { LogoLoader } from 'ui'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
index f124efca96c..8296f0cf71c 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-functions-logs.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
index 30647d57c2f..d004cf8c814 100644
--- a/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/edge-logs.tsx
@@ -3,7 +3,7 @@ import { parseAsString, useQueryState } from 'nuqs'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
index 17a086e7590..c246e2da385 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/index.tsx
@@ -1,18 +1,23 @@
import { useMonaco } from '@monaco-editor/react'
import { useLocalStorage } from '@uidotdev/usehooks'
-import { IS_PLATFORM, LOCAL_STORAGE_KEYS, useParams } from 'common'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS, useFlag, useParams } from 'common'
import dayjs from 'dayjs'
import type { editor } from 'monaco-editor'
import { useRouter } from 'next/router'
import { useEffect, useMemo, useRef, useState } from 'react'
import { toast } from 'sonner'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+import { Button, ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
+import {
+ detectLogSource,
+ looksLikeLegacyLogsQuery,
+ rewriteLogsSqlWithAI,
+} from '@/components/interfaces/Settings/Logs/logs-sql-rewrite'
import {
EXPLORER_DATEPICKER_HELPERS,
getDefaultHelper,
+ getLogsTemplates,
LOGS_LARGE_DATE_RANGE_DAYS_THRESHOLD,
- TEMPLATES,
} from '@/components/interfaces/Settings/Logs/Logs.constants'
import { DatePickerValue } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import { LogData, LogsWarning, LogTemplate } from '@/components/interfaces/Settings/Logs/Logs.types'
@@ -25,12 +30,14 @@ import {
buildLogQueryParams,
resolveLogDateRange,
} from '@/components/interfaces/Settings/Logs/logsDateRange'
-import LogsQueryPanel from '@/components/interfaces/Settings/Logs/LogsQueryPanel'
+import { LogsExplorerOtelBanner } from '@/components/interfaces/Settings/Logs/LogsExplorerOtelBanner'
+import { LogsQueryPanel } from '@/components/interfaces/Settings/Logs/LogsQueryPanel'
import { LogTable } from '@/components/interfaces/Settings/Logs/LogTable'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
+import { DiffEditor } from '@/components/ui/DiffEditor'
import LoadingOpacity from '@/components/ui/LoadingOpacity'
import ShimmerLine from '@/components/ui/ShimmerLine'
import { useContentQuery } from '@/data/content/content-query'
@@ -38,37 +45,53 @@ import {
UpsertContentPayload,
useContentUpsertMutation,
} from '@/data/content/content-upsert-mutation'
-import useLogsQuery from '@/hooks/analytics/useLogsQuery'
+import { constructHeaders } from '@/data/fetchers'
+import { fetchOtelLogKeys } from '@/data/logs/otel-log-keys-query'
+import { useLogsQuery } from '@/hooks/analytics/useLogsQuery'
import { useLogsUrlState } from '@/hooks/analytics/useLogsUrlState'
import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
+import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
+import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { useUpgradePrompt } from '@/hooks/misc/useUpgradePrompt'
import { uuidv4 } from '@/lib/helpers'
import { useProfile } from '@/lib/profile'
import { useTrack } from '@/lib/telemetry/track'
import type { LogSqlSnippets, NextPageWithLayout } from '@/types'
+type SaveQueryFormValues = { name: string; description?: string }
+
const LOCAL_PLACEHOLDER_QUERY =
'select\n timestamp, event_message, metadata\n from edge_logs limit 5'
const PLATFORM_PLACEHOLDER_QUERY =
'select\n cast(timestamp as datetime) as timestamp,\n event_message, metadata \nfrom edge_logs \nlimit 5'
+const OTEL_PLACEHOLDER_QUERY =
+ "select\n timestamp,\n event_message,\n log_attributes\nfrom logs\nwhere source = 'edge_logs'\norder by timestamp desc\nlimit 5"
+
+const otelSourceQuery = (source: string) =>
+ `select\n timestamp,\n event_message,\n log_attributes\nfrom logs\nwhere source = '${source}'\norder by timestamp desc\nlimit 100`
+
export const LogsExplorerPage: NextPageWithLayout = () => {
useEditorHints()
const monaco = useMonaco()
const router = useRouter()
const { profile } = useProfile()
+ const { data: project } = useSelectedProjectQuery()
+ const { data: organization } = useSelectedOrganizationQuery()
const { ref, q, queryId } = useParams()
const track = useTrack()
const projectRef = ref as string
const { logsShowMetadataIpTemplate } = useIsFeatureEnabled(['logs:show_metadata_ip_template'])
+ const useOtelEndpoint = useFlag('otelLegacyLogs')
const allTemplates = useMemo(() => {
- if (logsShowMetadataIpTemplate) return TEMPLATES
- else return TEMPLATES.filter((x) => x.label !== 'Metadata IP')
- }, [logsShowMetadataIpTemplate])
+ const templates = getLogsTemplates(useOtelEndpoint)
+ if (logsShowMetadataIpTemplate) return templates
+ else return templates.filter((x) => x.label !== 'Metadata IP')
+ }, [logsShowMetadataIpTemplate, useOtelEndpoint])
const editorRef = useRef<editor.IStandaloneCodeEditor>(null)
const [editorId] = useState<string>(uuidv4())
@@ -91,25 +114,31 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
const [datePickerValue, setDatePickerValue] = useState<DatePickerValue>(initialDatePickerValue)
const { logsDefaultQuery } = useCustomContent(['logs:default_query'])
- const PLACEHOLDER_QUERY = IS_PLATFORM
- ? (logsDefaultQuery ?? PLATFORM_PLACEHOLDER_QUERY)
- : LOCAL_PLACEHOLDER_QUERY
+ const PLACEHOLDER_QUERY = useOtelEndpoint
+ ? OTEL_PLACEHOLDER_QUERY
+ : IS_PLATFORM
+ ? (logsDefaultQuery ?? PLATFORM_PLACEHOLDER_QUERY)
+ : LOCAL_PLACEHOLDER_QUERY
const [editorValue, setEditorValue] = useState<string>(PLACEHOLDER_QUERY)
const [saveModalOpen, setSaveModalOpen] = useState<boolean>(false)
const [warnings, setWarnings] = useState<LogsWarning[]>([])
const [selectedLog, setSelectedLog] = useState<LogData | null>(null)
+ const [rewriteProposal, setRewriteProposal] = useState<{
+ original: string
+ modified: string
+ } | null>(null)
+ const [isRewriting, setIsRewriting] = useState<boolean>(false)
+ const [rewriteBannerDismissed, setRewriteBannerDismissed] = useLocalStorage<boolean>(
+ `project-${projectRef}-logs-rewrite-banner-dismissed`,
+ false
+ )
const [recentLogs, setRecentLogs] = useLocalStorage<LogSqlSnippets.Content[]>(
`project-content-${projectRef}-recent-log-sql`,
[]
)
- const [useOtelEndpoint, setUseOtelEndpoint] = useLocalStorage<boolean>(
- `logs-explorer-use-otel-endpoint-${projectRef}`,
- false
- )
-
const { getEntitlementNumericValue } = useCheckEntitlements('log.retention_days')
const entitledToAuditLogDays = getEntitlementNumericValue()
@@ -148,6 +177,8 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
const results = logData
const isLoading = logsLoading
+ const showRewriteCTA = useOtelEndpoint && looksLikeLegacyLogsQuery(editorValue)
+
const { mutateAsync: upsertContent, isPending: isUpsertingContent } = useContentUpsertMutation({
onError: (e) => {
const error = e as { message: string }
@@ -200,6 +231,52 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
addRecentLogSqlSnippet({ sql: template.searchString })
}
+ const handleRewrite = async () => {
+ const currentSql = editorRef.current?.getValue() ?? editorValue
+ if (!currentSql.trim()) {
+ toast.info('Write a query to rewrite first')
+ return
+ }
+ setIsRewriting(true)
+ try {
+ const headerData = await constructHeaders()
+ const source = detectLogSource(currentSql)
+ const availableKeys = source
+ ? await fetchOtelLogKeys({ projectRef, source }).catch(() => undefined)
+ : undefined
+ const rewritten = await rewriteLogsSqlWithAI({
+ sql: currentSql,
+ projectRef,
+ connectionString: project?.connectionString,
+ orgSlug: organization?.slug,
+ authorizationHeader: headerData.get('Authorization'),
+ availableKeys,
+ })
+ // The editor may have changed while awaiting key discovery and the AI call;
+ // don't offer a proposal that would clobber intervening edits.
+ const latestSql = editorRef.current?.getValue() ?? editorValue
+ if (latestSql !== currentSql) {
+ toast.info('The query changed while rewriting. Please try again.')
+ return
+ }
+ setRewriteProposal({ original: currentSql, modified: rewritten })
+ } catch (error) {
+ toast.error(`Couldn't rewrite the query: ${(error as Error).message}`)
+ } finally {
+ setIsRewriting(false)
+ }
+ }
+
+ const acceptRewrite = () => {
+ if (!rewriteProposal) return
+ editorRef.current?.setValue(rewriteProposal.modified)
+ setEditorValue(rewriteProposal.modified)
+ setRewriteProposal(null)
+ toast.success('Applied the ClickHouse rewrite')
+ }
+
+ const discardRewrite = () => setRewriteProposal(null)
+
const handleRun = (value?: string | React.MouseEvent) => {
track('log_explorer_query_run_button_clicked', { is_saved_query: !!queryId })
@@ -230,12 +307,20 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
if (editorRef.current && monaco) {
const editorModel = editorRef.current?.getModel()
const currentValue = editorRef.current.getValue()
- const index = currentValue.indexOf('from')
- const updatedValue =
- index < 0
- ? `${currentValue}${source}`
- : `${currentValue.substring(0, index + 4)} ${source} ${currentValue.substring(index + 5)}`
+ let updatedValue: string
+ if (useOtelEndpoint) {
+ const sourceFilter = /source\s*=\s*'[^']*'/i
+ updatedValue = sourceFilter.test(currentValue)
+ ? currentValue.replace(sourceFilter, `source = '${source}'`)
+ : otelSourceQuery(source)
+ } else {
+ const index = currentValue.indexOf('from')
+ updatedValue =
+ index < 0
+ ? `${currentValue}${source}`
+ : `${currentValue.substring(0, index + 4)} ${source} ${currentValue.substring(index + 5)}`
+ }
editorRef.current.pushUndoStop()
editorRef.current.executeEdits(`insert-identifier`, [
@@ -249,8 +334,6 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
}
}
- type SaveQueryFormValues = { name: string; description?: string }
-
const handleCreateQuery = async (values: SaveQueryFormValues) => {
if (!projectRef) return console.error('Project ref is required')
if (!profile) return console.error('Profile is required')
@@ -281,13 +364,15 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
async function handleOnSave() {
if (!projectRef) return console.error('Project ref is required')
+ const currentSql = editorRef.current?.getValue() ?? editorValue
+
// if we have a queryId, we are editing a saved query
if (queryId && query) {
await upsertContent({
projectRef: projectRef!,
payload: {
...query,
- content: { ...(query.content as LogSqlSnippets.Content), sql: editorValue },
+ content: { ...(query.content as LogSqlSnippets.Content), sql: currentSql },
},
})
@@ -323,14 +408,21 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
}))
}
+ const querySql = (query?.content as LogSqlSnippets.Content | undefined)?.sql
useEffect(() => {
if (search) {
setEditorValue(search)
- } else if (q) {
+ } else if (q && !queryId) {
setEditorValue(q)
setSearch(q)
+ } else if (queryId && querySql) {
+ setEditorValue(querySql)
+ editorRef.current?.setValue(querySql)
+ } else if (!queryId) {
+ setEditorValue(PLACEHOLDER_QUERY)
+ editorRef.current?.setValue(PLACEHOLDER_QUERY)
}
- }, [q, search, setSearch])
+ }, [q, search, queryId, querySql, setSearch, PLACEHOLDER_QUERY])
useEffect(() => {
// prevents overwriting when the user selects a helper.
@@ -386,20 +478,55 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
templates={allTemplates.filter((template) => template.mode === 'custom')}
onSelectTemplate={onSelectTemplate}
warnings={warnings}
- useOtel={useOtelEndpoint}
- onUseOtelChange={setUseOtelEndpoint}
+ showRewriteAction={showRewriteCTA && rewriteBannerDismissed}
+ isRewriting={isRewriting}
+ onRewrite={handleRewrite}
/>
+ {showRewriteCTA && !rewriteBannerDismissed && (
+ <LogsExplorerOtelBanner
+ isRewriting={isRewriting}
+ onRewrite={handleRewrite}
+ onDismiss={() => setRewriteBannerDismissed(true)}
+ />
+ )}
<ShimmerLine active={isLoading} />
- <CodeEditor
- // Ensure we reset the editor to the query content whenever the selected query changes
- key={queryId}
- id={editorId}
- editorRef={editorRef}
- language="pgsql"
- defaultValue={editorValue}
- onInputChange={(v) => setEditorValue(v || '')}
- actions={{ runQuery: { enabled: true, callback: handleRun } }}
- />
+ <div className="relative h-full">
+ <CodeEditor
+ // Ensure we reset the editor to the query content whenever the selected query changes
+ key={queryId}
+ id={editorId}
+ editorRef={editorRef}
+ language="pgsql"
+ defaultValue={editorValue}
+ onInputChange={(v) => setEditorValue(v || '')}
+ actions={{ runQuery: { enabled: true, callback: handleRun } }}
+ />
+ {rewriteProposal && (
+ <div className="absolute inset-0 z-10 flex flex-col bg-studio">
+ <div className="flex items-center justify-between gap-2 border-b bg-surface-100 px-4 py-2">
+ <span className="text-xs text-foreground-light">
+ Review the ClickHouse SQL rewrite before accepting it
+ </span>
+ <div className="flex items-center gap-2">
+ <Button variant="default" size="tiny" onClick={discardRewrite}>
+ Discard
+ </Button>
+ <Button variant="primary" size="tiny" onClick={acceptRewrite}>
+ Accept
+ </Button>
+ </div>
+ </div>
+ <div className="min-h-0 flex-1">
+ <DiffEditor
+ language="pgsql"
+ original={rewriteProposal.original}
+ modified={rewriteProposal.modified}
+ options={{ renderSideBySide: true, renderGutterMenu: false }}
+ />
+ </div>
+ </div>
+ )}
+ </div>
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel collapsible minSize="5" className="overflow-auto">
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
index a362c7cca86..dd8d11afd9c 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/recent.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
import { Button } from 'ui'
import RecentQueriesItem from '@/components/interfaces/Settings/Logs/RecentQueriesItem'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import Table from '@/components/to-be-cleaned/Table'
import LogsExplorerHeader from '@/components/ui/Logs/LogsExplorerHeader'
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
index fc48a8a2eb2..976ce2c93f1 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/saved.tsx
@@ -3,8 +3,8 @@ import { Save } from 'lucide-react'
import Link from 'next/link'
import { Loading } from 'ui'
-import LogsSavedQueriesItem from '@/components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { SavedQueriesItem } from '@/components/interfaces/Settings/Logs/Logs.SavedQueriesItem'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import Table from '@/components/to-be-cleaned/Table'
import LogsExplorerHeader from '@/components/ui/Logs/LogsExplorerHeader'
@@ -44,7 +44,7 @@ export const LogsSavedPage: NextPageWithLayout = () => {
</>
}
body={saved.map((item) => (
- <LogsSavedQueriesItem key={item.id} item={item} />
+ <SavedQueriesItem key={item.id} item={item} />
))}
/>
</div>
diff --git a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
index 01c57640504..d5af19ee7cd 100644
--- a/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
+++ b/apps/studio/pages/project/[ref]/logs/explorer/templates.tsx
@@ -1,11 +1,11 @@
-import { useParams } from 'common'
+import { useFlag, useParams } from 'common'
import { CodeIcon } from 'lucide-react'
import { useState } from 'react'
import { Button, cn, Popover, PopoverContent, PopoverTrigger } from 'ui'
-import { TEMPLATES } from '@/components/interfaces/Settings/Logs/Logs.constants'
+import { getLogsTemplates } from '@/components/interfaces/Settings/Logs/Logs.constants'
import type { LogTemplate } from '@/components/interfaces/Settings/Logs/Logs.types'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import CardButton from '@/components/ui/CardButton'
import LogsExplorerHeader from '@/components/ui/Logs/LogsExplorerHeader'
@@ -17,14 +17,16 @@ export const LogsTemplatesPage: NextPageWithLayout = () => {
const { ref: projectRef } = useParams()
const { logsTemplates: isTemplatesEnabled, logsShowMetadataIpTemplate: showMetadataIpTemplate } =
useIsFeatureEnabled(['logs:templates', 'logs:show_metadata_ip_template'])
+ const useOtelEndpoint = useFlag('otelLegacyLogs')
if (!isTemplatesEnabled) {
return <UnknownInterface urlBack={`/project/${projectRef}/logs/explorer`} />
}
+ const templates = getLogsTemplates(useOtelEndpoint)
const allTemplates = showMetadataIpTemplate
- ? TEMPLATES
- : TEMPLATES.filter((template) => template.label !== 'Metadata IP')
+ ? templates
+ : templates.filter((template) => template.label !== 'Metadata IP')
return (
<div className="mx-auto h-full w-full px-5 py-6">
diff --git a/apps/studio/pages/project/[ref]/logs/index.tsx b/apps/studio/pages/project/[ref]/logs/index.tsx
index 123db944bb7..06d1df73ac9 100644
--- a/apps/studio/pages/project/[ref]/logs/index.tsx
+++ b/apps/studio/pages/project/[ref]/logs/index.tsx
@@ -4,7 +4,7 @@ import { useEffect } from 'react'
import { useUnifiedLogsPreview } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
import { UnifiedLogs } from '@/components/interfaces/UnifiedLogs/UnifiedLogs'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { ProjectLayout } from '@/components/layouts/ProjectLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/logs/multigres-logs.tsx b/apps/studio/pages/project/[ref]/logs/multigres-logs.tsx
index 768b40b4a37..0fc9658073b 100644
--- a/apps/studio/pages/project/[ref]/logs/multigres-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/multigres-logs.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx b/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx
index 32140a369e3..e07c4e83812 100644
--- a/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pg-upgrade-logs.tsx
@@ -1,7 +1,7 @@
import { useParams } from 'common'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx b/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
index 14a9f06e382..04e2874a64a 100644
--- a/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pgcron-logs.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
index f10b0e34cb7..0ba4b7024ee 100644
--- a/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/pooler-logs.tsx
@@ -4,7 +4,7 @@ import { LogoLoader } from 'ui'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import { useSupavisorConfigurationQuery } from '@/data/database/supavisor-configuration-query'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
index 0061c355c7e..129b54be725 100644
--- a/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgres-logs.tsx
@@ -3,7 +3,7 @@ import { parseAsString, useQueryState } from 'nuqs'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
index d6cb92f6a47..c2d02059470 100644
--- a/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/postgrest-logs.tsx
@@ -4,7 +4,7 @@ import { parseAsString, useQueryState } from 'nuqs'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
import { LogsTableEmptyState } from '@/components/interfaces/Settings/Logs/LogsTableEmptyState'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
index 5a3be9480fa..9f123df0b83 100644
--- a/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/realtime-logs.tsx
@@ -1,7 +1,7 @@
import { useRouter } from 'next/router'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/replication-logs.tsx b/apps/studio/pages/project/[ref]/logs/replication-logs.tsx
index 211f35547fc..5a8637a513b 100644
--- a/apps/studio/pages/project/[ref]/logs/replication-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/replication-logs.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/logs/storage-logs.tsx b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
index c659b12307f..5bdfde11ab7 100644
--- a/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
+++ b/apps/studio/pages/project/[ref]/logs/storage-logs.tsx
@@ -1,7 +1,7 @@
import { useRouter } from 'next/router'
import { LogsPreviewer } from '@/components/interfaces/Settings/Logs/LogsPreviewer'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/merge.tsx b/apps/studio/pages/project/[ref]/merge.tsx
index 5fa26d7ab33..3200df9cf70 100644
--- a/apps/studio/pages/project/[ref]/merge.tsx
+++ b/apps/studio/pages/project/[ref]/merge.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { toast } from 'sonner'
import { Button, cn, NavMenu, NavMenuItem } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { ConfirmationModal } from 'ui-patterns/Dialogs/ConfirmationModal'
import { useIsPgDeltaDiffEnabled } from '@/components/interfaces/App/FeaturePreview/FeaturePreviewContext'
diff --git a/apps/studio/pages/project/[ref]/observability/[id].tsx b/apps/studio/pages/project/[ref]/observability/[id].tsx
index cf2ddf4d1d6..98b07c40bea 100644
--- a/apps/studio/pages/project/[ref]/observability/[id].tsx
+++ b/apps/studio/pages/project/[ref]/observability/[id].tsx
@@ -1,6 +1,6 @@
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
import Reports from '@/components/interfaces/Reports/Reports'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/observability/api-overview.tsx b/apps/studio/pages/project/[ref]/observability/api-overview.tsx
index f50b4394f18..07f7ee7fb81 100644
--- a/apps/studio/pages/project/[ref]/observability/api-overview.tsx
+++ b/apps/studio/pages/project/[ref]/observability/api-overview.tsx
@@ -1,5 +1,6 @@
import { useCallback } from 'react'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import {
ErrorCountsChartRenderer,
NetworkTrafficRenderer,
@@ -16,13 +17,16 @@ import ReportStickyNav from '@/components/interfaces/Reports/ReportStickyNav'
import ReportWidget from '@/components/interfaces/Reports/ReportWidget'
import { DatePickerValue } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { useApiReport } from '@/data/reports/api-report-query'
import { useReportDateRange } from '@/hooks/misc/useReportDateRange'
import type { NextPageWithLayout } from '@/types'
+const REPORT_TITLE = 'API Gateway'
+
export const ApiReport: NextPageWithLayout = () => {
const report = useApiReport()
@@ -94,10 +98,10 @@ export const ApiReport: NextPageWithLayout = () => {
return (
<ReportPadding>
- <ReportHeader title="API Gateway" showDatabaseSelector={false} />
+ <ReportHeader title={REPORT_TITLE} showDatabaseSelector={false} />
<ReportStickyNav
content={
- <div className="flex items-center gap-3">
+ <div className="flex w-full items-center gap-3">
<ReportFilterBar
onRemoveFilters={removeFilters}
onDatepickerChange={handleDatepickerChange}
@@ -109,9 +113,10 @@ export const ApiReport: NextPageWithLayout = () => {
filters={filters}
datepickerHelpers={datePickerHelpers}
initialDatePickerValue={datePickerValue}
- className="w-full"
+ className="flex-1 min-w-0"
showDatabaseSelector={false}
/>
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.apiGateway} topic={REPORT_TITLE} />
<UpgradePrompt
show={showUpgradePrompt}
setShowUpgradePrompt={setShowUpgradePrompt}
diff --git a/apps/studio/pages/project/[ref]/observability/auth.tsx b/apps/studio/pages/project/[ref]/observability/auth.tsx
index e18c7bea0fc..3497dc67c99 100644
--- a/apps/studio/pages/project/[ref]/observability/auth.tsx
+++ b/apps/studio/pages/project/[ref]/observability/auth.tsx
@@ -6,6 +6,7 @@ import { parseAsJson, useQueryState } from 'nuqs'
import { useState } from 'react'
import { Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import ReportFilterBar from '@/components/interfaces/Reports/ReportFilterBar'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
@@ -25,10 +26,11 @@ import {
} from '@/components/interfaces/Reports/v2/ReportsSelectFilter'
import { LogsDatePicker } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
import type { ChartHighlightAction } from '@/components/ui/Charts/ChartHighlightActions'
import { ReportSettings } from '@/components/ui/Charts/ReportSettings'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import {
@@ -58,6 +60,8 @@ AuthReport.getLayout = (page) => (
export type UpdateDateRange = (from: string, to: string) => void
export default AuthReport
+const REPORT_TITLE = 'Auth'
+
const AuthUsage = () => {
const { ref } = useParams()
const chartSyncId = `auth-report`
@@ -209,11 +213,12 @@ const AuthUsage = () => {
return (
<>
- <ReportHeader title="Auth" showDatabaseSelector={false} />
+ <ReportHeader title={REPORT_TITLE} showDatabaseSelector={false} />
<ReportStickyNav
content={
- <div className="flex flex-col gap-2">
- <div className="flex items-center gap-2">
+ <div className="flex flex-col gap-2 w-full">
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.auth} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx
index 2887ab606da..ebed8ef4feb 100644
--- a/apps/studio/pages/project/[ref]/observability/database.tsx
+++ b/apps/studio/pages/project/[ref]/observability/database.tsx
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react'
import { toast } from 'sonner'
import { Alert, AlertDescription, Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
import { REPORT_DATERANGE_HELPER_LABELS } from '@/components/interfaces/Reports/Reports.constants'
@@ -18,13 +19,14 @@ import { POOLING_OPTIMIZATIONS } from '@/components/interfaces/Settings/Database
import DiskSizeConfigurationModal from '@/components/interfaces/Settings/Database/DiskSizeConfigurationModal'
import { LogsDatePicker } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
import Table from '@/components/to-be-cleaned/Table'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import type { MultiAttribute } from '@/components/ui/Charts/ComposedChart.utils'
import { LazyComposedChartHandler } from '@/components/ui/Charts/ComposedChartHandler'
import { ReportSettings } from '@/components/ui/Charts/ReportSettings'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { analyticsKeys } from '@/data/analytics/keys'
@@ -65,6 +67,8 @@ DatabaseReport.getLayout = (page) => (
export type UpdateDateRange = (from: string, to: string) => void
export default DatabaseReport
+const REPORT_TITLE = 'Database'
+
const DatabaseUsage = () => {
const { db, chart, ref } = useParams()
const { data: project } = useSelectedProjectQuery()
@@ -227,10 +231,11 @@ const DatabaseUsage = () => {
return (
<>
- <ReportHeader showDatabaseSelector title="Database" />
+ <ReportHeader showDatabaseSelector title={REPORT_TITLE} />
<ReportStickyNav
content={
- <>
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.database} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
@@ -275,7 +280,7 @@ const DatabaseUsage = () => {
</div>
)}
</div>
- </>
+ </div>
}
>
{selectedDateRange &&
diff --git a/apps/studio/pages/project/[ref]/observability/edge-functions.tsx b/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
index f322b664da3..1c8c9392d9d 100644
--- a/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
+++ b/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
@@ -6,6 +6,7 @@ import { parseAsJson, useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
import {
@@ -24,10 +25,11 @@ import {
} from '@/components/interfaces/Reports/v2/ReportsSelectFilter'
import { LogsDatePicker } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
import { ReportSettings } from '@/components/ui/Charts/ReportSettings'
import { useChartHoverState } from '@/components/ui/Charts/useChartHoverState'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useEdgeFunctionsQuery } from '@/data/edge-functions/edge-functions-query'
@@ -54,6 +56,8 @@ EdgeFunctionsReportV2.getLayout = (page) => (
export default EdgeFunctionsReportV2
+const REPORT_TITLE = 'Edge Functions'
+
const EdgeFunctionsUsage = () => {
const { ref } = useParams()
const { data: functions } = useEdgeFunctionsQuery({
@@ -143,11 +147,12 @@ const EdgeFunctionsUsage = () => {
return (
<>
- <ReportHeader title="Edge Functions" showDatabaseSelector={false} />
+ <ReportHeader title={REPORT_TITLE} showDatabaseSelector={false} />
<ReportStickyNav
content={
- <div className="flex flex-col gap-2">
- <div className="flex items-center gap-2">
+ <div className="flex flex-col gap-2 w-full">
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.edgeFunctions} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
diff --git a/apps/studio/pages/project/[ref]/observability/index.tsx b/apps/studio/pages/project/[ref]/observability/index.tsx
index 28358abda0d..38fc4039644 100644
--- a/apps/studio/pages/project/[ref]/observability/index.tsx
+++ b/apps/studio/pages/project/[ref]/observability/index.tsx
@@ -7,7 +7,7 @@ import { LogoLoader } from 'ui'
import { ObservabilityOverview } from '@/components/interfaces/Observability/ObservabilityOverview'
import { CreateReportModal } from '@/components/interfaces/Reports/CreateReportModal'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
import ProductEmptyState from '@/components/to-be-cleaned/ProductEmptyState'
import { useContentQuery } from '@/data/content/content-query'
diff --git a/apps/studio/pages/project/[ref]/observability/postgrest.tsx b/apps/studio/pages/project/[ref]/observability/postgrest.tsx
index e35a32be132..5b837132779 100644
--- a/apps/studio/pages/project/[ref]/observability/postgrest.tsx
+++ b/apps/studio/pages/project/[ref]/observability/postgrest.tsx
@@ -4,6 +4,7 @@ import { ArrowRight, RefreshCw } from 'lucide-react'
import { useEffect, useRef, useState } from 'react'
import { Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import ReportFilterBar from '@/components/interfaces/Reports/ReportFilterBar'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
@@ -16,8 +17,9 @@ import {
LogsDatePicker,
} from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useRefreshHandler, useReportDateRange } from '@/hooks/misc/useReportDateRange'
@@ -43,6 +45,8 @@ PostgRESTReport.getLayout = (page) => (
export type UpdateDateRange = (from: string, to: string) => void
export default PostgRESTReport
+const REPORT_TITLE = 'Data API'
+
const PostgrestReport = () => {
const { db, chart } = useParams()
const {
@@ -115,11 +119,12 @@ const PostgrestReport = () => {
return (
<>
- <ReportHeader showDatabaseSelector={false} title="Data API" />
+ <ReportHeader showDatabaseSelector={false} title={REPORT_TITLE} />
<ReportStickyNav
content={
- <div className="flex flex-col gap-2">
- <div className="flex gap-2">
+ <div className="flex flex-col gap-2 w-full">
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.dataApi} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
diff --git a/apps/studio/pages/project/[ref]/observability/query-insights.tsx b/apps/studio/pages/project/[ref]/observability/query-insights.tsx
index 3308e53ea85..21b4002b397 100644
--- a/apps/studio/pages/project/[ref]/observability/query-insights.tsx
+++ b/apps/studio/pages/project/[ref]/observability/query-insights.tsx
@@ -1,5 +1,6 @@
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import { QueryInsights } from '@/components/interfaces/QueryInsights/QueryInsights'
import { REPORT_DATERANGE_HELPER_LABELS } from '@/components/interfaces/Reports/Reports.constants'
import { DefaultLayout } from '@/components/layouts/DefaultLayout'
@@ -7,7 +8,6 @@ import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/Observ
import { DatabaseSelector } from '@/components/ui/DatabaseSelector'
import { DocsButton } from '@/components/ui/DocsButton'
import { useReportDateRange } from '@/hooks/misc/useReportDateRange'
-import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
const PRESETS = [
@@ -16,6 +16,8 @@ const PRESETS = [
REPORT_DATERANGE_HELPER_LABELS.LAST_24_HOURS,
]
+const REPORT_TITLE = 'Query Insights'
+
const QueryInsightsReport: NextPageWithLayout = () => {
const { selectedDateRange, datePickerValue, datePickerHelpers, handleDatePickerChange } =
useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
@@ -30,11 +32,9 @@ const QueryInsightsReport: NextPageWithLayout = () => {
return (
<div className="h-full flex flex-col">
<div className="w-full mb-0 flex lg:items-center justify-between gap-4 py-2 px-6 lg:flex-row flex-col border-b lg:h-[48px]">
- <h3 className="text-foreground text-xl prose">Query Insights</h3>
+ <h3 className="text-foreground text-xl prose">{REPORT_TITLE}</h3>
<div className="flex items-center gap-2 flex-wrap">
- <DocsButton
- href={`${DOCS_URL}/guides/platform/performance#examining-query-performance`}
- />
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.queryInsights} topic={REPORT_TITLE} />
<DatabaseSelector />
<Select
value={datePickerValue.isHelper ? datePickerValue.text : undefined}
diff --git a/apps/studio/pages/project/[ref]/observability/query-performance.tsx b/apps/studio/pages/project/[ref]/observability/query-performance.tsx
index 4f7ecbb281a..d3ffbb10055 100644
--- a/apps/studio/pages/project/[ref]/observability/query-performance.tsx
+++ b/apps/studio/pages/project/[ref]/observability/query-performance.tsx
@@ -1,7 +1,8 @@
import { useParams } from 'common'
import { parseAsArrayOf, parseAsInteger, parseAsJson, parseAsString, useQueryStates } from 'nuqs'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import { useIndexAdvisorStatus } from '@/components/interfaces/QueryPerformance/hooks/useIsIndexAdvisorStatus'
import { useQueryPerformanceSort } from '@/components/interfaces/QueryPerformance/hooks/useQueryPerformanceSort'
import { QueryPerformance } from '@/components/interfaces/QueryPerformance/QueryPerformance'
@@ -16,9 +17,10 @@ import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/Observ
import { DatabaseSelector } from '@/components/ui/DatabaseSelector'
import { DocsButton } from '@/components/ui/DocsButton'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
-import { DOCS_URL } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
+const REPORT_TITLE = 'Query Performance'
+
const QueryPerformanceReport: NextPageWithLayout = () => {
const { ref } = useParams()
const { data: project, isLoading: isLoadingProject } = useSelectedProjectQuery()
@@ -88,11 +90,9 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
return (
<div className="h-full flex flex-col">
<div className="w-full mb-0 flex lg:items-center justify-between gap-4 py-4 px-6 lg:flex-row flex-col">
- <h3 className="text-foreground text-xl prose">Query Performance</h3>
+ <h3 className="text-foreground text-xl prose">{REPORT_TITLE}</h3>
<div className="flex items-center gap-2 flex-wrap">
- <DocsButton
- href={`${DOCS_URL}/guides/platform/performance#examining-query-performance`}
- />
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.queryPerformance} topic={REPORT_TITLE} />
<DatabaseSelector />
</div>
</div>
diff --git a/apps/studio/pages/project/[ref]/observability/realtime.tsx b/apps/studio/pages/project/[ref]/observability/realtime.tsx
index 0bc16544dde..de1103bd03e 100644
--- a/apps/studio/pages/project/[ref]/observability/realtime.tsx
+++ b/apps/studio/pages/project/[ref]/observability/realtime.tsx
@@ -5,6 +5,7 @@ import { ArrowRight, RefreshCw } from 'lucide-react'
import { useEffect, useMemo, useRef, useState } from 'react'
import { Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import ReportFilterBar from '@/components/interfaces/Reports/ReportFilterBar'
import ReportHeader from '@/components/interfaces/Reports/ReportHeader'
import ReportPadding from '@/components/interfaces/Reports/ReportPadding'
@@ -15,8 +16,9 @@ import { useSharedAPIReport } from '@/components/interfaces/Reports/SharedAPIRep
import { ReportChartV2 } from '@/components/interfaces/Reports/v2/ReportChartV2'
import { LogsDatePicker } from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { realtimeReports } from '@/data/reports/v2/realtime.config'
@@ -43,6 +45,8 @@ RealtimeReport.getLayout = (page) => (
export type UpdateDateRange = (from: string, to: string) => void
export default RealtimeReport
+const REPORT_TITLE = 'Realtime'
+
const RealtimeUsage = () => {
const [isRefreshing, setIsRefreshing] = useState(false)
const [showDatePicker, setShowDatePicker] = useState(false)
@@ -140,11 +144,12 @@ const RealtimeUsage = () => {
return (
<>
- <ReportHeader showDatabaseSelector={false} title="Realtime" />
+ <ReportHeader showDatabaseSelector={false} title={REPORT_TITLE} />
<ReportStickyNav
content={
- <div className="flex flex-col gap-3">
- <div className="flex gap-2">
+ <div className="flex flex-col gap-3 w-full">
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.realtime} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
diff --git a/apps/studio/pages/project/[ref]/observability/storage.tsx b/apps/studio/pages/project/[ref]/observability/storage.tsx
index 9e3a0bf874a..fc08c192141 100644
--- a/apps/studio/pages/project/[ref]/observability/storage.tsx
+++ b/apps/studio/pages/project/[ref]/observability/storage.tsx
@@ -4,6 +4,7 @@ import Link from 'next/link'
import { useState } from 'react'
import { Button } from 'ui'
+import { OBSERVABILITY_DOCS_HREFS } from '@/components/interfaces/Observability/Observability.constants'
import {
NetworkTrafficRenderer,
ResponseSpeedChartRenderer,
@@ -25,8 +26,9 @@ import {
LogsDatePicker,
} from '@/components/interfaces/Settings/Logs/Logs.DatePickers'
import UpgradePrompt from '@/components/interfaces/Settings/Logs/UpgradePrompt'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout'
+import { DocsButton } from '@/components/ui/DocsButton'
import { ObservabilityLink } from '@/components/ui/ObservabilityLink'
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
import { useStorageReport } from '@/data/reports/storage-report-query'
@@ -36,6 +38,8 @@ import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useShortcut } from '@/state/shortcuts/useShortcut'
import type { NextPageWithLayout } from '@/types'
+const REPORT_TITLE = 'Storage'
+
export const StorageReport: NextPageWithLayout = () => {
const report = useStorageReport()
@@ -88,11 +92,12 @@ export const StorageReport: NextPageWithLayout = () => {
return (
<ReportPadding>
- <ReportHeader title="Storage" showDatabaseSelector={false} />
+ <ReportHeader title={REPORT_TITLE} showDatabaseSelector={false} />
<ReportStickyNav
content={
- <div className="flex flex-col gap-2">
- <div className="flex items-center gap-2">
+ <div className="flex flex-col gap-2 w-full">
+ <div className="ml-auto flex items-center gap-2 flex-wrap">
+ <DocsButton href={OBSERVABILITY_DOCS_HREFS.storage} topic={REPORT_TITLE} />
<ShortcutTooltip
shortcutId={SHORTCUT_IDS.OBSERVABILITY_REFRESH}
label="Refresh report"
diff --git a/apps/studio/pages/project/[ref]/realtime/inspector.tsx b/apps/studio/pages/project/[ref]/realtime/inspector.tsx
index a21ef91ebc7..9ae778844af 100644
--- a/apps/studio/pages/project/[ref]/realtime/inspector.tsx
+++ b/apps/studio/pages/project/[ref]/realtime/inspector.tsx
@@ -1,5 +1,5 @@
import { RealtimeInspector } from '@/components/interfaces/Realtime/Inspector'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import RealtimeLayout from '@/components/layouts/RealtimeLayout/RealtimeLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/realtime/policies.tsx b/apps/studio/pages/project/[ref]/realtime/policies.tsx
index fcd4c7555e9..30b796de0e3 100644
--- a/apps/studio/pages/project/[ref]/realtime/policies.tsx
+++ b/apps/studio/pages/project/[ref]/realtime/policies.tsx
@@ -10,7 +10,7 @@ import {
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { RealtimePolicies } from '@/components/interfaces/Realtime/Policies'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import RealtimeLayout from '@/components/layouts/RealtimeLayout/RealtimeLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/pages/project/[ref]/realtime/settings.tsx b/apps/studio/pages/project/[ref]/realtime/settings.tsx
index beba67221ff..63f00ff7350 100644
--- a/apps/studio/pages/project/[ref]/realtime/settings.tsx
+++ b/apps/studio/pages/project/[ref]/realtime/settings.tsx
@@ -10,7 +10,7 @@ import {
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
import { RealtimeSettings } from '@/components/interfaces/Realtime/RealtimeSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import RealtimeLayout from '@/components/layouts/RealtimeLayout/RealtimeLayout'
import { DocsButton } from '@/components/ui/DocsButton'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/pages/project/[ref]/settings/addons.tsx b/apps/studio/pages/project/[ref]/settings/addons.tsx
index 8b729ac0b0a..a1165170b5c 100644
--- a/apps/studio/pages/project/[ref]/settings/addons.tsx
+++ b/apps/studio/pages/project/[ref]/settings/addons.tsx
@@ -7,7 +7,7 @@ import {
} from 'ui-patterns/PageHeader'
import { Addons } from '@/components/interfaces/Settings/Addons/Addons'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/settings/api-keys/legacy.tsx b/apps/studio/pages/project/[ref]/settings/api-keys/legacy.tsx
index 0cc6bf6cd69..39fa57ec7e7 100644
--- a/apps/studio/pages/project/[ref]/settings/api-keys/legacy.tsx
+++ b/apps/studio/pages/project/[ref]/settings/api-keys/legacy.tsx
@@ -1,7 +1,7 @@
import { IS_PLATFORM } from 'common'
import ApiKeysLayout from '@/components/layouts/APIKeys/APIKeysLayout'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { DisplayApiSettings } from '@/components/ui/ProjectSettings/DisplayApiSettings'
import { ToggleLegacyApiKeysPanel } from '@/components/ui/ProjectSettings/ToggleLegacyApiKeys'
diff --git a/apps/studio/pages/project/[ref]/settings/billing/usage.tsx b/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
index b0714b57378..633e333ebc1 100644
--- a/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
+++ b/apps/studio/pages/project/[ref]/settings/billing/usage.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/settings/compute-and-disk.tsx b/apps/studio/pages/project/[ref]/settings/compute-and-disk.tsx
index bc32551347a..f87ba5397fe 100644
--- a/apps/studio/pages/project/[ref]/settings/compute-and-disk.tsx
+++ b/apps/studio/pages/project/[ref]/settings/compute-and-disk.tsx
@@ -1,5 +1,5 @@
import { DiskManagementForm } from '@/components/interfaces/DiskManagement/DiskManagementForm'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import {
ScaffoldContainer,
diff --git a/apps/studio/pages/project/[ref]/settings/dashboard.tsx b/apps/studio/pages/project/[ref]/settings/dashboard.tsx
index 39034519963..cac32d1c85b 100644
--- a/apps/studio/pages/project/[ref]/settings/dashboard.tsx
+++ b/apps/studio/pages/project/[ref]/settings/dashboard.tsx
@@ -11,7 +11,7 @@ import {
} from 'ui-patterns/PageHeader'
import { DashboardPreferences } from '@/components/interfaces/Settings/General/DashboardPreferences'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { IS_PLATFORM } from '@/lib/constants'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/settings/general.tsx b/apps/studio/pages/project/[ref]/settings/general.tsx
index 381cd1ecfe3..e043eabef87 100644
--- a/apps/studio/pages/project/[ref]/settings/general.tsx
+++ b/apps/studio/pages/project/[ref]/settings/general.tsx
@@ -15,7 +15,7 @@ import { DeleteProjectPanel } from '@/components/interfaces/Settings/General/Del
import { General } from '@/components/interfaces/Settings/General/General'
import { Project } from '@/components/interfaces/Settings/General/Project'
import { TransferProjectPanel } from '@/components/interfaces/Settings/General/TransferProjectPanel/TransferProjectPanel'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
diff --git a/apps/studio/pages/project/[ref]/settings/jwt/index.tsx b/apps/studio/pages/project/[ref]/settings/jwt/index.tsx
index 7161166db71..010c6880259 100644
--- a/apps/studio/pages/project/[ref]/settings/jwt/index.tsx
+++ b/apps/studio/pages/project/[ref]/settings/jwt/index.tsx
@@ -3,11 +3,11 @@ import { IS_PLATFORM } from 'common'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { JWTSecretKeysTable } from '@/components/interfaces/JwtSecrets/jwt-secret-keys-table'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import JWTKeysLayout from '@/components/layouts/JWTKeys/JWTKeysLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { LocalSetupGuide } from '@/components/ui/LocalSetupGuide'
-import NoPermission from '@/components/ui/NoPermission'
+import { NoPermission } from '@/components/ui/NoPermission'
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
import { useDeploymentMode } from '@/hooks/misc/useDeploymentMode'
import { DOCS_URL } from '@/lib/constants'
diff --git a/apps/studio/pages/project/[ref]/settings/jwt/legacy.tsx b/apps/studio/pages/project/[ref]/settings/jwt/legacy.tsx
index 785800f08db..496e9ea4df4 100644
--- a/apps/studio/pages/project/[ref]/settings/jwt/legacy.tsx
+++ b/apps/studio/pages/project/[ref]/settings/jwt/legacy.tsx
@@ -6,7 +6,7 @@ import { toast } from 'sonner'
import { JWTSettings } from '@/components/interfaces/JwtSecrets/jwt-settings'
import { JWT_SECRET_UPDATE_ERROR_MESSAGES } from '@/components/interfaces/JwtSecrets/jwt.constants'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import JWTKeysLayout from '@/components/layouts/JWTKeys/JWTKeysLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { UnknownInterface } from '@/components/ui/UnknownInterface'
diff --git a/apps/studio/pages/project/[ref]/settings/log-drains.tsx b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
index 92ee1da75d1..3dac9cc99be 100644
--- a/apps/studio/pages/project/[ref]/settings/log-drains.tsx
+++ b/apps/studio/pages/project/[ref]/settings/log-drains.tsx
@@ -11,14 +11,14 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from 'ui'
-import { GenericSkeletonLoader } from 'ui-patterns'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { LogDrainDestinationSheetForm } from '@/components/interfaces/LogDrains/LogDrainDestinationSheetForm'
import { LogDrains } from '@/components/interfaces/LogDrains/LogDrains'
import { LogDrainType } from '@/components/interfaces/LogDrains/LogDrains.constants'
import { useEnabledLogDrainTypes } from '@/components/interfaces/LogDrains/useEnabledLogDrainTypes'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
diff --git a/apps/studio/pages/project/[ref]/settings/webhooks/[endpointId].tsx b/apps/studio/pages/project/[ref]/settings/webhooks/[endpointId].tsx
index 84f1d9aafbf..7ab9a594333 100644
--- a/apps/studio/pages/project/[ref]/settings/webhooks/[endpointId].tsx
+++ b/apps/studio/pages/project/[ref]/settings/webhooks/[endpointId].tsx
@@ -1,7 +1,7 @@
import { useRouter } from 'next/router'
import { PlatformWebhooksPage } from '@/components/interfaces/Platform/Webhooks'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/settings/webhooks/index.tsx b/apps/studio/pages/project/[ref]/settings/webhooks/index.tsx
index 182a8846891..daaf7ed31e2 100644
--- a/apps/studio/pages/project/[ref]/settings/webhooks/index.tsx
+++ b/apps/studio/pages/project/[ref]/settings/webhooks/index.tsx
@@ -1,5 +1,5 @@
import { PlatformWebhooksPage } from '@/components/interfaces/Platform/Webhooks'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import SettingsLayout from '@/components/layouts/ProjectSettingsLayout/SettingsLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/sql/[id].tsx b/apps/studio/pages/project/[ref]/sql/[id].tsx
index 24702773c82..0cce211efea 100644
--- a/apps/studio/pages/project/[ref]/sql/[id].tsx
+++ b/apps/studio/pages/project/[ref]/sql/[id].tsx
@@ -4,20 +4,21 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
import { SQLEditor } from '@/components/interfaces/SQLEditor/SQLEditor'
import { generateSnippetTitle } from '@/components/interfaces/SQLEditor/SQLEditor.constants'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
import { useEditorType } from '@/components/layouts/editors/EditorsLayout.hooks'
import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
-import { useContentIdQuery } from '@/data/content/content-id-query'
+import { useSqlSnippetByIdQuery } from '@/data/content/content-id-query'
import { useDashboardHistory } from '@/hooks/misc/useDashboardHistory'
import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
import { IS_PLATFORM } from '@/lib/constants'
-import { SnippetWithContent, useSnippets, useSqlEditorV2StateSnapshot } from '@/state/sql-editor-v2'
+import { wasNeverPersisted } from '@/state/sql-editor/sql-editor-lifecycle'
+import { useSnippets, useSqlEditorV2StateSnapshot } from '@/state/sql-editor/sql-editor-state'
import { createTabId, useTabsStateSnapshot } from '@/state/tabs'
import type { NextPageWithLayout } from '@/types'
@@ -40,9 +41,9 @@ const SqlEditor: NextPageWithLayout = () => {
// [Joshen] May need to investigate separately, but occasionally addSnippet doesnt exist in
// the snapV2 valtio store for some reason hence why the added typeof check here
const canFetchContentBasedOnId = Boolean(
- id !== 'new' && typeof snapV2.addSnippet === 'function' && !snippet?.isNotSavedInDatabaseYet
+ id !== 'new' && typeof snapV2.addSnippet === 'function' && !wasNeverPersisted(snippet?.status)
)
- const { data, error, isError } = useContentIdQuery(
+ const { data, error, isError } = useSqlSnippetByIdQuery(
{ projectRef: ref, id },
{
retry: false,
@@ -60,13 +61,13 @@ const SqlEditor: NextPageWithLayout = () => {
// behaviour down to a very specific use case too with all these conditionals
// More details: https://github.com/supabase/supabase/pull/39389
const snippetMissingImmediatelyAfterCreating =
- !!snippet && snippetMissing && previousRoute === 'new' && 'isNotSavedInDatabaseYet' in snippet
+ !!snippet && snippetMissing && previousRoute === 'new' && wasNeverPersisted(snippet.status)
useEffect(() => {
if (ref && data && project) {
// [Joshen] Check if snippet belongs to the current project
if (!IS_PLATFORM || data.project_id === project.id) {
- snapV2.setSnippet(ref, data as unknown as SnippetWithContent)
+ snapV2.setSnippet(ref, data)
} else {
setLastVisitedSnippet(undefined)
router.replace(`/project/${ref}/sql/new`)
diff --git a/apps/studio/pages/project/[ref]/sql/examples.tsx b/apps/studio/pages/project/[ref]/sql/examples.tsx
index ab28271b591..5980611151f 100644
--- a/apps/studio/pages/project/[ref]/sql/examples.tsx
+++ b/apps/studio/pages/project/[ref]/sql/examples.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import { useEffect } from 'react'
import SQLExamples from '@/components/interfaces/SQLEditor/SQLTemplates/SQLExamples'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
diff --git a/apps/studio/pages/project/[ref]/sql/index.tsx b/apps/studio/pages/project/[ref]/sql/index.tsx
index 96a547d102a..3d16de1f041 100644
--- a/apps/studio/pages/project/[ref]/sql/index.tsx
+++ b/apps/studio/pages/project/[ref]/sql/index.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'common'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
diff --git a/apps/studio/pages/project/[ref]/sql/templates.tsx b/apps/studio/pages/project/[ref]/sql/templates.tsx
index 206ebc16aea..6edae592ab2 100644
--- a/apps/studio/pages/project/[ref]/sql/templates.tsx
+++ b/apps/studio/pages/project/[ref]/sql/templates.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
import { useEffect } from 'react'
import SQLTemplates from '@/components/interfaces/SQLEditor/SQLTemplates/SQLTemplates'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { EditorBaseLayout } from '@/components/layouts/editors/EditorBaseLayout'
import SQLEditorLayout from '@/components/layouts/SQLEditorLayout/SQLEditorLayout'
import { SQLEditorMenu } from '@/components/layouts/SQLEditorLayout/SQLEditorMenu'
diff --git a/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx
index 7c78cc182ed..054ae374d9a 100644
--- a/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx
+++ b/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx
@@ -7,7 +7,7 @@ import { toast } from 'sonner'
import { AnalyticBucketDetails } from '@/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails'
import { useSelectedAnalyticsBucket } from '@/components/interfaces/Storage/AnalyticsBuckets/useSelectedAnalyticsBucket'
import { BUCKET_TYPES } from '@/components/interfaces/Storage/Storage.constants'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import { DocsButton } from '@/components/ui/DocsButton'
diff --git a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
index 3d360ccdead..3028a520c86 100644
--- a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
@@ -34,7 +34,7 @@ import { PUBLIC_BUCKET_TOOLTIP } from '@/components/interfaces/Storage/Storage.c
import StorageBucketsError from '@/components/interfaces/Storage/StorageBucketsError'
import { StorageExplorer } from '@/components/interfaces/Storage/StorageExplorer/StorageExplorer'
import { useBucketPolicyCount } from '@/components/interfaces/Storage/useBucketPolicyCount'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import { StorageExplorerStateContextProvider } from '@/state/storage-explorer'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/storage/files/index.tsx b/apps/studio/pages/project/[ref]/storage/files/index.tsx
index d53fc403d61..b8a6a05e75a 100644
--- a/apps/studio/pages/project/[ref]/storage/files/index.tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/index.tsx
@@ -1,5 +1,5 @@
import { FilesBuckets } from '@/components/interfaces/Storage/FilesBuckets'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { StorageBucketsLayout } from '@/components/layouts/StorageLayout/StorageBucketsLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/storage/files/policies.tsx b/apps/studio/pages/project/[ref]/storage/files/policies.tsx
index 90e73a2a9b6..4503650d477 100644
--- a/apps/studio/pages/project/[ref]/storage/files/policies.tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/policies.tsx
@@ -1,5 +1,5 @@
import { StoragePolicies } from '@/components/interfaces/Storage/StoragePolicies/StoragePolicies'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { StorageBucketsLayout } from '@/components/layouts/StorageLayout/StorageBucketsLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/storage/files/settings.tsx b/apps/studio/pages/project/[ref]/storage/files/settings.tsx
index e298a78a4ea..70d1c4a6c9a 100644
--- a/apps/studio/pages/project/[ref]/storage/files/settings.tsx
+++ b/apps/studio/pages/project/[ref]/storage/files/settings.tsx
@@ -1,5 +1,5 @@
import { StorageSettings } from '@/components/interfaces/Storage/StorageSettings/StorageSettings'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { StorageBucketsLayout } from '@/components/layouts/StorageLayout/StorageBucketsLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/[ref]/storage/s3.tsx b/apps/studio/pages/project/[ref]/storage/s3.tsx
index e57a666a5d5..95d64f00273 100644
--- a/apps/studio/pages/project/[ref]/storage/s3.tsx
+++ b/apps/studio/pages/project/[ref]/storage/s3.tsx
@@ -1,5 +1,5 @@
import { S3Connection } from '@/components/interfaces/Storage/StorageSettings/S3Connection'
-import DefaultLayout from '@/components/layouts/DefaultLayout'
+import { DefaultLayout } from '@/components/layouts/DefaultLayout'
import { StorageBucketsLayout } from '@/components/layouts/StorageLayout/StorageBucketsLayout'
import StorageLayout from '@/components/layouts/StorageLayout/StorageLayout'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/pages/project/_/[[...routeSlug]].tsx b/apps/studio/pages/project/_/[[...routeSlug]].tsx
index 61b83ea75e0..0f276e9fd7e 100644
--- a/apps/studio/pages/project/_/[[...routeSlug]].tsx
+++ b/apps/studio/pages/project/_/[[...routeSlug]].tsx
@@ -13,8 +13,9 @@ import {
SelectTrigger,
SelectValue,
} from 'ui'
-import { ShimmeringLoader } from 'ui-patterns'
+import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
+import { parseCatchAllRoute } from '@/compat/next/router'
import {
Header,
LoadingCardView,
@@ -35,7 +36,10 @@ import { withAuth } from '@/hooks/misc/withAuth'
const GenericProjectPage: NextPage = () => {
const router = useRouter()
const { slug } = useParams()
- const { routeSlug, ...queryParams } = router.query
+ // Normalise the catch-all path across Next (`routeSlug: string[]`) and
+ // TanStack (`_splat: string`) so downstream URL building
+ // (urlRewriterFactory) keeps working — see parseCatchAllRoute.
+ const { segments: routeSlug, queryParams } = parseCatchAllRoute(router.query, 'routeSlug')
const { lastVisitedOrganization } = useLastVisitedOrganization()
diff --git a/apps/studio/pages/sign-in-mfa.tsx b/apps/studio/pages/sign-in-mfa.tsx
index 85a1f9dc1b6..44942650d91 100644
--- a/apps/studio/pages/sign-in-mfa.tsx
+++ b/apps/studio/pages/sign-in-mfa.tsx
@@ -9,7 +9,7 @@ import { LogoLoader } from 'ui'
import { SignInMfaForm } from '@/components/interfaces/SignIn/SignInMfaForm'
import { SignInLayout } from '@/components/layouts/SignInLayout/SignInLayout'
import { useAddLoginEvent } from '@/data/misc/audit-login-mutation'
-import useLatest from '@/hooks/misc/useLatest'
+import { useLatest } from '@/hooks/misc/useLatest'
import { auth, buildPathWithParams, getReturnToPath } from '@/lib/gotrue'
import { useTrack } from '@/lib/telemetry/track'
import type { NextPageWithLayout } from '@/types'
diff --git a/apps/studio/proxy.ts b/apps/studio/proxy.ts
index 2ca590998b7..cfb19146dfe 100644
--- a/apps/studio/proxy.ts
+++ b/apps/studio/proxy.ts
@@ -1,44 +1,17 @@
import type { NextRequest } from 'next/server'
import { IS_PLATFORM } from '@/lib/constants'
+import { isHostedSupportedApiPath } from '@/lib/hosted-api-allowlist'
export const config = {
matcher: '/api/:function*',
}
-// [Joshen] Return 404 for all next.js API endpoints EXCEPT the ones we use in hosted:
-const HOSTED_SUPPORTED_API_URLS = [
- '/ai/sql/generate-v4',
- '/ai/sql/policy',
- '/ai/feedback/rate',
- '/ai/code/complete',
- '/ai/sql/cron-v2',
- '/ai/sql/title-v2',
- '/ai/sql/filter-v1',
- '/ai/onboarding/design',
- '/ai/feedback/classify',
- '/ai/docs',
- '/ai/sql/parse-client-code',
- '/get-ip-address',
- '/get-utc-time',
- '/get-deployment-commit',
- '/check-cname',
- '/edge-functions/test',
- '/edge-functions/body',
- '/generate-attachment-url',
- '/incident-status',
- '/incident-banner',
- '/status-override',
- '/api/integrations/stripe-sync',
- '/content/graphql',
- '/parse-query',
-]
-
+// Return 404 for all next.js API endpoints EXCEPT the ones we use in hosted.
+// The allowlist is shared with the TanStack guard (start.ts) — see
+// lib/hosted-api-allowlist.ts.
export function proxy(request: NextRequest) {
- if (
- IS_PLATFORM &&
- !HOSTED_SUPPORTED_API_URLS.some((url) => request.nextUrl.pathname.endsWith(url))
- ) {
+ if (IS_PLATFORM && !isHostedSupportedApiPath(request.nextUrl.pathname)) {
return Response.json(
{ success: false, message: 'Endpoint not supported on hosted' },
{ status: 404 }
diff --git a/apps/studio/public/img/icons/claude-icon.svg b/apps/studio/public/img/icons/claude-icon.svg
deleted file mode 100644
index 113e9f58d6d..00000000000
--- a/apps/studio/public/img/icons/claude-icon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" fill="#000"/>
-<g transform="translate(4.8 4.8) scale(0.6)">
-<path d="M5.92381 15.2988L9.85798 13.0912L9.92381 12.8988L9.85798 12.7924H9.66558L9.00735 12.7519L6.75925 12.6912L4.80988 12.6102L2.92127 12.5089L2.44533 12.4076L1.99976 11.8203L2.04533 11.5266L2.44533 11.2583L3.01748 11.3089L4.2833 11.395L6.18203 11.5266L7.55925 11.6076L9.59976 11.8203H9.92381L9.96938 11.6886L9.85798 11.6076L9.77191 11.5266L7.80735 10.195L5.68077 8.78737L4.56684 7.97724L3.96431 7.56711L3.66052 7.1823L3.52887 6.3418L4.07571 5.73927L4.80988 5.7899L4.99722 5.84053L5.74153 6.41268L7.3314 7.64306L9.40735 9.17218L9.71115 9.42534L9.83267 9.33927L9.84786 9.27851L9.71115 9.05066L8.58203 7.01015L7.37697 4.9342L6.84026 4.07344L6.69849 3.55699C6.64786 3.34433 6.61241 3.16712 6.61241 2.94939L7.2352 2.10382L7.5795 1.99243L8.40988 2.10382L8.75925 2.40762L9.27571 3.58737L10.1111 5.4456L11.4074 7.97218L11.7871 8.72154L11.9896 9.41522L12.0656 9.62787H12.1972V9.50635L12.3036 8.08357L12.501 6.33673L12.6934 4.08863L12.7592 3.45572L13.0732 2.69623L13.696 2.2861L14.182 2.51901L14.582 3.09117L14.5263 3.46079L14.2884 5.00509L13.8225 7.42534L13.5187 9.0456H13.696L13.8985 8.84306L14.7187 7.75446L16.096 6.03294L16.7036 5.34939L17.4124 4.59496L17.8681 4.23547H18.7289L19.3618 5.17724L19.0782 6.14939L18.1922 7.27344L17.458 8.22534L16.4048 9.64306L15.7466 10.7772L15.8074 10.8684L15.9643 10.8532L18.3441 10.3469L19.6301 10.114L21.1643 9.85066L21.858 10.1747L21.9339 10.5038L21.6605 11.1772L20.02 11.5823L18.096 11.9671L15.2301 12.6456L15.1947 12.6709L15.2352 12.7215L16.5263 12.8431L17.0782 12.8734H18.4301L20.9466 13.0608L21.6048 13.4962L21.9998 14.0279L21.9339 14.4329L20.9213 14.9494L19.5542 14.6253L16.3643 13.8658L15.2706 13.5924H15.1187V13.6836L16.0301 14.5747L17.701 16.0836L19.7922 18.0279L19.8985 18.5089L19.6301 18.8886L19.3466 18.8481L17.5086 17.4658L16.7998 16.8431L15.1947 15.4912H15.0884V15.6329L15.458 16.1747L17.4124 19.1114L17.5137 20.0127L17.3719 20.3064L16.8656 20.4836L16.3086 20.3823L15.1643 18.7772L13.9846 16.9696L13.0327 15.3494L12.9162 15.4152L12.3542 21.4658L12.0909 21.7747L11.4833 22.0076L10.977 21.6228L10.7086 21L10.977 19.7696L11.301 18.1646L11.5643 16.8886L11.8023 15.3038L11.9441 14.7772L11.9339 14.7418L11.8175 14.757L10.6225 16.3975L8.80482 18.8532L7.36684 20.3924L7.02254 20.5291L6.42507 20.2203L6.48077 19.6684L6.81495 19.1772L8.80482 16.6456L10.0048 15.076L10.7795 14.1696L10.7744 14.038H10.7289L5.44279 17.4709L4.50102 17.5924L4.09596 17.2127L4.14659 16.5899L4.339 16.3874L5.92887 15.2937L5.92381 15.2988Z" fill="#D97757"/>
-</g>
-</svg>
diff --git a/apps/studio/public/img/icons/cursor-icon.svg b/apps/studio/public/img/icons/cursor-icon.svg
deleted file mode 100644
index a73aa16db10..00000000000
--- a/apps/studio/public/img/icons/cursor-icon.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2001_474)">
-<rect width="28" height="28" fill="black"/>
-<rect x="-0.5" y="-0.5" width="29" height="29" stroke="black" stroke-opacity="0.13"/>
-<path d="M22.6411 8.85702L14.4263 4.11425C14.1625 3.96192 13.837 3.96192 13.5732 4.11425L5.35878 8.85702C5.13703 8.98505 5.00012 9.22183 5.00012 9.47829V19.0421C5.00012 19.2982 5.13703 19.5354 5.35878 19.6634L13.5736 24.4062C13.8374 24.5585 14.1629 24.5585 14.4267 24.4062L22.6414 19.6634C22.8632 19.5354 23.0001 19.2986 23.0001 19.0421V9.47829C23.0001 9.22222 22.8632 8.98505 22.6414 8.85702H22.6411ZM22.1251 9.86164L14.1949 23.5971C14.1413 23.6896 13.9997 23.6518 13.9997 23.5446V14.5508C13.9997 14.3711 13.9037 14.2049 13.7479 14.1146L5.95924 9.61791C5.86669 9.56431 5.90448 9.42275 6.01169 9.42275H21.8721C22.0973 9.42275 22.2381 9.66688 22.1254 9.86204H22.1251V9.86164Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_2001_474">
-<rect width="28" height="28" rx="6" fill="white"/>
-</clipPath>
-</defs>
-</svg>
\ No newline at end of file
diff --git a/apps/studio/public/img/icons/openai-icon.svg b/apps/studio/public/img/icons/openai-icon.svg
deleted file mode 100644
index da774aeaf5e..00000000000
--- a/apps/studio/public/img/icons/openai-icon.svg
+++ /dev/null
@@ -1,2 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>OpenAI icon {g({})},i=>{typeof g.error=="function"&&g.error("Could not find "+t+".")})}e.load=S;function k(b,C,g,m){if(y(b,C)){g();return}D(b,C,g,m)}function y(b,C){const g=document.getElementsByTagName("link");for(let m=0,n=g.length;m{C.removeEventListener("load",t),C.removeEventListener("error",i)},t=s=>{n(),g()},i=s=>{n(),m(s)};C.addEventListener("load",t),C.addEventListener("error",i)}});var Ee=this&&this.__awaiter||function(j,e,S,k){function y(D){return D instanceof S?D:new S(function(w){w(D)})}return new(S||(S=Promise))(function(D,w){function b(m){try{g(k.next(m))}catch(n){w(n)}}function C(m){try{g(k.throw(m))}catch(n){w(n)}}function g(m){m.done?D(m.value):y(m.value).then(b,C)}g((k=k.apply(j,e||[])).next())})};define(X[3],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.load=e.create=e.setPseudoTranslation=e.getConfiguredDefaultLocale=e.localize=void 0;let S=typeof document<"u"&&document.location&&document.location.hash.indexOf("pseudo=true")>=0;const k="i-default";function y(s,a){let c;return a.length===0?c=s:c=s.replace(/\{(\d+)\}/g,(h,o)=>{const l=o[0],r=a[l];let d=h;return typeof r=="string"?d=r:(typeof r=="number"||typeof r=="boolean"||r===void 0||r===null)&&(d=String(r)),d}),S&&(c="\uFF3B"+c.replace(/[aouei]/g,"$&$&")+"\uFF3D"),c}function D(s,a){let c=s[a];return c||(c=s["*"],c)?c:null}function w(s){return s.charAt(s.length-1)==="/"?s:s+"/"}function b(s,a,c){return Ee(this,void 0,void 0,function*(){const h=w(s)+w(a)+"vscode/"+w(c),o=yield fetch(h);if(o.ok)return yield o.json();throw new Error(`${o.status} - ${o.statusText}`)})}function C(s){return function(a,c){const h=Array.prototype.slice.call(arguments,2);return y(s[a],h)}}function g(s,a,...c){return y(a,c)}e.localize=g;function m(s){}e.getConfiguredDefaultLocale=m;function n(s){S=s}e.setPseudoTranslation=n;function t(s,a){var c;return{localize:C(a[s]),getConfiguredDefaultLocale:(c=a.getConfiguredDefaultLocale)!==null&&c!==void 0?c:h=>{}}}e.create=t;function i(s,a,c,h){var o;const l=(o=h["vs/nls"])!==null&&o!==void 0?o:{};if(!s||s.length===0)return c({localize:g,getConfiguredDefaultLocale:()=>{var f;return(f=l.availableLanguages)===null||f===void 0?void 0:f["*"]}});const r=l.availableLanguages?D(l.availableLanguages,s):null,d=r===null||r===k;let u=".nls";d||(u=u+"."+r);const _=f=>{Array.isArray(f)?f.localize=C(f):f.localize=C(f[s]),f.getConfiguredDefaultLocale=()=>{var v;return(v=l.availableLanguages)===null||v===void 0?void 0:v["*"]},c(f)};typeof l.loadBundle=="function"?l.loadBundle(s,r,(f,v)=>{f?a([s+".nls"],_):_(v)}):l.translationServiceUrl&&!d?Ee(this,void 0,void 0,function*(){var f;try{const v=yield b(l.translationServiceUrl,r,s);return _(v)}catch(v){if(!r.includes("-"))return console.error(v),a([s+".nls"],_);try{const p=r.split("-")[0],L=yield b(l.translationServiceUrl,p,s);return(f=l.availableLanguages)!==null&&f!==void 0||(l.availableLanguages={}),l.availableLanguages["*"]=p,_(L)}catch(p){return console.error(p),a([s+".nls"],_)}}}):a([s+u],_,f=>{if(u===".nls"){console.error("Failed trying to load default language strings",f);return}console.error(`Failed to load message bundle for language ${r}. Falling back to the default language:`,f),a([s+".nls"],_)})}e.load=i});/*! @license DOMPurify 2.3.1 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.1/LICENSE */function un(j){if(Array.isArray(j)){for(var e=0,S=Array(j.length);e1?S-1:0),y=1;y/gm),En=bt(/^data-[\-\w.\u00B7-\uFFFF]/),Dn=bt(/^aria-[\-\w]+$/),In=bt(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),kn=bt(/^(?:\w+script|data):/i),Tn=bt(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),Ot=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(j){return typeof j}:function(j){return j&&typeof Symbol=="function"&&j.constructor===Symbol&&j!==Symbol.prototype?"symbol":typeof j};function pt(j){if(Array.isArray(j)){for(var e=0,S=Array(j.length);e"u"?null:window},Mn=function(e,S){if((typeof e>"u"?"undefined":Ot(e))!=="object"||typeof e.createPolicy!="function")return null;var k=null,y="data-tt-policy-suffix";S.currentScript&&S.currentScript.hasAttribute(y)&&(k=S.currentScript.getAttribute(y));var D="dompurify"+(k?"#"+k:"");try{return e.createPolicy(D,{createHTML:function(b){return b}})}catch{return console.warn("TrustedTypes policy "+D+" could not be created."),null}};function Ai(){var j=arguments.length>0&&arguments[0]!==void 0?arguments[0]:Nn(),e=function(Me){return Ai(Me)};if(e.version="2.3.1",e.removed=[],!j||!j.document||j.document.nodeType!==9)return e.isSupported=!1,e;var S=j.document,k=j.document,y=j.DocumentFragment,D=j.HTMLTemplateElement,w=j.Node,b=j.Element,C=j.NodeFilter,g=j.NamedNodeMap,m=g===void 0?j.NamedNodeMap||j.MozNamedAttrMap:g,n=j.Text,t=j.Comment,i=j.DOMParser,s=j.trustedTypes,a=b.prototype,c=Ut(a,"cloneNode"),h=Ut(a,"nextSibling"),o=Ut(a,"childNodes"),l=Ut(a,"parentNode");if(typeof D=="function"){var r=k.createElement("template");r.content&&r.content.ownerDocument&&(k=r.content.ownerDocument)}var d=Mn(s,S),u=d&&he?d.createHTML(""):"",_=k,f=_.implementation,v=_.createNodeIterator,p=_.createDocumentFragment,L=_.getElementsByTagName,E=S.importNode,I={};try{I=It(k).documentMode?k.documentMode:{}}catch{}var T={};e.isSupported=typeof l=="function"&&f&&typeof f.createHTMLDocument<"u"&&I!==9;var F=Ln,R=yn,M=En,N=Dn,A=kn,P=Tn,x=In,W=null,U=et({},[].concat(pt(ki),pt(ti),pt(ii),pt(ni),pt(Ti))),O=null,$=et({},[].concat(pt(Ni),pt(si),pt(Mi),pt(Kt))),Q=null,se=null,le=!0,te=!0,re=!1,H=!1,B=!1,q=!1,G=!1,Y=!1,ne=!1,de=!0,he=!1,oe=!0,ce=!0,z=!1,V={},K=null,ie=et({},["annotation-xml","audio","colgroup","desc","foreignobject","head","iframe","math","mi","mn","mo","ms","mtext","noembed","noframes","noscript","plaintext","script","style","svg","template","thead","title","video","xmp"]),ee=null,Z=et({},["audio","video","img","source","image","track"]),ue=null,me=et({},["alt","class","for","id","label","name","pattern","placeholder","role","summary","title","value","style","xmlns"]),Ce="http://www.w3.org/1998/Math/MathML",_e="http://www.w3.org/2000/svg",we="http://www.w3.org/1999/xhtml",ye=we,ke=!1,De=null,ge=k.createElement("form"),pe=function(Me){De&&De===Me||((!Me||(typeof Me>"u"?"undefined":Ot(Me))!=="object")&&(Me={}),Me=It(Me),W="ALLOWED_TAGS"in Me?et({},Me.ALLOWED_TAGS):U,O="ALLOWED_ATTR"in Me?et({},Me.ALLOWED_ATTR):$,ue="ADD_URI_SAFE_ATTR"in Me?et(It(me),Me.ADD_URI_SAFE_ATTR):me,ee="ADD_DATA_URI_TAGS"in Me?et(It(Z),Me.ADD_DATA_URI_TAGS):Z,K="FORBID_CONTENTS"in Me?et({},Me.FORBID_CONTENTS):ie,Q="FORBID_TAGS"in Me?et({},Me.FORBID_TAGS):{},se="FORBID_ATTR"in Me?et({},Me.FORBID_ATTR):{},V="USE_PROFILES"in Me?Me.USE_PROFILES:!1,le=Me.ALLOW_ARIA_ATTR!==!1,te=Me.ALLOW_DATA_ATTR!==!1,re=Me.ALLOW_UNKNOWN_PROTOCOLS||!1,H=Me.SAFE_FOR_TEMPLATES||!1,B=Me.WHOLE_DOCUMENT||!1,Y=Me.RETURN_DOM||!1,ne=Me.RETURN_DOM_FRAGMENT||!1,de=Me.RETURN_DOM_IMPORT!==!1,he=Me.RETURN_TRUSTED_TYPE||!1,G=Me.FORCE_BODY||!1,oe=Me.SANITIZE_DOM!==!1,ce=Me.KEEP_CONTENT!==!1,z=Me.IN_PLACE||!1,x=Me.ALLOWED_URI_REGEXP||x,ye=Me.NAMESPACE||we,H&&(te=!1),ne&&(Y=!0),V&&(W=et({},[].concat(pt(Ti))),O=[],V.html===!0&&(et(W,ki),et(O,Ni)),V.svg===!0&&(et(W,ti),et(O,si),et(O,Kt)),V.svgFilters===!0&&(et(W,ii),et(O,si),et(O,Kt)),V.mathMl===!0&&(et(W,ni),et(O,Mi),et(O,Kt))),Me.ADD_TAGS&&(W===U&&(W=It(W)),et(W,Me.ADD_TAGS)),Me.ADD_ATTR&&(O===$&&(O=It(O)),et(O,Me.ADD_ATTR)),Me.ADD_URI_SAFE_ATTR&&et(ue,Me.ADD_URI_SAFE_ATTR),Me.FORBID_CONTENTS&&(K===ie&&(K=It(K)),et(K,Me.FORBID_CONTENTS)),ce&&(W["#text"]=!0),B&&et(W,["html","head","body"]),W.table&&(et(W,["tbody"]),delete Q.tbody),ft&&ft(Me),De=Me)},ae=et({},["mi","mo","mn","ms","mtext"]),ve=et({},["foreignobject","desc","title","annotation-xml"]),Le=et({},ti);et(Le,ii),et(Le,Sn);var Ie=et({},ni);et(Ie,wn);var Ae=function(Me){var Be=l(Me);(!Be||!Be.tagName)&&(Be={namespaceURI:we,tagName:"template"});var We=Dt(Me.tagName),$e=Dt(Be.tagName);if(Me.namespaceURI===_e)return Be.namespaceURI===we?We==="svg":Be.namespaceURI===Ce?We==="svg"&&($e==="annotation-xml"||ae[$e]):Boolean(Le[We]);if(Me.namespaceURI===Ce)return Be.namespaceURI===we?We==="math":Be.namespaceURI===_e?We==="math"&&ve[$e]:Boolean(Ie[We]);if(Me.namespaceURI===we){if(Be.namespaceURI===_e&&!ve[$e]||Be.namespaceURI===Ce&&!ae[$e])return!1;var Ue=et({},["title","style","font","a","script"]);return!Ie[We]&&(Ue[We]||!Le[We])}return!1},be=function(Me){Rt(e.removed,{element:Me});try{Me.parentNode.removeChild(Me)}catch{try{Me.outerHTML=u}catch{Me.remove()}}},Se=function(Me,Be){try{Rt(e.removed,{attribute:Be.getAttributeNode(Me),from:Be})}catch{Rt(e.removed,{attribute:null,from:Be})}if(Be.removeAttribute(Me),Me==="is"&&!O[Me])if(Y||ne)try{be(Be)}catch{}else try{Be.setAttribute(Me,"")}catch{}},Te=function(Me){var Be=void 0,We=void 0;if(G)Me="=0;--Je)$e.insertBefore(c(Ue[Je],!0),h(Me))}return be(Me),!0}return Me instanceof b&&!Ae(Me)||(We==="noscript"||We==="noembed")&&_t(/<\/no(script|embed)/i,Me.innerHTML)?(be(Me),!0):(H&&Me.nodeType===3&&(Be=Me.textContent,Be=Lt(Be,F," "),Be=Lt(Be,R," "),Me.textContent!==Be&&(Rt(e.removed,{element:Me.cloneNode()}),Me.textContent=Be)),xe("afterSanitizeElements",Me,null),!1)},Ye=function(Me,Be,We){if(oe&&(Be==="id"||Be==="name")&&(We in k||We in ge))return!1;if(!(te&&!se[Be]&&_t(M,Be))){if(!(le&&_t(N,Be))){if(!O[Be]||se[Be])return!1;if(!ue[Be]){if(!_t(x,Lt(We,P,""))){if(!((Be==="src"||Be==="xlink:href"||Be==="href")&&Me!=="script"&&Cn(We,"data:")===0&&ee[Me])){if(!(re&&!_t(A,Lt(We,P,"")))){if(We)return!1}}}}}}return!0},qe=function(Me){var Be=void 0,We=void 0,$e=void 0,Ue=void 0;xe("beforeSanitizeAttributes",Me,null);var Xe=Me.attributes;if(!!Xe){var Je={attrName:"",attrValue:"",keepAttr:!0,allowedAttributes:O};for(Ue=Xe.length;Ue--;){Be=Xe[Ue];var nt=Be,dt=nt.name,Ge=nt.namespaceURI;if(We=bn(Be.value),$e=Dt(dt),Je.attrName=$e,Je.attrValue=We,Je.keepAttr=!0,Je.forceKeepAttr=void 0,xe("uponSanitizeAttribute",Me,Je),We=Je.attrValue,!Je.forceKeepAttr&&(Se(dt,Me),!!Je.keepAttr)){if(_t(/\/>/i,We)){Se(dt,Me);continue}H&&(We=Lt(We,F," "),We=Lt(We,R," "));var lt=Me.nodeName.toLowerCase();if(!!Ye(lt,$e,We))try{Ge?Me.setAttributeNS(Ge,dt,We):Me.setAttribute(dt,We),Ei(e.removed)}catch{}}}xe("afterSanitizeAttributes",Me,null)}},st=function Ve(Me){var Be=void 0,We=Pe(Me);for(xe("beforeSanitizeShadowDOM",Me,null);Be=We.nextNode();)xe("uponSanitizeShadowNode",Be,null),!Ke(Be)&&(Be.content instanceof y&&Ve(Be.content),qe(Be));xe("afterSanitizeShadowDOM",Me,null)};return e.sanitize=function(Ve,Me){var Be=void 0,We=void 0,$e=void 0,Ue=void 0,Xe=void 0;if(ke=!Ve,ke&&(Ve=""),typeof Ve!="string"&&!Oe(Ve)){if(typeof Ve.toString!="function")throw Ii("toString is not a function");if(Ve=Ve.toString(),typeof Ve!="string")throw Ii("dirty is not a string, aborting")}if(!e.isSupported){if(Ot(j.toStaticHTML)==="object"||typeof j.toStaticHTML=="function"){if(typeof Ve=="string")return j.toStaticHTML(Ve);if(Oe(Ve))return j.toStaticHTML(Ve.outerHTML)}return Ve}if(q||pe(Me),e.removed=[],typeof Ve=="string"&&(z=!1),!z)if(Ve instanceof w)Be=Te(""),We=Be.ownerDocument.importNode(Ve,!0),We.nodeType===1&&We.nodeName==="BODY"||We.nodeName==="HTML"?Be=We:Be.appendChild(We);else{if(!Y&&!H&&!B&&Ve.indexOf("<")===-1)return d&&he?d.createHTML(Ve):Ve;if(Be=Te(Ve),!Be)return Y?null:u}Be&&G&&be(Be.firstChild);for(var Je=Pe(z?Ve:Be);$e=Je.nextNode();)$e.nodeType===3&&$e===Ue||Ke($e)||($e.content instanceof y&&st($e.content),qe($e),Ue=$e);if(Ue=null,z)return Ve;if(Y){if(ne)for(Xe=p.call(Be.ownerDocument);Be.firstChild;)Xe.appendChild(Be.firstChild);else Xe=Be;return de&&(Xe=E.call(S,Xe,!0)),Xe}var nt=B?Be.outerHTML:Be.innerHTML;return H&&(nt=Lt(nt,F," "),nt=Lt(nt,R," ")),d&&he?d.createHTML(nt):nt},e.setConfig=function(Ve){pe(Ve),q=!0},e.clearConfig=function(){De=null,q=!1},e.isValidAttribute=function(Ve,Me,Be){De||pe({});var We=Dt(Ve),$e=Dt(Me);return Ye(We,$e,Be)},e.addHook=function(Ve,Me){typeof Me=="function"&&(T[Ve]=T[Ve]||[],Rt(T[Ve],Me))},e.removeHook=function(Ve){T[Ve]&&Ei(T[Ve])},e.removeHooks=function(Ve){T[Ve]&&(T[Ve]=[])},e.removeAllHooks=function(){T={}},e}var An=Ai();define("vs/base/browser/dompurify/dompurify",function(){return An}),define(X[35],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.createFastDomNode=e.FastDomNode=void 0;class S{constructor(w){this.domNode=w,this._maxWidth="",this._width="",this._height="",this._top="",this._left="",this._bottom="",this._right="",this._paddingLeft="",this._fontFamily="",this._fontWeight="",this._fontSize="",this._fontStyle="",this._fontFeatureSettings="",this._fontVariationSettings="",this._textDecoration="",this._lineHeight="",this._letterSpacing="",this._className="",this._display="",this._position="",this._visibility="",this._color="",this._backgroundColor="",this._layerHint=!1,this._contain="none",this._boxShadow=""}setMaxWidth(w){const b=k(w);this._maxWidth!==b&&(this._maxWidth=b,this.domNode.style.maxWidth=this._maxWidth)}setWidth(w){const b=k(w);this._width!==b&&(this._width=b,this.domNode.style.width=this._width)}setHeight(w){const b=k(w);this._height!==b&&(this._height=b,this.domNode.style.height=this._height)}setTop(w){const b=k(w);this._top!==b&&(this._top=b,this.domNode.style.top=this._top)}setLeft(w){const b=k(w);this._left!==b&&(this._left=b,this.domNode.style.left=this._left)}setBottom(w){const b=k(w);this._bottom!==b&&(this._bottom=b,this.domNode.style.bottom=this._bottom)}setRight(w){const b=k(w);this._right!==b&&(this._right=b,this.domNode.style.right=this._right)}setPaddingLeft(w){const b=k(w);this._paddingLeft!==b&&(this._paddingLeft=b,this.domNode.style.paddingLeft=this._paddingLeft)}setFontFamily(w){this._fontFamily!==w&&(this._fontFamily=w,this.domNode.style.fontFamily=this._fontFamily)}setFontWeight(w){this._fontWeight!==w&&(this._fontWeight=w,this.domNode.style.fontWeight=this._fontWeight)}setFontSize(w){const b=k(w);this._fontSize!==b&&(this._fontSize=b,this.domNode.style.fontSize=this._fontSize)}setFontStyle(w){this._fontStyle!==w&&(this._fontStyle=w,this.domNode.style.fontStyle=this._fontStyle)}setFontFeatureSettings(w){this._fontFeatureSettings!==w&&(this._fontFeatureSettings=w,this.domNode.style.fontFeatureSettings=this._fontFeatureSettings)}setFontVariationSettings(w){this._fontVariationSettings!==w&&(this._fontVariationSettings=w,this.domNode.style.fontVariationSettings=this._fontVariationSettings)}setTextDecoration(w){this._textDecoration!==w&&(this._textDecoration=w,this.domNode.style.textDecoration=this._textDecoration)}setLineHeight(w){const b=k(w);this._lineHeight!==b&&(this._lineHeight=b,this.domNode.style.lineHeight=this._lineHeight)}setLetterSpacing(w){const b=k(w);this._letterSpacing!==b&&(this._letterSpacing=b,this.domNode.style.letterSpacing=this._letterSpacing)}setClassName(w){this._className!==w&&(this._className=w,this.domNode.className=this._className)}toggleClassName(w,b){this.domNode.classList.toggle(w,b),this._className=this.domNode.className}setDisplay(w){this._display!==w&&(this._display=w,this.domNode.style.display=this._display)}setPosition(w){this._position!==w&&(this._position=w,this.domNode.style.position=this._position)}setVisibility(w){this._visibility!==w&&(this._visibility=w,this.domNode.style.visibility=this._visibility)}setColor(w){this._color!==w&&(this._color=w,this.domNode.style.color=this._color)}setBackgroundColor(w){this._backgroundColor!==w&&(this._backgroundColor=w,this.domNode.style.backgroundColor=this._backgroundColor)}setLayerHinting(w){this._layerHint!==w&&(this._layerHint=w,this.domNode.style.transform=this._layerHint?"translate3d(0px, 0px, 0px)":"")}setBoxShadow(w){this._boxShadow!==w&&(this._boxShadow=w,this.domNode.style.boxShadow=w)}setContain(w){this._contain!==w&&(this._contain=w,this.domNode.style.contain=this._contain)}setAttribute(w,b){this.domNode.setAttribute(w,b)}removeAttribute(w){this.domNode.removeAttribute(w)}appendChild(w){this.domNode.appendChild(w.domNode)}removeChild(w){this.domNode.removeChild(w.domNode)}}e.FastDomNode=S;function k(D){return typeof D=="number"?`${D}px`:D}function y(D){return new S(D)}e.createFastDomNode=y}),define(X[351],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.IframeUtils=void 0;let S=!1,k=null;function y(w){if(!w.parent||w.parent===w)return null;try{const b=w.location,C=w.parent.location;if(b.origin!=="null"&&C.origin!=="null"&&b.origin!==C.origin)return S=!0,null}catch{return S=!0,null}return w.parent}class D{static getSameOriginWindowChain(){if(!k){k=[];let b=window,C;do C=y(b),C?k.push({window:b,iframeElement:b.frameElement||null}):k.push({window:b,iframeElement:null}),b=C;while(b)}return k.slice(0)}static getPositionOfChildWindowRelativeToAncestorWindow(b,C){if(!C||b===C)return{top:0,left:0};let g=0,m=0;const n=this.getSameOriginWindowChain();for(const t of n){if(g+=t.window.scrollY,m+=t.window.scrollX,t.window===C||!t.iframeElement)break;const i=t.iframeElement.getBoundingClientRect();g+=i.top,m+=i.left}return{top:g,left:m}}}e.IframeUtils=D}),define(X[242],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.inputLatency=void 0;var S;(function(k){const y={total:0,min:Number.MAX_VALUE,max:0},D=Object.assign({},y),w=Object.assign({},y),b=Object.assign({},y);let C=0;const g={keydown:0,input:0,render:0};function m(){r(),performance.mark("inputlatency/start"),performance.mark("keydown/start"),g.keydown=1,queueMicrotask(n)}k.onKeyDown=m;function n(){g.keydown===1&&(performance.mark("keydown/end"),g.keydown=2)}function t(){performance.mark("input/start"),g.input=1,l()}k.onBeforeInput=t;function i(){g.input===0&&t(),queueMicrotask(s)}k.onInput=i;function s(){g.input===1&&(performance.mark("input/end"),g.input=2)}function a(){r()}k.onKeyUp=a;function c(){r()}k.onSelectionChange=c;function h(){g.keydown===2&&g.input===2&&g.render===0&&(performance.mark("render/start"),g.render=1,queueMicrotask(o),l())}k.onRenderStart=h;function o(){g.render===1&&(performance.mark("render/end"),g.render=2)}function l(){setTimeout(r)}function r(){g.keydown===2&&g.input===2&&g.render===2&&(performance.mark("inputlatency/end"),performance.measure("keydown","keydown/start","keydown/end"),performance.measure("input","input/start","input/end"),performance.measure("render","render/start","render/end"),performance.measure("inputlatency","inputlatency/start","inputlatency/end"),d("keydown",y),d("input",D),d("render",w),d("inputlatency",b),C++,u())}function d(p,L){const E=performance.getEntriesByName(p)[0].duration;L.total+=E,L.min=Math.min(L.min,E),L.max=Math.max(L.max,E)}function u(){performance.clearMarks("keydown/start"),performance.clearMarks("keydown/end"),performance.clearMarks("input/start"),performance.clearMarks("input/end"),performance.clearMarks("render/start"),performance.clearMarks("render/end"),performance.clearMarks("inputlatency/start"),performance.clearMarks("inputlatency/end"),performance.clearMeasures("keydown"),performance.clearMeasures("input"),performance.clearMeasures("render"),performance.clearMeasures("inputlatency"),g.keydown=0,g.input=0,g.render=0}function _(){if(C===0)return;const p={keydown:f(y),input:f(D),render:f(w),total:f(b),sampleCount:C};return v(y),v(D),v(w),v(b),C=0,p}k.getAndClearMeasurements=_;function f(p){return{average:p.total/C,max:p.max,min:p.min}}function v(p){p.total=0,p.min=Number.MAX_VALUE,p.max=0}})(S=e.inputLatency||(e.inputLatency={}))}),define(X[352],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ListError=void 0;class S extends Error{constructor(y,D){super(`ListError [${y}] ${D}`)}}e.ListError=S}),define(X[353],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CombinedSpliceable=void 0;class S{constructor(y){this.spliceables=y}splice(y,D,w){this.spliceables.forEach(b=>b.splice(y,D,w))}}e.CombinedSpliceable=S}),define(X[243],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollbarState=void 0;const S=20;class k{constructor(D,w,b,C,g,m){this._scrollbarSize=Math.round(w),this._oppositeScrollbarSize=Math.round(b),this._arrowSize=Math.round(D),this._visibleSize=C,this._scrollSize=g,this._scrollPosition=m,this._computedAvailableSize=0,this._computedIsNeeded=!1,this._computedSliderSize=0,this._computedSliderRatio=0,this._computedSliderPosition=0,this._refreshComputedValues()}clone(){return new k(this._arrowSize,this._scrollbarSize,this._oppositeScrollbarSize,this._visibleSize,this._scrollSize,this._scrollPosition)}setVisibleSize(D){const w=Math.round(D);return this._visibleSize!==w?(this._visibleSize=w,this._refreshComputedValues(),!0):!1}setScrollSize(D){const w=Math.round(D);return this._scrollSize!==w?(this._scrollSize=w,this._refreshComputedValues(),!0):!1}setScrollPosition(D){const w=Math.round(D);return this._scrollPosition!==w?(this._scrollPosition=w,this._refreshComputedValues(),!0):!1}setScrollbarSize(D){this._scrollbarSize=Math.round(D)}setOppositeScrollbarSize(D){this._oppositeScrollbarSize=Math.round(D)}static _computeValues(D,w,b,C,g){const m=Math.max(0,b-D),n=Math.max(0,m-2*w),t=C>0&&C>b;if(!t)return{computedAvailableSize:Math.round(m),computedIsNeeded:t,computedSliderSize:Math.round(n),computedSliderRatio:0,computedSliderPosition:0};const i=Math.round(Math.max(S,Math.floor(b*n/C))),s=(n-i)/(C-b),a=g*s;return{computedAvailableSize:Math.round(m),computedIsNeeded:t,computedSliderSize:Math.round(i),computedSliderRatio:s,computedSliderPosition:Math.round(a)}}_refreshComputedValues(){const D=k._computeValues(this._oppositeScrollbarSize,this._arrowSize,this._visibleSize,this._scrollSize,this._scrollPosition);this._computedAvailableSize=D.computedAvailableSize,this._computedIsNeeded=D.computedIsNeeded,this._computedSliderSize=D.computedSliderSize,this._computedSliderRatio=D.computedSliderRatio,this._computedSliderPosition=D.computedSliderPosition}getArrowSize(){return this._arrowSize}getScrollPosition(){return this._scrollPosition}getRectangleLargeSize(){return this._computedAvailableSize}getRectangleSmallSize(){return this._scrollbarSize}isNeeded(){return this._computedIsNeeded}getSliderSize(){return this._computedSliderSize}getSliderPosition(){return this._computedSliderPosition}getDesiredScrollPositionFromOffset(D){if(!this._computedIsNeeded)return 0;const w=D-this._arrowSize-this._computedSliderSize/2;return Math.round(w/this._computedSliderRatio)}getDesiredScrollPositionFromOffsetPaged(D){if(!this._computedIsNeeded)return 0;const w=D-this._arrowSize;let b=this._scrollPosition;return wU===O){if(P===x)return!0;if(!P||!x||P.length!==x.length)return!1;for(let U=0,O=P.length;UW(P[U],x))}e.binarySearch=w;function b(P,x){let W=0,U=P-1;for(;W<=U;){const O=(W+U)/2|0,$=x(O);if($<0)W=O+1;else if($>0)U=O-1;else return O}return-(W+1)}e.binarySearch2=b;function C(P,x){let W=0,U=P.length;if(U===0)return 0;for(;W=x.length)throw new TypeError("invalid index");const U=x[Math.floor(x.length*Math.random())],O=[],$=[],Q=[];for(const se of x){const le=W(se,U);le<0?O.push(se):le>0?$.push(se):Q.push(se)}return P!!x)}e.coalesce=n;function t(P){let x=0;for(let W=0;W0}e.isNonEmptyArray=s;function a(P,x=W=>W){const W=new Set;return P.filter(U=>{const O=x(U);return W.has(O)?!1:(W.add(O),!0)})}e.distinct=a;function c(P,x){const W=h(P,x);if(W!==-1)return P[W]}e.findLast=c;function h(P,x){for(let W=P.length-1;W>=0;W--){const U=P[W];if(x(U))return W}return-1}e.lastIndex=h;function o(P,x){return P.length>0?P[0]:x}e.firstOrDefault=o;function l(P,x){let W=typeof x=="number"?P:0;typeof x=="number"?W=P:(W=0,x=P);const U=[];if(W<=x)for(let O=W;Ox;O--)U.push(O);return U}e.range=l;function r(P,x,W){const U=P.slice(0,x),O=P.slice(x);return U.concat(W,O)}e.arrayInsert=r;function d(P,x){const W=P.indexOf(x);W>-1&&(P.splice(W,1),P.unshift(x))}e.pushToStart=d;function u(P,x){const W=P.indexOf(x);W>-1&&(P.splice(W,1),P.push(x))}e.pushToEnd=u;function _(P,x){for(const W of x)P.push(W)}e.pushMany=_;function f(P){return Array.isArray(P)?P:[P]}e.asArray=f;function v(P,x,W){const U=L(P,x),O=P.length,$=W.length;P.length=O+$;for(let Q=O-1;Q>=U;Q--)P[Q+$]=P[Q];for(let Q=0;Q<$;Q++)P[Q+U]=W[Q]}e.insertInto=v;function p(P,x,W,U){const O=L(P,x),$=P.splice(O,W);return v(P,O,U),$}e.splice=p;function L(P,x){return x<0?Math.max(x+P.length,0):Math.min(x,P.length)}var E;(function(P){function x(O){return O<0}P.isLessThan=x;function W(O){return O>0}P.isGreaterThan=W;function U(O){return O===0}P.isNeitherLessOrGreaterThan=U,P.greaterThan=1,P.lessThan=-1,P.neitherLessOrGreaterThan=0})(E=e.CompareResult||(e.CompareResult={}));function I(P,x){return(W,U)=>x(P(W),P(U))}e.compareBy=I;const T=(P,x)=>P-x;e.numberComparator=T;function F(P,x){if(P.length===0)return;let W=P[0];for(let U=1;U0&&(W=O)}return W}e.findMaxBy=F;function R(P,x){if(P.length===0)return;let W=P[0];for(let U=1;U=0&&(W=O)}return W}e.findLastMaxBy=R;function M(P,x){return F(P,(W,U)=>-x(W,U))}e.findMinBy=M;class N{constructor(x){this.items=x,this.firstIdx=0,this.lastIdx=this.items.length-1}get length(){return this.lastIdx-this.firstIdx+1}takeWhile(x){let W=this.firstIdx;for(;W=0&&x(this.items[W]);)W--;const U=W===this.lastIdx?null:this.items.slice(W+1,this.lastIdx+1);return this.lastIdx=W,U}peek(){if(this.length!==0)return this.items[this.firstIdx]}dequeue(){const x=this.items[this.firstIdx];return this.firstIdx++,x}takeCount(x){const W=this.items.slice(this.firstIdx,this.firstIdx+x);return this.firstIdx+=x,W}}e.ArrayQueue=N;class A{constructor(x){this.iterate=x}toArray(){const x=[];return this.iterate(W=>(x.push(W),!0)),x}filter(x){return new A(W=>this.iterate(U=>x(U)?W(U):!0))}map(x){return new A(W=>this.iterate(U=>W(x(U))))}findLast(x){let W;return this.iterate(U=>(x(U)&&(W=U),!0)),W}findLastMaxBy(x){let W,U=!0;return this.iterate(O=>((U||E.isGreaterThan(x(O,W)))&&(U=!1,W=O),!0)),W}}A.empty=new A(P=>{}),e.CallbackIterable=A}),define(X[130],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.writeUInt8=e.readUInt8=e.writeUInt32BE=e.readUInt32BE=e.writeUInt16LE=e.readUInt16LE=e.VSBuffer=void 0;const S=typeof Buffer<"u";let k;class y{static wrap(t){return S&&!Buffer.isBuffer(t)&&(t=Buffer.from(t.buffer,t.byteOffset,t.byteLength)),new y(t)}constructor(t){this.buffer=t,this.byteLength=this.buffer.byteLength}toString(){return S?this.buffer.toString():(k||(k=new TextDecoder),k.decode(this.buffer))}}e.VSBuffer=y;function D(n,t){return n[t+0]<<0>>>0|n[t+1]<<8>>>0}e.readUInt16LE=D;function w(n,t,i){n[i+0]=t&255,t=t>>>8,n[i+1]=t&255}e.writeUInt16LE=w;function b(n,t){return n[t]*Math.pow(2,24)+n[t+1]*Math.pow(2,16)+n[t+2]*Math.pow(2,8)+n[t+3]}e.readUInt32BE=b;function C(n,t,i){n[i+3]=t,t=t>>>8,n[i+2]=t,t=t>>>8,n[i+1]=t,t=t>>>8,n[i]=t}e.writeUInt32BE=C;function g(n,t){return n[t]}e.readUInt8=g;function m(n,t,i){n[i]=t}e.writeUInt8=m}),define(X[244],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.CachedFunction=e.LRUCachedFunction=void 0;class S{constructor(D){this.fn=D,this.lastCache=void 0,this.lastArgKey=void 0}get(D){const w=JSON.stringify(D);return this.lastArgKey!==w&&(this.lastArgKey=w,this.lastCache=this.fn(D)),this.lastCache}}e.LRUCachedFunction=S;class k{get cachedValues(){return this._map}constructor(D){this.fn=D,this._map=new Map}get(D){if(this._map.has(D))return this._map.get(D);const w=this.fn(D);return this._map.set(D,w),w}}e.CachedFunction=k}),define(X[354],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SetMap=void 0;class S{constructor(){this.map=new Map}add(y,D){let w=this.map.get(y);w||(w=new Set,this.map.set(y,w)),w.add(D)}delete(y,D){const w=this.map.get(y);!w||(w.delete(D),w.size===0&&this.map.delete(y))}forEach(y,D){const w=this.map.get(y);!w||w.forEach(D)}}e.SetMap=S}),define(X[37],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Color=e.HSVA=e.HSLA=e.RGBA=void 0;function S(b,C){const g=Math.pow(10,C);return Math.round(b*g)/g}class k{constructor(C,g,m,n=1){this._rgbaBrand=void 0,this.r=Math.min(255,Math.max(0,C))|0,this.g=Math.min(255,Math.max(0,g))|0,this.b=Math.min(255,Math.max(0,m))|0,this.a=S(Math.max(Math.min(1,n),0),3)}static equals(C,g){return C.r===g.r&&C.g===g.g&&C.b===g.b&&C.a===g.a}}e.RGBA=k;class y{constructor(C,g,m,n){this._hslaBrand=void 0,this.h=Math.max(Math.min(360,C),0)|0,this.s=S(Math.max(Math.min(1,g),0),3),this.l=S(Math.max(Math.min(1,m),0),3),this.a=S(Math.max(Math.min(1,n),0),3)}static equals(C,g){return C.h===g.h&&C.s===g.s&&C.l===g.l&&C.a===g.a}static fromRGBA(C){const g=C.r/255,m=C.g/255,n=C.b/255,t=C.a,i=Math.max(g,m,n),s=Math.min(g,m,n);let a=0,c=0;const h=(s+i)/2,o=i-s;if(o>0){switch(c=Math.min(h<=.5?o/(2*h):o/(2-2*h),1),i){case g:a=(m-n)/o+(m1&&(m-=1),m<1/6?C+(g-C)*6*m:m<1/2?g:m<2/3?C+(g-C)*(2/3-m)*6:C}static toRGBA(C){const g=C.h/360,{s:m,l:n,a:t}=C;let i,s,a;if(m===0)i=s=a=n;else{const c=n<.5?n*(1+m):n+m-n*m,h=2*n-c;i=y._hue2rgb(h,c,g+1/3),s=y._hue2rgb(h,c,g),a=y._hue2rgb(h,c,g-1/3)}return new k(Math.round(i*255),Math.round(s*255),Math.round(a*255),t)}}e.HSLA=y;class D{constructor(C,g,m,n){this._hsvaBrand=void 0,this.h=Math.max(Math.min(360,C),0)|0,this.s=S(Math.max(Math.min(1,g),0),3),this.v=S(Math.max(Math.min(1,m),0),3),this.a=S(Math.max(Math.min(1,n),0),3)}static equals(C,g){return C.h===g.h&&C.s===g.s&&C.v===g.v&&C.a===g.a}static fromRGBA(C){const g=C.r/255,m=C.g/255,n=C.b/255,t=Math.max(g,m,n),i=Math.min(g,m,n),s=t-i,a=t===0?0:s/t;let c;return s===0?c=0:t===g?c=((m-n)/s%6+6)%6:t===m?c=(n-g)/s+2:c=(g-m)/s+4,new D(Math.round(c*60),a,t,C.a)}static toRGBA(C){const{h:g,s:m,v:n,a:t}=C,i=n*m,s=i*(1-Math.abs(g/60%2-1)),a=n-i;let[c,h,o]=[0,0,0];return g<60?(c=i,h=s):g<120?(c=s,h=i):g<180?(h=i,o=s):g<240?(h=s,o=i):g<300?(c=s,o=i):g<=360&&(c=i,o=s),c=Math.round((c+a)*255),h=Math.round((h+a)*255),o=Math.round((o+a)*255),new k(c,h,o,t)}}e.HSVA=D;class w{static fromHex(C){return w.Format.CSS.parseHex(C)||w.red}static equals(C,g){return!C&&!g?!0:!C||!g?!1:C.equals(g)}get hsla(){return this._hsla?this._hsla:y.fromRGBA(this.rgba)}get hsva(){return this._hsva?this._hsva:D.fromRGBA(this.rgba)}constructor(C){if(C)if(C instanceof k)this.rgba=C;else if(C instanceof y)this._hsla=C,this.rgba=y.toRGBA(C);else if(C instanceof D)this._hsva=C,this.rgba=D.toRGBA(C);else throw new Error("Invalid color ctor argument");else throw new Error("Color needs a value")}equals(C){return!!C&&k.equals(this.rgba,C.rgba)&&y.equals(this.hsla,C.hsla)&&D.equals(this.hsva,C.hsva)}getRelativeLuminance(){const C=w._relativeLuminanceForComponent(this.rgba.r),g=w._relativeLuminanceForComponent(this.rgba.g),m=w._relativeLuminanceForComponent(this.rgba.b),n=.2126*C+.7152*g+.0722*m;return S(n,4)}static _relativeLuminanceForComponent(C){const g=C/255;return g<=.03928?g/12.92:Math.pow((g+.055)/1.055,2.4)}isLighter(){return(this.rgba.r*299+this.rgba.g*587+this.rgba.b*114)/1e3>=128}isLighterThan(C){const g=this.getRelativeLuminance(),m=C.getRelativeLuminance();return g>m}isDarkerThan(C){const g=this.getRelativeLuminance(),m=C.getRelativeLuminance();return g{throw c.stack?i.isErrorNoTelemetry(c)?new i(c.message+`
-
-`+c.stack):new Error(c.message+`
-
-`+c.stack):c},0)}}emit(c){this.listeners.forEach(h=>{h(c)})}onUnexpectedError(c){this.unexpectedErrorHandler(c),this.emit(c)}onUnexpectedExternalError(c){this.unexpectedErrorHandler(c)}}e.ErrorHandler=S,e.errorHandler=new S;function k(a){b(a)||e.errorHandler.onUnexpectedError(a)}e.onUnexpectedError=k;function y(a){b(a)||e.errorHandler.onUnexpectedExternalError(a)}e.onUnexpectedExternalError=y;function D(a){if(a instanceof Error){const{name:c,message:h}=a,o=a.stacktrace||a.stack;return{$isError:!0,name:c,message:h,stack:o,noTelemetry:i.isErrorNoTelemetry(a)}}return a}e.transformErrorForSerialization=D;const w="Canceled";function b(a){return a instanceof C?!0:a instanceof Error&&a.name===w&&a.message===w}e.isCancellationError=b;class C extends Error{constructor(){super(w),this.name=this.message}}e.CancellationError=C;function g(){const a=new Error(w);return a.name=a.message,a}e.canceled=g;function m(a){return a?new Error(`Illegal argument: ${a}`):new Error("Illegal argument")}e.illegalArgument=m;function n(a){return a?new Error(`Illegal state: ${a}`):new Error("Illegal state")}e.illegalState=n;class t extends Error{constructor(c){super("NotSupported"),c&&(this.message=c)}}e.NotSupportedError=t;class i extends Error{constructor(c){super(c),this.name="CodeExpectedError"}static fromError(c){if(c instanceof i)return c;const h=new i;return h.message=c.message,h.stack=c.stack,h}static isErrorNoTelemetry(c){return c.name==="CodeExpectedError"}}e.ErrorNoTelemetry=i;class s extends Error{constructor(c){super(c||"An unexpected bug occurred."),Object.setPrototypeOf(this,s.prototype);debugger}}e.BugIndicatingError=s}),define(X[85],J([1,0,11]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.checkAdjacentItems=e.assertFn=e.assertNever=e.ok=void 0;function k(b,C){if(!b)throw new Error(C?`Assertion failed (${C})`:"Assertion Failed")}e.ok=k;function y(b,C="Unreachable"){throw new Error(C)}e.assertNever=y;function D(b){if(!b()){debugger;b(),(0,S.onUnexpectedError)(new S.BugIndicatingError("Assertion Failed"))}}e.assertFn=D;function w(b,C){let g=0;for(;gr.length&&(u=r.length);d=93&&o<=108)return null;switch(o){case 16:return"Up";case 18:return"Down";case 15:return"Left";case 17:return"Right"}return k.keyCodeToStr(o)}n.toElectronAccelerator=h})(g=e.KeyCodeUtils||(e.KeyCodeUtils={}));function m(n,t){const i=(t&65535)<<16>>>0;return(n|i)>>>0}e.KeyChord=m}),define(X[112],J([1,0,11]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ResolvedKeybinding=e.ResolvedChord=e.Keybinding=e.ScanCodeChord=e.KeyCodeChord=e.createSimpleKeybinding=e.decodeKeybinding=void 0;function k(m,n){if(typeof m=="number"){if(m===0)return null;const t=(m&65535)>>>0,i=(m&4294901760)>>>16;return i!==0?new b([y(t,n),y(i,n)]):new b([y(t,n)])}else{const t=[];for(let i=0;i{const g=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});return{collator:g,collatorIsNumeric:g.resolvedOptions().numeric}}),y=new S.Lazy(()=>({collator:new Intl.Collator(void 0,{numeric:!0})})),D=new S.Lazy(()=>({collator:new Intl.Collator(void 0,{numeric:!0,sensitivity:"accent"})}));function w(g,m,n=!1){const t=g||"",i=m||"",s=k.value.collator.compare(t,i);return k.value.collatorIsNumeric&&s===0&&t!==i?ti.length)return 1}return 0}e.compareByPrefix=C}),define(X[2],J([1,0,92,54]),function(j,e,S,k){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DisposableMap=e.ImmortalReference=e.SafeDisposable=e.RefCountedDisposable=e.MutableDisposable=e.Disposable=e.DisposableStore=e.toDisposable=e.combinedDisposable=e.dispose=e.isDisposable=e.markAsSingleton=e.setDisposableTracker=void 0;const y=!1;let D=null;function w(_){D=_}if(e.setDisposableTracker=w,y){const _="__is_disposable_tracked__";w(new class{trackDisposable(f){const v=new Error("Potentially leaked disposable").stack;setTimeout(()=>{f[_]||console.log(v)},3e3)}setParent(f,v){if(f&&f!==h.None)try{f[_]=!0}catch{}}markAsDisposed(f){if(f&&f!==h.None)try{f[_]=!0}catch{}}markAsSingleton(f){}})}function b(_){return D?.trackDisposable(_),_}function C(_){D?.markAsDisposed(_)}function g(_,f){D?.setParent(_,f)}function m(_,f){if(!!D)for(const v of _)D.setParent(v,f)}function n(_){return D?.markAsSingleton(_),_}e.markAsSingleton=n;function t(_){return typeof _.dispose=="function"&&_.dispose.length===0}e.isDisposable=t;function i(_){if(k.Iterable.is(_)){const f=[];for(const v of _)if(v)try{v.dispose()}catch(p){f.push(p)}if(f.length===1)throw f[0];if(f.length>1)throw new AggregateError(f,"Encountered errors while disposing of store");return Array.isArray(_)?[]:_}else if(_)return _.dispose(),_}e.dispose=i;function s(..._){const f=a(()=>i(_));return m(_,f),f}e.combinedDisposable=s;function a(_){const f=b({dispose:(0,S.once)(()=>{C(f),_()})});return f}e.toDisposable=a;class c{constructor(){this._toDispose=new Set,this._isDisposed=!1,b(this)}dispose(){this._isDisposed||(C(this),this._isDisposed=!0,this.clear())}get isDisposed(){return this._isDisposed}clear(){if(this._toDispose.size!==0)try{i(this._toDispose)}finally{this._toDispose.clear()}}add(f){if(!f)return f;if(f===this)throw new Error("Cannot register a disposable on itself!");return g(f,this),this._isDisposed?c.DISABLE_DISPOSED_WARNING||console.warn(new Error("Trying to add a disposable to a DisposableStore that has already been disposed of. The added object will be leaked!").stack):this._toDispose.add(f),f}}c.DISABLE_DISPOSED_WARNING=!1,e.DisposableStore=c;class h{constructor(){this._store=new c,b(this),g(this._store,this)}dispose(){C(this),this._store.dispose()}_register(f){if(f===this)throw new Error("Cannot register a disposable on itself!");return this._store.add(f)}}h.None=Object.freeze({dispose(){}}),e.Disposable=h;class o{constructor(){this._isDisposed=!1,b(this)}get value(){return this._isDisposed?void 0:this._value}set value(f){var v;this._isDisposed||f===this._value||((v=this._value)===null||v===void 0||v.dispose(),f&&g(f,this),this._value=f)}clear(){this.value=void 0}dispose(){var f;this._isDisposed=!0,C(this),(f=this._value)===null||f===void 0||f.dispose(),this._value=void 0}clearAndLeak(){const f=this._value;return this._value=void 0,f&&g(f,null),f}}e.MutableDisposable=o;class l{constructor(f){this._disposable=f,this._counter=1}acquire(){return this._counter++,this}release(){return--this._counter===0&&this._disposable.dispose(),this}}e.RefCountedDisposable=l;class r{constructor(){this.dispose=()=>{},this.unset=()=>{},this.isset=()=>!1,b(this)}set(f){let v=f;return this.unset=()=>v=void 0,this.isset=()=>v!==void 0,this.dispose=()=>{v&&(v(),v=void 0,C(this))},this}}e.SafeDisposable=r;class d{constructor(f){this.object=f}dispose(){}}e.ImmortalReference=d;class u{constructor(){this._store=new Map,this._isDisposed=!1,b(this)}dispose(){C(this),this._isDisposed=!0,this.clearAndDisposeAll()}clearAndDisposeAll(){if(!!this._store.size)try{i(this._store.values())}finally{this._store.clear()}}get(f){return this._store.get(f)}set(f,v,p=!1){var L;this._isDisposed&&console.warn(new Error("Trying to add a disposable to a DisposableMap that has already been disposed of. The added object will be leaked!").stack),p||(L=this._store.get(f))===null||L===void 0||L.dispose(),this._store.set(f,v)}deleteAndDispose(f){var v;(v=this._store.get(f))===null||v===void 0||v.dispose(),this._store.delete(f)}[Symbol.iterator](){return this._store[Symbol.iterator]()}}e.DisposableMap=u}),define(X[59],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.LinkedList=void 0;class S{constructor(D){this.element=D,this.next=S.Undefined,this.prev=S.Undefined}}S.Undefined=new S(void 0);class k{constructor(){this._first=S.Undefined,this._last=S.Undefined,this._size=0}get size(){return this._size}isEmpty(){return this._first===S.Undefined}clear(){let D=this._first;for(;D!==S.Undefined;){const w=D.next;D.prev=S.Undefined,D.next=S.Undefined,D=w}this._first=S.Undefined,this._last=S.Undefined,this._size=0}unshift(D){return this._insert(D,!1)}push(D){return this._insert(D,!0)}_insert(D,w){const b=new S(D);if(this._first===S.Undefined)this._first=b,this._last=b;else if(w){const g=this._last;this._last=b,b.prev=g,g.next=b}else{const g=this._first;this._first=b,b.next=g,g.prev=b}this._size+=1;let C=!1;return()=>{C||(C=!0,this._remove(b))}}shift(){if(this._first!==S.Undefined){const D=this._first.element;return this._remove(this._first),D}}pop(){if(this._last!==S.Undefined){const D=this._last.element;return this._remove(this._last),D}}_remove(D){if(D.prev!==S.Undefined&&D.next!==S.Undefined){const w=D.prev;w.next=D.next,D.next.prev=w}else D.prev===S.Undefined&&D.next===S.Undefined?(this._first=S.Undefined,this._last=S.Undefined):D.next===S.Undefined?(this._last=this._last.prev,this._last.next=S.Undefined):D.prev===S.Undefined&&(this._first=this._first.next,this._first.prev=S.Undefined);this._size-=1}*[Symbol.iterator](){let D=this._first;for(;D!==S.Undefined;)yield D.element,D=D.next}}e.LinkedList=k});var Ne=this&&this.__decorate||function(j,e,S,k){var y=arguments.length,D=y<3?e:k===null?k=Object.getOwnPropertyDescriptor(e,S):k,w;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")D=Reflect.decorate(j,e,S,k);else for(var b=j.length-1;b>=0;b--)(w=j[b])&&(D=(y<3?w(D):y>3?w(e,S,D):w(e,S))||D);return y>3&&D&&Object.defineProperty(e,S,D),D};define(X[357],J([1,0,99]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.parseLinkedText=e.LinkedText=void 0;class k{constructor(b){this.nodes=b}toString(){return this.nodes.map(b=>typeof b=="string"?b:b.label).join("")}}Ne([S.memoize],k.prototype,"toString",null),e.LinkedText=k;const y=/\[([^\]]+)\]\(((?:https?:\/\/|command:|file:)[^\)\s]+)(?: (["'])(.+?)(\3))?\)/gi;function D(w){const b=[];let C=0,g;for(;g=y.exec(w);){g.index-C>0&&b.push(w.substring(C,g.index));const[,m,n,,t]=g;t?b.push({label:m,href:n,title:t}):b.push({label:m,href:n}),C=g.index+g[0].length}return CC.toString(),e.ResourceMap=D;class w{constructor(){this[k]="LinkedMap",this._map=new Map,this._head=void 0,this._tail=void 0,this._size=0,this._state=0}clear(){this._map.clear(),this._head=void 0,this._tail=void 0,this._size=0,this._state++}isEmpty(){return!this._head&&!this._tail}get size(){return this._size}get first(){var g;return(g=this._head)===null||g===void 0?void 0:g.value}get last(){var g;return(g=this._tail)===null||g===void 0?void 0:g.value}has(g){return this._map.has(g)}get(g,m=0){const n=this._map.get(g);if(!!n)return m!==0&&this.touch(n,m),n.value}set(g,m,n=0){let t=this._map.get(g);if(t)t.value=m,n!==0&&this.touch(t,n);else{switch(t={key:g,value:m,next:void 0,previous:void 0},n){case 0:this.addItemLast(t);break;case 1:this.addItemFirst(t);break;case 2:this.addItemLast(t);break;default:this.addItemLast(t);break}this._map.set(g,t),this._size++}return this}delete(g){return!!this.remove(g)}remove(g){const m=this._map.get(g);if(!!m)return this._map.delete(g),this.removeItem(m),this._size--,m.value}shift(){if(!this._head&&!this._tail)return;if(!this._head||!this._tail)throw new Error("Invalid list");const g=this._head;return this._map.delete(g.key),this.removeItem(g),this._size--,g.value}forEach(g,m){const n=this._state;let t=this._head;for(;t;){if(m?g.bind(m)(t.value,t.key,this):g(t.value,t.key,this),this._state!==n)throw new Error("LinkedMap got modified during iteration.");t=t.next}}keys(){const g=this,m=this._state;let n=this._head;const t={[Symbol.iterator](){return t},next(){if(g._state!==m)throw new Error("LinkedMap got modified during iteration.");if(n){const i={value:n.key,done:!1};return n=n.next,i}else return{value:void 0,done:!0}}};return t}values(){const g=this,m=this._state;let n=this._head;const t={[Symbol.iterator](){return t},next(){if(g._state!==m)throw new Error("LinkedMap got modified during iteration.");if(n){const i={value:n.value,done:!1};return n=n.next,i}else return{value:void 0,done:!0}}};return t}entries(){const g=this,m=this._state;let n=this._head;const t={[Symbol.iterator](){return t},next(){if(g._state!==m)throw new Error("LinkedMap got modified during iteration.");if(n){const i={value:[n.key,n.value],done:!1};return n=n.next,i}else return{value:void 0,done:!0}}};return t}[(k=Symbol.toStringTag,Symbol.iterator)](){return this.entries()}trimOld(g){if(g>=this.size)return;if(g===0){this.clear();return}let m=this._head,n=this.size;for(;m&&n>g;)this._map.delete(m.key),m=m.next,n--;this._head=m,this._size=n,m&&(m.previous=void 0),this._state++}addItemFirst(g){if(!this._head&&!this._tail)this._tail=g;else if(this._head)g.next=this._head,this._head.previous=g;else throw new Error("Invalid list");this._head=g,this._state++}addItemLast(g){if(!this._head&&!this._tail)this._head=g;else if(this._tail)g.previous=this._tail,this._tail.next=g;else throw new Error("Invalid list");this._tail=g,this._state++}removeItem(g){if(g===this._head&&g===this._tail)this._head=void 0,this._tail=void 0;else if(g===this._head){if(!g.next)throw new Error("Invalid list");g.next.previous=void 0,this._head=g.next}else if(g===this._tail){if(!g.previous)throw new Error("Invalid list");g.previous.next=void 0,this._tail=g.previous}else{const m=g.next,n=g.previous;if(!m||!n)throw new Error("Invalid list");m.previous=n,n.next=m}g.next=void 0,g.previous=void 0,this._state++}touch(g,m){if(!this._head||!this._tail)throw new Error("Invalid list");if(!(m!==1&&m!==2)){if(m===1){if(g===this._head)return;const n=g.next,t=g.previous;g===this._tail?(t.next=void 0,this._tail=t):(n.previous=t,t.next=n),g.previous=void 0,g.next=this._head,this._head.previous=g,this._head=g,this._state++}else if(m===2){if(g===this._tail)return;const n=g.next,t=g.previous;g===this._head?(n.previous=void 0,this._head=n):(n.previous=t,t.next=n),g.next=void 0,g.previous=this._tail,this._tail.next=g,this._tail=g,this._state++}}}toJSON(){const g=[];return this.forEach((m,n)=>{g.push([n,m])}),g}fromJSON(g){this.clear();for(const[m,n]of g)this.set(m,n)}}e.LinkedMap=w;class b extends w{constructor(g,m=1){super(),this._limit=g,this._ratio=Math.min(Math.max(0,m),1)}get limit(){return this._limit}set limit(g){this._limit=g,this.checkTrim()}get(g,m=2){return super.get(g,m)}peek(g){return super.get(g,0)}set(g,m){return super.set(g,m,2),this.checkTrim(),this}checkTrim(){this.size>this._limit&&this.trimOld(Math.round(this._limit*this._ratio))}}e.LRUCache=b}),function(j,e){typeof define=="function"&&define.amd?define(X[358],J([0]),e):typeof exports=="object"&&typeof module<"u"?e(exports):(j=typeof globalThis<"u"?globalThis:j||self,e(j.marked={}))}(this,function(j){"use strict";function e(oe,ce){for(var z=0;zoe.length)&&(ce=oe.length);for(var z=0,V=new Array(ce);z=oe.length?{done:!0}:{done:!1,value:oe[V++]}}}throw new TypeError(`Invalid attempt to iterate non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function w(){return{async:!1,baseUrl:null,breaks:!1,extensions:null,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:null,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tokenizer:null,walkTokens:null,xhtml:!1}}j.defaults=w();function b(oe){j.defaults=oe}var C=/[&<>"']/,g=/[&<>"']/g,m=/[<>"']|&(?!#?\w+;)/,n=/[<>"']|&(?!#?\w+;)/g,t={"&":"&","<":"<",">":">",'"':""","'":"'"},i=function(ce){return t[ce]};function s(oe,ce){if(ce){if(C.test(oe))return oe.replace(g,i)}else if(m.test(oe))return oe.replace(n,i);return oe}var a=/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig;function c(oe){return oe.replace(a,function(ce,z){return z=z.toLowerCase(),z==="colon"?":":z.charAt(0)==="#"?z.charAt(1)==="x"?String.fromCharCode(parseInt(z.substring(2),16)):String.fromCharCode(+z.substring(1)):""})}var h=/(^|[^\[])\^/g;function o(oe,ce){oe=typeof oe=="string"?oe:oe.source,ce=ce||"";var z={replace:function(K,ie){return ie=ie.source||ie,ie=ie.replace(h,"$1"),oe=oe.replace(K,ie),z},getRegex:function(){return new RegExp(oe,ce)}};return z}var l=/[^\w:]/g,r=/^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;function d(oe,ce,z){if(oe){var V;try{V=decodeURIComponent(c(z)).replace(l,"").toLowerCase()}catch{return null}if(V.indexOf("javascript:")===0||V.indexOf("vbscript:")===0||V.indexOf("data:")===0)return null}ce&&!r.test(z)&&(z=p(ce,z));try{z=encodeURI(z).replace(/%25/g,"%")}catch{return null}return z}var u={},_=/^[^:]+:\/*[^/]*$/,f=/^([^:]+:)[\s\S]*$/,v=/^([^:]+:\/*[^/]*)[\s\S]*$/;function p(oe,ce){u[" "+oe]||(_.test(oe)?u[" "+oe]=oe+"/":u[" "+oe]=T(oe,"/",!0)),oe=u[" "+oe];var z=oe.indexOf(":")===-1;return ce.substring(0,2)==="//"?z?ce:oe.replace(f,"$1")+ce:ce.charAt(0)==="/"?z?ce:oe.replace(v,"$1")+ce:oe+ce}var L={exec:function(){}};function E(oe){for(var ce=1,z,V;ce=0&&Z[me]==="\\";)ue=!ue;return ue?"|":" |"}),V=z.split(/ \|/),K=0;if(V[0].trim()||V.shift(),V.length>0&&!V[V.length-1].trim()&&V.pop(),V.length>ce)V.splice(ce);else for(;V.length1;)ce&1&&(z+=oe),ce>>=1,oe+=oe;return z+oe}function N(oe,ce,z,V){var K=ce.href,ie=ce.title?s(ce.title):null,ee=oe[1].replace(/\\([\[\]])/g,"$1");if(oe[0].charAt(0)!=="!"){V.state.inLink=!0;var Z={type:"link",raw:z,href:K,title:ie,text:ee,tokens:V.inlineTokens(ee)};return V.state.inLink=!1,Z}return{type:"image",raw:z,href:K,title:ie,text:s(ee)}}function A(oe,ce){var z=oe.match(/^(\s+)(?:```)/);if(z===null)return ce;var V=z[1];return ce.split(`
-`).map(function(K){var ie=K.match(/^\s+/);if(ie===null)return K;var ee=ie[0];return ee.length>=V.length?K.slice(V.length):K}).join(`
-`)}var P=function(){function oe(z){this.options=z||j.defaults}var ce=oe.prototype;return ce.space=function(V){var K=this.rules.block.newline.exec(V);if(K&&K[0].length>0)return{type:"space",raw:K[0]}},ce.code=function(V){var K=this.rules.block.code.exec(V);if(K){var ie=K[0].replace(/^ {1,4}/gm,"");return{type:"code",raw:K[0],codeBlockStyle:"indented",text:this.options.pedantic?ie:T(ie,`
-`)}}},ce.fences=function(V){var K=this.rules.block.fences.exec(V);if(K){var ie=K[0],ee=A(ie,K[3]||"");return{type:"code",raw:ie,lang:K[2]?K[2].trim():K[2],text:ee}}},ce.heading=function(V){var K=this.rules.block.heading.exec(V);if(K){var ie=K[2].trim();if(/#$/.test(ie)){var ee=T(ie,"#");(this.options.pedantic||!ee||/ $/.test(ee))&&(ie=ee.trim())}return{type:"heading",raw:K[0],depth:K[1].length,text:ie,tokens:this.lexer.inline(ie)}}},ce.hr=function(V){var K=this.rules.block.hr.exec(V);if(K)return{type:"hr",raw:K[0]}},ce.blockquote=function(V){var K=this.rules.block.blockquote.exec(V);if(K){var ie=K[0].replace(/^ *>[ \t]?/gm,"");return{type:"blockquote",raw:K[0],tokens:this.lexer.blockTokens(ie,[]),text:ie}}},ce.list=function(V){var K=this.rules.block.list.exec(V);if(K){var ie,ee,Z,ue,me,Ce,_e,we,ye,ke,De,ge,pe=K[1].trim(),ae=pe.length>1,ve={type:"list",raw:"",ordered:ae,start:ae?+pe.slice(0,-1):"",loose:!1,items:[]};pe=ae?"\\d{1,9}\\"+pe.slice(-1):"\\"+pe,this.options.pedantic&&(pe=ae?pe:"[*+-]");for(var Le=new RegExp("^( {0,3}"+pe+")((?:[ ][^\\n]*)?(?:\\n|$))");V&&(ge=!1,!(!(K=Le.exec(V))||this.rules.block.hr.test(V)));){if(ie=K[0],V=V.substring(ie.length),we=K[2].split(`
-`,1)[0],ye=V.split(`
-`,1)[0],this.options.pedantic?(ue=2,De=we.trimLeft()):(ue=K[2].search(/[^ ]/),ue=ue>4?1:ue,De=we.slice(ue),ue+=K[1].length),Ce=!1,!we&&/^ *$/.test(ye)&&(ie+=ye+`
-`,V=V.substring(ye.length+1),ge=!0),!ge)for(var Ie=new RegExp("^ {0,"+Math.min(3,ue-1)+"}(?:[*+-]|\\d{1,9}[.)])((?: [^\\n]*)?(?:\\n|$))"),Ae=new RegExp("^ {0,"+Math.min(3,ue-1)+"}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)"),be=new RegExp("^ {0,"+Math.min(3,ue-1)+"}(?:```|~~~)"),Se=new RegExp("^ {0,"+Math.min(3,ue-1)+"}#");V&&(ke=V.split(`
-`,1)[0],we=ke,this.options.pedantic&&(we=we.replace(/^ {1,4}(?=( {4})*[^ ])/g," ")),!(be.test(we)||Se.test(we)||Ie.test(we)||Ae.test(V)));){if(we.search(/[^ ]/)>=ue||!we.trim())De+=`
-`+we.slice(ue);else if(!Ce)De+=`
-`+we;else break;!Ce&&!we.trim()&&(Ce=!0),ie+=ke+`
-`,V=V.substring(ke.length+1)}ve.loose||(_e?ve.loose=!0:/\n *\n *$/.test(ie)&&(_e=!0)),this.options.gfm&&(ee=/^\[[ xX]\] /.exec(De),ee&&(Z=ee[0]!=="[ ] ",De=De.replace(/^\[[ xX]\] +/,""))),ve.items.push({type:"list_item",raw:ie,task:!!ee,checked:Z,loose:!1,text:De}),ve.raw+=ie}ve.items[ve.items.length-1].raw=ie.trimRight(),ve.items[ve.items.length-1].text=De.trimRight(),ve.raw=ve.raw.trimRight();var Te=ve.items.length;for(me=0;me1)return!0}return!1});!ve.loose&&Pe.length&&Fe&&(ve.loose=!0,ve.items[me].loose=!0)}return ve}},ce.html=function(V){var K=this.rules.block.html.exec(V);if(K){var ie={type:"html",raw:K[0],pre:!this.options.sanitizer&&(K[1]==="pre"||K[1]==="script"||K[1]==="style"),text:K[0]};if(this.options.sanitize){var ee=this.options.sanitizer?this.options.sanitizer(K[0]):s(K[0]);ie.type="paragraph",ie.text=ee,ie.tokens=this.lexer.inline(ee)}return ie}},ce.def=function(V){var K=this.rules.block.def.exec(V);if(K){K[3]&&(K[3]=K[3].substring(1,K[3].length-1));var ie=K[1].toLowerCase().replace(/\s+/g," ");return{type:"def",tag:ie,raw:K[0],href:K[2],title:K[3]}}},ce.table=function(V){var K=this.rules.block.table.exec(V);if(K){var ie={type:"table",header:I(K[1]).map(function(_e){return{text:_e}}),align:K[2].replace(/^ *|\| *$/g,"").split(/ *\| */),rows:K[3]&&K[3].trim()?K[3].replace(/\n[ \t]*$/,"").split(`
-`):[]};if(ie.header.length===ie.align.length){ie.raw=K[0];var ee=ie.align.length,Z,ue,me,Ce;for(Z=0;Z/i.test(K[0])&&(this.lexer.state.inLink=!1),!this.lexer.state.inRawBlock&&/^<(pre|code|kbd|script)(\s|>)/i.test(K[0])?this.lexer.state.inRawBlock=!0:this.lexer.state.inRawBlock&&/^<\/(pre|code|kbd|script)(\s|>)/i.test(K[0])&&(this.lexer.state.inRawBlock=!1),{type:this.options.sanitize?"text":"html",raw:K[0],inLink:this.lexer.state.inLink,inRawBlock:this.lexer.state.inRawBlock,text:this.options.sanitize?this.options.sanitizer?this.options.sanitizer(K[0]):s(K[0]):K[0]}},ce.link=function(V){var K=this.rules.inline.link.exec(V);if(K){var ie=K[2].trim();if(!this.options.pedantic&&/^$/.test(ie))return;var ee=T(ie.slice(0,-1),"\\");if((ie.length-ee.length)%2===0)return}else{var Z=F(K[2],"()");if(Z>-1){var ue=K[0].indexOf("!")===0?5:4,me=ue+K[1].length+Z;K[2]=K[2].substring(0,Z),K[0]=K[0].substring(0,me).trim(),K[3]=""}}var Ce=K[2],_e="";if(this.options.pedantic){var we=/^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(Ce);we&&(Ce=we[1],_e=we[3])}else _e=K[3]?K[3].slice(1,-1):"";return Ce=Ce.trim(),/^$/.test(ie)?Ce=Ce.slice(1):Ce=Ce.slice(1,-1)),N(K,{href:Ce&&Ce.replace(this.rules.inline._escapes,"$1"),title:_e&&_e.replace(this.rules.inline._escapes,"$1")},K[0],this.lexer)}},ce.reflink=function(V,K){var ie;if((ie=this.rules.inline.reflink.exec(V))||(ie=this.rules.inline.nolink.exec(V))){var ee=(ie[2]||ie[1]).replace(/\s+/g," ");if(ee=K[ee.toLowerCase()],!ee||!ee.href){var Z=ie[0].charAt(0);return{type:"text",raw:Z,text:Z}}return N(ie,ee,ie[0],this.lexer)}},ce.emStrong=function(V,K,ie){ie===void 0&&(ie="");var ee=this.rules.inline.emStrong.lDelim.exec(V);if(!!ee&&!(ee[3]&&ie.match(/(?:[0-9A-Za-z\xAA\xB2\xB3\xB5\xB9\xBA\xBC-\xBE\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u0660-\u0669\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07C0-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u0870-\u0887\u0889-\u088E\u08A0-\u08C9\u0904-\u0939\u093D\u0950\u0958-\u0961\u0966-\u096F\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09E6-\u09F1\u09F4-\u09F9\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A66-\u0A6F\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AE6-\u0AEF\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B66-\u0B6F\u0B71-\u0B77\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0BE6-\u0BF2\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C5D\u0C60\u0C61\u0C66-\u0C6F\u0C78-\u0C7E\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDD\u0CDE\u0CE0\u0CE1\u0CE6-\u0CEF\u0CF1\u0CF2\u0D04-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D58-\u0D61\u0D66-\u0D78\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DE6-\u0DEF\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E86-\u0E8A\u0E8C-\u0EA3\u0EA5\u0EA7-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F20-\u0F33\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F-\u1049\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u1090-\u1099\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1369-\u137C\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u1711\u171F-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A16\u1A20-\u1A54\u1A80-\u1A89\u1A90-\u1A99\u1AA7\u1B05-\u1B33\u1B45-\u1B4C\u1B50-\u1B59\u1B83-\u1BA0\u1BAE-\u1BE5\u1C00-\u1C23\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF3\u1CF5\u1CF6\u1CFA\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2070\u2071\u2074-\u2079\u207F-\u2089\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2150-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2C00-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2CFD\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u3192-\u3195\u31A0-\u31BF\u31F0-\u31FF\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\u3400-\u4DBF\u4E00-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7CA\uA7D0\uA7D1\uA7D3\uA7D5-\uA7D9\uA7F2-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA830-\uA835\uA840-\uA873\uA882-\uA8B3\uA8D0-\uA8D9\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA900-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF-\uA9D9\uA9E0-\uA9E4\uA9E6-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA50-\uAA59\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB69\uAB70-\uABE2\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD07-\uDD33\uDD40-\uDD78\uDD8A\uDD8B\uDE80-\uDE9C\uDEA0-\uDED0\uDEE1-\uDEFB\uDF00-\uDF23\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDD70-\uDD7A\uDD7C-\uDD8A\uDD8C-\uDD92\uDD94\uDD95\uDD97-\uDDA1\uDDA3-\uDDB1\uDDB3-\uDDB9\uDDBB\uDDBC\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC58-\uDC76\uDC79-\uDC9E\uDCA7-\uDCAF\uDCE0-\uDCF2\uDCF4\uDCF5\uDCFB-\uDD1B\uDD20-\uDD39\uDD80-\uDDB7\uDDBC-\uDDCF\uDDD2-\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE40-\uDE48\uDE60-\uDE7E\uDE80-\uDE9F\uDEC0-\uDEC7\uDEC9-\uDEE4\uDEEB-\uDEEF\uDF00-\uDF35\uDF40-\uDF55\uDF58-\uDF72\uDF78-\uDF91\uDFA9-\uDFAF]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDCFA-\uDD23\uDD30-\uDD39\uDE60-\uDE7E\uDE80-\uDEA9\uDEB0\uDEB1\uDF00-\uDF27\uDF30-\uDF45\uDF51-\uDF54\uDF70-\uDF81\uDFB0-\uDFCB\uDFE0-\uDFF6]|\uD804[\uDC03-\uDC37\uDC52-\uDC6F\uDC71\uDC72\uDC75\uDC83-\uDCAF\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD03-\uDD26\uDD36-\uDD3F\uDD44\uDD47\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDD0-\uDDDA\uDDDC\uDDE1-\uDDF4\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDEF0-\uDEF9\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC50-\uDC59\uDC5F-\uDC61\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE50-\uDE59\uDE80-\uDEAA\uDEB8\uDEC0-\uDEC9\uDF00-\uDF1A\uDF30-\uDF3B\uDF40-\uDF46]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCF2\uDCFF-\uDD06\uDD09\uDD0C-\uDD13\uDD15\uDD16\uDD18-\uDD2F\uDD3F\uDD41\uDD50-\uDD59\uDDA0-\uDDA7\uDDAA-\uDDD0\uDDE1\uDDE3\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE89\uDE9D\uDEB0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC50-\uDC6C\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD50-\uDD59\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDDA0-\uDDA9\uDEE0-\uDEF2\uDFB0\uDFC0-\uDFD4]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|\uD80B[\uDF90-\uDFF0]|[\uD80C\uD81C-\uD820\uD822\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879\uD880-\uD883][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDE70-\uDEBE\uDEC0-\uDEC9\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF50-\uDF59\uDF5B-\uDF61\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE96\uDF00-\uDF4A\uDF50\uDF93-\uDF9F\uDFE0\uDFE1\uDFE3]|\uD821[\uDC00-\uDFF7]|\uD823[\uDC00-\uDCD5\uDD00-\uDD08]|\uD82B[\uDFF0-\uDFF3\uDFF5-\uDFFB\uDFFD\uDFFE]|\uD82C[\uDC00-\uDD22\uDD50-\uDD52\uDD64-\uDD67\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD834[\uDEE0-\uDEF3\uDF60-\uDF78]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD837[\uDF00-\uDF1E]|\uD838[\uDD00-\uDD2C\uDD37-\uDD3D\uDD40-\uDD49\uDD4E\uDE90-\uDEAD\uDEC0-\uDEEB\uDEF0-\uDEF9]|\uD839[\uDFE0-\uDFE6\uDFE8-\uDFEB\uDFED\uDFEE\uDFF0-\uDFFE]|\uD83A[\uDC00-\uDCC4\uDCC7-\uDCCF\uDD00-\uDD43\uDD4B\uDD50-\uDD59]|\uD83B[\uDC71-\uDCAB\uDCAD-\uDCAF\uDCB1-\uDCB4\uDD01-\uDD2D\uDD2F-\uDD3D\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD83C[\uDD00-\uDD0C]|\uD83E[\uDFF0-\uDFF9]|\uD869[\uDC00-\uDEDF\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF38\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uD884[\uDC00-\uDF4A])/))){var Z=ee[1]||ee[2]||"";if(!Z||Z&&(ie===""||this.rules.inline.punctuation.exec(ie))){var ue=ee[0].length-1,me,Ce,_e=ue,we=0,ye=ee[0][0]==="*"?this.rules.inline.emStrong.rDelimAst:this.rules.inline.emStrong.rDelimUnd;for(ye.lastIndex=0,K=K.slice(-1*V.length+ue);(ee=ye.exec(K))!=null;)if(me=ee[1]||ee[2]||ee[3]||ee[4]||ee[5]||ee[6],!!me){if(Ce=me.length,ee[3]||ee[4]){_e+=Ce;continue}else if((ee[5]||ee[6])&&ue%3&&!((ue+Ce)%3)){we+=Ce;continue}if(_e-=Ce,!(_e>0)){if(Ce=Math.min(Ce,Ce+_e+we),Math.min(ue,Ce)%2){var ke=V.slice(1,ue+ee.index+Ce);return{type:"em",raw:V.slice(0,ue+ee.index+Ce+1),text:ke,tokens:this.lexer.inlineTokens(ke)}}var De=V.slice(2,ue+ee.index+Ce-1);return{type:"strong",raw:V.slice(0,ue+ee.index+Ce+1),text:De,tokens:this.lexer.inlineTokens(De)}}}}}},ce.codespan=function(V){var K=this.rules.inline.code.exec(V);if(K){var ie=K[2].replace(/\n/g," "),ee=/[^ ]/.test(ie),Z=/^ /.test(ie)&&/ $/.test(ie);return ee&&Z&&(ie=ie.substring(1,ie.length-1)),ie=s(ie,!0),{type:"codespan",raw:K[0],text:ie}}},ce.br=function(V){var K=this.rules.inline.br.exec(V);if(K)return{type:"br",raw:K[0]}},ce.del=function(V){var K=this.rules.inline.del.exec(V);if(K)return{type:"del",raw:K[0],text:K[2],tokens:this.lexer.inlineTokens(K[2])}},ce.autolink=function(V,K){var ie=this.rules.inline.autolink.exec(V);if(ie){var ee,Z;return ie[2]==="@"?(ee=s(this.options.mangle?K(ie[1]):ie[1]),Z="mailto:"+ee):(ee=s(ie[1]),Z=ee),{type:"link",raw:ie[0],text:ee,href:Z,tokens:[{type:"text",raw:ee,text:ee}]}}},ce.url=function(V,K){var ie;if(ie=this.rules.inline.url.exec(V)){var ee,Z;if(ie[2]==="@")ee=s(this.options.mangle?K(ie[0]):ie[0]),Z="mailto:"+ee;else{var ue;do ue=ie[0],ie[0]=this.rules.inline._backpedal.exec(ie[0])[0];while(ue!==ie[0]);ee=s(ie[0]),ie[1]==="www."?Z="http://"+ee:Z=ee}return{type:"link",raw:ie[0],text:ee,href:Z,tokens:[{type:"text",raw:ee,text:ee}]}}},ce.inlineText=function(V,K){var ie=this.rules.inline.text.exec(V);if(ie){var ee;return this.lexer.state.inRawBlock?ee=this.options.sanitize?this.options.sanitizer?this.options.sanitizer(ie[0]):s(ie[0]):ie[0]:ee=s(this.options.smartypants?K(ie[0]):ie[0]),{type:"text",raw:ie[0],text:ee}}},oe}(),x={newline:/^(?: *(?:\n|$))+/,code:/^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/,fences:/^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?=\n|$)|$)/,hr:/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,heading:/^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,blockquote:/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/,list:/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/,html:"^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|\\n*|$)|\\n*|$)|)[\\s\\S]*?(?:(?:\\n *)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)|(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$))",def:/^ {0,3}\[(label)\]: *(?:\n *)?]+)>?(?:(?: +(?:\n *)?| *\n *)(title))? *(?:\n+|$)/,table:L,lheading:/^([^\n]+)\n {0,3}(=+|-+) *(?:\n+|$)/,_paragraph:/^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/,text:/^[^\n]+/};x._label=/(?!\s*\])(?:\\.|[^\[\]\\])+/,x._title=/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/,x.def=o(x.def).replace("label",x._label).replace("title",x._title).getRegex(),x.bullet=/(?:[*+-]|\d{1,9}[.)])/,x.listItemStart=o(/^( *)(bull) */).replace("bull",x.bullet).getRegex(),x.list=o(x.list).replace(/bull/g,x.bullet).replace("hr","\\n+(?=\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$))").replace("def","\\n+(?="+x.def.source+")").getRegex(),x._tag="address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul",x._comment=/|$)/,x.html=o(x.html,"i").replace("comment",x._comment).replace("tag",x._tag).replace("attribute",/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),x.paragraph=o(x._paragraph).replace("hr",x.hr).replace("heading"," {0,3}#{1,6} ").replace("|lheading","").replace("|table","").replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html",")|<(?:script|pre|style|textarea|!--)").replace("tag",x._tag).getRegex(),x.blockquote=o(x.blockquote).replace("paragraph",x.paragraph).getRegex(),x.normal=E({},x),x.gfm=E({},x.normal,{table:"^ *([^\\n ].*\\|.*)\\n {0,3}(?:\\| *)?(:?-+:? *(?:\\| *:?-+:? *)*)(?:\\| *)?(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)"}),x.gfm.table=o(x.gfm.table).replace("hr",x.hr).replace("heading"," {0,3}#{1,6} ").replace("blockquote"," {0,3}>").replace("code"," {4}[^\\n]").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html",")|<(?:script|pre|style|textarea|!--)").replace("tag",x._tag).getRegex(),x.gfm.paragraph=o(x._paragraph).replace("hr",x.hr).replace("heading"," {0,3}#{1,6} ").replace("|lheading","").replace("table",x.gfm.table).replace("blockquote"," {0,3}>").replace("fences"," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list"," {0,3}(?:[*+-]|1[.)]) ").replace("html",")|<(?:script|pre|style|textarea|!--)").replace("tag",x._tag).getRegex(),x.pedantic=E({},x.normal,{html:o(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+? *(?:\\n{2,}|\\s*$)|'+(ie?V:s(V,!0))+`"+(ie?V:s(V,!0))+`
-`+V+`
-`},ce.html=function(V){return V},ce.heading=function(V,K,ie,ee){if(this.options.headerIds){var Z=this.options.headerPrefix+ee.slug(ie);return"'+V+"
-`}return""+V+"
-`},ce.hr=function(){return this.options.xhtml?`"+V+`
-`},ce.checkbox=function(V){return""+V+`
-`},ce.table=function(V,K){return K&&(K=""+K+" "),`
-`},ce.tablerow=function(V){return`
-`+V+`
-`},ce.tablecell=function(V,K){var ie=K.header?"th":"td",ee=K.align?"<"+ie+' align="'+K.align+'">':"<"+ie+">";return ee+V+("
-`)},ce.strong=function(V){return""+V+" "},ce.em=function(V){return""+V+" "},ce.codespan=function(V){return""+V+""},ce.br=function(){return this.options.xhtml?""+V+""},ce.link=function(V,K,ie){if(V=d(this.options.sanitize,this.options.baseUrl,V),V===null)return ie;var ee='",ee},ce.image=function(V,K,ie){if(V=d(this.options.sanitize,this.options.baseUrl,V),V===null)return ie;var ee='0&&Le.tokens[0].type==="paragraph"?(Le.tokens[0].text=be+" "+Le.tokens[0].text,Le.tokens[0].tokens&&Le.tokens[0].tokens.length>0&&Le.tokens[0].tokens[0].type==="text"&&(Le.tokens[0].tokens[0].text=be+" "+Le.tokens[0].tokens[0].text)):Le.tokens.unshift({type:"text",text:be}):ve+=be),ve+=this.parse(Le.tokens,ae),ke+=this.renderer.listitem(ve,Ae,Ie);ie+=this.renderer.list(ke,ge,pe);continue}case"html":{ie+=this.renderer.html(De.text);continue}case"paragraph":{ie+=this.renderer.paragraph(this.parseInline(De.tokens));continue}case"text":{for(ke=De.tokens?this.parseInline(De.tokens):De.text;ee+1"u"||oe===null)throw new Error("marked(): input parameter is undefined or null");if(typeof oe!="string")throw new Error("marked(): input parameter is of type "+Object.prototype.toString.call(oe)+", string expected");if(typeof ce=="function"&&(z=ce,ce=null),ce=E({},re.defaults,ce||{}),R(ce),z){var V=ce.highlight,K;try{K=$.lex(oe,ce)}catch(me){return z(me)}var ie=function(Ce){var _e;if(!Ce)try{ce.walkTokens&&re.walkTokens(K,ce.walkTokens),_e=te.parse(K,ce)}catch(we){Ce=we}return ce.highlight=V,Ce?z(Ce):z(null,_e)};if(!V||V.length<3||(delete ce.highlight,!K.length))return ie();var ee=0;re.walkTokens(K,function(me){me.type==="code"&&(ee++,setTimeout(function(){V(me.text,me.lang,function(Ce,_e){if(Ce)return ie(Ce);_e!=null&&_e!==me.text&&(me.text=_e,me.escaped=!0),ee--,ee===0&&ie()})},0))}),ee===0&&ie();return}function Z(me){if(me.message+=`
-Please report this to https://github.com/markedjs/marked.`,ce.silent)return"An error occurred:
"+s(me.message+"",!0)+" ";throw me}try{var ue=$.lex(oe,ce);if(ce.walkTokens){if(ce.async)return Promise.all(re.walkTokens(ue,ce.walkTokens)).then(function(){return te.parse(ue,ce)}).catch(Z);re.walkTokens(ue,ce.walkTokens)}return te.parse(ue,ce)}catch(me){Z(me)}}re.options=re.setOptions=function(oe){return E(re.defaults,oe),b(re.defaults),re},re.getDefaults=w,re.defaults=j.defaults,re.use=function(){for(var oe=arguments.length,ce=new Array(oe),z=0;z"u"||oe===null)throw new Error("marked.parseInline(): input parameter is undefined or null");if(typeof oe!="string")throw new Error("marked.parseInline(): input parameter is of type "+Object.prototype.toString.call(oe)+", string expected");ce=E({},re.defaults,ce||{}),R(ce);try{var z=$.lexInline(oe,ce);return ce.walkTokens&&re.walkTokens(z,ce.walkTokens),te.parseInline(z,ce)}catch(V){if(V.message+=`
-Please report this to https://github.com/markedjs/marked.`,ce.silent)return"An error occurred:
"+s(V.message+"",!0)+" ";throw V}},re.Parser=te,re.parser=te.parse,re.Renderer=Q,re.TextRenderer=se,re.Lexer=$,re.lexer=$.lex,re.Tokenizer=P,re.Slugger=le,re.parse=re;var H=re.options,B=re.setOptions,q=re.use,G=re.walkTokens,Y=re.parseInline,ne=re,de=te.parse,he=$.lex;j.Lexer=$,j.Parser=te,j.Renderer=Q,j.Slugger=le,j.TextRenderer=se,j.Tokenizer=P,j.getDefaults=w,j.lexer=he,j.marked=re,j.options=H,j.parse=ne,j.parseInline=Y,j.parser=de,j.setOptions=B,j.use=q,j.walkTokens=G,Object.defineProperty(j,"__esModule",{value:!0})}),define(X[101],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Mimes=void 0,e.Mimes=Object.freeze({text:"text/plain",binary:"application/octet-stream",unknown:"application/unknown",markdown:"text/markdown",latex:"text/latex",uriList:"text/uri-list"})}),define(X[131],J([1,0,101]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.DataTransfers=void 0,e.DataTransfers={RESOURCES:"ResourceURLs",DOWNLOAD_URL:"DownloadURL",FILES:"Files",TEXT:S.Mimes.text}}),define(X[359],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ArrayNavigator=void 0;class S{constructor(y,D=0,w=y.length,b=D-1){this.items=y,this.start=D,this.end=w,this.index=b}current(){return this.index===this.start-1||this.index===this.end?null:this.items[this.index]}next(){return this.index=Math.min(this.index+1,this.end),this.current()}previous(){return this.index=Math.max(this.index-1,this.start-1),this.current()}first(){return this.index=this.start,this.current()}last(){return this.index=this.end-1,this.current()}}e.ArrayNavigator=S}),define(X[360],J([1,0,359]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.HistoryNavigator=void 0;class k{constructor(D=[],w=10){this._initialize(D),this._limit=w,this._onChange()}getHistory(){return this._elements}add(D){this._history.delete(D),this._history.add(D),this._onChange()}next(){return this._currentPosition()!==this._elements.length-1?this._navigator.next():null}previous(){return this._currentPosition()!==0?this._navigator.previous():null}current(){return this._navigator.current()}first(){return this._navigator.first()}last(){return this._navigator.last()}isLast(){return this._currentPosition()===this._elements.length-1}isNowhere(){return this._navigator.current()===null}has(D){return this._history.has(D)}_onChange(){this._reduceToLimit();const D=this._elements;this._navigator=new S.ArrayNavigator(D,0,D.length,D.length)}_reduceToLimit(){const D=this._elements;D.length>this._limit&&this._initialize(D.slice(D.length-this._limit))}_currentPosition(){const D=this._navigator.current();return D?this._elements.indexOf(D):-1}_initialize(D){this._history=new Set;for(const w of D)this._history.add(w)}get _elements(){const D=[];return this._history.forEach(w=>D.push(w)),D}}e.HistoryNavigator=k}),define(X[132],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.SlidingWindowAverage=e.MovingAverage=e.clamp=void 0;function S(D,w,b){return Math.min(Math.max(D,w),b)}e.clamp=S;class k{constructor(){this._n=1,this._val=0}update(w){return this._val=this._val+(w-this._val)/this._n,this._n+=1,this._val}get value(){return this._val}}e.MovingAverage=k;class y{constructor(w){this._n=0,this._val=0,this._values=[],this._index=0,this._sum=0,this._values=new Array(w),this._values.fill(0,0,w)}update(w){const b=this._values[this._index];return this._values[this._index]=w,this._index=(this._index+1)%this._values.length,this._sum-=b,this._sum+=w,this._nh.debugName).join(", ")+")",{color:"gray"})}handleAutorunCreated(c){const h=c.handleChange;this.changedObservablesSets.set(c,new Set),c.handleChange=(o,l)=>(this.changedObservablesSets.get(c).add(o),h.apply(c,[o,l]))}handleAutorunTriggered(c){const h=this.changedObservablesSets.get(c);console.log(...this.textToConsoleArgs([C("autorun"),g(c.debugName,{color:"BlueViolet"}),this.formatChanges(h)])),h.clear()}handleBeginTransaction(c){let h=c.getDebugName();h===void 0&&(h=""),console.log(...this.textToConsoleArgs([C("transaction"),g(h,{color:"BlueViolet"})])),this.indentation++}handleEndTransaction(){this.indentation--}}e.ConsoleObservableLogger=D;function w(a){const c=new Array,o={};let l="";function r(u){if("length"in u)for(const _ of u)_&&r(_);else"text"in u?(l+=`%c${u.text}`,c.push(u.style),u.data&&Object.assign(o,u.data)):"data"in u&&Object.assign(o,u.data)}r(a);const d=[l,...c];return Object.keys(o).length>0&&d.push(o),d}function b(a){return g(a,{color:"black"})}function C(a){return g(s(`${a}: `,10),{color:"black",bold:!0})}function g(a,c={color:"black"}){function h(l){return Object.entries(l).reduce((r,[d,u])=>`${r}${d}:${u};`,"")}const o={color:c.color};return c.strikeThrough&&(o["text-decoration"]="line-through"),c.bold&&(o["font-weight"]="bold"),{text:a,style:h(o)}}function m(a,c){switch(typeof a){case"number":return""+a;case"string":return a.length+2<=c?`"${a}"`:`"${a.substr(0,c-7)}"+...`;case"boolean":return a?"true":"false";case"undefined":return"undefined";case"object":return a===null?"null":Array.isArray(a)?n(a,c):t(a,c);case"symbol":return a.toString();case"function":return`[[Function${a.name?" "+a.name:""}]]`;default:return""+a}}function n(a,c){let h="[ ",o=!0;for(const l of a){if(o||(h+=", "),h.length-5>c){h+="...";break}o=!1,h+=`${m(l,c-h.length)}`}return h+=" ]",h}function t(a,c){let h="{ ",o=!0;for(const[l,r]of Object.entries(a)){if(o||(h+=", "),h.length-5>c){h+="...";break}o=!1,h+=`${l}: ${m(r,c-h.length)}`}return h+=" }",h}function i(a,c){let h="";for(let o=1;o<=c;o++)h+=a;return h}function s(a,c){for(;a.lengthg===w}):!0;this.needsToRun=this.needsToRun||C,this.updateCount===0&&this.runIfNeeded()}beginUpdate(){this.updateCount++}endUpdate(){this.updateCount--,this.updateCount===0&&this.runIfNeeded()}runIfNeeded(){var w;if(!this.needsToRun)return;const b=this.staleDependencies;this.staleDependencies=this._dependencies,this._dependencies=b,this.needsToRun=!1,(w=(0,S.getLogger)())===null||w===void 0||w.handleAutorunTriggered(this);try{this.runFn(this)}finally{for(const C of this.staleDependencies)C.removeObserver(this);this.staleDependencies.clear()}}dispose(){this.disposed=!0;for(const w of this._dependencies)w.removeObserver(this);this._dependencies.clear()}toString(){return`Autorun<${this.debugName}>`}}e.AutorunObserver=y,function(D){D.Observer=y}(k=e.autorun||(e.autorun={}))}),define(X[362],J([1,0,185]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ObservableValue=e.observableValue=e.TransactionImpl=e.getFunctionName=e.transaction=e.BaseObservable=e.ConvenientObservable=void 0;class k{get TChange(){return null}read(n){return n.subscribeTo(this),this.get()}}e.ConvenientObservable=k;class y extends k{constructor(){super(...arguments),this.observers=new Set}addObserver(n){const t=this.observers.size;this.observers.add(n),t===0&&this.onFirstObserverAdded()}removeObserver(n){this.observers.delete(n)&&this.observers.size===0&&this.onLastObserverRemoved()}onFirstObserverAdded(){}onLastObserverRemoved(){}}e.BaseObservable=y;function D(m,n){var t,i;const s=new b(m,n);try{(t=(0,S.getLogger)())===null||t===void 0||t.handleBeginTransaction(s),m(s)}finally{s.finish(),(i=(0,S.getLogger)())===null||i===void 0||i.handleEndTransaction()}}e.transaction=D;function w(m){const n=m.toString(),i=/\/\*\*\s*@description\s*([^*]*)\*\//.exec(n),s=i?i[1]:void 0;return s?.trim()}e.getFunctionName=w;class b{constructor(n,t){this.fn=n,this._getDebugName=t,this.updatingObservers=[]}getDebugName(){return this._getDebugName?this._getDebugName():w(this.fn)}updateObserver(n,t){this.updatingObservers.push({observer:n,observable:t}),n.beginUpdate(t)}finish(){const n=this.updatingObservers;this.updatingObservers=null;for(const{observer:t,observable:i}of n)t.endUpdate(i)}}e.TransactionImpl=b;function C(m,n){return new g(m,n)}e.observableValue=C;class g extends y{constructor(n,t){super(),this.debugName=n,this.value=t}get(){return this.value}set(n,t,i){var s;if(this.value===n)return;if(!t){D(c=>{this.set(n,c,i)},()=>`Setting ${this.debugName}`);return}const a=this.value;this.value=n,(s=(0,S.getLogger)())===null||s===void 0||s.handleObservableChanged(this,{oldValue:a,newValue:n,change:i,didChange:!0});for(const c of this.observers)t.updateObserver(c,this),c.handleChange(this,i)}toString(){return`${this.debugName}: ${this.value}`}}e.ObservableValue=g}),define(X[363],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.__dummy=void 0,e.__dummy=0});var ri=this&&this.__createBinding||(Object.create?function(j,e,S,k){k===void 0&&(k=S);var y=Object.getOwnPropertyDescriptor(e,S);(!y||("get"in y?!e.__esModule:y.writable||y.configurable))&&(y={enumerable:!0,get:function(){return e[S]}}),Object.defineProperty(j,k,y)}:function(j,e,S,k){k===void 0&&(k=S),j[k]=e[S]}),ai=this&&this.__exportStar||function(j,e){for(var S in j)S!=="default"&&!Object.prototype.hasOwnProperty.call(e,S)&&ri(e,j,S)};define(X[245],J([1,0,362,361,363,185]),function(j,e,S,k,y,D){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.autorun=e.transaction=e.observableValue=void 0,Object.defineProperty(e,"observableValue",{enumerable:!0,get:function(){return S.observableValue}}),Object.defineProperty(e,"transaction",{enumerable:!0,get:function(){return S.transaction}}),Object.defineProperty(e,"autorun",{enumerable:!0,get:function(){return k.autorun}}),ai(y,e),!1&&(0,D.setLogger)(new D.ConsoleObservableLogger)}),define(X[156],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Range=void 0;var S;(function(k){function y(C,g){if(C.start>=g.end||g.start>=C.end)return{start:0,end:0};const m=Math.max(C.start,g.start),n=Math.min(C.end,g.end);return n-m<=0?{start:0,end:0}:{start:m,end:n}}k.intersect=y;function D(C){return C.end-C.start<=0}k.isEmpty=D;function w(C,g){return!D(y(C,g))}k.intersects=w;function b(C,g){const m=[],n={start:C.start,end:Math.min(g.start,C.end)},t={start:Math.max(g.end,C.start),end:C.end};return D(n)||m.push(n),D(t)||m.push(t),m}k.relativeComplement=b})(S=e.Range||(e.Range={}))}),define(X[364],J([1,0,156]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.RangeMap=e.consolidate=e.shift=e.groupIntersect=void 0;function k(C,g){const m=[];for(const n of g){if(C.start>=n.range.end)continue;if(C.endg.concat(m),[]))}class b{constructor(){this.groups=[],this._size=0}splice(g,m,n=[]){const t=n.length-m,i=k({start:0,end:g},this.groups),s=k({start:g+m,end:Number.POSITIVE_INFINITY},this.groups).map(c=>({range:y(c.range,t),size:c.size})),a=n.map((c,h)=>({range:{start:g+h,end:g+h+1},size:c.size}));this.groups=w(i,a,s),this._size=this.groups.reduce((c,h)=>c+h.size*(h.range.end-h.range.start),0)}get count(){const g=this.groups.length;return g?this.groups[g-1].range.end:0}get size(){return this._size}indexAt(g){if(g<0)return-1;let m=0,n=0;for(const t of this.groups){const i=t.range.end-t.range.start,s=n+i*t.size;if(g=ue.length?me:ue[_e]})}e.format=b;function C(Z){return Z.replace(/[<>&]/g,function(ue){switch(ue){case"<":return"<";case">":return">";case"&":return"&";default:return ue}})}e.escape=C;function g(Z){return Z.replace(/[\\\{\}\*\+\?\|\^\$\.\[\]\(\)]/g,"\\$&")}e.escapeRegExpCharacters=g;function m(Z,ue=" "){const me=n(Z,ue);return t(me,ue)}e.trim=m;function n(Z,ue){if(!Z||!ue)return Z;const me=ue.length;if(me===0||Z.length===0)return Z;let Ce=0;for(;Z.indexOf(ue,Ce)===Ce;)Ce=Ce+me;return Z.substring(Ce)}e.ltrim=n;function t(Z,ue){if(!Z||!ue)return Z;const me=ue.length,Ce=Z.length;if(me===0||Ce===0)return Z;let _e=Ce,we=-1;for(;we=Z.lastIndexOf(ue,_e-1),!(we===-1||we+me!==_e);){if(we===0)return"";_e=we}return Z.substring(0,_e)}e.rtrim=t;function i(Z){return Z.replace(/[\-\\\{\}\+\?\|\^\$\.\,\[\]\(\)\#\s]/g,"\\$&").replace(/[\*]/g,".*")}e.convertSimple2RegExpPattern=i;function s(Z){return Z.replace(/\*/g,"")}e.stripWildcards=s;function a(Z,ue,me={}){if(!Z)throw new Error("Cannot create regex from empty string");ue||(Z=g(Z)),me.wholeWord&&(/\B/.test(Z.charAt(0))||(Z="\\b"+Z),/\B/.test(Z.charAt(Z.length-1))||(Z=Z+"\\b"));let Ce="";return me.global&&(Ce+="g"),me.matchCase||(Ce+="i"),me.multiline&&(Ce+="m"),me.unicode&&(Ce+="u"),new RegExp(Z,Ce)}e.createRegExp=a;function c(Z){return Z.source==="^"||Z.source==="^$"||Z.source==="$"||Z.source==="^\\s*$"?!1:!!(Z.exec("")&&Z.lastIndex===0)}e.regExpLeadsToEndlessLoop=c;function h(Z){return(Z.global?"g":"")+(Z.ignoreCase?"i":"")+(Z.multiline?"m":"")+(Z.unicode?"u":"")}e.regExpFlags=h;function o(Z){return Z.split(/\r\n|\r|\n/)}e.splitLines=o;function l(Z){for(let ue=0,me=Z.length;ue=0;me--){const Ce=Z.charCodeAt(me);if(Ce!==32&&Ce!==9)return me}return-1}e.lastNonWhitespaceIndex=d;function u(Z,ue){return Zue?1:0}e.compare=u;function _(Z,ue,me=0,Ce=Z.length,_e=0,we=ue.length){for(;mege)return 1}const ye=Ce-me,ke=we-_e;return yeke?1:0}e.compareSubstring=_;function f(Z,ue){return v(Z,ue,0,Z.length,0,ue.length)}e.compareIgnoreCase=f;function v(Z,ue,me=0,Ce=Z.length,_e=0,we=ue.length){for(;me=128||ge>=128)return _(Z.toLowerCase(),ue.toLowerCase(),me,Ce,_e,we);L(De)&&(De-=32),L(ge)&&(ge-=32);const pe=De-ge;if(pe!==0)return pe}const ye=Ce-me,ke=we-_e;return yeke?1:0}e.compareSubstringIgnoreCase=v;function p(Z){return Z>=48&&Z<=57}e.isAsciiDigit=p;function L(Z){return Z>=97&&Z<=122}e.isLowerAsciiLetter=L;function E(Z){return Z>=65&&Z<=90}e.isUpperAsciiLetter=E;function I(Z,ue){return Z.length===ue.length&&v(Z,ue)===0}e.equalsIgnoreCase=I;function T(Z,ue){const me=ue.length;return ue.length>Z.length?!1:v(Z,ue,0,me)===0}e.startsWithIgnoreCase=T;function F(Z,ue){const me=Math.min(Z.length,ue.length);let Ce;for(Ce=0;Ce1){const Ce=Z.charCodeAt(ue-2);if(M(Ce))return A(Ce,me)}return me}class W{get offset(){return this._offset}constructor(ue,me=0){this._str=ue,this._len=ue.length,this._offset=me}setOffset(ue){this._offset=ue}prevCodePoint(){const ue=x(this._str,this._offset);return this._offset-=ue>=65536?2:1,ue}nextCodePoint(){const ue=P(this._str,this._len,this._offset);return this._offset+=ue>=65536?2:1,ue}eol(){return this._offset>=this._len}}e.CodePointIterator=W;class U{get offset(){return this._iterator.offset}constructor(ue,me=0){this._iterator=new W(ue,me)}nextGraphemeLength(){const ue=oe.getInstance(),me=this._iterator,Ce=me.offset;let _e=ue.getGraphemeBreakType(me.nextCodePoint());for(;!me.eol();){const we=me.offset,ye=ue.getGraphemeBreakType(me.nextCodePoint());if(he(_e,ye)){me.setOffset(we);break}_e=ye}return me.offset-Ce}prevGraphemeLength(){const ue=oe.getInstance(),me=this._iterator,Ce=me.offset;let _e=ue.getGraphemeBreakType(me.prevCodePoint());for(;me.offset>0;){const we=me.offset,ye=ue.getGraphemeBreakType(me.prevCodePoint());if(he(ye,_e)){me.setOffset(we);break}_e=ye}return Ce-me.offset}eol(){return this._iterator.eol()}}e.GraphemeIterator=U;function O(Z,ue){return new U(Z,ue).nextGraphemeLength()}e.nextCharLength=O;function $(Z,ue){return new U(Z,ue).prevGraphemeLength()}e.prevCharLength=$;function Q(Z,ue){ue>0&&N(Z.charCodeAt(ue))&&ue--;const me=ue+O(Z,ue);return[me-$(Z,me),me]}e.getCharContainingOffset=Q;let se;function le(){return/(?:[\u05BE\u05C0\u05C3\u05C6\u05D0-\u05F4\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u0710\u0712-\u072F\u074D-\u07A5\u07B1-\u07EA\u07F4\u07F5\u07FA\u07FE-\u0815\u081A\u0824\u0828\u0830-\u0858\u085E-\u088E\u08A0-\u08C9\u200F\uFB1D\uFB1F-\uFB28\uFB2A-\uFD3D\uFD50-\uFDC7\uFDF0-\uFDFC\uFE70-\uFEFC]|\uD802[\uDC00-\uDD1B\uDD20-\uDE00\uDE10-\uDE35\uDE40-\uDEE4\uDEEB-\uDF35\uDF40-\uDFFF]|\uD803[\uDC00-\uDD23\uDE80-\uDEA9\uDEAD-\uDF45\uDF51-\uDF81\uDF86-\uDFF6]|\uD83A[\uDC00-\uDCCF\uDD00-\uDD43\uDD4B-\uDFFF]|\uD83B[\uDC00-\uDEBB])/}function te(Z){return se||(se=le()),se.test(Z)}e.containsRTL=te;const re=/^[\t\n\r\x20-\x7E]*$/;function H(Z){return re.test(Z)}e.isBasicASCII=H,e.UNUSUAL_LINE_TERMINATORS=/[\u2028\u2029]/;function B(Z){return e.UNUSUAL_LINE_TERMINATORS.test(Z)}e.containsUnusualLineTerminators=B;function q(Z){return Z>=11904&&Z<=55215||Z>=63744&&Z<=64255||Z>=65281&&Z<=65374}e.isFullWidthCharacter=q;function G(Z){return Z>=127462&&Z<=127487||Z===8986||Z===8987||Z===9200||Z===9203||Z>=9728&&Z<=10175||Z===11088||Z===11093||Z>=127744&&Z<=128591||Z>=128640&&Z<=128764||Z>=128992&&Z<=129008||Z>=129280&&Z<=129535||Z>=129648&&Z<=129782}e.isEmojiImprecise=G,e.UTF8_BOM_CHARACTER=String.fromCharCode(65279);function Y(Z){return!!(Z&&Z.length>0&&Z.charCodeAt(0)===65279)}e.startsWithUTF8BOM=Y;function ne(Z,ue=!1){return Z?(ue&&(Z=Z.replace(/\\./g,"")),Z.toLowerCase()!==Z):!1}e.containsUppercaseCharacter=ne;function de(Z){return Z=Z%(2*26),Z<26?String.fromCharCode(97+Z):String.fromCharCode(65+Z-26)}e.singleLetterHash=de;function he(Z,ue){return Z===0?ue!==5&&ue!==7:Z===2&&ue===3?!1:Z===4||Z===2||Z===3||ue===4||ue===2||ue===3?!0:!(Z===8&&(ue===8||ue===9||ue===11||ue===12)||(Z===11||Z===9)&&(ue===9||ue===10)||(Z===12||Z===10)&&ue===10||ue===5||ue===13||ue===7||Z===1||Z===13&&ue===14||Z===6&&ue===6)}class oe{static getInstance(){return oe._INSTANCE||(oe._INSTANCE=new oe),oe._INSTANCE}constructor(){this._data=ce()}getGraphemeBreakType(ue){if(ue<32)return ue===10?3:ue===13?2:4;if(ue<127)return 0;const me=this._data,Ce=me.length/3;let _e=1;for(;_e<=Ce;)if(ueme[3*_e+1])_e=2*_e+1;else return me[3*_e+2];return 0}}oe._INSTANCE=null;function ce(){return JSON.parse("[0,0,0,51229,51255,12,44061,44087,12,127462,127487,6,7083,7085,5,47645,47671,12,54813,54839,12,128678,128678,14,3270,3270,5,9919,9923,14,45853,45879,12,49437,49463,12,53021,53047,12,71216,71218,7,128398,128399,14,129360,129374,14,2519,2519,5,4448,4519,9,9742,9742,14,12336,12336,14,44957,44983,12,46749,46775,12,48541,48567,12,50333,50359,12,52125,52151,12,53917,53943,12,69888,69890,5,73018,73018,5,127990,127990,14,128558,128559,14,128759,128760,14,129653,129655,14,2027,2035,5,2891,2892,7,3761,3761,5,6683,6683,5,8293,8293,4,9825,9826,14,9999,9999,14,43452,43453,5,44509,44535,12,45405,45431,12,46301,46327,12,47197,47223,12,48093,48119,12,48989,49015,12,49885,49911,12,50781,50807,12,51677,51703,12,52573,52599,12,53469,53495,12,54365,54391,12,65279,65279,4,70471,70472,7,72145,72147,7,119173,119179,5,127799,127818,14,128240,128244,14,128512,128512,14,128652,128652,14,128721,128722,14,129292,129292,14,129445,129450,14,129734,129743,14,1476,1477,5,2366,2368,7,2750,2752,7,3076,3076,5,3415,3415,5,4141,4144,5,6109,6109,5,6964,6964,5,7394,7400,5,9197,9198,14,9770,9770,14,9877,9877,14,9968,9969,14,10084,10084,14,43052,43052,5,43713,43713,5,44285,44311,12,44733,44759,12,45181,45207,12,45629,45655,12,46077,46103,12,46525,46551,12,46973,46999,12,47421,47447,12,47869,47895,12,48317,48343,12,48765,48791,12,49213,49239,12,49661,49687,12,50109,50135,12,50557,50583,12,51005,51031,12,51453,51479,12,51901,51927,12,52349,52375,12,52797,52823,12,53245,53271,12,53693,53719,12,54141,54167,12,54589,54615,12,55037,55063,12,69506,69509,5,70191,70193,5,70841,70841,7,71463,71467,5,72330,72342,5,94031,94031,5,123628,123631,5,127763,127765,14,127941,127941,14,128043,128062,14,128302,128317,14,128465,128467,14,128539,128539,14,128640,128640,14,128662,128662,14,128703,128703,14,128745,128745,14,129004,129007,14,129329,129330,14,129402,129402,14,129483,129483,14,129686,129704,14,130048,131069,14,173,173,4,1757,1757,1,2200,2207,5,2434,2435,7,2631,2632,5,2817,2817,5,3008,3008,5,3201,3201,5,3387,3388,5,3542,3542,5,3902,3903,7,4190,4192,5,6002,6003,5,6439,6440,5,6765,6770,7,7019,7027,5,7154,7155,7,8205,8205,13,8505,8505,14,9654,9654,14,9757,9757,14,9792,9792,14,9852,9853,14,9890,9894,14,9937,9937,14,9981,9981,14,10035,10036,14,11035,11036,14,42654,42655,5,43346,43347,7,43587,43587,5,44006,44007,7,44173,44199,12,44397,44423,12,44621,44647,12,44845,44871,12,45069,45095,12,45293,45319,12,45517,45543,12,45741,45767,12,45965,45991,12,46189,46215,12,46413,46439,12,46637,46663,12,46861,46887,12,47085,47111,12,47309,47335,12,47533,47559,12,47757,47783,12,47981,48007,12,48205,48231,12,48429,48455,12,48653,48679,12,48877,48903,12,49101,49127,12,49325,49351,12,49549,49575,12,49773,49799,12,49997,50023,12,50221,50247,12,50445,50471,12,50669,50695,12,50893,50919,12,51117,51143,12,51341,51367,12,51565,51591,12,51789,51815,12,52013,52039,12,52237,52263,12,52461,52487,12,52685,52711,12,52909,52935,12,53133,53159,12,53357,53383,12,53581,53607,12,53805,53831,12,54029,54055,12,54253,54279,12,54477,54503,12,54701,54727,12,54925,54951,12,55149,55175,12,68101,68102,5,69762,69762,7,70067,70069,7,70371,70378,5,70720,70721,7,71087,71087,5,71341,71341,5,71995,71996,5,72249,72249,7,72850,72871,5,73109,73109,5,118576,118598,5,121505,121519,5,127245,127247,14,127568,127569,14,127777,127777,14,127872,127891,14,127956,127967,14,128015,128016,14,128110,128172,14,128259,128259,14,128367,128368,14,128424,128424,14,128488,128488,14,128530,128532,14,128550,128551,14,128566,128566,14,128647,128647,14,128656,128656,14,128667,128673,14,128691,128693,14,128715,128715,14,128728,128732,14,128752,128752,14,128765,128767,14,129096,129103,14,129311,129311,14,129344,129349,14,129394,129394,14,129413,129425,14,129466,129471,14,129511,129535,14,129664,129666,14,129719,129722,14,129760,129767,14,917536,917631,5,13,13,2,1160,1161,5,1564,1564,4,1807,1807,1,2085,2087,5,2307,2307,7,2382,2383,7,2497,2500,5,2563,2563,7,2677,2677,5,2763,2764,7,2879,2879,5,2914,2915,5,3021,3021,5,3142,3144,5,3263,3263,5,3285,3286,5,3398,3400,7,3530,3530,5,3633,3633,5,3864,3865,5,3974,3975,5,4155,4156,7,4229,4230,5,5909,5909,7,6078,6085,7,6277,6278,5,6451,6456,7,6744,6750,5,6846,6846,5,6972,6972,5,7074,7077,5,7146,7148,7,7222,7223,5,7416,7417,5,8234,8238,4,8417,8417,5,9000,9000,14,9203,9203,14,9730,9731,14,9748,9749,14,9762,9763,14,9776,9783,14,9800,9811,14,9831,9831,14,9872,9873,14,9882,9882,14,9900,9903,14,9929,9933,14,9941,9960,14,9974,9974,14,9989,9989,14,10006,10006,14,10062,10062,14,10160,10160,14,11647,11647,5,12953,12953,14,43019,43019,5,43232,43249,5,43443,43443,5,43567,43568,7,43696,43696,5,43765,43765,7,44013,44013,5,44117,44143,12,44229,44255,12,44341,44367,12,44453,44479,12,44565,44591,12,44677,44703,12,44789,44815,12,44901,44927,12,45013,45039,12,45125,45151,12,45237,45263,12,45349,45375,12,45461,45487,12,45573,45599,12,45685,45711,12,45797,45823,12,45909,45935,12,46021,46047,12,46133,46159,12,46245,46271,12,46357,46383,12,46469,46495,12,46581,46607,12,46693,46719,12,46805,46831,12,46917,46943,12,47029,47055,12,47141,47167,12,47253,47279,12,47365,47391,12,47477,47503,12,47589,47615,12,47701,47727,12,47813,47839,12,47925,47951,12,48037,48063,12,48149,48175,12,48261,48287,12,48373,48399,12,48485,48511,12,48597,48623,12,48709,48735,12,48821,48847,12,48933,48959,12,49045,49071,12,49157,49183,12,49269,49295,12,49381,49407,12,49493,49519,12,49605,49631,12,49717,49743,12,49829,49855,12,49941,49967,12,50053,50079,12,50165,50191,12,50277,50303,12,50389,50415,12,50501,50527,12,50613,50639,12,50725,50751,12,50837,50863,12,50949,50975,12,51061,51087,12,51173,51199,12,51285,51311,12,51397,51423,12,51509,51535,12,51621,51647,12,51733,51759,12,51845,51871,12,51957,51983,12,52069,52095,12,52181,52207,12,52293,52319,12,52405,52431,12,52517,52543,12,52629,52655,12,52741,52767,12,52853,52879,12,52965,52991,12,53077,53103,12,53189,53215,12,53301,53327,12,53413,53439,12,53525,53551,12,53637,53663,12,53749,53775,12,53861,53887,12,53973,53999,12,54085,54111,12,54197,54223,12,54309,54335,12,54421,54447,12,54533,54559,12,54645,54671,12,54757,54783,12,54869,54895,12,54981,55007,12,55093,55119,12,55243,55291,10,66045,66045,5,68325,68326,5,69688,69702,5,69817,69818,5,69957,69958,7,70089,70092,5,70198,70199,5,70462,70462,5,70502,70508,5,70750,70750,5,70846,70846,7,71100,71101,5,71230,71230,7,71351,71351,5,71737,71738,5,72000,72000,7,72160,72160,5,72273,72278,5,72752,72758,5,72882,72883,5,73031,73031,5,73461,73462,7,94192,94193,7,119149,119149,7,121403,121452,5,122915,122916,5,126980,126980,14,127358,127359,14,127535,127535,14,127759,127759,14,127771,127771,14,127792,127793,14,127825,127867,14,127897,127899,14,127945,127945,14,127985,127986,14,128000,128007,14,128021,128021,14,128066,128100,14,128184,128235,14,128249,128252,14,128266,128276,14,128335,128335,14,128379,128390,14,128407,128419,14,128444,128444,14,128481,128481,14,128499,128499,14,128526,128526,14,128536,128536,14,128543,128543,14,128556,128556,14,128564,128564,14,128577,128580,14,128643,128645,14,128649,128649,14,128654,128654,14,128660,128660,14,128664,128664,14,128675,128675,14,128686,128689,14,128695,128696,14,128705,128709,14,128717,128719,14,128725,128725,14,128736,128741,14,128747,128748,14,128755,128755,14,128762,128762,14,128981,128991,14,129009,129023,14,129160,129167,14,129296,129304,14,129320,129327,14,129340,129342,14,129356,129356,14,129388,129392,14,129399,129400,14,129404,129407,14,129432,129442,14,129454,129455,14,129473,129474,14,129485,129487,14,129648,129651,14,129659,129660,14,129671,129679,14,129709,129711,14,129728,129730,14,129751,129753,14,129776,129782,14,917505,917505,4,917760,917999,5,10,10,3,127,159,4,768,879,5,1471,1471,5,1536,1541,1,1648,1648,5,1767,1768,5,1840,1866,5,2070,2073,5,2137,2139,5,2274,2274,1,2363,2363,7,2377,2380,7,2402,2403,5,2494,2494,5,2507,2508,7,2558,2558,5,2622,2624,7,2641,2641,5,2691,2691,7,2759,2760,5,2786,2787,5,2876,2876,5,2881,2884,5,2901,2902,5,3006,3006,5,3014,3016,7,3072,3072,5,3134,3136,5,3157,3158,5,3260,3260,5,3266,3266,5,3274,3275,7,3328,3329,5,3391,3392,7,3405,3405,5,3457,3457,5,3536,3537,7,3551,3551,5,3636,3642,5,3764,3772,5,3895,3895,5,3967,3967,7,3993,4028,5,4146,4151,5,4182,4183,7,4226,4226,5,4253,4253,5,4957,4959,5,5940,5940,7,6070,6070,7,6087,6088,7,6158,6158,4,6432,6434,5,6448,6449,7,6679,6680,5,6742,6742,5,6754,6754,5,6783,6783,5,6912,6915,5,6966,6970,5,6978,6978,5,7042,7042,7,7080,7081,5,7143,7143,7,7150,7150,7,7212,7219,5,7380,7392,5,7412,7412,5,8203,8203,4,8232,8232,4,8265,8265,14,8400,8412,5,8421,8432,5,8617,8618,14,9167,9167,14,9200,9200,14,9410,9410,14,9723,9726,14,9733,9733,14,9745,9745,14,9752,9752,14,9760,9760,14,9766,9766,14,9774,9774,14,9786,9786,14,9794,9794,14,9823,9823,14,9828,9828,14,9833,9850,14,9855,9855,14,9875,9875,14,9880,9880,14,9885,9887,14,9896,9897,14,9906,9916,14,9926,9927,14,9935,9935,14,9939,9939,14,9962,9962,14,9972,9972,14,9978,9978,14,9986,9986,14,9997,9997,14,10002,10002,14,10017,10017,14,10055,10055,14,10071,10071,14,10133,10135,14,10548,10549,14,11093,11093,14,12330,12333,5,12441,12442,5,42608,42610,5,43010,43010,5,43045,43046,5,43188,43203,7,43302,43309,5,43392,43394,5,43446,43449,5,43493,43493,5,43571,43572,7,43597,43597,7,43703,43704,5,43756,43757,5,44003,44004,7,44009,44010,7,44033,44059,12,44089,44115,12,44145,44171,12,44201,44227,12,44257,44283,12,44313,44339,12,44369,44395,12,44425,44451,12,44481,44507,12,44537,44563,12,44593,44619,12,44649,44675,12,44705,44731,12,44761,44787,12,44817,44843,12,44873,44899,12,44929,44955,12,44985,45011,12,45041,45067,12,45097,45123,12,45153,45179,12,45209,45235,12,45265,45291,12,45321,45347,12,45377,45403,12,45433,45459,12,45489,45515,12,45545,45571,12,45601,45627,12,45657,45683,12,45713,45739,12,45769,45795,12,45825,45851,12,45881,45907,12,45937,45963,12,45993,46019,12,46049,46075,12,46105,46131,12,46161,46187,12,46217,46243,12,46273,46299,12,46329,46355,12,46385,46411,12,46441,46467,12,46497,46523,12,46553,46579,12,46609,46635,12,46665,46691,12,46721,46747,12,46777,46803,12,46833,46859,12,46889,46915,12,46945,46971,12,47001,47027,12,47057,47083,12,47113,47139,12,47169,47195,12,47225,47251,12,47281,47307,12,47337,47363,12,47393,47419,12,47449,47475,12,47505,47531,12,47561,47587,12,47617,47643,12,47673,47699,12,47729,47755,12,47785,47811,12,47841,47867,12,47897,47923,12,47953,47979,12,48009,48035,12,48065,48091,12,48121,48147,12,48177,48203,12,48233,48259,12,48289,48315,12,48345,48371,12,48401,48427,12,48457,48483,12,48513,48539,12,48569,48595,12,48625,48651,12,48681,48707,12,48737,48763,12,48793,48819,12,48849,48875,12,48905,48931,12,48961,48987,12,49017,49043,12,49073,49099,12,49129,49155,12,49185,49211,12,49241,49267,12,49297,49323,12,49353,49379,12,49409,49435,12,49465,49491,12,49521,49547,12,49577,49603,12,49633,49659,12,49689,49715,12,49745,49771,12,49801,49827,12,49857,49883,12,49913,49939,12,49969,49995,12,50025,50051,12,50081,50107,12,50137,50163,12,50193,50219,12,50249,50275,12,50305,50331,12,50361,50387,12,50417,50443,12,50473,50499,12,50529,50555,12,50585,50611,12,50641,50667,12,50697,50723,12,50753,50779,12,50809,50835,12,50865,50891,12,50921,50947,12,50977,51003,12,51033,51059,12,51089,51115,12,51145,51171,12,51201,51227,12,51257,51283,12,51313,51339,12,51369,51395,12,51425,51451,12,51481,51507,12,51537,51563,12,51593,51619,12,51649,51675,12,51705,51731,12,51761,51787,12,51817,51843,12,51873,51899,12,51929,51955,12,51985,52011,12,52041,52067,12,52097,52123,12,52153,52179,12,52209,52235,12,52265,52291,12,52321,52347,12,52377,52403,12,52433,52459,12,52489,52515,12,52545,52571,12,52601,52627,12,52657,52683,12,52713,52739,12,52769,52795,12,52825,52851,12,52881,52907,12,52937,52963,12,52993,53019,12,53049,53075,12,53105,53131,12,53161,53187,12,53217,53243,12,53273,53299,12,53329,53355,12,53385,53411,12,53441,53467,12,53497,53523,12,53553,53579,12,53609,53635,12,53665,53691,12,53721,53747,12,53777,53803,12,53833,53859,12,53889,53915,12,53945,53971,12,54001,54027,12,54057,54083,12,54113,54139,12,54169,54195,12,54225,54251,12,54281,54307,12,54337,54363,12,54393,54419,12,54449,54475,12,54505,54531,12,54561,54587,12,54617,54643,12,54673,54699,12,54729,54755,12,54785,54811,12,54841,54867,12,54897,54923,12,54953,54979,12,55009,55035,12,55065,55091,12,55121,55147,12,55177,55203,12,65024,65039,5,65520,65528,4,66422,66426,5,68152,68154,5,69291,69292,5,69633,69633,5,69747,69748,5,69811,69814,5,69826,69826,5,69932,69932,7,70016,70017,5,70079,70080,7,70095,70095,5,70196,70196,5,70367,70367,5,70402,70403,7,70464,70464,5,70487,70487,5,70709,70711,7,70725,70725,7,70833,70834,7,70843,70844,7,70849,70849,7,71090,71093,5,71103,71104,5,71227,71228,7,71339,71339,5,71344,71349,5,71458,71461,5,71727,71735,5,71985,71989,7,71998,71998,5,72002,72002,7,72154,72155,5,72193,72202,5,72251,72254,5,72281,72283,5,72344,72345,5,72766,72766,7,72874,72880,5,72885,72886,5,73023,73029,5,73104,73105,5,73111,73111,5,92912,92916,5,94095,94098,5,113824,113827,4,119142,119142,7,119155,119162,4,119362,119364,5,121476,121476,5,122888,122904,5,123184,123190,5,125252,125258,5,127183,127183,14,127340,127343,14,127377,127386,14,127491,127503,14,127548,127551,14,127744,127756,14,127761,127761,14,127769,127769,14,127773,127774,14,127780,127788,14,127796,127797,14,127820,127823,14,127869,127869,14,127894,127895,14,127902,127903,14,127943,127943,14,127947,127950,14,127972,127972,14,127988,127988,14,127992,127994,14,128009,128011,14,128019,128019,14,128023,128041,14,128064,128064,14,128102,128107,14,128174,128181,14,128238,128238,14,128246,128247,14,128254,128254,14,128264,128264,14,128278,128299,14,128329,128330,14,128348,128359,14,128371,128377,14,128392,128393,14,128401,128404,14,128421,128421,14,128433,128434,14,128450,128452,14,128476,128478,14,128483,128483,14,128495,128495,14,128506,128506,14,128519,128520,14,128528,128528,14,128534,128534,14,128538,128538,14,128540,128542,14,128544,128549,14,128552,128555,14,128557,128557,14,128560,128563,14,128565,128565,14,128567,128576,14,128581,128591,14,128641,128642,14,128646,128646,14,128648,128648,14,128650,128651,14,128653,128653,14,128655,128655,14,128657,128659,14,128661,128661,14,128663,128663,14,128665,128666,14,128674,128674,14,128676,128677,14,128679,128685,14,128690,128690,14,128694,128694,14,128697,128702,14,128704,128704,14,128710,128714,14,128716,128716,14,128720,128720,14,128723,128724,14,128726,128727,14,128733,128735,14,128742,128744,14,128746,128746,14,128749,128751,14,128753,128754,14,128756,128758,14,128761,128761,14,128763,128764,14,128884,128895,14,128992,129003,14,129008,129008,14,129036,129039,14,129114,129119,14,129198,129279,14,129293,129295,14,129305,129310,14,129312,129319,14,129328,129328,14,129331,129338,14,129343,129343,14,129351,129355,14,129357,129359,14,129375,129387,14,129393,129393,14,129395,129398,14,129401,129401,14,129403,129403,14,129408,129412,14,129426,129431,14,129443,129444,14,129451,129453,14,129456,129465,14,129472,129472,14,129475,129482,14,129484,129484,14,129488,129510,14,129536,129647,14,129652,129652,14,129656,129658,14,129661,129663,14,129667,129670,14,129680,129685,14,129705,129708,14,129712,129718,14,129723,129727,14,129731,129733,14,129744,129750,14,129754,129759,14,129768,129775,14,129783,129791,14,917504,917504,4,917506,917535,4,917632,917759,4,918000,921599,4,0,9,4,11,12,4,14,31,4,169,169,14,174,174,14,1155,1159,5,1425,1469,5,1473,1474,5,1479,1479,5,1552,1562,5,1611,1631,5,1750,1756,5,1759,1764,5,1770,1773,5,1809,1809,5,1958,1968,5,2045,2045,5,2075,2083,5,2089,2093,5,2192,2193,1,2250,2273,5,2275,2306,5,2362,2362,5,2364,2364,5,2369,2376,5,2381,2381,5,2385,2391,5,2433,2433,5,2492,2492,5,2495,2496,7,2503,2504,7,2509,2509,5,2530,2531,5,2561,2562,5,2620,2620,5,2625,2626,5,2635,2637,5,2672,2673,5,2689,2690,5,2748,2748,5,2753,2757,5,2761,2761,7,2765,2765,5,2810,2815,5,2818,2819,7,2878,2878,5,2880,2880,7,2887,2888,7,2893,2893,5,2903,2903,5,2946,2946,5,3007,3007,7,3009,3010,7,3018,3020,7,3031,3031,5,3073,3075,7,3132,3132,5,3137,3140,7,3146,3149,5,3170,3171,5,3202,3203,7,3262,3262,7,3264,3265,7,3267,3268,7,3271,3272,7,3276,3277,5,3298,3299,5,3330,3331,7,3390,3390,5,3393,3396,5,3402,3404,7,3406,3406,1,3426,3427,5,3458,3459,7,3535,3535,5,3538,3540,5,3544,3550,7,3570,3571,7,3635,3635,7,3655,3662,5,3763,3763,7,3784,3789,5,3893,3893,5,3897,3897,5,3953,3966,5,3968,3972,5,3981,3991,5,4038,4038,5,4145,4145,7,4153,4154,5,4157,4158,5,4184,4185,5,4209,4212,5,4228,4228,7,4237,4237,5,4352,4447,8,4520,4607,10,5906,5908,5,5938,5939,5,5970,5971,5,6068,6069,5,6071,6077,5,6086,6086,5,6089,6099,5,6155,6157,5,6159,6159,5,6313,6313,5,6435,6438,7,6441,6443,7,6450,6450,5,6457,6459,5,6681,6682,7,6741,6741,7,6743,6743,7,6752,6752,5,6757,6764,5,6771,6780,5,6832,6845,5,6847,6862,5,6916,6916,7,6965,6965,5,6971,6971,7,6973,6977,7,6979,6980,7,7040,7041,5,7073,7073,7,7078,7079,7,7082,7082,7,7142,7142,5,7144,7145,5,7149,7149,5,7151,7153,5,7204,7211,7,7220,7221,7,7376,7378,5,7393,7393,7,7405,7405,5,7415,7415,7,7616,7679,5,8204,8204,5,8206,8207,4,8233,8233,4,8252,8252,14,8288,8292,4,8294,8303,4,8413,8416,5,8418,8420,5,8482,8482,14,8596,8601,14,8986,8987,14,9096,9096,14,9193,9196,14,9199,9199,14,9201,9202,14,9208,9210,14,9642,9643,14,9664,9664,14,9728,9729,14,9732,9732,14,9735,9741,14,9743,9744,14,9746,9746,14,9750,9751,14,9753,9756,14,9758,9759,14,9761,9761,14,9764,9765,14,9767,9769,14,9771,9773,14,9775,9775,14,9784,9785,14,9787,9791,14,9793,9793,14,9795,9799,14,9812,9822,14,9824,9824,14,9827,9827,14,9829,9830,14,9832,9832,14,9851,9851,14,9854,9854,14,9856,9861,14,9874,9874,14,9876,9876,14,9878,9879,14,9881,9881,14,9883,9884,14,9888,9889,14,9895,9895,14,9898,9899,14,9904,9905,14,9917,9918,14,9924,9925,14,9928,9928,14,9934,9934,14,9936,9936,14,9938,9938,14,9940,9940,14,9961,9961,14,9963,9967,14,9970,9971,14,9973,9973,14,9975,9977,14,9979,9980,14,9982,9985,14,9987,9988,14,9992,9996,14,9998,9998,14,10000,10001,14,10004,10004,14,10013,10013,14,10024,10024,14,10052,10052,14,10060,10060,14,10067,10069,14,10083,10083,14,10085,10087,14,10145,10145,14,10175,10175,14,11013,11015,14,11088,11088,14,11503,11505,5,11744,11775,5,12334,12335,5,12349,12349,14,12951,12951,14,42607,42607,5,42612,42621,5,42736,42737,5,43014,43014,5,43043,43044,7,43047,43047,7,43136,43137,7,43204,43205,5,43263,43263,5,43335,43345,5,43360,43388,8,43395,43395,7,43444,43445,7,43450,43451,7,43454,43456,7,43561,43566,5,43569,43570,5,43573,43574,5,43596,43596,5,43644,43644,5,43698,43700,5,43710,43711,5,43755,43755,7,43758,43759,7,43766,43766,5,44005,44005,5,44008,44008,5,44012,44012,7,44032,44032,11,44060,44060,11,44088,44088,11,44116,44116,11,44144,44144,11,44172,44172,11,44200,44200,11,44228,44228,11,44256,44256,11,44284,44284,11,44312,44312,11,44340,44340,11,44368,44368,11,44396,44396,11,44424,44424,11,44452,44452,11,44480,44480,11,44508,44508,11,44536,44536,11,44564,44564,11,44592,44592,11,44620,44620,11,44648,44648,11,44676,44676,11,44704,44704,11,44732,44732,11,44760,44760,11,44788,44788,11,44816,44816,11,44844,44844,11,44872,44872,11,44900,44900,11,44928,44928,11,44956,44956,11,44984,44984,11,45012,45012,11,45040,45040,11,45068,45068,11,45096,45096,11,45124,45124,11,45152,45152,11,45180,45180,11,45208,45208,11,45236,45236,11,45264,45264,11,45292,45292,11,45320,45320,11,45348,45348,11,45376,45376,11,45404,45404,11,45432,45432,11,45460,45460,11,45488,45488,11,45516,45516,11,45544,45544,11,45572,45572,11,45600,45600,11,45628,45628,11,45656,45656,11,45684,45684,11,45712,45712,11,45740,45740,11,45768,45768,11,45796,45796,11,45824,45824,11,45852,45852,11,45880,45880,11,45908,45908,11,45936,45936,11,45964,45964,11,45992,45992,11,46020,46020,11,46048,46048,11,46076,46076,11,46104,46104,11,46132,46132,11,46160,46160,11,46188,46188,11,46216,46216,11,46244,46244,11,46272,46272,11,46300,46300,11,46328,46328,11,46356,46356,11,46384,46384,11,46412,46412,11,46440,46440,11,46468,46468,11,46496,46496,11,46524,46524,11,46552,46552,11,46580,46580,11,46608,46608,11,46636,46636,11,46664,46664,11,46692,46692,11,46720,46720,11,46748,46748,11,46776,46776,11,46804,46804,11,46832,46832,11,46860,46860,11,46888,46888,11,46916,46916,11,46944,46944,11,46972,46972,11,47000,47000,11,47028,47028,11,47056,47056,11,47084,47084,11,47112,47112,11,47140,47140,11,47168,47168,11,47196,47196,11,47224,47224,11,47252,47252,11,47280,47280,11,47308,47308,11,47336,47336,11,47364,47364,11,47392,47392,11,47420,47420,11,47448,47448,11,47476,47476,11,47504,47504,11,47532,47532,11,47560,47560,11,47588,47588,11,47616,47616,11,47644,47644,11,47672,47672,11,47700,47700,11,47728,47728,11,47756,47756,11,47784,47784,11,47812,47812,11,47840,47840,11,47868,47868,11,47896,47896,11,47924,47924,11,47952,47952,11,47980,47980,11,48008,48008,11,48036,48036,11,48064,48064,11,48092,48092,11,48120,48120,11,48148,48148,11,48176,48176,11,48204,48204,11,48232,48232,11,48260,48260,11,48288,48288,11,48316,48316,11,48344,48344,11,48372,48372,11,48400,48400,11,48428,48428,11,48456,48456,11,48484,48484,11,48512,48512,11,48540,48540,11,48568,48568,11,48596,48596,11,48624,48624,11,48652,48652,11,48680,48680,11,48708,48708,11,48736,48736,11,48764,48764,11,48792,48792,11,48820,48820,11,48848,48848,11,48876,48876,11,48904,48904,11,48932,48932,11,48960,48960,11,48988,48988,11,49016,49016,11,49044,49044,11,49072,49072,11,49100,49100,11,49128,49128,11,49156,49156,11,49184,49184,11,49212,49212,11,49240,49240,11,49268,49268,11,49296,49296,11,49324,49324,11,49352,49352,11,49380,49380,11,49408,49408,11,49436,49436,11,49464,49464,11,49492,49492,11,49520,49520,11,49548,49548,11,49576,49576,11,49604,49604,11,49632,49632,11,49660,49660,11,49688,49688,11,49716,49716,11,49744,49744,11,49772,49772,11,49800,49800,11,49828,49828,11,49856,49856,11,49884,49884,11,49912,49912,11,49940,49940,11,49968,49968,11,49996,49996,11,50024,50024,11,50052,50052,11,50080,50080,11,50108,50108,11,50136,50136,11,50164,50164,11,50192,50192,11,50220,50220,11,50248,50248,11,50276,50276,11,50304,50304,11,50332,50332,11,50360,50360,11,50388,50388,11,50416,50416,11,50444,50444,11,50472,50472,11,50500,50500,11,50528,50528,11,50556,50556,11,50584,50584,11,50612,50612,11,50640,50640,11,50668,50668,11,50696,50696,11,50724,50724,11,50752,50752,11,50780,50780,11,50808,50808,11,50836,50836,11,50864,50864,11,50892,50892,11,50920,50920,11,50948,50948,11,50976,50976,11,51004,51004,11,51032,51032,11,51060,51060,11,51088,51088,11,51116,51116,11,51144,51144,11,51172,51172,11,51200,51200,11,51228,51228,11,51256,51256,11,51284,51284,11,51312,51312,11,51340,51340,11,51368,51368,11,51396,51396,11,51424,51424,11,51452,51452,11,51480,51480,11,51508,51508,11,51536,51536,11,51564,51564,11,51592,51592,11,51620,51620,11,51648,51648,11,51676,51676,11,51704,51704,11,51732,51732,11,51760,51760,11,51788,51788,11,51816,51816,11,51844,51844,11,51872,51872,11,51900,51900,11,51928,51928,11,51956,51956,11,51984,51984,11,52012,52012,11,52040,52040,11,52068,52068,11,52096,52096,11,52124,52124,11,52152,52152,11,52180,52180,11,52208,52208,11,52236,52236,11,52264,52264,11,52292,52292,11,52320,52320,11,52348,52348,11,52376,52376,11,52404,52404,11,52432,52432,11,52460,52460,11,52488,52488,11,52516,52516,11,52544,52544,11,52572,52572,11,52600,52600,11,52628,52628,11,52656,52656,11,52684,52684,11,52712,52712,11,52740,52740,11,52768,52768,11,52796,52796,11,52824,52824,11,52852,52852,11,52880,52880,11,52908,52908,11,52936,52936,11,52964,52964,11,52992,52992,11,53020,53020,11,53048,53048,11,53076,53076,11,53104,53104,11,53132,53132,11,53160,53160,11,53188,53188,11,53216,53216,11,53244,53244,11,53272,53272,11,53300,53300,11,53328,53328,11,53356,53356,11,53384,53384,11,53412,53412,11,53440,53440,11,53468,53468,11,53496,53496,11,53524,53524,11,53552,53552,11,53580,53580,11,53608,53608,11,53636,53636,11,53664,53664,11,53692,53692,11,53720,53720,11,53748,53748,11,53776,53776,11,53804,53804,11,53832,53832,11,53860,53860,11,53888,53888,11,53916,53916,11,53944,53944,11,53972,53972,11,54000,54000,11,54028,54028,11,54056,54056,11,54084,54084,11,54112,54112,11,54140,54140,11,54168,54168,11,54196,54196,11,54224,54224,11,54252,54252,11,54280,54280,11,54308,54308,11,54336,54336,11,54364,54364,11,54392,54392,11,54420,54420,11,54448,54448,11,54476,54476,11,54504,54504,11,54532,54532,11,54560,54560,11,54588,54588,11,54616,54616,11,54644,54644,11,54672,54672,11,54700,54700,11,54728,54728,11,54756,54756,11,54784,54784,11,54812,54812,11,54840,54840,11,54868,54868,11,54896,54896,11,54924,54924,11,54952,54952,11,54980,54980,11,55008,55008,11,55036,55036,11,55064,55064,11,55092,55092,11,55120,55120,11,55148,55148,11,55176,55176,11,55216,55238,9,64286,64286,5,65056,65071,5,65438,65439,5,65529,65531,4,66272,66272,5,68097,68099,5,68108,68111,5,68159,68159,5,68900,68903,5,69446,69456,5,69632,69632,7,69634,69634,7,69744,69744,5,69759,69761,5,69808,69810,7,69815,69816,7,69821,69821,1,69837,69837,1,69927,69931,5,69933,69940,5,70003,70003,5,70018,70018,7,70070,70078,5,70082,70083,1,70094,70094,7,70188,70190,7,70194,70195,7,70197,70197,7,70206,70206,5,70368,70370,7,70400,70401,5,70459,70460,5,70463,70463,7,70465,70468,7,70475,70477,7,70498,70499,7,70512,70516,5,70712,70719,5,70722,70724,5,70726,70726,5,70832,70832,5,70835,70840,5,70842,70842,5,70845,70845,5,70847,70848,5,70850,70851,5,71088,71089,7,71096,71099,7,71102,71102,7,71132,71133,5,71219,71226,5,71229,71229,5,71231,71232,5,71340,71340,7,71342,71343,7,71350,71350,7,71453,71455,5,71462,71462,7,71724,71726,7,71736,71736,7,71984,71984,5,71991,71992,7,71997,71997,7,71999,71999,1,72001,72001,1,72003,72003,5,72148,72151,5,72156,72159,7,72164,72164,7,72243,72248,5,72250,72250,1,72263,72263,5,72279,72280,7,72324,72329,1,72343,72343,7,72751,72751,7,72760,72765,5,72767,72767,5,72873,72873,7,72881,72881,7,72884,72884,7,73009,73014,5,73020,73021,5,73030,73030,1,73098,73102,7,73107,73108,7,73110,73110,7,73459,73460,5,78896,78904,4,92976,92982,5,94033,94087,7,94180,94180,5,113821,113822,5,118528,118573,5,119141,119141,5,119143,119145,5,119150,119154,5,119163,119170,5,119210,119213,5,121344,121398,5,121461,121461,5,121499,121503,5,122880,122886,5,122907,122913,5,122918,122922,5,123566,123566,5,125136,125142,5,126976,126979,14,126981,127182,14,127184,127231,14,127279,127279,14,127344,127345,14,127374,127374,14,127405,127461,14,127489,127490,14,127514,127514,14,127538,127546,14,127561,127567,14,127570,127743,14,127757,127758,14,127760,127760,14,127762,127762,14,127766,127768,14,127770,127770,14,127772,127772,14,127775,127776,14,127778,127779,14,127789,127791,14,127794,127795,14,127798,127798,14,127819,127819,14,127824,127824,14,127868,127868,14,127870,127871,14,127892,127893,14,127896,127896,14,127900,127901,14,127904,127940,14,127942,127942,14,127944,127944,14,127946,127946,14,127951,127955,14,127968,127971,14,127973,127984,14,127987,127987,14,127989,127989,14,127991,127991,14,127995,127999,5,128008,128008,14,128012,128014,14,128017,128018,14,128020,128020,14,128022,128022,14,128042,128042,14,128063,128063,14,128065,128065,14,128101,128101,14,128108,128109,14,128173,128173,14,128182,128183,14,128236,128237,14,128239,128239,14,128245,128245,14,128248,128248,14,128253,128253,14,128255,128258,14,128260,128263,14,128265,128265,14,128277,128277,14,128300,128301,14,128326,128328,14,128331,128334,14,128336,128347,14,128360,128366,14,128369,128370,14,128378,128378,14,128391,128391,14,128394,128397,14,128400,128400,14,128405,128406,14,128420,128420,14,128422,128423,14,128425,128432,14,128435,128443,14,128445,128449,14,128453,128464,14,128468,128475,14,128479,128480,14,128482,128482,14,128484,128487,14,128489,128494,14,128496,128498,14,128500,128505,14,128507,128511,14,128513,128518,14,128521,128525,14,128527,128527,14,128529,128529,14,128533,128533,14,128535,128535,14,128537,128537,14]")}function z(Z,ue){if(Z===0)return 0;const me=V(Z,ue);if(me!==void 0)return me;const Ce=new W(ue,Z);return Ce.prevCodePoint(),Ce.offset}e.getLeftDeleteOffset=z;function V(Z,ue){const me=new W(ue,Z);let Ce=me.prevCodePoint();for(;K(Ce)||Ce===65039||Ce===8419;){if(me.offset===0)return;Ce=me.prevCodePoint()}if(!G(Ce))return;let _e=me.offset;return _e>0&&me.prevCodePoint()===8205&&(_e=me.offset),_e}function K(Z){return 127995<=Z&&Z<=127999}e.noBreakWhitespace="\xA0";class ie{static getInstance(ue){return ie.cache.get(Array.from(ue))}static getLocales(){return ie._locales.value}constructor(ue){this.confusableDictionary=ue}isAmbiguous(ue){return this.confusableDictionary.has(ue)}getPrimaryConfusable(ue){return this.confusableDictionary.get(ue)}getConfusableCodePoints(){return new Set(this.confusableDictionary.keys())}}y=ie,ie.ambiguousCharacterData=new k.Lazy(()=>JSON.parse('{"_common":[8232,32,8233,32,5760,32,8192,32,8193,32,8194,32,8195,32,8196,32,8197,32,8198,32,8200,32,8201,32,8202,32,8287,32,8199,32,8239,32,2042,95,65101,95,65102,95,65103,95,8208,45,8209,45,8210,45,65112,45,1748,45,8259,45,727,45,8722,45,10134,45,11450,45,1549,44,1643,44,8218,44,184,44,42233,44,894,59,2307,58,2691,58,1417,58,1795,58,1796,58,5868,58,65072,58,6147,58,6153,58,8282,58,1475,58,760,58,42889,58,8758,58,720,58,42237,58,451,33,11601,33,660,63,577,63,2429,63,5038,63,42731,63,119149,46,8228,46,1793,46,1794,46,42510,46,68176,46,1632,46,1776,46,42232,46,1373,96,65287,96,8219,96,8242,96,1370,96,1523,96,8175,96,65344,96,900,96,8189,96,8125,96,8127,96,8190,96,697,96,884,96,712,96,714,96,715,96,756,96,699,96,701,96,700,96,702,96,42892,96,1497,96,2036,96,2037,96,5194,96,5836,96,94033,96,94034,96,65339,91,10088,40,10098,40,12308,40,64830,40,65341,93,10089,41,10099,41,12309,41,64831,41,10100,123,119060,123,10101,125,65342,94,8270,42,1645,42,8727,42,66335,42,5941,47,8257,47,8725,47,8260,47,9585,47,10187,47,10744,47,119354,47,12755,47,12339,47,11462,47,20031,47,12035,47,65340,92,65128,92,8726,92,10189,92,10741,92,10745,92,119311,92,119355,92,12756,92,20022,92,12034,92,42872,38,708,94,710,94,5869,43,10133,43,66203,43,8249,60,10094,60,706,60,119350,60,5176,60,5810,60,5120,61,11840,61,12448,61,42239,61,8250,62,10095,62,707,62,119351,62,5171,62,94015,62,8275,126,732,126,8128,126,8764,126,65372,124,65293,45,120784,50,120794,50,120804,50,120814,50,120824,50,130034,50,42842,50,423,50,1000,50,42564,50,5311,50,42735,50,119302,51,120785,51,120795,51,120805,51,120815,51,120825,51,130035,51,42923,51,540,51,439,51,42858,51,11468,51,1248,51,94011,51,71882,51,120786,52,120796,52,120806,52,120816,52,120826,52,130036,52,5070,52,71855,52,120787,53,120797,53,120807,53,120817,53,120827,53,130037,53,444,53,71867,53,120788,54,120798,54,120808,54,120818,54,120828,54,130038,54,11474,54,5102,54,71893,54,119314,55,120789,55,120799,55,120809,55,120819,55,120829,55,130039,55,66770,55,71878,55,2819,56,2538,56,2666,56,125131,56,120790,56,120800,56,120810,56,120820,56,120830,56,130040,56,547,56,546,56,66330,56,2663,57,2920,57,2541,57,3437,57,120791,57,120801,57,120811,57,120821,57,120831,57,130041,57,42862,57,11466,57,71884,57,71852,57,71894,57,9082,97,65345,97,119834,97,119886,97,119938,97,119990,97,120042,97,120094,97,120146,97,120198,97,120250,97,120302,97,120354,97,120406,97,120458,97,593,97,945,97,120514,97,120572,97,120630,97,120688,97,120746,97,65313,65,119808,65,119860,65,119912,65,119964,65,120016,65,120068,65,120120,65,120172,65,120224,65,120276,65,120328,65,120380,65,120432,65,913,65,120488,65,120546,65,120604,65,120662,65,120720,65,5034,65,5573,65,42222,65,94016,65,66208,65,119835,98,119887,98,119939,98,119991,98,120043,98,120095,98,120147,98,120199,98,120251,98,120303,98,120355,98,120407,98,120459,98,388,98,5071,98,5234,98,5551,98,65314,66,8492,66,119809,66,119861,66,119913,66,120017,66,120069,66,120121,66,120173,66,120225,66,120277,66,120329,66,120381,66,120433,66,42932,66,914,66,120489,66,120547,66,120605,66,120663,66,120721,66,5108,66,5623,66,42192,66,66178,66,66209,66,66305,66,65347,99,8573,99,119836,99,119888,99,119940,99,119992,99,120044,99,120096,99,120148,99,120200,99,120252,99,120304,99,120356,99,120408,99,120460,99,7428,99,1010,99,11429,99,43951,99,66621,99,128844,67,71922,67,71913,67,65315,67,8557,67,8450,67,8493,67,119810,67,119862,67,119914,67,119966,67,120018,67,120174,67,120226,67,120278,67,120330,67,120382,67,120434,67,1017,67,11428,67,5087,67,42202,67,66210,67,66306,67,66581,67,66844,67,8574,100,8518,100,119837,100,119889,100,119941,100,119993,100,120045,100,120097,100,120149,100,120201,100,120253,100,120305,100,120357,100,120409,100,120461,100,1281,100,5095,100,5231,100,42194,100,8558,68,8517,68,119811,68,119863,68,119915,68,119967,68,120019,68,120071,68,120123,68,120175,68,120227,68,120279,68,120331,68,120383,68,120435,68,5024,68,5598,68,5610,68,42195,68,8494,101,65349,101,8495,101,8519,101,119838,101,119890,101,119942,101,120046,101,120098,101,120150,101,120202,101,120254,101,120306,101,120358,101,120410,101,120462,101,43826,101,1213,101,8959,69,65317,69,8496,69,119812,69,119864,69,119916,69,120020,69,120072,69,120124,69,120176,69,120228,69,120280,69,120332,69,120384,69,120436,69,917,69,120492,69,120550,69,120608,69,120666,69,120724,69,11577,69,5036,69,42224,69,71846,69,71854,69,66182,69,119839,102,119891,102,119943,102,119995,102,120047,102,120099,102,120151,102,120203,102,120255,102,120307,102,120359,102,120411,102,120463,102,43829,102,42905,102,383,102,7837,102,1412,102,119315,70,8497,70,119813,70,119865,70,119917,70,120021,70,120073,70,120125,70,120177,70,120229,70,120281,70,120333,70,120385,70,120437,70,42904,70,988,70,120778,70,5556,70,42205,70,71874,70,71842,70,66183,70,66213,70,66853,70,65351,103,8458,103,119840,103,119892,103,119944,103,120048,103,120100,103,120152,103,120204,103,120256,103,120308,103,120360,103,120412,103,120464,103,609,103,7555,103,397,103,1409,103,119814,71,119866,71,119918,71,119970,71,120022,71,120074,71,120126,71,120178,71,120230,71,120282,71,120334,71,120386,71,120438,71,1292,71,5056,71,5107,71,42198,71,65352,104,8462,104,119841,104,119945,104,119997,104,120049,104,120101,104,120153,104,120205,104,120257,104,120309,104,120361,104,120413,104,120465,104,1211,104,1392,104,5058,104,65320,72,8459,72,8460,72,8461,72,119815,72,119867,72,119919,72,120023,72,120179,72,120231,72,120283,72,120335,72,120387,72,120439,72,919,72,120494,72,120552,72,120610,72,120668,72,120726,72,11406,72,5051,72,5500,72,42215,72,66255,72,731,105,9075,105,65353,105,8560,105,8505,105,8520,105,119842,105,119894,105,119946,105,119998,105,120050,105,120102,105,120154,105,120206,105,120258,105,120310,105,120362,105,120414,105,120466,105,120484,105,618,105,617,105,953,105,8126,105,890,105,120522,105,120580,105,120638,105,120696,105,120754,105,1110,105,42567,105,1231,105,43893,105,5029,105,71875,105,65354,106,8521,106,119843,106,119895,106,119947,106,119999,106,120051,106,120103,106,120155,106,120207,106,120259,106,120311,106,120363,106,120415,106,120467,106,1011,106,1112,106,65322,74,119817,74,119869,74,119921,74,119973,74,120025,74,120077,74,120129,74,120181,74,120233,74,120285,74,120337,74,120389,74,120441,74,42930,74,895,74,1032,74,5035,74,5261,74,42201,74,119844,107,119896,107,119948,107,120000,107,120052,107,120104,107,120156,107,120208,107,120260,107,120312,107,120364,107,120416,107,120468,107,8490,75,65323,75,119818,75,119870,75,119922,75,119974,75,120026,75,120078,75,120130,75,120182,75,120234,75,120286,75,120338,75,120390,75,120442,75,922,75,120497,75,120555,75,120613,75,120671,75,120729,75,11412,75,5094,75,5845,75,42199,75,66840,75,1472,108,8739,73,9213,73,65512,73,1633,108,1777,73,66336,108,125127,108,120783,73,120793,73,120803,73,120813,73,120823,73,130033,73,65321,73,8544,73,8464,73,8465,73,119816,73,119868,73,119920,73,120024,73,120128,73,120180,73,120232,73,120284,73,120336,73,120388,73,120440,73,65356,108,8572,73,8467,108,119845,108,119897,108,119949,108,120001,108,120053,108,120105,73,120157,73,120209,73,120261,73,120313,73,120365,73,120417,73,120469,73,448,73,120496,73,120554,73,120612,73,120670,73,120728,73,11410,73,1030,73,1216,73,1493,108,1503,108,1575,108,126464,108,126592,108,65166,108,65165,108,1994,108,11599,73,5825,73,42226,73,93992,73,66186,124,66313,124,119338,76,8556,76,8466,76,119819,76,119871,76,119923,76,120027,76,120079,76,120131,76,120183,76,120235,76,120287,76,120339,76,120391,76,120443,76,11472,76,5086,76,5290,76,42209,76,93974,76,71843,76,71858,76,66587,76,66854,76,65325,77,8559,77,8499,77,119820,77,119872,77,119924,77,120028,77,120080,77,120132,77,120184,77,120236,77,120288,77,120340,77,120392,77,120444,77,924,77,120499,77,120557,77,120615,77,120673,77,120731,77,1018,77,11416,77,5047,77,5616,77,5846,77,42207,77,66224,77,66321,77,119847,110,119899,110,119951,110,120003,110,120055,110,120107,110,120159,110,120211,110,120263,110,120315,110,120367,110,120419,110,120471,110,1400,110,1404,110,65326,78,8469,78,119821,78,119873,78,119925,78,119977,78,120029,78,120081,78,120185,78,120237,78,120289,78,120341,78,120393,78,120445,78,925,78,120500,78,120558,78,120616,78,120674,78,120732,78,11418,78,42208,78,66835,78,3074,111,3202,111,3330,111,3458,111,2406,111,2662,111,2790,111,3046,111,3174,111,3302,111,3430,111,3664,111,3792,111,4160,111,1637,111,1781,111,65359,111,8500,111,119848,111,119900,111,119952,111,120056,111,120108,111,120160,111,120212,111,120264,111,120316,111,120368,111,120420,111,120472,111,7439,111,7441,111,43837,111,959,111,120528,111,120586,111,120644,111,120702,111,120760,111,963,111,120532,111,120590,111,120648,111,120706,111,120764,111,11423,111,4351,111,1413,111,1505,111,1607,111,126500,111,126564,111,126596,111,65259,111,65260,111,65258,111,65257,111,1726,111,64428,111,64429,111,64427,111,64426,111,1729,111,64424,111,64425,111,64423,111,64422,111,1749,111,3360,111,4125,111,66794,111,71880,111,71895,111,66604,111,1984,79,2534,79,2918,79,12295,79,70864,79,71904,79,120782,79,120792,79,120802,79,120812,79,120822,79,130032,79,65327,79,119822,79,119874,79,119926,79,119978,79,120030,79,120082,79,120134,79,120186,79,120238,79,120290,79,120342,79,120394,79,120446,79,927,79,120502,79,120560,79,120618,79,120676,79,120734,79,11422,79,1365,79,11604,79,4816,79,2848,79,66754,79,42227,79,71861,79,66194,79,66219,79,66564,79,66838,79,9076,112,65360,112,119849,112,119901,112,119953,112,120005,112,120057,112,120109,112,120161,112,120213,112,120265,112,120317,112,120369,112,120421,112,120473,112,961,112,120530,112,120544,112,120588,112,120602,112,120646,112,120660,112,120704,112,120718,112,120762,112,120776,112,11427,112,65328,80,8473,80,119823,80,119875,80,119927,80,119979,80,120031,80,120083,80,120187,80,120239,80,120291,80,120343,80,120395,80,120447,80,929,80,120504,80,120562,80,120620,80,120678,80,120736,80,11426,80,5090,80,5229,80,42193,80,66197,80,119850,113,119902,113,119954,113,120006,113,120058,113,120110,113,120162,113,120214,113,120266,113,120318,113,120370,113,120422,113,120474,113,1307,113,1379,113,1382,113,8474,81,119824,81,119876,81,119928,81,119980,81,120032,81,120084,81,120188,81,120240,81,120292,81,120344,81,120396,81,120448,81,11605,81,119851,114,119903,114,119955,114,120007,114,120059,114,120111,114,120163,114,120215,114,120267,114,120319,114,120371,114,120423,114,120475,114,43847,114,43848,114,7462,114,11397,114,43905,114,119318,82,8475,82,8476,82,8477,82,119825,82,119877,82,119929,82,120033,82,120189,82,120241,82,120293,82,120345,82,120397,82,120449,82,422,82,5025,82,5074,82,66740,82,5511,82,42211,82,94005,82,65363,115,119852,115,119904,115,119956,115,120008,115,120060,115,120112,115,120164,115,120216,115,120268,115,120320,115,120372,115,120424,115,120476,115,42801,115,445,115,1109,115,43946,115,71873,115,66632,115,65331,83,119826,83,119878,83,119930,83,119982,83,120034,83,120086,83,120138,83,120190,83,120242,83,120294,83,120346,83,120398,83,120450,83,1029,83,1359,83,5077,83,5082,83,42210,83,94010,83,66198,83,66592,83,119853,116,119905,116,119957,116,120009,116,120061,116,120113,116,120165,116,120217,116,120269,116,120321,116,120373,116,120425,116,120477,116,8868,84,10201,84,128872,84,65332,84,119827,84,119879,84,119931,84,119983,84,120035,84,120087,84,120139,84,120191,84,120243,84,120295,84,120347,84,120399,84,120451,84,932,84,120507,84,120565,84,120623,84,120681,84,120739,84,11430,84,5026,84,42196,84,93962,84,71868,84,66199,84,66225,84,66325,84,119854,117,119906,117,119958,117,120010,117,120062,117,120114,117,120166,117,120218,117,120270,117,120322,117,120374,117,120426,117,120478,117,42911,117,7452,117,43854,117,43858,117,651,117,965,117,120534,117,120592,117,120650,117,120708,117,120766,117,1405,117,66806,117,71896,117,8746,85,8899,85,119828,85,119880,85,119932,85,119984,85,120036,85,120088,85,120140,85,120192,85,120244,85,120296,85,120348,85,120400,85,120452,85,1357,85,4608,85,66766,85,5196,85,42228,85,94018,85,71864,85,8744,118,8897,118,65366,118,8564,118,119855,118,119907,118,119959,118,120011,118,120063,118,120115,118,120167,118,120219,118,120271,118,120323,118,120375,118,120427,118,120479,118,7456,118,957,118,120526,118,120584,118,120642,118,120700,118,120758,118,1141,118,1496,118,71430,118,43945,118,71872,118,119309,86,1639,86,1783,86,8548,86,119829,86,119881,86,119933,86,119985,86,120037,86,120089,86,120141,86,120193,86,120245,86,120297,86,120349,86,120401,86,120453,86,1140,86,11576,86,5081,86,5167,86,42719,86,42214,86,93960,86,71840,86,66845,86,623,119,119856,119,119908,119,119960,119,120012,119,120064,119,120116,119,120168,119,120220,119,120272,119,120324,119,120376,119,120428,119,120480,119,7457,119,1121,119,1309,119,1377,119,71434,119,71438,119,71439,119,43907,119,71919,87,71910,87,119830,87,119882,87,119934,87,119986,87,120038,87,120090,87,120142,87,120194,87,120246,87,120298,87,120350,87,120402,87,120454,87,1308,87,5043,87,5076,87,42218,87,5742,120,10539,120,10540,120,10799,120,65368,120,8569,120,119857,120,119909,120,119961,120,120013,120,120065,120,120117,120,120169,120,120221,120,120273,120,120325,120,120377,120,120429,120,120481,120,5441,120,5501,120,5741,88,9587,88,66338,88,71916,88,65336,88,8553,88,119831,88,119883,88,119935,88,119987,88,120039,88,120091,88,120143,88,120195,88,120247,88,120299,88,120351,88,120403,88,120455,88,42931,88,935,88,120510,88,120568,88,120626,88,120684,88,120742,88,11436,88,11613,88,5815,88,42219,88,66192,88,66228,88,66327,88,66855,88,611,121,7564,121,65369,121,119858,121,119910,121,119962,121,120014,121,120066,121,120118,121,120170,121,120222,121,120274,121,120326,121,120378,121,120430,121,120482,121,655,121,7935,121,43866,121,947,121,8509,121,120516,121,120574,121,120632,121,120690,121,120748,121,1199,121,4327,121,71900,121,65337,89,119832,89,119884,89,119936,89,119988,89,120040,89,120092,89,120144,89,120196,89,120248,89,120300,89,120352,89,120404,89,120456,89,933,89,978,89,120508,89,120566,89,120624,89,120682,89,120740,89,11432,89,1198,89,5033,89,5053,89,42220,89,94019,89,71844,89,66226,89,119859,122,119911,122,119963,122,120015,122,120067,122,120119,122,120171,122,120223,122,120275,122,120327,122,120379,122,120431,122,120483,122,7458,122,43923,122,71876,122,66293,90,71909,90,65338,90,8484,90,8488,90,119833,90,119885,90,119937,90,119989,90,120041,90,120197,90,120249,90,120301,90,120353,90,120405,90,120457,90,918,90,120493,90,120551,90,120609,90,120667,90,120725,90,5059,90,42204,90,71849,90,65282,34,65284,36,65285,37,65286,38,65290,42,65291,43,65294,46,65295,47,65296,48,65297,49,65298,50,65299,51,65300,52,65301,53,65302,54,65303,55,65304,56,65305,57,65308,60,65309,61,65310,62,65312,64,65316,68,65318,70,65319,71,65324,76,65329,81,65330,82,65333,85,65334,86,65335,87,65343,95,65346,98,65348,100,65350,102,65355,107,65357,109,65358,110,65361,113,65362,114,65364,116,65365,117,65367,119,65370,122,65371,123,65373,125,119846,109],"_default":[160,32,8211,45,65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"cs":[65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"de":[65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"es":[8211,45,65374,126,65306,58,65281,33,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"fr":[65374,126,65306,58,65281,33,8216,96,8245,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"it":[160,32,8211,45,65374,126,65306,58,65281,33,8216,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"ja":[8211,45,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65292,44,65307,59],"ko":[8211,45,65374,126,65306,58,65281,33,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"pl":[65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"pt-BR":[65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"qps-ploc":[160,32,8211,45,65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"ru":[65374,126,65306,58,65281,33,8216,96,8217,96,8245,96,180,96,12494,47,305,105,921,73,1009,112,215,120,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"tr":[160,32,8211,45,65374,126,65306,58,65281,33,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65288,40,65289,41,65292,44,65307,59,65311,63],"zh-hans":[65374,126,65306,58,65281,33,8245,96,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65288,40,65289,41],"zh-hant":[8211,45,65374,126,180,96,12494,47,1047,51,1073,54,1072,97,1040,65,1068,98,1042,66,1089,99,1057,67,1077,101,1045,69,1053,72,305,105,1050,75,921,73,1052,77,1086,111,1054,79,1009,112,1088,112,1056,80,1075,114,1058,84,215,120,1093,120,1061,88,1091,121,1059,89,65283,35,65307,59]}')),ie.cache=new S.LRUCachedFunction(Z=>{function ue(ge){const pe=new Map;for(let ae=0;ae!ge.startsWith("_")&&ge in _e);we.length===0&&(we=["_default"]);let ye;for(const ge of we){const pe=ue(_e[ge]);ye=Ce(ye,pe)}const ke=ue(_e._common),De=me(ke,ye);return new ie(De)}),ie._locales=new k.Lazy(()=>Object.keys(ie.ambiguousCharacterData.value).filter(Z=>!Z.startsWith("_"))),e.AmbiguousCharacters=ie;class ee{static getRawData(){return JSON.parse("[9,10,11,12,13,32,127,160,173,847,1564,4447,4448,6068,6069,6155,6156,6157,6158,7355,7356,8192,8193,8194,8195,8196,8197,8198,8199,8200,8201,8202,8203,8204,8205,8206,8207,8234,8235,8236,8237,8238,8239,8287,8288,8289,8290,8291,8292,8293,8294,8295,8296,8297,8298,8299,8300,8301,8302,8303,10240,12288,12644,65024,65025,65026,65027,65028,65029,65030,65031,65032,65033,65034,65035,65036,65037,65038,65039,65279,65440,65520,65521,65522,65523,65524,65525,65526,65527,65528,65532,78844,119155,119156,119157,119158,119159,119160,119161,119162,917504,917505,917506,917507,917508,917509,917510,917511,917512,917513,917514,917515,917516,917517,917518,917519,917520,917521,917522,917523,917524,917525,917526,917527,917528,917529,917530,917531,917532,917533,917534,917535,917536,917537,917538,917539,917540,917541,917542,917543,917544,917545,917546,917547,917548,917549,917550,917551,917552,917553,917554,917555,917556,917557,917558,917559,917560,917561,917562,917563,917564,917565,917566,917567,917568,917569,917570,917571,917572,917573,917574,917575,917576,917577,917578,917579,917580,917581,917582,917583,917584,917585,917586,917587,917588,917589,917590,917591,917592,917593,917594,917595,917596,917597,917598,917599,917600,917601,917602,917603,917604,917605,917606,917607,917608,917609,917610,917611,917612,917613,917614,917615,917616,917617,917618,917619,917620,917621,917622,917623,917624,917625,917626,917627,917628,917629,917630,917631,917760,917761,917762,917763,917764,917765,917766,917767,917768,917769,917770,917771,917772,917773,917774,917775,917776,917777,917778,917779,917780,917781,917782,917783,917784,917785,917786,917787,917788,917789,917790,917791,917792,917793,917794,917795,917796,917797,917798,917799,917800,917801,917802,917803,917804,917805,917806,917807,917808,917809,917810,917811,917812,917813,917814,917815,917816,917817,917818,917819,917820,917821,917822,917823,917824,917825,917826,917827,917828,917829,917830,917831,917832,917833,917834,917835,917836,917837,917838,917839,917840,917841,917842,917843,917844,917845,917846,917847,917848,917849,917850,917851,917852,917853,917854,917855,917856,917857,917858,917859,917860,917861,917862,917863,917864,917865,917866,917867,917868,917869,917870,917871,917872,917873,917874,917875,917876,917877,917878,917879,917880,917881,917882,917883,917884,917885,917886,917887,917888,917889,917890,917891,917892,917893,917894,917895,917896,917897,917898,917899,917900,917901,917902,917903,917904,917905,917906,917907,917908,917909,917910,917911,917912,917913,917914,917915,917916,917917,917918,917919,917920,917921,917922,917923,917924,917925,917926,917927,917928,917929,917930,917931,917932,917933,917934,917935,917936,917937,917938,917939,917940,917941,917942,917943,917944,917945,917946,917947,917948,917949,917950,917951,917952,917953,917954,917955,917956,917957,917958,917959,917960,917961,917962,917963,917964,917965,917966,917967,917968,917969,917970,917971,917972,917973,917974,917975,917976,917977,917978,917979,917980,917981,917982,917983,917984,917985,917986,917987,917988,917989,917990,917991,917992,917993,917994,917995,917996,917997,917998,917999]")}static getData(){return this._data||(this._data=new Set(ee.getRawData())),this._data}static isInvisibleCharacter(ue){return ee.getData().has(ue)}static get codePoints(){return ee.getData()}}ee._data=void 0,e.InvisibleCharacters=ee}),define(X[63],J([1,0,55,9]),function(j,e,S,k){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.fuzzyScoreGracefulAggressive=e.fuzzyScore=e.FuzzyScoreOptions=e.FuzzyScore=e.isPatternInWord=e.createMatches=e.anyScore=e.matchesFuzzy=e.matchesWords=e.matchesCamelCase=e.isUpper=e.matchesSubString=e.matchesContiguousSubString=e.matchesPrefix=e.matchesStrictPrefix=e.or=void 0;function y(...z){return function(V,K){for(let ie=0,ee=z.length;ie0?[{start:0,end:V.length}]:[]:null}function w(z,V){const K=V.toLowerCase().indexOf(z.toLowerCase());return K===-1?null:[{start:K,end:K+z.length}]}e.matchesContiguousSubString=w;function b(z,V){return C(z.toLowerCase(),V.toLowerCase(),0,0)}e.matchesSubString=b;function C(z,V,K,ie){if(K===z.length)return[];if(ie===V.length)return null;if(z[K]===V[ie]){let ee=null;return(ee=C(z,V,K+1,ie+1))?h({start:ie,end:ie+1},ee):null}return C(z,V,K,ie+1)}function g(z){return 97<=z&&z<=122}function m(z){return 65<=z&&z<=90}e.isUpper=m;function n(z){return 48<=z&&z<=57}function t(z){return z===32||z===9||z===10||z===13}const i=new Set;"()[]{}<>`'\"-/;:,.?!".split("").forEach(z=>i.add(z.charCodeAt(0)));function s(z){return t(z)||i.has(z)}function a(z,V){return z===V||s(z)&&s(V)}function c(z){return g(z)||m(z)||n(z)}function h(z,V){return V.length===0?V=[z]:z.end===V[0].start?V[0].start=z.start:V.unshift(z),V}function o(z,V){for(let K=V;K0&&!c(z.charCodeAt(K-1)))return K}return z.length}function l(z,V,K,ie){if(K===z.length)return[];if(ie===V.length)return null;if(z[K]!==V[ie].toLowerCase())return null;{let ee=null,Z=ie+1;for(ee=l(z,V,K+1,ie+1);!ee&&(Z=o(V,Z)).6}function u(z){const{upperPercent:V,lowerPercent:K,alphaPercent:ie,numericPercent:ee}=z;return K>.2&&V<.8&&ie>.6&&ee<.2}function _(z){let V=0,K=0,ie=0,ee=0;for(let Z=0;Z60)return null;const K=r(V);if(!u(K)){if(!d(K))return null;V=V.toLowerCase()}let ie=null,ee=0;for(z=z.toLowerCase();ee0&&s(z.charCodeAt(K-1)))return K;return z.length}const E=y(e.matchesPrefix,f,w),I=y(e.matchesPrefix,f,b),T=new S.LRUCache(1e4);function F(z,V,K=!1){if(typeof z!="string"||typeof V!="string")return null;let ie=T.get(z);ie||(ie=new RegExp(k.convertSimple2RegExpPattern(z),"i"),T.set(z,ie));const ee=ie.exec(V);return ee?[{start:ee.index,end:ee.index+ee[0].length}]:K?I(z,V):E(z,V)}e.matchesFuzzy=F;function R(z,V,K,ie,ee,Z){const ue=Math.min(13,z.length);for(;K"u")return[];const V=[],K=z[1];for(let ie=z.length-1;ie>1;ie--){const ee=z[ie]+K,Z=V[V.length-1];Z&&Z.end===ee?Z.end=ee+1:V.push({start:ee,end:ee+1})}return V}e.createMatches=M;const N=128;function A(){const z=[],V=[];for(let K=0;K<=N;K++)V[K]=0;for(let K=0;K<=N;K++)z.push(V.slice(0));return z}function P(z){const V=[];for(let K=0;K<=z;K++)V[K]=0;return V}const x=P(2*N),W=P(2*N),U=A(),O=A(),$=A(),Q=!1;function se(z,V,K,ie,ee){function Z(me,Ce,_e=" "){for(;me.lengthZ(me,3)).join("|")}
-`;for(let me=0;me<=K;me++)me===0?ue+=" |":ue+=`${V[me-1]}|`,ue+=z[me].slice(0,ee+1).map(Ce=>Z(Ce.toString(),3)).join("|")+`
-`;return ue}function le(z,V,K,ie){z=z.substr(V),K=K.substr(ie),console.log(se(O,z,z.length,K,K.length)),console.log(se($,z,z.length,K,K.length)),console.log(se(U,z,z.length,K,K.length))}function te(z,V){if(V<0||V>=z.length)return!1;const K=z.codePointAt(V);switch(K){case 95:case 45:case 46:case 32:case 47:case 92:case 39:case 34:case 58:case 36:case 60:case 62:case 40:case 41:case 91:case 93:case 123:case 125:return!0;case void 0:return!1;default:return!!k.isEmojiImprecise(K)}}function re(z,V){if(V<0||V>=z.length)return!1;switch(z.charCodeAt(V)){case 32:case 9:return!0;default:return!1}}function H(z,V,K){return V[z]!==K[z]}function B(z,V,K,ie,ee,Z,ue=!1){for(;VN?N:z.length,Ce=ie.length>N?N:ie.length;if(K>=me||Z>=Ce||me-K>Ce-Z||!B(V,K,me,ee,Z,Ce,!0))return;ne(me,Ce,K,Z,V,ee);let _e=1,we=1,ye=K,ke=Z;const De=[!1];for(_e=1,ye=K;yeLe,Fe=Pe?O[_e][we-1]+(U[_e][we-1]>0?-5:0):0,Oe=ke>Le+1&&U[_e][we-1]>0,xe=Oe?O[_e][we-2]+(U[_e][we-2]>0?-5:0):0;if(Oe&&(!Pe||xe>=Fe)&&(!Se||xe>=Te))O[_e][we]=xe,$[_e][we]=3,U[_e][we]=0;else if(Pe&&(!Se||Fe>=Te))O[_e][we]=Fe,$[_e][we]=2,U[_e][we]=0;else if(Se)O[_e][we]=Te,$[_e][we]=1,U[_e][we]=U[_e-1][we-1]+1;else throw new Error("not possible")}}if(Q&&le(z,K,ie,Z),!De[0]&&!ue.firstMatchCanBeWeak)return;_e--,we--;const ge=[O[_e][we],Z];let pe=0,ae=0;for(;_e>=1;){let Le=we;do{const Ie=$[_e][Le];if(Ie===3)Le=Le-2;else if(Ie===2)Le=Le-1;else break}while(Le>=1);pe>1&&V[K+_e-1]===ee[Z+we-1]&&!H(Le+Z-1,ie,ee)&&pe+1>U[_e][Le]&&(Le=we),Le===we?pe++:pe=1,ae||(ae=Le),_e--,we=Le-1,ge.push(we)}Ce===me&&ue.boostFullMatch&&(ge[0]+=2);const ve=ae-me;return ge[0]-=ve,ge}e.fuzzyScore=Y;function ne(z,V,K,ie,ee,Z){let ue=z-1,me=V-1;for(;ue>=K&&me>=ie;)ee[ue]===Z[me]&&(W[ue]=me,ue--),me--}function de(z,V,K,ie,ee,Z,ue,me,Ce,_e,we){if(V[K]!==Z[ue])return Number.MIN_SAFE_INTEGER;let ye=1,ke=!1;return ue===K-ie?ye=z[K]===ee[ue]?7:5:H(ue,ee,Z)&&(ue===0||!H(ue-1,ee,Z))?(ye=z[K]===ee[ue]?7:5,ke=!0):te(Z,ue)&&(ue===0||!te(Z,ue-1))?ye=5:(te(Z,ue-1)||re(Z,ue-1))&&(ye=5,ke=!0),ye>1&&K===ie&&(we[0]=!0),ke||(ke=H(ue,ee,Z)||te(Z,ue-1)||re(Z,ue-1)),K===ie?ue>Ce&&(ye-=ke?3:5):_e?ye+=ke?2:0:ye+=ke?0:1,ue+1===me&&(ye-=ke?3:5),ye}function he(z,V,K,ie,ee,Z,ue){return oe(z,V,K,ie,ee,Z,!0,ue)}e.fuzzyScoreGracefulAggressive=he;function oe(z,V,K,ie,ee,Z,ue,me){let Ce=Y(z,V,K,ie,ee,Z,me);if(Ce&&!ue)return Ce;if(z.length>=3){const _e=Math.min(7,z.length-1);for(let we=K+1;we<_e;we++){const ye=ce(z,we);if(ye){const ke=Y(ye,ye.toLowerCase(),K,ie,ee,Z,me);ke&&(ke[0]-=3,(!Ce||ke[0]>Ce[0])&&(Ce=ke))}}}return Ce}function ce(z,V){if(V+1>=z.length)return;const K=z[V],ie=z[V+1];if(K!==ie)return z.slice(0,V)+ie+K+z.slice(V+2)}}),define(X[133],J([1,0,9]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.StringSHA1=e.toHexString=e.stringHash=e.numberHash=e.doHash=e.hash=void 0;function k(a){return y(a,0)}e.hash=k;function y(a,c){switch(typeof a){case"object":return a===null?D(349,c):Array.isArray(a)?C(a,c):g(a,c);case"string":return b(a,c);case"boolean":return w(a,c);case"number":return D(a,c);case"undefined":return D(937,c);default:return D(617,c)}}e.doHash=y;function D(a,c){return(c<<5)-c+a|0}e.numberHash=D;function w(a,c){return D(a?433:863,c)}function b(a,c){c=D(149417,c);for(let h=0,o=a.length;hy(o,h),c)}function g(a,c){return c=D(181387,c),Object.keys(a).sort().reduce((h,o)=>(h=b(o,h),y(a[o],h)),c)}function m(a,c,h=32){const o=h-c,l=~((1<>>o)>>>0}function n(a,c=0,h=a.byteLength,o=0){for(let l=0;lh.toString(16).padStart(2,"0")).join(""):t((a>>>0).toString(16),c/4)}e.toHexString=i;class s{constructor(){this._h0=1732584193,this._h1=4023233417,this._h2=2562383102,this._h3=271733878,this._h4=3285377520,this._buff=new Uint8Array(64+3),this._buffDV=new DataView(this._buff.buffer),this._buffLen=0,this._totalLen=0,this._leftoverHighSurrogate=0,this._finished=!1}update(c){const h=c.length;if(h===0)return;const o=this._buff;let l=this._buffLen,r=this._leftoverHighSurrogate,d,u;for(r!==0?(d=r,u=-1,r=0):(d=c.charCodeAt(0),u=0);;){let _=d;if(S.isHighSurrogate(d))if(u+1>>6,c[h++]=128|(o&63)>>>0):o<65536?(c[h++]=224|(o&61440)>>>12,c[h++]=128|(o&4032)>>>6,c[h++]=128|(o&63)>>>0):(c[h++]=240|(o&1835008)>>>18,c[h++]=128|(o&258048)>>>12,c[h++]=128|(o&4032)>>>6,c[h++]=128|(o&63)>>>0),h>=64&&(this._step(),h-=64,this._totalLen+=64,c[0]=c[64+0],c[1]=c[64+1],c[2]=c[64+2]),h}digest(){return this._finished||(this._finished=!0,this._leftoverHighSurrogate&&(this._leftoverHighSurrogate=0,this._buffLen=this._push(this._buff,this._buffLen,65533)),this._totalLen+=this._buffLen,this._wrapUp()),i(this._h0)+i(this._h1)+i(this._h2)+i(this._h3)+i(this._h4)}_wrapUp(){this._buff[this._buffLen++]=128,n(this._buff,this._buffLen),this._buffLen>56&&(this._step(),n(this._buff));const c=8*this._totalLen;this._buffDV.setUint32(56,Math.floor(c/4294967296),!1),this._buffDV.setUint32(60,c%4294967296,!1),this._step()}_step(){const c=s._bigBlock32,h=this._buffDV;for(let p=0;p<64;p+=4)c.setUint32(p,h.getUint32(p,!1),!1);for(let p=64;p<320;p+=4)c.setUint32(p,m(c.getUint32(p-12,!1)^c.getUint32(p-32,!1)^c.getUint32(p-56,!1)^c.getUint32(p-64,!1),1),!1);let o=this._h0,l=this._h1,r=this._h2,d=this._h3,u=this._h4,_,f,v;for(let p=0;p<80;p++)p<20?(_=l&r|~l&d,f=1518500249):p<40?(_=l^r^d,f=1859775393):p<60?(_=l&r|l&d|r&d,f=2400959708):(_=l^r^d,f=3395469782),v=m(o,5)+_+u+f+c.getUint32(p*4,!1)&4294967295,u=d,d=r,r=m(l,30),l=o,o=v;this._h0=this._h0+o&4294967295,this._h1=this._h1+l&4294967295,this._h2=this._h2+r&4294967295,this._h3=this._h3+d&4294967295,this._h4=this._h4+u&4294967295}}s._bigBlock32=new DataView(new ArrayBuffer(320)),e.StringSHA1=s}),define(X[157],J([1,0,355,133]),function(j,e,S,k){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.LcsDiff=e.stringDiff=e.StringDiffSequence=void 0;class y{constructor(n){this.source=n}getElements(){const n=this.source,t=new Int32Array(n.length);for(let i=0,s=n.length;i0||this.m_modifiedCount>0)&&this.m_changes.push(new S.DiffChange(this.m_originalStart,this.m_originalCount,this.m_modifiedStart,this.m_modifiedCount)),this.m_originalCount=0,this.m_modifiedCount=0,this.m_originalStart=1073741824,this.m_modifiedStart=1073741824}AddOriginalElement(n,t){this.m_originalStart=Math.min(this.m_originalStart,n),this.m_modifiedStart=Math.min(this.m_modifiedStart,t),this.m_originalCount++}AddModifiedElement(n,t){this.m_originalStart=Math.min(this.m_originalStart,n),this.m_modifiedStart=Math.min(this.m_modifiedStart,t),this.m_modifiedCount++}getChanges(){return(this.m_originalCount>0||this.m_modifiedCount>0)&&this.MarkNextChange(),this.m_changes}getReverseChanges(){return(this.m_originalCount>0||this.m_modifiedCount>0)&&this.MarkNextChange(),this.m_changes.reverse(),this.m_changes}}class g{constructor(n,t,i=null){this.ContinueProcessingPredicate=i,this._originalSequence=n,this._modifiedSequence=t;const[s,a,c]=g._getElements(n),[h,o,l]=g._getElements(t);this._hasStrings=c&&l,this._originalStringElements=s,this._originalElementsOrHash=a,this._modifiedStringElements=h,this._modifiedElementsOrHash=o,this.m_forwardHistory=[],this.m_reverseHistory=[]}static _isStringArray(n){return n.length>0&&typeof n[0]=="string"}static _getElements(n){const t=n.getElements();if(g._isStringArray(t)){const i=new Int32Array(t.length);for(let s=0,a=t.length;s=n&&s>=i&&this.ElementsAreEqual(t,s);)t--,s--;if(n>t||i>s){let d;return i<=s?(w.Assert(n===t+1,"originalStart should only be one more than originalEnd"),d=[new S.DiffChange(n,0,i,s-i+1)]):n<=t?(w.Assert(i===s+1,"modifiedStart should only be one more than modifiedEnd"),d=[new S.DiffChange(n,t-n+1,i,0)]):(w.Assert(n===t+1,"originalStart should only be one more than originalEnd"),w.Assert(i===s+1,"modifiedStart should only be one more than modifiedEnd"),d=[]),d}const c=[0],h=[0],o=this.ComputeRecursionPoint(n,t,i,s,c,h,a),l=c[0],r=h[0];if(o!==null)return o;if(!a[0]){const d=this.ComputeDiffRecursive(n,l,i,r,a);let u=[];return a[0]?u=[new S.DiffChange(l+1,t-(l+1)+1,r+1,s-(r+1)+1)]:u=this.ComputeDiffRecursive(l+1,t,r+1,s,a),this.ConcatenateChanges(d,u)}return[new S.DiffChange(n,t-n+1,i,s-i+1)]}WALKTRACE(n,t,i,s,a,c,h,o,l,r,d,u,_,f,v,p,L,E){let I=null,T=null,F=new C,R=t,M=i,N=_[0]-p[0]-s,A=-1073741824,P=this.m_forwardHistory.length-1;do{const x=N+n;x===R||x=0&&(l=this.m_forwardHistory[P],n=l[0],R=1,M=l.length-1)}while(--P>=-1);if(I=F.getReverseChanges(),E[0]){let x=_[0]+1,W=p[0]+1;if(I!==null&&I.length>0){const U=I[I.length-1];x=Math.max(x,U.getOriginalEnd()),W=Math.max(W,U.getModifiedEnd())}T=[new S.DiffChange(x,u-x+1,W,v-W+1)]}else{F=new C,R=c,M=h,N=_[0]-p[0]-o,A=1073741824,P=L?this.m_reverseHistory.length-1:this.m_reverseHistory.length-2;do{const x=N+a;x===R||x=r[x+1]?(d=r[x+1]-1,f=d-N-o,d>A&&F.MarkNextChange(),A=d+1,F.AddOriginalElement(d+1,f+1),N=x+1-a):(d=r[x-1],f=d-N-o,d>A&&F.MarkNextChange(),A=d,F.AddModifiedElement(d+1,f+1),N=x-1-a),P>=0&&(r=this.m_reverseHistory[P],a=r[0],R=1,M=r.length-1)}while(--P>=-1);T=F.getChanges()}return this.ConcatenateChanges(I,T)}ComputeRecursionPoint(n,t,i,s,a,c,h){let o=0,l=0,r=0,d=0,u=0,_=0;n--,i--,a[0]=0,c[0]=0,this.m_forwardHistory=[],this.m_reverseHistory=[];const f=t-n+(s-i),v=f+1,p=new Int32Array(v),L=new Int32Array(v),E=s-i,I=t-n,T=n-i,F=t-s,M=(I-E)%2===0;p[E]=n,L[I]=t,h[0]=!1;for(let N=1;N<=f/2+1;N++){let A=0,P=0;r=this.ClipDiagonalBound(E-N,N,E,v),d=this.ClipDiagonalBound(E+N,N,E,v);for(let W=r;W<=d;W+=2){W===r||WA+P&&(A=o,P=l),!M&&Math.abs(W-I)<=N-1&&o>=L[W])return a[0]=o,c[0]=l,U<=L[W]&&1447>0&&N<=1447+1?this.WALKTRACE(E,r,d,T,I,u,_,F,p,L,o,t,a,l,s,c,M,h):null}const x=(A-n+(P-i)-N)/2;if(this.ContinueProcessingPredicate!==null&&!this.ContinueProcessingPredicate(A,x))return h[0]=!0,a[0]=A,c[0]=P,x>0&&1447>0&&N<=1447+1?this.WALKTRACE(E,r,d,T,I,u,_,F,p,L,o,t,a,l,s,c,M,h):(n++,i++,[new S.DiffChange(n,t-n+1,i,s-i+1)]);u=this.ClipDiagonalBound(I-N,N,I,v),_=this.ClipDiagonalBound(I+N,N,I,v);for(let W=u;W<=_;W+=2){W===u||W<_&&L[W-1]>=L[W+1]?o=L[W+1]-1:o=L[W-1],l=o-(W-I)-F;const U=o;for(;o>n&&l>i&&this.ElementsAreEqual(o,l);)o--,l--;if(L[W]=o,M&&Math.abs(W-E)<=N&&o<=p[W])return a[0]=o,c[0]=l,U>=p[W]&&1447>0&&N<=1447+1?this.WALKTRACE(E,r,d,T,I,u,_,F,p,L,o,t,a,l,s,c,M,h):null}if(N<=1447){let W=new Int32Array(d-r+2);W[0]=E-r+1,b.Copy2(p,r,W,1,d-r+1),this.m_forwardHistory.push(W),W=new Int32Array(_-u+2),W[0]=I-u+1,b.Copy2(L,u,W,1,_-u+1),this.m_reverseHistory.push(W)}}return this.WALKTRACE(E,r,d,T,I,u,_,F,p,L,o,t,a,l,s,c,M,h)}PrettifyChanges(n){for(let t=0;t0,h=i.modifiedLength>0;for(;i.originalStart+i.originalLength=0;t--){const i=n[t];let s=0,a=0;if(t>0){const d=n[t-1];s=d.originalStart+d.originalLength,a=d.modifiedStart+d.modifiedLength}const c=i.originalLength>0,h=i.modifiedLength>0;let o=0,l=this._boundaryScore(i.originalStart,i.originalLength,i.modifiedStart,i.modifiedLength);for(let d=1;;d++){const u=i.originalStart-d,_=i.modifiedStart-d;if(ul&&(l=v,o=d)}i.originalStart-=o,i.modifiedStart-=o;const r=[null];if(t>0&&this.ChangesOverlap(n[t-1],n[t],r)){n[t-1]=r[0],n.splice(t,1),t++;continue}}if(this._hasStrings)for(let t=1,i=n.length;t0&&_>o&&(o=_,l=d,r=u)}return o>0?[l,r]:null}_contiguousSequenceScore(n,t,i){let s=0;for(let a=0;a=this._originalElementsOrHash.length-1?!0:this._hasStrings&&/^\s*$/.test(this._originalStringElements[n])}_OriginalRegionIsBoundary(n,t){if(this._OriginalIsBoundary(n)||this._OriginalIsBoundary(n-1))return!0;if(t>0){const i=n+t;if(this._OriginalIsBoundary(i-1)||this._OriginalIsBoundary(i))return!0}return!1}_ModifiedIsBoundary(n){return n<=0||n>=this._modifiedElementsOrHash.length-1?!0:this._hasStrings&&/^\s*$/.test(this._modifiedStringElements[n])}_ModifiedRegionIsBoundary(n,t){if(this._ModifiedIsBoundary(n)||this._ModifiedIsBoundary(n-1))return!0;if(t>0){const i=n+t;if(this._ModifiedIsBoundary(i-1)||this._ModifiedIsBoundary(i))return!0}return!1}_boundaryScore(n,t,i,s){const a=this._OriginalRegionIsBoundary(n,t)?1:0,c=this._ModifiedRegionIsBoundary(i,s)?1:0;return a+c}ConcatenateChanges(n,t){const i=[];if(n.length===0||t.length===0)return t.length>0?t:n;if(this.ChangesOverlap(n[n.length-1],t[0],i)){const s=new Array(n.length+t.length-1);return b.Copy(n,0,s,0,n.length-1),s[n.length-1]=i[0],b.Copy(t,1,s,n.length,t.length-1),s}else{const s=new Array(n.length+t.length);return b.Copy(n,0,s,0,n.length),b.Copy(t,0,s,n.length,t.length),s}}ChangesOverlap(n,t,i){if(w.Assert(n.originalStart<=t.originalStart,"Left change is not less than or equal to right change"),w.Assert(n.modifiedStart<=t.modifiedStart,"Left change is not less than or equal to right change"),n.originalStart+n.originalLength>=t.originalStart||n.modifiedStart+n.modifiedLength>=t.modifiedStart){const s=n.originalStart;let a=n.originalLength;const c=n.modifiedStart;let h=n.modifiedLength;return n.originalStart+n.originalLength>=t.originalStart&&(a=t.originalStart+t.originalLength-n.originalStart),n.modifiedStart+n.modifiedLength>=t.modifiedStart&&(h=t.modifiedStart+t.modifiedLength-n.modifiedStart),i[0]=new S.DiffChange(s,a,c,h),!0}else return i[0]=null,!1}ClipDiagonalBound(n,t,i,s){if(n>=0&&n0?b[0].toUpperCase()+b.substr(1):w[0][0].toUpperCase()!==w[0][0]&&b.length>0?b[0].toLowerCase()+b.substr(1):b}else return b}e.buildReplaceStringWithCasePreserved=k;function y(w,b,C){return w[0].indexOf(C)!==-1&&b.indexOf(C)!==-1&&w[0].split(C).length===b.split(C).length}function D(w,b,C){const g=b.split(C),m=w[0].split(C);let n="";return g.forEach((t,i)=>{n+=k([m[i]],t)+C}),n.slice(0,-1)}}),define(X[102],J([1,0,9]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var k;(function(y){y[y.Ignore=0]="Ignore",y[y.Info=1]="Info",y[y.Warning=2]="Warning",y[y.Error=3]="Error"})(k||(k={})),function(y){const D="error",w="warning",b="warn",C="info",g="ignore";function m(t){return t?S.equalsIgnoreCase(D,t)?y.Error:S.equalsIgnoreCase(w,t)||S.equalsIgnoreCase(b,t)?y.Warning:S.equalsIgnoreCase(C,t)?y.Info:y.Ignore:y.Ignore}y.fromValue=m;function n(t){switch(t){case y.Error:return D;case y.Warning:return w;case y.Info:return C;default:return g}}y.toString=n}(k||(k={})),e.default=k}),define(X[246],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MicrotaskDelay=void 0,e.MicrotaskDelay=Symbol("MicrotaskDelay")}),define(X[186],J([1,0,9]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.TernarySearchTree=e.UriIterator=e.PathIterator=e.ConfigKeysIterator=e.StringIterator=void 0;class k{constructor(){this._value="",this._pos=0}reset(m){return this._value=m,this._pos=0,this}next(){return this._pos+=1,this}hasNext(){return this._pos=0;n--,this._valueLen--){const t=this._value.charCodeAt(n);if(!(t===47||this._splitOnBackslash&&t===92))break}return this.next()}hasNext(){return this._to!1,n=()=>!1){return new C(new w(m,n))}static forStrings(){return new C(new k)}static forConfigKeys(){return new C(new y)}constructor(m){this._iter=m}clear(){this._root=void 0}set(m,n){const t=this._iter.reset(m);let i;this._root||(this._root=new b,this._root.segment=t.value());const s=[];for(i=this._root;;){const c=t.cmp(i.segment);if(c>0)i.left||(i.left=new b,i.left.segment=t.value()),s.push([-1,i]),i=i.left;else if(c<0)i.right||(i.right=new b,i.right.segment=t.value()),s.push([1,i]),i=i.right;else if(t.hasNext())t.next(),i.mid||(i.mid=new b,i.mid.segment=t.value()),s.push([0,i]),i=i.mid;else break}const a=i.value;i.value=n,i.key=m;for(let c=s.length-1;c>=0;c--){const h=s[c][1];h.updateHeight();const o=h.balanceFactor();if(o<-1||o>1){const l=s[c][0],r=s[c+1][0];if(l===1&&r===1)s[c][1]=h.rotateLeft();else if(l===-1&&r===-1)s[c][1]=h.rotateRight();else if(l===1&&r===-1)h.right=s[c+1][1]=s[c+1][1].rotateRight(),s[c][1]=h.rotateLeft();else if(l===-1&&r===1)h.left=s[c+1][1]=s[c+1][1].rotateLeft(),s[c][1]=h.rotateRight();else throw new Error;if(c>0)switch(s[c-1][0]){case-1:s[c-1][1].left=s[c][1];break;case 1:s[c-1][1].right=s[c][1];break;case 0:s[c-1][1].mid=s[c][1];break}else this._root=s[0][1]}}return a}get(m){var n;return(n=this._getNode(m))===null||n===void 0?void 0:n.value}_getNode(m){const n=this._iter.reset(m);let t=this._root;for(;t;){const i=n.cmp(t.segment);if(i>0)t=t.left;else if(i<0)t=t.right;else if(n.hasNext())n.next(),t=t.mid;else break}return t}has(m){const n=this._getNode(m);return!(n?.value===void 0&&n?.mid===void 0)}delete(m){return this._delete(m,!1)}deleteSuperstr(m){return this._delete(m,!0)}_delete(m,n){var t;const i=this._iter.reset(m),s=[];let a=this._root;for(;a;){const c=i.cmp(a.segment);if(c>0)s.push([-1,a]),a=a.left;else if(c<0)s.push([1,a]),a=a.right;else if(i.hasNext())i.next(),s.push([0,a]),a=a.mid;else break}if(!!a){if(n?(a.left=void 0,a.mid=void 0,a.right=void 0,a.height=1):(a.key=void 0,a.value=void 0),!a.mid&&!a.value)if(a.left&&a.right){const c=this._min(a.right);if(c.key){const{key:h,value:o,segment:l}=c;this._delete(c.key,!1),a.key=h,a.value=o,a.segment=l}}else{const c=(t=a.left)!==null&&t!==void 0?t:a.right;if(s.length>0){const[h,o]=s[s.length-1];switch(h){case-1:o.left=c;break;case 0:o.mid=c;break;case 1:o.right=c;break}}else this._root=c}for(let c=s.length-1;c>=0;c--){const h=s[c][1];h.updateHeight();const o=h.balanceFactor();if(o>1?(h.right.balanceFactor()>=0||(h.right=h.right.rotateRight()),s[c][1]=h.rotateLeft()):o<-1&&(h.left.balanceFactor()<=0||(h.left=h.left.rotateLeft()),s[c][1]=h.rotateRight()),c>0)switch(s[c-1][0]){case-1:s[c-1][1].left=s[c][1];break;case 1:s[c-1][1].right=s[c][1];break;case 0:s[c-1][1].mid=s[c][1];break}else this._root=s[0][1]}}}_min(m){for(;m.left;)m=m.left;return m}findSubstr(m){const n=this._iter.reset(m);let t=this._root,i;for(;t;){const s=n.cmp(t.segment);if(s>0)t=t.left;else if(s<0)t=t.right;else if(n.hasNext())n.next(),i=t.value||i,t=t.mid;else break}return t&&t.value||i}findSuperstr(m){return this._findSuperstrOrElement(m,!1)}_findSuperstrOrElement(m,n){const t=this._iter.reset(m);let i=this._root;for(;i;){const s=t.cmp(i.segment);if(s>0)i=i.left;else if(s<0)i=i.right;else if(t.hasNext())t.next(),i=i.mid;else return i.mid?this._entries(i.mid):n?i.value:void 0}}forEach(m){for(const[n,t]of this)m(t,n)}*[Symbol.iterator](){yield*this._entries(this._root)}_entries(m){const n=[];return this._dfsEntries(m,n),n[Symbol.iterator]()}_dfsEntries(m,n){!m||(m.left&&this._dfsEntries(m.left,n),m.value&&n.push([m.key,m.value]),m.mid&&this._dfsEntries(m.mid,n),m.right&&this._dfsEntries(m.right,n))}}e.TernarySearchTree=C}),define(X[18],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.withNullAsUndefined=e.validateConstraint=e.validateConstraints=e.isFunction=e.assertIsDefined=e.assertType=e.isUndefinedOrNull=e.isDefined=e.isUndefined=e.isBoolean=e.isIterable=e.isNumber=e.isTypedArray=e.isObject=e.isString=void 0;function S(h){return typeof h=="string"}e.isString=S;function k(h){return typeof h=="object"&&h!==null&&!Array.isArray(h)&&!(h instanceof RegExp)&&!(h instanceof Date)}e.isObject=k;function y(h){const o=Object.getPrototypeOf(Uint8Array);return typeof h=="object"&&h instanceof o}e.isTypedArray=y;function D(h){return typeof h=="number"&&!isNaN(h)}e.isNumber=D;function w(h){return!!h&&typeof h[Symbol.iterator]=="function"}e.isIterable=w;function b(h){return h===!0||h===!1}e.isBoolean=b;function C(h){return typeof h>"u"}e.isUndefined=C;function g(h){return!m(h)}e.isDefined=g;function m(h){return C(h)||h===null}e.isUndefinedOrNull=m;function n(h,o){if(!h)throw new Error(o?`Unexpected type, expected '${o}'`:"Unexpected type")}e.assertType=n;function t(h){if(m(h))throw new Error("Assertion Failed: argument is undefined or null");return h}e.assertIsDefined=t;function i(h){return typeof h=="function"}e.isFunction=i;function s(h,o){const l=Math.min(h.length,o.length);for(let r=0;r{s[a]=c&&typeof c=="object"?k(c):c}),s}e.deepClone=k;function y(i){if(!i||typeof i!="object")return i;const s=[i];for(;s.length>0;){const a=s.shift();Object.freeze(a);for(const c in a)if(D.call(a,c)){const h=a[c];typeof h=="object"&&!Object.isFrozen(h)&&!(0,S.isTypedArray)(h)&&s.push(h)}}return i}e.deepFreeze=y;const D=Object.prototype.hasOwnProperty;function w(i,s){return b(i,s,new Set)}e.cloneAndChange=w;function b(i,s,a){if((0,S.isUndefinedOrNull)(i))return i;const c=s(i);if(typeof c<"u")return c;if(Array.isArray(i)){const h=[];for(const o of i)h.push(b(o,s,a));return h}if((0,S.isObject)(i)){if(a.has(i))throw new Error("Cannot clone recursive data-structure");a.add(i);const h={};for(const o in i)D.call(i,o)&&(h[o]=b(i[o],s,a));return a.delete(i),h}return i}function C(i,s,a=!0){return(0,S.isObject)(i)?((0,S.isObject)(s)&&Object.keys(s).forEach(c=>{c in i?a&&((0,S.isObject)(i[c])&&(0,S.isObject)(s[c])?C(i[c],s[c],a):i[c]=s[c]):i[c]=s[c]}),i):s}e.mixin=C;function g(i,s){if(i===s)return!0;if(i==null||s===null||s===void 0||typeof i!=typeof s||typeof i!="object"||Array.isArray(i)!==Array.isArray(s))return!1;let a,c;if(Array.isArray(i)){if(i.length!==s.length)return!1;for(a=0;afunction(){const o=Array.prototype.slice.call(arguments,0);return s(h,o)},c={};for(const h of i)c[h]=a(h);return c}e.createProxyObject=t}),define(X[32],J([1,0,29]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.ThemeIcon=e.ThemeColor=void 0;var k;(function(D){function w(b){return b&&typeof b=="object"&&typeof b.id=="string"}D.isThemeColor=w})(k=e.ThemeColor||(e.ThemeColor={}));var y;(function(D){D.iconNameSegment="[A-Za-z0-9]+",D.iconNameExpression="[A-Za-z0-9-]+",D.iconModifierExpression="~[A-Za-z]+",D.iconNameCharacter="[A-Za-z0-9~-]";const w=new RegExp(`^(${D.iconNameExpression})(${D.iconModifierExpression})?$`);function b(h){const o=w.exec(h.id);if(!o)return b(S.Codicon.error);const[,l,r]=o,d=["codicon","codicon-"+l];return r&&d.push("codicon-modifier-"+r.substring(1)),d}D.asClassNameArray=b;function C(h){return b(h).join(" ")}D.asClassName=C;function g(h){return"."+b(h).join(".")}D.asCSSSelector=g;function m(h){return h&&typeof h=="object"&&typeof h.id=="string"&&(typeof h.color>"u"||k.isThemeColor(h.color))}D.isThemeIcon=m;const n=new RegExp(`^\\$\\((${D.iconNameExpression}(?:${D.iconModifierExpression})?)\\)$`);function t(h){const o=n.exec(h);if(!o)return;const[,l]=o;return{id:l}}D.fromString=t;function i(h){return{id:h}}D.fromId=i;function s(h,o){let l=h.id;const r=l.lastIndexOf("~");return r!==-1&&(l=l.substring(0,r)),o&&(l=`${l}~${o}`),{id:l}}D.modify=s;function a(h){const o=h.id.lastIndexOf("~");if(o!==-1)return h.id.substring(o+1)}D.getModifier=a;function c(h,o){var l,r;return h.id===o.id&&((l=h.color)===null||l===void 0?void 0:l.id)===((r=o.color)===null||r===void 0?void 0:r.id)}D.isEqual=c})(y=e.ThemeIcon||(e.ThemeIcon={}))}),define(X[113],J([1,0,63,9,32]),function(j,e,S,k,y){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.matchesFuzzyIconAware=e.parseLabelWithIcons=e.getCodiconAriaLabel=e.stripIcons=e.markdownEscapeEscapedIcons=e.escapeIcons=void 0;const D="$(",w=new RegExp(`\\$\\(${y.ThemeIcon.iconNameExpression}(?:${y.ThemeIcon.iconModifierExpression})?\\)`,"g"),b=new RegExp(`(\\\\)?${w.source}`,"g");function C(h){return h.replace(b,(o,l)=>l?o:`\\${o}`)}e.escapeIcons=C;const g=new RegExp(`\\\\${w.source}`,"g");function m(h){return h.replace(g,o=>`\\${o}`)}e.markdownEscapeEscapedIcons=m;const n=new RegExp(`(\\s)?(\\\\)?${w.source}(\\s)?`,"g");function t(h){return h.indexOf(D)===-1?h:h.replace(n,(o,l,r,d)=>r?o:l||d||"")}e.stripIcons=t;function i(h){return h?h.replace(/\$\((.*?)\)/g,(o,l)=>` ${l} `).trim():""}e.getCodiconAriaLabel=i;const s=new RegExp(`\\$\\(${y.ThemeIcon.iconNameCharacter}+\\)`,"g");function a(h){s.lastIndex=0;let o="";const l=[];let r=0;for(;;){const d=s.lastIndex,u=s.exec(h),_=h.substring(d,u?.index);if(_.length>0){o+=_;for(let f=0;f<_.length;f++)l.push(r)}if(!u)break;r+=u[0].length}return{text:o,iconOffsets:l}}e.parseLabelWithIcons=a;function c(h,o,l=!1){const{text:r,iconOffsets:d}=o;if(!d||d.length===0)return(0,S.matchesFuzzy)(h,r,l);const u=(0,k.ltrim)(r," "),_=r.length-u.length,f=(0,S.matchesFuzzy)(h,u,l);if(f)for(const v of f){const p=d[v.start+_]+_;v.start+=p,v.end+=p}return f}e.matchesFuzzyIconAware=c}),define(X[158],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.toUint32=e.toUint8=void 0;function S(y){return y<0?0:y>255?255:y|0}e.toUint8=S;function k(y){return y<0?0:y>4294967295?4294967295:y|0}e.toUint32=k}),define(X[159],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.generateUuid=void 0,e.generateUuid=function(){if(typeof crypto=="object"&&typeof crypto.randomUUID=="function")return crypto.randomUUID.bind(crypto);let S;typeof crypto=="object"&&typeof crypto.getRandomValues=="function"?S=crypto.getRandomValues.bind(crypto):S=function(D){for(let w=0;wEe(this,void 0,void 0,function*(){return b}),asFile:()=>{},value:typeof b=="string"?b:void 0}}e.createStringDataTransferItem=y;function D(b,C,g){return{id:(0,k.generateUuid)(),asString:()=>Ee(this,void 0,void 0,function*(){return""}),asFile:()=>({name:b,uri:C,data:g}),value:void 0}}e.createFileDataTransferItem=D;class w{constructor(){this._entries=new Map}get size(){return this._entries.size}has(C){return this._entries.has(this.toKey(C))}get(C){var g;return(g=this._entries.get(this.toKey(C)))===null||g===void 0?void 0:g[0]}append(C,g){const m=this._entries.get(C);m?m.push(g):this._entries.set(this.toKey(C),[g])}replace(C,g){this._entries.set(this.toKey(C),[g])}delete(C){this._entries.delete(this.toKey(C))}*entries(){for(const[C,g]of this._entries.entries())for(const m of g)yield[C,m]}values(){return Array.from(this._entries.values()).flat()}forEach(C){for(const[g,m]of this.entries())C(m,g)}toKey(C){return C.toLowerCase()}}e.VSDataTransfer=w,e.UriList=Object.freeze({create:b=>(0,S.distinct)(b.map(C=>C.toString())).join(`\r
-`),split:b=>b.split(`\r
-`),parse:b=>e.UriList.split(b).filter(C=>!C.startsWith("#"))})}),define(X[247],J([10]),{}),define(X[366],J([10]),{}),define(X[367],J([10]),{}),define(X[368],J([10]),{}),define(X[369],J([10]),{}),define(X[160],J([1,0,368,369]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0})}),define(X[370],J([10]),{}),define(X[371],J([10]),{}),define(X[248],J([10]),{}),define(X[249],J([10]),{}),define(X[372],J([10]),{}),define(X[373],J([10]),{}),define(X[374],J([10]),{}),define(X[375],J([10]),{}),define(X[250],J([10]),{}),define(X[376],J([10]),{}),define(X[161],J([1,0,376]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME=void 0,e.MOUSE_CURSOR_TEXT_CSS_CLASS_NAME="monaco-mouse-cursor-text"}),define(X[377],J([10]),{}),define(X[378],J([10]),{}),define(X[379],J([10]),{}),define(X[380],J([10]),{}),define(X[381],J([10]),{}),define(X[382],J([10]),{}),define(X[383],J([10]),{}),define(X[384],J([10]),{}),define(X[385],J([10]),{}),define(X[386],J([10]),{}),define(X[387],J([10]),{}),define(X[388],J([10]),{}),define(X[389],J([10]),{}),define(X[390],J([10]),{}),define(X[391],J([10]),{}),define(X[392],J([10]),{}),define(X[393],J([10]),{}),define(X[394],J([10]),{}),define(X[395],J([10]),{}),define(X[396],J([10]),{}),define(X[397],J([10]),{}),define(X[398],J([10]),{}),define(X[399],J([10]),{}),define(X[400],J([10]),{}),define(X[401],J([10]),{}),define(X[402],J([10]),{}),define(X[403],J([10]),{}),define(X[404],J([10]),{}),define(X[405],J([10]),{}),define(X[406],J([10]),{}),define(X[407],J([10]),{}),define(X[408],J([10]),{}),define(X[409],J([10]),{}),define(X[410],J([10]),{}),define(X[411],J([10]),{}),define(X[412],J([10]),{}),define(X[413],J([10]),{}),define(X[414],J([10]),{}),define(X[415],J([10]),{}),define(X[416],J([10]),{}),define(X[417],J([10]),{}),define(X[418],J([10]),{}),define(X[419],J([10]),{}),define(X[420],J([10]),{}),define(X[421],J([10]),{}),define(X[422],J([10]),{}),define(X[423],J([10]),{}),define(X[424],J([10]),{}),define(X[425],J([10]),{}),define(X[426],J([10]),{}),define(X[427],J([10]),{}),define(X[428],J([10]),{}),define(X[429],J([10]),{}),define(X[430],J([10]),{}),define(X[431],J([10]),{}),define(X[432],J([10]),{}),define(X[433],J([10]),{}),define(X[434],J([10]),{}),define(X[435],J([10]),{}),define(X[436],J([10]),{}),define(X[437],J([10]),{}),define(X[438],J([10]),{}),define(X[439],J([10]),{}),define(X[440],J([10]),{}),define(X[441],J([10]),{}),define(X[442],J([10]),{}),define(X[443],J([10]),{}),define(X[251],J([10]),{}),define(X[444],J([10]),{}),define(X[445],J([10]),{}),define(X[162],J([10]),{}),define(X[446],J([10]),{}),define(X[74],J([1,0,35]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.applyFontInfo=void 0;function k(y,D){y instanceof S.FastDomNode?(y.setFontFamily(D.getMassagedFontFamily()),y.setFontWeight(D.fontWeight),y.setFontSize(D.fontSize),y.setFontFeatureSettings(D.fontFeatureSettings),y.setFontVariationSettings(D.fontVariationSettings),y.setLineHeight(D.lineHeight),y.setLetterSpacing(D.letterSpacing)):(y.style.fontFamily=D.getMassagedFontFamily(),y.style.fontWeight=D.fontWeight,y.style.fontSize=D.fontSize+"px",y.style.fontFeatureSettings=D.fontFeatureSettings,y.style.fontVariationSettings=D.fontVariationSettings,y.style.lineHeight=D.lineHeight+"px",y.style.letterSpacing=D.letterSpacing+"px")}e.applyFontInfo=k}),define(X[447],J([1,0,74]),function(j,e,S){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.readCharWidths=e.CharWidthRequest=void 0;class k{constructor(b,C){this.chr=b,this.type=C,this.width=0}fulfill(b){this.width=b}}e.CharWidthRequest=k;class y{constructor(b,C){this._bareFontInfo=b,this._requests=C,this._container=null,this._testElements=null}read(){this._createDomElements(),document.body.appendChild(this._container),this._readFromDomElements(),document.body.removeChild(this._container),this._container=null,this._testElements=null}_createDomElements(){const b=document.createElement("div");b.style.position="absolute",b.style.top="-50000px",b.style.width="50000px";const C=document.createElement("div");(0,S.applyFontInfo)(C,this._bareFontInfo),b.appendChild(C);const g=document.createElement("div");(0,S.applyFontInfo)(g,this._bareFontInfo),g.style.fontWeight="bold",b.appendChild(g);const m=document.createElement("div");(0,S.applyFontInfo)(m,this._bareFontInfo),m.style.fontStyle="italic",b.appendChild(m);const n=[];for(const t of this._requests){let i;t.type===0&&(i=C),t.type===2&&(i=g),t.type===1&&(i=m),i.appendChild(document.createElement("br"));const s=document.createElement("span");y._render(s,t),i.appendChild(s),n.push(s)}this._container=b,this._testElements=n}static _render(b,C){if(C.chr===" "){let g="\xA0";for(let m=0;m<8;m++)g+=g;b.innerText=g}else{let g=C.chr;for(let m=0;m<8;m++)g+=g;b.textContent=g}}_readFromDomElements(){for(let b=0,C=this._requests.length;bS._read(C,t),n=(t,i)=>S._write(C,t,i);this.migrate(g,m,n)}static _read(C,g){if(typeof C>"u")return;const m=g.indexOf(".");if(m>=0){const n=g.substring(0,m);return this._read(C[n],g.substring(m+1))}return C[g]}static _write(C,g,m){const n=g.indexOf(".");if(n>=0){const t=g.substring(0,n);C[t]=C[t]||{},this._write(C[t],g.substring(n+1),m);return}C[g]=m}}S.items=[],e.EditorSettingMigration=S;function k(b,C){S.items.push(new S(b,C))}function y(b,C){k(b,(g,m,n)=>{if(typeof g<"u"){for(const[t,i]of C)if(g===t){n(b,i);return}}})}function D(b){S.items.forEach(C=>C.apply(b))}e.migrateOptions=D,y("wordWrap",[[!0,"on"],[!1,"off"]]),y("lineNumbers",[[!0,"on"],[!1,"off"]]),y("cursorBlinking",[["visible","solid"]]),y("renderWhitespace",[[!0,"boundary"],[!1,"none"]]),y("renderLineHighlight",[[!0,"line"],[!1,"none"]]),y("acceptSuggestionOnEnter",[[!0,"on"],[!1,"off"]]),y("tabCompletion",[[!1,"off"],[!0,"onlySnippets"]]),y("hover",[[!0,{enabled:!0}],[!1,{enabled:!1}]]),y("parameterHints",[[!0,{enabled:!0}],[!1,{enabled:!1}]]),y("autoIndent",[[!1,"advanced"],[!0,"full"]]),y("matchBrackets",[[!0,"always"],[!1,"never"]]),y("renderFinalNewline",[[!0,"on"],[!1,"off"]]),y("cursorSmoothCaretAnimation",[[!0,"on"],[!1,"off"]]),k("autoClosingBrackets",(b,C,g)=>{b===!1&&(g("autoClosingBrackets","never"),typeof C("autoClosingQuotes")>"u"&&g("autoClosingQuotes","never"),typeof C("autoSurround")>"u"&&g("autoSurround","never"))}),k("renderIndentGuides",(b,C,g)=>{typeof b<"u"&&(g("renderIndentGuides",void 0),typeof C("guides.indentation")>"u"&&g("guides.indentation",!!b))}),k("highlightActiveIndentGuide",(b,C,g)=>{typeof b<"u"&&(g("highlightActiveIndentGuide",void 0),typeof C("guides.highlightActiveIndentation")>"u"&&g("guides.highlightActiveIndentation",!!b))});const w={method:"showMethods",function:"showFunctions",constructor:"showConstructors",deprecated:"showDeprecated",field:"showFields",variable:"showVariables",class:"showClasses",struct:"showStructs",interface:"showInterfaces",module:"showModules",property:"showProperties",event:"showEvents",operator:"showOperators",unit:"showUnits",value:"showValues",constant:"showConstants",enum:"showEnums",enumMember:"showEnumMembers",keyword:"showKeywords",text:"showWords",color:"showColors",file:"showFiles",reference:"showReferences",folder:"showFolders",typeParameter:"showTypeParameters",snippet:"showSnippets"};k("suggest.filteredTypes",(b,C,g)=>{if(b&&typeof b=="object"){for(const m of Object.entries(w))b[m[0]]===!1&&typeof C(`suggest.${m[1]}`)>"u"&&g(`suggest.${m[1]}`,!1);g("suggest.filteredTypes",void 0)}}),k("quickSuggestions",(b,C,g)=>{if(typeof b=="boolean"){const m=b?"on":"off";g("quickSuggestions",{comments:m,strings:m,other:m})}}),k("experimental.stickyScroll.enabled",(b,C,g)=>{typeof b=="boolean"&&(g("experimental.stickyScroll.enabled",void 0),typeof C("stickyScroll.enabled")>"u"&&g("stickyScroll.enabled",b))}),k("experimental.stickyScroll.maxLineCount",(b,C,g)=>{typeof b=="number"&&(g("experimental.stickyScroll.maxLineCount",void 0),typeof C("stickyScroll.maxLineCount")>"u"&&g("stickyScroll.maxLineCount",b))})}),define(X[114],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.StableEditorScrollState=void 0;class S{static capture(y){let D=null,w=0;if(y.getScrollTop()!==0){const b=y.getVisibleRanges();if(b.length>0){D=b[0].getStartPosition();const C=y.getTopForPosition(D.lineNumber,D.column);w=y.getScrollTop()-C}}return new S(D,w,y.getPosition())}constructor(y,D,w){this._visiblePosition=y,this._visiblePositionScrollDelta=D,this._cursorPosition=w}restore(y){if(this._visiblePosition){const D=y.getTopForPosition(this._visiblePosition.lineNumber,this._visiblePosition.column);y.setScrollTop(D+this._visiblePositionScrollDelta)}}restoreRelativeVerticalPositionOfCursor(y){const D=y.getPosition();if(!this._cursorPosition||!D)return;const w=y.getTopForLineNumber(D.lineNumber)-y.getTopForLineNumber(this._cursorPosition.lineNumber);y.setScrollTop(y.getScrollTop()+w)}}e.StableEditorScrollState=S}),define(X[134],J([1,0]),function(j,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.VisibleRanges=e.HorizontalPosition=e.FloatHorizontalRange=e.HorizontalRange=e.LineVisibleRanges=e.RenderingContext=e.RestrictedRenderingContext=void 0;class S{constructor(m,n){this._restrictedRenderingContextBrand=void 0,this._viewLayout=m,this.viewportData=n,this.scrollWidth=this._viewLayout.getScrollWidth(),this.scrollHeight=this._viewLayout.getScrollHeight(),this.visibleRange=this.viewportData.visibleRange,this.bigNumbersDelta=this.viewportData.bigNumbersDelta;const t=this._viewLayout.getCurrentViewport();this.scrollTop=t.top,this.scrollLeft=t.left,this.viewportWidth=t.width,this.viewportHeight=t.height}getScrolledTopFromAbsoluteTop(m){return m-this.scrollTop}getVerticalOffsetForLineNumber(m,n){return this._viewLayout.getVerticalOffsetForLineNumber(m,n)}getVerticalOffsetAfterLineNumber(m,n){return this._viewLayout.getVerticalOffsetAfterLineNumber(m,n)}getDecorationsInViewport(){return this.viewportData.getDecorationsInViewport()}}e.RestrictedRenderingContext=S;class k extends S{constructor(m,n,t){super(m,n),this._renderingContextBrand=void 0,this._viewLines=t}linesVisibleRangesForRange(m,n){return this._viewLines.linesVisibleRangesForRange(m,n)}visibleRangeForPosition(m){return this._viewLines.visibleRangeForPosition(m)}}e.RenderingContext=k;class y{constructor(m,n,t){this.outsideRenderedLine=m,this.lineNumber=n,this.ranges=t}}e.LineVisibleRanges=y;class D{static from(m){const n=new Array(m.length);for(let t=0,i=m.length;t
+```mermaid
+erDiagram
+ buckets ||--o{ objects : "buckets_id:id"
+ buckets {
+ text id PK
+ text name
+ timestamptz created_at
+ timestamptz updated_at
+ boolean public
+ bigint file_size_limit
+ text[] allowed_mime_types
+ text owner_id
+ }
+ objects {
+ uuid id PK
+ text bucket_id FK
+ text name
+ timestamptz created_at
+ timestamptz updated_at
+ jsonb metadata
+ text[] path_tokens
+ text version
+ text owner_id
+ }
+ migrations {
+ integer id PK
+ varchar(100) name
+ varchar(40) hash
+ timestamp executed_at
+ }
+```
-You have the option to query this table directly to retrieve information about your files in Storage without the need to go through our API.
+The schema centers on three tables. Each `buckets` row can own many `objects` rows by a one-to-many relationship that joins `buckets.id` to `objects.bucket_id`. The `buckets` table holds bucket configuration. Its `id` and `name`, whether the bucket is `public`, and constraints such as `file_size_limit` and `allowed_mime_types`. The `objects` table holds per-file metadata: the owning `bucket_id`, the object `name` and `path_tokens`, a `metadata` JSON blob, and version information. The `migrations` table is standalone and tracks the schema migrations applied to the storage service.
## Modifying the schema
diff --git a/apps/docs/content/guides/storage/security/ownership.mdx b/apps/docs/content/guides/storage/security/ownership.mdx
index 10f724d6841..dd0d6aa8ae2 100644
--- a/apps/docs/content/guides/storage/security/ownership.mdx
+++ b/apps/docs/content/guides/storage/security/ownership.mdx
@@ -36,4 +36,4 @@ using (
);
```
-The use of RLS policies is just one way to enforce access control. You can also implement access control in your server code by following the same pattern.
+The use of RLS policies is one way to enforce access control. You can also implement access control in your server code by following the same pattern.
diff --git a/apps/docs/content/guides/telemetry/logs.mdx b/apps/docs/content/guides/telemetry/logs.mdx
index 9f5d9ae85bc..0d41674f528 100644
--- a/apps/docs/content/guides/telemetry/logs.mdx
+++ b/apps/docs/content/guides/telemetry/logs.mdx
@@ -147,6 +147,8 @@ Do not log Personal Identifiable Information (PII) within the `User-Agent` heade
Postgres can log connection lifecycle events to your project's Postgres logs, for example when a client connects or authenticates. By default, Supabase sets `log_connections` to off for new projects and you must enable it first.
+<$Partial path="log_connections_default_effective_date.mdx" />
+
To enable connection logging for audit or compliance, see [Postgres connection logging](/docs/guides/platform/postgres-connection-logging).
In the [Logs Explorer](/dashboard/project/_/logs-explorer), connection lifecycle messages may be hidden by default. Use the connection logs filter in the sidebar to show them.
diff --git a/apps/docs/content/navigation.references.ts b/apps/docs/content/navigation.references.ts
index dc4f4c137a0..b1a1fc10972 100644
--- a/apps/docs/content/navigation.references.ts
+++ b/apps/docs/content/navigation.references.ts
@@ -39,8 +39,10 @@ export const REFERENCES = {
icon: 'reference-dart',
meta: {
v2: {
+ // Dart v2 is driven by the new reference pipeline
+ // (`scripts/build-reference-content.ts` + `spec/reference/dart/v2/`).
+ // It intentionally has no `specFile`, so the legacy YAML loader skips it.
libId: 'reference_dart_v2',
- specFile: 'supabase_dart_v2',
},
v1: {
libId: 'reference_dart_v1',
diff --git a/apps/docs/content/troubleshooting/disabling-prepared-statements-qL8lEL.mdx b/apps/docs/content/troubleshooting/disabling-prepared-statements-qL8lEL.mdx
index bddc58bf5f7..c9741c78913 100644
--- a/apps/docs/content/troubleshooting/disabling-prepared-statements-qL8lEL.mdx
+++ b/apps/docs/content/troubleshooting/disabling-prepared-statements-qL8lEL.mdx
@@ -31,7 +31,7 @@ export const client = postgres(connectionString, { prepare: false })
## Node Postgres
-[Just omit the "name" value in a query definition](https://node-postgres.com/features/queries#prepared-statements):
+[Omit the "name" value in a query definition](https://node-postgres.com/features/queries#prepared-statements):
```ts
const query = {
diff --git a/apps/docs/content/troubleshooting/edge-function-500-error-response.mdx b/apps/docs/content/troubleshooting/edge-function-500-error-response.mdx
index c28c5761e0f..2351c1cb1e0 100644
--- a/apps/docs/content/troubleshooting/edge-function-500-error-response.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-500-error-response.mdx
@@ -123,7 +123,7 @@ const some_num = 5
some_num() // TypeError: some_num is not a function
```
-This issue often appears when working with returned objects from external APIs. One may assume a response has a certain shape, but if the value is actually `null` or `undefined`, using it without checking can lead to a `TypeError`.
+This issue often appears when working with returned objects from external APIs. One may assume a response has a certain shape, but if the value is `null` or `undefined`, using it without checking can lead to a `TypeError`.
```js
const data = await req.json() // returns undefined if request body is empty
@@ -277,7 +277,7 @@ if (req.method === 'OPTIONS') {
}
```
-So, when encountering these errors, it is still important to check the logs or run the request outside the browser to make sure it is actually the primary factor and not a side-effect of a larger issue.
+So, when encountering these errors, it is still important to check the logs or run the request outside the browser to make sure it is the primary factor and not a side-effect of a larger issue.
## Still stuck?
diff --git a/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx b/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
index cc869fa405a..9f4b12e25d0 100644
--- a/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-546-error-response.mdx
@@ -252,7 +252,7 @@ If you believe a portion of your function is overly aggressive, try testing loca
Common culprits:
-**CPU intensive recursions**: intensive loops or recursion can quickly exhaust CPU
+**CPU intensive recursions**: intensive loops or recursion can exhaust CPU
```js
// This will exhaust CPU allocation when called repeatedly
@@ -288,7 +288,7 @@ If you are performing logic to process data from Supabase Postgres, you may be a
### 4. Offload operations to an external API:
-Instead of managing all operations within the function itself, there may be an external API that can execute CPU or memory intensive jobs on its behalf. One [example](/docs/guides/functions/examples/screenshots) would be using an external API for orchestrating a headless browser and then just using the edge function to manage the output of the activity instead of everything all in place.
+Instead of managing all operations within the function itself, there may be an external API that can execute CPU or memory intensive jobs on its behalf. One [example](/docs/guides/functions/examples/screenshots) would be using an external API for orchestrating a headless browser and then using the edge function to manage the output of the activity instead of everything all in place.
### 5. Split operations into individual functions:
@@ -312,7 +312,7 @@ Performing edits against images or other large files can be both CPU and Memory
### AI embedding generation and inference
-AI models process data into embeddings (large arrays), that they can more understand. Edge Functions are capable of managing [some small models directly](/blog/ai-inference-now-available-in-supabase-edge-functions); however, some require more processing power than what the edge function can support directly. In these cases, the solution is to manage the embeddings via an external source, such as OpenAI, Anthropic, etc. and to just use the edge function for light processing and coordination.
+AI models process data into embeddings (large arrays), that they can more understand. Edge Functions are capable of managing [some small models directly](/blog/ai-inference-now-available-in-supabase-edge-functions); however, some require more processing power than what the edge function can support directly. In these cases, the solution is to manage the embeddings via an external source, such as OpenAI, Anthropic, etc. and to use the edge function for light processing and coordination.
### Web scraping
diff --git a/apps/docs/content/troubleshooting/edge-function-dependency-analysis.mdx b/apps/docs/content/troubleshooting/edge-function-dependency-analysis.mdx
index 9d1f742018b..b1b764d3d78 100644
--- a/apps/docs/content/troubleshooting/edge-function-dependency-analysis.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-dependency-analysis.mdx
@@ -26,7 +26,7 @@ Review the output for:
- **Large dependencies:** Packages that contribute significantly to bundle size
- **Redundant imports:** Multiple packages providing similar functionality
- **Outdated versions:** Dependencies that can be updated to more efficient versions
-- **Unused imports:** Dependencies imported but not actually used in your code
+- **Unused imports:** Dependencies imported but not used in your code
## Optimizing NPM dependencies
@@ -39,18 +39,17 @@ Import specific submodules to minimize overhead:
```tsx
// Good: Import specific submodules
import { Sheets } from 'npm:@googleapis/sheets'
+import * as googleAuth from 'npm:google-auth-library'
import { JWT } from 'npm:google-auth-library/build/src/auth/jwtclient'
-
// Avoid: Import entire package
import * as googleapis from 'npm:googleapis'
-import * as googleAuth from 'npm:google-auth-library'
```
## Best practices
### Tree-shake aggressively
-Only import what you actually use. Avoid wildcard imports (`import *`) when possible.
+Only import what you use. Avoid wildcard imports (`import *`) when possible.
### Choose lightweight alternatives
diff --git a/apps/docs/content/troubleshooting/edge-function-shutdown-reasons-explained.mdx b/apps/docs/content/troubleshooting/edge-function-shutdown-reasons-explained.mdx
index e1900cefcfc..eca96448772 100644
--- a/apps/docs/content/troubleshooting/edge-function-shutdown-reasons-explained.mdx
+++ b/apps/docs/content/troubleshooting/edge-function-shutdown-reasons-explained.mdx
@@ -80,11 +80,11 @@ These events are surfaced through logs and observability tools, allowing you to
### EarlyDrop
-**What it means:** The runtime detected that the function has completed all its work and can be shut down early, before reaching any resource limits. This is actually the most common shutdown reason and typically indicates efficient function execution.
+**What it means:** The runtime detected that the function has completed all its work and can be shut down early, before reaching any resource limits. This is the most common shutdown reason and typically indicates efficient function execution.
**When it happens:** Your function has finished processing the request, sent the response, and has no remaining async work (pending promises, timers, or callbacks). The runtime recognizes that the worker can be safely terminated without waiting for timeouts or other limits.
-**Why this is good:** `EarlyDrop` means your function is running efficiently. It completed quickly, didn't exhaust resources, and the runtime could reclaim the worker for other requests. Most well-designed functions should end with `EarlyDrop`.
+**Why this is good:** `EarlyDrop` means your function is running efficiently. It completed without exhausting resources, and the runtime could reclaim the worker for other requests. Most well-designed functions should end with `EarlyDrop`.
**What to do:**
diff --git a/apps/docs/content/troubleshooting/error-index-row-size-exceeds-btree-version-4-maximum-for-index-LMmoeU.mdx b/apps/docs/content/troubleshooting/error-index-row-size-exceeds-btree-version-4-maximum-for-index-LMmoeU.mdx
index dc9439700af..5d9df4a6c53 100644
--- a/apps/docs/content/troubleshooting/error-index-row-size-exceeds-btree-version-4-maximum-for-index-LMmoeU.mdx
+++ b/apps/docs/content/troubleshooting/error-index-row-size-exceeds-btree-version-4-maximum-for-index-LMmoeU.mdx
@@ -62,6 +62,6 @@ select * from table_name where column_name = 'search_value';
[More on building index by expression](https://www.postgresql.org/docs/current/sql-createindex.html)
-For some datatypes other than text that allows queries by partial inclusion (i.e. that the pair key-value is includes in a JSON or for implementing tsvector phrase search) you'd just use GIST/GIN indexes that inherently have values space much narrower that the whole to be indexed.
+For some non-text datatypes that support queries by partial inclusion—such as checking whether a key-value pair exists in JSON, or implementing `tsvector` phrase search—use GiST or GIN indexes. These index types operate on a narrower value space than the full content being indexed.
[More on GIN/GiST indexes](https://www.postgresql.org/docs/15/textsearch-indexes.html)
diff --git a/apps/docs/content/troubleshooting/high-cpu-and-slow-queries-with-error-must-be-a-superuser-to-terminate-superuser-process.mdx b/apps/docs/content/troubleshooting/high-cpu-and-slow-queries-with-error-must-be-a-superuser-to-terminate-superuser-process.mdx
index b676cdf8c54..22d1be7e136 100644
--- a/apps/docs/content/troubleshooting/high-cpu-and-slow-queries-with-error-must-be-a-superuser-to-terminate-superuser-process.mdx
+++ b/apps/docs/content/troubleshooting/high-cpu-and-slow-queries-with-error-must-be-a-superuser-to-terminate-superuser-process.mdx
@@ -40,7 +40,7 @@ This situation often arises in large, high-write tables (e.g., `your_table`, whi
### **Mitigating performance impact during a critical autovacuum**
-Since the wraparound prevention autovacuum cannot be stopped, the best approach is to provide the database with sufficient resources to complete the operation as quickly and efficiently as possible.
+Since the wraparound prevention autovacuum cannot be stopped, the best approach is to provide the database with sufficient resources to complete the operation as efficiently as possible.
1. **Upgrade your Database Compute Instance:**
- **Action:** Temporarily scale up your instance's CPU (e.g., from `m6g.4xlarge` to `m6g.8xlarge` or higher).
diff --git a/apps/docs/content/troubleshooting/high-latency-with-supabase-client-z0pZzR.mdx b/apps/docs/content/troubleshooting/high-latency-with-supabase-client-z0pZzR.mdx
index 13ab6fdba1f..5f84bbb234d 100644
--- a/apps/docs/content/troubleshooting/high-latency-with-supabase-client-z0pZzR.mdx
+++ b/apps/docs/content/troubleshooting/high-latency-with-supabase-client-z0pZzR.mdx
@@ -92,8 +92,8 @@ if __name__ == "__main__":
print(f"postgres: {ref}, supabase: {sup}, ratio: {sup/ref}")
```
-3. You will see that the Supabase client takes longer to execute the same query, especially for smaller tables or queries returning just one row.
+3. You will see that the Supabase client takes longer to execute the same query, especially for smaller tables or queries returning only one row.
## Expected behavior
-The overhead from PostgREST shouldn't be higher than a few milliseconds at max. 60-70 ms is way too high. This is particular deceiving because one can run the query on the SQL Editor page and it reports the same time as the direct Postgres query, which is not what actually happens.
+The overhead from PostgREST shouldn't be higher than a few milliseconds at max. 60-70 ms is way too high. This is particular deceiving because one can run the query on the SQL Editor page and it reports the same time as the direct Postgres query, which is not what happens.
diff --git a/apps/docs/content/troubleshooting/how-postgres-chooses-which-index-to-use-_JHrf4.mdx b/apps/docs/content/troubleshooting/how-postgres-chooses-which-index-to-use-_JHrf4.mdx
index 914c5b6cc4c..ac3880bae98 100644
--- a/apps/docs/content/troubleshooting/how-postgres-chooses-which-index-to-use-_JHrf4.mdx
+++ b/apps/docs/content/troubleshooting/how-postgres-chooses-which-index-to-use-_JHrf4.mdx
@@ -77,7 +77,7 @@ In most cases, developers work with the default BTREE index. It is the most prac
An operator's functional equivalents, such as `IN`, `BETWEEN`, and `ANY`, are also valid.
-However, just because the base requirements (relevant column, filter, and operators) are present, doesn't mean that an index will be used.
+However, an index isn't guaranteed to be used, even when the base requirements (relevant column, filter, and operators) are present.
Indexes have a startup cost, so for small tables, Postgres might use a sequential scan if it believes that it will take less time. The database keeps statistics about each table that it uses to inform these choices.
@@ -141,7 +141,7 @@ select * from test1 where lower(col1) = 'value';
#### Covering indexes
-Indexes contain pointers to a specific row, but you could instruct an index to actually hold a copy of a column's value for even faster retrieval. These are known as `covering` indexes. Because maintaining a copy is storage intensive, you should avoid using it for values with large data footprints.[ FULL VIDEO ON TOPIC](https://www.youtube.com/watch?v=bBu_V8CfWgM)
+Indexes contain pointers to a specific row, but you could instruct an index to hold a copy of a column's value for even faster retrieval. These are known as `covering` indexes. Because maintaining a copy is storage intensive, you should avoid using it for values with large data footprints.[ FULL VIDEO ON TOPIC](https://www.youtube.com/watch?v=bBu_V8CfWgM)
```sql
CREATE INDEX a_b_idx ON x (a,b) INCLUDE (c);
@@ -149,7 +149,7 @@ CREATE INDEX a_b_idx ON x (a,b) INCLUDE (c);
#### Indexes on JSONB
-Although a GIN/GIST index can be used to index entire JSONB bodies, you can also target just specific Key-values with standard BTREE indexes:
+Although a GIN/GIST index can be used to index entire JSONB bodies, you can also target only specific Key-values with standard BTREE indexes:
```sql
-- Example table
diff --git a/apps/docs/content/troubleshooting/how-to-change-max-database-connections-_BQ8P5.mdx b/apps/docs/content/troubleshooting/how-to-change-max-database-connections-_BQ8P5.mdx
index e1c69e3ee29..4682d7ed2dd 100644
--- a/apps/docs/content/troubleshooting/how-to-change-max-database-connections-_BQ8P5.mdx
+++ b/apps/docs/content/troubleshooting/how-to-change-max-database-connections-_BQ8P5.mdx
@@ -71,7 +71,7 @@ This is a Grafana Chart of unhealthy memory usage:
- Yellow: represents active memory
-- Red: represents SWAP, which is disk storage that the system treats as if it were actually memory
+- Red: represents SWAP, which is disk storage that the system treats as if it were memory
- Green: it is unclaimed (the system will always leave some memory unclaimed)
- Blue: it is cached data and a buffer
diff --git a/apps/docs/content/troubleshooting/how-to-interpret-and-explore-the-postgres-logs-OuCIOj.mdx b/apps/docs/content/troubleshooting/how-to-interpret-and-explore-the-postgres-logs-OuCIOj.mdx
index 811abe5dc63..c0ece19c525 100644
--- a/apps/docs/content/troubleshooting/how-to-interpret-and-explore-the-postgres-logs-OuCIOj.mdx
+++ b/apps/docs/content/troubleshooting/how-to-interpret-and-explore-the-postgres-logs-OuCIOj.mdx
@@ -263,7 +263,7 @@ limit 100;
When recording what is accessed and by whom, logging based on database roles and objects is the most reliable way to ensure a proper trail of activity.
-You can use the [pg_audit](/docs/guides/database/extensions/pgaudit) extension to selectively log relevant queries (not just errors) by certain roles, against specific database objects.
+You can use the [pg_audit](/docs/guides/database/extensions/pgaudit) extension to selectively log relevant queries, not only errors, by certain roles, against specific database objects.
You should take care when using the extension to not log all database events, but only what is absolutely necessary. Over-logging can strain the database and create log noise that makes it difficult to filter for relevant events.
diff --git a/apps/docs/content/troubleshooting/inserting-into-sequenceserial-table-causes-duplicate-key-violates-unique-constraint-error-pi6DnC.mdx b/apps/docs/content/troubleshooting/inserting-into-sequenceserial-table-causes-duplicate-key-violates-unique-constraint-error-pi6DnC.mdx
index c09d6d28ae7..bb30ac7b402 100644
--- a/apps/docs/content/troubleshooting/inserting-into-sequenceserial-table-causes-duplicate-key-violates-unique-constraint-error-pi6DnC.mdx
+++ b/apps/docs/content/troubleshooting/inserting-into-sequenceserial-table-causes-duplicate-key-violates-unique-constraint-error-pi6DnC.mdx
@@ -28,7 +28,7 @@ SELECT nextval(pg_get_serial_sequence('