mirror of
https://github.com/supabase/supabase.git
synced 2026-10-12 04:45:08 +03:00
Joshen Lim
e48c909b31
## Context Related to FE-2461 More refactoring to clean up usage of `useQueryStateWithSelect`, in the following pages - Auth OAuth Apps - Cron Jobs - Vaults Secrets Management - Database Hooks - Wrappers ## To test In each of those pages, verify that - [ ] Clicking the "new" cta updates the URL params, and refreshing should re-open the sheet - [ ] Editing an existing item should update URL params, and refreshing should re-open the sheet with the right item - Verify that if the URL param has the wrong id, page should not open the sheet, show a toast, and reset the URL param - [ ] Deleting an existing item should update URL params, and refreshing should re-open the sheet with the right item - Verify that if the URL param has the wrong id, page should not open the sheet, show a toast, and reset the URL param <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Added "item not found" toasts and clearer feedback after create/update/delete actions; prevent opening create flows when server features are disabled. * **Style** * Standardized button labels, sizes and modal/dialog spacing; refined table column widths and inline code formatting for readability. * **Refactor** * Simplified UI state flows across OAuth Apps, Hooks/Webhooks, Cron Jobs, Vault Secrets, and Wrappers to use consistent URL-driven interactions and centralized modals. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
import type { Column } from 'react-data-grid'
|
|
import type { VaultSecret } from 'types'
|
|
import { cn } from 'ui'
|
|
|
|
import { SecretRow } from './SecretRow'
|
|
import { SecretTableColumn } from './Secrets.types'
|
|
|
|
export const SECRET_TABLE_COLUMNS: SecretTableColumn[] = [
|
|
{ id: 'secret', name: 'Secret', minWidth: 300, width: 360 },
|
|
{ id: 'id', name: 'ID', minWidth: 220, width: 260 },
|
|
{ id: 'secret_value', name: 'Value', minWidth: 320, width: 420 },
|
|
{ id: 'updated_at', name: 'Last updated', minWidth: 180 },
|
|
{ id: 'actions', name: '', minWidth: 75, width: 75 },
|
|
]
|
|
|
|
export const formatSecretColumns = (): Column<VaultSecret>[] => {
|
|
return SECRET_TABLE_COLUMNS.map((col) => {
|
|
const result: Column<VaultSecret> = {
|
|
key: col.id,
|
|
name: col.name,
|
|
minWidth: col.minWidth ?? 100,
|
|
maxWidth: col.maxWidth,
|
|
width: col.width,
|
|
resizable: false,
|
|
sortable: false,
|
|
draggable: false,
|
|
headerCellClass: undefined,
|
|
renderHeaderCell: () => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center justify-between font-normal text-xs w-full',
|
|
col.id === 'secret' && 'ml-8'
|
|
)}
|
|
>
|
|
<p className="!text-foreground">{col.name}</p>
|
|
</div>
|
|
)
|
|
},
|
|
renderCell: ({ row }) => <SecretRow row={row} col={col} />,
|
|
}
|
|
return result
|
|
})
|
|
}
|