RI-8122 Add "Insert timestamp" to suggestions, help widget, and context menu#5635
RI-8122 Add "Insert timestamp" to suggestions, help widget, and context menu#5635
Conversation
- Introduced `RiCalendar` and `RiDatePicker` components for enhanced date selection functionality. - Integrated `react-day-picker` for calendar UI and added styles for better presentation. - Updated `QueryActions` to include a timestamp picker that inserts Unix timestamps into the query editor. - Added utility functions for handling Unix time arguments in commands. References: #RI-XXXX
- Adjusted calendar component styles for improved layout and spacing. - Updated date picker positioning and button size for better usability. - Refactored calendar component to streamline locale handling and remove unused code. References: #RI-8122
…nput components - Introduced comprehensive unit tests for the `RiCalendar`, `RiDatePicker`, and `RiTimeInput` components to ensure proper rendering and functionality. - Tests cover rendering, interaction, and state management for each component, enhancing overall test coverage and reliability.
- Added a timestamp picker feature to the query editor, allowing users to insert Unix timestamps directly into their queries. - Integrated a new command for opening the timestamp picker and updated the UI to display a button when the cursor is on a Unix time argument. - Refactored related components and hooks to support the new functionality, including updates to context and completion suggestions. References: #RI-XXXX
- Updated the query editor to utilize a ref for the timestamp picker, ensuring consistent access to the picker function across different contexts. - Modified the autocomplete suggestions to trigger the timestamp picker when the corresponding suggestion is accepted. - Added a new prop to the `useRedisCompletions` hook for handling timestamp insertion from suggestions. - Implemented unit tests to verify the correct behavior of timestamp suggestions when the cursor is positioned on Unix time arguments.
pd-redis
requested review from
ArtemHoruzhenko,
DimoHG,
KrumTy,
dantovska,
pawelangelow and
valkirilov
as code owners
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
redisinsight/ui/src/components/query/query-actions/QueryActions.tsx
Outdated
Show resolved
Hide resolved
🛡️ Jit Security Scan Results
✅ No security findings were detected in this PR
Security scan by Jit
|
- Updated the timestamp validation logic in the QueryActions component to check for null values explicitly, enhancing robustness in handling timestamp insertion.
- Refactored the logic for determining if the current argument is a Unix time type, improving accuracy by introducing a new helper function, `isArgUnixTimePosition`. - This change allows for better handling of oneof/block arguments that may contain Unix time, ensuring more robust timestamp validation in the query editor.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
| const showTimestampPicker = useMemo( | ||
| () => commandHasUnixTimeArgs(REDIS_COMMANDS, query), | ||
| [REDIS_COMMANDS, query], | ||
| ) |
There was a problem hiding this comment.
Multiline query breaks toolbar timestamp button visibility
Medium Severity
commandHasUnixTimeArgs splits the full editor query by whitespace (/\s+/) and only examines the first token as the command name. In the workbench, the editor can contain multiple commands across lines. For a query like GET key\nEXPIREAT mykey , the first token is GET, so showTimestampPicker evaluates to false — hiding both the toolbar Timestamp button and the "Insert timestamp" help widget, even though the cursor is on an EXPIREAT line. Since showTimestampPicker gates currentArgIsUnixTime in Query.tsx, the cursor-aware check never gets a chance to show the UI.
Additional Locations (1)
| return [now.getHours(), now.getMinutes(), now.getSeconds()] | ||
| .map((n) => String(n).padStart(2, '0')) | ||
| .join(':') | ||
| } |
There was a problem hiding this comment.
Duplicated time-formatting logic across two files
Low Severity
formatCurrentTime in RiTimeInput.tsx and buildTimeString in DateTimePicker.tsx implement identical logic — formatting a Date's hours, minutes, and seconds into an HH:MM:SS string with zero-padding. The only difference is formatCurrentTime hardcodes new Date() while buildTimeString accepts a Date parameter. These could be unified into a single shared utility.
Additional Locations (1)
1 participant
What
EXPIREAT mykeyorSET key value PXAT), a completion item "Insert timestamp..." is shown; choosing it opens the date/time picker and inserts nothing.QueryEditorContext(fromQueryWrapper) so all entry points use the same open/close/show logic.onWillInsertSuggestItemso the picker opens reliably when "Insert timestamp..." is selected.openTimestampPickerso they always call the current callback.Demo:
Screen.Recording.2026-03-13.at.9.52.10.mov
Testing
EXPIREAT mykeyorSET k v PXAT), click the Timestamp button → picker opens; pick date/time and Insert → value is inserted at cursor.EXPIREAT mykey(space after mykey) → "Insert timestamp..." appears in the list; select it (Enter or click) → picker opens; no text is inserted.EXPIREAT mykey, confirm "Insert timestamp" appears in the footer; click it → picker opens.Closes #RI-8122
Made with Cursor
Note
Medium Risk
Adds new date/time picker UI paths and Monaco editor commands/actions that modify query-editor interactions and suggestion behavior; regressions could affect autocomplete/help widgets and cursor insertions. Dependency updates (
react-day-pickerv9) and new time/date components increase UI surface area but are scoped to Workbench.Overview
Adds a reusable date/time picking UI (
RiCalendar,RiDatePicker,RiTimeInput, andDateTimePicker) and wires it into the Workbench query editor to insert Unix timestamps at the cursor.Extends Monaco integration to expose “Insert timestamp” via autocomplete (a new
Insert timestamp...completion item forunix-timeargs), a context-menu action, and a footer help button that appears when the cursor is on aunix-timeargument. Timestamp picker open/close state is lifted intoQueryEditorContext, and unix-time detection is added via a newICommandTokenType.UnixTimeplus helpers/tests (commandHasUnixTimeArgs,findSuggestionsByArgupdates).Written by Cursor Bugbot for commit f119c65. This will update automatically on new commits. Configure here.