lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-03 19:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor/use shadcn tooltip (#31320)

Browse Source 
* Refactor LogsExplorerHeader

* Refactor HelpPopover

* Refactor PreviewPane

* Deprecate SettingsButton, not used

* Refactor HookList

* Refactor AuditLogs

* Refactor InvoiceStatusBadge

* Refactor RoleRow

* Refactor ProductEmptyState

* Refactor BranchPanels

* Refactor JsonEditor

* Refactor UpgradingState

* Refactor ColumnManagement
This commit is contained in:
Joshen Lim
2025-01-06 16:11:23 +08:00
committed by GitHub
parent d6f7ab9a44
commit c4e64f1746
13 changed files with 232 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/studio/components/interfaces/Account/AuditLogs.tsx
View File

@@ -1,4 +1,3 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import dayjs from 'dayjs'
import { ArrowDown, ArrowUp, RefreshCw } from 'lucide-react'
import { useEffect, useState } from 'react'
@@ -6,6 +5,7 @@ import { useEffect, useState } from 'react'
import { LogDetailsPanel } from 'components/interfaces/AuditLogs'
import Table from 'components/to-be-cleaned/Table'
import AlertError from 'components/ui/AlertError'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { DatePicker } from 'components/ui/DatePicker'
import { FilterPopover } from 'components/ui/FilterPopover'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
@@ -175,39 +175,24 @@ const AuditLogs = () => {
<div className="flex items-center space-x-2">
<p>Date</p>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button
type="text"
className="px-1"
icon={
dateSortDesc ? (
<ArrowDown strokeWidth={1.5} size={14} />
) : (
<ArrowUp strokeWidth={1.5} size={14} />
)
}
onClick={() => setDateSortDesc(!dateSortDesc)}
/>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Portal>
<Tooltip.Content side="right">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">
{dateSortDesc ? 'Sort latest first' : 'Sort earliest first'}
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Portal>
</Tooltip.Root>
<ButtonTooltip
type="text"
className="px-1"
icon={
dateSortDesc ? (
<ArrowDown strokeWidth={1.5} size={14} />
) : (
<ArrowUp strokeWidth={1.5} size={14} />
)
}
onClick={() => setDateSortDesc(!dateSortDesc)}
tooltip={{
content: {
side: 'bottom',
text: dateSortDesc ? 'Sort latest first' : 'Sort earliest first',
},
}}
/>
</div>
</Table.th>,
<Table.th key="actions" className="py-2"></Table.th>,

86
apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx
View File

@@ -1,6 +1,4 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { Badge } from 'ui'
import { Badge, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
import { InvoiceStatus } from './Invoices.types'
interface InvoiceStatusBadgeProps {
@@ -45,8 +43,8 @@ const InvoiceStatusBadge = ({ status, paymentAttempted }: InvoiceStatusBadgeProp
const statusMapping = invoiceStatusMapping[status]
return (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<Badge
size="small"
className="capitalize"
@@ -54,54 +52,42 @@ const InvoiceStatusBadge = ({ status, paymentAttempted }: InvoiceStatusBadgeProp
>
{statusMapping?.label || status}
</Badge>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'w-[300px] space-y-2 border border-background',
].join(' ')}
>
{[InvoiceStatus.OPEN, InvoiceStatus.ISSUED, InvoiceStatus.UNCOLLECTIBLE].includes(
status
) &&
(paymentAttempted ? (
<p className="text-xs text-foreground">
We were not able to collect the payment. Make sure you have a valid payment method
and enough funds. Outstanding invoices may cause restrictions. You can manually
pay the invoice using the "Pay Now" button.
</p>
) : (
<p className="text-xs text-foreground">
The invoice will soon be charged for. In case you pay via invoice instead of card,
please make sure to make the payment in a timely manner. You can also pay the
invoice using your card now using the "Pay Now" button.
</p>
))}
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom">
{[InvoiceStatus.OPEN, InvoiceStatus.ISSUED, InvoiceStatus.UNCOLLECTIBLE].includes(status) &&
(paymentAttempted ? (
<p className="text-xs text-foreground">
We were not able to collect the payment. Make sure you have a valid payment method and
enough funds. Outstanding invoices may cause restrictions. You can manually pay the
invoice using the "Pay Now" button.
</p>
) : (
<p className="text-xs text-foreground">
The invoice will soon be charged for. In case you pay via invoice instead of card,
please make sure to make the payment in a timely manner. You can also pay the invoice
using your card now using the "Pay Now" button.
</p>
))}
{status === InvoiceStatus.DRAFT && (
<p className="text-xs text-foreground">
The invoice will soon be finalized and charged for.
</p>
)}
{status === InvoiceStatus.DRAFT && (
<p className="text-xs text-foreground">
The invoice will soon be finalized and charged for.
</p>
)}
{status === InvoiceStatus.PAID && (
<p className="text-xs text-foreground">
The invoice has been paid successfully. No action is required on your side.
</p>
)}
{status === InvoiceStatus.PAID && (
<p className="text-xs text-foreground">
The invoice has been paid successfully. No action is required on your side.
</p>
)}
{status === InvoiceStatus.VOID && (
<p className="text-xs text-foreground">
This invoice has been forgiven. No action is required on your side.
</p>
)}
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
{status === InvoiceStatus.VOID && (
<p className="text-xs text-foreground">
This invoice has been forgiven. No action is required on your side.
</p>
)}
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
)
}

67
apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx
View File

@@ -1,6 +1,4 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { useParams } from 'common'
import dayjs from 'dayjs'
import {
ArrowRight,
@@ -18,6 +16,8 @@ import { PropsWithChildren, ReactNode, useState } from 'react'
import { useInView } from 'react-intersection-observer'
import { toast } from 'sonner'
import { useParams } from 'common'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import ShimmeringLoader from 'components/ui/ShimmeringLoader'
import { useBranchQuery } from 'data/branches/branch-query'
import { useBranchResetMutation } from 'data/branches/branch-reset-mutation'
@@ -161,44 +161,31 @@ export const BranchRow = ({
return (
<div className="w-full flex items-center justify-between px-6 py-2.5" ref={ref}>
<div className="flex items-center gap-x-4">
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button
asChild
type="default"
className="max-w-[300px]"
icon={
isMain ? (
<Shield strokeWidth={2} className="text-amber-900" />
) : branch.persistent ? (
<Infinity size={16} />
) : null
}
>
<Link href={`/project/${branch.project_ref}/branches`} title={branch.name}>
{branch.name}
</Link>
</Button>
</Tooltip.Trigger>
{branch.persistent && (
<Tooltip.Portal>
<Tooltip.Content side="top">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">
{branch.name} is a persistent branch and will remain active even after the
underlying PR is closed
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
)}
</Tooltip.Root>
<ButtonTooltip
asChild
type="default"
className="max-w-[300px]"
icon={
isMain ? (
<Shield strokeWidth={2} className="text-amber-900" />
) : branch.persistent ? (
<Infinity size={16} />
) : null
}
tooltip={{
content: {
side: 'bottom',
text: branch.persistent
? `${branch.name} is a persistent branch and will remain active even after the
underlying PR is closed`
: undefined,
},
}}
>
<Link href={`/project/${branch.project_ref}/branches`} title={branch.name}>
{branch.name}
</Link>
</ButtonTooltip>
{isActive && <Badge>Current</Badge>}
<BranchStatusBadge

38
apps/studio/components/interfaces/Database/Hooks/HooksList/HookList.tsx
View File

@@ -1,11 +1,12 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { includes, noop } from 'lodash'
import { Edit3, MoreVertical, Trash } from 'lucide-react'
import Image from 'next/legacy/image'
import { useParams } from 'common/hooks'
import { useParams } from 'common'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import Table from 'components/to-be-cleaned/Table'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { useDatabaseHooksQuery } from 'data/database-triggers/database-triggers-query'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { BASE_PATH } from 'lib/constants'
@@ -18,7 +19,6 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from 'ui'
import { MoreVertical, Edit3, Trash } from 'lucide-react'
export interface HookListProps {
schema: string
@@ -113,26 +113,18 @@ const HookList = ({ schema, filterString, editHook = noop, deleteHook = noop }:
</DropdownMenuContent>
</DropdownMenu>
) : (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button disabled type="default" icon={<MoreVertical />} />
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="left">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">
You need additional permissions to update webhooks
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<ButtonTooltip
disabled
type="default"
className="px-1"
icon={<MoreVertical />}
tooltip={{
content: {
side: 'bottom',
text: 'You need additional permissions to update webhooks',
},
}}
/>
)}
</div>
</Table.td>

41
apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
View File

@@ -1,4 +1,3 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { useState } from 'react'
import { toast } from 'sonner'
import {
@@ -10,13 +9,16 @@ import {
DropdownMenuTrigger,
Form,
Toggle,
Tooltip_Shadcn_,
TooltipContent_Shadcn_,
TooltipTrigger_Shadcn_,
} from 'ui'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { useDatabaseRoleUpdateMutation } from 'data/database-roles/database-role-update-mutation'
import { PgRole } from 'data/database-roles/database-roles-query'
import { ChevronUp, HelpCircle, MoreVertical, Trash } from 'lucide-react'
import { ROLE_PERMISSIONS } from './Roles.constants'
import { ChevronUp, MoreVertical, Trash, HelpCircle } from 'lucide-react'
interface RoleRowProps {
role: PgRole
@@ -166,36 +168,25 @@ const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps) => {
disabled={disabled || ROLE_PERMISSIONS[permission].disabled}
className={[
'roles-toggle',
disabled || ROLE_PERMISSIONS[permission].disabled ? 'opacity-50' : '',
disabled || ROLE_PERMISSIONS[permission].disabled
? '[&>div>button]:opacity-30 [&>div>label]:text-foreground-lighter'
: '',
].join(' ')}
afterLabel={
!disabled && ROLE_PERMISSIONS[permission].disabled ? (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger type="button">
!disabled &&
ROLE_PERMISSIONS[permission].disabled && (
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<HelpCircle
size="14"
strokeWidth={2}
className="ml-2 relative top-[3px]"
/>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content align="center" side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background space-y-1',
].join(' ')}
>
<span className="text-xs">
This privilege cannot be updated via the dashboard
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
) : (
<></>
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom">
This privilege cannot be updated via the dashboard
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
)
}
/>

32
apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx
View File

@@ -1,9 +1,9 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { AlignLeft } from 'lucide-react'
import { useCallback, useEffect, useState } from 'react'
import { toast } from 'sonner'
import { useParams } from 'common'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import TwoOptionToggle from 'components/ui/TwoOptionToggle'
import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
import { isTableLike } from 'data/table-editor/table-editor-types'
@@ -136,29 +136,13 @@ const JsonEdit = ({
{(!isTruncated || (isTruncated && isSuccess)) && (
<div className="flex items-center gap-x-2">
{view === 'edit' && (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button
type="default"
icon={<AlignLeft />}
className="px-1"
onClick={() => prettify()}
/>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">Prettify JSON</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<ButtonTooltip
type="default"
icon={<AlignLeft />}
className="px-1"
onClick={() => prettify()}
tooltip={{ content: { side: 'bottom', text: 'Prettify JSON' } }}
/>
)}
<TwoOptionToggle
options={['view', 'edit']}

69
apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/ColumnManagement.tsx
View File

@@ -1,4 +1,3 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { isEmpty, noop, partition } from 'lodash'
import { Edit, ExternalLink, HelpCircle, Key, Trash } from 'lucide-react'
import { useState } from 'react'
@@ -17,6 +16,9 @@ import {
AlertTitle_Shadcn_,
Alert_Shadcn_,
Button,
TooltipContent_Shadcn_,
TooltipTrigger_Shadcn_,
Tooltip_Shadcn_,
WarningIcon,
} from 'ui'
import { generateColumnField } from '../ColumnEditor/ColumnEditor.utils'
@@ -197,59 +199,30 @@ const ColumnManagement = ({
{isNewRecord && <div className="w-[5%]" />}
<div className="w-[25%] flex items-center space-x-2">
<h5 className="text-xs text-foreground-lighter">Name</h5>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<h5 className="text-xs text-foreground-lighter">
<HelpCircle size={15} strokeWidth={1.5} />
</h5>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow', // background
'border border-background w-[300px]', //border
].join(' ')}
>
<span className="text-xs text-foreground">
Recommended to use lowercase and use an underscore to separate words e.g.
column_name
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<HelpCircle size={15} strokeWidth={1.5} className="text-foreground-lighter" />
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom" className="w-[300px]">
Recommended to use lowercase and use an underscore to separate words e.g.
column_name
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
</div>
<div className="w-[25%]">
<h5 className="text-xs text-foreground-lighter">Type</h5>
</div>
<div className={`${isNewRecord ? 'w-[25%]' : 'w-[30%]'} flex items-center space-x-2`}>
<h5 className="text-xs text-foreground-lighter">Default Value</h5>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<h5 className="text-xs text-foreground-lighter">
<HelpCircle size={15} strokeWidth={1.5} />
</h5>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow', // background
'border border-background w-[300px]', //border
].join(' ')}
>
<span className="text-xs text-foreground">
Can either be a literal or an expression. When using an expression wrap your
expression in brackets, e.g. (gen_random_uuid())
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<HelpCircle size={15} strokeWidth={1.5} className="text-foreground-lighter" />
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom" className="w-[300px]">
Can either be a literal or an expression. When using an expression wrap your
expression in brackets, e.g. (gen_random_uuid())
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
</div>
<div className="w-[10%]">
<h5 className="text-xs text-foreground-lighter">Primary</h5>

34
apps/studio/components/layouts/AppLayout/SettingsButton.tsx
View File

@@ -1,34 +0,0 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
import { Settings } from 'lucide-react'
import Link from 'next/link'
const SettingsButton = () => {
const selectedOrganization = useSelectedOrganization()
const slug = selectedOrganization?.slug
return (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger type="button" asChild className="px-1">
<Link id="organization-settings" href={slug ? `/org/${slug}/general` : '/'}>
<Settings size={18} strokeWidth={1.5} className="text-foreground-light" />
</Link>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">Organization settings</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
)
}
export default SettingsButton

40
apps/studio/components/layouts/ProjectLayout/LayoutHeader/HelpPopover.tsx
View File

@@ -1,10 +1,10 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { Activity, BookOpen, HelpCircle, Mail, MessageCircle, Wrench } from 'lucide-react'
import Image from 'next/legacy/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import SVG from 'react-inlinesvg'
import { Activity, BookOpen, HelpCircle, Mail, MessageCircle, Wrench } from 'lucide-react'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import {
Button,
Popover,
@@ -22,33 +22,15 @@ const HelpPopover = () => {
return (
<Popover_Shadcn_>
<Tooltip.Root delayDuration={0}>
<PopoverTrigger_Shadcn_ asChild>
<Tooltip.Trigger asChild>
<div className="relative flex items-center">
<Button
id="help-popover-button"
type="text"
className="px-1"
icon={<HelpCircle size={16} strokeWidth={1.5} className="text-foreground-light" />}
/>
</div>
</Tooltip.Trigger>
</PopoverTrigger_Shadcn_>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'space-y-2 border border-background',
].join(' ')}
>
<p className="text-xs text-foreground">Help</p>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
<PopoverTrigger_Shadcn_ asChild>
<ButtonTooltip
id="help-popover-button"
type="text"
className="px-1"
icon={<HelpCircle size={16} strokeWidth={1.5} className="text-foreground-light" />}
tooltip={{ content: { side: 'bottom', text: 'Help' } }}
/>
</PopoverTrigger_Shadcn_>
<PopoverContent_Shadcn_ className="w-[400px] space-y-4 p-0 py-5" align="end" side="bottom">
<div className="mb-5 space-y-4 px-5">
<h5 className="text-foreground">Need help with your project?</h5>

57
apps/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx
View File

@@ -1,28 +1,27 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { DatabaseUpgradeProgress, DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import dayjs from 'dayjs'
import Link from 'next/link'
import { useState } from 'react'
import { Button } from 'ui'
import { useQueryClient } from '@tanstack/react-query'
import { useParams } from 'common/hooks'
import dayjs from 'dayjs'
import {
AlertCircle,
Check,
CheckCircle,
Circle,
Loader,
Maximize2,
Minimize2,
Settings,
} from 'lucide-react'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { useState } from 'react'
import { useParams } from 'common'
import { useProjectUpgradingStatusQuery } from 'data/config/project-upgrade-status-query'
import { invalidateProjectDetailsQuery } from 'data/projects/project-detail-query'
import { IS_PLATFORM } from 'lib/constants'
import { Button, Tooltip_Shadcn_, TooltipContent_Shadcn_, TooltipTrigger_Shadcn_ } from 'ui'
import { useProjectContext } from '../ProjectContext'
import { DATABASE_UPGRADE_MESSAGES } from './UpgradingState.constants'
import {
CheckCircle,
AlertCircle,
Settings,
Circle,
Minimize2,
Maximize2,
Loader,
Check,
} from 'lucide-react'
import { useSearchParams } from 'next/navigation'
const UpgradingState = () => {
const { ref } = useParams()
@@ -226,26 +225,14 @@ const UpgradingState = () => {
</div>
{initiated_at !== undefined && (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger className="w-full">
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<p className="text-sm text-center text-foreground-light">
Started on: {initiatedAtUTC} (UTC)
</p>
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow', // background
'border border-background', //border
].join(' ')}
>
<span className="text-xs text-foreground">{initiatedAt}</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom">{initiatedAt}</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
)}
</div>
</div>

44
apps/studio/components/to-be-cleaned/ProductEmptyState.tsx
View File

@@ -1,6 +1,7 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { ExternalLink } from 'lucide-react'
import { PropsWithChildren } from 'react'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { Button } from 'ui'
interface ProductEmptyStateProps {
@@ -40,33 +41,20 @@ const ProductEmptyState = ({
{hasAction && (
<div className="flex items-center space-x-2">
{ctaButtonLabel && onClickCta && (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button
type="primary"
onClick={onClickCta}
loading={loading}
disabled={loading || disabled}
>
{ctaButtonLabel}
</Button>
</Tooltip.Trigger>
{disabled && disabledMessage.length > 0 && (
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">{disabledMessage}</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
)}
</Tooltip.Root>
<ButtonTooltip
type="primary"
onClick={onClickCta}
loading={loading}
disabled={loading || disabled}
tooltip={{
content: {
side: 'bottom',
text: disabled && disabledMessage.length > 0 ? disabledMessage : undefined,
},
}}
>
{ctaButtonLabel}
</ButtonTooltip>
)}
{infoButtonUrl && infoButtonLabel ? (
<Button type="default" icon={<ExternalLink strokeWidth={1.5} />}>

49
apps/studio/components/to-be-cleaned/Storage/StorageExplorer/PreviewPane.tsx
View File

@@ -1,10 +1,10 @@
import { Transition } from '@headlessui/react'
import * as Tooltip from '@radix-ui/react-tooltip'
import { PermissionAction } from '@supabase/shared-types/out/constants'
import { isEmpty } from 'lodash'
import { AlertCircle, ChevronDown, Clipboard, Download, Loader, Trash2, X } from 'lucide-react'
import SVG from 'react-inlinesvg'
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
import { BASE_PATH } from 'lib/constants'
import { formatBytes } from 'lib/helpers'
@@ -252,36 +252,23 @@ const PreviewPane = () => {
</DropdownMenu>
)}
</div>
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger asChild>
<Button
type="outline"
disabled={!canUpdateFiles}
size="tiny"
icon={<Trash2 strokeWidth={2} />}
onClick={() => setSelectedItemsToDelete([file])}
>
Delete file
</Button>
</Tooltip.Trigger>
{!canUpdateFiles && (
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">
You need additional permissions to delete this file
</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
)}
</Tooltip.Root>
<ButtonTooltip
type="outline"
disabled={!canUpdateFiles}
size="tiny"
icon={<Trash2 strokeWidth={2} />}
onClick={() => setSelectedItemsToDelete([file])}
tooltip={{
content: {
side: 'bottom',
text: !canUpdateFiles
? 'You need additional permissions to delete this file'
: undefined,
},
}}
>
Delete file
</ButtonTooltip>
</div>
</div>
</Transition>

60
apps/studio/components/ui/Logs/LogsExplorerHeader.tsx
View File

@@ -1,13 +1,19 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { BookOpen, Check, Clipboard, ExternalLink, List, X } from 'lucide-react'
import Link from 'next/link'
import { useState } from 'react'
import { LOGS_EXPLORER_DOCS_URL } from 'components/interfaces/Settings/Logs/Logs.constants'
import Table from 'components/to-be-cleaned/Table'
import { copyToClipboard } from 'lib/helpers'
import { BookOpen, Check, Clipboard, ExternalLink, List, X } from 'lucide-react'
import { logConstants } from 'shared-data'
import { Button, SidePanel, Tabs } from 'ui'
import {
Button,
SidePanel,
Tabs,
Tooltip_Shadcn_,
TooltipContent_Shadcn_,
TooltipTrigger_Shadcn_,
} from 'ui'
import { DocsButton } from '../DocsButton'
export interface LogsExplorerHeaderProps {
@@ -147,43 +153,23 @@ const Field = ({
>
<span>{field.path}</span>
{isCopied ? (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<Check size={14} strokeWidth={3} className="text-brand" />
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">Copied</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom" className="font-sans">
Copied
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
) : (
<Tooltip.Root delayDuration={0}>
<Tooltip.Trigger>
<Tooltip_Shadcn_>
<TooltipTrigger_Shadcn_>
<Clipboard size={14} strokeWidth={1.5} />
</Tooltip.Trigger>
<Tooltip.Portal>
<Tooltip.Content side="bottom">
<Tooltip.Arrow className="radix-tooltip-arrow" />
<div
className={[
'rounded bg-alternative py-1 px-2 leading-none shadow',
'border border-background',
].join(' ')}
>
<span className="text-xs text-foreground">Copy value</span>
</div>
</Tooltip.Content>
</Tooltip.Portal>
</Tooltip.Root>
</TooltipTrigger_Shadcn_>
<TooltipContent_Shadcn_ side="bottom" className="font-sans">
Copy value
</TooltipContent_Shadcn_>
</Tooltip_Shadcn_>
)}
</Table.td>
<Table.td className="font-mono text-xs !p-2">{field.type}</Table.td>