From 89010c164903850f16dea662dffe53b9e18ba30c Mon Sep 17 00:00:00 2001
From: Charis <26616127+charislam@users.noreply.github.com>
Date: Tue, 4 Aug 2026 13:26:02 -0400
Subject: [PATCH] fix(studio): show selected custom time range in SQL editor
 time range menu (#48709)

## What

Display the actual selected custom date range in the Time Range
dropdown's secondary text, instead of the static "Custom range" label.
The range is formatted as `DD MMM, HH:mm - DD MMM, HH:mm` to match the
existing format in the Logs Explorer's date-picker trigger button,
ensuring visual consistency across the Logs UI.

Fixes FE-4035

## Test plan

- [x] Typecheck passes: `pnpm typecheck`
- [x] Manually verify: Open SQL Editor with `sqlEditorLogsSource` flag
enabled, open the Time Range dropdown menu, select a Custom range, and
confirm the dropdown's secondary text now displays the selected date
range instead of "Custom range"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Custom time ranges now display formatted start and end timestamps for
clearer time selection.
  * Preset time ranges continue to show their existing helper text.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../UtilityPanel/QuerySourceMenu/TimeRangeSubMenu.tsx        | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/QuerySourceMenu/TimeRangeSubMenu.tsx b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/QuerySourceMenu/TimeRangeSubMenu.tsx
index 39517f8c7b6..f633d4a8a58 100644
--- a/apps/studio/components/interfaces/SQLEditor/UtilityPanel/QuerySourceMenu/TimeRangeSubMenu.tsx
+++ b/apps/studio/components/interfaces/SQLEditor/UtilityPanel/QuerySourceMenu/TimeRangeSubMenu.tsx
@@ -1,3 +1,4 @@
+import dayjs from 'dayjs'
 import { Check, Lock } from 'lucide-react'
 import {
   DropdownMenuItem,
@@ -50,7 +51,9 @@ export const TimeRangeSubMenu = ({
         <div className="flex flex-col">
           <span>Time range</span>
           <span className="text-foreground-lighter text-xs">
-            {isCustomRange ? 'Custom range' : (selectedPreset?.helper.text ?? 'Custom range')}
+            {isCustomRange
+              ? `${dayjs(range.from).format('DD MMM, HH:mm')} - ${dayjs(range.to).format('DD MMM, HH:mm')}`
+              : (selectedPreset?.helper.text ?? 'Custom range')}
           </span>
         </div>
       </DropdownMenuSubTrigger>