mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 14:49:10 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import dayjs from 'dayjs'
|
|
import { CheckIcon, LockIcon } from 'lucide-react'
|
|
import {
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
} from 'ui'
|
|
|
|
import { datePickerValueToLogTimeRange, logTimeRangesEqual } from './LogTimeRange.utils'
|
|
import { EXPLORER_DATEPICKER_HELPERS } from '@/components/interfaces/Settings/Logs/Logs.constants'
|
|
import { maybeShowUpgradePromptIfNotEntitled } from '@/components/interfaces/Settings/Logs/Logs.utils'
|
|
import type { TimeRange } from '@/data/content/notebooks/notebook-schema'
|
|
import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
|
|
|
|
export const LogsTimeRangeSubMenu = ({
|
|
range,
|
|
onRangeChange,
|
|
onOpenCustomRange,
|
|
onShowUpgrade,
|
|
}: {
|
|
range: TimeRange
|
|
onRangeChange: (range: TimeRange) => void
|
|
onOpenCustomRange: () => void
|
|
onShowUpgrade: () => void
|
|
}) => {
|
|
const { getEntitlementNumericValue } = useCheckEntitlements('log.retention_days')
|
|
const entitledToLogDays = getEntitlementNumericValue()
|
|
|
|
const isCustomRange = range._tag === 'absolute_time_range'
|
|
const presets = EXPLORER_DATEPICKER_HELPERS.map((helper) => ({
|
|
helper,
|
|
range: datePickerValueToLogTimeRange({
|
|
from: helper.calcFrom(),
|
|
to: helper.calcTo(),
|
|
isHelper: true,
|
|
text: helper.text,
|
|
}),
|
|
}))
|
|
const selectedPreset = presets.find((preset) => logTimeRangesEqual(range, preset.range))
|
|
|
|
return (
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>
|
|
<div className="flex flex-col">
|
|
<span>Time range</span>
|
|
<span className="text-foreground-lighter text-xs">
|
|
{isCustomRange
|
|
? `${dayjs(range.start).format('DD MMM, HH:mm')} - ${dayjs(range.end).format('DD MMM, HH:mm')}`
|
|
: (selectedPreset?.helper.text ?? 'Custom range')}
|
|
</span>
|
|
</div>
|
|
</DropdownMenuSubTrigger>
|
|
<DropdownMenuSubContent className="w-52">
|
|
{presets.map(({ helper, range: presetRange }) => {
|
|
const isSelected = !isCustomRange && logTimeRangesEqual(range, presetRange)
|
|
const isLocked = maybeShowUpgradePromptIfNotEntitled(helper.calcFrom(), entitledToLogDays)
|
|
|
|
return (
|
|
<DropdownMenuItem
|
|
key={helper.text}
|
|
className="justify-between"
|
|
onClick={() => {
|
|
if (isLocked) return onShowUpgrade()
|
|
onRangeChange(presetRange)
|
|
}}
|
|
>
|
|
<span>{helper.text}</span>
|
|
{isLocked ? (
|
|
<LockIcon size={14} className="text-foreground-lighter" />
|
|
) : (
|
|
isSelected && <CheckIcon size={14} />
|
|
)}
|
|
</DropdownMenuItem>
|
|
)
|
|
})}
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem className="justify-between" onClick={onOpenCustomRange}>
|
|
<span>Custom range…</span>
|
|
{isCustomRange && <CheckIcon size={14} />}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuSub>
|
|
)
|
|
}
|