mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 21:05:06 +03:00
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:
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,
|
||||
|
||||
Reference in new issue
Block a user