Address odd bug between data grid contextmenu and overlay (#38809)

* Address odd bug between data grid contextmenu and overlay

* nit

* Smol tweak

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`)

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 = () => {
       <DeleteUserModal
         visible={!!selectedUserToDelete}
         selectedUser={selectedUserToDelete}
-        onClose={() => setSelectedUserToDelete(undefined)}
+        onClose={() => {
+          setSelectedUserToDelete(undefined)
+          cleanPointerEventsNoneOnBody()
+        }}
         onDeleteSuccess={() => {
           if (selectedUserToDelete?.id === selectedUser) setSelectedUser(undefined)
           setSelectedUserToDelete(undefined)
+          cleanPointerEventsNoneOnBody(500)
         }}
       />
 

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}

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)
       <ConfirmationModal
         variant="destructive"
         visible={visible}
-        onCancel={() => onClose()}
+        onCancel={() => {
+          onClose()
+          cleanPointerEventsNoneOnBody()
+        }}
         onConfirm={handleDelete}
         title={`Delete the cron job`}
         loading={isLoading}
@@ -67,8 +71,11 @@ export const DeleteCronJob = ({ cronJob, visible, onClose }: DeleteCronJobProps)
     <TextConfirmModal
       variant="destructive"
       visible={visible}
-      onCancel={() => onClose()}
       onConfirm={handleDelete}
+      onCancel={() => {
+        onClose()
+        cleanPointerEventsNoneOnBody()
+      }}
       title="Delete this cron job"
       loading={isLoading}
       confirmLabel={`Delete cron job ${cronJob.jobname}`}

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)
+  }
+}