mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 19:35:06 +03:00
Jordi Enric
bac4814123
## Summary - Fix unreadable "Large ranges may result in memory errors" warning text in the Logs date picker — a stray `text-warning-foreground` class (dark ink) was winning over `text-warning` on the dark `bg-warning-300` fill. - Fix "Search collections..." sidebar wrapper background mismatch — `bg-background-200` now resolves to the elevated `--card` surface instead of `--background`, so it no longer matches the sidebar's `bg-dash-sidebar`. - Fix the Unified Logs "Live" toggle button rendering blue text instead of white when active — a leftover `border-info text-info` override was fighting the `primary` variant's own text color, now that `--info` resolves to a more distinct blue. All three are contrast/color regressions surfaced by the recent design-system color token changes. ## Test plan - [ ] Open a project's Logs Explorer, pick a large date range, confirm the warning text is readable - [ ] Check the Logs sidebar "Search collections..." box background matches the rest of the sidebar in both light and dark mode - [ ] Toggle "Live" mode in Unified Logs and confirm the button text is white/legible on the green background <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the large-range warning banner appearance in Logs settings. * Refined the Logs sidebar header background styling for a more consistent look. * Simplified the DataTable live button styling behavior by removing conditional class composition while preserving the existing live-mode visuals. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import type { FetchPreviousPageOptions } from '@tanstack/react-query'
|
|
import { CirclePause, CirclePlay } from 'lucide-react'
|
|
import { useQueryStates } from 'nuqs'
|
|
import { useEffect } from 'react'
|
|
import { Button } from 'ui'
|
|
|
|
import { useDataTable } from './providers/DataTableProvider'
|
|
import { ShortcutTooltip } from '@/components/ui/ShortcutTooltip'
|
|
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, { registerInCommandMenu: true })
|
|
|
|
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 (
|
|
<ShortcutTooltip
|
|
shortcutId={SHORTCUT_IDS.DATA_TABLE_TOGGLE_LIVE}
|
|
label={live ? 'Pause live mode' : 'Start live mode'}
|
|
side="bottom"
|
|
>
|
|
<Button
|
|
onClick={handleClick}
|
|
variant={live ? 'primary' : 'default'}
|
|
size="tiny"
|
|
icon={live ? <CirclePause className="h-4 w-4" /> : <CirclePlay className="h-4 w-4" />}
|
|
>
|
|
Live
|
|
</Button>
|
|
</ShortcutTooltip>
|
|
)
|
|
}
|