chore(studio): use Admonition and deprecate AlertError (supabase#41095)

dnywh · web-flow · commit 0399beba0e8d · 2025-12-08T12:15:18.000+11:00
* use admonition and deprecate

* spot fix

* remove mb on admonition itself

* smart layout handling based on actions count

* fixes

* remove class

* fixes

* remove mb-0 instances

* remove redundant m-0

* remove single-use component

* use props

* reset leading

* remove redundant clause
diff --git a/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx b/apps/studio/components/interfaces/Account/AccessTokens/NewAccessTokenDialog.tsx
@@ -139,7 +139,7 @@ export const NewAccessTokenDialog = ({
         {tokenScope === 'V0' ? (
           <Admonition
             type="warning"
-            className="rounded-none border-t-0 border-x-0 mb-0"
+            className="rounded-none border-t-0 border-x-0"
             title="The experimental API provides additional endpoints which allows you to manage your organizations and projects."
             description={
               <>
@@ -160,7 +160,7 @@ export const NewAccessTokenDialog = ({
         ) : (
           <Admonition
             type="warning"
-            className="rounded-none border-t-0 border-x-0 mb-0"
+            className="rounded-none border-t-0 border-x-0"
             title="Access tokens can be used to control your whole account"
             description="Be careful when sharing your tokens"
           />
diff --git a/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx b/apps/studio/components/interfaces/Auth/EmailRateLimitsAlert.tsx
diff --git a/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/apps/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx
@@ -30,7 +30,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
 import {
   PageSection,
   PageSectionContent,
@@ -39,7 +39,6 @@ import {
   PageSectionTitle,
 } from 'ui-patterns/PageSection'
 import { TEMPLATES_SCHEMAS } from '../AuthTemplatesValidation'
-import { EmailRateLimitsAlert } from '../EmailRateLimitsAlert'
 import { slugifyTitle } from './EmailTemplates.utils'
 
 const notificationEnabledKeys = TEMPLATES_SCHEMAS.filter(
@@ -142,9 +141,26 @@ export const EmailTemplates = () => {
       {isSuccess && (
         <>
           {builtInSMTP && (
-            <div className="mt-12">
-              <EmailRateLimitsAlert />
-            </div>
+            <Admonition
+              type="warning"
+              title="Set up custom SMTP"
+              description={
+                <p>
+                  You’re using the built-in email service. This service has rate limits and is not
+                  meant to be used for production apps.{' '}
+                  <InlineLink href={`${DOCS_URL}/guides/platform/going-into-prod#auth-rate-limits`}>
+                    Learn more
+                  </InlineLink>{' '}
+                </p>
+              }
+              layout="horizontal"
+              className="mt-12 mb-10"
+              actions={
+                <Button asChild type="default" className="mt-2">
+                  <Link href={`/project/${projectRef}/auth/smtp`}>Set up SMTP</Link>
+                </Button>
+              }
+            />
           )}
           <PageSection className="!pt-0">
             <PageSectionMeta>
diff --git a/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx b/apps/studio/components/interfaces/Auth/Policies/PolicyTableRow/index.tsx
@@ -109,7 +109,7 @@ const PolicyTableRowComponent = ({
         <Admonition
           showIcon={false}
           type="warning"
-          className="mb-0 border-0 border-y rounded-none [&>div]:text-foreground-light h-[50px] py-0 flex items-center"
+          className="border-0 border-y rounded-none [&>div]:text-foreground-light h-[50px] py-0 flex items-center"
         >
           No data will be selectable via Supabase APIs as this schema is not exposed. You may
           configure this in your project's{' '}
diff --git a/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx b/apps/studio/components/interfaces/Auth/Users/UserOverview.tsx
@@ -182,7 +182,7 @@ export const UserOverview = ({ user, onDeleteSuccess }: UserOverviewProps) => {
           <Admonition
             type="warning"
             label={`User banned until ${dayjs(user.banned_until).format(DATE_FORMAT)}`}
-            className="border-r-0 border-l-0 rounded-none -mt-px [&_svg]:ml-0.5 mb-0"
+            className="border-r-0 border-l-0 rounded-none -mt-px [&_svg]:ml-0.5"
           />
         ) : (
           <Separator />
diff --git a/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx b/apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx
@@ -97,7 +97,6 @@ const PaymentMethods = () => {
                     <Admonition
                       type="note"
                       layout="horizontal"
-                      className="mb-0"
                       title="Payment is currently by invoice"
                       description="You get a monthly invoice and payment link via email. To change your payment
                       method, please contact us via our support form."
diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
@@ -529,7 +529,7 @@ export const DatabaseConnectionString = () => {
                     <Admonition
                       type="warning"
                       title="Highly recommended to not use Session Pooler"
-                      className="[&>div]:gap-0 px-8 [&>svg]:left-7 border-0 border-b rounded-none border-border-muted !py-4 mb-0"
+                      className="[&>div]:gap-0 px-8 [&>svg]:left-7 border-0 border-b rounded-none border-border-muted !py-4"
                     >
                       <p className="text-sm text-foreground-lighter !mb-0">
                         If you are using Session Pooler, we recommend switching to Direct
diff --git a/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx b/apps/studio/components/interfaces/Database/Extensions/ExtensionRow.tsx
@@ -203,9 +203,7 @@ export const ExtensionRow = ({ extension }: ExtensionRowProps) => {
             Are you sure you want to turn OFF the "{extension.name}" extension?
           </p>
           {EXTENSION_DISABLE_WARNINGS[extension.name] && (
-            <Admonition type="warning" className="m-0">
-              {EXTENSION_DISABLE_WARNINGS[extension.name]}
-            </Admonition>
+            <Admonition type="warning">{EXTENSION_DISABLE_WARNINGS[extension.name]}</Admonition>
           )}
         </div>
       </ConfirmationModal>
diff --git a/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx b/apps/studio/components/interfaces/Database/Publications/PublicationsTables.tsx
@@ -77,7 +77,7 @@ export const PublicationsTables = () => {
           {!isLoadingPermissions && !canUpdatePublications && (
             <Admonition
               type="note"
-              className="w-[500px] m-0"
+              className="w-[500px]"
               title="You need additional permissions to update database replications"
             />
           )}
diff --git a/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx b/apps/studio/components/interfaces/Database/Replication/DestinationPanel/PublicationSelection.tsx
@@ -71,14 +71,14 @@ export const PublicationSelection = ({
               />
             </FormControl_Shadcn_>
             {isSelectedPublicationMissing ? (
-              <Admonition type="warning" className="mt-2 mb-0">
+              <Admonition type="warning" className="mt-2">
                 <p className="!leading-normal">
                   The publication <strong className="text-foreground">{publicationName}</strong> was
                   not found, it may have been renamed or deleted, please select another one.
                 </p>
               </Admonition>
             ) : hasTablesWithNoPrimaryKeys ? (
-              <Admonition type="warning" className="mt-2 mb-0">
+              <Admonition type="warning" className="mt-2">
                 <p className="!leading-normal">
                   Replication requires every table in the publication to have a primary key to work,
                   which these tables are missing:
diff --git a/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx b/apps/studio/components/interfaces/Database/Replication/EnableReplicationModal.tsx
@@ -51,7 +51,7 @@ export const EnableReplicationModal = () => {
         <DialogSection className="flex flex-col gap-y-2 !p-0">
           <Admonition
             type="warning"
-            className="rounded-none border-0 mb-0"
+            className="rounded-none border-0"
             title="Replication is currently in Alpha"
           >
             <p className="text-sm !leading-normal">
diff --git a/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx b/apps/studio/components/interfaces/DiskManagement/DiskManagementForm.tsx
@@ -397,7 +397,6 @@ export function DiskManagementForm() {
                     {!isReadOnlyMode && usedPercentage >= 90 && isWithinCooldownWindow && (
                       <Admonition
                         type="destructive"
-                        className="mb-0"
                         title="Database size is currently over 90% of disk size"
                         description="Your project will enter read-only mode once you reach 95% of the disk space to prevent your database from exceeding the disk limitations"
                       >
@@ -411,7 +410,6 @@ export function DiskManagementForm() {
                     {isReadOnlyMode && (
                       <Admonition
                         type="destructive"
-                        className="mb-0"
                         title="Project is currently in read-only mode"
                         description="You will need to manually override read-only mode and reduce the database size to below 95% of the disk size"
                       >
diff --git a/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx b/apps/studio/components/interfaces/DiskManagement/ui/SpendCapDisabledSection.tsx
@@ -27,7 +27,7 @@ export function SpendCapDisabledSection() {
           exit={{ opacity: 0, height: 0 }}
           transition={{ duration: 0.2 }}
         >
-          <Admonition type="default" className="mb-0">
+          <Admonition type="default">
             <AlertTitle>Disable spend cap to manage Disk configuration</AlertTitle>
             <AlertDescription>
               To access disk management features, you need to disable your spend cap. These features
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/MembersView.tsx
@@ -140,7 +140,7 @@ const MembersView = ({ searchString }: MembersViewProps) => {
                                 type="note"
                                 title="You are currently assigned with project scoped roles in this organization"
                                 description="All other members within the organization will not be visible to you"
-                                className="m-0 bg-alternative border-0 rounded-none"
+                                className="bg-alternative border-0 rounded-none"
                               />
                             </TableCell>
                           </TableRow>,
diff --git a/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx b/apps/studio/components/interfaces/Organization/TeamSettings/TeamSettings.tsx
@@ -56,7 +56,6 @@ export const TeamSettings = () => {
           {hasProjectScopedRoles && totalCount > threshold && (
             <Admonition
               type="warning"
-              className="mb-0"
               title="This page may not render properly due to the number of projects your account has access to"
               description="We're actively looking into optimizing this page and will make things available as soon as we can!"
             />
diff --git a/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx b/apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx
@@ -73,7 +73,7 @@ export const OrganizationInvite = () => {
             showIcon={false}
             type="default"
             title={`Sign in${isSignUpEnabled ? ' or create an account' : ''} first to view this invitation`}
-            className="mb-0 border-0 rounded-none text-left"
+            className="border-0 rounded-none text-left"
           />
           <div className="p-4 border-muted border-t flex gap-x-3 justify-center">
             <Button asChild type="default">
@@ -96,7 +96,7 @@ export const OrganizationInvite = () => {
             type="default"
             title="Invalid invitation"
             description="This organization invite is no longer valid as it has either been accepted or declined"
-            className="mb-0 border-0 rounded-none text-left"
+            className="border-0 rounded-none text-left"
           />
           <div className="p-4 border-muted border-t">
             <Button type="default" asChild>
diff --git a/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx b/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx
@@ -221,7 +221,7 @@ const MonacoEditor = ({
       {disableEdit && (
         <Admonition
           type="default"
-          className="m-0 py-2 rounded-none border-0 border-b [&>h5]:mb-0.5"
+          className="py-2 rounded-none border-0 border-b [&>h5]:mb-0.5"
           title="This snippet has been shared to the project and is only editable by the owner who created this snippet"
           description='You may duplicate this snippet into a personal copy by right clicking on the snippet and selecting "Duplicate query"'
         />
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/ConnectTablesDialog.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/ConnectTablesDialog.tsx
@@ -448,7 +448,7 @@ const EnableReplicationDialogContent = ({ onClose }: { onClose: () => void }) =>
       <DialogSection className="flex flex-col gap-y-2 !p-0">
         <Admonition
           type="warning"
-          className="rounded-none border-0 mb-0"
+          className="rounded-none border-0"
           title={
             noAccessToReplication
               ? 'Replication is currently unavailable for your project'
diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/AnalyticsBucketDetails/index.tsx
@@ -366,7 +366,7 @@ const ExtensionNotInstalled = ({
   return (
     <>
       <ScaffoldSection isFullWidth>
-        <Admonition type="warning" title="Missing required extension" className="mb-0">
+        <Admonition type="warning" title="Missing required extension">
           <p>
             The Wrappers extension is required in order to query analytics tables.{' '}
             {databaseNeedsUpgrading &&
@@ -417,7 +417,7 @@ const ExtensionNeedsUpgrade = ({
   return (
     <>
       <ScaffoldSection isFullWidth>
-        <Admonition type="warning" title="Outdated extension version" className="mb-0">
+        <Admonition type="warning" title="Outdated extension version">
           <p>
             The {wrapperMeta.label} wrapper requires a minimum extension version of{' '}
             {wrapperMeta.minimumExtensionVersion}. You have version{' '}
@@ -459,7 +459,7 @@ const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
   return (
     <>
       <ScaffoldSection isFullWidth>
-        <Admonition type="warning" title="Missing integration" className="mb-0">
+        <Admonition type="warning" title="Missing integration">
           <p>The Iceberg Wrapper integration is required in order to query analytics tables.</p>
           <Button type="default" loading={isCreatingIcebergWrapper} onClick={onSetupWrapper}>
             Install wrapper
diff --git a/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx b/apps/studio/components/interfaces/Storage/EmptyBucketModal.tsx
@@ -60,7 +60,7 @@ export const EmptyBucketModal = ({ visible, bucket, onClose }: EmptyBucketModalP
         <DialogSectionSeparator />
         <Admonition
           type="destructive"
-          className="rounded-none border-x-0 border-t-0 mb-0"
+          className="rounded-none border-x-0 border-t-0"
           title="This action cannot be undone"
           description="The contents of your bucket cannot be recovered once deleted."
         />
diff --git a/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx b/apps/studio/components/interfaces/Storage/StorageSettings/StorageListV2MigrationCallout.tsx
@@ -120,7 +120,7 @@ const StorageListV2MigrationDialog = () => {
 
         <Admonition
           type="warning"
-          className="mb-0 rounded-none border-x-0 border-t-0"
+          className="rounded-none border-x-0 border-t-0"
           title="Migration required to optimise the database schema for upgrade"
           description="We recommend running the update during periods of lower activity, although minimal to no disruption is expected."
         />
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorTableSheet.tsx
@@ -219,7 +219,7 @@ export const CreateVectorTableSheet = ({ bucketName }: CreateVectorTableSheetPro
         {showIndexCreationNotice && (
           <Admonition
             type="warning"
-            className="mb-0 border-x-0 border-t-0 rounded-none"
+            className="border-x-0 border-t-0 rounded-none"
             title="Vector table creation is currently only supported for projects in us-east-1"
             description={`This is only applicable to projects on local/staging (Project is currently in ${project.region})`}
           />
diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/VectorBucketDetails/VectorBucketCallouts.tsx
@@ -27,7 +27,7 @@ export const ExtensionNotInstalled = ({
 
   return (
     <ScaffoldSection isFullWidth>
-      <Admonition type="warning" title="Missing required extension" className="mb-0">
+      <Admonition type="warning" title="Missing required extension">
         <p>
           The Wrappers extension is required in order to query vector tables.{' '}
           {databaseNeedsUpgrading &&
@@ -71,7 +71,7 @@ export const ExtensionNeedsUpgrade = ({
 
   return (
     <ScaffoldSection isFullWidth>
-      <Admonition type="warning" title="Outdated extension version" className="mb-0">
+      <Admonition type="warning" title="Outdated extension version">
         <p>
           The {wrapperMeta.label} wrapper requires a minimum extension version of{' '}
           {wrapperMeta.minimumExtensionVersion}. You have version{' '}
@@ -125,7 +125,7 @@ export const WrapperMissing = ({ bucketName }: { bucketName?: string }) => {
 
   return (
     <ScaffoldSection isFullWidth>
-      <Admonition type="warning" title="Missing integration" className="mb-0">
+      <Admonition type="warning" title="Missing integration">
         <p>The S3 Vectors Wrapper integration is required in order to query vector tables.</p>
         <Button type="default" loading={isLoading} onClick={onSetupWrapper}>
           Install wrapper
diff --git a/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx b/apps/studio/components/interfaces/Support/CategoryAndSeverityInfo.tsx
@@ -54,7 +54,7 @@ export function CategoryAndSeverityInfo({
       {(severity === 'Urgent' || severity === 'High') && (
         <Admonition
           type="default"
-          className="mb-0 sm:col-span-2"
+          className="sm:col-span-2"
           title="We do our best to respond to everyone as quickly as possible"
           description="Prioritization will be based on production status. We ask that you reserve High and Urgent severity for production-impacting issues only."
         />
diff --git a/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx b/apps/studio/components/interfaces/Support/ProjectAndPlanInfo.tsx
@@ -52,11 +52,7 @@ export function ProjectAndPlanInfo({
       <ProjectRefHighlighted projectRef={projectRef} />
 
       {!hasProjectSelected && (
-        <Admonition
-          type="default"
-          className="mb-0"
-          title="Please note that no project has been selected"
-        />
+        <Admonition type="default" title="Please note that no project has been selected" />
       )}
 
       {showPlanExpectationInfo &&
diff --git a/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx b/apps/studio/components/layouts/ProjectLayout/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx
@@ -188,7 +188,7 @@ export const FeedbackWidget = ({ onClose }: FeedbackWidgetProps) => {
             <Admonition
               type="caution"
               title="This looks like an issue that’s better handled by support"
-              className="rounded-none border-x-0 border-b-0 mb-0"
+              className="rounded-none border-x-0 border-b-0"
             >
               <p className="text-xs text-foreground-light !leading-normal !mb-0">
                 Please{' '}
diff --git a/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx b/apps/studio/components/layouts/ProjectLayout/PausedState/PauseDisabledState.tsx
@@ -121,7 +121,7 @@ export const PauseDisabledState = () => {
       <Admonition
         showIcon={false}
         type="warning"
-        className="mb-0 rounded-none border-0 px-6"
+        className="rounded-none border-0 px-6"
         title="Project can no longer be restored through the dashboard"
       >
         <p className="!leading-normal !mb-3">
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistantHeader.tsx
@@ -103,7 +103,7 @@ export const AIAssistantHeader = ({
                     ? 'Sharing query data in addition to schema can further improve responses. Update AI settings to enable this.'
                     : ''
           }
-          className="border-0 border-b rounded-none bg-background mb-0"
+          className="border-0 border-b rounded-none bg-background"
         >
           {!isHipaaProjectDisallowed && (
             <Button type="default" className="w-fit mt-4" onClick={() => setIsOptInModalOpen(true)}>
diff --git a/apps/studio/components/ui/AlertError.tsx b/apps/studio/components/ui/AlertError.tsx
diff --git a/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx b/apps/studio/components/ui/EdgeFunctionBlock/EdgeFunctionBlock.tsx
diff --git a/apps/studio/components/ui/EditorPanel/EditorPanel.tsx b/apps/studio/components/ui/EditorPanel/EditorPanel.tsx
diff --git a/apps/studio/pages/claim-project.tsx b/apps/studio/pages/claim-project.tsx
diff --git a/packages/ui-patterns/src/admonition.tsx b/packages/ui-patterns/src/admonition.tsx
diff --git a/packages/ui/src/components/shadcn/ui/alert.tsx b/packages/ui/src/components/shadcn/ui/alert.tsx

Original file line number	Diff line number	Diff line change
`@@ -109,7 +109,7 @@ const PolicyTableRowComponent = ({`
`109`	`109`	`<Admonition`
`110`	`110`	`showIcon={false}`
`111`	`111`	`type="warning"`
`112`		`- className="mb-0 border-0 border-y rounded-none [&>div]:text-foreground-light h-[50px] py-0 flex items-center"`
	`112`	`+ className="border-0 border-y rounded-none [&>div]:text-foreground-light h-[50px] py-0 flex items-center"`
`113`	`113`	`>`
`114`	`114`	`No data will be selectable via Supabase APIs as this schema is not exposed. You may`
`115`	`115`	`configure this in your project's{' '}`
Original file line number	Diff line number	Diff line change
`@@ -529,7 +529,7 @@ export const DatabaseConnectionString = () => {`
`529`	`529`	`<Admonition`
`530`	`530`	`type="warning"`
`531`	`531`	`title="Highly recommended to not use Session Pooler"`
`532`		`- className="[&>div]:gap-0 px-8 [&>svg]:left-7 border-0 border-b rounded-none border-border-muted !py-4 mb-0"`
	`532`	`+ className="[&>div]:gap-0 px-8 [&>svg]:left-7 border-0 border-b rounded-none border-border-muted !py-4"`
`533`	`533`	`>`
`534`	`534`	`<p className="text-sm text-foreground-lighter !mb-0">`
`535`	`535`	`If you are using Session Pooler, we recommend switching to Direct`