dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* OAuth admonition fix

* spend cap alerts

* docs

* payment method

* Minor clean ups

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This commit is contained in:
Danny WhiteandJoshen Lim authored and GitHub committed 2025-11-28 20:46:20 +08:00
1 parent b04e54b38a
commit ba9ceac140
10 files changed
+81 -135
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/design-system/content/docs/components/alert copy.mdx
-65
View File
@@ -1,65 +0,0 @@
---
title: Alert
description: Displays a callout for user attention.
component: true
---
<ComponentPreview name="alert-demo" peekCode wide />
## Installation
<Tabs defaultValue="cli">
<TabsList>
<TabsTrigger value="cli">CLI</TabsTrigger>
<TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">
```bash
npx shadcn-ui@latest add alert
```
</TabsContent>
<TabsContent value="manual">
<Steps>
<Step>Copy and paste the following code into your project.</Step>
<ComponentSource name="alert" />
<Step>Update the import paths to match your project setup.</Step>
</Steps>
</TabsContent>
</Tabs>
## Usage
```tsx
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
```
```tsx
<Alert>
<Terminal className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
</Alert>
```
## Examples
### Default
<ComponentPreview name="alert-demo" peekCode wide />
### Destructive
<ComponentPreview name="alert-destructive" />
apps/design-system/content/docs/fragments/admonition.mdx
+7 -3
View File
@@ -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/registry/default/example/admonition-demo.tsx
+17 -2
View File
@@ -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/studio/components/interfaces/Auth/OAuthApps/OAuthAppsList.tsx
+15 -21
View File
@@ -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/Overview/OverviewLearnMore.tsx
+1 -1
View File
@@ -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/OverviewMetrics.tsx
+5 -4
View File
@@ -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/Billing/Payment/PaymentMethods/PaymentMethods.tsx
+13 -13
View File
@@ -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,14 +94,16 @@ 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',
@@ -108,12 +111,9 @@ const PaymentMethods = () => {
>
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/Organization/BillingSettings/CostControl/SpendCapSidePanel.tsx
+17 -21
View File
@@ -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/ui/AlphaNotice.tsx
+1 -1
View File
@@ -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/pages/project/[ref]/auth/overview.tsx
+5 -4
View File
@@ -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,