@@ -234,12 +242,12 @@ const HomePage = () => (
Connect a framework
- Start with a framework quickstart and connect your project in minutes. + Start with a quickstart guide to connect your project in minutes.
-
)}
@@ -253,7 +261,10 @@ const HomePage = () => (
- -
+
-
@@ -277,18 +288,15 @@ const HomePage = () => (
Extend your database with built-in tools for AI, APIs, scheduled jobs, and queues.
- - {postgresIntegrations.map((integration) => ( - -+
- - ))} - ({ + title: integration.title, + href: integration.href, + icon: , + }))} + /> @@ -301,23 +309,17 @@ const HomePage = () => (-- {clientLibraries ++ .map((library) => ({ + title: library.title, + href: library.href, + icon:library.enabled) - - .map((library) => { - return ( - - - - ) - })} - , + }))} + /> {isFeatureEnabled('docs:full_getting_started') && ( @@ -335,19 +337,11 @@ const HomePage = () => ( />--
- {MIGRATION_PAGES.sort((a, b) => (a.name || '').localeCompare(b.name || '')).map(
- (guide) => {
- return (
-
-
-
-
- -
- )
- }
- )}
-
)} @@ -361,7 +355,10 @@ const HomePage = () => ( - -
+
-
@@ -370,7 +367,7 @@ const HomePage = () => (
passHref
target={resource.external ? '_blank' : undefined}
>
-
+ {resource.description} @@ -392,25 +389,24 @@ const HomePage = () => ( Get started with self-hosting Supabase.- -)} diff --git a/apps/docs/app/reference/page.tsx b/apps/docs/app/reference/page.tsx index 2475c34d3097c..c52d2b30eb50b 100644 --- a/apps/docs/app/reference/page.tsx +++ b/apps/docs/app/reference/page.tsx @@ -1,7 +1,5 @@ -import Link from 'next/link' - -import { REFERENCES, clientSdkIds } from '~/content/navigation.references' -import { IconPanelWithIconPicker } from '~/features/ui/IconPanelWithIconPicker' +import { clientSdkIds, REFERENCES } from '~/content/navigation.references' +import { IconLinkList, IconLinkMenuIcon } from '~/features/ui/IconLink' import { LayoutMainContent } from '~/layouts/DefaultLayout' import { SidebarSkeleton } from '~/layouts/MainSkeleton' @@ -20,41 +18,37 @@ export default function ReferenceIndexPage() { Supabase also has a Management API to help with managing your Supabase Platform, and a CLI for local development and CI workflows. --
- {selfHostingOptions.map((option) => {
- return (
-
-
-
-
- -
- )
- })}
-
+({ + title: option.title, + href: option.href, + icon: , + }))} + /> Client Libraries
-- {clientSdkIds.map((sdkId) => { - return ( - --- - ) - })} - Management API and CLI
-- -+- - - - - + Client Libraries +
+({ + title: REFERENCES[sdkId].name, + href: `/reference/${REFERENCES[sdkId].libPath}`, + icon: , + }))} + /> + + Management API and CLI +
+, + }, + { + title: 'CLI', + href: '/reference/cli/introduction', + icon: , + }, + ]} + /> diff --git a/apps/docs/components/FrameworkQuickstarts.tsx b/apps/docs/components/FrameworkQuickstarts.tsx new file mode 100644 index 0000000000000..06ca4142d5c0c --- /dev/null +++ b/apps/docs/components/FrameworkQuickstarts.tsx @@ -0,0 +1,92 @@ +import { isFeatureEnabled } from 'common' + +import { IconLinkImage, IconLinkList } from '@/features/ui/IconLink' + +const { + sdkDart: sdkDartEnabled, + sdkKotlin: sdkKotlinEnabled, + sdkSwift: sdkSwiftEnabled, +} = isFeatureEnabled(['sdk:dart', 'sdk:kotlin', 'sdk:swift']) + +const frameworks = [ + { + name: 'React', + icon: '/docs/img/icons/react-icon', + href: '/guides/getting-started/quickstarts/reactjs', + }, + { + name: 'Next.js', + icon: '/docs/img/icons/nextjs-icon', + href: '/guides/getting-started/quickstarts/nextjs', + hasLightIcon: true, + }, + { + name: 'TanStack Start', + icon: '/docs/img/icons/tanstack-icon', + href: '/guides/getting-started/quickstarts/tanstack', + hasLightIcon: true, + }, + { + name: 'Astro', + icon: '/docs/img/icons/astro-icon', + href: '/guides/getting-started/quickstarts/astrojs', + hasLightIcon: true, + }, + { + name: 'Vue', + icon: '/docs/img/icons/vuejs-icon', + href: '/guides/getting-started/quickstarts/vue', + }, + { + name: 'Nuxt', + icon: '/docs/img/icons/nuxt-icon', + href: '/guides/getting-started/quickstarts/nuxtjs', + }, + { + name: 'iOS Swift', + icon: '/docs/img/icons/swift-icon-orange', + href: '/guides/getting-started/quickstarts/ios-swiftui', + enabled: sdkSwiftEnabled, + }, + { + name: 'Android Kotlin', + icon: '/docs/img/icons/kotlin-icon', + href: '/guides/getting-started/quickstarts/kotlin', + enabled: sdkKotlinEnabled, + }, + { + name: 'Expo React Native', + icon: '/docs/img/icons/expo-icon', + href: '/guides/getting-started/quickstarts/expo-react-native', + hasLightIcon: true, + }, + { + name: 'Flutter', + icon: '/docs/img/icons/flutter-icon', + href: '/guides/getting-started/quickstarts/flutter', + enabled: sdkDartEnabled, + }, + { + name: 'Python', + icon: '/docs/img/icons/python-icon', + href: '/guides/getting-started/quickstarts/flask', + }, +] + +export function FrameworkQuickstarts({ labelledBy }: { labelledBy?: string }) { + return ( + framework.enabled !== false) + .map((framework) => ({ + title: framework.name, + href: framework.href, + icon: ( + + ), + }))} + /> + ) +} diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx index c98b765bc5ba1..2059484792331 100644 --- a/apps/docs/components/HomePageCover.tsx +++ b/apps/docs/components/HomePageCover.tsx @@ -7,22 +7,14 @@ import { PromptPanel, PromptTitle, } from '~/features/ui/PromptPanel' -import { isFeatureEnabled, useBreakpoint } from 'common' +import { isFeatureEnabled } from 'common' import { Sparkles, Terminal } from 'lucide-react' -import { useTheme } from 'next-themes' -import Link from 'next/link' -import { useEffect, useState, type ReactNode } from 'react' -import { IconPanel } from 'ui-patterns/IconPanel' +import { type ReactNode } from 'react' import { getCustomContent } from '../lib/custom-content/getCustomContent' import DocsCoverLogo from './DocsCoverLogo' import { setupCommand, setupCommands, setupPrompt } from './HomePageCover.constants' -const { - sdkDart: sdkDartEnabled, - sdkKotlin: sdkKotlinEnabled, - sdkSwift: sdkSwiftEnabled, -} = isFeatureEnabled(['sdk:dart', 'sdk:kotlin', 'sdk:swift']) const fullGettingStartedEnabled = isFeatureEnabled('docs:full_getting_started') function SetupPrompt({ cliCode }: { cliCode: ReactNode }) { @@ -58,115 +50,6 @@ function SetupPrompt({ cliCode }: { cliCode: ReactNode }) { ) } -const frameworks = [ - { - tooltip: 'ReactJS', - icon: '/docs/img/icons/react-icon', - href: '/guides/getting-started/quickstarts/reactjs', - hasLightIcon: false, - }, - { - tooltip: 'Next.js', - icon: '/docs/img/icons/nextjs-icon', - href: '/guides/getting-started/quickstarts/nextjs', - hasLightIcon: false, - }, - { - tooltip: 'TanStack Start', - icon: '/docs/img/icons/tanstack-icon', - href: '/guides/getting-started/quickstarts/tanstack', - hasLightIcon: true, - }, - { - tooltip: 'Astro.js', - icon: '/docs/img/icons/astro-icon', - href: '/guides/getting-started/quickstarts/astrojs', - hasLightIcon: true, - }, - { - tooltip: 'Vue', - icon: '/docs/img/icons/vuejs-icon', - href: '/guides/getting-started/quickstarts/vue', - hasLightIcon: false, - }, - { - tooltip: 'Nuxt', - icon: '/docs/img/icons/nuxt-icon', - href: '/guides/getting-started/quickstarts/nuxtjs', - hasLightIcon: false, - }, - { - tooltip: 'iOS Swift', - icon: '/docs/img/icons/swift-icon-orange', - href: '/guides/getting-started/quickstarts/ios-swiftui', - enabled: sdkSwiftEnabled, - hasLightIcon: false, - }, - { - tooltip: 'Android Kotlin', - icon: '/docs/img/icons/kotlin-icon', - href: '/guides/getting-started/quickstarts/kotlin', - enabled: sdkKotlinEnabled, - hasLightIcon: false, - }, - { - tooltip: 'Expo React Native', - icon: '/docs/img/icons/expo-icon', - href: '/guides/getting-started/quickstarts/expo-react-native', - hasLightIcon: true, - }, - { - tooltip: 'Flutter', - icon: '/docs/img/icons/flutter-icon', - href: '/guides/getting-started/quickstarts/flutter', - enabled: sdkDartEnabled, - hasLightIcon: false, - }, - { - tooltip: 'Python', - icon: '/docs/img/icons/python-icon', - href: '/guides/getting-started/quickstarts/flask', - hasLightIcon: false, - }, -] - -export function FrameworkQuickstarts() { - const isXs = useBreakpoint(639) - const iconSize = isXs ? 'sm' : 'lg' - const { resolvedTheme } = useTheme() - const [isMounted, setIsMounted] = useState(false) - const isLightMode = isMounted && resolvedTheme === 'light' - - useEffect(() => setIsMounted(true), []) - - return ( - - {frameworks - .filter((framework) => framework.enabled !== false) - .map((framework) => { - const iconToUse = - framework.hasLightIcon && isLightMode ? `${framework.icon}-light` : framework.icon - - return ( - -- ) -} - const HomePageCover = ({ title, cliCode }: { title: string; cliCode: ReactNode }) => { const { homepageHeading } = getCustomContent(['homepage:heading']) diff --git a/apps/docs/features/ui/IconLink.tsx b/apps/docs/features/ui/IconLink.tsx new file mode 100644 index 0000000000000..4d6420d49b22b --- /dev/null +++ b/apps/docs/features/ui/IconLink.tsx @@ -0,0 +1,111 @@ +import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker' +import Link from 'next/link' +import { type ReactNode } from 'react' +import { cn } from 'ui' + +const sizeStyles = { + sm: { + tile: 'h-10 w-10', + image: 'w-5', + }, + lg: { + tile: 'h-10 w-10 sm:h-16 sm:w-16', + image: 'w-5 sm:w-8', + }, +} as const + +export type IconLinkSize = keyof typeof sizeStyles + +export type IconLinkItem = { + title: string + href: string + icon: ReactNode + className?: string +} + +export function IconLink({ + href, + title, + icon, + size = 'sm', + className, +}: { + href: string + title: string + icon: ReactNode + size?: IconLinkSize + className?: string +}) { + return ( + +- - ) - })} - + {icon} ++ {title} + + ) +} + +export function IconLinkList({ + items, + labelledBy, + className, + itemClassName = 'col-span-6 md:col-span-4', + size = 'sm', +}: { + items: IconLinkItem[] + labelledBy?: string + className?: string + itemClassName?: string + size?: IconLinkSize +}) { + return ( +-
+ {items.map((item) => (
+
-
+
+
+ ))}
+
+ ) : null}
+ 
+
+ )
+}
+
+export function IconLinkMenuIcon({ icon }: { icon: string }) {
+ return +} diff --git a/apps/docs/features/ui/IconPanelWithIconPicker.tsx b/apps/docs/features/ui/IconPanelWithIconPicker.tsx deleted file mode 100644 index 323a18aa827dc..0000000000000 --- a/apps/docs/features/ui/IconPanelWithIconPicker.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { type ComponentProps } from 'react' - -import { IconPanel } from 'ui-patterns/IconPanel' -import MenuIconPicker from '~/components/Navigation/NavigationMenu/MenuIconPicker' - -type IconPanelWithIconPickerProps = Omit } {...props} /> -} - -export { IconPanelWithIconPicker } From 098782467430fdb77d057408fcde5cad9d1984c8 Mon Sep 17 00:00:00 2001 From: Joshen Lim ` +// doesn't distribute cleanly over it - scope overrides to the plain fields tests actually vary. +type ActivityOverrides = Partial< + Pick< + DatabaseActivity, + | 'pid' + | 'role_name' + | 'application_name' + | 'blocked_by' + | 'query' + | 'query_start' + | 'transaction_start' + | 'state_change' + | 'state' + > +> + +const activity = (overrides: ActivityOverrides = {}): DatabaseActivity => ({ + pid: 1, + role_name: 'postgres', + application_name: 'test', + blocked_by: [], + query: 'select 1', + query_start: null, + transaction_start: null, + state_change: null, + state: 'active', + wait_event_type: null, + wait_event: null, + ...overrides, +}) + +describe('getConnectionMetrics', () => { + beforeEach(() => { + vi.useFakeTimers() + vi.setSystemTime(new Date(NOW)) + }) + + afterEach(() => { + vi.useRealTimers() + }) + + it('returns empty/null metrics for no activity', () => { + const metrics = getConnectionMetrics([]) + + expect(metrics.activeQueries).toEqual([]) + expect(metrics.blockedQueries).toEqual([]) + expect(metrics.warnBlockedQueries).toBe(false) + expect(metrics.longestBlockedQuery).toBe(null) + expect(metrics.idleInTransactionQueries).toEqual([]) + expect(metrics.longestRunningQuery).toBe(null) + expect(metrics.warnLongestRunningQuery).toBe(false) + expect(metrics.queryBlockingTheMostQueries).toBe(null) + expect(metrics.warnTopBlocker).toBe(false) + }) + + it('counts active queries', () => { + const activities = [ + activity({ pid: 1, state: 'active' }), + activity({ pid: 2, state: 'idle' }), + activity({ pid: 3, state: 'active' }), + ] + + expect(getConnectionMetrics(activities).activeQueries).toHaveLength(2) + }) + + describe('blocked queries', () => { + it('collects queries that are blocked by another pid', () => { + const activities = [ + activity({ pid: 1, blocked_by: [2] }), + activity({ pid: 2, blocked_by: [] }), + ] + + const { blockedQueries } = getConnectionMetrics(activities) + expect(blockedQueries.map((a) => a.pid)).toEqual([1]) + }) + + it('does not warn when blocked under the threshold (10s)', () => { + const activities = [ + activity({ pid: 1, state: 'active', blocked_by: [2], query_start: secondsAgo(5) }), + ] + + expect(getConnectionMetrics(activities).warnBlockedQueries).toBe(false) + }) + + it('warns once a blocked query crosses the threshold (10s)', () => { + const activities = [ + activity({ pid: 1, state: 'active', blocked_by: [2], query_start: secondsAgo(11) }), + ] + + expect(getConnectionMetrics(activities).warnBlockedQueries).toBe(true) + }) + + it('picks the longest-blocked query', () => { + const activities = [ + activity({ pid: 1, state: 'active', blocked_by: [3], query_start: secondsAgo(5) }), + activity({ pid: 2, state: 'active', blocked_by: [3], query_start: secondsAgo(20) }), + ] + + const { longestBlockedQuery } = getConnectionMetrics(activities) + expect(longestBlockedQuery?.activity.pid).toBe(2) + expect(longestBlockedQuery?.duration).toBe(20) + }) + }) + + describe('idle in transaction', () => { + it('does not flag idle-in-transaction queries under the threshold (10s)', () => { + const activities = [ + activity({ pid: 1, state: 'idle in transaction', transaction_start: secondsAgo(5) }), + ] + + expect(getConnectionMetrics(activities).idleInTransactionQueries).toEqual([]) + }) + + it('flags idle-in-transaction (and aborted) queries over the threshold (10s)', () => { + const activities = [ + activity({ pid: 1, state: 'idle in transaction', transaction_start: secondsAgo(11) }), + activity({ + pid: 2, + state: 'idle in transaction (aborted)', + transaction_start: secondsAgo(11), + }), + activity({ pid: 3, state: 'active', query_start: secondsAgo(11) }), + ] + + const { idleInTransactionQueries } = getConnectionMetrics(activities) + expect(idleInTransactionQueries.map((a) => a.pid)).toEqual([1, 2]) + }) + }) + + describe('longest running query', () => { + it('ignores states outside active/idle-in-transaction', () => { + const activities = [activity({ pid: 1, state: 'idle', state_change: secondsAgo(1000) })] + + expect(getConnectionMetrics(activities).longestRunningQuery).toBe(null) + }) + + it('picks the longest-running query among active/idle-in-transaction states', () => { + const activities = [ + activity({ pid: 1, state: 'active', query_start: secondsAgo(5) }), + activity({ + pid: 2, + state: 'idle in transaction', + transaction_start: secondsAgo(15), + }), + ] + + const { longestRunningQuery } = getConnectionMetrics(activities) + expect(longestRunningQuery?.activity.pid).toBe(2) + expect(longestRunningQuery?.duration).toBe(15) + }) + + it('warns for an active query past the active threshold (30s)', () => { + const activities = [activity({ pid: 1, state: 'active', query_start: secondsAgo(31) })] + + expect(getConnectionMetrics(activities).warnLongestRunningQuery).toBe(true) + }) + + it('does not warn for an active query under the active threshold (30s)', () => { + const activities = [activity({ pid: 1, state: 'active', query_start: secondsAgo(29) })] + + expect(getConnectionMetrics(activities).warnLongestRunningQuery).toBe(false) + }) + + it('warns for an idle-in-transaction query past the shorter idle threshold (10s)', () => { + const activities = [ + activity({ pid: 1, state: 'idle in transaction', transaction_start: secondsAgo(11) }), + ] + + expect(getConnectionMetrics(activities).warnLongestRunningQuery).toBe(true) + }) + }) + + describe('top blocker', () => { + it('picks the pid blocking the most other queries', () => { + const activities = [ + activity({ pid: 1, blocked_by: [] }), + activity({ pid: 2, blocked_by: [1] }), + activity({ pid: 3, blocked_by: [1] }), + activity({ pid: 4, blocked_by: [1] }), + activity({ pid: 5, blocked_by: [2] }), + ] + + const { queryBlockingTheMostQueries } = getConnectionMetrics(activities) + expect(queryBlockingTheMostQueries?.activity.pid).toBe(1) + expect(queryBlockingTheMostQueries?.count).toBe(3) + }) + + it('does not warn when the top blocker is under the threshold (3)', () => { + const activities = [ + activity({ pid: 1, blocked_by: [] }), + activity({ pid: 2, blocked_by: [1] }), + ] + + expect(getConnectionMetrics(activities).warnTopBlocker).toBe(false) + }) + + it('warns once the top blocker meets the threshold (3)', () => { + const activities = [ + activity({ pid: 1, blocked_by: [] }), + activity({ pid: 2, blocked_by: [1] }), + activity({ pid: 3, blocked_by: [1] }), + activity({ pid: 4, blocked_by: [1] }), + ] + + expect(getConnectionMetrics(activities).warnTopBlocker).toBe(true) + }) + }) +}) diff --git a/apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.utils.ts b/apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.utils.ts index 81457f80a8969..5d00de6a126b9 100644 --- a/apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.utils.ts +++ b/apps/studio/components/interfaces/Observability/DatabaseConnections/DatabaseConnections.utils.ts @@ -1,7 +1,33 @@ import dayjs from 'dayjs' +import { + WARN_DURATION_ACTIVE_QUERY, + WARN_DURATION_BLOCKED, + WARN_DURATION_IDLE_TXN, + WARN_TOP_BLOCKER, +} from './DatabaseConnections.constants' import { type DatabaseActivity } from '@/data/database/activity-query' +const LONG_RUNNING_STATES: (DatabaseActivity['state'] | undefined)[] = [ + 'active', + 'idle in transaction', + 'idle in transaction (aborted)', +] + +type ActivityWithDuration = { activity: DatabaseActivity; duration: number } + +export type ConnectionMetrics = { + activeQueries: DatabaseActivity[] + blockedQueries: DatabaseActivity[] + warnBlockedQueries: boolean + longestBlockedQuery: ActivityWithDuration | null + idleInTransactionQueries: DatabaseActivity[] + longestRunningQuery: ActivityWithDuration | null + warnLongestRunningQuery: boolean + queryBlockingTheMostQueries: { activity: DatabaseActivity; count: number } | null + warnTopBlocker: boolean +} + export const getDuration = (activity: DatabaseActivity) => { const { state } = activity if (state === 'active' && activity.query_start) { @@ -38,3 +64,80 @@ export const getActivityStart = (activity: DatabaseActivity) => { } return null } + +// Finds the activity with the largest duration-since-start among the given activities (e.g. the +// longest-blocked query, or the longest-running query). +const findLongestRunning = ( + activities: DatabaseActivity[], + now: dayjs.Dayjs +): ActivityWithDuration | null => + activities.reduce ((longest, activity) => { + const start = getActivityStart(activity) + if (!start) return longest + const duration = Math.max(now.diff(dayjs(start).utc(), 'second'), 0) + return longest === null || duration > longest.duration ? { activity, duration } : longest + }, null) + +// Derives the Overview page's connection/activity metrics (and their warning thresholds) from the +// raw pg_stat_activity rows, so the logic can be unit tested independently of the component. +export const getConnectionMetrics = (activities: DatabaseActivity[]): ConnectionMetrics => { + // Computed once so every metric below is measured against the same instant, rather than each + // drifting slightly against the others. + const now = dayjs().utc() + + const activeQueries = activities.filter((x) => x.state === 'active') + + const blockedQueries = activities.filter((x) => x.blocked_by.length > 0) + const warnBlockedQueries = blockedQueries.some((activity) => { + const start = getActivityStart(activity) + if (!start) return false + return now.diff(dayjs(start).utc(), 'second') >= WARN_DURATION_BLOCKED + }) + const longestBlockedQuery = findLongestRunning(blockedQueries, now) + + const idleInTransactionQueries = activities.filter((x) => { + const isIdleInTransaction = + x.state === 'idle in transaction' || x.state === 'idle in transaction (aborted)' + if (!isIdleInTransaction || !x.transaction_start) return false + return now.diff(dayjs(x.transaction_start).utc(), 'second') >= WARN_DURATION_IDLE_TXN + }) + + const longestRunningQuery = findLongestRunning( + activities.filter((x) => LONG_RUNNING_STATES.includes(x.state)), + now + ) + const warnLongestRunningQuery = + (longestRunningQuery?.activity.state === 'active' && + longestRunningQuery.duration >= WARN_DURATION_ACTIVE_QUERY) || + ((longestRunningQuery?.activity.state === 'idle in transaction' || + longestRunningQuery?.activity.state === 'idle in transaction (aborted)') && + longestRunningQuery.duration >= WARN_DURATION_IDLE_TXN) + + const blockingCounts = activities.reduce | |
| ## What is the new behavior? - _Return to Vercel_ button now labelled **Cancel** - **Cancel** closes the popup via `window.close()` (same honest abort as manually closing the window) - If the browser blocks programmatic close, Cancel is replaced by muted fallback copy: “Close window to cancel” (`role="status"` / `aria-live="polite"`) - Cancel is left-aligned with `justify-between` when there’s no additional-costs block; with costs, both actions stay on the right - Removes the free-limit hint line about returning to Vercel (Cancel makes that self-evident) - Success path is unchanged: after create, we still redirect via `next` - `/new` Cancel still navigates into Studio (`cancelAction: 'studio'`). This is unchanged behaviour | After (Fallback) | | --- | |
| ## Additional context Follow-up to #48311. Vercel’s `next` URL has no documented cancel/abort status, so closing the popup is the correct escape hatch. ### To test Full Deploy Button popup cancel can’t be verified on prod until this merges. Locally: 1. Open Studio on this branch. 2. In `ProjectCreationFooter.tsx`, temporarily force the fallback: ```ts const [showCloseWindowHint, setShowCloseWindowHint] = useState(true) ``` 3. Load create-project UI: - Free org / no costs: Confirm Cancel is left, Create is right (`justify-between`). With the forced hint, Cancel is replaced by “Close window to cancel”. - Paid org with additional costs: Confirm costs on the left; hint/Create on the right. 4. Revert `useState` to `false`. 5. Optional: open a Vercel create interstitial URL in a normal tab (not a popup), click Cancel. `window.close()` fails and the hint should replace Cancel after ~100ms. 6. On `/new/[slug]`, Confirm Cancel still returns to the Studio dashboard (not close-window). ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Updated Project Creation Cancel to close the popup window directly when applicable, with a “close window to cancel” hint when closing isn’t available. * **Bug Fixes** * Removed Vercel-specific “return and restart” messaging and related return-url handling. * Standardized Cancel navigation for non-popup flows to return to the last relevant location (or the organizations page). * **Refactor** * Improved Project Creation footer layout/visibility for additional cost details. * **Chores** * Simplified the free-project limit warning configuration by removing an unused option. --------- Co-authored-by: Joshen Lim
- {showVercelReturnHint && ( - - Or return to Vercel and restart with a different organization. -
- )}@@ -45,10 +47,10 @@ export const ProjectCreationFooter = ({ cancelAction = 'studio', }: ProjectCreationFooterProps) => { const router = useRouter() - const { next } = useParams() const { data: currentOrg } = useSelectedOrganizationQuery() const isFreePlan = currentOrg?.plan?.id === 'free' const { lastVisitedOrganization } = useLastVisitedOrganization() + const [showCloseWindowHint, setShowCloseWindowHint] = useState(false) const projectCreationDisabled = useFlag('disableProjectCreationAndUpdate') @@ -57,8 +59,8 @@ export const ProjectCreationFooter = ({ ? 0 : monthlyInstancePrice(instanceSize) - availableComputeCredits - const vercelReturnUrl = getValidVercelReturnUrl(next) - const canReturnToVercel = cancelAction === 'vercel' && vercelReturnUrl !== undefined + const showAdditionalCosts = + !isFreePlan && !projectCreationDisabled && canCreateProject && additionalMonthlySpend > 0 // [kevin] This will eventually all be provided by a new API endpoint to preview and validate project creation, this is just for kaizen now const monthlyComputeCosts = @@ -74,128 +76,139 @@ export const ProjectCreationFooter = ({ 10 const onCancel = () => { - if (canReturnToVercel && vercelReturnUrl) { - window.location.href = vercelReturnUrl + if (cancelAction === 'close') { + window.close() return } - // Fall back to Studio when cancelAction is studio, or when vercel next is missing/invalid if (!!lastVisitedOrganization) router.push(`/org/${lastVisitedOrganization}`) else router.push('/organizations') } + useEffect(() => { + // Browsers only allow closing windows that were opened by script (i.e. have a live `opener`). + // Detect this upfront so we don't need to attempt-and-check after the user clicks cancel. + if (cancelAction === 'close' && !window.opener) setShowCloseWindowHint(true) + }, [cancelAction]) + return ( -- {!isFreePlan && - !projectCreationDisabled && - canCreateProject && - additionalMonthlySpend > 0 && ( -- Additional costs -+ )} -- ${additionalMonthlySpend}/m -+ {showAdditionalCosts && ( +- --- -- Each project includes a dedicated Postgres instance running on its own server. - You are charged for the{' '} -
- {monthlyComputeCosts > 0 && ( -- Compute resource - {' '} - of that server, independent of your database usage. -Compute costs are applied on top of your subscription plan costs.
- )} --
-- -- -Project -Compute Size -Monthly Costs -- {organizationProjects.map((project) => { - const primaryDb = project.databases.find( - (db) => db.identifier === project.ref - ) - return ( - -- - ) - })} - -{project.name} -- {instanceLabel(primaryDb?.infra_compute_size)} - -- ${monthlyInstancePrice(primaryDb?.infra_compute_size)} - -- -- - {form.getValues('projectName') || 'New project'} - - -New -{instanceLabel(instanceSize)} -- ${monthlyInstancePrice(instanceSize)} - -- -
-- -- -Compute Credits -- -$10 - -- -- -- Total Monthly Compute Costs - {/** - * API currently doesnt output replica information on the projects list endpoint. Until then, we cannot correctly calculate the costs including RRs. - * Will be adjusted in the future [kevin] - */} - {organizationProjects.length > 0 && ( - -- Excluding Read replicas -
- )} -- ${monthlyComputeCosts} - -+++ Additional costs +++ ${additionalMonthlySpend}/m +- )} -+ ++ ++ Each project includes a dedicated Postgres instance running on its own server. + You are charged for the{' '} +
+ {monthlyComputeCosts > 0 && ( ++ Compute resource + {' '} + of that server, independent of your database usage. +Compute costs are applied on top of your subscription plan costs.
+ )} ++
++ ++ +Project +Compute Size +Monthly Costs ++ {organizationProjects.map((project) => { + const primaryDb = project.databases.find( + (db) => db.identifier === project.ref + ) + return ( + ++ + ) + })} + +{project.name} ++ {instanceLabel(primaryDb?.infra_compute_size)} + ++ ${monthlyInstancePrice(primaryDb?.infra_compute_size)} + ++ ++ + {form.getValues('projectName') || 'New project'} + + +New +{instanceLabel(instanceSize)} ++ ${monthlyInstancePrice(instanceSize)} + ++ +
++ ++ +Compute Credits ++ -$10 + ++ ++ ++ Total Monthly Compute Costs + {/** + * API currently doesnt output replica information on the projects list endpoint. Until then, we cannot correctly calculate the costs including RRs. + * Will be adjusted in the future [kevin] + */} + {organizationProjects.length > 0 && ( + +Excluding Read replicas
+ )} ++ ${monthlyComputeCosts} + +- {cancelAction !== 'hidden' && ( ++ {cancelAction === 'hidden' ? null : showCloseWindowHint ? ( ++ Close window to cancel +
+ ) : ( )} + } > @@ -702,10 +700,7 @@ export const ProjectCreationForm = ({ {freePlanWithExceedingLimits ? ( isAdmin && slug && ( -+ ) ) : hasOutstandingInvoices ? ( From b8310dbf2323b887c331ce26b53dab1cc2685389 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cemal=20K=C4=B1l=C4=B1=C3=A7?= ()), + useFlag: mockUseFlag, +})) + describe('useEnabledIdentityProviders', () => { + beforeEach(() => { + mockUseFlag.mockReset() + }) + it('returns every provider when all flags are enabled', () => { mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: true, - dashboardAuthSignInWithChatgpt: true, }) mockUseLocalStorageQuery.mockReturnValue([true]) + mockUseFlag.mockReturnValue(true) const { result } = renderHook(() => useEnabledIdentityProviders()) @@ -34,45 +44,69 @@ describe('useEnabledIdentityProviders', () => { it('returns no providers when all flags are disabled', () => { mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false, - dashboardAuthSignInWithChatgpt: false, }) mockUseLocalStorageQuery.mockReturnValue([false]) + mockUseFlag.mockReturnValue(false) const { result } = renderHook(() => useEnabledIdentityProviders()) expect(result.current).toEqual([]) }) - it('includes ChatGPT when its flag is enabled and the local storage switch is truthy', () => { - mockIsFeatureEnabled.mockReturnValue({ - dashboardAuthSignInWithGithub: false, - dashboardAuthSignInWithChatgpt: true, - }) + it('includes ChatGPT when localStorage is true and configcat is true', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false }) mockUseLocalStorageQuery.mockReturnValue([true]) + mockUseFlag.mockReturnValue(true) const { result } = renderHook(() => useEnabledIdentityProviders()) expect(result.current).toEqual([CHATGPT_IDENTITY_PROVIDER]) }) - it('excludes ChatGPT when its flag is enabled but the local storage switch is unset', () => { - mockIsFeatureEnabled.mockReturnValue({ - dashboardAuthSignInWithGithub: false, - dashboardAuthSignInWithChatgpt: true, - }) + it('includes ChatGPT when localStorage is true and configcat is false', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false }) + mockUseLocalStorageQuery.mockReturnValue([true]) + mockUseFlag.mockReturnValue(false) + + const { result } = renderHook(() => useEnabledIdentityProviders()) + + expect(result.current).toEqual([CHATGPT_IDENTITY_PROVIDER]) + }) + + it('includes ChatGPT when localStorage is false and configcat is true', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false }) mockUseLocalStorageQuery.mockReturnValue([false]) + mockUseFlag.mockReturnValue(true) + + const { result } = renderHook(() => useEnabledIdentityProviders()) + + expect(result.current).toEqual([CHATGPT_IDENTITY_PROVIDER]) + }) + + it('excludes ChatGPT when localStorage is false and configcat is false', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false }) + mockUseLocalStorageQuery.mockReturnValue([false]) + mockUseFlag.mockReturnValue(false) const { result } = renderHook(() => useEnabledIdentityProviders()) expect(result.current).toEqual([]) }) - it('excludes ChatGPT when the local storage switch is truthy but its flag is disabled', () => { - mockIsFeatureEnabled.mockReturnValue({ - dashboardAuthSignInWithGithub: false, - dashboardAuthSignInWithChatgpt: false, - }) - mockUseLocalStorageQuery.mockReturnValue([true]) + it('includes GitHub when its feature flag is enabled', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: true }) + mockUseLocalStorageQuery.mockReturnValue([false]) + mockUseFlag.mockReturnValue(false) + + const { result } = renderHook(() => useEnabledIdentityProviders()) + + expect(result.current).toEqual([GITHUB_IDENTITY_PROVIDER]) + }) + + it('excludes GitHub when its feature flag is disabled', () => { + mockIsFeatureEnabled.mockReturnValue({ dashboardAuthSignInWithGithub: false }) + mockUseLocalStorageQuery.mockReturnValue([false]) + mockUseFlag.mockReturnValue(false) const { result } = renderHook(() => useEnabledIdentityProviders()) diff --git a/apps/studio/hooks/misc/useEnabledIdentityProviders.ts b/apps/studio/hooks/misc/useEnabledIdentityProviders.ts index 83aa7c1b18df7..939a7e0e9ff29 100644 --- a/apps/studio/hooks/misc/useEnabledIdentityProviders.ts +++ b/apps/studio/hooks/misc/useEnabledIdentityProviders.ts @@ -1,4 +1,4 @@ -import { LOCAL_STORAGE_KEYS } from 'common' +import { LOCAL_STORAGE_KEYS, useFlag } from 'common' import { useMemo } from 'react' import { useIsFeatureEnabled } from './useIsFeatureEnabled' @@ -14,28 +14,28 @@ import { * To add a provider: declare its config in `lib/external-identity-providers.ts`, add a * `dashboard_auth:sign_in_with_*` flag, and gate it here. * - * ChatGPT is a deliberate exception: it's also gated behind a manual, localStorage-only rollout - * switch (`LOCAL_STORAGE_KEYS.SIGN_IN_CHATGPT_ENABLED`) on top of its feature flag, since it's WIP. + * ChatGPT is a deliberate exception: it's rolled out via the `ShowSignInWithChatGptButton` + * ConfigCat flag OR'd with a manual, localStorage-only opt-in switch + * (`LOCAL_STORAGE_KEYS.SIGN_IN_CHATGPT_ENABLED`, flippable via the `?siwc-enabled=1` query param — + * see `useSiwcQueryParamOptIn`), instead of the static `dashboard_auth:sign_in_with_*` pattern. */ export function useEnabledIdentityProviders(): ExternalIdentityProviderConfig[] { const { dashboardAuthSignInWithGithub: githubEnabled } = useIsFeatureEnabled([ 'dashboard_auth:sign_in_with_github', ]) - const { dashboardAuthSignInWithChatgpt: chatgptEnabled } = useIsFeatureEnabled([ - 'dashboard_auth:sign_in_with_chatgpt', - ]) const [chatgptLocalStorageEnabled] = useLocalStorageQuery( LOCAL_STORAGE_KEYS.SIGN_IN_CHATGPT_ENABLED, false ) + const chatGptConfigCatFlagEnabled = useFlag('ShowSignInWithChatGptButton') return useMemo( () => [ githubEnabled && GITHUB_IDENTITY_PROVIDER, - chatgptEnabled && chatgptLocalStorageEnabled && CHATGPT_IDENTITY_PROVIDER, + (chatgptLocalStorageEnabled || chatGptConfigCatFlagEnabled) && CHATGPT_IDENTITY_PROVIDER, ].filter((p): p is ExternalIdentityProviderConfig => Boolean(p)), - [githubEnabled, chatgptEnabled, chatgptLocalStorageEnabled] + [githubEnabled, chatgptLocalStorageEnabled, chatGptConfigCatFlagEnabled] ) } diff --git a/packages/common/enabled-features/enabled-features.json b/packages/common/enabled-features/enabled-features.json index bdf512b1e13bc..7e4fcb40075d5 100644 --- a/packages/common/enabled-features/enabled-features.json +++ b/packages/common/enabled-features/enabled-features.json @@ -34,7 +34,6 @@ "dashboard_auth:sign_up": true, "dashboard_auth:sign_in_with_github": true, - "dashboard_auth:sign_in_with_chatgpt": true, "dashboard_auth:sign_in_with_sso": true, "dashboard_auth:sign_in_with_email": true, "dashboard_auth:show_testimonial": true, diff --git a/packages/common/enabled-features/enabled-features.schema.json b/packages/common/enabled-features/enabled-features.schema.json index 4b4694ad13f1e..0a63c3e2b63d9 100644 --- a/packages/common/enabled-features/enabled-features.schema.json +++ b/packages/common/enabled-features/enabled-features.schema.json @@ -115,10 +115,6 @@ "type": "boolean", "description": "Enable the sign in with github provider" }, - "dashboard_auth:sign_in_with_chatgpt": { - "type": "boolean", - "description": "Enable the sign in with chatgpt provider" - }, "dashboard_auth:sign_in_with_sso": { "type": "boolean", "description": "Enable the sign in with sso provider" @@ -472,7 +468,6 @@ "billing:all", "dashboard_auth:sign_up", "dashboard_auth:sign_in_with_github", - "dashboard_auth:sign_in_with_chatgpt", "dashboard_auth:sign_in_with_sso", "dashboard_auth:sign_in_with_email", "dashboard_auth:show_tos", -
-
-
-
{additionalResources.map((resource) => {
return (
-
-
-
-
{products.map((product) => {
return (