Files
supabase/apps/studio/components/ui/TableRowNoResults.tsx
Joshen Lim ee3fbc4e61 Joshenlim/fe 4383 consolidate tablerow no search result state (#50389)
### Context

Just some housekeeping/consolidate refactors. There's a number of places
where we render the same "no result" empty state for tables. So this PR
just consolidates that into a reusable component `TableRowNoResults` to
reduce duplication.

Opting to save this under `components/ui` instead of the `ui` package as
this is more of a derivation of `TableRow` than a primitive

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **UI Improvements**
- Standardized empty search-result messages across database, functions,
storage, and vector bucket tables.
- Search terms now appear consistently when no matching records are
found.
  - Added an accessible label to the vector bucket row actions menu.
- Improved the storage explorer loading layout so content expands to use
available vertical space.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-16 16:35:26 +08:00

31 lines
718 B
TypeScript

import { type PropsWithChildren } from 'react'
import { TableCell, TableRow } from 'ui'
interface TableRowNoResultsProps {
className?: string
colSpan: number
search?: string
}
export const TableRowNoResults = ({
className,
colSpan,
search,
children,
}: PropsWithChildren<TableRowNoResultsProps>) => {
return (
<TableRow className={className}>
<TableCell colSpan={colSpan}>
{children ?? (
<>
<p className="text-sm text-foreground">No results found</p>
<p className="text-sm text-foreground-light">
Your search for "{search}" did not return any results
</p>
</>
)}
</TableCell>
</TableRow>
)
}