mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Fix all usage of button tooltip (#30076)
* Fix all usage of button tooltip * PRETTY
This commit is contained in:
Joshen Lim authored and GitHub committed
1 parent
5781937739
commit
3a3360bbd0
35 files changed
+134
-41
No files matched your search
@@ -100,7 +100,9 @@ export const HookCard = ({ hook, onSelect }: HookCardProps) => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to configure auth hooks',
|
||||
text: !canUpdateAuthHook
|
||||
? 'You need additional permissions to configure auth hooks'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -804,7 +804,9 @@ export const AIPolicyEditorPanel = memo(function ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'top',
|
||||
text: 'You need additional permissions to update policies',
|
||||
text: !canUpdatePolicies
|
||||
? 'You need additional permissions to update policies'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { PermissionAction } from '@supabase/shared-types/out/constants'
|
||||
import { noop } from 'lodash'
|
||||
|
||||
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
||||
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
||||
import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
|
||||
import Panel from 'components/ui/Panel'
|
||||
import { useAuthConfigQuery } from 'data/auth/auth-config-query'
|
||||
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
||||
@@ -20,7 +20,6 @@ import {
|
||||
TooltipContent_Shadcn_,
|
||||
TooltipTrigger_Shadcn_,
|
||||
} from 'ui'
|
||||
import { DropdownMenuItemTooltip } from 'components/ui/DropdownMenuItemTooltip'
|
||||
|
||||
interface PolicyRowProps {
|
||||
policy: PostgresPolicy
|
||||
|
||||
+6
-2
@@ -79,7 +79,9 @@ const PolicyTableRowHeader = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to toggle RLS',
|
||||
text: !canToggleRLS
|
||||
? 'You need additional permissions to toggle RLS'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -94,7 +96,9 @@ const PolicyTableRowHeader = ({
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: !canToggleRLS
|
||||
? 'You need additional permissions to create RLS policies'
|
||||
? !canToggleRLS
|
||||
? 'You need additional permissions to create RLS policies'
|
||||
: undefined
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
|
||||
@@ -72,7 +72,9 @@ export const RedirectUrlList = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to remove redirect URLs',
|
||||
text: !canUpdateConfig
|
||||
? 'You need additional permissions to remove redirect URLs'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
icon={<Trash />}
|
||||
@@ -88,7 +90,9 @@ export const RedirectUrlList = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to update redirect URLs',
|
||||
text: !canUpdateConfig
|
||||
? 'You need additional permissions to update redirect URLs'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -521,6 +521,8 @@ const RowAction = ({
|
||||
}
|
||||
className?: string
|
||||
}) => {
|
||||
const disabled = button?.disabled ?? false
|
||||
|
||||
return (
|
||||
<div className={cn(CONTAINER_CLASS, className)}>
|
||||
<div>
|
||||
@@ -535,11 +537,13 @@ const RowAction = ({
|
||||
icon={success ? <Check className="text-brand" /> : button.icon}
|
||||
loading={button.isLoading ?? false}
|
||||
onClick={button.onClick}
|
||||
disabled={button?.disabled ?? false}
|
||||
disabled={disabled}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: `You need additional permissions to ${button.text.toLowerCase()}`,
|
||||
text: disabled
|
||||
? `You need additional permissions to ${button.text.toLowerCase()}`
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -216,7 +216,9 @@ const BranchManagement = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create branches',
|
||||
text: !canCreateBranches
|
||||
? 'You need additional permissions to create branches'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -271,7 +273,9 @@ const BranchManagement = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to disable branching',
|
||||
text: !canDisableBranching
|
||||
? 'You need additional permissions to disable branching'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -29,7 +29,9 @@ export const BranchingEmptyState = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to enable branching',
|
||||
text: !canEnableBranching
|
||||
? 'You need additional permissions to enable branching'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -40,7 +40,9 @@ const CreateWarehouseAccessToken = ({ onSubmit, loading, open, setOpen }: Create
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create access tokens',
|
||||
text: !canCreateAccessTokens
|
||||
? 'You need additional permissions to create access tokens'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -142,7 +142,9 @@ const FunctionsList = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create functions',
|
||||
text: !canCreateFunctions
|
||||
? 'You need additional permissions to create functions'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -72,7 +72,9 @@ const ColumnList = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create columns',
|
||||
text: !canUpdateColumns
|
||||
? 'You need additional permissions to create columns'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -275,7 +275,9 @@ const TableList = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create tables',
|
||||
text: !canUpdateTables
|
||||
? 'You need additional permissions to create tables'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -257,7 +257,9 @@ const EdgeFunctionDetails = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to delete edge functions',
|
||||
text: !canUpdateEdgeFunction
|
||||
? 'You need additional permissions to delete edge functions'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -42,7 +42,9 @@ const EdgeFunctionSecret = ({ secret, onSelectDelete }: EdgeFunctionSecretProps)
|
||||
side: 'bottom',
|
||||
text: isReservedSecret
|
||||
? 'This is a reserved secret and cannot be deleted'
|
||||
: 'You need additional permissions to delete edge function secrets',
|
||||
: !canUpdateSecrets
|
||||
? 'You need additional permissions to delete edge function secrets'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
+3
-1
@@ -81,7 +81,9 @@ const EdgeFunctionSecrets = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to update edge function secrets',
|
||||
text: !canUpdateSecrets
|
||||
? 'You need additional permissions to update edge function secrets'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -316,7 +316,9 @@ export const CreateCronJobSheet = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to enable database extensions',
|
||||
text: !canToggleExtensions
|
||||
? 'You need additional permissions to enable database extensions'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -303,7 +303,10 @@ const EmptyIntegrationConnection = React.forwardRef<
|
||||
disabled={disabled}
|
||||
onClick={() => onClick()}
|
||||
tooltip={{
|
||||
content: { side: 'bottom', text: 'Additional permissions required to add connection' },
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: disabled ? 'Additional permissions required to add connection' : undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Add new project connection
|
||||
|
||||
@@ -85,7 +85,9 @@ const OAuthApps = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create apps',
|
||||
text: !canCreateOAuthApps
|
||||
? 'You need additional permissions to create apps'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -184,7 +184,13 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
disabled={hasAPISchema && isAPISchemaExposed}
|
||||
loading={isCreatingAPISchema}
|
||||
tooltip={{
|
||||
content: { side: 'right', text: 'Schema has already been created and exposed' },
|
||||
content: {
|
||||
side: 'right',
|
||||
text:
|
||||
hasAPISchema && isAPISchemaExposed
|
||||
? 'Schema has already been created and exposed'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Create and expose schema to Data API
|
||||
@@ -249,7 +255,12 @@ export const HardenAPIModal = ({ visible, onClose }: HardenAPIModalProps) => {
|
||||
className="w-min"
|
||||
disabled={!isPublicSchemaExposed}
|
||||
loading={isUpdatingConfig}
|
||||
tooltip={{ content: { side: 'right', text: 'Public schema no longer exposed' } }}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'right',
|
||||
text: !isPublicSchemaExposed ? 'Public schema no longer exposed' : undefined,
|
||||
},
|
||||
}}
|
||||
onClick={onSelectRemovePublicSchema}
|
||||
>
|
||||
Remove public schema from exposed schemas
|
||||
|
||||
@@ -99,7 +99,9 @@ const BannedIPs = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to unban networks',
|
||||
text: !canUnbanNetworks
|
||||
? 'You need additional permissions to unban networks'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -55,7 +55,9 @@ const DisallowAllAccessButton = ({ disabled, onClick }: AccessButtonProps) => (
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to update network restrictions',
|
||||
text: disabled
|
||||
? 'You need additional permissions to update network restrictions'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -27,7 +27,9 @@ const DeleteProjectButton = ({ type = 'danger' }: DeleteProjectButtonProps) => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to delete this project',
|
||||
text: !canDeleteProject
|
||||
? 'You need additional permissions to delete this project'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -79,7 +79,9 @@ const TransferProjectButton = () => {
|
||||
side: 'bottom',
|
||||
text: !canTransferProject
|
||||
? 'You need additional permissions to transfer this project'
|
||||
: 'Project transfers are temporarily disabled, please try again later.',
|
||||
: disableProjectTransfer
|
||||
? 'Project transfers are temporarily disabled, please try again later.'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -231,7 +231,9 @@ const InstanceConfigurationUI = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to deploy replicas',
|
||||
text: !canManageReplicas
|
||||
? 'You need additional permissions to deploy replicas'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+3
-1
@@ -358,7 +358,9 @@ const MapView = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to deploy replicas',
|
||||
text: !canManageReplicas
|
||||
? 'You need additional permissions to deploy replicas'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -75,7 +75,12 @@ const PauseFailedState = () => {
|
||||
icon={<Download />}
|
||||
loading={isDownloading}
|
||||
disabled={backups.length === 0}
|
||||
tooltip={{ content: { side: 'bottom', text: 'No available backups to download' } }}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: backups.length === 0 ? 'No available backups to download' : undefined,
|
||||
},
|
||||
}}
|
||||
onClick={onClickDownloadBackup}
|
||||
>
|
||||
Download backup
|
||||
|
||||
@@ -276,7 +276,9 @@ export const ProjectPausedState = ({ product }: ProjectPausedStateProps) => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to resume this project',
|
||||
text: !canResumeProject
|
||||
? 'You need additional permissions to resume this project'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -75,7 +75,12 @@ const RestoreFailedState = () => {
|
||||
icon={<Download />}
|
||||
loading={isDownloading}
|
||||
disabled={backups.length === 0}
|
||||
tooltip={{ content: { side: 'bottom', text: 'No available backups to download' } }}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: backups.length === 0 ? 'No available backups to download' : undefined,
|
||||
},
|
||||
}}
|
||||
onClick={onClickDownloadBackup}
|
||||
>
|
||||
Download backup
|
||||
|
||||
@@ -126,7 +126,12 @@ const RestoringState = () => {
|
||||
icon={<Download />}
|
||||
loading={isDownloading}
|
||||
disabled={backups.length === 0}
|
||||
tooltip={{ content: { side: 'bottom', text: 'No available backups to download' } }}
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: backups.length === 0 ? 'No available backups to download' : undefined,
|
||||
},
|
||||
}}
|
||||
onClick={onClickDownloadBackup}
|
||||
>
|
||||
Download backup
|
||||
|
||||
@@ -136,7 +136,9 @@ const ReportsMenu = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create custom reports',
|
||||
text: !canCreateCustomReport
|
||||
? 'You need additional permissions to create custom reports'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -79,7 +79,9 @@ const StorageMenu = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create buckets',
|
||||
text: !canCreateBuckets
|
||||
? 'You need additional permissions to create buckets'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -136,7 +136,9 @@ const TableEditorMenu = () => {
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create tables',
|
||||
text: !canCreateTables
|
||||
? 'You need additional permissions to create tables'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -434,7 +434,9 @@ const FileExplorerHeader = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to upload files',
|
||||
text: !canUpdateStorage
|
||||
? 'You need additional permissions to upload files'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -448,7 +450,9 @@ const FileExplorerHeader = ({
|
||||
tooltip={{
|
||||
content: {
|
||||
side: 'bottom',
|
||||
text: 'You need additional permissions to create folders',
|
||||
text: !canUpdateStorage
|
||||
? 'You need additional permissions to create folders'
|
||||
: undefined,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
+2
@@ -48,6 +48,7 @@ const FileExplorerHeaderSelection = () => {
|
||||
<ButtonTooltip
|
||||
icon={<Trash2 size={16} strokeWidth={2} />}
|
||||
type="primary"
|
||||
disabled={!canUpdateFiles}
|
||||
onClick={() => setSelectedItemsToDelete(selectedItems)}
|
||||
tooltip={{
|
||||
content: {
|
||||
@@ -62,6 +63,7 @@ const FileExplorerHeaderSelection = () => {
|
||||
<ButtonTooltip
|
||||
icon={<Move size={16} strokeWidth={2} />}
|
||||
type="primary"
|
||||
disabled={!canUpdateFiles}
|
||||
onClick={() => setSelectedItemsToMove(selectedItems)}
|
||||
tooltip={{
|
||||
content: {
|
||||
|
||||
@@ -9,7 +9,6 @@ import Policies from 'components/interfaces/Auth/Policies/Policies'
|
||||
import AuthLayout from 'components/layouts/AuthLayout/AuthLayout'
|
||||
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
||||
import AlertError from 'components/ui/AlertError'
|
||||
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
||||
import NoPermission from 'components/ui/NoPermission'
|
||||
import SchemaSelector from 'components/ui/SchemaSelector'
|
||||
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
|
||||
|
||||
Reference in new issue
Block a user