chore(studio): vector buckets contents by dnywh · Pull Request #39705 · supabase/supabase

dnywh · 2025-10-21T06:33:36Z

What kind of change does this PR introduce?

Chore: UI improvements to the vector buckets and their details

What is the current behavior?

@ivasilov has graciously added a bunch of basic scaffolding for both the root vector buckets and page the individual vector bucket details page

What is the new behavior?

UI and copywriting improvements to the above pages
Empty state
Reused existing patterns from analytics buckets where appropriate
Reused existing components from analytics buckets where appropriate

Additional context

Based on #39597.

Still to come:

Empty state within vector bucket (no indexes/tables)
Modals

To test

Use MOCK_VECTOR_INDEXES for allIndexes in VectorBucketDetails (here) if you need mock table data.

vercel · 2025-10-21T06:33:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
studio-self-hosted	Ready	Preview	Comment	Oct 21, 2025 6:50am
studio-staging	Ready	Preview	Comment	Oct 21, 2025 6:50am

6 Skipped Deployments

Project	Deployment	Updated (UTC)
cms	Ignored	Oct 21, 2025 6:50am
studio	Ignored	Oct 21, 2025 6:50am
design-system	Skipped	Oct 21, 2025 6:50am
docs	Skipped	Oct 21, 2025 6:50am
ui-library	Skipped	Oct 21, 2025 6:50am
zone-www-dot-com	Skipped	Oct 21, 2025 6:50am

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

supabase · 2025-10-21T06:33:42Z

This pull request has been ignored for the connected project xguihxuzqibwxjnimxev because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

dnywh · 2025-10-21T06:40:01Z

apps/studio/components/interfaces/Storage/VectorBuckets/BucketDetails.tsx

Renamed to VectorBucketDetails just to match elsewhere. Figured this would be helpful clarity as we jump around various bucket types in code.

dnywh · 2025-10-21T06:40:15Z

apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx

+  // TODO: replace with proper check for wrappers extension state
+  const wrappersExtensionState = 'installed'
+


Just hardcoding a wrappers state.

dnywh · 2025-10-21T06:40:49Z

apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx

We could reuse the existing CreateSpecializedBucketModal (for analytics) because it’s so similar.

Or we could just rename that one to be more clearly about analytics.

dnywh · 2025-10-21T06:41:45Z

apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx

                    label="Bucket name"
                    labelOptional="Cannot be changed after creation"
-                    description="Must be between 3–63 characters. Valid characters are a-z, 0-9, hyphens (-), and periods (.). A target schema will be created that matches this name."
+                    description="A target schema will be created that matches this name."


It’s a bit of a mouthful with the field validation spelt out. I know it’s (on paper) bad practice to hide the requirements, but they are so obvious that I want to sprinkle them in as needed.

dnywh · 2025-10-21T06:42:44Z

apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx

+                  Supabase will install the{' '}
+                  {wrappersExtensionState !== 'installed' ? 'Wrappers extension and ' : ''}
+                  S3 Vectors Wrapper integration on your behalf.{' '}
+                  <InlineLink href={`${DOCS_URL}/guides/database/extensions/wrappers/overview`}>


Need to replace with the docs page for S3 Vectors when it’s ready. Just like Iceberg for analytics. CC @ChrisChinchilla and @burmecia

@dnywh I am about to push a WIP branch for that

dnywh · 2025-10-21T06:43:07Z

apps/studio/components/interfaces/Storage/VectorBuckets/EmptyVectorBucketState.tsx

Reusing the generic EmptyBucketState instead.

dnywh · 2025-10-21T06:43:35Z

apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails.tsx

Following the pattern from analytics buckets here by having its own Details component inside of Interfaces.

dnywh · 2025-10-21T06:45:49Z

apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails.tsx

+  })
+
+  // Mock data for development - replace with real data when backend is ready
+  // const allIndexes = MOCK_VECTOR_INDEXES


Use this instead of data?.vectorBuckets if you aren’t able to populate with real data.

dnywh · 2025-10-21T06:46:16Z

apps/studio/components/interfaces/Storage/VectorBuckets/VectorsBuckets.tsx

This naming is a bit trippy but I don’t have a better idea!

dnywh · 2025-10-21T06:46:26Z

apps/studio/components/interfaces/Storage/VectorBuckets/VectorsBuckets.tsx

+  const filteredBuckets = bucketsList.filter((bucket) =>
+    filterString.length === 0
+      ? true
+      : bucket.vectorBucketName.toLowerCase().includes(filterString.toLowerCase())
+  )
+


Search functionality

dnywh · 2025-10-21T06:46:43Z

apps/studio/components/interfaces/Storage/VectorBuckets/VectorsBuckets.tsx

-        </div>
-      )}
+    <>
+      {!isLoadingBuckets && bucketsList.length === 0 ? (


Loading state. Just like analytics.

dnywh · 2025-10-21T06:47:19Z

apps/studio/components/interfaces/Storage/EmptyBucketState.tsx

+      {bucketType === 'files' && (
        <CreateBucketModal buttonSize="tiny" buttonType="primary" buttonClassName="w-fit" />
-      ) : (
+      )}
+      {bucketType === 'analytics' && (
        <CreateSpecializedBucketModal
          bucketType={bucketType}
          buttonSize="tiny"
          buttonType="primary"
          buttonClassName="w-fit"
-          disabled={bucketType === 'vectors'}
-          tooltip={
-            bucketType === 'vectors'
-              ? {
-                  content: {
-                    side: 'bottom',
-                    text: 'Vector buckets are not supported yet',
-                  },
-                }
-              : undefined
-          }
        />
      )}
+      {bucketType === 'vectors' && <CreateVectorBucketDialog />}


As mentioned in the PR body, we could reuse CreateSpecializedBucketModal. Having three separate ones for clarity doesn’t hurt, I suppose.

dnywh · 2025-10-21T06:47:42Z

apps/studio/pages/project/[ref]/storage/vectors/buckets/[id].tsx

Renamed [bucketId] to match other bucket types.

dnywh · 2025-10-21T06:47:48Z

apps/studio/pages/project/[ref]/storage/vectors/buckets/[bucketId].tsx

Renamed [bucketId] to match other bucket types.

* language * match analytics buckets * shared empty state * proper loading state * create dialog cleanup * simplify copywriting * proper details * filtering * use real data

* Initial work on vector buckets. * Add more queries and UI. * chore(studio): vector buckets contents (#39705) * language * match analytics buckets * shared empty state * proper loading state * create dialog cleanup * simplify copywriting * proper details * filtering * use real data * chore(studio): vector buckets polish A (#39759) * empty state * better checks * bucket name in sheet * fix typo * sheet improvements * rename vector index to vector table * cleanup * More work on the vector indexes. * Add delete for bucket and indexes. Create index should now work. * chore(studio): vector buckets polish B (#39794) * loading * delete modal * fix modal behaviour * Add modal for deleting vector buckets. * Bring back the shimmering loader. * chore(studio): vector buckets polish C (#39887) * fix bucketname on deletion dialog * empty states * remove extraneous padding * proper loading and not-found cases * Minor fixes. * Minor updates to the vector components. * Add more instructions to the cursor rules. * Some refactors and shifting files around * Refactor analytics buckets detial to improve time to fcp * Fix * Refactors + simplify * Last few nits, just leaving comments * If the bucket is not empty, delete all indexes first. --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

dnywh added 8 commits October 21, 2025 14:55

language

595eacb

match analytics buckets

7e9f8bb

shared empty state

24ddabb

proper loading state

c2b5313

create dialog cleanup

9fba118

simplify copywriting

88d9586

proper details

e8f65d1

filtering

e42c23a

dnywh had a problem deploying to Studio E2E Tests October 21, 2025 06:33 — with GitHub Actions Error

dnywh changed the base branch from master to ivan/depr-91-add-skeleton-of-vector-bucket-contents-to-storage October 21, 2025 06:33

dnywh commented Oct 21, 2025

View reviewed changes

use real data

4394ca4

dnywh had a problem deploying to Studio E2E Tests October 21, 2025 06:44 — with GitHub Actions Failure

dnywh commented Oct 21, 2025

View reviewed changes

apps/studio/pages/project/[ref]/storage/vectors/buckets/[id].tsx

Copy link

Contributor Author

dnywh Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed [bucketId] to match other bucket types.

dnywh commented Oct 21, 2025

View reviewed changes

apps/studio/pages/project/[ref]/storage/vectors/buckets/[bucketId].tsx

Copy link

Contributor Author

dnywh Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed [bucketId] to match other bucket types.

dnywh marked this pull request as ready for review October 21, 2025 06:48

dnywh requested a review from a team as a code owner October 21, 2025 06:48

ivasilov approved these changes Oct 21, 2025

View reviewed changes

ivasilov merged commit 4ba6290 into ivan/depr-91-add-skeleton-of-vector-bucket-contents-to-storage Oct 21, 2025
16 of 17 checks passed

ivasilov deleted the dnywh/chore/vector-bucket-contents branch October 21, 2025 11:46

		// TODO: replace with proper check for wrappers extension state
		const wrappersExtensionState = 'installed'

Uh oh!

Conversation

dnywh commented Oct 21, 2025 • edited by ivasilov Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What kind of change does this PR introduce?

What is the current behavior?

What is the new behavior?

Additional context

To test

Uh oh!

vercel bot commented Oct 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

supabase bot commented Oct 21, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dnywh commented Oct 21, 2025 •

edited by ivasilov

Loading

vercel bot commented Oct 21, 2025 •

edited

Loading