[pull] master from supabase:master

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/components/interfaces/QueryPerformance/QueryPerformanceGrid.tsx

@@ -145,7 +145,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
           const fillWidth = Math.min(percentage, 100)
 
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               <div
                 className={`absolute inset-0 bg-foreground transition-all duration-200 z-0`}
                 style={{
@@ -174,7 +174,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
 
         if (col.id === 'total_time') {
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               {isTime && typeof value === 'number' && !isNaN(value) && isFinite(value) ? (
                 <p
                   className={cn((value / 1000).toFixed(2) === '0.00' && 'text-foreground-lighter')}
@@ -194,7 +194,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
 
         if (col.id === 'calls') {
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               {typeof value === 'number' && !isNaN(value) && isFinite(value) ? (
                 <p className={cn(value === 0 && 'text-foreground-lighter')}>
                   {value.toLocaleString()}
@@ -208,7 +208,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
 
         if (col.id === 'max_time' || col.id === 'mean_time' || col.id === 'min_time') {
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               {typeof value === 'number' && !isNaN(value) && isFinite(value) ? (
                 <p className={cn(value.toFixed(0) === '0' && 'text-foreground-lighter')}>
                   {Math.round(value).toLocaleString()}ms
@@ -222,7 +222,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
 
         if (col.id === 'rows_read') {
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               {typeof value === 'number' && !isNaN(value) && isFinite(value) ? (
                 <p className={cn(value === 0 && 'text-foreground-lighter')}>
                   {value.toLocaleString()}
@@ -241,7 +241,7 @@ export const QueryPerformanceGrid = ({ queryPerformanceQuery }: QueryPerformance
 
         if (col.id === 'cache_hit_rate') {
           return (
-            <div className="w-full flex flex-col justify-center text-xs">
+            <div className="w-full flex flex-col justify-center text-xs text-right tabular-nums">
               {typeof value === 'string' ? (
                 <p
                   className={cn(

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

apps/www/app/api-v2/cms-posts/route.ts

@@ -6,10 +6,11 @@ import { generateReadingTime } from '~/lib/helpers'
 // Lightweight runtime for better performance
 export const runtime = 'edge'
 
-// CORS headers for cross-origin requests
 const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+  'CF-Access-Client-Id': process.env.CF_ACCESS_CLIENT_ID ?? '',
+  'CF-Access-Client-Secret': process.env.CF_ACCESS_CLIENT_SECRET ?? '',
 }
 
 // Lightweight TOC generation for edge runtime

turbo.json

@@ -114,6 +114,8 @@
       "dependsOn": ["^build"],
       "env": [
         "ANALYZE",
+        "CF_ACCESS_CLIENT_ID",
+        "CF_ACCESS_CLIENT_SECRET",
         "CMS_API_KEY",
         "CMS_PREVIEW_SECRET",
         "CMS_SITE_ORIGIN",