From 3ea6fcae90aca8876ca9ba178267909bc23eb645 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Mon, 15 Jun 2026 21:40:52 -0600
Subject: [PATCH] chore(studio): remove unused API authorization layout
 (#46962)

## What kind of change does this PR introduce?

Code cleanup. Resolves DEPR-570.

## What is the current behavior?

The old `APIAuthorizationLayout` component still exists in Studio even
though the API/OAuth, CLI, Stripe, invite, credits, and AWS connect
surfaces have moved onto the shared interstitial layout.

## What is the new behavior?

Removes the unused `APIAuthorizationLayout` component.

`IntegrationWindowLayout` and `VercelIntegrationWindowLayout` are still
required for upcoming Vercel connection UI clean up work.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Refactor**
* Removed unused layout component from the API authorization flow,
streamlining the codebase and improving maintainability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../layouts/APIAuthorizationLayout.tsx        | 57 -------------------
 1 file changed, 57 deletions(-)
 delete mode 100644 apps/studio/components/layouts/APIAuthorizationLayout.tsx

diff --git a/apps/studio/components/layouts/APIAuthorizationLayout.tsx b/apps/studio/components/layouts/APIAuthorizationLayout.tsx
deleted file mode 100644
index cbd890004c0..00000000000
--- a/apps/studio/components/layouts/APIAuthorizationLayout.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { useTheme } from 'next-themes'
-import Image from 'next/legacy/image'
-import Link from 'next/link'
-import type { PropsWithChildren } from 'react'
-import { Separator } from 'ui'
-
-import { Head, type HeadProvider } from '@/components/ui/Head'
-import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
-import { BASE_PATH } from '@/lib/constants'
-
-export interface APIAuthorizationLayoutProps {
-  HeadProvider: HeadProvider
-}
-
-export const APIAuthorizationLayout = ({
-  HeadProvider,
-  children,
-}: PropsWithChildren<APIAuthorizationLayoutProps>) => {
-  const { resolvedTheme } = useTheme()
-  const { appTitle } = useCustomContent(['app:title'])
-
-  return (
-    <>
-      <Head
-        HeadProvider={HeadProvider}
-        title={`Authorize API access | ${appTitle || 'Supabase'}`}
-      />
-      <main className="h-screen flex flex-col w-full h-full overflow-y-auto">
-        <div>
-          <div className="mx-auto px-4 sm:px-6">
-            <div className="max-w-xl flex justify-between items-center mx-auto py-4">
-              <div className="flex justify-start lg:w-0 lg:flex-1 items-center">
-                <Link href="/" className="inline-flex items-center leading-none">
-                  <span className="sr-only">Supabase</span>
-                  <Image
-                    src={
-                      resolvedTheme?.includes('dark')
-                        ? `${BASE_PATH}/img/supabase-dark.svg`
-                        : `${BASE_PATH}/img/supabase-light.svg`
-                    }
-                    alt="Supabase Logo"
-                    height={20}
-                    width={105}
-                  />
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-        <Separator />
-        <div className="flex flex-col justify-center grow mx-auto w-[90vw] max-w-[600px] space-y-4">
-          {children}
-        </div>
-      </main>
-    </>
-  )
-}