mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 18:00:20 -04:00
kemal.earth
65365213af
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? A little bit of tidy up here so the header area of unified logs isn't so dominant. Moved actions to the same line as search bar and made other parts a little more subtle, so the focus reamains on the logs themselves. | Before | After | |--------|--------| | <img width="980" height="213" alt="Screenshot 2026-04-27 at 11 47 37" src="https://github.com/user-attachments/assets/ae22e7dd-272f-4433-a270-67b550a00536" /> | <img width="893" height="153" alt="Screenshot 2026-04-27 at 12 27 17" src="https://github.com/user-attachments/assets/87b8cfc9-66a4-4634-a3c6-c45e4b8fc486" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Keyboard shortcut to toggle filter visibility in logs. * Consolidated top bar with refresh, view options, download, and live controls—desktop and mobile optimized. * **Style** * More compact, organized header with tooltips showing live status and shortcut hints. * Reduced filter input typography and streamlined mobile filter trigger. * **Other** * Side panel sizing and logs area layout refined for clearer visuals and consistent header/body styling. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import type { FetchPreviousPageOptions } from '@tanstack/react-query'
|
|
import { CirclePause, CirclePlay } from 'lucide-react'
|
|
import { useQueryStates } from 'nuqs'
|
|
import { useEffect } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
import { ButtonTooltip } from '../ButtonTooltip'
|
|
import { useDataTable } from './providers/DataTableProvider'
|
|
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
|
|
import { useShortcut } from '@/state/shortcuts/useShortcut'
|
|
|
|
const REFRESH_INTERVAL = 10_000
|
|
|
|
interface LiveButtonProps {
|
|
searchParamsParser: any
|
|
fetchPreviousPage?: (options?: FetchPreviousPageOptions | undefined) => Promise<unknown>
|
|
}
|
|
|
|
export function LiveButton({ fetchPreviousPage, searchParamsParser }: LiveButtonProps) {
|
|
const [{ live, date, sort }, setSearch] = useQueryStates(searchParamsParser)
|
|
const { table } = useDataTable()
|
|
useShortcut(SHORTCUT_IDS.DATA_TABLE_TOGGLE_LIVE, handleClick)
|
|
|
|
useEffect(() => {
|
|
let timeoutId: NodeJS.Timeout
|
|
|
|
async function fetchData() {
|
|
if (live) {
|
|
await fetchPreviousPage?.()
|
|
timeoutId = setTimeout(fetchData, REFRESH_INTERVAL)
|
|
} else {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}
|
|
|
|
fetchData()
|
|
|
|
return () => {
|
|
clearTimeout(timeoutId)
|
|
}
|
|
}, [live, fetchPreviousPage])
|
|
|
|
// REMINDER: make sure to reset live when date is set
|
|
// TODO: test properly
|
|
useEffect(() => {
|
|
if ((date || sort) && live) {
|
|
setSearch((prev) => ({ ...prev, live: null }))
|
|
}
|
|
}, [date, sort])
|
|
|
|
function handleClick() {
|
|
setSearch((prev) => ({
|
|
...prev,
|
|
live: !prev.live,
|
|
date: null,
|
|
sort: null,
|
|
}))
|
|
table.getColumn('date')?.setFilterValue(undefined)
|
|
table.resetSorting()
|
|
}
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
className={cn(live && 'border-info text-info hover:text-info')}
|
|
onClick={handleClick}
|
|
type={live ? 'primary' : 'default'}
|
|
size="tiny"
|
|
icon={live ? <CirclePause className="h-4 w-4" /> : <CirclePlay className="h-4 w-4" />}
|
|
tooltip={{ content: { side: 'bottom', text: live ? 'Pause live mode' : 'Start live mode' } }}
|
|
>
|
|
Live
|
|
</ButtonTooltip>
|
|
)
|
|
}
|