chore(studio): consistent table rows across pages #39507
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
6 Skipped Deployments
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
dnywh
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Error
| <> | ||
| <ScaffoldSection isFullWidth> | ||
| <div className="flex items-center justify-between mb-6"> | ||
| <div className="flex items-end justify-between mb-6"> |
There was a problem hiding this comment.
This looks visually much more coherent, especially when there is a ScaffoldSectionDescription
dnywh
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Error
| <div className="flex justify-end"> | ||
| <DropdownMenu> | ||
| <DropdownMenuTrigger className="px-1 focus-visible:outline-none" asChild> | ||
| <Button | ||
| type="text" | ||
| size="tiny" | ||
| icon={ | ||
| <MoreVertical size="14" className="text-foreground-light hover:text-foreground" /> | ||
| } | ||
| /> | ||
| </DropdownMenuTrigger> | ||
| <DropdownMenuContent className="max-w-40" align="end"> | ||
| <APIKeyDeleteDialog apiKey={apiKey} lastSeen={lastSeen} /> | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| </div> |
There was a problem hiding this comment.
This wrapping div is required to fix this issue:
| const RowLoading = () => ( | ||
| <TableRow> | ||
| <TableCell> | ||
| <Skeleton className="max-w-12 h-4 rounded-full" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="max-w-60 h-4 rounded-full" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="max-w-60 h-4 rounded-full" /> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Skeleton className="w-2 h-4 rounded-full" /> | ||
| </TableCell> | ||
| </TableRow> | ||
| ) |
There was a problem hiding this comment.
Replaced with GenericSkeletonLoader
There was a problem hiding this comment.
Most of the changes here are about making the loading (or error) states sit under the FormHeader. This has some advantages:
- User gets context about what’s loading or errored
- This simplifies the markup drastically
- This is the pattern we’re using elsewhere, such as on storage bucket lists and database table lists
dnywh
had a problem deploying
to
Studio E2E Tests
GitHub Actions
Error
| <Button type="default" disabled={disableCreation} className="pointer-events-auto"> | ||
| <Button | ||
| type="default" | ||
| icon={<Plus size={14} />} |
There was a problem hiding this comment.
Add a + icon to match similar “New X” buttons elsewhere
| Table, | ||
| TableBody, | ||
| TableCell, | ||
| TableHead, | ||
| TableHeader, | ||
| TableRow, |
There was a problem hiding this comment.
Using newer table components
joshenlim
requested a deployment
to
Studio E2E Tests
GitHub Actions
Waiting
2 participants
What kind of change does this PR introduce?
What is the current behavior?
What is the new behavior?
To test
Please test the following at various breakpoints: