mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Jordi Enric
44b9ce3e5f
* very wip * add expandable rows * fix table layout, collapsible row, spacing issues * use new query with filters everywhere * rm unused queries * rm unused fn * improve loading state * fix text overflowing in role * rm padding so that table doesn't always need scroll * fix icon in search input * add latency to table row heading to clarify what col youre sorting with * rm unused imports * run prettier * align sql with row content * add syntax highlighting and sort icons * rm copy btn * move tailwind dep to correct package, rm unused syntax highlighting, rm unused component
52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
import Table from 'components/to-be-cleaned/Table'
|
|
import React from 'react'
|
|
import { cn } from 'ui'
|
|
import { Editor } from '@monaco-editor/react'
|
|
|
|
type Props = {
|
|
sql: string
|
|
colSpan: number
|
|
children: React.ReactNode
|
|
}
|
|
|
|
const ReportQueryPerformanceTableRow = ({ sql, colSpan, children }: Props) => {
|
|
const [expanded, setExpanded] = React.useState(false)
|
|
|
|
return (
|
|
<>
|
|
<Table.tr onClick={() => setExpanded(!expanded)}>{children}</Table.tr>
|
|
<tr
|
|
className={cn(
|
|
{
|
|
'h-0 opacity-0': !expanded,
|
|
'h-4 opacity-100': expanded,
|
|
},
|
|
'transition-all'
|
|
)}
|
|
>
|
|
{expanded && (
|
|
<td colSpan={colSpan} className="!p-0 max-w-xl relative">
|
|
<div className="overflow-auto max-h-[400px] bg-background-alternative-200">
|
|
<Editor
|
|
className={cn('monaco-editor h-80')}
|
|
theme={'supabase'}
|
|
defaultLanguage="pgsql"
|
|
value={sql}
|
|
options={{
|
|
readOnly: true,
|
|
tabSize: 2,
|
|
fontSize: 13,
|
|
minimap: { enabled: false },
|
|
wordWrap: 'on',
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ReportQueryPerformanceTableRow
|