diff --git a/apps/studio/components/interfaces/Account/AuditLogs.tsx b/apps/studio/components/interfaces/Account/AuditLogs.tsx index 2ab91e9a40e..85420e473d2 100644 --- a/apps/studio/components/interfaces/Account/AuditLogs.tsx +++ b/apps/studio/components/interfaces/Account/AuditLogs.tsx @@ -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 = () => {

Date

- - -
, , diff --git a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx index 9a4fc6f1367..5c351790233 100644 --- a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx +++ b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx @@ -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 ( - - + + {statusMapping?.label || status} - - - - -
- {[InvoiceStatus.OPEN, InvoiceStatus.ISSUED, InvoiceStatus.UNCOLLECTIBLE].includes( - status - ) && - (paymentAttempted ? ( -

- 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. -

- ) : ( -

- 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. -

- ))} + + + {[InvoiceStatus.OPEN, InvoiceStatus.ISSUED, InvoiceStatus.UNCOLLECTIBLE].includes(status) && + (paymentAttempted ? ( +

+ 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. +

+ ) : ( +

+ 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. +

+ ))} - {status === InvoiceStatus.DRAFT && ( -

- The invoice will soon be finalized and charged for. -

- )} + {status === InvoiceStatus.DRAFT && ( +

+ The invoice will soon be finalized and charged for. +

+ )} - {status === InvoiceStatus.PAID && ( -

- The invoice has been paid successfully. No action is required on your side. -

- )} + {status === InvoiceStatus.PAID && ( +

+ The invoice has been paid successfully. No action is required on your side. +

+ )} - {status === InvoiceStatus.VOID && ( -

- This invoice has been forgiven. No action is required on your side. -

- )} -
- - - + {status === InvoiceStatus.VOID && ( +

+ This invoice has been forgiven. No action is required on your side. +

+ )} + + ) } diff --git a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx index db696e605dd..f57113f011b 100644 --- a/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx +++ b/apps/studio/components/interfaces/BranchManagement/BranchPanels.tsx @@ -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 (
- - - - - {branch.persistent && ( - - - -
- - {branch.name} is a persistent branch and will remain active even after the - underlying PR is closed - -
- - - )} - + + ) : branch.persistent ? ( + + ) : 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, + }, + }} + > + + {branch.name} + + {isActive && Current} ) : ( - - -
diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx index 2d801b96f21..48cbcb93836 100644 --- a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx +++ b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx @@ -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 ? ( - - + !disabled && + ROLE_PERMISSIONS[permission].disabled && ( + + - - - - -
- - This privilege cannot be updated via the dashboard - -
- - - - ) : ( - <> + + + This privilege cannot be updated via the dashboard + + ) } /> diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx index 4919ee73ab3..95a06f7c289 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx @@ -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)) && (
{view === 'edit' && ( - - -
- - - - - -
-

Help

-
- - - + + } + tooltip={{ content: { side: 'bottom', text: 'Help' } }} + /> +
Need help with your project?
diff --git a/apps/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx b/apps/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx index 2f9e3506a44..48139e20e6c 100644 --- a/apps/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx +++ b/apps/studio/components/layouts/ProjectLayout/UpgradingState/UpgradingState.tsx @@ -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 = () => {
{initiated_at !== undefined && ( - - + +

Started on: {initiatedAtUTC} (UTC)

- - - - -
- {initiatedAt} -
- - - + + {initiatedAt} + )}
diff --git a/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx b/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx index fbfdfe08b47..7255dde4c4c 100644 --- a/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx +++ b/apps/studio/components/to-be-cleaned/ProductEmptyState.tsx @@ -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 && (
{ctaButtonLabel && onClickCta && ( - - - - - {disabled && disabledMessage.length > 0 && ( - - - -
- {disabledMessage} -
- - - )} - + 0 ? disabledMessage : undefined, + }, + }} + > + {ctaButtonLabel} + )} {infoButtonUrl && infoButtonLabel ? (
- - - - - {!canUpdateFiles && ( - - - -
- - You need additional permissions to delete this file - -
- - - )} - + } + onClick={() => setSelectedItemsToDelete([file])} + tooltip={{ + content: { + side: 'bottom', + text: !canUpdateFiles + ? 'You need additional permissions to delete this file' + : undefined, + }, + }} + > + Delete file + diff --git a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx index 72f2ff55fd6..91c04a9d806 100644 --- a/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx +++ b/apps/studio/components/ui/Logs/LogsExplorerHeader.tsx @@ -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 = ({ > {field.path} {isCopied ? ( - - + + - - - - -
- Copied -
- - - + + + Copied + + ) : ( - - + + - - - - -
- Copy value -
- - - + + + Copy value + + )} {field.type}