mirror of
https://github.com/supabase/supabase.git
synced 2026-05-06 08:56:46 -04:00
chore(studio): improve inline code styling (#40724)
* sweep language * update class docs * additional * basic docs * sweep relevant instances * replace text-code * additional in sweep * Tiny fix * prettier --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This commit is contained in:
Danny White
@@ -25,6 +25,11 @@ export const docsConfig: DocsConfig = {
|
||||
href: '/docs/color-usage',
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
href: '/docs/typography',
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
title: 'Theming',
|
||||
href: '/docs/theming',
|
||||
@@ -36,9 +41,9 @@ export const docsConfig: DocsConfig = {
|
||||
items: [],
|
||||
},
|
||||
{
|
||||
items: [],
|
||||
href: '/docs/ui-patterns/accessibility',
|
||||
title: 'Accessibility',
|
||||
href: '/docs/accessibility',
|
||||
items: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Typography
|
||||
description: An overview of all available typography CSS variables.
|
||||
---
|
||||
|
||||
Some reusable patterns work better as CSS variables, or “shorthands”, than as components. Typography is one of these cases, since its usage and context vary widely.
|
||||
|
||||
The shorthands below are composed of core [Tailwind utility classes](../docs/tailwind-classes). You can view the full list of shorthands in [`typography.scss`](https://github.com/supabase/supabase/blob/master/apps/studio/styles/typography.scss).
|
||||
|
||||
## Shorthands
|
||||
|
||||
| Value | Usage |
|
||||
| ------------------ | ---------------------------------------------------------------------------- |
|
||||
| `text-code-inline` | Apply to a `code` element for inline code or similar custom inline content |
|
||||
| `text-brand-link` | Supabase green text that meets contrast requirements in light and dark modes |
|
||||
@@ -84,7 +84,7 @@ const InvalidSyntaxError = ({ error }: { error?: any }) => {
|
||||
Verify that your filter values are correct before applying the filters again.
|
||||
</p>
|
||||
<p className="text-sm text-foreground-lighter prose max-w-full !mb-4">
|
||||
Error: <code className="text-xs">{error.message}</code>
|
||||
Error: <code className="text-code-inline">{error.message}</code>
|
||||
</p>
|
||||
|
||||
<Button type="default" onClick={() => onApplyFilters([])}>
|
||||
@@ -117,7 +117,7 @@ const InvalidOrderingOperatorError = ({ error }: { error: any }) => {
|
||||
again.
|
||||
</p>
|
||||
<p className="text-sm text-foreground-lighter prose max-w-full !mb-4">
|
||||
Error: <code className="text-xs">{error.message}</code>
|
||||
Error: <code className="text-code-inline">{error.message}</code>
|
||||
</p>
|
||||
|
||||
<Button type="default" onClick={() => onApplySorts([])}>
|
||||
|
||||
@@ -48,7 +48,7 @@ export const EnableRuleModal = ({ lint, rule }: EnableRuleModalProps) => {
|
||||
</DialogTrigger>
|
||||
<DialogContent size="small">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Confirm to enable rule</DialogTitle>
|
||||
<DialogTitle>Enable rule</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogSectionSeparator />
|
||||
<DialogSection>
|
||||
|
||||
@@ -27,7 +27,7 @@ export const CLSPreview = () => {
|
||||
<WarningIcon />
|
||||
<AlertTitle_Shadcn_>
|
||||
Changes to column privileges will not be reflected in migrations when running{' '}
|
||||
<code className="text-xs">supabase db diff</code>.
|
||||
<code className="text-code-inline">supabase db diff</code>.
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
Column privileges are not supported in the current version of the Supabase CLI.
|
||||
|
||||
@@ -128,9 +128,7 @@ export const AuditLogsForm = () => {
|
||||
rel="noopener noreferrer"
|
||||
href={`/project/${projectRef}/editor/${auditLogTable?.id}`}
|
||||
>
|
||||
<code className="text-xs bg-surface-200 px-1 py-0.5 rounded">
|
||||
{AUDIT_LOG_ENTRIES_TABLE}
|
||||
</code>
|
||||
<code className="text-code-inline">{AUDIT_LOG_ENTRIES_TABLE}</code>
|
||||
</InlineLink>{' '}
|
||||
table.
|
||||
<br />
|
||||
|
||||
@@ -247,14 +247,15 @@ export const BasicAuthSettingsForm = () => {
|
||||
<WarningIcon />
|
||||
<div>
|
||||
<AlertTitle_Shadcn_>
|
||||
Anonymous users will use the <code className="text-xs">authenticated</code>{' '}
|
||||
role when signing in
|
||||
Anonymous users will use the{' '}
|
||||
<code className="text-code-inline">authenticated</code> role when signing in
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_ className="flex flex-col gap-y-3">
|
||||
<p>
|
||||
As a result, anonymous users will be subjected to RLS policies that apply
|
||||
to the <code className="text-xs">public</code> and{' '}
|
||||
<code className="text-xs">authenticated</code> roles. We strongly advise{' '}
|
||||
to the <code className="text-code-inline">public</code> and{' '}
|
||||
<code className="text-code-inline">authenticated</code> roles. We strongly
|
||||
advise{' '}
|
||||
<Link
|
||||
href={`/project/${projectRef}/auth/policies`}
|
||||
className="text-foreground underline"
|
||||
|
||||
+4
-4
@@ -136,7 +136,7 @@ export const PolicyDetailsV2 = ({
|
||||
<FormLabel_Shadcn_ className="flex items-center gap-x-4">
|
||||
<p className="text-foreground-light text-sm">Table</p>
|
||||
<p className="text-foreground-light text-sm">
|
||||
<code className="text-xs">on</code> clause
|
||||
<code className="text-code-inline">on</code> clause
|
||||
</p>
|
||||
</FormLabel_Shadcn_>
|
||||
{authContext === 'database' && (
|
||||
@@ -225,7 +225,7 @@ export const PolicyDetailsV2 = ({
|
||||
<FormLabel_Shadcn_ className="flex items-center gap-x-4">
|
||||
<p className="text-foreground-light text-sm">Policy Behavior</p>
|
||||
<p className="text-foreground-light text-sm">
|
||||
<code className="text-xs">as</code> clause
|
||||
<code className="text-code-inline">as</code> clause
|
||||
</p>
|
||||
</FormLabel_Shadcn_>
|
||||
<FormControl_Shadcn_>
|
||||
@@ -267,7 +267,7 @@ export const PolicyDetailsV2 = ({
|
||||
<FormLabel_Shadcn_ className="flex items-center gap-x-4">
|
||||
<p className="text-foreground-light text-sm">Policy Command</p>
|
||||
<p className="text-foreground-light text-sm">
|
||||
<code className="text-xs">for</code> clause
|
||||
<code className="text-code-inline">for</code> clause
|
||||
</p>
|
||||
</FormLabel_Shadcn_>
|
||||
<FormControl_Shadcn_>
|
||||
@@ -308,7 +308,7 @@ export const PolicyDetailsV2 = ({
|
||||
<FormLabel_Shadcn_ className="flex items-center gap-x-4">
|
||||
<p className="text-foreground-light text-sm">Target Roles</p>
|
||||
<p className="text-foreground-light text-sm">
|
||||
<code className="text-xs">to</code> clause
|
||||
<code className="text-code-inline">to</code> clause
|
||||
</p>
|
||||
</FormLabel_Shadcn_>
|
||||
<FormControl_Shadcn_>
|
||||
|
||||
@@ -564,7 +564,7 @@ export const CreateBranchModal = () => {
|
||||
<p className="text-sm text-foreground-light">
|
||||
{withData ? (
|
||||
<>
|
||||
<code className="text-xs font-mono">{branchComputeSize.label}</code> compute
|
||||
<code className="text-code-inline">{branchComputeSize.label}</code> compute
|
||||
size is automatically selected to match your production branch. You may
|
||||
downgrade after creation or pause the branch when not in use to save cost.
|
||||
</>
|
||||
|
||||
@@ -125,11 +125,11 @@ export const UpdateVersionModal = ({
|
||||
<div className="flex flex-col gap-y-2 mt-2 pb-2">
|
||||
<div className="text-sm text-foreground prose max-w-full">
|
||||
<p className="text-foreground-light mb-1">Current version:</p>{' '}
|
||||
<code className="text-xs">{currentVersionName ?? 'Unknown'}</code>
|
||||
<code className="text-code-inline">{currentVersionName ?? 'Unknown'}</code>
|
||||
</div>
|
||||
<div className="text-sm text-foreground prose max-w-full">
|
||||
<p className="text-foreground-light mb-1">New version:</p>{' '}
|
||||
<code className="text-xs">{newVersionName ?? 'Unknown'}</code>
|
||||
<code className="text-code-inline">{newVersionName ?? 'Unknown'}</code>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent_Shadcn_>
|
||||
|
||||
@@ -124,8 +124,8 @@ const EnableExtensionModal = ({ visible, extension, onCancel }: EnableExtensionM
|
||||
size="small"
|
||||
header={
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h5 className="text-foreground">Confirm to enable</h5>
|
||||
<code className="text-xs">{extension.name}</code>
|
||||
<h5 className="text-foreground">Enable</h5>
|
||||
<code className="text-code-inline">{extension.name}</code>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
|
||||
@@ -96,7 +96,7 @@ export const HookList = ({
|
||||
</Table.td>
|
||||
<Table.td className="hidden xl:table-cell">
|
||||
<p className="truncate" title={url}>
|
||||
<code className="font-mono text-xs">{method}</code>: {url}
|
||||
<code className="text-code-inline">{method}</code>: {url}
|
||||
</p>
|
||||
</Table.td>
|
||||
<Table.td className="text-right">
|
||||
|
||||
@@ -84,8 +84,8 @@ export const ProtectedSchemaWarning = ({
|
||||
</p>
|
||||
) : reason === 'fdw' && fdwType === 's3_vectors' ? (
|
||||
<p>
|
||||
The <code className="text-xs">{schema}</code> schema is used by Supabase to connect to
|
||||
vector buckets and is read-only through the dashboard.
|
||||
The <code className="text-code-inline">{schema}</code> schema is used by Supabase to
|
||||
connect to vector buckets and is read-only through the dashboard.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
|
||||
@@ -152,10 +152,10 @@ export const ColumnList = ({
|
||||
)}
|
||||
</Table.td>
|
||||
<Table.td>
|
||||
<code className="text-xs">{x.data_type}</code>
|
||||
<code className="text-code-inline">{x.data_type}</code>
|
||||
</Table.td>
|
||||
<Table.td className="font-mono text-xs">
|
||||
<code className="text-xs">{x.format}</code>
|
||||
<code className="text-code-inline">{x.format}</code>
|
||||
</Table.td>
|
||||
<Table.td className="font-mono text-xs">
|
||||
{x.is_nullable ? (
|
||||
|
||||
@@ -427,7 +427,11 @@ export const TableList = ({
|
||||
{x.rows !== undefined ? x.rows.toLocaleString() : '-'}
|
||||
</TableCell>
|
||||
<TableCell className="hidden text-right xl:table-cell">
|
||||
{x.size !== undefined ? <code className="text-xs">{x.size}</code> : '-'}
|
||||
{x.size !== undefined ? (
|
||||
<code className="text-code-inline">{x.size}</code>
|
||||
) : (
|
||||
'-'
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="hidden xl:table-cell text-center">
|
||||
{(realtimePublication?.tables ?? []).find(
|
||||
|
||||
@@ -152,8 +152,8 @@ export const APIKeys = () => {
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm">API Key</p>
|
||||
<div className="flex items-center space-x-1 -ml-1">
|
||||
<code className="text-xs">{anonKey?.name}</code>
|
||||
<code className="text-xs">public</code>
|
||||
<code className="text-code-inline">{anonKey?.name}</code>
|
||||
<code className="text-code-inline">public</code>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
+2
-2
@@ -366,8 +366,8 @@ export const CreateCronJobSheet = ({
|
||||
// @ts-ignore
|
||||
title={
|
||||
<span>
|
||||
Enable <code className="text-xs w-min">pg_net</code> for HTTP requests or
|
||||
Edge Functions
|
||||
Enable <code className="text-code-inline w-min">pg_net</code> for HTTP
|
||||
requests or Edge Functions
|
||||
</span>
|
||||
}
|
||||
description={
|
||||
|
||||
@@ -103,7 +103,7 @@ export const CronJobPage = () => {
|
||||
with command{' '}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<code className="text-xs font-mono bg-surface-200 px-1 py-0.5 rounded max-w-[200px] inline-block truncate align-bottom cursor-pointer">
|
||||
<code className="text-code-inline max-w-[200px] inline-block truncate align-bottom cursor-pointer">
|
||||
{job.command}
|
||||
</code>
|
||||
</TooltipTrigger>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Lock, Paintbrush, PlusCircle, Trash2 } from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
import { parseAsBoolean, useQueryState } from 'nuqs'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { parseAsBoolean, useQueryState } from 'nuqs'
|
||||
|
||||
import { useParams } from 'common'
|
||||
import { DeleteQueue } from 'components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue'
|
||||
@@ -269,7 +269,7 @@ You may opt to manage your queues via any Supabase client libraries or PostgREST
|
||||
|
||||
<ConfirmationModal
|
||||
visible={rlsConfirmModalOpen}
|
||||
title="Confirm to enable Row Level Security"
|
||||
title="Enable Row Level Security"
|
||||
confirmLabel="Enable RLS"
|
||||
confirmLabelLoading="Enabling RLS"
|
||||
loading={isUpdatingTable}
|
||||
|
||||
@@ -24,6 +24,7 @@ import { useTableUpdateMutation } from 'data/tables/table-update-mutation'
|
||||
import { useTablesQuery } from 'data/tables/tables-query'
|
||||
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
||||
import { IS_PLATFORM } from 'lib/constants'
|
||||
import {
|
||||
Button,
|
||||
Form_Shadcn_,
|
||||
@@ -36,7 +37,6 @@ import {
|
||||
import { Admonition } from 'ui-patterns'
|
||||
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
|
||||
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
||||
import { IS_PLATFORM } from 'lib/constants'
|
||||
|
||||
// [Joshen] Not convinced with the UI and layout but getting the functionality out first
|
||||
|
||||
@@ -214,22 +214,24 @@ export const QueuesSettings = () => {
|
||||
<>
|
||||
<p className="max-w-2xl">
|
||||
When enabled, you will be able to use the following functions from the{' '}
|
||||
<code className="text-xs">{QUEUES_SCHEMA}</code> schema to manage your
|
||||
queues via any Supabase client library or PostgREST endpoints:
|
||||
<code className="text-code-inline">{QUEUES_SCHEMA}</code> schema to
|
||||
manage your queues via any Supabase client library or PostgREST
|
||||
endpoints:
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
<code className="text-xs">send</code>,{' '}
|
||||
<code className="text-xs">send_batch</code>,{' '}
|
||||
<code className="text-xs">read</code>,{' '}
|
||||
<code className="text-xs">pop</code>,
|
||||
<code className="text-xs">archive</code>, and{' '}
|
||||
<code className="text-xs">delete</code>
|
||||
<code className="text-code-inline">send</code>,{' '}
|
||||
<code className="text-code-inline">send_batch</code>,{' '}
|
||||
<code className="text-code-inline">read</code>,{' '}
|
||||
<code className="text-code-inline">pop</code>,
|
||||
<code className="text-code-inline">archive</code>, and{' '}
|
||||
<code className="text-code-inline">delete</code>
|
||||
</p>
|
||||
{!IS_PLATFORM ? (
|
||||
<div className="mt-6 max-w-2xl">
|
||||
When running Supabase locally with the CLI or self-hosting using
|
||||
Docker Compose, you also need to update your configuration to expose
|
||||
the <code className="text-xs">{QUEUES_SCHEMA}</code> schema.
|
||||
the <code className="text-code-inline">{QUEUES_SCHEMA}</code>{' '}
|
||||
schema.
|
||||
<br />
|
||||
<TextLink
|
||||
target="_blank"
|
||||
@@ -269,7 +271,7 @@ export const QueuesSettings = () => {
|
||||
{tablesWithoutRLS.map((x) => {
|
||||
return (
|
||||
<li key={x.name}>
|
||||
<code className="text-xs">{x.name.slice(2)}</code>
|
||||
<code className="text-code-inline">{x.name.slice(2)}</code>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
@@ -291,27 +293,28 @@ export const QueuesSettings = () => {
|
||||
<Admonition type="warning" className="mt-2">
|
||||
<p>
|
||||
Queues will be exposed and managed through the{' '}
|
||||
<code className="text-xs">{QUEUES_SCHEMA}</code> schema
|
||||
<code className="text-code-inline">{QUEUES_SCHEMA}</code> schema
|
||||
</p>
|
||||
<p className="text-foreground-light">
|
||||
Database functions will be created in the{' '}
|
||||
<code className="text-xs">{QUEUES_SCHEMA}</code> schema upon enabling.
|
||||
Call these functions via any Supabase client library or PostgREST
|
||||
endpoint to manage your queues. Permissions on individual queues can
|
||||
also be further managed through privileges and row level security (RLS).
|
||||
<code className="text-code-inline">{QUEUES_SCHEMA}</code> schema upon
|
||||
enabling. Call these functions via any Supabase client library or
|
||||
PostgREST endpoint to manage your queues. Permissions on individual
|
||||
queues can also be further managed through privileges and row level
|
||||
security (RLS).
|
||||
</p>
|
||||
</Admonition>
|
||||
)}
|
||||
{formState.dirtyFields.enable && field.value === false && (
|
||||
<Admonition type="warning" className="mt-2">
|
||||
<p>
|
||||
The <code className="text-xs">{QUEUES_SCHEMA}</code> schema will be
|
||||
removed once disabled
|
||||
The <code className="text-code-inline">{QUEUES_SCHEMA}</code> schema
|
||||
will be removed once disabled
|
||||
</p>
|
||||
<p className="text-foreground-light">
|
||||
Ensure that the database functions from the{' '}
|
||||
<code className="text-xs">{QUEUES_SCHEMA}</code> schema are not in use
|
||||
within your client applications before disabling.
|
||||
<code className="text-code-inline">{QUEUES_SCHEMA}</code> schema are not
|
||||
in use within your client applications before disabling.
|
||||
</p>
|
||||
</Admonition>
|
||||
)}
|
||||
@@ -347,7 +350,7 @@ export const QueuesSettings = () => {
|
||||
|
||||
<ConfirmationModal
|
||||
visible={rlsConfirmModalOpen}
|
||||
title="Confirm to enable Row Level Security"
|
||||
title="Enable Row Level Security"
|
||||
confirmLabel="Enable RLS"
|
||||
confirmLabelLoading="Enabling RLS"
|
||||
loading={isUpdatingRls}
|
||||
@@ -361,7 +364,7 @@ export const QueuesSettings = () => {
|
||||
{tablesWithoutRLS.map((x) => {
|
||||
return (
|
||||
<li key={x.id}>
|
||||
<code className="text-xs">{x.name.slice(2)}</code>
|
||||
<code className="text-code-inline">{x.name.slice(2)}</code>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -243,7 +243,7 @@ export const QueueSettings = ({}: QueueSettingsProps) => {
|
||||
{isExposed && (
|
||||
<>
|
||||
These will also determine access to each function available from the{' '}
|
||||
<code className="text-xs">pgmq_public</code> schema.
|
||||
<code className="text-code-inline">pgmq_public</code> schema.
|
||||
</>
|
||||
)}
|
||||
</SheetDescription>
|
||||
|
||||
+1
-1
@@ -206,7 +206,7 @@ export const CreateIcebergWrapperSheet = ({
|
||||
(values?.wrapper_name ?? '').length > 0 ? (
|
||||
<>
|
||||
Your wrapper's server name will be{' '}
|
||||
<code className="text-xs">{values.wrapper_name}_server</code>
|
||||
<code className="text-code-inline">{values.wrapper_name}_server</code>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
|
||||
@@ -220,7 +220,7 @@ export const CreateWrapperSheet = ({
|
||||
(values?.wrapper_name ?? '').length > 0 ? (
|
||||
<>
|
||||
Your wrapper's server name will be{' '}
|
||||
<code className="text-xs">{values.wrapper_name}_server</code>
|
||||
<code className="text-code-inline">{values.wrapper_name}_server</code>
|
||||
</>
|
||||
) : (
|
||||
''
|
||||
|
||||
@@ -215,12 +215,12 @@ export const EditWrapperSheet = ({
|
||||
values.wrapper_name !== initialValues.wrapper_name ? (
|
||||
<>
|
||||
Your wrapper's server name will be updated to{' '}
|
||||
<code className="text-xs">{values.wrapper_name}_server</code>
|
||||
<code className="text-code-inline">{values.wrapper_name}_server</code>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Your wrapper's server name is{' '}
|
||||
<code className="text-xs">{values.wrapper_name}_server</code>
|
||||
<code className="text-code-inline">{values.wrapper_name}_server</code>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -92,8 +92,8 @@ export const WrapperOverviewTab = () => {
|
||||
{wrapperMeta.minimumExtensionVersion}. You have version{' '}
|
||||
{wrappersExtension?.installed_version} installed. Please{' '}
|
||||
{databaseNeedsUpgrading && 'upgrade your database then '}update the extension by
|
||||
disabling and enabling the <code className="text-xs">wrappers</code> extension to
|
||||
create this wrapper.
|
||||
disabling and enabling the <code className="text-code-inline">wrappers</code>{' '}
|
||||
extension to create this wrapper.
|
||||
</p>
|
||||
<p className="text-warning">
|
||||
Warning: Before reinstalling the wrapper extension, you must first remove all
|
||||
|
||||
@@ -116,7 +116,8 @@ export const SecurityOptions = ({
|
||||
// @ts-ignore
|
||||
description={
|
||||
<>
|
||||
Query all tables in the <code className="text-xs">public</code> schema
|
||||
Query all tables in the{' '}
|
||||
<code className="text-code-inline">public</code> schema
|
||||
</>
|
||||
}
|
||||
className="[&>div>div>p]:text-left [&>div>div>p]:text-xs"
|
||||
@@ -132,7 +133,7 @@ export const SecurityOptions = ({
|
||||
description={
|
||||
<>
|
||||
Query allowlisted tables in a dedicated{' '}
|
||||
<code className="text-xs">api</code> schema
|
||||
<code className="text-code-inline">api</code> schema
|
||||
</>
|
||||
}
|
||||
className="[&>div>div>p]:text-left [&>div>div>p]:text-xs"
|
||||
|
||||
@@ -260,8 +260,10 @@ export const RealtimeSettings = () => {
|
||||
<p className="prose max-w-full text-sm">
|
||||
Private mode is {isSettingToPrivate ? 'being ' : ''}
|
||||
enabled, but no RLS policies exists on the{' '}
|
||||
<code className="text-xs">realtime.messages</code> table.
|
||||
No messages will be received by users.
|
||||
<code className="text-code-inline">
|
||||
realtime.messages
|
||||
</code>{' '}
|
||||
table. No messages will be received by users.
|
||||
</p>
|
||||
|
||||
<Button asChild type="default" className="mt-2">
|
||||
|
||||
@@ -51,8 +51,8 @@ export const RunQueryWarningModal = ({
|
||||
<li className="grid pt-2 pb-3 px-4 gap-1">
|
||||
<span className="font-bold">Query uses update without a where clause</span>
|
||||
<span className="text-foreground-lighter">
|
||||
Without a <code className="text-xs">where</code> clause, this could update all rows
|
||||
in the table.
|
||||
Without a <code className="text-code-inline">where</code> clause, this could update
|
||||
all rows in the table.
|
||||
</span>
|
||||
</li>
|
||||
)}
|
||||
|
||||
@@ -105,8 +105,8 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Switch the default API schema</DialogTitle>
|
||||
<DialogDescription>
|
||||
Expose a custom schema instead of the{' '}
|
||||
<code className="text-xs text-foreground">public</code> schema
|
||||
Expose a custom schema instead of the <code className="text-code-inline">public</code>{' '}
|
||||
schema
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -114,10 +114,10 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
|
||||
<DialogSection className="text-sm text-foreground-light">
|
||||
<p>
|
||||
By default, the <code className="text-xs text-foreground">public</code> schema is used
|
||||
to generate API routes. In some cases, it's better to use a custom schema. This is
|
||||
By default, the <code className="text-code-inline">public</code> schema is used to
|
||||
generate API routes. In some cases, it's better to use a custom schema. This is
|
||||
important if you use tools that generate tables in the{' '}
|
||||
<code className="text-xs text-foreground">public</code> schema to{' '}
|
||||
<code className="text-code-inline">public</code> schema to{' '}
|
||||
<span className="text-brand">prevent accidental exposure of data</span>.
|
||||
</p>
|
||||
<DocsButton
|
||||
@@ -132,8 +132,7 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<Collapsible_Shadcn_>
|
||||
<CollapsibleTrigger_Shadcn_ className="py-4 px-5 w-full flex items-center justify-between text-sm">
|
||||
<p>
|
||||
1. Create a custom <code className="text-xs text-foreground">api</code> schema and
|
||||
expose it
|
||||
1. Create a custom <code className="text-code-inline">api</code> schema and expose it
|
||||
</p>
|
||||
{hasAPISchema && isAPISchemaExposed ? (
|
||||
<Check size={16} className="text-brand" />
|
||||
@@ -147,10 +146,10 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<CollapsibleContent_Shadcn_ className="text-sm text-foreground-light flex flex-col gap-y-4">
|
||||
<p className="mx-5">
|
||||
Click the button below to create a new schema named{' '}
|
||||
<code className="text-xs text-foreground">api</code> and grant the{' '}
|
||||
<code className="text-xs text-foreground">anon</code> and{' '}
|
||||
<code className="text-xs text-foreground">authenticated</code> roles usage privileges
|
||||
on this schema. This schema will thereafter also be exposed to the Data API.
|
||||
<code className="text-code-inline">api</code> and grant the{' '}
|
||||
<code className="text-code-inline">anon</code> and{' '}
|
||||
<code className="text-code-inline">authenticated</code> roles usage privileges on this
|
||||
schema. This schema will thereafter also be exposed to the Data API.
|
||||
</p>
|
||||
|
||||
<div className="px-5">
|
||||
@@ -160,8 +159,8 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<div className="flex flex-col gap-y-2">
|
||||
<p>
|
||||
The following query will be run to create the{' '}
|
||||
<code className="text-xs text-foreground">api</code> schema , as well as to
|
||||
grant the necessary privileges to the respective roles
|
||||
<code className="text-code-inline">api</code> schema , as well as to grant the
|
||||
necessary privileges to the respective roles
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="sql"
|
||||
@@ -195,11 +194,11 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
|
||||
<div className="flex flex-col gap-y-4 px-5 pb-4">
|
||||
<p>
|
||||
Under these new settings, the <code className="text-xs text-foreground">anon</code>{' '}
|
||||
and <code className="text-xs text-foreground">authenticated</code> roles can execute
|
||||
functions defined in the <code className="text-xs text-foreground">api</code>{' '}
|
||||
schema, but they have no automatic permissions on any tables. On a table-by-table
|
||||
basis, you can grant them permissions by running the following command:
|
||||
Under these new settings, the <code className="text-code-inline">anon</code> and{' '}
|
||||
<code className="text-code-inline">authenticated</code> roles can execute functions
|
||||
defined in the <code className="text-code-inline">api</code> schema, but they have
|
||||
no automatic permissions on any tables. On a table-by-table basis, you can grant
|
||||
them permissions by running the following command:
|
||||
</p>
|
||||
<CodeBlock
|
||||
language="sql"
|
||||
@@ -216,8 +215,8 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<Collapsible_Shadcn_>
|
||||
<CollapsibleTrigger_Shadcn_ className="py-4 px-5 w-full flex items-center justify-between text-sm">
|
||||
<p>
|
||||
2. Remove the <code className="text-xs text-foreground">public</code> schema from the
|
||||
exposed schemas
|
||||
2. Remove the <code className="text-code-inline">public</code> schema from the exposed
|
||||
schemas
|
||||
</p>
|
||||
{!isPublicSchemaExposed ? (
|
||||
<Check size={16} className="text-brand" />
|
||||
@@ -234,18 +233,18 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
<WarningIcon />
|
||||
<AlertTitle_Shadcn_ className="text-foreground">
|
||||
Ensure that your app is no longer using the{' '}
|
||||
<code className="text-xs text-foreground">public</code> schema
|
||||
<code className="text-code-inline">public</code> schema
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
The <code className="text-xs text-foreground">public</code> schema will not be
|
||||
accessible via the API once its not exposed. You should be using the{' '}
|
||||
<code className="text-xs text-foreground">api</code> schema instead.
|
||||
The <code className="text-code-inline">public</code> schema will not be accessible
|
||||
via the API once its not exposed. You should be using the{' '}
|
||||
<code className="text-code-inline">api</code> schema instead.
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
<p>
|
||||
Click the button below to remove the{' '}
|
||||
<code className="text-xs text-foreground">public</code> schema from both Exposed
|
||||
schemas and Extra search path in your API configuration.
|
||||
<code className="text-code-inline">public</code> schema from both Exposed schemas
|
||||
and Extra search path in your API configuration.
|
||||
</p>
|
||||
<ButtonTooltip
|
||||
type="primary"
|
||||
|
||||
@@ -248,7 +248,7 @@ export const PostgrestConfig = () => {
|
||||
</p>
|
||||
<p>
|
||||
You will see errors from the Postgrest endpoint
|
||||
<code className="text-xs">/rest/v1/</code>.
|
||||
<code className="text-code-inline">/rest/v1/</code>.
|
||||
</p>
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
@@ -316,14 +316,15 @@ export const PostgrestConfig = () => {
|
||||
<>
|
||||
<p className="prose text-sm">
|
||||
You will not be able to query tables and views in the{' '}
|
||||
<code className="text-xs">public</code> schema via supabase-js
|
||||
or HTTP clients.
|
||||
<code className="text-code-inline">public</code> schema via
|
||||
supabase-js or HTTP clients.
|
||||
</p>
|
||||
{isGraphqlExtensionEnabled && (
|
||||
<>
|
||||
<p className="prose text-sm mt-2">
|
||||
Tables in the <code className="text-xs">public</code>{' '}
|
||||
schema are still exposed over our GraphQL endpoints.
|
||||
Tables in the{' '}
|
||||
<code className="text-code-inline">public</code> schema
|
||||
are still exposed over our GraphQL endpoints.
|
||||
</p>
|
||||
<Button asChild type="default" className="mt-2">
|
||||
<Link href={`/project/${projectRef}/database/extensions`}>
|
||||
|
||||
+5
-4
@@ -217,12 +217,13 @@ const AddRestrictionModal = ({
|
||||
{isValidCIDR ? (
|
||||
<Modal.Content className="space-y-1">
|
||||
<p className="text-sm">
|
||||
The address range <code className="text-xs">{normalizedAddress}</code> will be
|
||||
restricted
|
||||
The address range <code className="text-code-inline">{normalizedAddress}</code>{' '}
|
||||
will be restricted
|
||||
</p>
|
||||
<p className="text-sm text-foreground-light">
|
||||
Selected address space: <code className="text-xs">{addressRange.start}</code> to{' '}
|
||||
<code className="text-xs">{addressRange.end}</code>{' '}
|
||||
Selected address space:{' '}
|
||||
<code className="text-code-inline">{addressRange.start}</code> to{' '}
|
||||
<code className="text-code-inline">{addressRange.end}</code>{' '}
|
||||
</p>
|
||||
<p className="text-sm text-foreground-light">
|
||||
Number of addresses: {availableAddresses}
|
||||
|
||||
+2
-2
@@ -68,8 +68,8 @@ const RemoveRestrictionModal = ({
|
||||
>
|
||||
<Modal.Content className="space-y-4">
|
||||
<p className="text-sm text-foreground-light">
|
||||
The IPv4 address <code className="text-xs">{selectedRestriction}</code> will be removed
|
||||
from your list of network restrictions
|
||||
The IPv4 address <code className="text-code-inline">{selectedRestriction}</code> will be
|
||||
removed from your list of network restrictions
|
||||
{isRemovingOnlyRestriction
|
||||
? '.'
|
||||
: ", and no longer have access to your project's database."}
|
||||
|
||||
+2
-1
@@ -78,7 +78,8 @@ const CustomDomainActivate = ({ projectRef, customDomain }: CustomDomainActivate
|
||||
<AlertDescription_Shadcn_>
|
||||
<p className="col-span-12 text-sm lg:col-span-7 leading-6">
|
||||
Your custom domain CNAME record for{' '}
|
||||
<code className="text-xs">{customDomain.hostname}</code> should resolve to{' '}
|
||||
<code className="text-code-inline">{customDomain.hostname}</code> should resolve
|
||||
to{' '}
|
||||
{endpoint ? (
|
||||
<code className="text-xs">{endpoint}</code>
|
||||
) : (
|
||||
|
||||
+2
-2
@@ -140,8 +140,8 @@ const CustomDomainVerify = () => {
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
Please add a CAA record allowing "digicert.com" to issue certificates for{' '}
|
||||
<code className="text-xs">{customDomain?.hostname}</code>. For example:{' '}
|
||||
<code className="text-xs">0 issue "digicert.com"</code>
|
||||
<code className="text-code-inline">{customDomain?.hostname}</code>. For example:{' '}
|
||||
<code className="text-code-inline">0 issue "digicert.com"</code>
|
||||
</AlertDescription_Shadcn_>
|
||||
</Alert_Shadcn_>
|
||||
)}
|
||||
|
||||
+2
-2
@@ -101,13 +101,13 @@ const CustomDomainsConfigureHostname = () => {
|
||||
<p className="col-span-12 text-sm lg:col-span-7 leading-6">
|
||||
Set up a CNAME record for{' '}
|
||||
{values.domain ? (
|
||||
<code className="text-xs">{values.domain}</code>
|
||||
<code className="text-code-inline">{values.domain}</code>
|
||||
) : (
|
||||
'your custom domain'
|
||||
)}{' '}
|
||||
resolving to{' '}
|
||||
{endpoint ? (
|
||||
<code className="text-xs">{endpoint}</code>
|
||||
<code className="text-code-inline">{endpoint}</code>
|
||||
) : (
|
||||
"your project's API URL"
|
||||
)}{' '}
|
||||
|
||||
+1
-1
@@ -508,7 +508,7 @@ export const TableRowComponent = ({ table, schema, namespace }: TableRowComponen
|
||||
variant="warning"
|
||||
visible={showStartReplicationModal}
|
||||
loading={isUpdatingReplication}
|
||||
title="Confirm to enable replication for table"
|
||||
title="Enable replication for table"
|
||||
confirmLabel="Enable replication"
|
||||
onCancel={() => setShowStartReplicationModal(false)}
|
||||
onConfirm={() => onConfirmStartReplication()}
|
||||
|
||||
+3
-4
@@ -2,11 +2,10 @@ import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useState } from 'react'
|
||||
import { parseAsBoolean, useQueryState } from 'nuqs'
|
||||
import { SubmitHandler, useForm } from 'react-hook-form'
|
||||
import { toast } from 'sonner'
|
||||
import z from 'zod'
|
||||
import { parseAsBoolean, useQueryState } from 'nuqs'
|
||||
|
||||
import { useParams } from 'common'
|
||||
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
||||
@@ -262,8 +261,8 @@ export const CreateAnalyticsBucketModal = ({
|
||||
title="Wrappers extension must be updated for Iceberg Wrapper support"
|
||||
>
|
||||
<p className="prose max-w-full text-sm !leading-normal">
|
||||
Update the <code className="text-xs">wrappers</code> extension by upgrading your
|
||||
project from your{' '}
|
||||
Update the <code className="text-code-inline">wrappers</code> extension by
|
||||
upgrading your project from your{' '}
|
||||
<InlineLink href={`/project/${ref}/settings/infrastructure`}>
|
||||
project settings
|
||||
</InlineLink>{' '}
|
||||
|
||||
@@ -563,7 +563,7 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
|
||||
<ConfirmModal
|
||||
danger={table.rls_enabled}
|
||||
visible={rlsConfirmModalOpen}
|
||||
title="Confirm to enable Row Level Security"
|
||||
title="Enable Row Level Security"
|
||||
description="Are you sure you want to enable Row Level Security for this table?"
|
||||
buttonLabel="Enable RLS"
|
||||
buttonLoadingLabel="Updating"
|
||||
|
||||
+4
-5
@@ -277,15 +277,14 @@ const ColumnType = ({
|
||||
<CriticalIcon />
|
||||
<AlertTitle_Shadcn_>
|
||||
{' '}
|
||||
It is recommended to use <code className="text-xs">
|
||||
{recommendation.alternative}
|
||||
</code>{' '}
|
||||
instead
|
||||
It is recommended to use{' '}
|
||||
<code className="text-code-inline">{recommendation.alternative}</code> instead
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
<p>
|
||||
Postgres recommends against using the data type{' '}
|
||||
<code className="text-xs">{value}</code> unless you have a very specific use case.
|
||||
<code className="text-code-inline">{value}</code> unless you have a very specific use
|
||||
case.
|
||||
</p>
|
||||
<div className="flex items-center space-x-2 mt-3">
|
||||
<Button asChild type="default" icon={<ExternalLink />}>
|
||||
|
||||
+16
-14
@@ -15,8 +15,8 @@ import { DocsButton } from 'components/ui/DocsButton'
|
||||
import InformationBox from 'components/ui/InformationBox'
|
||||
import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constants'
|
||||
import { useSchemasQuery } from 'data/database/schemas-query'
|
||||
import { useTablesQuery } from 'data/tables/tables-query'
|
||||
import { useTablesQuery as useTableRetrieveQuery } from 'data/tables/table-retrieve-query'
|
||||
import { useTablesQuery } from 'data/tables/tables-query'
|
||||
import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
|
||||
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
||||
import { DOCS_URL } from 'lib/constants'
|
||||
@@ -306,7 +306,7 @@ export const ForeignKeySelector = ({
|
||||
<div className="flex flex-col gap-y-3">
|
||||
<label className="text-foreground-light text-sm">
|
||||
Select columns from{' '}
|
||||
<code className="text-xs">
|
||||
<code className="text-code-inline">
|
||||
{fk.schema}.{fk.table}
|
||||
</code>{' '}
|
||||
to reference to
|
||||
@@ -421,9 +421,9 @@ export const ForeignKeySelector = ({
|
||||
if (x === undefined) return null
|
||||
return (
|
||||
<li key={`type-error-${idx}`}>
|
||||
<code className="text-xs">{fk.columns[idx]?.source}</code> (
|
||||
{x.sourceType}) and{' '}
|
||||
<code className="text-xs">{fk.columns[idx]?.target}</code>(
|
||||
<code className="text-code-inline">{fk.columns[idx]?.source}</code>{' '}
|
||||
({x.sourceType}) and{' '}
|
||||
<code className="text-code-inline">{fk.columns[idx]?.target}</code>(
|
||||
{x.targetType})
|
||||
</li>
|
||||
)
|
||||
@@ -444,7 +444,9 @@ export const ForeignKeySelector = ({
|
||||
return (
|
||||
<li key={`type-error-${idx}`}>
|
||||
<div className="flex items-center gap-x-1">
|
||||
<code className="text-xs">{fk.columns[idx]?.source}</code>{' '}
|
||||
<code className="text-code-inline">
|
||||
{fk.columns[idx]?.source}
|
||||
</code>{' '}
|
||||
<ArrowRight size={14} /> {x.targetType}
|
||||
</div>
|
||||
</li>
|
||||
@@ -472,18 +474,18 @@ export const ForeignKeySelector = ({
|
||||
</p>
|
||||
<ul className="mt-2 list-disc pl-4 space-y-1">
|
||||
<li>
|
||||
<code className="text-xs">Cascade</code>: if the referencing table
|
||||
represents something that is a component of what is represented by the
|
||||
referenced table and cannot exist independently
|
||||
<code className="text-code-inline">Cascade</code>: if the referencing
|
||||
table represents something that is a component of what is represented by
|
||||
the referenced table and cannot exist independently
|
||||
</li>
|
||||
<li>
|
||||
<code className="text-xs">Restrict</code> or{' '}
|
||||
<code className="text-xs">No action</code>: if the two tables represent
|
||||
independent objects
|
||||
<code className="text-code-inline">Restrict</code> or{' '}
|
||||
<code className="text-code-inline">No action</code>: if the two tables
|
||||
represent independent objects
|
||||
</li>
|
||||
<li>
|
||||
<code className="text-xs">Set NULL</code> or{' '}
|
||||
<code className="text-xs">Set default</code>: if a foreign-key
|
||||
<code className="text-code-inline">Set NULL</code> or{' '}
|
||||
<code className="text-code-inline">Set default</code>: if a foreign-key
|
||||
relationship represents optional information
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+7
-8
@@ -33,7 +33,7 @@ export const generateCascadeActionDescription = (
|
||||
return (
|
||||
<>
|
||||
<span className="text-foreground-light">{actionName}</span>: {actionVerb} a record from{' '}
|
||||
<code className="text-xs text-foreground-light">{reference}</code> will{' '}
|
||||
<code className="text-code-inline">{reference}</code> will{' '}
|
||||
<span className="text-amber-900 opacity-75">raise an error</span> if there are records
|
||||
existing in this table that reference it
|
||||
</>
|
||||
@@ -42,7 +42,7 @@ export const generateCascadeActionDescription = (
|
||||
return (
|
||||
<>
|
||||
<span className="text-foreground-light">{actionName}</span>: {actionVerb} a record from{' '}
|
||||
<code className="text-xs text-foreground-light">{reference}</code> will{' '}
|
||||
<code className="text-code-inline">{reference}</code> will{' '}
|
||||
<span className="text-amber-900 opacity-75">also {action}</span> any records that
|
||||
reference it in this table
|
||||
</>
|
||||
@@ -60,8 +60,7 @@ export const generateCascadeActionDescription = (
|
||||
the transaction
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
: {actionVerb} a record from{' '}
|
||||
<code className="text-xs text-foreground-light">{reference}</code> will{' '}
|
||||
: {actionVerb} a record from <code className="text-code-inline">{reference}</code> will{' '}
|
||||
<span className="text-amber-900 opacity-75">prevent {actionVerb.toLowerCase()}</span>{' '}
|
||||
existing referencing rows from this table.
|
||||
</>
|
||||
@@ -70,8 +69,8 @@ export const generateCascadeActionDescription = (
|
||||
return (
|
||||
<>
|
||||
<span className="text-foreground-light">{actionName}</span>: {actionVerb} a record from{' '}
|
||||
<code className="text-xs text-foreground-light">{reference}</code> will set the value of
|
||||
any existing records in this table referencing it to their{' '}
|
||||
<code className="text-code-inline">{reference}</code> will set the value of any existing
|
||||
records in this table referencing it to their{' '}
|
||||
<span className="text-amber-900 opacity-75">default value</span>
|
||||
</>
|
||||
)
|
||||
@@ -79,8 +78,8 @@ export const generateCascadeActionDescription = (
|
||||
return (
|
||||
<>
|
||||
<span className="text-foreground-light">{actionName}</span>: {actionVerb} a record from{' '}
|
||||
<code className="text-xs text-foreground-light">{reference}</code> will set the value of
|
||||
any existing records in this table referencing it{' '}
|
||||
<code className="text-code-inline">{reference}</code> will set the value of any existing
|
||||
records in this table referencing it{' '}
|
||||
<span className="text-amber-900 opacity-75">to NULL</span>
|
||||
</>
|
||||
)
|
||||
|
||||
+1
-1
@@ -165,7 +165,7 @@ const ForeignRowSelector = ({
|
||||
header={
|
||||
<div>
|
||||
Select a record to reference from{' '}
|
||||
<code className="font-mono text-sm">
|
||||
<code className="text-code-inline !text-sm">
|
||||
{schemaName}.{tableName}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
+4
-4
@@ -2,14 +2,14 @@ import { AlertCircle, ArrowRight, ChevronDown, ChevronRight } from 'lucide-react
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import {
|
||||
Alert_Shadcn_,
|
||||
AlertDescription_Shadcn_,
|
||||
AlertTitle_Shadcn_,
|
||||
Badge,
|
||||
Button,
|
||||
cn,
|
||||
Collapsible,
|
||||
SidePanel,
|
||||
Alert_Shadcn_,
|
||||
AlertTitle_Shadcn_,
|
||||
AlertDescription_Shadcn_,
|
||||
WarningIcon,
|
||||
} from 'ui'
|
||||
import type { SpreadsheetData } from './SpreadsheetImport.types'
|
||||
@@ -195,7 +195,7 @@ export const SpreadsheetImportPreview = ({
|
||||
<ul className="ml-2 list-disc">
|
||||
{errorData.__parsed_extra.map((value: string, i: number) => (
|
||||
<li key={i}>
|
||||
<code className="text-xs">{value}</code>
|
||||
<code className="text-code-inline">{value}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
+1
-1
@@ -96,7 +96,7 @@ export const ForeignKeyRow = ({
|
||||
{x.source || '[column_name]'}
|
||||
</code>
|
||||
<ArrowRight size={16} />
|
||||
<code className="text-xs">
|
||||
<code className="text-code-inline">
|
||||
{foreignKey.schema}.{foreignKey.table}.{x.target}
|
||||
</code>
|
||||
</div>
|
||||
|
||||
@@ -127,21 +127,21 @@ export const DisplayApiSettings = ({
|
||||
<FormLayout
|
||||
layout="horizontal"
|
||||
label={
|
||||
<>
|
||||
<div className="flex items-center space-x-1">
|
||||
{x.tags?.split(',').map((x, i: number) => (
|
||||
<code key={`${x}${i}`} className="text-xs text-code">
|
||||
<code key={`${x}${i}`} className="text-code-inline">
|
||||
{x}
|
||||
</code>
|
||||
))}
|
||||
{x.tags === 'service_role' && (
|
||||
<>
|
||||
<code className="text-xs text-code !bg-destructive !text-white !border-destructive">
|
||||
<code className="text-code-inline !bg-destructive !text-white !border-destructive">
|
||||
secret
|
||||
</code>
|
||||
</>
|
||||
)}
|
||||
{x.tags === 'anon' && <code className="text-xs text-code">public</code>}
|
||||
</>
|
||||
{x.tags === 'anon' && <code className="text-code-inline">public</code>}
|
||||
</div>
|
||||
}
|
||||
description={
|
||||
x.tags === 'service_role' ? (
|
||||
|
||||
@@ -239,7 +239,7 @@ const PrivilegesPage: NextPageWithLayout = () => {
|
||||
<AlertCircle strokeWidth={2} />
|
||||
<AlertTitle_Shadcn_>
|
||||
Changes to column privileges will not be reflected in migrations when running{' '}
|
||||
<code className="text-xs">supabase db diff</code>.
|
||||
<code className="text-code-inline">supabase db diff</code>.
|
||||
</AlertTitle_Shadcn_>
|
||||
<AlertDescription_Shadcn_>
|
||||
Column privileges are not supported in the current version of the Supabase CLI.
|
||||
@@ -269,10 +269,12 @@ const PrivilegesPage: NextPageWithLayout = () => {
|
||||
If you remove a column privilege for a role, that role will lose all access to
|
||||
that column.
|
||||
<br />
|
||||
All operations selecting <code className="text-xs">*</code> (including{' '}
|
||||
<code className="text-xs">returning *</code> for{' '}
|
||||
<code className="text-xs">insert</code>, <code className="text-xs">update</code>
|
||||
, and <code className="text-xs">delete</code>) will fail.
|
||||
All operations selecting <code className="text-code-inline">
|
||||
*
|
||||
</code> (including <code className="text-code-inline">returning *</code> for{' '}
|
||||
<code className="text-code-inline">insert</code>,{' '}
|
||||
<code className="text-code-inline">update</code>, and{' '}
|
||||
<code className="text-code-inline">delete</code>) will fail.
|
||||
</AlertDescription_Shadcn_>
|
||||
<Button
|
||||
type="outline"
|
||||
|
||||
@@ -79,6 +79,7 @@
|
||||
@apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
|
||||
}
|
||||
|
||||
// Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline">
|
||||
.text-code-inline {
|
||||
@apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-md px-1 py-0.5 text-foreground font-medium;
|
||||
}
|
||||
|
||||
@@ -325,13 +325,6 @@ const uiConfig = {
|
||||
// "[data-state='closed'] .accordion-content-animation": {
|
||||
// animation: 'slideUp 200ms ease-in',
|
||||
// },
|
||||
'.text-code': {
|
||||
margin: '0 0.2em',
|
||||
padding: '0.05em 0.4em 0.05em',
|
||||
background: 'hsla(0, 0%, 58.8%, 0.1)',
|
||||
border: '1px solid hsla(0, 0%, 39.2%, 0.2)',
|
||||
borderRadius: '3px',
|
||||
},
|
||||
'.no-scrollbar': {
|
||||
/* Hide scrollbar for IE, Edge*/
|
||||
'-ms-overflow-style': 'none',
|
||||
@@ -354,10 +347,10 @@ const uiConfig = {
|
||||
'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
|
||||
},
|
||||
'input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button':
|
||||
{
|
||||
'-webkit-appearance': 'none',
|
||||
margin: '0',
|
||||
},
|
||||
{
|
||||
'-webkit-appearance': 'none',
|
||||
margin: '0',
|
||||
},
|
||||
})
|
||||
addVariant('data-open-parent', '[data-state="open"] &')
|
||||
addVariant('data-closed-parent', '[data-state="closed"] &')
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
'use client'
|
||||
|
||||
import type { TOCItemType } from './server/get-toc'
|
||||
import * as Primitive from './toc-primitive'
|
||||
import { type ComponentProps, Fragment, type HTMLAttributes, type ReactNode, useRef } from 'react'
|
||||
import { TocThumb } from './toc-thumb'
|
||||
import { cn, ScrollArea, ScrollViewport } from 'ui'
|
||||
import { removeAnchor } from 'ui/src/components/CustomHTMLElements/CustomHTMLElements.utils'
|
||||
import type { TOCItemType } from './server/get-toc'
|
||||
import * as Primitive from './toc-primitive'
|
||||
import { TocThumb } from './toc-thumb'
|
||||
|
||||
export interface TOCProps {
|
||||
/**
|
||||
@@ -139,11 +139,7 @@ function TOCItem({ item }: { item: TOCItemType }) {
|
||||
>
|
||||
{formatTOCHeader(removeAnchor(item.title)).map((x, index) => (
|
||||
<Fragment key={index}>
|
||||
{x.type === 'code' ? (
|
||||
<code className="text-xs border rounded bg-muted">{x.value}</code>
|
||||
) : (
|
||||
x.value
|
||||
)}
|
||||
{x.type === 'code' ? <code className="text-code-inline">{x.value}</code> : x.value}
|
||||
</Fragment>
|
||||
))}
|
||||
</Primitive.TOCItem>
|
||||
|
||||
Reference in New Issue
Block a user