mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
Joshen Lim
61a333a41d
## Context Tiny styling issue with the report settings component here (padding) <img width="301" alt="image" src="https://github.com/user-attachments/assets/381a89c4-b1d5-419e-94a1-74149881068c" /> But also realised that `Popover` is a more suitable component than `DropdownMenu` here - so refactored the component + adjust the padding issue. Opting to use `text-xs` as well since that's the font size we usually use in a popover / dropdown <img width="301" height="218" alt="image" src="https://github.com/user-attachments/assets/7ce0452e-eb7a-4bc9-93b4-b30164e74c31" /> Furthermore, am opting to hide the sync tooltip option if sync header is false Am thinking in this case it makes sense to hide the UI since sync tooltip is dependent on sync header (would add confusion if we show this setting disabled + users would need to read the description "requires sync hover" to understand why) <img width="304" height="137" alt="image" src="https://github.com/user-attachments/assets/fb084b6f-8bbd-4861-982c-c43d7df58831" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Updated the report settings menu to use a popover layout for a cleaner, more structured presentation. * Improved spacing and typography within the settings content, including clearer helper text formatting. * Refined the “Sync tooltips” controls to display more contextually based on the relevant sync setting, while keeping the same entry point and overall toggle behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { Settings } from 'lucide-react'
|
|
import { useState } from 'react'
|
|
import { Label, Popover, PopoverContent, PopoverTrigger, Switch } from 'ui'
|
|
|
|
import { useChartHoverState } from './useChartHoverState'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
|
|
interface ReportSettingsProps {
|
|
chartId: string
|
|
}
|
|
|
|
export const ReportSettings = ({ chartId }: ReportSettingsProps) => {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const { syncHover, syncTooltip, setSyncHover, setSyncTooltip } = useChartHoverState(chartId)
|
|
|
|
return (
|
|
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
|
<PopoverTrigger asChild>
|
|
<ButtonTooltip
|
|
variant="default"
|
|
icon={<Settings />}
|
|
className="w-7"
|
|
tooltip={{ content: { side: 'bottom', text: 'Report settings' } }}
|
|
/>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="center" side="bottom" className="w-64 p-3 flex flex-col gap-y-4">
|
|
<div className="flex items-start justify-between space-x-2">
|
|
<Label htmlFor="sync-hover" className="text-xs">
|
|
<p>Sync chart headers</p>
|
|
<p className="text-xs text-foreground-light mt-1 text-balance">
|
|
Hovering over any chart will update headers across all charts
|
|
</p>
|
|
</Label>
|
|
<Switch id="sync-hover" checked={syncHover} onCheckedChange={setSyncHover} />
|
|
</div>
|
|
|
|
{syncHover && (
|
|
<div className="flex items-start justify-between space-x-2">
|
|
<Label htmlFor="sync-tooltips" className="text-xs">
|
|
<p>Sync tooltips</p>
|
|
<p className="text-xs text-foreground-light mt-1 text-balance">
|
|
Shows tooltips on all charts
|
|
</p>
|
|
</Label>
|
|
<Switch
|
|
id="sync-tooltips"
|
|
checked={syncTooltip}
|
|
disabled={!syncHover}
|
|
onCheckedChange={setSyncTooltip}
|
|
/>
|
|
</div>
|
|
)}
|
|
</PopoverContent>
|
|
</Popover>
|
|
)
|
|
}
|