chore: migrate old <Alert> usages to <Admonition> (#45797)

## Problem Some pages still use the old `<Alert>` component ## Solution - [x] Use the new `<Admonition>` - [x] Remove `<Alert>` ## Screenshots ### Table Editor - Disable RLS modal Before: <img width="582" height="527" alt="image" src="https://github.com/user-attachments/assets/bbc5b874-2569-4cd6-98c0-5edd5ac78e0f" /> After: <img width="543" height="505" alt="image" src="https://github.com/user-attachments/assets/bb1da899-2163-4b26-ba0b-74726e0cb5df" /> ### Organization Billing Before: <img width="1111" height="512" alt="image" src="https://github.com/user-attachments/assets/6fb410fb-9ac0-4fb7-8dde-e304ddee7ece" /> After: <img width="1103" height="531" alt="image" src="https://github.com/user-attachments/assets/6eda6ede-edc6-482f-ab9c-d085402cbd64" />  ## Summary by CodeRabbit * **Refactor** * Replaced Alert UIs with Admonition across billing, settings, storage, integrations, and editor interfaces. * Removed the deprecated AlphaPreview component. * **Chores** * Removed the Alert component from the UI library, including its styles, tests, and theme configuration. [![Review Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45797)  --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
2026-10-05 17:35:10 +03:00 · 2026-05-12 16:48:06 +02:00
1 parent 52237e1ae4
commit 1fbed21528
@@ -4,7 +4,8 @@ import { ExternalLink } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import Image from 'next/image'
 import Link from 'next/link'
-import { Alert, Alert_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui'
+import { Alert_Shadcn_, AlertTitle_Shadcn_, Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'

 import { ProjectUpdateDisabledTooltip } from '../ProjectUpdateDisabledTooltip'
@@ -118,23 +119,28 @@ const CostControl = ({}: CostControlProps) => {
              {isSuccess && !costControlDisabled && (
                <div className="space-y-6">
                  {['team', 'enterprise', 'platform'].includes(currentPlan?.id || '') ? (
-                    <Alert
-                      withIcon
-                      variant="info"
-                      title={`You will be charged for any additional usage on the ${
-                        currentPlan?.name || ''
-                      } plan`}
-                    >
-                      {currentPlan?.name || ''} plan requires you to have spend cap off at all
-                      times. Your projects will never become unresponsive. Only when your{' '}
-                      <Link
-                        href={`/org/${slug}/usage`}
-                        className="text-green-900 transition hover:text-green-1000"
-                      >
-                        included usage
-                      </Link>{' '}
-                      is exceeded will you be charged for any additional usage.
-                    </Alert>
+                    <>
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
+                        title={`You will be charged for any additional usage on the ${
+                          currentPlan?.name || ''
+                        } plan`}
+                        description={
+                          <>
+                            {currentPlan?.name || ''} plan requires you to have spend cap off at all
+                            times. Your projects will never become unresponsive. Only when your{' '}
+                            <Link
+                              href={`/org/${slug}/usage`}
+                              className="text-green-900 transition hover:text-green-1000"
+                            >
+                              included usage
+                            </Link>{' '}
+                            is exceeded will you be charged for any additional usage.
+                          </>
+                        }
+                      />
+                    </>
                  ) : (
                    <p className="text-sm text-foreground-light">
                      If you need to go beyond the included quota, simply switch off your spend cap
@@ -151,8 +151,8 @@ export const ExitSurveyModal = ({ visible, projects, onClose }: ExitSurveyModalP
          </div>
          {hasProjectsWithComputeDowngrade && (
            <Admonition
-              layout="horizontal"
              type="warning"
+              layout="horizontal"
              title={`${projectsWithComputeDowngrade.length} of your projects will be restarted upon clicking confirm,`}
              description={
                <>
@@ -1,8 +1,8 @@
 import { PermissionAction, SupportCategories } from '@supabase/shared-types/out/constants'
 import { useFlag, useParams } from 'common'
 import Link from 'next/link'
-import { Alert, Button } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'

 import { ProjectUpdateDisabledTooltip } from '../ProjectUpdateDisabledTooltip'
@@ -95,22 +95,20 @@ const Subscription = () => {
                        </Button>
                      </ProjectUpdateDisabledTooltip>
                    ) : projectUpdateDisabled ? (
-                      <Alert
-                        className="mt-2"
-                        withIcon
-                        variant="info"
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
                        title={`Unable to update plan from ${planName}`}
-                      >
-                        We have temporarily disabled project and subscription changes - our
-                        engineers are working on a fix.
-                      </Alert>
+                        description="We have temporarily disabled project and subscription changes - our
+                          engineers are working on a fix."
+                      />
                    ) : (
-                      <Alert
-                        withIcon
-                        className="mt-2"
-                        variant="info"
+                      <Admonition
+                        type="default"
+                        layout="horizontal"
                        title={`Unable to update plan from ${planName}`}
-                        actions={[
+                        description="Please contact us if you'd like to change your plan."
+                        actions={
                          <Button asChild key="contact-support" type="default">
                            <SupportLink
                              queryParams={{
@@ -120,11 +118,9 @@ const Subscription = () => {
                            >
                              Contact support
                            </SupportLink>
-                          </Button>,
-                        ]}
-                      >
-                        Please contact us if you'd like to change your plan.
-                      </Alert>
+                          </Button>
+                        }
+                      />
                    )}
                  </div>

@@ -5,7 +5,6 @@ import { Download, Loader2 } from 'lucide-react'
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 import {
-  Alert,
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
@@ -23,14 +22,15 @@ import {
  TooltipContent,
  TooltipTrigger,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
 import {
  PageSection,
  PageSectionContent,
  PageSectionMeta,
  PageSectionSummary,
  PageSectionTitle,
-} from 'ui-patterns'
-import { FormLayout } from 'ui-patterns/form/Layout/FormLayout'
+} from 'ui-patterns/PageSection'

 import { SupportLink } from '@/components/interfaces/Support/SupportLink'
 import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
@@ -186,15 +186,18 @@ export const SSLConfiguration = () => {
              </AlertDialog>
            </FormLayout>
            {isSuccess && !sslEnforcementConfiguration?.appliedSuccessfully && (
-              <Alert
-                withIcon
-                variant="warning"
+              <Admonition
+                type="warning"
+                layout="horizontal"
                title="SSL enforcement was not updated successfully"
-              >
-                Please try updating again, or contact{' '}
-                <SupportLink className={InlineLinkClassName}>support</SupportLink> if this error
-                persists
-              </Alert>
+                description={
+                  <>
+                    Please try updating again, or contact{' '}
+                    <SupportLink className={InlineLinkClassName}>support</SupportLink> if this error
+                    persists
+                  </>
+                }
+              />
            )}
          </CardContent>
          <CardContent>
@@ -1,6 +1,7 @@
 import { SupportCategories } from '@supabase/shared-types/out/constants'
 import { useParams } from 'common'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'

 import { SupportLink } from '../Support/SupportLink'
 import type { ResponseError } from '@/types'
@@ -15,11 +16,19 @@ const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
  return (
    <div className="storage-container flex items-center justify-center grow">
      <div>
-        <Alert
-          withIcon
-          variant="warning"
+        <Admonition
+          type="warning"
+          layout="horizontal"
          title="Failed to fetch buckets"
-          actions={[
+          description={
+            <>
+              <p className="mb-1">
+                Please try refreshing your browser, or contact support if the issue persists
+              </p>
+              <p>Error: {(error as any)?.message ?? 'Unknown'}</p>
+            </>
+          }
+          actions={
            <Button key="contact-support" asChild type="default" className="ml-4">
              <SupportLink
                queryParams={{
@@ -30,14 +39,9 @@ const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
              >
                Contact support
              </SupportLink>
-            </Button>,
-          ]}
-        >
-          <p className="mb-1">
-            Please try refreshing your browser, or contact support if the issue persists
-          </p>
-          <p>Error: {(error as any)?.message ?? 'Unknown'}</p>
-        </Alert>
+            </Button>
+          }
+        />
      </div>
    </div>
  )
@@ -1,5 +1,5 @@
 import { AlertOctagon, Lock, ShieldOff } from 'lucide-react'
-import { Alert } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'

 import { DocsButton } from '@/components/ui/DocsButton'
 import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
@@ -11,14 +11,11 @@ export function RLSDisableModalContent() {
  return (
    <div className="text-sm text-foreground-light grid gap-4">
      <div className="grid gap-1">
-        <Alert
-          variant="warning"
-          className="px-4! py-3!"
-          title="This table will be publicly readable and writable"
-          withIcon
-        >
-          <p>Anyone can edit or delete data in this table.</p>
-        </Alert>
+        <Admonition
+          type="warning"
+          layout="horizontal"
+          description="This table will be publicly readable and writable. Anyone can edit or delete data in this table."
+        />
        <ul className="mt-4 space-y-5">
          <li className="flex gap-3">
            <AlertOctagon size={14} />
@@ -1,11 +0,0 @@
-import { Alert } from 'ui'
-
-const AlphaPreview = () => {
-  return (
-    <Alert title="Alpha preview" withIcon variant="warning">
-      This is not suitable for production
-    </Alert>
-  )
-}
-
-export default AlphaPreview
@@ -3,7 +3,6 @@ import { ChangeEvent, useEffect, useState } from 'react'
 import { AWS_REGIONS } from 'shared-data'
 import { toast } from 'sonner'
 import {
-  Alert,
  Button,
  Checkbox,
  Input,
@@ -13,6 +12,7 @@ import {
  SelectTrigger_Shadcn_,
  SelectValue_Shadcn_,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

 import { isVercelUrl } from '@/components/interfaces/Integrations/Vercel/VercelIntegration.utils'
@@ -53,11 +53,12 @@ const VercelIntegration: NextPageWithLayout = () => {
            />
          </header>
          <CreateProject />
-          <Alert withIcon variant="info" title="You can uninstall this Integration at any time.">
-            <Markdown
-              content={`You can remove this integration at any time via Vercel or the Supabase dashboard.`}
-            />
-          </Alert>
+          <Admonition
+            type="default"
+            layout="horizontal"
+            title="You can uninstall this Integration at any time."
+            description="You can remove this integration at any time via Vercel or the Supabase dashboard"
+          />
        </ScaffoldColumn>
      </ScaffoldContainer>
    </>
@@ -6,7 +6,6 @@ export * from './src/components/Icon/IconBackground'
 // DISPLAYS

 export * from './src/components/Tabs'
-export * from './src/components/Alert'
 export * from './src/components/Accordion'
 export * from './src/components/Collapsible'

@@ -1,63 +0,0 @@
-/* .sbui-alert-container {
-  @apply rounded-md p-4;
-}
-
-.sbui-alert-container--danger {
-  @apply bg-red-600/10 text-red-600;
-}
-
-.sbui-alert-container--warning {
-  @apply bg-yellow-600/10 text-yellow-600;
-}
-
-.sbui-alert-container--info {
-  @apply bg-blue-600/10 text-blue-600;
-}
-
-.sbui-alert-container--success {
-  @apply bg-green-600/10 text-green-600;
-} */
-
-/* .sbui-alert-title {
-  @apply m-0 text-sm font-medium;
-}
-
-.sbui-alert-description {
-  @apply mt-2 text-sm;
-}
-
-.sbui-alert-description--danger {
-  @apply text-red-500;
-}
-
-.sbui-alert-description--warning {
-  @apply text-yellow-500;
-}
-
-.sbui-alert-description--info {
-  @apply text-blue-500;
-}
-
-.sbui-alert-description--success {
-  @apply text-green-500;
-}
-
-.sbui-close-button {
-  @apply cursor-pointer inline-flex transition ease-in-out duration-200 bg-transparent border-transparent rounded-md p-1.5 focus:outline-hidden;
-}
-
-.sbui-close-button--success {
-  @apply text-green-500 hover:bg-green-600 hover:bg-green-600/10;
-}
-
-.sbui-close-button--danger {
-  @apply text-red-500 hover:bg-red-600 hover:bg-red-600/10;
-}
-
-.sbui-close-button--warning {
-  @apply text-yellow-500 hover:bg-yellow-600 hover:bg-yellow-600/10;
-}
-
-.sbui-close-button--info {
-  @apply text-blue-500 hover:bg-blue-600 hover:bg-blue-600/10;
-} */
@@ -1,92 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import defaultTheme from '../../lib/theme/defaultTheme'
-import { Alert, AlertVariant } from './Alert'
-
-const VARIANTS: AlertVariant[] = ['success', 'danger', 'warning', 'info', 'neutral']
-
-describe('#Alert', () => {
-  it('should render title and description', () => {
-    render(<Alert title="Required Title">Description</Alert>)
-
-    expect(screen.queryByText('Required Title')).toBeInTheDocument()
-    expect(screen.queryByText('Description')).toBeInTheDocument()
-  })
-
-  it('should add custom classes to container div', () => {
-    const className = 'custom classes'
-
-    const { container } = render(
-      <Alert title="Required Title" className={className}>
-        Description
-      </Alert>
-    )
-    const alert = container.querySelector('div')
-
-    expect(alert?.className).toStrictEqual(expect.stringContaining(className))
-  })
-
-  it('should close alert when close button clicked', () => {
-    render(
-      <Alert title="Required Title" closable>
-        Description
-      </Alert>
-    )
-
-    const closeButton = screen.getByRole('button')
-    fireEvent.click(closeButton)
-
-    expect(screen.queryByText('Description')).not.toBeInTheDocument()
-  })
-
-  describe('when withIcon is true', () => {
-    describe("when variant is not 'neutral'", () => {
-      it('should render an icon', () => {
-        const { container } = render(
-          <Alert title="Required Title" withIcon={true} variant="danger">
-            Description
-          </Alert>
-        )
-
-        expect(container.querySelector('svg')).toBeInTheDocument()
-      })
-    })
-
-    describe("when variant is 'neutral'", () => {
-      it('should not render an icon', () => {
-        const { container } = render(
-          <Alert title="Required Title" withIcon={true} variant="neutral">
-            Description
-          </Alert>
-        )
-
-        expect(container.querySelector('svg')).toBeNull()
-      })
-    })
-  })
-
-  describe('when withIcon is false', () => {
-    it('should not render an icon', () => {
-      const { container } = render(
-        <Alert title="Required Title" withIcon={false} variant="danger">
-          Description
-        </Alert>
-      )
-
-      expect(container.querySelector('svg')).toBeNull()
-    })
-  })
-
-  it.each(VARIANTS)('should have class %p from theme', (variant) => {
-    const expected = defaultTheme.alert.variant[variant].base
-    const { container } = render(
-      <Alert title="Required Title" variant={variant}>
-        Description
-      </Alert>
-    )
-    const alert = container.querySelector('div')
-
-    expect(alert?.className).toStrictEqual(expect.stringContaining(expected))
-  })
-})
@@ -1,84 +0,0 @@
-'use client'
-
-import { AlertOctagon, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
-import React, { useState } from 'react'
-
-import styleHandler from '../../lib/theme/styleHandler'
-
-export interface AlertProps {
-  variant?: AlertVariant
-  className?: string
-  title: string | React.ReactNode
-  withIcon?: boolean
-  closable?: boolean
-  children?: React.ReactNode
-  icon?: React.ReactNode
-  actions?: React.ReactNode
-}
-
-export type AlertVariant = 'success' | 'danger' | 'warning' | 'info' | 'neutral'
-
-const icons: Record<AlertVariant, React.ReactElement> = {
-  danger: <AlertOctagon strokeWidth={1.5} size={18} />,
-  success: <CheckCircle strokeWidth={1.5} size={18} />,
-  warning: <AlertTriangle strokeWidth={1.5} size={18} />,
-  info: <Info strokeWidth={1.5} size={18} />,
-  neutral: <></>,
-}
-
-/**
- * @deprecated Use `import { Alert_Shadcn_ } from "ui"` instead. For studio use `Admonition`
- */
-export function Alert({
-  variant = 'neutral',
-  className,
-  title,
-  withIcon,
-  closable,
-  children,
-  icon,
-  actions,
-}: AlertProps) {
-  let __styles = styleHandler('alert')
-
-  const [visible, setVisible] = useState(true)
-
-  let containerClasses = [__styles.base]
-  containerClasses.push(__styles.variant[variant].base)
-
-  if (className) containerClasses.push(className)
-
-  let descriptionClasses = [__styles.description, __styles.variant[variant].description]
-  let closeButtonClasses = [__styles.close]
-
-  return (
-    <>
-      {visible && (
-        <div className={containerClasses.join(' ')}>
-          {withIcon ? (
-            <div className={__styles.variant[variant].icon}>{withIcon && icons[variant]}</div>
-          ) : null}
-          {icon && icon}
-          <div className="flex flex-1 items-center justify-between">
-            <div>
-              <h3 className={[__styles.variant[variant].header, __styles.header].join(' ')}>
-                {title}
-              </h3>
-              <div className={descriptionClasses.join(' ')}>{children}</div>
-            </div>
-            {actions}
-          </div>
-          {closable && (
-            <button
-              aria-label="Close alert"
-              onClick={() => setVisible(false)}
-              className={closeButtonClasses.join(' ')}
-            >
-              <X strokeWidth={2} size={16} />
-            </button>
-          )}
-        </div>
-      )}
-    </>
-  )
-}
@@ -1 +0,0 @@
-export * from './Alert'
@@ -206,60 +206,6 @@ export default {
    },
  },

-  /*
-   * Alert
-   *
-   */
-
-  alert: {
-    base: `
-      relative rounded-md border py-4 px-6
-      flex space-x-4 items-start
-    `,
-    header: 'block text-sm font-normal mb-1',
-    description: `text-xs`,
-    variant: {
-      danger: {
-        base: `bg-red-200 text-red-1200 border-red-700`,
-        icon: `text-red-900`,
-        header: `text-red-1200`,
-        description: `text-red-1100`,
-      },
-      warning: {
-        base: `bg-amber-200 border-amber-700`,
-        icon: `text-amber-900`,
-        header: `text-amber-1200`,
-        description: `text-amber-1100`,
-      },
-      info: {
-        base: `bg-alternative border`,
-        icon: `text-foreground-lighter`,
-        header: `text-foreground`,
-        description: `text-foreground-light`,
-      },
-      success: {
-        base: `bg-brand-300 border-brand-400`,
-        icon: `text-brand`,
-        header: `text-brand-600`,
-        description: `text-brand-600`,
-      },
-      neutral: {
-        base: `bg-surface-100 border-default`,
-        icon: `text-foreground-muted`,
-        header: `text-foreground`,
-        description: `text-foreground-light`,
-      },
-    },
-    close: `
-      absolute
-      right-6 top-4
-      p-0 m-0
-      text-foreground-muted
-      cursor-pointer transition ease-in-out
-      bg-transparent border-transparent focus:outline-hidden
-      opacity-50 hover:opacity-100`,
-  },
-
  /*
   * Card
   */