diff --git a/apps/design-system/app/Providers.tsx b/apps/design-system/app/Providers.tsx index a7fe031c76..46dce70854 100644 --- a/apps/design-system/app/Providers.tsx +++ b/apps/design-system/app/Providers.tsx @@ -1,20 +1,19 @@ 'use client' +import { ThemeProvider } from 'common' import { Provider as JotaiProvider } from 'jotai' -import { ThemeProvider as NextThemesProvider } from 'next-themes' -import { ThemeProviderProps } from 'next-themes/dist/types' import { TooltipProvider } from 'ui' import { MobileSidebarProvider } from '@/context/mobile-sidebar-context' -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { +export function Providers({ children }: { children: React.ReactNode }) { return ( - + {children} - + ) } diff --git a/apps/design-system/app/layout.tsx b/apps/design-system/app/layout.tsx index 93fa102345..69176828eb 100644 --- a/apps/design-system/app/layout.tsx +++ b/apps/design-system/app/layout.tsx @@ -4,7 +4,7 @@ import '@/styles/globals.css' import type { Metadata, Viewport } from 'next' import { customFont, sourceCodePro } from './fonts' -import { ThemeProvider } from './Providers' +import { Providers } from './Providers' import { Toaster } from './toaster' const className = `${customFont.variable} ${sourceCodePro.variable}` @@ -131,16 +131,12 @@ export default async function Layout({ children }: RootLayoutProps) { /> - +
{children}
- + ) diff --git a/apps/design-system/package.json b/apps/design-system/package.json index 9e80848471..5f8269c8af 100644 --- a/apps/design-system/package.json +++ b/apps/design-system/package.json @@ -20,6 +20,7 @@ "@hookform/resolvers": "^3.1.1", "@tanstack/react-table": "^8.21.3", "contentlayer2": "0.4.6", + "common": "workspace:*", "date-fns": "^2.30.0", "dayjs": "1.11.13", "eslint-config-supabase": "workspace:*", @@ -29,7 +30,7 @@ "markdown-wasm": "^1.2.0", "next": "catalog:", "next-contentlayer2": "0.4.6", - "next-themes": "^0.3.0", + "next-themes": "catalog:", "react": "catalog:", "react-data-grid": "7.0.0-beta.47", "react-day-picker": "^9.11.1", diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index 93f642501b..92ba17cb22 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -1,13 +1,13 @@ 'use client' -import { ChevronRight, Play, Sparkles } from 'lucide-react' -import Link from 'next/link' -import { useTheme } from 'next-themes' // End of third-party imports - import { isFeatureEnabled, useBreakpoint } from 'common' +import { ChevronRight, Play, Sparkles } from 'lucide-react' +import { useTheme } from 'next-themes' +import Link from 'next/link' import { cn, IconBackground } from 'ui' import { IconPanel } from 'ui-patterns/IconPanel' + import { getCustomContent } from '../lib/custom-content/getCustomContent' import DocsCoverLogo from './DocsCoverLogo' @@ -41,7 +41,7 @@ const HomePageCover = (props) => { const iconSize = isXs ? 'sm' : 'lg' const { homepageHeading } = getCustomContent(['homepage:heading']) const { resolvedTheme } = useTheme() - const isLightMode = resolvedTheme !== 'dark' + const isLightMode = !resolvedTheme?.includes('dark') const frameworks = [ { diff --git a/apps/docs/content/guides/realtime/authorization.mdx b/apps/docs/content/guides/realtime/authorization.mdx index 5a4a68ef20..2b65ba51e7 100644 --- a/apps/docs/content/guides/realtime/authorization.mdx +++ b/apps/docs/content/guides/realtime/authorization.mdx @@ -381,9 +381,9 @@ with check ( ## Interaction with Postgres Changes -Realtime Postgres Changes are separate from Channel authorization. The `private` Channel option does not apply to Postgres Changes. +When using Postgres Changes on tables with RLS, database records are sent only to clients who are allowed to read them based on your RLS policies. -When using Postgres Changes with RLS, database records are sent only to clients who are allowed to read them based on your RLS policies. +Private and public channels can subscribe to Postgres Changes. ## Updating RLS policies diff --git a/apps/docs/features/app.providers.tsx b/apps/docs/features/app.providers.tsx index 8469b004cb..cc7460313a 100644 --- a/apps/docs/features/app.providers.tsx +++ b/apps/docs/features/app.providers.tsx @@ -24,7 +24,7 @@ function GlobalProviders({ children }: PropsWithChildren) { - +
diff --git a/apps/docs/package.json b/apps/docs/package.json index e21a6d9ace..1259814500 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -93,7 +93,7 @@ "next": "^15.5.15", "next-mdx-remote": "^6.0.0", "next-plugin-yaml": "^1.0.1", - "next-themes": "^0.3.0", + "next-themes": "catalog:", "nuqs": "^1.19.1", "openai": "^4.75.1", "openapi-fetch": "0.12.4", diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt index 81fe74d50d..338c6c0e48 100644 --- a/apps/docs/public/humans.txt +++ b/apps/docs/public/humans.txt @@ -142,6 +142,7 @@ Jordi Enric José Luis Ledesma Joshen Lim Julien Goux +Kai M Kalleby Santos Kanishk Dudeja Kamil Ogórek @@ -222,6 +223,7 @@ Sam Rome Sam Rose Samir Ketema Sana Cordeaux +Sasi Kanumuri Sara Read Sean Oliver Sean Romberg diff --git a/apps/docs/styles/main.css b/apps/docs/styles/main.css index e5366ce723..de09695612 100644 --- a/apps/docs/styles/main.css +++ b/apps/docs/styles/main.css @@ -2,6 +2,7 @@ @import './../../../packages/ui/build/css/source/global.css'; @import './../../../packages/ui/build/css/themes/dark.css'; +@import './../../../packages/ui/build/css/themes/faux-classic-dark.css'; @import './../../../packages/ui/build/css/themes/light.css'; @config '../tailwind.config.cjs'; diff --git a/apps/learn/app/Providers.tsx b/apps/learn/app/Providers.tsx index 24d7eac122..1cfc344881 100644 --- a/apps/learn/app/Providers.tsx +++ b/apps/learn/app/Providers.tsx @@ -1,25 +1,24 @@ 'use client' +import { AuthProvider, ThemeProvider } from 'common' import { Provider as JotaiProvider } from 'jotai' -import { ThemeProvider as NextThemesProvider } from 'next-themes' -import { ThemeProviderProps } from 'next-themes/dist/types' +import { PropsWithChildren } from 'react' +import { TooltipProvider } from 'ui' import { FrameworkProvider } from '@/context/framework-context' import { MobileMenuProvider } from '@/context/mobile-menu-context' -import { AuthProvider } from 'common' -import { TooltipProvider } from 'ui' -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { +export function Providers({ children }: PropsWithChildren) { return ( - + {children} - + ) diff --git a/apps/learn/app/layout.tsx b/apps/learn/app/layout.tsx index d4dd63ee7d..abd7a75e38 100644 --- a/apps/learn/app/layout.tsx +++ b/apps/learn/app/layout.tsx @@ -6,7 +6,7 @@ import { FeatureFlagProvider, TelemetryTagManager } from 'common' import { genFaviconData } from 'common/MetaFavicons/app-router' import { Inter } from 'next/font/google' -import { ThemeProvider } from './Providers' +import { Providers } from './Providers' import { Toaster } from './toaster' import { API_URL } from '@/lib/constants' @@ -47,14 +47,10 @@ export default async function Layout({ children }: RootLayoutProps) { - + {children} - + diff --git a/apps/learn/package.json b/apps/learn/package.json index 217c202dc5..f2159e418c 100644 --- a/apps/learn/package.json +++ b/apps/learn/package.json @@ -23,7 +23,7 @@ "lucide-react": "*", "next": "catalog:", "next-contentlayer2": "0.4.6", - "next-themes": "^0.3.0", + "next-themes": "catalog:", "react": "catalog:", "react-dom": "catalog:", "react-wrap-balancer": "^1.1.0", diff --git a/apps/lite-studio/app/app.css b/apps/lite-studio/app/app.css index da69bb81ee..1361ee2608 100644 --- a/apps/lite-studio/app/app.css +++ b/apps/lite-studio/app/app.css @@ -2,6 +2,7 @@ @import './../../../packages/ui/build/css/source/global.css'; @import './../../../packages/ui/build/css/themes/dark.css'; +@import './../../../packages/ui/build/css/themes/classic-dark.css'; @import './../../../packages/ui/build/css/themes/light.css'; @config '../tailwind.config.js'; diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx index 8916086b46..8496b652ef 100644 --- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx +++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CreateOrUpdateCustomProviderSheet.tsx @@ -12,7 +12,6 @@ import { FormControl, FormField, FormInputGroupInput, - Input, Input_Shadcn_, InputGroup, InputGroupAddon, @@ -30,6 +29,7 @@ import { Switch, useWatch, } from 'ui' +import { Input } from 'ui-patterns/DataInputs/Input' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import * as z from 'zod' diff --git a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx index 3b23e23d14..39f86f5b35 100644 --- a/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx +++ b/apps/studio/components/interfaces/Auth/CustomAuthProviders/CustomAuthProvidersList.tsx @@ -15,7 +15,9 @@ import { HoverCard, HoverCardContent, HoverCardTrigger, - Input, + InputGroup, + InputGroupAddon, + InputGroupInput, Table, TableBody, TableCell, @@ -284,14 +286,17 @@ export const CustomAuthProvidersList = () => {
- } - value={filterString} - className="w-full lg:w-52" - onChange={(e) => setFilterString(e.target.value)} - /> + + setFilterString(e.target.value)} + /> + + + + { Postgres function
- schema + - hook.method.type === 'postgres' && copyToClipboard(hook.method.schema) - } />
- function + - hook.method.type === 'postgres' && copyToClipboard(hook.method.functionName) - } />
@@ -67,26 +70,33 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => { HTTPS endpoint
- endpoint + hook.method.type === 'https' && copyToClipboard(hook.method.url)} />
- secret +
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx index d995647864..149271a6f5 100644 --- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx +++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx @@ -13,7 +13,9 @@ import { DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, - Input, + InputGroup, + InputGroupAddon, + InputGroupInput, Table, TableBody, TableCell, @@ -231,14 +233,17 @@ export const OAuthAppsList = () => { )}
- } - value={filterString} - className="w-full lg:w-52" - onChange={(e) => setFilterString(e.target.value)} - /> + + setFilterString(e.target.value)} + /> + + + + A descriptive name for your policy

- onUpdatePolicyName(e.target.value)} - actions={ - + + onUpdatePolicyName(e.target.value)} + /> + + {name.length}/{limit} - - } - /> + + +
) diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx index 2194d35771..d1377074e9 100644 --- a/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx +++ b/apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/PolicyTemplates.tsx @@ -1,7 +1,16 @@ import { PostgresPolicy } from '@supabase/postgres-meta' import { Search } from 'lucide-react' import { useState } from 'react' -import { Badge, cn, HoverCard, HoverCardContent, HoverCardTrigger, Input } from 'ui' +import { + Badge, + cn, + HoverCard, + HoverCardContent, + HoverCardTrigger, + InputGroup, + InputGroupAddon, + InputGroupInput, +} from 'ui' import { SimpleCodeBlock } from 'ui-patterns/SimpleCodeBlock' import { @@ -56,14 +65,17 @@ export const PolicyTemplates = ({ - } - placeholder="Search templates" - value={search} - onChange={(event) => setSearch(event.target.value)} - /> + + setSearch(e.target.value)} + /> + + + + {search.length > 0 && filteredTemplates.length === 0 && ( diff --git a/apps/studio/components/interfaces/DatabaseNavShortcuts.tsx b/apps/studio/components/interfaces/DatabaseNavShortcuts.tsx new file mode 100644 index 0000000000..1b524aeaa7 --- /dev/null +++ b/apps/studio/components/interfaces/DatabaseNavShortcuts.tsx @@ -0,0 +1,96 @@ +import { useRouter } from 'next/router' +import { useCallback, useMemo } from 'react' + +import { useGenerateDatabaseMenu } from '@/components/layouts/DatabaseLayout/DatabaseMenu.utils' +import { SHORTCUT_IDS, type ShortcutId } from '@/state/shortcuts/registry' +import { useShortcut } from '@/state/shortcuts/useShortcut' + +export const DatabaseNavShortcuts = () => { + const router = useRouter() + const groups = useGenerateDatabaseMenu() + + const urlByShortcut = useMemo(() => { + const map = new Map() + for (const group of groups) { + for (const item of group.items) { + if (item.shortcutId && item.url) map.set(item.shortcutId, item.url) + } + } + return map + }, [groups]) + + const navigate = useCallback( + (id: ShortcutId) => { + const url = urlByShortcut.get(id) + if (url) router.push(url) + }, + [router, urlByShortcut] + ) + + useShortcut(SHORTCUT_IDS.NAV_DATABASE_TABLES, () => navigate(SHORTCUT_IDS.NAV_DATABASE_TABLES), { + enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_TABLES), + }) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_TRIGGERS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_TRIGGERS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_TRIGGERS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_INDEXES, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_INDEXES), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_INDEXES) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER) } + ) + useShortcut(SHORTCUT_IDS.NAV_DATABASE_ROLES, () => navigate(SHORTCUT_IDS.NAV_DATABASE_ROLES), { + enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_ROLES), + }) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_BACKUPS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_BACKUPS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_BACKUPS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS) } + ) + useShortcut(SHORTCUT_IDS.NAV_DATABASE_TYPES, () => navigate(SHORTCUT_IDS.NAV_DATABASE_TYPES), { + enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_TYPES), + }) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_SETTINGS, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_SETTINGS), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_SETTINGS) } + ) + useShortcut( + SHORTCUT_IDS.NAV_DATABASE_REPLICATION, + () => navigate(SHORTCUT_IDS.NAV_DATABASE_REPLICATION), + { enabled: urlByShortcut.has(SHORTCUT_IDS.NAV_DATABASE_REPLICATION) } + ) + + return null +} diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx index 95589d1819..745fea8d77 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx @@ -17,7 +17,10 @@ import { FormItem, FormLabel, FormMessage, - Input, + InputGroup, + InputGroupAddon, + InputGroupInput, + InputGroupText, Popover_Shadcn_, PopoverContent_Shadcn_, PopoverTrigger_Shadcn_, @@ -192,12 +195,12 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => { name="values.timeoutMs" render={({ field: { ref, ...rest } }) => ( - ms

} - /> + + + + ms + + )} /> diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx index 00743443fc..ee964d84b7 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/HttpRequestSection.tsx @@ -5,7 +5,11 @@ import { FormItem, FormLabel, FormMessage, - Input, + Input_Shadcn_ as Input, + InputGroup, + InputGroupAddon, + InputGroupInput, + InputGroupText, Select_Shadcn_, SelectContent_Shadcn_, SelectItem_Shadcn_, @@ -63,12 +67,12 @@ export const HttpRequestSection = ({ form }: HttpRequestSectionProps) => { name="values.timeoutMs" render={({ field: { ref, ...rest } }) => ( - ms

} - /> + + + + ms + + )} /> diff --git a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx index 1ccb8c5259..7b1a007860 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/CreateQueueSheet/PartitionConfigFields.tsx @@ -1,5 +1,13 @@ import { UseFormReturn } from 'react-hook-form' -import { FormField, Input, Separator, SheetSection } from 'ui' +import { + FormField, + InputGroup, + InputGroupAddon, + InputGroupInput, + InputGroupText, + Separator, + SheetSection, +} from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import { CreateQueueForm } from './CreateQueueSheet.schema' @@ -21,12 +29,12 @@ export function PartitionConfigFields({ form }: { form: UseFormReturn - messages

} - /> + + + + messages + + )} /> @@ -39,12 +47,12 @@ export function PartitionConfigFields({ form }: { form: UseFormReturn - messages

} - /> + + + + messages + + )} /> diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx index 0f30424ccd..69db0ad087 100644 --- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx +++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx @@ -3,7 +3,16 @@ import { useParams } from 'common' import { useEffect } from 'react' import { SubmitHandler, useForm } from 'react-hook-form' import { toast } from 'sonner' -import { Form, FormControl, FormField, Input, Modal } from 'ui' +import { + Form, + FormControl, + FormField, + InputGroup, + InputGroupAddon, + InputGroupInput, + InputGroupText, + Modal, +} from 'ui' import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout' import z from 'zod' @@ -102,12 +111,12 @@ export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) => description="Time in seconds before the message becomes available for reading." > - sec

} - /> + + + + sec + + )} diff --git a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx index bbb1170e27..b261b149af 100644 --- a/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx +++ b/apps/studio/components/layouts/AccountLayout/WithSidebar.tsx @@ -1,18 +1,16 @@ import { ArrowLeft } from 'lucide-react' import Link from 'next/link' import { PropsWithChildren, ReactNode } from 'react' -import { cn, Menu } from 'ui' +import { cn } from 'ui' import type { SidebarSection } from './AccountLayout.types' +import { getActiveKey, toSubMenuSections } from './AccountLayout.utils' +import { SubMenu } from '@/components/ui/ProductMenu/SubMenu' interface WithSidebarProps { title?: string sections: SidebarSection[] header?: ReactNode - subitems?: any[] - subitemsParentKey?: number - hideSidebar?: boolean - customSidebarContent?: ReactNode backToDashboardURL?: string } @@ -21,24 +19,17 @@ export const WithSidebar = ({ header, children, sections, - subitems, - subitemsParentKey, - hideSidebar = false, - customSidebarContent, backToDashboardURL, }: PropsWithChildren) => { - const noContent = !sections && !customSidebarContent + const noContent = !sections return (
- {!hideSidebar && !noContent && ( + {!noContent && ( @@ -53,12 +44,12 @@ export const WithSidebar = ({ export const SidebarContent = ({ header, sections, - subitems, - subitemsParentKey, - customSidebarContent, backToDashboardURL, className, }: PropsWithChildren> & { className?: string }) => { + const page = getActiveKey(sections) + const subMenuSections = toSubMenuSections(sections) + return ( <>
-
- - {customSidebarContent} - {sections.map((section, idx) => ( -
- {Boolean(section.heading) ? ( - - ) : ( -
-
- {section.links.map((link, i: number) => { - const isActive = link.isActive && !subitems - return ( - - -
-
- {link.label} -
-
- - - ) - })} -
-
- )} - {idx !== sections.length - 1 && ( -
- )} -
- ))} -
+
+
@@ -135,41 +85,3 @@ export const SidebarContent = ({ ) } - -interface SectionWithHeadersProps { - section: SidebarSection - subitems?: any[] - subitemsParentKey?: number -} - -const SectionWithHeaders = ({ section, subitems }: SectionWithHeadersProps) => ( -
-
- {section.heading && ( - - {section.heading} -
- } - /> - )} -
- {section.links.map((link, i: number) => { - const isActive = link.isActive && !subitems - return ( - - -
-
- {link.label} -
-
- - - ) - })} -
-
-
-) diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx index 30db23926f..7365cd2c3c 100644 --- a/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx +++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseLayout.tsx @@ -3,6 +3,7 @@ import type { PropsWithChildren } from 'react' import { ProjectLayout } from '../ProjectLayout' import { useGenerateDatabaseMenu } from './DatabaseMenu.utils' +import { DatabaseNavShortcuts } from '@/components/interfaces/DatabaseNavShortcuts' import { ProductMenu } from '@/components/ui/ProductMenu' import { withAuth } from '@/hooks/misc/withAuth' @@ -26,6 +27,7 @@ const DatabaseLayout = ({ children, title }: PropsWithChildren} isBlocking={false} > + {children} ) diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx index b42d5ce4e7..f8f93ed79a 100644 --- a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx +++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx @@ -12,6 +12,7 @@ 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 = @@ -42,24 +43,70 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => { { title: 'Database Management', items: [ - { name: 'Schema Visualizer', key: 'schemas', url: getDatabaseURL('schemas') }, - { name: 'Tables', key: 'tables', url: getDatabaseURL('tables') }, - { name: 'Functions', key: 'functions', url: getDatabaseURL('functions') }, - { name: 'Triggers', key: 'triggers', url: getDatabaseURL('triggers/data') }, - { name: 'Enumerated Types', key: 'types', url: getDatabaseURL('types') }, - { name: 'Extensions', key: 'extensions', url: getDatabaseURL('extensions') }, - { name: 'Indexes', key: 'indexes', url: getDatabaseURL('indexes') }, - { name: 'Publications', key: 'publications', url: getDatabaseURL('publications') }, + { + name: 'Schema Visualizer', + key: 'schemas', + url: getDatabaseURL('schemas'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER, + }, + { + name: 'Tables', + key: 'tables', + url: getDatabaseURL('tables'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_TABLES, + }, + { + name: 'Functions', + key: 'functions', + url: getDatabaseURL('functions'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS, + }, + { + name: 'Triggers', + key: 'triggers', + url: getDatabaseURL('triggers/data'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_TRIGGERS, + }, + { + name: 'Enumerated Types', + key: 'types', + url: getDatabaseURL('types'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_TYPES, + }, + { + name: 'Extensions', + key: 'extensions', + url: getDatabaseURL('extensions'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS, + }, + { + name: 'Indexes', + key: 'indexes', + url: getDatabaseURL('indexes'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_INDEXES, + }, + { + name: 'Publications', + key: 'publications', + url: getDatabaseURL('publications'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS, + }, ], }, { title: 'Configuration', items: [ - showRoles && { name: 'Roles', key: 'roles', url: getDatabaseURL('roles') }, + showRoles && { + name: 'Roles', + key: 'roles', + url: getDatabaseURL('roles'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_ROLES, + }, columnLevelPrivileges && { name: 'Column Privileges', key: 'column-privileges', url: getDatabaseURL('column-privileges'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES, }, { name: 'Policies', @@ -67,7 +114,12 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => { url: `/project/${ref}/auth/policies`, rightIcon: ExternalLinkIcon, }, - { name: 'Settings', key: 'settings', url: getDatabaseURL('settings') }, + { + name: 'Settings', + key: 'settings', + url: getDatabaseURL('settings'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_SETTINGS, + }, ].filter(Boolean) as ProductMenuGroupItem[], }, { @@ -79,13 +131,20 @@ export const useGenerateDatabaseMenu = (): ProductMenuGroup[] => { key: 'replication', url: getDatabaseURL('replication'), label: enablePgReplicate ? 'New' : undefined, + shortcutId: SHORTCUT_IDS.NAV_DATABASE_REPLICATION, }, IS_PLATFORM && { name: 'Backups', key: 'backups', url: pitrEnabled ? getDatabaseURL('backups/pitr') : getDatabaseURL('backups/scheduled'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_BACKUPS, + }, + { + name: 'Migrations', + key: 'migrations', + url: getDatabaseURL('migrations'), + shortcutId: SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS, }, - { name: 'Migrations', key: 'migrations', url: getDatabaseURL('migrations') }, showWrappers && { name: 'Wrappers', key: 'wrappers', diff --git a/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx b/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx index e12a7fc7a7..3d09a22dd2 100644 --- a/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx +++ b/apps/studio/components/layouts/ProjectLayout/OrganizationSettingsLayout.tsx @@ -236,5 +236,3 @@ export function OrganizationSettingsLayout({ children }: PropsWithChildren) { ) } - -export default OrganizationSettingsLayout diff --git a/apps/studio/components/ui/ProductMenu/ProductMenu.types.ts b/apps/studio/components/ui/ProductMenu/ProductMenu.types.ts index 477022c9b2..54a8f3fcff 100644 --- a/apps/studio/components/ui/ProductMenu/ProductMenu.types.ts +++ b/apps/studio/components/ui/ProductMenu/ProductMenu.types.ts @@ -1,5 +1,7 @@ import { ReactNode } from 'react' +import type { ShortcutId } from '@/state/shortcuts/registry' + export interface ProductMenuGroup { title?: string /** Set to "main" if page is on a '/' route */ @@ -25,6 +27,7 @@ export interface ProductMenuGroupItem { childIcon?: ReactNode childItems?: ProductMenuGroupItem[] pages?: string[] + shortcutId?: ShortcutId } /** diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx index eb751c6891..53b02d6804 100644 --- a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx +++ b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx @@ -2,6 +2,7 @@ import Link from 'next/link' import { Badge, Button, Menu } from 'ui' import { ProductMenuGroupItem } from './ProductMenu.types' +import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip' interface ProductMenuItemProps { item: ProductMenuGroupItem @@ -18,16 +19,26 @@ export const ProductMenuItem = ({ hoverText = '', onClick, }: ProductMenuItemProps) => { - const { name = '', url = '', icon, rightIcon, isExternal, label, disabled } = item + const { name = '', url = '', icon, rightIcon, isExternal, label, disabled, shortcutId } = item + + const labelNode = shortcutId ? ( + + {name} + + ) : ( + {name} + ) const menuItem = (
- {name} + {labelNode} {label !== undefined && ( - + diff --git a/apps/studio/pages/org/[slug]/general.tsx b/apps/studio/pages/org/[slug]/general.tsx index 79c107e758..a5170df5af 100644 --- a/apps/studio/pages/org/[slug]/general.tsx +++ b/apps/studio/pages/org/[slug]/general.tsx @@ -11,7 +11,7 @@ import { import { GeneralSettings } from '@/components/interfaces/Organization/GeneralSettings/GeneralSettings' import DefaultLayout from '@/components/layouts/DefaultLayout' import OrganizationLayout from '@/components/layouts/OrganizationLayout' -import OrganizationSettingsLayout from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' +import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import { usePermissionsQuery } from '@/data/permissions/permissions-query' import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/org/[slug]/private-apps/index.tsx b/apps/studio/pages/org/[slug]/private-apps/index.tsx index b39a8994f5..c730c0b066 100644 --- a/apps/studio/pages/org/[slug]/private-apps/index.tsx +++ b/apps/studio/pages/org/[slug]/private-apps/index.tsx @@ -25,9 +25,9 @@ import { PrivateAppsProvider, usePrivateApps, } from '@/components/interfaces/Organization/PrivateApps/PrivateAppsContext' -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 { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import type { NextPageWithLayout } from '@/types' function PrivateAppsContent() { diff --git a/apps/studio/pages/org/[slug]/security.tsx b/apps/studio/pages/org/[slug]/security.tsx index 18988da695..aa6f36dc5e 100644 --- a/apps/studio/pages/org/[slug]/security.tsx +++ b/apps/studio/pages/org/[slug]/security.tsx @@ -10,7 +10,7 @@ import { import { SecuritySettings } from '@/components/interfaces/Organization/SecuritySettings' import DefaultLayout from '@/components/layouts/DefaultLayout' import OrganizationLayout from '@/components/layouts/OrganizationLayout' -import OrganizationSettingsLayout from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' +import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import { UnknownInterface } from '@/components/ui/UnknownInterface' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/org/[slug]/sso.tsx b/apps/studio/pages/org/[slug]/sso.tsx index 4bccfcddb7..baabd7c732 100644 --- a/apps/studio/pages/org/[slug]/sso.tsx +++ b/apps/studio/pages/org/[slug]/sso.tsx @@ -8,9 +8,9 @@ import { } from 'ui-patterns/PageHeader' import { SSOConfig } from '@/components/interfaces/Organization/SSO/SSOConfig' -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 { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import { UnknownInterface } from '@/components/ui/UnknownInterface' import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled' import type { NextPageWithLayout } from '@/types' diff --git a/apps/studio/pages/org/[slug]/webhooks/[endpointId].tsx b/apps/studio/pages/org/[slug]/webhooks/[endpointId].tsx index a26985f774..226196d8fd 100644 --- a/apps/studio/pages/org/[slug]/webhooks/[endpointId].tsx +++ b/apps/studio/pages/org/[slug]/webhooks/[endpointId].tsx @@ -1,9 +1,9 @@ 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 OrganizationLayout from '@/components/layouts/OrganizationLayout' -import OrganizationSettingsLayout from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' +import { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import type { NextPageWithLayout } from '@/types' const OrgWebhookEndpointSettings: NextPageWithLayout = () => { diff --git a/apps/studio/pages/org/[slug]/webhooks/index.tsx b/apps/studio/pages/org/[slug]/webhooks/index.tsx index 3c2eee60a1..ba4e353494 100644 --- a/apps/studio/pages/org/[slug]/webhooks/index.tsx +++ b/apps/studio/pages/org/[slug]/webhooks/index.tsx @@ -1,7 +1,7 @@ import { PlatformWebhooksPage } from '@/components/interfaces/Platform/Webhooks' -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 { OrganizationSettingsLayout } from '@/components/layouts/ProjectLayout/OrganizationSettingsLayout' import type { NextPageWithLayout } from '@/types' const OrgWebhooksSettings: NextPageWithLayout = () => { diff --git a/apps/studio/state/shortcuts/registry.ts b/apps/studio/state/shortcuts/registry.ts index 7de5556961..425bb75bd6 100644 --- a/apps/studio/state/shortcuts/registry.ts +++ b/apps/studio/state/shortcuts/registry.ts @@ -1,3 +1,4 @@ +import { DATABASE_NAV_SHORTCUT_IDS, databaseNavRegistry } from './registry/database-nav' import { LIST_PAGE_SHORTCUT_IDS, listPageRegistry } from './registry/list-page' import { SCHEMA_VISUALIZER_SHORTCUT_IDS, @@ -64,6 +65,9 @@ export const SHORTCUT_IDS = { // Shared list-page shortcuts (database/* listing pages, etc.) ...LIST_PAGE_SHORTCUT_IDS, + + // Database sub-page navigation chords + ...DATABASE_NAV_SHORTCUT_IDS, } as const /** @@ -321,4 +325,7 @@ export const SHORTCUT_DEFINITIONS: Record = { // Shared list-page shortcut registration ...listPageRegistry, + + // Database sub-page navigation chord registration + ...databaseNavRegistry, } diff --git a/apps/studio/state/shortcuts/registry/database-nav.ts b/apps/studio/state/shortcuts/registry/database-nav.ts new file mode 100644 index 0000000000..9a437c3b39 --- /dev/null +++ b/apps/studio/state/shortcuts/registry/database-nav.ts @@ -0,0 +1,117 @@ +import { RegistryDefinations } from '../types' + +/** + * Contextual chords for jumping between Database sub-pages — `D + `. + * + * Active only while DatabaseLayout is mounted (i.e. the user is somewhere + * under `/project//database/*`). The chord intentionally lives on the + * page rather than globally so the leading `D` doesn't burn a global key for + * a destination most users only care about while already in the section. + * + */ +export const DATABASE_NAV_SHORTCUT_IDS = { + NAV_DATABASE_TABLES: 'nav.database-tables', + NAV_DATABASE_FUNCTIONS: 'nav.database-functions', + NAV_DATABASE_TRIGGERS: 'nav.database-triggers', + NAV_DATABASE_INDEXES: 'nav.database-indexes', + NAV_DATABASE_EXTENSIONS: 'nav.database-extensions', + NAV_DATABASE_SCHEMA_VISUALIZER: 'nav.database-schema-visualizer', + NAV_DATABASE_ROLES: 'nav.database-roles', + NAV_DATABASE_BACKUPS: 'nav.database-backups', + NAV_DATABASE_MIGRATIONS: 'nav.database-migrations', + NAV_DATABASE_TYPES: 'nav.database-types', + NAV_DATABASE_PUBLICATIONS: 'nav.database-publications', + NAV_DATABASE_COLUMN_PRIVILEGES: 'nav.database-column-privileges', + NAV_DATABASE_SETTINGS: 'nav.database-settings', + NAV_DATABASE_REPLICATION: 'nav.database-replication', +} + +export type DatabaseNavShortcutId = + (typeof DATABASE_NAV_SHORTCUT_IDS)[keyof typeof DATABASE_NAV_SHORTCUT_IDS] + +export const databaseNavRegistry: RegistryDefinations = { + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TABLES]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TABLES, + label: 'Go to Tables', + sequence: ['D', 'T'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_FUNCTIONS, + label: 'Go to Functions', + sequence: ['D', 'F'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TRIGGERS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TRIGGERS, + label: 'Go to Triggers', + sequence: ['D', 'R'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_INDEXES]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_INDEXES, + label: 'Go to Indexes', + sequence: ['D', 'I'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_EXTENSIONS, + label: 'Go to Extensions', + sequence: ['D', 'X'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_SCHEMA_VISUALIZER, + label: 'Go to Schema Visualizer', + sequence: ['D', 'V'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_ROLES]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_ROLES, + label: 'Go to Roles', + sequence: ['D', 'O'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_BACKUPS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_BACKUPS, + label: 'Go to Backups', + sequence: ['D', 'B'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_MIGRATIONS, + label: 'Go to Migrations', + sequence: ['D', 'M'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TYPES]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_TYPES, + label: 'Go to Enumerated Types', + sequence: ['D', 'E'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_PUBLICATIONS, + label: 'Go to Publications', + sequence: ['D', 'U'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_COLUMN_PRIVILEGES, + label: 'Go to Column Privileges', + sequence: ['D', 'C'], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_SETTINGS]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_SETTINGS, + label: 'Go to Database Settings', + sequence: ['D', ','], + showInSettings: false, + }, + [DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_REPLICATION]: { + id: DATABASE_NAV_SHORTCUT_IDS.NAV_DATABASE_REPLICATION, + label: 'Go to Replication', + sequence: ['D', 'L'], + showInSettings: false, + }, +} diff --git a/apps/ui-library/app/Providers.tsx b/apps/ui-library/app/Providers.tsx index 5956f800c4..76fa8a6d01 100644 --- a/apps/ui-library/app/Providers.tsx +++ b/apps/ui-library/app/Providers.tsx @@ -1,30 +1,29 @@ 'use client' import { QueryClientProvider } from '@tanstack/react-query' -import { AuthProvider } from 'common' +import { AuthProvider, ThemeProvider } from 'common' import { Provider as JotaiProvider } from 'jotai' -import { ThemeProvider as NextThemesProvider } from 'next-themes' -import { ThemeProviderProps } from 'next-themes/dist/types' +import { PropsWithChildren } from 'react' import { TooltipProvider } from 'ui' import { FrameworkProvider } from '@/context/framework-context' import { MobileMenuProvider } from '@/context/mobile-menu-context' import { useRootQueryClient } from '@/lib/fetch/queryClient' -export function ThemeProvider({ children, ...props }: ThemeProviderProps) { +export function Providers({ children }: PropsWithChildren) { const queryClient = useRootQueryClient() return ( - + {children} - + diff --git a/apps/ui-library/app/example/password-based-auth/layout.tsx b/apps/ui-library/app/example/password-based-auth/layout.tsx index 030beb3a32..df06062cea 100644 --- a/apps/ui-library/app/example/password-based-auth/layout.tsx +++ b/apps/ui-library/app/example/password-based-auth/layout.tsx @@ -1,7 +1,8 @@ +import { html } from 'monaco-editor' import { Metadata } from 'next' import { BaseInjector } from './../base-injector' -import { ThemeProvider } from '@/app/Providers' +import { Providers } from '@/app/Providers' export const metadata: Metadata = { title: 'Password Based Auth Example', @@ -27,11 +28,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - +
{children}
- + ) diff --git a/apps/ui-library/app/example/social-auth/layout.tsx b/apps/ui-library/app/example/social-auth/layout.tsx index de42457be6..e75df4c7c4 100644 --- a/apps/ui-library/app/example/social-auth/layout.tsx +++ b/apps/ui-library/app/example/social-auth/layout.tsx @@ -1,7 +1,7 @@ import { Metadata } from 'next' import { BaseInjector } from './../base-injector' -import { ThemeProvider } from '@/app/Providers' +import { Providers } from '@/app/Providers' export const metadata: Metadata = { title: 'Social Auth Example', @@ -27,11 +27,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - +
{children}
- + ) diff --git a/apps/ui-library/app/layout.tsx b/apps/ui-library/app/layout.tsx index e251215d89..3561e4d7da 100644 --- a/apps/ui-library/app/layout.tsx +++ b/apps/ui-library/app/layout.tsx @@ -6,7 +6,7 @@ import { FeatureFlagProvider, TelemetryTagManager } from 'common' import { genFaviconData } from 'common/MetaFavicons/app-router' import { Inter } from 'next/font/google' -import { ThemeProvider } from './Providers' +import { Providers } from './Providers' import { Toaster } from './toaster' import { API_URL } from '@/lib/constants' @@ -47,14 +47,10 @@ export default async function Layout({ children }: RootLayoutProps) { - + {children} - + diff --git a/apps/ui-library/package.json b/apps/ui-library/package.json index a79668ff67..32634d6cfe 100644 --- a/apps/ui-library/package.json +++ b/apps/ui-library/package.json @@ -40,7 +40,7 @@ "monaco-editor": "^0.55.1", "next": "catalog:", "next-contentlayer2": "0.4.6", - "next-themes": "^0.3.0", + "next-themes": "catalog:", "openai": "^5.9.0", "openapi-fetch": "0.12.4", "radix-ui": "catalog:", diff --git a/apps/www/_blog/2026-05-05-realtime-or-etl-how-to-choose-the-right-tool.mdx b/apps/www/_blog/2026-05-05-realtime-or-etl-how-to-choose-the-right-tool.mdx new file mode 100644 index 0000000000..fa52d0ef77 --- /dev/null +++ b/apps/www/_blog/2026-05-05-realtime-or-etl-how-to-choose-the-right-tool.mdx @@ -0,0 +1,186 @@ +--- +title: 'Realtime or ETL? How to choose the right tool' +description: 'Both Supabase Realtime and Supabase ETL read changes from your Postgres database using logical replication. But they solve very different problems. Here is how to pick the right one.' +author: eduardo_gurgel, riccardo_busetti +date: '2026-05-05' +categories: + - developers +tags: + - realtime + - postgres + - etl + - database +imgSocial: 'https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=announcement&layout=horizontal©=Realtime+or+ETL%0A%5BHow+to+choose+the+right+tool%5D&icon=icon-realtime.svg' +imgThumb: 'https://zhfonblqamxferhoguzj.supabase.co/functions/v1/generate-og?template=ruler&layout=icon-only©=Realtime+or+ETL%0A%5BHow+to+choose+the+right+tool%5D&icon=icon-realtime.svg' +toc_depth: 2 +--- + +Both [Supabase Realtime](https://supabase.com/docs/guides/realtime) and [Supabase ETL](https://supabase.com/features/supabase-etl) read changes from your Postgres database. They both use [logical replication](https://supabase.com/docs/guides/database/replication) under the hood. They even look similar when you squint. But they solve very different problems, and choosing the wrong one will frustrate you. + +This post explains what each product does, how they differ, and when you should pick one over the other. + +## Two tools, two jobs + +Here is the simplest way to think about it: + +- **Realtime** sends database changes to your users' browsers and apps, right now, as they happen. It is built for live experiences. +- **ETL** sends database changes in near real-time to analytical destinations like BigQuery and Analytics Buckets. It is built for reliable data movement. + +Realtime answers the question: "How do I show my users what just happened?" + +ETL answers the question: "How do I get my production data into my analytics warehouse?" + +If you mix these up, you will run into problems. We see it happen regularly, and the rest of this post will help you avoid that. + +## What Realtime does + +[Supabase Realtime](https://supabase.com/docs/guides/realtime) is three features in one product: + +1. [**Broadcast.**](https://supabase.com/docs/guides/realtime/broadcast) Send messages between connected clients in real time. No database required. Think cursor positions, typing indicators, or game state. +2. [**Presence.**](https://supabase.com/docs/guides/realtime/presence) Track who is online and what they are doing. Also no database required. Think "3 users are editing this document" or "Jane is typing..." +3. [**Postgres Changes.**](https://supabase.com/docs/guides/realtime/postgres-changes) Listen to INSERT, UPDATE, and DELETE events on your database tables and deliver them to subscribed clients over WebSocket. + +Two of these three features, Broadcast and Presence, can work without any database interaction. Client-to-client Broadcast sends messages purely over WebSocket with nothing stored. However, [Broadcast from Database](https://supabase.com/blog/realtime-broadcast-from-database) lets you trigger broadcasts from database changes using triggers, giving you control over which events reach which channels. This matters because Realtime is not just a database change listener. It is a real-time communication layer for your application. + +### How Postgres Changes works + +When a client subscribes to a table, Realtime uses a PostgreSQL replication slot to read changes from the Write-Ahead Log (WAL). For each change, it checks [Row Level Security (RLS)](https://supabase.com/docs/guides/database/postgres/row-level-security) policies against every subscribed user. If a user is authorized to see the change, Realtime sends it over their WebSocket connection. + +This is designed for live UI updates. A user inserts a message into a chat table. Other users see it appear instantly. A row updates in a dashboard table. The chart refreshes automatically. + +### What Realtime does not guarantee + +Realtime's Postgres Changes feature does not guarantee delivery. If a client disconnects for 30 seconds and reconnects, the changes that happened during those 30 seconds are gone. Realtime does not queue them and does not track how far each client has read. + +[Broadcast Replay](https://supabase.com/blog/realtime-broadcast-replay) offers limited catch-up for Broadcast from Database messages: clients can request up to 25 messages from the last 3 days using a `since` timestamp. But this only works on private channels, only for database-sourced broadcasts, and is currently in public alpha. It is not a general-purpose replay mechanism for all Realtime events. + +Postgres Changes uses temporary replication slots. When no clients are subscribed, it stops replicating data entirely. When clients subscribe again, a new slot is created. + +The Realtime team built it this way on purpose. Guaranteed delivery requires persistent state tracking, message queuing, and acknowledgment protocols. Those things add latency and complexity that would make Realtime worse at its actual job: delivering live updates as fast as possible. + +If you need every change to arrive at its destination, no matter what, Realtime is not the right tool. + +## What ETL does + +Supabase ETL is a change-data-capture (CDC) pipeline. It reads every INSERT, UPDATE, DELETE, and TRUNCATE from your Postgres tables and writes them to a destination. Right now, the supported destinations are [Analytics Buckets](https://supabase.com/docs/guides/storage/analytics/introduction) (built on Apache Iceberg) and BigQuery. + +ETL replicates your data 1-to-1 in near real-time. If your destination disconnects or has problems, ETL does not skip over data. + +### How ETL works + +When you create an ETL pipeline, it connects to your database through a permanent replication slot. First, it performs a full copy of your existing data. Then it switches to streaming mode and captures every change as it happens, with latency measured in milliseconds to seconds (based on configuration parameters, data size, and destination type). + +It's important to note that Supabase ETL doesn't respect Row-Level Security. Supabase ETL reads every piece of data. If you need to filter data, you should use publication filters. + +Changes are batched and written to your destination. If the pipeline crashes, it restarts from the last acknowledged position. No data changes are lost. Note that schema changes (adding or removing columns) do not propagate automatically and require manual handling. + +### What ETL guarantees + +ETL provides at-least-once delivery. Every change that happens in your database will reach the destination at least once. In rare cases (like a crash during a long-running transaction), a change might be delivered more than once. Exactly-once processing is handled by the destination. Some destinations like BigQuery deduplicate automatically, while others may not. + +ETL uses permanent replication slots. This means Postgres holds onto WAL data until ETL confirms it has been processed. If you stop the pipeline for maintenance and restart it later, it picks up exactly where it left off. Be aware that while the pipeline is paused, Postgres continues to retain WAL data. Extended pauses can lead to significant disk growth, and depending on your Postgres configuration, the pipeline may fail if the WAL retention limit is exceeded. + +This is the opposite of Realtime's approach. ETL trades speed for reliability. It may not deliver changes to your warehouse in the same millisecond they happen, but it will deliver every single one. + +## The key differences + +### Delivery guarantees + +| | **Realtime** | **ETL** | +| ----------------------- | ------------ | --------------------- | +| Guarantee | Best effort | At-least-once | +| Missed changes | Lost forever | Replayed on reconnect | +| Replication slot | Temporary | Permanent | +| Resume after disconnect | No | Yes | + +This is the most important difference. If you need every change to arrive, use ETL. If you need changes to arrive fast and can tolerate occasional gaps, use Realtime. + +### Where data goes + +Realtime sends data to client applications over WebSocket connections. Your users' browsers and mobile apps are the destination. + +ETL sends data to analytical systems. BigQuery, Analytics Buckets, and eventually other data warehouses are the destination. + +These are fundamentally different targets with fundamentally different needs. Client apps need low latency. Analytical systems need completeness. + +### Database dependency + +Realtime's Broadcast and Presence features can work without touching the database. You can build an entire collaborative experience (cursors, presence indicators, ephemeral messaging) without writing a single database query. However, Postgres Changes and [Broadcast from Database](https://supabase.com/blog/realtime-broadcast-from-database) both require database interaction. + +ETL is entirely database-driven. Every byte of data it moves comes from your Postgres tables. + +### Scale characteristics + +Realtime's Broadcast and Presence features are built for high throughput and low latency. They do not run per-subscriber database queries and scale well across many concurrent connections. + +Postgres Changes works differently. It processes changes sequentially to maintain ordering. For each change, it runs an RLS authorization check against every subscribed client. With 100 subscribers watching a table, one INSERT generates 100 authorization queries. This is a deliberate design choice that prioritizes correctness and low latency for typical workloads over raw throughput. + +ETL processes changes in configurable batches with tunable parallelism. It does not need to authorize individual users because it is moving data to a system, not to end users. + +## When to use Realtime + +Use Realtime when you need to push live updates to your users: + +- **Chat applications.** Messages appear instantly for all participants. +- **Collaborative editing.** See other users' cursors and changes in real time. +- **Live dashboards.** Charts and metrics update without page refresh. +- **Notifications.** Alert users when something relevant happens. +- **Multiplayer features.** Synchronize game state or shared experiences. +- **Presence tracking.** Show who is online, who is typing, who is viewing a document. + +The common thread: a human is watching and needs to see changes as they happen. + +## When to use ETL + +Use ETL when you need reliable data movement to analytical systems: + +- **Analytics and reporting.** Move production data to BigQuery or Iceberg for querying without impacting your production database. +- **Audit trails.** Analytics Buckets stores an append-only changelog of every INSERT, UPDATE, and DELETE. Nothing is lost. +- **Data warehousing.** Replicate your operational data to a columnar format optimized for analytical queries. +- **Compliance.** Maintain a complete, verifiable history of all data changes. +- **ML pipelines.** Feed fresh data to training or feature stores without querying production. +- **Workload isolation.** Run heavy analytical queries against your warehouse instead of your production database. + +The common thread: a system needs a complete, reliable copy of your data. + +## The mistake we see most often + +Some developers discover Realtime's Postgres Changes feature and think: "I can use this to replicate data from one system to another." They write 20 lines of code with supabase-js, subscribe to table changes, and pipe them into another system. + +It works great in development. It even works fine in production for a while. Then a WebSocket connection drops for a few seconds and data goes missing. Or the subscribing process restarts and misses a batch of changes. Or load spikes and the sequential RLS authorization checks cannot keep up. + +The problem is not that Realtime is broken. The problem is that Realtime was not designed for this job. + +If you are piping database changes into another system and you need every change to arrive, use ETL. That is exactly what it was built for. + +## Can I use both? + +Yes. In fact, many applications should. + +Consider an e-commerce platform. You might use Realtime to push order status updates to customers in real time ("Your order has shipped!"). At the same time, you use ETL to replicate all order data to BigQuery for daily sales reports and trend analysis. + +Same database. Same tables. Different tools for different jobs. + +Realtime handles the live experience. ETL handles the analytical pipeline. Each does what it was designed to do. + +## Quick reference + +| | **Realtime** | **ETL** | +| ------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------- | +| Purpose | Live updates to client apps | Reliable data movement to analytics | +| Delivery | Best effort | At-least-once | +| Destinations | Browsers, mobile apps (WebSocket) | BigQuery, Analytics Buckets | +| Replication slot | Temporary | Permanent | +| Resume on reconnect | No | Yes | +| Database required | Only for Postgres Changes and Broadcast from Database | Yes, always | +| Processing | Sequential per-change with per-subscriber authorization | Batched with configurable parallelism | +| Latency | Typically under 100ms | Seconds (batched) | +| Best for | Human users watching live data | Systems consuming complete data | +| Built with | Elixir (Phoenix) | Rust | +| Open source | [github.com/supabase/realtime](https://github.com/supabase/realtime) | [github.com/supabase/etl](https://github.com/supabase/etl) | + +## Getting started + +Supabase Realtime is available on all Supabase projects. Check out the [Realtime documentation](https://supabase.com/docs/guides/realtime) to get started. + +Supabase ETL is currently in private alpha. You can request access through the Supabase Dashboard or contact your account manager. Read the [ETL blog post](https://supabase.com/blog/introducing-supabase-etl) for more details on how it works. diff --git a/apps/www/app/blog/[slug]/page.tsx b/apps/www/app/blog/[slug]/page.tsx index 8d2cb7ded2..e8cb8e50d2 100644 --- a/apps/www/app/blog/[slug]/page.tsx +++ b/apps/www/app/blog/[slug]/page.tsx @@ -9,8 +9,9 @@ import { getAbsoluteBlogSocialImage, toAbsoluteBlogImageUrl, } from '@/lib/blog-images' +import { breadcrumbs } from '@/lib/breadcrumbs' import { SITE_ORIGIN } from '@/lib/constants' -import { blogPostingSchema, serializeJsonLd } from '@/lib/json-ld' +import { blogPostingSchema, breadcrumbListSchema, serializeJsonLd } from '@/lib/json-ld' import { getAllPostSlugs, getPostdata, getSortedPosts } from '@/lib/posts' import type { Blog, BlogData, PostReturnType } from '@/types/post' @@ -171,6 +172,10 @@ export default async function BlogPostPage({ params }: { params: Promise datePublished: frontmatter.date, authors: blogAuthors.length > 0 ? blogAuthors : [{ name: 'Supabase' }], }) + const breadcrumbJsonLd = breadcrumbListSchema([ + ...breadcrumbs.blogIndex, + { name: frontmatter.title, url: `https://supabase.com/blog/${slug}` }, + ]) return ( <> @@ -178,6 +183,10 @@ export default async function BlogPostPage({ params }: { params: Promise type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(blogJsonLd) }} /> +