From 1fbed215287d70adcd46daecac94cca868b7cde1 Mon Sep 17 00:00:00 2001 From: Gildas Garcia <1122076+djhi@users.noreply.github.com> Date: Tue, 12 May 2026 16:48:06 +0200 Subject: [PATCH] chore: migrate old `` usages to `` (#45797) ## Problem Some pages still use the old `` component ## Solution - [x] Use the new `` - [x] Remove `` ## Screenshots ### Table Editor - Disable RLS modal Before: image After: image ### Organization Billing Before: image After: image ## 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> --- .../CostControl/CostControl.tsx | 42 +++++---- .../Subscription/ExitSurveyModal.tsx | 2 +- .../Subscription/Subscription.tsx | 36 ++++---- .../Settings/Database/SSLConfiguration.tsx | 25 ++--- .../Storage/StorageBucketsError.tsx | 30 +++--- .../TableEditor/RLSDisableModal.tsx | 15 ++- .../components/to-be-cleaned/AlphaPreview.tsx | 11 --- .../[slug]/deploy-button/new-project.tsx | 13 +-- packages/ui/index.tsx | 1 - .../ui/src/components/Alert/Alert.module.css | 63 ------------- .../ui/src/components/Alert/Alert.test.tsx | 92 ------------------- packages/ui/src/components/Alert/Alert.tsx | 84 ----------------- packages/ui/src/components/Alert/index.tsx | 1 - packages/ui/src/lib/theme/defaultTheme.ts | 54 ----------- 14 files changed, 85 insertions(+), 384 deletions(-) delete mode 100644 apps/studio/components/to-be-cleaned/AlphaPreview.tsx delete mode 100644 packages/ui/src/components/Alert/Alert.module.css delete mode 100644 packages/ui/src/components/Alert/Alert.test.tsx delete mode 100644 packages/ui/src/components/Alert/Alert.tsx delete mode 100644 packages/ui/src/components/Alert/index.tsx diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx index 13bf71bbfec..be588279c70 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/CostControl/CostControl.tsx @@ -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 && (
{['team', 'enterprise', 'platform'].includes(currentPlan?.id || '') ? ( - - {currentPlan?.name || ''} plan requires you to have spend cap off at all - times. Your projects will never become unresponsive. Only when your{' '} - - included usage - {' '} - is exceeded will you be charged for any additional usage. - + <> + + {currentPlan?.name || ''} plan requires you to have spend cap off at all + times. Your projects will never become unresponsive. Only when your{' '} + + included usage + {' '} + is exceeded will you be charged for any additional usage. + + } + /> + ) : (

If you need to go beyond the included quota, simply switch off your spend cap diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx index 2c52ed8cc0b..2b8c6a68239 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/ExitSurveyModal.tsx @@ -151,8 +151,8 @@ export const ExitSurveyModal = ({ visible, projects, onClose }: ExitSurveyModalP

{hasProjectsWithComputeDowngrade && ( diff --git a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx index c24380673ed..30817aa61a7 100644 --- a/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx +++ b/apps/studio/components/interfaces/Organization/BillingSettings/Subscription/Subscription.tsx @@ -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 = () => { ) : projectUpdateDisabled ? ( - - We have temporarily disabled project and subscription changes - our - engineers are working on a fix. - + description="We have temporarily disabled project and subscription changes - our + engineers are working on a fix." + /> ) : ( - { > Contact support - , - ]} - > - Please contact us if you'd like to change your plan. - + + } + /> )} diff --git a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx index 3c79ccdba71..1a78a50ab25 100644 --- a/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx +++ b/apps/studio/components/interfaces/Settings/Database/SSLConfiguration.tsx @@ -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 = () => { {isSuccess && !sslEnforcementConfiguration?.appliedSuccessfully && ( - - Please try updating again, or contact{' '} - support if this error - persists - + description={ + <> + Please try updating again, or contact{' '} + support if this error + persists + + } + /> )} diff --git a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx index 0a113519f26..7b27228196c 100644 --- a/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx +++ b/apps/studio/components/interfaces/Storage/StorageBucketsError.tsx @@ -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 (
- +

+ Please try refreshing your browser, or contact support if the issue persists +

+

Error: {(error as any)?.message ?? 'Unknown'}

+ + } + actions={ , - ]} - > -

- Please try refreshing your browser, or contact support if the issue persists -

-

Error: {(error as any)?.message ?? 'Unknown'}

- + + } + />
) diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx index c5c4680fad3..deba5b3c1e0 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/RLSDisableModal.tsx @@ -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 (
- -

Anyone can edit or delete data in this table.

- +
  • diff --git a/apps/studio/components/to-be-cleaned/AlphaPreview.tsx b/apps/studio/components/to-be-cleaned/AlphaPreview.tsx deleted file mode 100644 index 51f47dc1604..00000000000 --- a/apps/studio/components/to-be-cleaned/AlphaPreview.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Alert } from 'ui' - -const AlphaPreview = () => { - return ( - - This is not suitable for production - - ) -} - -export default AlphaPreview diff --git a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx index 1ec16ac058d..f1032a86d13 100644 --- a/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx +++ b/apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx @@ -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 = () => { /> - - - + diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index 40befcc14fe..b0b625d5fd2 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -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' diff --git a/packages/ui/src/components/Alert/Alert.module.css b/packages/ui/src/components/Alert/Alert.module.css deleted file mode 100644 index f42ba7f333e..00000000000 --- a/packages/ui/src/components/Alert/Alert.module.css +++ /dev/null @@ -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; -} */ diff --git a/packages/ui/src/components/Alert/Alert.test.tsx b/packages/ui/src/components/Alert/Alert.test.tsx deleted file mode 100644 index 9def28fde71..00000000000 --- a/packages/ui/src/components/Alert/Alert.test.tsx +++ /dev/null @@ -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(Description) - - 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( - - Description - - ) - const alert = container.querySelector('div') - - expect(alert?.className).toStrictEqual(expect.stringContaining(className)) - }) - - it('should close alert when close button clicked', () => { - render( - - Description - - ) - - 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( - - Description - - ) - - expect(container.querySelector('svg')).toBeInTheDocument() - }) - }) - - describe("when variant is 'neutral'", () => { - it('should not render an icon', () => { - const { container } = render( - - Description - - ) - - expect(container.querySelector('svg')).toBeNull() - }) - }) - }) - - describe('when withIcon is false', () => { - it('should not render an icon', () => { - const { container } = render( - - Description - - ) - - 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( - - Description - - ) - const alert = container.querySelector('div') - - expect(alert?.className).toStrictEqual(expect.stringContaining(expected)) - }) -}) diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx deleted file mode 100644 index 0d29e9a7bfb..00000000000 --- a/packages/ui/src/components/Alert/Alert.tsx +++ /dev/null @@ -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 = { - danger: , - success: , - warning: , - info: , - 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 && ( -
    - {withIcon ? ( -
    {withIcon && icons[variant]}
    - ) : null} - {icon && icon} -
    -
    -

    - {title} -

    -
    {children}
    -
    - {actions} -
    - {closable && ( - - )} -
    - )} - - ) -} diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx deleted file mode 100644 index 1d5a733b147..00000000000 --- a/packages/ui/src/components/Alert/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './Alert' diff --git a/packages/ui/src/lib/theme/defaultTheme.ts b/packages/ui/src/lib/theme/defaultTheme.ts index 17948b2a865..8b7f12808ec 100644 --- a/packages/ui/src/lib/theme/defaultTheme.ts +++ b/packages/ui/src/lib/theme/defaultTheme.ts @@ -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 */