From b8bc7ffc1884296285d4312aa4b951f84da88162 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Fri, 24 Oct 2025 11:37:00 +0100
Subject: [PATCH 1/4] fix(studio): comma formatting for auth overview numbers
 (#39838)

fix: bring commans in for big numbers
---
 .../components/interfaces/Auth/Overview/OverviewUsage.tsx   | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/Auth/Overview/OverviewUsage.tsx b/apps/studio/components/interfaces/Auth/Overview/OverviewUsage.tsx
index 0ba0062ea149c..2da5ec03eaf7b 100644
--- a/apps/studio/components/interfaces/Auth/Overview/OverviewUsage.tsx
+++ b/apps/studio/components/interfaces/Auth/Overview/OverviewUsage.tsx
@@ -59,7 +59,11 @@ export const StatCard = ({
         : 'text-brand'
       : getChangeColor(previous)
   const formattedCurrent =
-    suffix === 'ms' ? current.toFixed(2) : suffix === '%' ? current.toFixed(1) : Math.round(current)
+    suffix === 'ms'
+      ? current.toFixed(2)
+      : suffix === '%'
+        ? current.toFixed(1)
+        : Math.round(current).toLocaleString()
   const signChar = previous > 0 ? '+' : previous < 0 ? '-' : ''
 
   return (

From ebf9db565b1231e3b59a303b090290a72ac48012 Mon Sep 17 00:00:00 2001
From: "kemal.earth" <606977+kemaldotearth@users.noreply.github.com>
Date: Fri, 24 Oct 2025 12:52:01 +0100
Subject: [PATCH 2/4] fix(studio): syntax error in banner (#38601)

* fix: rendering anchor inside button

* chore: revert banner logic out of testing purposes

* chore: debugging the gap

* chore: remove unused css
---
 .../components/interfaces/Organization/HeaderBanner.tsx   | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
index 0754cc2c2c5c1..9da5f4e65bda4 100644
--- a/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
+++ b/apps/studio/components/interfaces/Organization/HeaderBanner.tsx
@@ -50,6 +50,7 @@ export const HeaderBanner = ({
         type === 'incident' && 'hover:bg-brand-300',
         'flex-shrink-0'
       )}
+      layout="position"
     >
       <div className={cn('items-center flex flex-row gap-3')}>
         <div className="absolute inset-y-0 left-0 right-0 overflow-hidden z-0">
@@ -98,15 +99,16 @@ export const HeaderBanner = ({
           </span>
         </div>
         {link && (
-          <button
+          <a
+            href={link}
             className={cn(
               'lg:block hidden',
               'text-foreground-lighter text-sm z-[1] m-0',
               type === 'danger' ? 'text-destructive' : 'text-warning'
             )}
           >
-            <Link href={link}>View Details</Link>
-          </button>
+            View Details
+          </a>
         )}
       </div>
     </motion.div>

From 21d27b9a62978fad246be4decd7f562a51eb19ab Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Fri, 24 Oct 2025 08:27:43 -0400
Subject: [PATCH 3/4] perf(storage menu): improve bucket list for users with
 many thousand buckets (#39826)

* perf(storage menu): virtualize and memoize bucket rows

The Storage Menu fails to render properly when the user has thousands of
buckets. Virtualizing and memoizing BucketRows to reduce rendering work.

* refactor(bucket list): only virtualize bucket list when more than 50 buckets

* style(storage menu): improve styling for virtualized and unvirtualized lists
---
 .../interfaces/Storage/BucketRow.tsx          |  15 ++-
 .../Storage/StorageMenu.BucketList.tsx        | 120 ++++++++++++++++++
 .../interfaces/Storage/StorageMenu.tsx        |  58 +++++----
 3 files changed, 165 insertions(+), 28 deletions(-)
 create mode 100644 apps/studio/components/interfaces/Storage/StorageMenu.BucketList.tsx

diff --git a/apps/studio/components/interfaces/Storage/BucketRow.tsx b/apps/studio/components/interfaces/Storage/BucketRow.tsx
index 4cfcdeb3794ab..8024003444f46 100644
--- a/apps/studio/components/interfaces/Storage/BucketRow.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketRow.tsx
@@ -1,6 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { Columns3, Edit2, MoreVertical, Trash, XCircle } from 'lucide-react'
 import Link from 'next/link'
+import type { CSSProperties } from 'react'
 import { useState } from 'react'
 
 import { DeleteBucketModal } from 'components/interfaces/Storage/DeleteBucketModal'
@@ -26,9 +27,17 @@ export interface BucketRowProps {
   bucket: Bucket
   projectRef?: string
   isSelected: boolean
+  style?: CSSProperties
+  className?: string
 }
 
-export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: BucketRowProps) => {
+export const BucketRow = ({
+  bucket,
+  projectRef = '',
+  isSelected = false,
+  style,
+  className,
+}: BucketRowProps) => {
   const { can: canUpdateBuckets } = useAsyncCheckPermissions(PermissionAction.STORAGE_WRITE, '*')
   const [modal, setModal] = useState<string | null>(null)
   const onClose = () => setModal(null)
@@ -36,9 +45,11 @@ export const BucketRow = ({ bucket, projectRef = '', isSelected = false }: Bucke
   return (
     <div
       key={bucket.id}
+      style={style}
       className={cn(
         'group flex items-center justify-between rounded-md',
-        isSelected && 'text-foreground bg-surface-100'
+        isSelected && 'text-foreground bg-surface-100',
+        className
       )}
     >
       {/* Even though we trim whitespaces from bucket names, there may be some existing buckets with trailing whitespaces. */}
diff --git a/apps/studio/components/interfaces/Storage/StorageMenu.BucketList.tsx b/apps/studio/components/interfaces/Storage/StorageMenu.BucketList.tsx
new file mode 100644
index 0000000000000..b49c691a71f6b
--- /dev/null
+++ b/apps/studio/components/interfaces/Storage/StorageMenu.BucketList.tsx
@@ -0,0 +1,120 @@
+import type { CSSProperties } from 'react'
+import { memo, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { ListChildComponentProps } from 'react-window'
+import { FixedSizeList as List, areEqual } from 'react-window'
+
+import type { Bucket } from 'data/storage/buckets-query'
+import { BucketRow } from './BucketRow'
+
+type BucketListProps = {
+  buckets: Bucket[]
+  selectedBucketId?: string
+  projectRef?: string
+}
+
+const BUCKET_ROW_HEIGHT = 'h-7'
+
+const VirtualizedBucketRow = memo(
+  ({ index, style, data }: ListChildComponentProps<BucketListProps>) => {
+    const bucket = data.buckets[index]
+    const isSelected = data.selectedBucketId === bucket.id
+
+    return (
+      <BucketRow
+        bucket={bucket}
+        isSelected={isSelected}
+        projectRef={data.projectRef}
+        style={style as CSSProperties}
+        className={BUCKET_ROW_HEIGHT}
+      />
+    )
+  },
+  (prev, next) => {
+    if (!areEqual(prev, next)) return false
+
+    const prevBucket = prev.data.buckets[prev.index]
+    const nextBucket = next.data.buckets[next.index]
+
+    if (prevBucket !== nextBucket) return false
+
+    const wasSelected = prev.data.selectedBucketId === prevBucket.id
+    const isSelected = next.data.selectedBucketId === nextBucket.id
+
+    return wasSelected === isSelected
+  }
+)
+VirtualizedBucketRow.displayName = 'VirtualizedBucketRow'
+
+const BucketListVirtualized = ({ buckets, selectedBucketId, projectRef = '' }: BucketListProps) => {
+  const [listHeight, setListHeight] = useState(500)
+  const sizerRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (sizerRef.current) {
+      const resizeObserver = new ResizeObserver(([entry]) => {
+        const { height } = entry.contentRect
+        setListHeight(height)
+      })
+
+      resizeObserver.observe(sizerRef.current)
+      setListHeight(sizerRef.current.getBoundingClientRect().height)
+
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  const itemData = useMemo<BucketListProps>(
+    () => ({
+      buckets,
+      projectRef,
+      selectedBucketId,
+    }),
+    [buckets, projectRef, selectedBucketId]
+  )
+
+  return (
+    <div ref={sizerRef} className="flex-grow">
+      <List
+        itemCount={buckets.length}
+        itemData={itemData}
+        itemKey={(index) => buckets[index].id}
+        height={listHeight}
+        // itemSize should match the height of BucketRow + any gap/margin
+        itemSize={28}
+        width="100%"
+      >
+        {VirtualizedBucketRow}
+      </List>
+    </div>
+  )
+}
+
+export const BucketList = ({ buckets, selectedBucketId, projectRef = '' }: BucketListProps) => {
+  const numBuckets = buckets.length
+
+  if (numBuckets <= 50) {
+    return (
+      <div className="mr-3 mb-6">
+        {buckets.map((bucket) => (
+          <BucketRow
+            key={bucket.id}
+            bucket={bucket}
+            isSelected={selectedBucketId === bucket.id}
+            projectRef={projectRef}
+            className={BUCKET_ROW_HEIGHT}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <BucketListVirtualized
+      buckets={buckets}
+      selectedBucketId={selectedBucketId}
+      projectRef={projectRef}
+    />
+  )
+}
diff --git a/apps/studio/components/interfaces/Storage/StorageMenu.tsx b/apps/studio/components/interfaces/Storage/StorageMenu.tsx
index a0c3243806ed7..8ffd4ca64e6c8 100644
--- a/apps/studio/components/interfaces/Storage/StorageMenu.tsx
+++ b/apps/studio/components/interfaces/Storage/StorageMenu.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { useFlag, useParams } from 'common'
 import { CreateBucketModal } from 'components/interfaces/Storage/CreateBucketModal'
@@ -19,7 +19,7 @@ import {
   InnerSideBarFilterSortDropdown,
   InnerSideBarFilterSortDropdownItem,
 } from 'ui-patterns/InnerSideMenu'
-import { BucketRow } from './BucketRow'
+import { BucketList } from './StorageMenu.BucketList'
 
 export const StorageMenu = () => {
   const router = useRouter()
@@ -53,21 +53,31 @@ export const StorageMenu = () => {
     isError,
     isSuccess,
   } = useBucketsQuery({ projectRef: ref })
-  const sortedBuckets =
-    snap.sortBucket === 'alphabetical'
-      ? buckets.sort((a, b) =>
-          a.name.toLowerCase().trim().localeCompare(b.name.toLowerCase().trim())
-        )
-      : buckets.sort((a, b) => (new Date(b.created_at) > new Date(a.created_at) ? -1 : 1))
-  const filteredBuckets =
-    searchText.length > 1
-      ? sortedBuckets.filter((bucket) => bucket.name.includes(searchText.trim()))
-      : sortedBuckets
+  const sortedBuckets = useMemo(
+    () =>
+      snap.sortBucket === 'alphabetical'
+        ? buckets.sort((a, b) =>
+            a.name.toLowerCase().trim().localeCompare(b.name.toLowerCase().trim())
+          )
+        : buckets.sort((a, b) => (new Date(b.created_at) > new Date(a.created_at) ? -1 : 1)),
+    [buckets, snap.sortBucket]
+  )
+  const filteredBuckets = useMemo(
+    () =>
+      searchText.length > 1
+        ? sortedBuckets.filter((bucket) => bucket.name.includes(searchText.trim()))
+        : sortedBuckets,
+    [sortedBuckets, searchText]
+  )
   const tempNotSupported = error?.message.includes('Tenant config') && isBranch
 
   return (
     <>
-      <Menu type="pills" className="mt-6 flex flex-grow flex-col">
+      <Menu
+        type="pills"
+        className="pt-6 h-full flex flex-col"
+        ulClassName="flex flex-col flex-grow"
+      >
         <div className="mb-6 mx-5 flex flex-col gap-y-1.5">
           <CreateBucketModal />
 
@@ -100,8 +110,8 @@ export const StorageMenu = () => {
           </InnerSideBarFilters>
         </div>
 
-        <div className="space-y-6">
-          <div className="mx-3">
+        <div className="flex flex-col flex-grow">
+          <div className="flex-grow ml-3 flex flex-col">
             <Menu.Group title={<span className="uppercase font-mono">All buckets</span>} />
 
             {isLoading && (
@@ -145,17 +155,13 @@ export const StorageMenu = () => {
                     description={`Your search for "${searchText}" did not return any results`}
                   />
                 )}
-                {filteredBuckets.map((bucket, idx: number) => {
-                  const isSelected = bucketId === bucket.id
-                  return (
-                    <BucketRow
-                      key={`${idx}_${bucket.id}`}
-                      bucket={bucket}
-                      projectRef={ref}
-                      isSelected={isSelected}
-                    />
-                  )
-                })}
+                {filteredBuckets.length > 0 && (
+                  <BucketList
+                    buckets={filteredBuckets}
+                    selectedBucketId={bucketId}
+                    projectRef={ref}
+                  />
+                )}
               </>
             )}
           </div>

From 4c151ec01d1b5c9f132b72b9985f5dae4dfe8f12 Mon Sep 17 00:00:00 2001
From: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Date: Fri, 24 Oct 2025 16:24:55 +0200
Subject: [PATCH 4/4] e2e fixes (#39845)

* only require approval on forks

* update readme

* update example

* update readme
---
 .github/workflows/studio-e2e-test.yml |  4 +-
 e2e/studio/.env.local.example         | 17 +++-----
 e2e/studio/README.md                  | 63 +++------------------------
 3 files changed, 14 insertions(+), 70 deletions(-)

diff --git a/.github/workflows/studio-e2e-test.yml b/.github/workflows/studio-e2e-test.yml
index 42eb11cf90642..dccb143223758 100644
--- a/.github/workflows/studio-e2e-test.yml
+++ b/.github/workflows/studio-e2e-test.yml
@@ -28,8 +28,8 @@ jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
-    # Require approval only for external contributors
-    environment: ${{ github.event.pull_request.author_association != 'MEMBER' && 'Studio E2E Tests' || '' }}
+    # Require approval only for pull requests from forks
+    environment: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork && 'Studio E2E Tests' || '' }}
 
     env:
       EMAIL: ${{ secrets.CI_EMAIL }}
diff --git a/e2e/studio/.env.local.example b/e2e/studio/.env.local.example
index 256a6101fbd45..400bfc19a613b 100644
--- a/e2e/studio/.env.local.example
+++ b/e2e/studio/.env.local.example
@@ -1,14 +1,9 @@
 
-# 1. Copy and paste this file and rename it to .env.local
+# Copy and paste this file and rename it to .env.local
 
-# 2. Set the STUDIO_URL and API_URL you want the e2e tests to run against
+STUDIO_URL=http://127.0.0.1:54323
+API_URL=http://127.0.0.1:54323
+IS_PLATFORM=false
 
-STUDIO_URL=https://supabase.com/dashboard
-API_URL=https://api.supabase.com
-AUTHENTICATION=true
-
-# 3. *Optional* If the environment requires auth, set AUTHENTICATION to true, auth credentials, and PROJECT_REF
-
-EMAIL=
-PASSWORD=
-PROJECT_REF=
+# Used to run e2e tests against vercel previews
+VERCEL_AUTOMATION_BYPASS_SELFHOSTED_STUDIO=
\ No newline at end of file
diff --git a/e2e/studio/README.md b/e2e/studio/README.md
index 6ddfe554a10bc..b3d031623e458 100644
--- a/e2e/studio/README.md
+++ b/e2e/studio/README.md
@@ -6,60 +6,24 @@
 cp .env.local.example .env.local
 ```
 
-Edit the `.env.local` file with your credentials and environment.
-
 ### Install the playwright browser
 
 ⚠️ This should be done in the `e2e/studio` directory
 
 ```bash
-pnpm exec playwright install
-```
-
-## Environments
-
-### Staging
-
-```bash
-STUDIO_URL=https://supabase.green/dashboard
-API_URL=https://api.supabase.green
-AUTHENTICATION=true
-EMAIL=your@email.com
-PASSWORD=yourpassword
-PROJECT_REF=yourprojectref
-```
-
-### CLI (NO AUTH)
+cd e2e/studio
 
-You'll need to run the CLI locally.
-
-```bash
-STUDIO_URL=http://localhost:54323
-API_URL=http://localhost:54323/api
-AUTHENTICATION=false
+pnpm exec playwright install
 ```
 
-### CLI Development (NO AUTH)
+### Run a local Supabase instance
 
-You'll need to run Studio in development mode with `IS_PLATFORM=false`
+Make sure you have Supabase CLI installed
 
 ```bash
-STUDIO_URL=http://localhost:8082/
-API_URL=http://localhost:8082/api
-AUTHENTICATION=false
-```
-
-### Hosted Development
-
-You'll need to run Studio in development mode with `IS_PLATFORM=true`
+cd e2e/studio
 
-```bash
-STUDIO_URL=http://localhost:8082/
-API_URL=http://localhost:8080/api
-AUTHENTICATION=true
-EMAIL=your@email.com
-PASSWORD=yourpassword
-PROJECT_REF=yourprojectref
+supabase start
 ```
 
 ---
@@ -68,8 +32,6 @@ PROJECT_REF=yourprojectref
 
 Check the `package.json` for the available commands and environments.
 
-#### Example:
-
 ```bash
 pnpm run e2e
 ```
@@ -111,19 +73,6 @@ PWDEBUG=1 pnpm run e2e -- --ui
 
 ---
 
-## Organization
-
-Name the folders based on the feature you are testing.
-
-```bash
-e2e/studio/logs/
-e2e/studio/sql-editor/
-e2e/studio/storage/
-e2e/studio/auth/
-```
-
----
-
 ## What should I test?
 
 - Can the feature be navigated to?