chore(studio) add resizable columns to Cron jobs (#43841)

## What kind of change does this PR introduce?

Chore that resolves DEPR-399.

## What is the current behavior?

The cron jobs table in Studio uses a fixed-width `Name` column, which
can truncate long job titles and make them hard to read on
`/project/:ref/integrations/cron/jobs`.

## What is the new behavior?

The cron jobs table now allows resizing the informational columns,
including `Name`, `Schedule`, `Last run`, `Next run`, and `Command`,
while keeping the `Active` and `Actions` columns fixed-width.

This also gives the `Name` column a sensible minimum width so it can be
resized without collapsing.

## Additional context

Adds a small regression test around the cron jobs column configuration
to verify that:
- informational columns are resizable
- utility columns remain fixed
- the `Name` column has a non-zero minimum width
This commit is contained in:
Danny White authored and GitHub committed 2026-03-18 08:35:13 -06:00
1 parent 5a3fe010cd
commit 4bb53ef792
3 files changed
+39 -10

No files matched your search

@@ -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 },
]
@@ -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)
})
})
@@ -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,