From 0f4ad7dad352eeee83097366cce1f3846480b820 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 5 Aug 2025 13:52:27 +0700
Subject: [PATCH 1/7] Factor in filters and sorts for export via CLI option
 (#37399)

* Factor in filters and sorts for export via CLI option

* Add align

* Update

* Smol fix
---
 .../grid/components/header/ExportDialog.tsx   | 55 +++++++++++++-----
 .../grid/components/header/Header.tsx         |  8 +--
 .../TableEditorLayout/EntityListItem.tsx      | 17 ++++--
 .../TableEditorLayout/TableEditorMenu.tsx     | 30 ++++++----
 .../data/table-rows/table-rows-query.ts       | 56 ++++++++++++-------
 .../pages/project/[ref]/editor/[id].tsx       |  2 +-
 .../pages/project/[ref]/editor/index.tsx      |  2 +-
 .../studio/pages/project/[ref]/editor/new.tsx |  2 +-
 8 files changed, 115 insertions(+), 57 deletions(-)

diff --git a/apps/studio/components/grid/components/header/ExportDialog.tsx b/apps/studio/components/grid/components/header/ExportDialog.tsx
index 59ffe39bd9ac9..93aa9ef8eccf5 100644
--- a/apps/studio/components/grid/components/header/ExportDialog.tsx
+++ b/apps/studio/components/grid/components/header/ExportDialog.tsx
@@ -1,8 +1,13 @@
+import { useState } from 'react'
+
 import { useParams } from 'common'
+import { Filter, Sort, SupaTable } from 'components/grid/types'
 import { getConnectionStrings } from 'components/interfaces/Connect/DatabaseSettings.utils'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
+import { getAllTableRowsSql } from 'data/table-rows/table-rows-query'
 import { pluckObjectFields } from 'lib/helpers'
-import { useState } from 'react'
+import { RoleImpersonationState, wrapWithRoleImpersonation } from 'lib/role-impersonation'
+import { useRoleImpersonationStateSnapshot } from 'state/role-impersonation-state'
 import {
   Button,
   cn,
@@ -22,13 +27,25 @@ import {
 import { Admonition } from 'ui-patterns'
 
 interface ExportDialogProps {
-  table?: { name: string; schema: string }
+  table?: SupaTable
+  filters?: Filter[]
+  sorts?: Sort[]
+  ignoreRoleImpersonation?: boolean
+
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
-export const ExportDialog = ({ table, open, onOpenChange }: ExportDialogProps) => {
+export const ExportDialog = ({
+  table,
+  filters = [],
+  sorts = [],
+  ignoreRoleImpersonation = false,
+  open,
+  onOpenChange,
+}: ExportDialogProps) => {
   const { ref: projectRef } = useParams()
+  const roleImpersonationState = useRoleImpersonationStateSnapshot()
 
   const [selectedTab, setSelectedTab] = useState<string>('csv')
 
@@ -48,10 +65,18 @@ export const ExportDialog = ({ table, open, onOpenChange }: ExportDialogProps) =
   })
 
   const outputName = `${table?.name}_rows`
+  const queryChains = !table ? undefined : getAllTableRowsSql({ table, sorts, filters })
+  const query = !!queryChains
+    ? ignoreRoleImpersonation
+      ? queryChains.toSql()
+      : wrapWithRoleImpersonation(
+          queryChains.toSql(),
+          roleImpersonationState as RoleImpersonationState
+        )
+    : ''
 
   const csvExportCommand = `
-${connectionStrings.direct.psql} -c "COPY (SELECT * FROM "${table?.schema}"."${table?.name}") TO STDOUT WITH CSV HEADER DELIMITER ',';" > ${outputName}.csv
-`.trim()
+${connectionStrings.direct.psql} -c "COPY (${query}) TO STDOUT WITH CSV HEADER DELIMITER ',';" > ${outputName}.csv`.trim()
 
   const sqlExportCommand = `
 pg_dump -h ${db_host} -p ${db_port} -d ${db_name} -U ${db_user} --table="${table?.schema}.${table?.name}" --data-only --column-inserts > ${outputName}.sql
@@ -95,6 +120,12 @@ pg_dump -h ${db_host} -p ${db_port} -d ${db_name} -U ${db_user} --table="${table
                 value={sqlExportCommand}
                 className="[&_code]:text-[12px] [&_code]:text-foreground"
               />
+              <Admonition
+                type="note"
+                className="mt-2"
+                title="Filters are not supported when exporting as SQL via pg_dump"
+                description="If you'd like to export as SQL, we recommend creating a view first then exporting the data from there via pg_dump instead"
+              />
             </TabsContent_Shadcn_>
           </Tabs_Shadcn_>
 
@@ -107,15 +138,11 @@ pg_dump -h ${db_host} -p ${db_port} -d ${db_name} -U ${db_user} --table="${table
           </p>
 
           {selectedTab === 'sql' && (
-            <Admonition
-              type="note"
-              title="The pg_dump version needs to match your Postgres version"
-            >
-              <p className="!leading-normal">
-                If you run into a server version mismatch error, you will need to update{' '}
-                <code>pg_dump</code> before running the command.
-              </p>
-            </Admonition>
+            <p className="text-sm text-foreground-light">
+              Note: <code>pg_dump</code> needs to match your project's Postgres version. If you run
+              into a server version mismatch error, you will need to update <code>pg_dump</code>{' '}
+              before running the command.
+            </p>
           )}
         </DialogSection>
         <DialogFooter>
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index baeeecc662fcf..bb401db90e8ac 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -504,11 +504,9 @@ const RowHeader = () => {
               Export
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent className={snap.allRowsSelected ? 'w-52' : 'w-40'}>
+          <DropdownMenuContent align="start" className={snap.allRowsSelected ? 'w-52' : 'w-40'}>
             <DropdownMenuItem onClick={onRowsExportCSV}>Export as CSV</DropdownMenuItem>
             <DropdownMenuItem onClick={onRowsExportSQL}>Export as SQL</DropdownMenuItem>
-            {/* [Joshen] Should make this available for all cases, but that'll involve updating
-            the Dialog's SQL output to be dynamic based on any filters applied */}
             {snap.allRowsSelected ? (
               <DropdownMenuItem className="group" onClick={() => setShowExportModal(true)}>
                 <div>
@@ -535,7 +533,9 @@ const RowHeader = () => {
       </div>
 
       <ExportDialog
-        table={{ name: snap.table.name, schema: snap.table.schema ?? '' }}
+        table={snap.table}
+        filters={filters}
+        sorts={sorts}
         open={showExportModal}
         onOpenChange={() => setShowExportModal(false)}
       />
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index e693516ccb869..c8ee912c07f37 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -1,5 +1,5 @@
 import saveAs from 'file-saver'
-import { Clipboard, Copy, Download, Edit, Lock, MoreHorizontal, Trash } from 'lucide-react'
+import { Clipboard, Copy, Download, Edit, Lock, MoreVertical, Trash } from 'lucide-react'
 import Link from 'next/link'
 import Papa from 'papaparse'
 import { toast } from 'sonner'
@@ -30,6 +30,7 @@ import { useTableEditorStateSnapshot } from 'state/table-editor'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import {
   Badge,
+  Button,
   cn,
   copyToClipboard,
   DropdownMenu,
@@ -242,7 +243,7 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
           isOpened: isOpened && !isPreview,
           isPreview,
         }),
-        'px-4'
+        'pl-4 pr-1'
       )}
       onDoubleClick={(e) => {
         e.preventDefault()
@@ -285,8 +286,16 @@ const EntityListItem: ItemRenderer<Entity, EntityListItemProps> = ({
 
         {canEdit && (
           <DropdownMenu>
-            <DropdownMenuTrigger className="text-foreground-lighter transition-all text-transparent group-hover:text-foreground data-[state=open]:text-foreground">
-              <MoreHorizontal size={14} strokeWidth={2} />
+            <DropdownMenuTrigger
+              asChild
+              className="text-foreground-lighter transition-all text-transparent group-hover:text-foreground data-[state=open]:text-foreground"
+            >
+              <Button
+                type="text"
+                className="w-6 h-6"
+                icon={<MoreVertical size={14} strokeWidth={2} />}
+                onClick={(e) => e.preventDefault()}
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent side="bottom" align="start" className="w-44">
               <DropdownMenuItem
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
index 27ea4e9ea551d..bc97706c6271f 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorMenu.tsx
@@ -5,6 +5,8 @@ import { useEffect, useMemo, useState } from 'react'
 import { useParams } from 'common'
 import { useBreakpoint } from 'common/hooks/useBreakpoint'
 import { ExportDialog } from 'components/grid/components/header/ExportDialog'
+import { parseSupaTable } from 'components/grid/SupabaseGrid.utils'
+import { SupaTable } from 'components/grid/types'
 import { ProtectedSchemaWarning } from 'components/interfaces/Database/ProtectedSchemaWarning'
 import EditorMenuListSkeleton from 'components/layouts/TableEditorLayout/EditorMenuListSkeleton'
 import AlertError from 'components/ui/AlertError'
@@ -13,7 +15,7 @@ import InfiniteList from 'components/ui/InfiniteList'
 import SchemaSelector from 'components/ui/SchemaSelector'
 import { ENTITY_TYPE } from 'data/entity-types/entity-type-constants'
 import { useEntityTypesQuery } from 'data/entity-types/entity-types-infinite-query'
-import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
+import { getTableEditor, useTableEditorQuery } from 'data/table-editor/table-editor-query'
 import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { useLocalStorage } from 'hooks/misc/useLocalStorage'
 import { useQuerySchemaState } from 'hooks/misc/useSchemaQueryState'
@@ -40,14 +42,14 @@ import EntityListItem from './EntityListItem'
 import { TableMenuEmptyState } from './TableMenuEmptyState'
 
 export const TableEditorMenu = () => {
-  const { id: _id } = useParams()
+  const { id: _id, ref: projectRef } = useParams()
   const id = _id ? Number(_id) : undefined
   const snap = useTableEditorStateSnapshot()
   const { selectedSchema, setSelectedSchema } = useQuerySchemaState()
   const isMobile = useBreakpoint()
 
   const [searchText, setSearchText] = useState<string>('')
-  const [tableToExport, setTableToExport] = useState<{ name: string; schema: string }>()
+  const [tableToExport, setTableToExport] = useState<SupaTable>()
   const [visibleTypes, setVisibleTypes] = useState<string[]>(Object.values(ENTITY_TYPE))
   const [sort, setSort] = useLocalStorage<'alphabetical' | 'grouped-alphabetical'>(
     'table-editor-sort',
@@ -93,13 +95,24 @@ export const TableEditorMenu = () => {
     id,
   })
 
+  const tableEditorTabsCleanUp = useTableEditorTabsCleanUp()
+
+  const onSelectExportCLI = async (id: number) => {
+    const table = await getTableEditor({
+      id: id,
+      projectRef,
+      connectionString: project?.connectionString,
+    })
+    const supaTable = table && parseSupaTable(table)
+    setTableToExport(supaTable)
+  }
+
   useEffect(() => {
     if (selectedTable?.schema) {
       setSelectedSchema(selectedTable.schema)
     }
   }, [selectedTable?.schema])
 
-  const tableEditorTabsCleanUp = useTableEditorTabsCleanUp()
   useEffect(() => {
     // Clean up tabs + recent items for any tables that might have been removed outside of the dashboard session
     if (entityTypes && !searchText) {
@@ -255,11 +268,7 @@ export const TableEditorMenu = () => {
                       projectRef: project?.ref!,
                       id: Number(id),
                       isSchemaLocked,
-                      onExportCLI: () => {
-                        const entity = entityTypes?.find((x) => x.id === id)
-                        if (!entity) return
-                        setTableToExport({ name: entity.name, schema: entity.schema })
-                      },
+                      onExportCLI: () => onSelectExportCLI(Number(id)),
                     }}
                     getItemSize={() => 28}
                     hasNextPage={hasNextPage}
@@ -274,6 +283,7 @@ export const TableEditorMenu = () => {
       </div>
 
       <ExportDialog
+        ignoreRoleImpersonation
         table={tableToExport}
         open={!!tableToExport}
         onOpenChange={(open) => {
@@ -283,5 +293,3 @@ export const TableEditorMenu = () => {
     </>
   )
 }
-
-export default TableEditorMenu
diff --git a/apps/studio/data/table-rows/table-rows-query.ts b/apps/studio/data/table-rows/table-rows-query.ts
index 5c8ef994fb6af..3e56d290f6f09 100644
--- a/apps/studio/data/table-rows/table-rows-query.ts
+++ b/apps/studio/data/table-rows/table-rows-query.ts
@@ -67,35 +67,15 @@ export async function executeWithRetry<T>(
   throw new Error('Max retries reached without success')
 }
 
-// TODO: fetchAllTableRows is used for CSV export, but since it doesn't actually truncate anything, (compare to getTableRows)
-// this is not suitable and will cause crashes on the pg-meta side given big tables
-// (either when the number of rows exceeds Blob size or if the columns in the rows are too large).
-// We should handle those errors gracefully, maybe adding a hint to the user about how to extract
-// the CSV to their machine via a direct command line connection (e.g., pg_dump), which will be much more
-// reliable for large data extraction.
-export const fetchAllTableRows = async ({
-  projectRef,
-  connectionString,
+export const getAllTableRowsSql = ({
   table,
   filters = [],
   sorts = [],
-  roleImpersonationState,
-  progressCallback,
 }: {
-  projectRef: string
-  connectionString?: string | null
   table: SupaTable
   filters?: Filter[]
   sorts?: Sort[]
-  roleImpersonationState?: RoleImpersonationState
-  progressCallback?: (value: number) => void
 }) => {
-  if (IS_PLATFORM && !connectionString) {
-    console.error('Connection string is required')
-    return []
-  }
-
-  const rows: any[] = []
   const query = new Query()
 
   const arrayBasedColumns = table.columns
@@ -129,6 +109,40 @@ export const fetchAllTableRows = async ({
     })
   }
 
+  return queryChains
+}
+
+// TODO: fetchAllTableRows is used for CSV export, but since it doesn't actually truncate anything, (compare to getTableRows)
+// this is not suitable and will cause crashes on the pg-meta side given big tables
+// (either when the number of rows exceeds Blob size or if the columns in the rows are too large).
+// We should handle those errors gracefully, maybe adding a hint to the user about how to extract
+// the CSV to their machine via a direct command line connection (e.g., pg_dump), which will be much more
+// reliable for large data extraction.
+export const fetchAllTableRows = async ({
+  projectRef,
+  connectionString,
+  table,
+  filters = [],
+  sorts = [],
+  roleImpersonationState,
+  progressCallback,
+}: {
+  projectRef: string
+  connectionString?: string | null
+  table: SupaTable
+  filters?: Filter[]
+  sorts?: Sort[]
+  roleImpersonationState?: RoleImpersonationState
+  progressCallback?: (value: number) => void
+}) => {
+  if (IS_PLATFORM && !connectionString) {
+    console.error('Connection string is required')
+    return []
+  }
+
+  const rows: any[] = []
+  const queryChains = getAllTableRowsSql({ table, sorts, filters })
+
   const rowsPerPage = 500
   const THROTTLE_DELAY = 500
 
diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx
index 7409c843e69f8..3a1f9c8697ae2 100644
--- a/apps/studio/pages/project/[ref]/editor/[id].tsx
+++ b/apps/studio/pages/project/[ref]/editor/[id].tsx
@@ -6,7 +6,7 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
 import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
-import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu'
+import { TableEditorMenu } from 'components/layouts/TableEditorLayout/TableEditorMenu'
 import { useTableEditorQuery } from 'data/table-editor/table-editor-query'
 import { createTabId, useTabsStateSnapshot } from 'state/tabs'
 import type { NextPageWithLayout } from 'types'
diff --git a/apps/studio/pages/project/[ref]/editor/index.tsx b/apps/studio/pages/project/[ref]/editor/index.tsx
index 55797c6e53def..71e4686868b24 100644
--- a/apps/studio/pages/project/[ref]/editor/index.tsx
+++ b/apps/studio/pages/project/[ref]/editor/index.tsx
@@ -6,7 +6,7 @@ import SidePanelEditor from 'components/interfaces/TableGridEditor/SidePanelEdit
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
 import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
-import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu'
+import { TableEditorMenu } from 'components/layouts/TableEditorLayout/TableEditorMenu'
 import { NewTab } from 'components/layouts/Tabs/NewTab'
 import { useAppStateSnapshot } from 'state/app-state'
 import { editorEntityTypes, useTabsStateSnapshot } from 'state/tabs'
diff --git a/apps/studio/pages/project/[ref]/editor/new.tsx b/apps/studio/pages/project/[ref]/editor/new.tsx
index 3a2e12a9e3b26..48546300b9268 100644
--- a/apps/studio/pages/project/[ref]/editor/new.tsx
+++ b/apps/studio/pages/project/[ref]/editor/new.tsx
@@ -5,7 +5,7 @@ import { SidePanelEditor } from 'components/interfaces/TableGridEditor'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import { EditorBaseLayout } from 'components/layouts/editors/EditorBaseLayout'
 import TableEditorLayout from 'components/layouts/TableEditorLayout/TableEditorLayout'
-import TableEditorMenu from 'components/layouts/TableEditorLayout/TableEditorMenu'
+import { TableEditorMenu } from 'components/layouts/TableEditorLayout/TableEditorMenu'
 import { NewTab } from 'components/layouts/Tabs/NewTab'
 import type { NextPageWithLayout } from 'types'
 

From 81dda5b371292da014ecd3be93891b03d4fcf3c5 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 5 Aug 2025 14:02:41 +0700
Subject: [PATCH 2/7] Add link to edge function logs for cron history if cron
 is using edge function (#37531)

* Add link to edge function logs for cron history if cron is using edge function

* Patch
---
 .../CronJobs/CreateCronJobSheet.tsx           |  1 +
 .../Integrations/CronJobs/CronJobsTab.tsx     |  2 +-
 .../CronJobs/EdgeFunctionSection.tsx          |  3 +-
 .../Integrations/CronJobs/PreviousRunsTab.tsx | 81 ++++++++++++++-----
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
index 4bc501ffe0b7b..14337533f7a54 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CreateCronJobSheet.tsx
@@ -119,6 +119,7 @@ const sqlFunctionSchema = z.object({
   // When editing a cron job, we want to keep the original command as a snippet in case the user wants to manually edit it
   snippet: z.string().trim(),
 })
+
 const sqlSnippetSchema = z.object({
   type: z.literal('sql_snippet'),
   snippet: z.string().trim().min(1),
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
index aa26e6410958c..b8c55cfdddeb1 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobsTab.tsx
@@ -193,7 +193,7 @@ export const CronjobsTab = () => {
             }}
             onScroll={handleScroll}
             renderers={{
-              renderRow(key, props) {
+              renderRow(_, props) {
                 return (
                   <Row
                     key={props.row.jobid}
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
index da07ff1a4662c..4f4148ff62067 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/EdgeFunctionSection.tsx
@@ -34,8 +34,8 @@ const buildFunctionUrl = (slug: string, projectRef: string, restUrl?: string) =>
 }
 
 export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
-  const { project: selectedProject } = useProjectContext()
   const { ref } = useParams()
+  const { project: selectedProject } = useProjectContext()
   const { data: functions, isSuccess, isLoading } = useEdgeFunctionsQuery({ projectRef: ref })
 
   const edgeFunctions = useMemo(() => functions ?? [], [functions])
@@ -52,6 +52,7 @@ export const EdgeFunctionSection = ({ form }: HTTPRequestFieldsProps) => {
       form.setValue('values.edgeFunctionName', functionUrl)
     }
   }, [edgeFunctions, form, isSuccess, selectedProject?.ref, selectedProject?.restUrl])
+
   return (
     <SheetSection className="flex flex-col gap-6">
       <FormField_Shadcn_
diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
index b94f6ca2a4ce8..64f3a7090005f 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/PreviousRunsTab.tsx
@@ -1,7 +1,7 @@
 import { toString as CronToString } from 'cronstrue'
 import { CircleCheck, CircleX, List, Loader } from 'lucide-react'
 import Link from 'next/link'
-import { UIEvent, useCallback, useEffect, useMemo } from 'react'
+import { UIEvent, useCallback, useMemo } from 'react'
 import DataGrid, { Column, Row } from 'react-data-grid'
 
 import { useParams } from 'common'
@@ -11,6 +11,8 @@ import {
   CronJobRun,
   useCronJobRunsInfiniteQuery,
 } from 'data/database-cron-jobs/database-cron-jobs-runs-infinite-query'
+import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
+import dayjs from 'dayjs'
 import {
   Button,
   cn,
@@ -20,8 +22,14 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+import { TimestampInfo } from 'ui-patterns'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
-import { calculateDuration, formatDate, isSecondsFormat } from './CronJobs.utils'
+import {
+  calculateDuration,
+  formatDate,
+  isSecondsFormat,
+  parseCronJobCommand,
+} from './CronJobs.utils'
 import CronJobsEmptyState from './CronJobsEmptyState'
 
 const cronJobColumns = [
@@ -113,6 +121,19 @@ const columns = cronJobColumns.map((col) => {
     renderCell: (props) => {
       const value = col.value(props.row)
 
+      if (['start_time', 'end_time'].includes(col.id)) {
+        const formattedValue = dayjs((props.row as any)[(col as any).id]).valueOf()
+        return (
+          <div className="flex items-center">
+            <TimestampInfo
+              utcTimestamp={formattedValue}
+              labelFormat="DD MMM YYYY HH:mm:ss (ZZ)"
+              className="font-mono text-xs"
+            />
+          </div>
+        )
+      }
+
       return (
         <div
           className={cn(
@@ -156,17 +177,17 @@ export const PreviousRunsTab = () => {
       connectionString: project?.connectionString,
       jobId: jobId,
     },
-    { enabled: !!jobId, staleTime: 30 }
+    { enabled: !!jobId, staleTime: 30000 }
   )
 
-  useEffect(() => {
-    // Refetch only the first page
-    const timerId = setInterval(() => {
-      refetch({ refetchPage: (_page, index) => index === 0 })
-    }, 30000)
+  const { data: edgeFunctions = [] } = useEdgeFunctionsQuery({ projectRef: project?.ref })
 
-    return () => clearInterval(timerId)
-  }, [refetch])
+  const cronJobRuns = useMemo(() => data?.pages.flatMap((p) => p) || [], [data?.pages])
+  const cronJobValues = parseCronJobCommand(job?.command || '', project?.ref!)
+  const edgeFunction =
+    cronJobValues.type === 'edge_function' ? cronJobValues.edgeFunctionName : undefined
+  const edgeFunctionSlug = edgeFunction?.split('/functions/v1/').pop()
+  const isValidEdgeFunction = edgeFunctions.some((x) => x.slug === edgeFunctionSlug)
 
   const handleScroll = useCallback(
     (event: UIEvent<HTMLDivElement>) => {
@@ -178,8 +199,6 @@ export const PreviousRunsTab = () => {
     [fetchNextPage, isLoadingCronJobRuns]
   )
 
-  const cronJobRuns = useMemo(() => data?.pages.flatMap((p) => p) || [], [data?.pages])
-
   return (
     <div className="h-full flex flex-col">
       <LoadingLine loading={isFetching} />
@@ -251,11 +270,16 @@ export const PreviousRunsTab = () => {
                   </SimpleCodeBlock>
                   <div className="bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background-200 to-transparent absolute " />
                 </TooltipTrigger>
-                <TooltipContent side="bottom" align="center" className="max-w-[400px] text-wrap">
+                <TooltipContent
+                  side="bottom"
+                  align="center"
+                  className="max-w-[400px] text-wrap p-0"
+                >
+                  <p className="text-xs font-mono px-2 py-1 border-b bg-surface-100">Command</p>
                   <SimpleCodeBlock
                     showCopy={false}
                     className="sql"
-                    parentClassName=" [&>div>span]:text-xs bg-alternative-200 !p-2 rounded-md"
+                    parentClassName=" [&>div>span]:text-xs bg-alternative-200 !p-3"
                   >
                     {job?.command}
                   </SimpleCodeBlock>
@@ -265,12 +289,29 @@ export const PreviousRunsTab = () => {
 
             <div className="grid gap-y-2">
               <h3 className="text-sm">Explore</h3>
-              <Button asChild type="outline" icon={<List strokeWidth={1.5} size="14" />}>
-                {/* [Terry] need to link to the exact jobid, but not currently supported */}
-                <Link target="_blank" href={`/project/${project?.ref}/logs/pgcron-logs/`}>
-                  View logs
-                </Link>
-              </Button>
+              <div className="flex items-center gap-x-2">
+                <Button asChild type="outline" icon={<List strokeWidth={1.5} size="14" />}>
+                  {/* [Terry] need to link to the exact jobid, but not currently supported */}
+                  <Link
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    href={`/project/${project?.ref}/logs/pgcron-logs/`}
+                  >
+                    View Cron logs
+                  </Link>
+                </Button>
+                {isValidEdgeFunction && (
+                  <Button asChild type="outline">
+                    <Link
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href={`/project/${project?.ref}/functions/${edgeFunctionSlug}/logs`}
+                    >
+                      View Edge Function logs
+                    </Link>
+                  </Button>
+                )}
+              </div>
             </div>
           </>
         )}

From 47249dc8b45b14cd84d7ae467d65ac659e33ab95 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 5 Aug 2025 14:14:28 +0700
Subject: [PATCH 3/7] Add a CTA to run the command of the cron job (#37621)

---
 .../CronJobs/CronJobTableCell.tsx             | 32 ++++++++-
 .../database-cron-job-run-mutation.ts         | 66 +++++++++++++++++++
 2 files changed, 95 insertions(+), 3 deletions(-)
 create mode 100644 apps/studio/data/database-cron-jobs/database-cron-job-run-mutation.ts

diff --git a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
index 8ea872bb67a55..ea33c32f9285e 100644
--- a/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
+++ b/apps/studio/components/interfaces/Integrations/CronJobs/CronJobTableCell.tsx
@@ -1,9 +1,10 @@
 import dayjs from 'dayjs'
-import { Clipboard, Edit, MoreVertical, Trash } from 'lucide-react'
+import { Clipboard, Edit, MoreVertical, Play, Trash } from 'lucide-react'
 import { parseAsString, useQueryState } from 'nuqs'
 import { useState } from 'react'
 import { toast } from 'sonner'
 
+import { useDatabaseCronJobRunCommandMutation } from 'data/database-cron-jobs/database-cron-job-run-mutation'
 import { CronJob } from 'data/database-cron-jobs/database-cron-jobs-infinite-query'
 import { useDatabaseCronJobToggleMutation } from 'data/database-cron-jobs/database-cron-jobs-toggle-mutation'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
@@ -74,15 +75,29 @@ export const CronJobTableCell = ({
           ? getNextRun(schedule, latest_run)
           : value
 
+  const { mutate: runCronJob, isLoading: isRunning } = useDatabaseCronJobRunCommandMutation({
+    onSuccess: () => {
+      toast.success(`Command from "${jobname}" ran successfully`)
+    },
+  })
+
   const { mutate: toggleDatabaseCronJob, isLoading: isToggling } = useDatabaseCronJobToggleMutation(
     {
-      onSuccess: () => {
-        toast.success('Successfully asdasd')
+      onSuccess: (_, vars) => {
+        toast.success(`Successfully ${vars.active ? 'enabled' : 'disabled'} "${jobname}"`)
         setShowToggleModal(false)
       },
     }
   )
 
+  const onRunCronJob = () => {
+    runCronJob({
+      projectRef: project?.ref!,
+      connectionString: project?.connectionString,
+      jobId: jobid,
+    })
+  }
+
   const onConfirmToggle = () => {
     toggleDatabaseCronJob({
       projectRef: project?.ref!,
@@ -100,12 +115,23 @@ export const CronJobTableCell = ({
           <DropdownMenuTrigger asChild>
             <Button
               type="text"
+              loading={isRunning}
               className="h-6 w-6"
               icon={<MoreVertical />}
               onClick={(e) => e.stopPropagation()}
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-42">
+            <DropdownMenuItem
+              className="gap-x-2"
+              onClick={(e) => {
+                e.stopPropagation()
+                onRunCronJob()
+              }}
+            >
+              <Play size={12} />
+              Run command
+            </DropdownMenuItem>
             <DropdownMenuItem
               className="gap-x-2"
               onClick={(e) => {
diff --git a/apps/studio/data/database-cron-jobs/database-cron-job-run-mutation.ts b/apps/studio/data/database-cron-jobs/database-cron-job-run-mutation.ts
new file mode 100644
index 0000000000000..2e88d0ed8a02c
--- /dev/null
+++ b/apps/studio/data/database-cron-jobs/database-cron-job-run-mutation.ts
@@ -0,0 +1,66 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { toast } from 'sonner'
+
+import { executeSql } from 'data/sql/execute-sql-query'
+import type { ResponseError } from 'types'
+import { databaseCronJobsKeys } from './keys'
+
+export type DatabaseCronJobRunVariables = {
+  projectRef: string
+  connectionString?: string | null
+  jobId: number
+}
+
+// [Joshen] JFYI pg_cron doesn't support a run job function OOB just yet
+// So this is just merely running the command from within the cron job, will not reset the cron job's timer
+// https://github.com/citusdata/pg_cron/issues/226
+export async function runDatabaseCronJobCommand({
+  projectRef,
+  connectionString,
+  jobId,
+}: DatabaseCronJobRunVariables) {
+  const { result } = await executeSql({
+    projectRef,
+    connectionString,
+    sql: `
+DO $$
+DECLARE
+  job_command text;
+BEGIN
+  select command into job_command from cron.job where jobid = ${jobId};
+  EXECUTE job_command;
+END $$;
+`.trim(),
+    queryKey: databaseCronJobsKeys.create(),
+  })
+
+  return result
+}
+
+type DatabaseCronJobRunData = Awaited<ReturnType<typeof runDatabaseCronJobCommand>>
+
+export const useDatabaseCronJobRunCommandMutation = ({
+  onSuccess,
+  onError,
+  ...options
+}: Omit<
+  UseMutationOptions<DatabaseCronJobRunData, ResponseError, DatabaseCronJobRunVariables>,
+  'mutationFn'
+> = {}) => {
+  return useMutation<DatabaseCronJobRunData, ResponseError, DatabaseCronJobRunVariables>(
+    (vars) => runDatabaseCronJobCommand(vars),
+    {
+      async onSuccess(data, variables, context) {
+        await onSuccess?.(data, variables, context)
+      },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to run cron job command: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
+      ...options,
+    }
+  )
+}

From eeaf7e3c38ded264c8f8c81871b72c98cc7bfa90 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 5 Aug 2025 14:26:20 +0700
Subject: [PATCH 4/7] Minor clean ups (#37653)

* Minor clean ups

* Clean up

* Standardize more icon for table and storage editor

* update copy
---
 .../interfaces/Storage/BucketRow.tsx          |  4 +--
 .../layouts/AuthLayout/AuthLayout.tsx         | 27 +------------------
 .../layouts/ProjectLayout/ProductMenuBar.tsx  | 15 ++++++-----
 .../layouts/ProjectLayout/ProjectLayout.tsx   | 14 ++++++----
 .../TableEditorLayout/TableEditorLayout.tsx   |  5 ++--
 .../layouts/editors/EditorBaseLayout.tsx      | 18 ++++++++++---
 .../ui/AIAssistantPanel/AIAssistant.tsx       |  2 +-
 .../components/ui/ProductMenu/ProductMenu.tsx |  2 +-
 .../pages/project/[ref]/editor/[id].tsx       |  6 ++++-
 .../pages/project/[ref]/editor/index.tsx      |  6 ++++-
 .../studio/pages/project/[ref]/editor/new.tsx |  6 ++++-
 apps/studio/styles/main.scss                  |  1 -
 12 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/apps/studio/components/interfaces/Storage/BucketRow.tsx b/apps/studio/components/interfaces/Storage/BucketRow.tsx
index f272a89c53dea..78ef08e09c0b0 100644
--- a/apps/studio/components/interfaces/Storage/BucketRow.tsx
+++ b/apps/studio/components/interfaces/Storage/BucketRow.tsx
@@ -1,6 +1,6 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
 import { noop } from 'lodash'
-import { ChevronDown, Columns3, Edit2, Trash, XCircle } from 'lucide-react'
+import { Columns3, Edit2, MoreVertical, Trash, XCircle } from 'lucide-react'
 import Link from 'next/link'
 
 import type { Bucket } from 'data/storage/buckets-query'
@@ -76,7 +76,7 @@ const BucketRow = ({
       {canUpdateBuckets && isSelected ? (
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button type="text" icon={<ChevronDown />} className="mr-1 p-1.5 w-7" />
+            <Button type="text" icon={<MoreVertical />} className="mr-1 h-6 w-6" />
           </DropdownMenuTrigger>
           <DropdownMenuContent side="bottom" align="start">
             {bucket.type !== 'ANALYTICS' && (
diff --git a/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx b/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
index e9b1ab5ef550a..002d48acbd82f 100644
--- a/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
+++ b/apps/studio/components/layouts/AuthLayout/AuthLayout.tsx
@@ -1,46 +1,21 @@
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { PropsWithChildren } from 'react'
 
 import { useParams } from 'common'
-import { useIsColumnLevelPrivilegesEnabled } from 'components/interfaces/App/FeaturePreview/FeaturePreviewContext'
 import { ProductMenu } from 'components/ui/ProductMenu'
 import { useAuthConfigPrefetch } from 'data/auth/auth-config-query'
 import { withAuth } from 'hooks/misc/withAuth'
-import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, Alert_Shadcn_, Button } from 'ui'
 import ProjectLayout from '../ProjectLayout/ProjectLayout'
 import { generateAuthMenu } from './AuthLayout.utils'
 
 const AuthProductMenu = () => {
   const router = useRouter()
   const { ref: projectRef = 'default' } = useParams()
-  const columnLevelPrivileges = useIsColumnLevelPrivilegesEnabled()
 
   useAuthConfigPrefetch({ projectRef })
   const page = router.pathname.split('/')[4]
 
-  return (
-    <>
-      <ProductMenu page={page} menu={generateAuthMenu(projectRef)} />
-      {columnLevelPrivileges && (
-        <div className="px-3">
-          <Alert_Shadcn_>
-            <AlertTitle_Shadcn_ className="text-sm">
-              Column Privileges has been shifted
-            </AlertTitle_Shadcn_>
-            <AlertDescription_Shadcn_ className="text-xs">
-              <p className="mb-2">It can now be found in the menu under the database section.</p>
-              <Button asChild type="default" size="tiny">
-                <Link href={`/project/${projectRef}/database/column-privileges`}>
-                  Head over to Database
-                </Link>
-              </Button>
-            </AlertDescription_Shadcn_>
-          </Alert_Shadcn_>
-        </div>
-      )}
-    </>
-  )
+  return <ProductMenu page={page} menu={generateAuthMenu(projectRef)} />
 }
 
 const AuthLayout = ({ children }: PropsWithChildren<{}>) => {
diff --git a/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx b/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
index b579a00c0786f..3895c1115a44a 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProductMenuBar.tsx
@@ -1,21 +1,22 @@
 import { PropsWithChildren } from 'react'
+import { cn } from 'ui'
 
 interface ProductMenuBarProps {
   title: string
+  className?: string
 }
 
-const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarProps>) => {
+const ProductMenuBar = ({ title, children, className }: PropsWithChildren<ProductMenuBarProps>) => {
   return (
     <div
       /**
        * id used in playwright-tests/tests/snapshot/spec/table-editor.spec.ts
        * */
       id="spec-click-target"
-      className={[
-        'hide-scrollbar flex flex-col w-full h-full', // Layout
-        'bg-dash-sidebar',
-        'border-default ',
-      ].join(' ')}
+      className={cn(
+        'flex flex-col w-full h-full', // Layout
+        'hide-scrollbar bg-dash-sidebar border-default'
+      )}
     >
       <div
         className="border-default flex max-h-12 items-center border-b px-6"
@@ -23,7 +24,7 @@ const ProductMenuBar = ({ title, children }: PropsWithChildren<ProductMenuBarPro
       >
         <h4 className="text-lg">{title}</h4>
       </div>
-      <div className="flex-grow overflow-y-auto">{children}</div>
+      <div className={cn('flex-grow overflow-y-auto', className)}>{children}</div>
     </div>
   )
 }
diff --git a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
index 1e2a94dc71956..f183b8a9bb52e 100644
--- a/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx
@@ -10,8 +10,8 @@ import { AIAssistant } from 'components/ui/AIAssistantPanel/AIAssistant'
 import { EditorPanel } from 'components/ui/EditorPanel/EditorPanel'
 import { Loading } from 'components/ui/Loading'
 import { ResourceExhaustionWarningBanner } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
-import { useSelectedOrganization } from 'hooks/misc/useSelectedOrganization'
-import { useSelectedProject } from 'hooks/misc/useSelectedProject'
+import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
+import { useSelectedProject, useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { withAuth } from 'hooks/misc/withAuth'
 import { PROJECT_STATUS } from 'lib/constants'
 import { useAiAssistantStateSnapshot } from 'state/ai-assistant-state'
@@ -66,6 +66,7 @@ export interface ProjectLayoutProps {
   productMenu?: ReactNode
   selectedTable?: string
   resizableSidebar?: boolean
+  productMenuClassName?: string
 }
 
 const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayoutProps>>(
@@ -79,13 +80,14 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
       children,
       selectedTable,
       resizableSidebar = false,
+      productMenuClassName,
     },
     ref
   ) => {
     const router = useRouter()
     const [isClient, setIsClient] = useState(false)
-    const selectedOrganization = useSelectedOrganization()
-    const selectedProject = useSelectedProject()
+    const { data: selectedOrganization } = useSelectedOrganizationQuery()
+    const { data: selectedProject } = useSelectedProjectQuery()
 
     const {
       editorPanel,
@@ -190,7 +192,9 @@ const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<ProjectLayout
                         isBlocking={isBlocking}
                         productMenu={productMenu}
                       >
-                        <ProductMenuBar title={product}>{productMenu}</ProductMenuBar>
+                        <ProductMenuBar title={product} className={productMenuClassName}>
+                          {productMenu}
+                        </ProductMenuBar>
                       </MenuBarWrapper>
                     </motion.div>
                   </AnimatePresence>
diff --git a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
index f13ca0793be67..c9b6b7a342fed 100644
--- a/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/TableEditorLayout.tsx
@@ -1,7 +1,8 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { PropsWithChildren } from 'react'
+
 import NoPermission from 'components/ui/NoPermission'
 import { useCheckPermissions, usePermissionsLoaded } from 'hooks/misc/useCheckPermissions'
-import { PropsWithChildren } from 'react'
 import { ProjectLayoutWithAuth } from '../ProjectLayout/ProjectLayout'
 
 const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
@@ -16,7 +17,7 @@ const TableEditorLayout = ({ children }: PropsWithChildren<{}>) => {
     )
   }
 
-  return <>{children}</>
+  return children
 }
 
 export default TableEditorLayout
diff --git a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
index 9f0da404d7fb4..27c4b4a41bede 100644
--- a/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
+++ b/apps/studio/components/layouts/editors/EditorBaseLayout.tsx
@@ -11,12 +11,18 @@ import { useEditorType } from './EditorsLayout.hooks'
 
 export interface ExplorerLayoutProps extends ComponentProps<typeof ProjectLayoutWithAuth> {
   children: ReactNode
-  hideTabs?: boolean
   title?: string
   product?: string
+  productMenuClassName?: string
 }
 
-export const EditorBaseLayout = ({ children, title, product, ...props }: ExplorerLayoutProps) => {
+export const EditorBaseLayout = ({
+  children,
+  title,
+  product,
+  productMenuClassName,
+  productMenu,
+}: ExplorerLayoutProps) => {
   const { ref } = useParams()
   const pathname = usePathname()
   const editor = useEditorType()
@@ -28,7 +34,13 @@ export const EditorBaseLayout = ({ children, title, product, ...props }: Explore
     pathname === `/project/${ref}/editor` || pathname === `/project/${ref}/sql` || hasNoOpenTabs
 
   return (
-    <ProjectLayoutWithAuth resizableSidebar title={title} product={product} {...props}>
+    <ProjectLayoutWithAuth
+      resizableSidebar
+      title={title}
+      product={product}
+      productMenuClassName={productMenuClassName}
+      productMenu={productMenu}
+    >
       <div className="flex flex-col h-full">
         <div
           className={cn(
diff --git a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
index cd853d9d143e5..945b8544a0d05 100644
--- a/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
+++ b/apps/studio/components/ui/AIAssistantPanel/AIAssistant.tsx
@@ -411,7 +411,7 @@ export const AIAssistant = ({ className }: AIAssistantProps) => {
                     className="w-fit mt-4"
                     onClick={() => setIsConfirmOptInModalOpen(true)}
                   >
-                    Update AI settings
+                    Permission settings
                   </Button>
                 )}
               </Admonition>
diff --git a/apps/studio/components/ui/ProductMenu/ProductMenu.tsx b/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
index 67cc2c49e39c6..d55a15a053b17 100644
--- a/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
+++ b/apps/studio/components/ui/ProductMenu/ProductMenu.tsx
@@ -10,7 +10,7 @@ interface ProductMenuProps {
 
 const ProductMenu = ({ page, menu }: ProductMenuProps) => {
   return (
-    <div className="flex flex-col space-y-8 overflow-y-auto">
+    <div className="flex flex-col space-y-8">
       <Menu type="pills">
         {menu.map((group, idx) => (
           <div key={group.key || group.title}>
diff --git a/apps/studio/pages/project/[ref]/editor/[id].tsx b/apps/studio/pages/project/[ref]/editor/[id].tsx
index 3a1f9c8697ae2..6f11123aa8fde 100644
--- a/apps/studio/pages/project/[ref]/editor/[id].tsx
+++ b/apps/studio/pages/project/[ref]/editor/[id].tsx
@@ -56,7 +56,11 @@ const TableEditorPage: NextPageWithLayout = () => {
 
 TableEditorPage.getLayout = (page) => (
   <DefaultLayout>
-    <EditorBaseLayout productMenu={<TableEditorMenu />} product="Table Editor">
+    <EditorBaseLayout
+      productMenu={<TableEditorMenu />}
+      product="Table Editor"
+      productMenuClassName="overflow-y-hidden"
+    >
       <TableEditorLayout>{page}</TableEditorLayout>
     </EditorBaseLayout>
   </DefaultLayout>
diff --git a/apps/studio/pages/project/[ref]/editor/index.tsx b/apps/studio/pages/project/[ref]/editor/index.tsx
index 71e4686868b24..6ba1073515fb6 100644
--- a/apps/studio/pages/project/[ref]/editor/index.tsx
+++ b/apps/studio/pages/project/[ref]/editor/index.tsx
@@ -47,7 +47,11 @@ const TableEditorPage: NextPageWithLayout = () => {
 
 TableEditorPage.getLayout = (page) => (
   <DefaultLayout>
-    <EditorBaseLayout productMenu={<TableEditorMenu />} product="Table Editor">
+    <EditorBaseLayout
+      productMenu={<TableEditorMenu />}
+      product="Table Editor"
+      productMenuClassName="overflow-y-hidden"
+    >
       <TableEditorLayout>{page}</TableEditorLayout>
     </EditorBaseLayout>
   </DefaultLayout>
diff --git a/apps/studio/pages/project/[ref]/editor/new.tsx b/apps/studio/pages/project/[ref]/editor/new.tsx
index 48546300b9268..ec76bdc6a4982 100644
--- a/apps/studio/pages/project/[ref]/editor/new.tsx
+++ b/apps/studio/pages/project/[ref]/editor/new.tsx
@@ -27,7 +27,11 @@ const EditorNewPage: NextPageWithLayout = () => {
 
 EditorNewPage.getLayout = (page) => (
   <DefaultLayout>
-    <EditorBaseLayout productMenu={<TableEditorMenu />} product="Table Editor">
+    <EditorBaseLayout
+      productMenu={<TableEditorMenu />}
+      product="Table Editor"
+      productMenuClassName="overflow-y-hidden"
+    >
       <TableEditorLayout>{page}</TableEditorLayout>
     </EditorBaseLayout>
   </DefaultLayout>
diff --git a/apps/studio/styles/main.scss b/apps/studio/styles/main.scss
index 1fab429887ce1..9a0898e8eac42 100644
--- a/apps/studio/styles/main.scss
+++ b/apps/studio/styles/main.scss
@@ -2,7 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/source/global.css';
 @import './../../../packages/ui/build/css/themes/dark.css';
 @import './../../../packages/ui/build/css/themes/light.css';

From a88a71f33943b5e609436f79ff12fff5da5819db Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Tue, 5 Aug 2025 17:46:55 +1000
Subject: [PATCH 5/7] truncate branch project card (#37679)

---
 .../components/interfaces/Home/ProjectList/ProjectCard.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
index bab4d0c394f30..0f2283b1b973a 100644
--- a/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
+++ b/apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx
@@ -65,7 +65,7 @@ const ProjectCard = ({
                   <div className="w-fit p-1 border rounded-md flex items-center">
                     <Github size={12} strokeWidth={1.5} />
                   </div>
-                  <p className="text-xs !ml-2 text-foreground-light">{githubRepository}</p>
+                  <p className="text-xs !ml-2 text-foreground-light truncate">{githubRepository}</p>
                 </>
               )}
             </div>

From bab22d9e7e7bff1dc0a8c40acfd8845651730010 Mon Sep 17 00:00:00 2001
From: Chris Chinchilla <chris@chrischinchilla.com>
Date: Tue, 5 Aug 2025 11:13:57 +0200
Subject: [PATCH 6/7] docs: Add react Router to SSr auth guide (#37514)

* Clarify where to add utils folder

* Add React Router

* Revert "Clarify where to add utils folder"

This reverts commit 89f72c6bea0038bd9b6a8eeb32e08ddaa3aba4e3.
---
 .../auth/server-side/creating-a-client.mdx    | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)

diff --git a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
index b5f0276ac2d51..7e8a38450e911 100644
--- a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
+++ b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
@@ -77,6 +77,14 @@ SUPABASE_URL=your_supabase_project_url
 SUPABASE_ANON_KEY=your_supabase_anon_key
 ```
 
+</TabPanel>
+<TabPanel id="react-router" label="React Router">
+
+```bash .env
+SUPABASE_URL=your_supabase_project_url
+SUPABASE_ANON_KEY=your_supabase_anon_key
+```
+
 </TabPanel>
 <TabPanel id="express" label="Express">
 
@@ -660,6 +668,105 @@ export default function Index() {
 
 </TabPanel>
 
+<TabPanel id="react-router" label="React Router">
+
+<Tabs
+  scrollable
+  size="small"
+  type="underlined"
+  defaultActiveId="react-router-loader"
+  queryGroup="environment"
+>
+<TabPanel id="react-router-loader" label="Loader">
+
+```ts _index.tsx
+import { LoaderFunctionArgs } from 'react-router'
+import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const headers = new Headers()
+
+  const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
+    cookies: {
+      getAll() {
+        return parseCookieHeader(request.headers.get('Cookie') ?? '')
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value, options }) =>
+          headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
+        )
+      },
+    },
+  })
+
+  return new Response('...', {
+    headers,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="react-router-action" label="Action">
+
+```ts _index.tsx
+import { type ActionFunctionArgs } from '@react-router'
+import { createServerClient, parseCookieHeader, serializeCookieHeader } from '@supabase/ssr'
+
+export async function action({ request }: ActionFunctionArgs) {
+  const headers = new Headers()
+
+  const supabase = createServerClient(process.env.SUPABASE_URL!, process.env.SUPABASE_ANON_KEY!, {
+    cookies: {
+      getAll() {
+        return parseCookieHeader(request.headers.get('Cookie') ?? '')
+      },
+      setAll(cookiesToSet) {
+        cookiesToSet.forEach(({ name, value, options }) =>
+          headers.append('Set-Cookie', serializeCookieHeader(name, value, options))
+        )
+      },
+    },
+  })
+
+  return new Response('...', {
+    headers,
+  })
+}
+```
+
+</TabPanel>
+
+<TabPanel id="react-router-component" label="Component">
+
+```ts _index.tsx
+import { type LoaderFunctionArgs } from "react-router";
+import { useLoaderData } from "react-router";
+import { createBrowserClient } from "@supabase/ssr";
+
+export async function loader({}: LoaderFunctionArgs) {
+  return {
+    env: {
+      SUPABASE_URL: process.env.SUPABASE_URL!,
+      SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
+    },
+  };
+}
+
+export default function Index() {
+  const { env } = useLoaderData<typeof loader>();
+
+  const supabase = createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY);
+
+  return ...
+}
+```
+
+</TabPanel>
+</Tabs>
+
+</TabPanel>
+
 <TabPanel id="express" label="Express">
 
 <Tabs

From ad4506d89b5ba23a46f733fcfaee1efdd0619882 Mon Sep 17 00:00:00 2001
From: Drake Costa <drake@saeris.io>
Date: Tue, 5 Aug 2025 02:31:32 -0700
Subject: [PATCH 7/7] Update `@deprecated` suggestions for `ui` package 
 components (#36944)

update deprecation hints

This updates the deprecation notices for components in the `ui` package to follow this format:

```
/** @deprecated Use `import { <Component_Name> } from "ui"` instead */
```

The intent here is to be more explicit about what import a developer should be using instead to replace the deprecated component. Most of these notices were using a confusing relative path segment, which made it unclear as to which library the suggested replacement was coming from.
---
 packages/ui/src/components/Accordion/Accordion.tsx     | 2 +-
 packages/ui/src/components/Alert/Alert.tsx             | 2 +-
 packages/ui/src/components/Breadcrumb/Breadcrumb.tsx   | 2 +-
 packages/ui/src/components/Checkbox/Checkbox.tsx       | 2 +-
 packages/ui/src/components/Collapsible/Collapsible.tsx | 2 +-
 packages/ui/src/components/Form/Form.tsx               | 2 +-
 packages/ui/src/components/Input/Input.tsx             | 2 +-
 packages/ui/src/components/InputNumber/InputNumber.tsx | 2 +-
 packages/ui/src/components/InputOld/Input.js           | 2 +-
 packages/ui/src/components/Listbox/Listbox2.tsx        | 2 +-
 packages/ui/src/components/Modal/Modal.tsx             | 2 +-
 packages/ui/src/components/Popover/Popover.tsx         | 2 +-
 packages/ui/src/components/Radio/Radio.tsx             | 2 +-
 packages/ui/src/components/RadioOld/Radio.js           | 2 +-
 packages/ui/src/components/Select/Select.tsx           | 2 +-
 packages/ui/src/components/Tabs/Tabs.tsx               | 2 +-
 packages/ui/src/components/Toggle/Toggle.tsx           | 2 +-
 17 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/ui/src/components/Accordion/Accordion.tsx b/packages/ui/src/components/Accordion/Accordion.tsx
index 26a1629099c74..4b793744c12ca 100644
--- a/packages/ui/src/components/Accordion/Accordion.tsx
+++ b/packages/ui/src/components/Accordion/Accordion.tsx
@@ -39,7 +39,7 @@ export interface AccordionProps {
 }
 
 /**
- * @deprecated Use ./Accordion_Shadcn_ instead
+ * @deprecated Use `import { Accordion_Shadcn_ } from "ui"` instead
  */
 function Accordion({
   children,
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
index 34f40e9d2f06a..1c49c76c46059 100644
--- a/packages/ui/src/components/Alert/Alert.tsx
+++ b/packages/ui/src/components/Alert/Alert.tsx
@@ -27,7 +27,7 @@ const icons: Record<AlertVariant, React.ReactElement> = {
 }
 
 /**
- * @deprecated Use Alert_Shadcn_. For studio use Admonition
+ * @deprecated Use `import { Alert_Shadcn_ } from "ui"` instead. For studio use `Admonition`
  */
 export function Alert({
   variant = 'neutral',
diff --git a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
index 35a06b852213c..7de226f7170bd 100644
--- a/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/ui/src/components/Breadcrumb/Breadcrumb.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 /**
- * @deprecated Use ./Breadcrumb_shadcn_ instead
+ * @deprecated Use `import { Breadcrumb_shadcn_ } from "ui"` instead
  */
 const Breadcrumb = ({ className, style, children, spacing = 'small' }: Props) => {
   let classes = [BreadcrumbStyle['sbui-breadcrumb--container']]
diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx
index 0f37e7022c294..f98fafb97ceb5 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -36,7 +36,7 @@ interface GroupProps {
 }
 
 /**
- * @deprecated Use ./Checkbox_shadcn_ instead
+ * @deprecated Use `import { Checkbox_shadcn_ } from "ui"` instead
  */
 function Group({
   id,
diff --git a/packages/ui/src/components/Collapsible/Collapsible.tsx b/packages/ui/src/components/Collapsible/Collapsible.tsx
index 88da35cb68937..cbc4941a8215a 100644
--- a/packages/ui/src/components/Collapsible/Collapsible.tsx
+++ b/packages/ui/src/components/Collapsible/Collapsible.tsx
@@ -9,7 +9,7 @@ export interface CollapsibleProps extends RadixCollapsible.CollapsibleProps {
 }
 
 /**
- * @deprecated Use ./Collapsible_shadcn_ instead
+ * @deprecated Use `import { Collapsible_shadcn_ } from "ui"` instead
  */
 export const Collapsible = ({
   open = undefined,
diff --git a/packages/ui/src/components/Form/Form.tsx b/packages/ui/src/components/Form/Form.tsx
index 781d3da032fe7..47bd2c8202cfe 100644
--- a/packages/ui/src/components/Form/Form.tsx
+++ b/packages/ui/src/components/Form/Form.tsx
@@ -32,7 +32,7 @@ function errorReducer(state: any, action: any) {
 }
 
 /**
- * @deprecated Use ./Form_shadcn_ instead
+ * @deprecated Use `import { Form_shadcn_ } from "ui"` instead
  */
 export default function Form({ validate, ...props }: Props) {
   const [fieldLevelErrors, dispatchErrors] = useReducer(errorReducer, null)
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
index d827478f87ef0..35f21c2aa8aa3 100644
--- a/packages/ui/src/components/Input/Input.tsx
+++ b/packages/ui/src/components/Input/Input.tsx
@@ -38,7 +38,7 @@ export interface Props
 }
 
 /**
- * @deprecated Use ./Input_shadcn_ instead or ./ui-patterns/data-inputs/input
+ * @deprecated Use `import { Input_shadcn_ } from "ui"` instead or ./ui-patterns/data-inputs/input
  */
 function Input({
   autoComplete,
diff --git a/packages/ui/src/components/InputNumber/InputNumber.tsx b/packages/ui/src/components/InputNumber/InputNumber.tsx
index 91501de58ae3f..e4aad0c0f756c 100644
--- a/packages/ui/src/components/InputNumber/InputNumber.tsx
+++ b/packages/ui/src/components/InputNumber/InputNumber.tsx
@@ -27,7 +27,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 }
 
 /**
- * @deprecated Use ./Input_shadcn_ with type="number" instead or ./ui-patterns/data-inputs/input with type="number"
+ * @deprecated Use `import { Input_shadcn_ } from "ui"` with `type="number"` instead or ./ui-patterns/data-inputs/input with `type="number"`
  */
 function InputNumber({
   defaultValue,
diff --git a/packages/ui/src/components/InputOld/Input.js b/packages/ui/src/components/InputOld/Input.js
index 8ccf6b8bd46a3..00c287a4d6452 100644
--- a/packages/ui/src/components/InputOld/Input.js
+++ b/packages/ui/src/components/InputOld/Input.js
@@ -5,7 +5,7 @@ import './Input.css'
 export const SIZES = ['small', 'medium']
 
 /**
- * @deprecated Use ./Input_shadcn_ with type="number" instead or ./ui-patterns/data-inputs/input with type="number"
+ * @deprecated Use `import { Input_shadcn_ } from "ui"` with `type="number"` instead or ./ui-patterns/data-inputs/input with `type="number"`
  */
 const Input = ({
   className = '',
diff --git a/packages/ui/src/components/Listbox/Listbox2.tsx b/packages/ui/src/components/Listbox/Listbox2.tsx
index f6e90ad0dcb54..2b4aa34a3282e 100644
--- a/packages/ui/src/components/Listbox/Listbox2.tsx
+++ b/packages/ui/src/components/Listbox/Listbox2.tsx
@@ -38,7 +38,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLButtonElement>
 }
 
 /**
- * @deprecated Use ./Select_shadcn_ or follow ComboBox convention or use ./ui-patterns/multi-select
+ * @deprecated Use `import { Select_shadcn_ } from "ui"` or follow ComboBox convention or use ./ui-patterns/multi-select
  */
 function Listbox({
   children,
diff --git a/packages/ui/src/components/Modal/Modal.tsx b/packages/ui/src/components/Modal/Modal.tsx
index ebdf78b5e2207..df2b7adfd9d24 100644
--- a/packages/ui/src/components/Modal/Modal.tsx
+++ b/packages/ui/src/components/Modal/Modal.tsx
@@ -62,7 +62,7 @@ interface ModalType
   Separator: React.ComponentType
 }
 
-/** @deprecated use <Dialog/> instead */
+/** @deprecated Use `import { Dialog } from "ui"` instead */
 const Modal = forwardRef<
   React.ElementRef<typeof DialogContent>,
   React.ComponentPropsWithoutRef<typeof DialogContent> & ModalProps
diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx
index faea74be735d1..59a3cf4aa2d28 100644
--- a/packages/ui/src/components/Popover/Popover.tsx
+++ b/packages/ui/src/components/Popover/Popover.tsx
@@ -30,7 +30,7 @@ interface RootProps {
 }
 
 /**
- * @deprecated Use ./Popover_shadcn_ instead
+ * @deprecated Use `import { Popover_shadcn_ } from "ui"` instead
  */
 function Popover({
   align = 'center',
diff --git a/packages/ui/src/components/Radio/Radio.tsx b/packages/ui/src/components/Radio/Radio.tsx
index 7fa77a8a23bb2..19ecc83375c89 100644
--- a/packages/ui/src/components/Radio/Radio.tsx
+++ b/packages/ui/src/components/Radio/Radio.tsx
@@ -34,7 +34,7 @@ interface GroupProps {
 }
 
 /**
- * @deprecated Use ./RadioGroup_Shadcn_ instead
+ * @deprecated Use `import { RadioGroup_Shadcn_ } from "ui"` instead
  */
 function RadioGroup({
   id,
diff --git a/packages/ui/src/components/RadioOld/Radio.js b/packages/ui/src/components/RadioOld/Radio.js
index bab2deab77818..8601699b2f42a 100644
--- a/packages/ui/src/components/RadioOld/Radio.js
+++ b/packages/ui/src/components/RadioOld/Radio.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import './Radio.css'
 
 /**
- * @deprecated Use ./RadioGroupItem_Shadcn_ and ./RadioGroup_Shadcn_ instead
+ * @deprecated Use `import { RadioGroup_Shadcn_, RadioGroupItem_Shadcn_ } from "ui"` instead
  */
 const Radio = ({ className = '', label = '', containerClassName = '', children, ...props }) => {
   return (
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index d6d40e73e1977..5794abf5c010b 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -41,7 +41,7 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLSelectElement>
 export const ColLayout = (props: any) => <div>{props.children}</div>
 
 /**
- * @deprecated Use ./Select_shadcn_ instead
+ * @deprecated Use `import { Select_shadcn_ } from "ui"` instead
  */
 function Select({
   autoComplete,
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index 7d09ba8440fab..eb96b4bfa7d32 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -38,7 +38,7 @@ interface TabsSubComponents {
 }
 
 /**
- * @deprecated Use ./Tabs_shadcn_ instead
+ * @deprecated Use `import { Tabs_shadcn_ } from "ui"` instead
  */
 const Tabs: React.FC<PropsWithChildren<TabsProps>> & TabsSubComponents = ({
   defaultActiveId,
diff --git a/packages/ui/src/components/Toggle/Toggle.tsx b/packages/ui/src/components/Toggle/Toggle.tsx
index 658e9e567d432..3093b267436ff 100644
--- a/packages/ui/src/components/Toggle/Toggle.tsx
+++ b/packages/ui/src/components/Toggle/Toggle.tsx
@@ -27,7 +27,7 @@ interface Props extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'size'> {
 }
 
 /**
- * @deprecated Use ./Switch instead
+ * @deprecated Use `import { Switch } from "ui"` instead
  */
 function Toggle({
   disabled,