-
-
+ !isVercelIntegrationFlow && (
+
- (
-
+
+
-
-
+
+ {showNonProdFields && (
+
+
+
)
}
diff --git a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx
index 75516031101..cd455528204 100644
--- a/apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx
+++ b/apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx
@@ -8,7 +8,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { useForm, useFormState } from 'react-hook-form'
import { type CloudProvider } from 'shared-data'
import { toast } from 'sonner'
-import { Button, Form, useWatch } from 'ui'
+import { Button, cn, Form, useWatch } from 'ui'
import { Admonition } from 'ui-patterns/admonition'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
import { z } from 'zod'
@@ -92,6 +92,8 @@ interface ProjectCreationFormProps {
* - "Cancel" button
* - Shows the following:
* - "Data seeding" section
+ * - When embedded in the Vercel interstitial, flattens Panel chrome so the shared
+ * form fields sit inside InterstitialLayout without a nested card
* Eventually we could looking into reducing the differences more, e.g having data seeding
* for both ways, and showing GitHub repository field for Vercel integration
*/
@@ -581,14 +583,20 @@ export const ProjectCreationForm = ({
>
+
-
+ (
+
-
- {showNonProdFields && (
-
-
- )}
+ - The settings below are only applicable for local/staging projects -
-
- (
-
-
-
-
-
- )}
- />
-
- (
-
-
-
-
-
- )}
- />
-
-
+
+ )}
+ + The settings below are only applicable for local/staging projects +
+
+ (
+
+
+
+
+
+ )}
+ />
+
+ (
+
+
+
+
+
+ )}
+ />
+
+ Create a new project
-- Your project will have its own dedicated instance and full Postgres database. An API - will be set up so you can easily interact with your new database. -
-
+
+ )
}
footer={
Create a new project
++ Your project will have its own dedicated instance and full Postgres database. An + API will be set up so you can easily interact with your new database. +
+
- {children}
-
- {docsHref && (
-
-
-
- )
-}
-
-const INTEGRATION_LAYOUT_MAX_WIDTH = '' // 'max-w-[720px]'
-
-export default withAuth(IntegrationWindowLayout)
-
-export const IntegrationWindowLayoutWithoutAuth = IntegrationWindowLayout
-
-export type HeaderProps = {
- title: string
- integrationIcon: ReactNode
-}
-
-const Header = ({ title, integrationIcon }: HeaderProps) => {
- return (
-
-
-
-
- )
-}
-
-const maxWidthClasses = 'mx-auto w-full max-w-[1600px]'
-const paddingClasses = 'px-6 lg:px-14 xl:px-28 2xl:px-32'
-
-export const IntegrationScaffoldContainer = forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
-
-
-
-
- {title}
-
-
- 
-
-
-
-
-)
-
-const VercelIntegrationWindowLayout = ({ children }: PropsWithChildren<{}>) => {
- const { externalId } = useParams()
-
- const snapshot = useIntegrationInstallationSnapshot()
-
- const title = externalId
- ? 'Supabase + Vercel Deploy Button'
- : 'Supabase + Vercel Integration Marketplace Connector'
-
- return (
-
+
-
- {PAGE_TITLE}
+
+
-
+
+
)
}
-VercelIntegration.getLayout = (page) => (
- {page}
-)
-
-export default VercelIntegration
+export default withAuth(VercelIntegration)
diff --git a/apps/studio/routes/integrations/vercel.tsx b/apps/studio/routes/integrations/vercel.tsx
index e31fc665ab9..8e9bcd49623 100644
--- a/apps/studio/routes/integrations/vercel.tsx
+++ b/apps/studio/routes/integrations/vercel.tsx
@@ -4,11 +4,9 @@ export const Route = createFileRoute('/integrations/vercel')({
component: VercelIntegrationPassthrough,
})
-// No shared layout here. Since #47623, the install and
-// marketplace/choose-project pages render their own InterstitialLayout and
-// have no Next getLayout, so the Next runtime shows them without any window
-// chrome. Only deploy-button/new-project still uses
-// VercelIntegrationWindowLayout, and its route wraps it at the leaf.
+// No shared layout here. Since #47623, the Vercel install, marketplace
+// choose-project, and deploy-button/new-project pages each render their own
+// InterstitialLayout and have no Next getLayout / window chrome.
function VercelIntegrationPassthrough() {
return
-
- )
+ return
{description &&
{card}
diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
index 2e1f3b8d277..02e1c050ab2 100644
--- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
+++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx
@@ -1,19 +1,29 @@
import { useParams } from 'common'
+import Head from 'next/head'
import { useEffect, useState } from 'react'
-import { Admonition } from 'ui-patterns/admonition'
import { isVercelUrl } from '@/components/interfaces/Integrations/Vercel/VercelIntegration.utils'
+import {
+ VercelIntegrationFooter,
+ VercelIntegrationLogo,
+} from '@/components/interfaces/Integrations/Vercel/VercelIntegrationInterstitial'
import { ProjectCreationForm } from '@/components/interfaces/ProjectCreation/ProjectCreationForm'
-import VercelIntegrationWindowLayout from '@/components/layouts/IntegrationsLayout/VercelIntegrationWindowLayout'
-import { ScaffoldColumn, ScaffoldContainer } from '@/components/layouts/Scaffold'
+import { InterstitialLayout } from '@/components/layouts/InterstitialLayout'
import { useProjectSettingsV2Query } from '@/data/config/project-settings-v2-query'
import { useIntegrationsQuery } from '@/data/integrations/integrations-query'
import { useIntegrationVercelConnectionsCreateMutation } from '@/data/integrations/integrations-vercel-connections-create-mutation'
import { useVercelProjectsQuery } from '@/data/integrations/integrations-vercel-projects-query'
import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
+import { withAuth } from '@/hooks/misc/withAuth'
+import { buildStudioPageTitle } from '@/lib/page-title'
import { useIntegrationInstallationSnapshot } from '@/state/integration-installation'
import type { NextPageWithLayout } from '@/types'
+const PAGE_TITLE = buildStudioPageTitle({
+ section: 'Create Vercel Project',
+ brand: 'Supabase',
+})
+
const VercelIntegration: NextPageWithLayout = () => {
const { slug, next, currentProjectId: foreignProjectId } = useParams()
const snapshot = useIntegrationInstallationSnapshot()
@@ -91,23 +101,22 @@ const VercelIntegration: NextPageWithLayout = () => {
}, [data, isSuccess])
return (
- {footer}
{description}
}