diff --git a/apps/studio/components/interfaces/Auth/Users/DeleteUserModal.tsx b/apps/studio/components/interfaces/Auth/Users/DeleteUserModal.tsx index ff513fb397f..8c596658878 100644 --- a/apps/studio/components/interfaces/Auth/Users/DeleteUserModal.tsx +++ b/apps/studio/components/interfaces/Auth/Users/DeleteUserModal.tsx @@ -3,7 +3,6 @@ import { toast } from 'sonner' import { useUserDeleteMutation } from 'data/auth/user-delete-mutation' import { User } from 'data/auth/users-infinite-query' -import { timeout } from 'lib/helpers' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' interface DeleteUserModalProps { @@ -29,7 +28,6 @@ export const DeleteUserModal = ({ }) const handleDeleteUser = async () => { - await timeout(200) if (!projectRef) return console.error('Project ref is required') if (selectedUser?.id === undefined) { return toast.error(`Failed to delete user: User ID not found`) diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx index 98d1e3316d8..e2819a9bdca 100644 --- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx +++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx @@ -30,7 +30,7 @@ import { THRESHOLD_COUNT } from 'data/table-rows/table-rows-count-query' import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled' import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' -import { isAtBottom } from 'lib/helpers' +import { cleanPointerEventsNoneOnBody, isAtBottom } from 'lib/helpers' import { Button, cn, @@ -680,10 +680,14 @@ export const UsersV2 = () => { setSelectedUserToDelete(undefined)} + onClose={() => { + setSelectedUserToDelete(undefined) + cleanPointerEventsNoneOnBody() + }} onDeleteSuccess={() => { if (selectedUserToDelete?.id === selectedUser) setSelectedUser(undefined) setSelectedUserToDelete(undefined) + cleanPointerEventsNoneOnBody(500) }} /> diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx index 0f1e2e2e85e..7240e0d909c 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx @@ -18,7 +18,7 @@ import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { BASE_PATH } from 'lib/constants' -import { isAtBottom } from 'lib/helpers' +import { cleanPointerEventsNoneOnBody, isAtBottom } from 'lib/helpers' import { Button, cn, LoadingLine, Sheet, SheetContent } from 'ui' import { Input } from 'ui-patterns/DataInputs/Input' import { formatCronJobColumns } from './CronJobs.utils' @@ -279,6 +279,7 @@ export const CronjobsTab = () => { setIsClosingCreateCronJobSheet(false) setCronJobForEditing(undefined) setCreateCronJobSheetShown(false) + cleanPointerEventsNoneOnBody(500) }} isClosing={isClosingCreateCronJobSheet} setIsClosing={setIsClosingCreateCronJobSheet} diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx index bfe269faf99..3e59394213f 100644 --- a/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx +++ b/apps/studio/components/interfaces/Integrations/CronJobs/DeleteCronJob.tsx @@ -6,6 +6,7 @@ import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-infinite-que import { useSendEventMutation } from 'data/telemetry/send-event-mutation' import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' +import { cleanPointerEventsNoneOnBody } from 'lib/helpers' import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal' import TextConfirmModal from 'ui-patterns/Dialogs/TextConfirmModal' @@ -53,7 +54,10 @@ export const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps) onClose()} + onCancel={() => { + onClose() + cleanPointerEventsNoneOnBody() + }} onConfirm={handleDelete} title={`Delete the cron job`} loading={isLoading} @@ -67,8 +71,11 @@ export const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps) onClose()} onConfirm={handleDelete} + onCancel={() => { + onClose() + cleanPointerEventsNoneOnBody() + }} title="Delete this cron job" loading={isLoading} confirmLabel={`Delete cron job ${cronJob.jobname}`} diff --git a/apps/studio/lib/helpers.ts b/apps/studio/lib/helpers.ts index 505b4712eea..7143e4cff21 100644 --- a/apps/studio/lib/helpers.ts +++ b/apps/studio/lib/helpers.ts @@ -331,3 +331,20 @@ export const formatCurrency = (amount: number | undefined | null): string | null return currencyFormatterDefault.format(amount) } } + +/** + * [Joshen] This is to address an incredibly weird bug that's happening between Data Grid + Shadcn ContextMenu + Shadcn Overlay + * This trifecta is causing a pointer events none style getting left behind on the body element which makes the dashboard become + * unresponsive, hence the attempt to clean things up here + * + * Timeout is made configurable as I've observed it requires a higher timeout sometimes (e.g when closing the cron job sheet) + */ +export const cleanPointerEventsNoneOnBody = (timeoutMs: number = 300) => { + if (typeof window !== 'undefined') { + setTimeout(() => { + if (document.body.style.pointerEvents === 'none') { + document.body.style.pointerEvents = '' + } + }, timeoutMs) + } +}