chore(studio): improve Storage UI (supabase#40367)

dnywh · joshenlim · web-flow · commit 849c29f824c3 · 2025-11-13T20:30:49.000+11:00
* clarify breadcrumbs

* tiny badge variant

* improve admonition

* indicate max buckets limit

* nit

* Minor nits

* badge fix

---------

Co-authored-by: Joshen Lim &lt;joshenlimek@gmail.com&gt;
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -193,10 +193,10 @@ export const EmailTemplates = () => {
                     <div className="flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
                       <div className="flex flex-col gap-y-0.5">
                         <div className="flex flex-col gap-y-2 items-start">
-                          <Badge variant="success" className="-ml-0.5">
-                            NEW
+                          <Badge variant="success" className="-ml-0.5 uppercase">
+                            New
                           </Badge>
-                          <p className="text-sm">
+                          <p className="text-sm font-medium">
                             Notify users about security-sensitive actions on their accounts
                           </p>
                         </div>
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/SimpleConfigurationDetails.tsx
@@ -37,7 +37,6 @@ export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string
             >
               Learn more
             </InlineLink>
-            .
           </ScaffoldSectionDescription>
         </div>
         <CopyEnvButton
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
@@ -231,7 +231,7 @@ export const AnalyticBucketDetails = () => {
                         <div className="flex flex-col items-center text-center">
                           <h3>Connect database tables</h3>
                           <p className="text-foreground-light text-sm">
-                            Stream data from tables for archival, backups, or analytical queries.
+                            Stream table data for continuous backups and analysis
                           </p>
                         </div>
                         <ConnectTablesDialog
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx
@@ -105,7 +105,7 @@ export const CreateAnalyticsBucketModal = ({
 
   const [visible, setVisible] = useState(false)
 
-  const { data: buckets = [] } = useAnalyticsBucketsQuery({ projectRef: ref })
+  const { data: buckets = [], isLoading } = useAnalyticsBucketsQuery({ projectRef: ref })
   const icebergCatalogEnabled = useIsAnalyticsBucketsEnabled({ projectRef: ref })
   const wrappersExtenstionNeedsUpgrading = wrappersExtensionState === 'needs-upgrade'
 
@@ -192,7 +192,13 @@ export const CreateAnalyticsBucketModal = ({
           type={buttonType}
           className={buttonClassName}
           icon={<Plus size={14} />}
-          disabled={!canCreateBuckets || !icebergCatalogEnabled || disabled}
+          disabled={
+            !canCreateBuckets ||
+            !icebergCatalogEnabled ||
+            isLoading ||
+            buckets.length >= 2 ||
+            disabled
+          }
           style={{ justifyContent: 'start' }}
           onClick={() => setVisible(true)}
           tooltip={{
@@ -203,7 +209,9 @@ export const CreateAnalyticsBucketModal = ({
                 ? 'Analytics buckets are not enabled for your project. Please contact support to enable it.'
                 : !canCreateBuckets
                   ? 'You need additional permissions to create buckets'
-                  : tooltip?.content?.text,
+                  : buckets.length >= 2
+                    ? 'Bucket limit reached'
+                    : tooltip?.content?.text,
             },
           }}
         >
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx
@@ -1,13 +1,28 @@
-import { ChevronRight, ExternalLink, Search } from 'lucide-react'
-import { useRouter } from 'next/navigation'
-import { useState } from 'react'
-
 import { useParams } from 'common'
 import { ScaffoldHeader, ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useAnalyticsBucketsQuery } from 'data/storage/analytics-buckets-query'
 import { Bucket as BucketIcon } from 'icons'
-import { Button, Card, cn, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { BASE_PATH } from 'lib/constants'
+import { ChevronRight, ExternalLink, Search } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import {
+  Badge,
+  Button,
+  Card,
+  cn,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from 'ui'
 import { Admonition, TimestampInfo } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { EmptyBucketState } from '../EmptyBucketState'
@@ -41,28 +56,45 @@ export const AnalyticsBuckets = () => {
 
   return (
     <ScaffoldSection isFullWidth>
-      <Admonition
-        type="note"
-        layout="horizontal"
-        className="-mt-4 mb-8 [&>div]:!translate-y-0 [&>svg]:!translate-y-1"
-        title="Private alpha"
-        actions={
-          <Button asChild type="default" icon={<ExternalLink />}>
-            <a
+      <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
+        <div className="absolute -inset-16 z-0 opacity-50">
+          <img
+            src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
+            alt="Supabase Grafana"
+            className="w-full h-full object-cover object-right hidden dark:block"
+          />
+          <img
+            src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
+            alt="Supabase Grafana"
+            className="w-full h-full object-cover object-right dark:hidden"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
+        </div>
+
+        <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
+          <div className="flex flex-col gap-y-0.5">
+            <div className="flex flex-col gap-y-2 items-start">
+              <Badge variant="success" className="-ml-0.5 uppercase">
+                New
+              </Badge>
+              <p className="text-sm font-medium">Introducing analytics buckets</p>
+            </div>
+            <p className="text-sm text-foreground-lighter text-balance">
+              Analytics buckets are now in private alpha. Expect rapid changes, limited features,
+              and possible breaking updates. Please share feedback as we refine the experience and
+              expand access.
+            </p>
+          </div>
+          <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
+            <Link
+              href="https://github.com/orgs/supabase/discussions/40116"
               target="_blank"
               rel="noopener noreferrer"
-              href="https://github.com/orgs/supabase/discussions/40116"
             >
               Share feedback
-            </a>
+            </Link>
           </Button>
-        }
-      >
-        <p className="!leading-normal !mb-0 text-balance">
-          Analytics buckets are now in private alpha. Expect rapid changes, limited features, and
-          possible breaking updates. Please share feedback as we refine the experience and expand
-          access.
-        </p>
+        </div>
       </Admonition>
 
       {!isLoadingBuckets &&
@@ -71,8 +103,21 @@ export const AnalyticsBuckets = () => {
         <EmptyBucketState bucketType="analytics" />
       ) : (
         <div className="flex flex-col gap-y-4">
-          <ScaffoldHeader className="py-0">
+          <ScaffoldHeader className="py-0 flex flex-row items-center gap-x-2">
             <ScaffoldSectionTitle>Buckets</ScaffoldSectionTitle>
+            {analyticsBuckets.length > 0 && (
+              <Tooltip>
+                <TooltipTrigger>
+                  <span className="bg-surface-200 rounded-full px-2 py-1 leading-none text-xs text-foreground-lighter tracking-widest">
+                    {analyticsBuckets.length}
+                    /2
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="w-64 text-center">
+                  Each project can only have up to 2 buckets while analytics buckets are in alpha{' '}
+                </TooltipContent>
+              </Tooltip>
+            )}
           </ScaffoldHeader>
           <div className="flex flex-grow justify-between gap-x-2 items-center">
             <Input
diff --git a/apps/studio/components/interfaces/Storage/Storage.constants.ts b/apps/studio/components/interfaces/Storage/Storage.constants.ts
@@ -66,23 +66,23 @@ export const BUCKET_TYPES = {
     singularName: 'file',
     article: 'a',
     description: 'General file storage for most types of digital content',
-    valueProp: 'Store images, videos, documents, and any other file type.',
+    valueProp: 'Store images, videos, documents, and any other file type',
     docsUrl: `${DOCS_URL}/guides/storage/buckets/fundamentals`,
   },
   analytics: {
     displayName: 'Analytics',
     singularName: 'analytics',
     article: 'an',
     description: 'Purpose-built storage for analytical workloads',
-    valueProp: 'Store large datasets for analytics and reporting.',
+    valueProp: 'Store large datasets for analytics and reporting',
     docsUrl: `${DOCS_URL}/guides/storage/analytics/introduction`,
   },
   vectors: {
     displayName: 'Vectors',
     singularName: 'vector',
     article: 'a',
     description: 'Purpose-built storage for vector data',
-    valueProp: 'Store, index, and query your vector embeddings at scale.',
+    valueProp: 'Store, index, and query your vector embeddings at scale',
     docsUrl: `${DOCS_URL}/guides/storage/vectors`,
   },
 }
diff --git a/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx b/apps/studio/components/interfaces/Storage/StorageMenuV2.tsx
@@ -35,7 +35,7 @@ export const StorageMenuV2 = () => {
                   <div className="flex items-center justify-between">
                     <p className="truncate">{config.displayName}</p>
                     {isAlphaEnabled && (
-                      <Badge variant="default" size="small">
+                      <Badge variant="success" size="tiny">
                         New
                       </Badge>
                     )}
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx
@@ -1,14 +1,26 @@
 import { ChevronRight, ExternalLink, Search } from 'lucide-react'
+import Link from 'next/link'
 import { useRouter } from 'next/navigation'
-import type React from 'react'
-import { useState } from 'react'
+import { useState, type KeyboardEvent, type MouseEvent } from 'react'
 
 import { useParams } from 'common'
 import { ScaffoldHeader, ScaffoldSection, ScaffoldSectionTitle } from 'components/layouts/Scaffold'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
 import { useVectorBucketsQuery } from 'data/storage/vector-buckets-query'
 import { Bucket as BucketIcon } from 'icons'
-import { Button, Card, cn, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { BASE_PATH } from 'lib/constants'
+import {
+  Badge,
+  Button,
+  Card,
+  cn,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from 'ui'
 import { Admonition } from 'ui-patterns'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { TimestampInfo } from 'ui-patterns/TimestampInfo'
@@ -36,10 +48,7 @@ export const VectorsBuckets = () => {
           bucket.vectorBucketName.toLowerCase().includes(filterString.toLowerCase())
         )
 
-  const handleBucketNavigation = (
-    bucketName: string,
-    event: React.MouseEvent | React.KeyboardEvent
-  ) => {
+  const handleBucketNavigation = (bucketName: string, event: MouseEvent | KeyboardEvent) => {
     const url = `/project/${projectRef}/storage/vectors/buckets/${encodeURIComponent(bucketName)}`
     if (event.metaKey || event.ctrlKey) {
       window.open(url, '_blank')
@@ -50,29 +59,46 @@ export const VectorsBuckets = () => {
 
   return (
     <ScaffoldSection isFullWidth>
-      <Admonition
-        type="note"
-        layout="horizontal"
-        className="-mt-4 mb-8 [&>div]:!translate-y-0 [&>svg]:!translate-y-1"
-        title="Private alpha"
-        actions={
-          <Button asChild type="default" icon={<ExternalLink />}>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
+      <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
+        <div className="absolute -inset-16 z-0 opacity-50">
+          <img
+            src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}
+            alt="Supabase Grafana"
+            className="w-full h-full object-cover object-right hidden dark:block"
+          />
+          <img
+            src={`${BASE_PATH}/img/reports/bg-grafana-light.svg`}
+            alt="Supabase Grafana"
+            className="w-full h-full object-cover object-right dark:hidden"
+          />
+          <div className="absolute inset-0 bg-gradient-to-r from-background-alternative to-transparent" />
+        </div>
+
+        <div className="relative z-10 flex flex-col md:flex-row md:items-center gap-y-2 md:gap-x-8 justify-between px-2 py-1">
+          <div className="flex flex-col gap-y-0.5">
+            <div className="flex flex-col gap-y-2 items-start">
+              <Badge variant="success" className="-ml-0.5 uppercase">
+                New
+              </Badge>
+              <p className="text-sm font-medium">Introducing vector buckets</p>
+            </div>
+            <p className="text-sm text-foreground-lighter text-balance">
+              Vector buckets are now in private alpha. Expect rapid changes, limited features, and
+              possible breaking updates. Please share feedback as we refine the experience and
+              expand access.
+            </p>
+          </div>
+          <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />} className="mt-2">
+            <Link
               // [Joshen] To update with Vector specific GH discussion
               href="https://github.com/orgs/supabase/discussions/40116"
+              target="_blank"
+              rel="noopener noreferrer"
             >
               Share feedback
-            </a>
+            </Link>
           </Button>
-        }
-      >
-        <p className="!leading-normal !mb-0 text-balance">
-          Vector buckets are now in private alpha. Expect rapid changes, limited features, and
-          possible breaking updates. Please share feedback as we refine the experience and expand
-          access.
-        </p>
+        </div>
       </Admonition>
 
       {!isLoadingBuckets && bucketsList.length === 0 ? (
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx b/apps/studio/components/ui/ProductMenu/ProductMenuItem.tsx
@@ -38,7 +38,7 @@ const ProductMenuItem = ({
         >
           <span className="truncate flex-1">{name}</span>
           {label !== undefined && (
-            <Badge variant="warning" className="py-0 px-1.5 uppercase">
+            <Badge variant="warning" size="tiny">
               {label}
             </Badge>
           )}
diff --git a/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/analytics/buckets/[bucketId].tsx
@@ -6,6 +6,7 @@ import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
 import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import { DocsButton } from 'components/ui/DocsButton'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { Bucket as BucketIcon } from 'icons'
 import type { NextPageWithLayout } from 'types'
 
 const AnalyticsBucketPage: NextPageWithLayout = () => {
@@ -16,11 +17,19 @@ const AnalyticsBucketPage: NextPageWithLayout = () => {
   return (
     <PageLayout
       title={bucketId}
+      icon={
+        <div className="shrink-0 w-10 h-10 relative bg-surface-100 border rounded-md flex items-center justify-center">
+          <BucketIcon size={20} className="text-foreground-light" />
+        </div>
+      }
       breadcrumbs={[
         {
           label: 'Analytics',
           href: `/project/${project?.ref}/storage/analytics`,
         },
+        {
+          label: 'Buckets',
+        },
       ]}
       secondaryActions={config?.docsUrl ? [<DocsButton key="docs" href={config.docsUrl} />] : []}
     >
diff --git a/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/files/buckets/[bucketId].tsx
@@ -15,6 +15,7 @@ import StorageLayout from 'components/layouts/StorageLayout/StorageLayout'
 import { Bucket } from 'data/storage/buckets-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useStoragePolicyCounts } from 'hooks/storage/useStoragePolicyCounts'
+import { Bucket as BucketIcon } from 'icons'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import type { NextPageWithLayout } from 'types'
 import {
@@ -58,6 +59,11 @@ const BucketPage: NextPageWithLayout = () => {
       <PageLayout
         size="full"
         isCompact
+        icon={
+          <div className="shrink-0 w-10 h-10 relative bg-surface-100 border rounded-md flex items-center justify-center">
+            <BucketIcon size={20} className="text-foreground-light" />
+          </div>
+        }
         className="[&>div:first-child]:!border-b-0" // Override the border-b from ScaffoldContainer
         title={
           <div className="flex items-center gap-2 min-w-0 flex-1">
@@ -74,6 +80,9 @@ const BucketPage: NextPageWithLayout = () => {
             label: 'Files',
             href: `/project/${ref}/storage/files`,
           },
+          {
+            label: 'Buckets',
+          },
         ]}
         primaryActions={
           <>
diff --git a/apps/studio/pages/project/[ref]/storage/vectors/buckets/[bucketId].tsx b/apps/studio/pages/project/[ref]/storage/vectors/buckets/[bucketId].tsx
diff --git a/packages/ui/src/components/shadcn/ui/badge.tsx b/packages/ui/src/components/shadcn/ui/badge.tsx

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,6 @@ export const SimpleConfigurationDetails = ({ bucketName }: { bucketName?: string`
`37`	`37`	`>`
`38`	`38`	`Learn more`
`39`	`39`	`</InlineLink>`
`40`		`- .`
`41`	`40`	`</ScaffoldSectionDescription>`
`42`	`41`	`</div>`
`43`	`42`	`<CopyEnvButton`
Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ const ProductMenuItem = ({`
`38`	`38`	`>`
`39`	`39`	`<span className="truncate flex-1">{name}</span>`
`40`	`40`	`{label !== undefined && (`
`41`		`- <Badge variant="warning" className="py-0 px-1.5 uppercase">`
	`41`	`+ <Badge variant="warning" size="tiny">`
`42`	`42`	`{label}`
`43`	`43`	`</Badge>`
`44`	`44`	`)}`