chore(studio) add resizable columns to Cron jobs

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.constants.tsx

@@ -46,12 +46,21 @@ export type HTTPHeader = { name: string; value: string }
 
 export type HTTPParameter = { name: string; value: string }
 
-export const CRON_TABLE_COLUMNS = [
-  { id: 'jobname', name: 'Name', minWidth: 0, width: 200 },
-  { id: 'schedule', name: 'Schedule', width: 100 },
-  { id: 'latest_run', name: 'Last run', width: 265 },
-  { id: 'next_run', name: 'Next run', minWidth: 180 },
-  { id: 'command', name: 'Command', minWidth: 320 },
-  { id: 'active', name: 'Active', width: 70, minWidth: 70, maxWidth: 70 },
-  { id: 'actions', name: '', minWidth: 75, width: 75 },
+type CronTableColumn = {
+  id: string
+  name: string
+  width?: number
+  minWidth?: number
+  maxWidth?: number
+  resizable?: boolean
+}
+
+export const CRON_TABLE_COLUMNS: CronTableColumn[] = [
+  { id: 'jobname', name: 'Name', minWidth: 160, width: 200, resizable: true },
+  { id: 'schedule', name: 'Schedule', width: 100, resizable: true },
+  { id: 'latest_run', name: 'Last run', width: 265, resizable: true },
+  { id: 'next_run', name: 'Next run', minWidth: 180, resizable: true },
+  { id: 'command', name: 'Command', minWidth: 320, resizable: true },
+  { id: 'active', name: 'Active', width: 70, minWidth: 70, maxWidth: 70, resizable: false },
+  { id: 'actions', name: '', minWidth: 75, width: 75, resizable: false },
 ]

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { cronPattern, secondsPattern } from './CronJobs.constants'
-import { parseCronJobCommand } from './CronJobs.utils'
+import { formatCronJobColumns, parseCronJobCommand } from './CronJobs.utils'
 
 describe('parseCronJobCommand', () => {
   it('should return a default object when the command is null', () => {
@@ -279,3 +279,23 @@ describe('parseCronJobCommand', () => {
     })
   })
 })
+
+describe('formatCronJobColumns', () => {
+  it('enables resizing for informational columns and keeps utility columns fixed', () => {
+    const columns = formatCronJobColumns({
+      onSelectEdit: () => undefined,
+      onSelectDelete: () => undefined,
+    })
+
+    const columnsByKey = Object.fromEntries(columns.map((column) => [String(column.key), column]))
+
+    expect(columnsByKey.jobname.resizable).toBe(true)
+    expect(columnsByKey.jobname.minWidth).toBeGreaterThan(0)
+    expect(columnsByKey.schedule.resizable).toBe(true)
+    expect(columnsByKey.latest_run.resizable).toBe(true)
+    expect(columnsByKey.next_run.resizable).toBe(true)
+    expect(columnsByKey.command.resizable).toBe(true)
+    expect(columnsByKey.active.resizable).toBe(false)
+    expect(columnsByKey.actions.resizable).toBe(false)
+  })
+})

apps/studio/components/interfaces/Integrations/CronJobs/CronJobs.utils.tsx

@@ -236,7 +236,7 @@ export const formatCronJobColumns = ({
       minWidth: col.minWidth ?? 100,
       maxWidth: col.maxWidth,
       width: col.width,
-      resizable: false,
+      resizable: col.resizable ?? false,
       sortable: false,
       draggable: false,
       headerCellClass: undefined,