chore(studio): basic Admonition improvements (supabase#40880)

* OAuth admonition fix

* spend cap alerts

* docs

* payment method

* Minor clean ups

---------

Co-authored-by: Joshen Lim <[email protected]>

Author: dnywh

apps/design-system/content/docs/components/alert copy.mdx

@@ -2,9 +2,6 @@
 title: Admonition
 description: Displays a callout for user attention.
 fragment: true
-links:
-  doc: https://www.radix-ui.com/docs/primitives/components/alert
-  api: https://www.radix-ui.com/docs/primitives/components/alert#api-reference
 ---
 
 <ComponentPreview
@@ -30,6 +27,13 @@ import { Admonition } from 'ui-patterns/admonition'
 
 ## Examples
 
+### With actions
+
+<ComponentPreview
+  name="admonition-demo"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
 ### Warning
 
 <ComponentPreview

apps/design-system/content/docs/fragments/admonition.mdx

@@ -1,11 +1,26 @@
+import Link from 'next/link'
+import { Button } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 
 export default function AdmonitionDemo() {
   return (
     <Admonition
       type="default"
-      title="Is it accessible?"
-      description="Yes. It adheres to the WAI-ARIA design pattern."
+      layout="horizontal"
+      className="mb-12 [&>div]:!translate-y-0"
+      title="OAuth Server is disabled"
+      description="Enable OAuth Server to make your project act as an identity provider for
+            third-party applications."
+      actions={
+        <Button asChild type="default">
+          <Link
+            href={`/`}
+            onClick={(e) => e.preventDefault()} // Just for demo
+          >
+            OAuth Server Settings
+          </Link>
+        </Button>
+      }
     />
   )
 }

apps/design-system/registry/default/example/admonition-demo.tsx

@@ -20,7 +20,6 @@ import {
   Badge,
   Button,
   Card,
-  CardContent,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -33,6 +32,7 @@ import {
   TableHeader,
   TableRow,
 } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { TimestampInfo } from 'ui-patterns/TimestampInfo'
 import { CreateOrUpdateOAuthAppSheet } from './CreateOrUpdateOAuthAppSheet'
@@ -136,34 +136,28 @@ export const OAuthAppsList = () => {
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="flex flex-col gap-y-4">
         {newOAuthApp?.client_secret && (
           <NewOAuthAppBanner oauthApp={newOAuthApp} onClose={() => setNewOAuthApp(undefined)} />
         )}
         {!isOAuthServerEnabled && (
-          <div className="space-y-4">
-            <Card>
-              <CardContent className="flex flex-col md:flex-row gap-4 justify-between md:items-center">
-                <div className="flex flex-col gap-2-4">
-                  <h3 className="">OAuth Server is disabled</h3>
-                  <p className="text-foreground-light text-sm">
-                    Enable the OAuth Server to make your project act as an identity provider for
-                    third-party applications.
-                  </p>
-                </div>
-                <Button asChild>
-                  <Link href={`/project/${projectRef}/auth/oauth-server`}>
-                    Go to OAuth Server Settings
-                  </Link>
-                </Button>
-              </CardContent>
-            </Card>
-          </div>
+          <Admonition
+            type="default"
+            layout="horizontal"
+            className="mb-8 [&>div]:!translate-y-0"
+            title="OAuth Server is disabled"
+            description="Enable OAuth Server to make your project act as an identity provider for third-party applications."
+            actions={
+              <Button asChild type="default">
+                <Link href={`/project/${projectRef}/auth/oauth-server`}>OAuth Server Settings</Link>
+              </Button>
+            }
+          />
         )}
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-2 flex-wrap">
           <div className="flex flex-col lg:flex-row lg:items-center gap-2">
             <Input
-              placeholder="Search oAuth apps"
+              placeholder="Search OAuth apps"
               size="tiny"
               icon={<Search />}
               value={filterString}

apps/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx

@@ -22,7 +22,7 @@ export const OverviewLearnMore = () => {
   const { ref } = useParams()
   const aiSnap = useAiAssistantStateSnapshot()
   const { openSidebar } = useSidebarManagerSnapshot()
-  const { theme, resolvedTheme } = useTheme()
+  const { resolvedTheme } = useTheme()
 
   useEffect(() => {
     setIsMounted(true)

apps/studio/components/interfaces/Auth/Overview/OverviewLearnMore.tsx

@@ -1,13 +1,14 @@
 import { useQuery } from '@tanstack/react-query'
+import dayjs from 'dayjs'
+import { ChevronRight, ExternalLink, HelpCircle, Telescope } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
 import { useParams } from 'common'
 import { getStatusLevel } from 'components/interfaces/UnifiedLogs/UnifiedLogs.utils'
 import AlertError from 'components/ui/AlertError'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { DataTableColumnStatusCode } from 'components/ui/DataTable/DataTableColumn/DataTableColumnStatusCode'
-import dayjs from 'dayjs'
-import { ChevronRight, ExternalLink, HelpCircle, Telescope } from 'lucide-react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import {
   Card,
   CardContent,

apps/studio/components/interfaces/Auth/Overview/OverviewMetrics.tsx

@@ -23,7 +23,8 @@ import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { MANAGED_BY } from 'lib/constants/infrastructure'
 import { getURL } from 'lib/helpers'
-import { Alert, Button } from 'ui'
+import { Button } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 import ChangePaymentMethodModal from './ChangePaymentMethodModal'
 import CreditCard from './CreditCard'
 import DeletePaymentMethodModal from './DeletePaymentMethodModal'
@@ -93,27 +94,26 @@ const PaymentMethods = () => {
               {isSuccess && (
                 <>
                   {subscription?.payment_method_type === 'invoice' && (
-                    <Alert
-                      withIcon
-                      variant="info"
+                    <Admonition
+                      type="note"
+                      layout="horizontal"
+                      className="mb-0"
                       title="Payment is currently by invoice"
-                      actions={[
-                        <Button key="payment-method-support" asChild type="default">
+                      description="You get a monthly invoice and payment link via email. To change your payment
+                      method, please contact us via our support form."
+                      actions={
+                        <Button asChild key="payment-method-support" type="default">
                           <SupportLink
-                            className="ml-3"
                             queryParams={{
                               category: SupportCategories.BILLING,
                               subject: 'Request to change payment method',
                             }}
                           >
                             Contact support
                           </SupportLink>
-                        </Button>,
-                      ]}
-                    >
-                      You get a monthly invoice and payment link via email. To change your payment
-                      method, please contact us via our support form.
-                    </Alert>
+                        </Button>
+                      }
+                    />
                   )}
                   <FormPanel
                     footer={

apps/studio/components/interfaces/Billing/Payment/PaymentMethods/PaymentMethods.tsx

@@ -14,7 +14,8 @@ import { BASE_PATH, DOCS_URL, PRICING_TIER_PRODUCT_IDS } from 'lib/constants'
 import { ChevronRight, ExternalLink } from 'lucide-react'
 import { pricing } from 'shared-data/pricing'
 import { useOrgSettingsPageStateSnapshot } from 'state/organization-settings'
-import { Alert, Button, Collapsible, SidePanel, cn } from 'ui'
+import { Button, Collapsible, SidePanel, cn } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
 
 const SPEND_CAP_OPTIONS: {
   name: string
@@ -183,18 +184,17 @@ const SpendCapSidePanel = () => {
           </Collapsible>
 
           {isFreePlan && (
-            <Alert
-              withIcon
-              variant="info"
+            <Admonition
+              type="note"
+              layout="horizontal"
               title="Toggling of the spend cap is only available on the Pro Plan"
+              description="Upgrade your plan to disable the spend cap"
               actions={
                 <Button type="default" onClick={() => snap.setPanelKey('subscriptionPlan')}>
                   View available plans
                 </Button>
               }
-            >
-              Upgrade your plan to disable the spend cap
-            </Alert>
+            />
           )}
 
           <div className="!mt-8 pb-4">
@@ -239,23 +239,19 @@ const SpendCapSidePanel = () => {
           </div>
 
           {selectedOption === 'on' ? (
-            <Alert
-              withIcon
-              variant="warning"
+            <Admonition
+              type="warning"
               title="Your projects could become unresponsive or enter read only mode"
-            >
-              Exceeding the included quota allowance with spend cap enabled can cause your projects
-              to become unresponsive or enter read only mode.
-            </Alert>
+              description="Exceeding the included quota allowance with spend cap enabled can cause your projects
+              to become unresponsive or enter read only mode."
+            />
           ) : (
-            <Alert
-              withIcon
-              variant="info"
+            <Admonition
+              type="note"
               title="Charges apply for usage beyond included quota allowance"
-            >
-              Your projects will always remain responsive and active, and charges only apply when
-              exceeding the included quota limit.
-            </Alert>
+              description="Your projects will always remain responsive and active, and charges only apply when
+              exceeding the included quota limit."
+            />
           )}
 
           {hasChanges && (

apps/studio/components/interfaces/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx

@@ -12,7 +12,7 @@ interface AlphaNoticeProps {
 
 export const AlphaNotice = ({ entity, feedbackUrl }: AlphaNoticeProps) => {
   return (
-    <Admonition showIcon={false} type="tip" className="relative mb-6 overflow-hidden">
+    <Admonition showIcon={false} type="tip" className="relative mb-8 overflow-hidden">
       <div className="absolute -inset-16 z-0 opacity-50">
         <img
           src={`${BASE_PATH}/img/reports/bg-grafana-dark.svg`}

apps/studio/components/ui/AlphaNotice.tsx

@@ -1,14 +1,15 @@
+import { useRouter } from 'next/router'
+import { useContext, useEffect } from 'react'
+
 import { FeatureFlagContext, useFlag, useParams } from 'common'
 import { OverviewLearnMore } from 'components/interfaces/Auth/Overview/OverviewLearnMore'
 import { OverviewMetrics } from 'components/interfaces/Auth/Overview/OverviewMetrics'
 import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { DocsButton } from 'components/ui/DocsButton'
-import { DOCS_URL } from 'lib/constants'
-import { useRouter } from 'next/router'
-import { useContext, useEffect } from 'react'
-import type { NextPageWithLayout } from 'types'
 import { useAuthOverviewQuery } from 'data/auth/auth-overview-query'
+import { DOCS_URL } from 'lib/constants'
+import { NextPageWithLayout } from 'types'
 import { PageContainer } from 'ui-patterns/PageContainer'
 import {
   PageHeader,