Query Editor. History & Saved Sections Implementation

[AlinaBelousovaUX]

Implement the History and Saved sections for the Query Editor interface. These sections will be accessible via tabs next to the editor title and will open in the same window area.

Figma Design Mockups
Related Design task: "History" & "Saved" in the SQL editor #2977

When opening the query editor, users see:

• Title and query editor.
• Ability to add more tabs (described in separate task).
• Right of title: History, Saved, and Templates dropdown (implement as-is for now).

Below the query editor:

• Run button.
• Explain button.
• Settings button.
• Save button (opens save dialog with auto-generated name suggestion).

Section 1: History

Opens in the same window area as query editor

Header
Back button | History
Search bar above the table
Filtering options: Status filter | Date range

Table
Fixed row height equal to 3 lines of query code.

Columns:
Run (timestamp): clickable for sorting
Status: Completed, Stopped, Failed. (Future: add running query states) - clickable for sorting
Run Time: Right-aligned, monospace font. Format: 00:24.123 or 1h 00:24.123 for longer durations - clickable for sorting
Query: Shows maximum 3 lines of query code with syntax highlighting. Truncate with "..." if longer
Actions: Buttons appear on row hover:

• Preview Button Icon. Tooltip: "Preview". Query code preview (see implementation options below).
• Save Button Icon. Tooltip: "Save". Opens save dialog with auto-generated name.
• Copy to editor Primary button Opens query in new editor tab.

Preview Options
Need design decision on preview behavior

Option 1: Tooltip Preview
Shows tooltip with query snippet. Includes: Copy button. If query doesn't fit: Show italic text "View full query in editor"
Pros: Lightweight, quick preview
Cons: Limited view, may require extra click for full view

Option 2: Side Panel
Opens side panel with full query code. Includes: Copy button, "Open in editor" button. Potential for additional query metadata display
Pros: Full context, extensible for future features
Cons: Takes more screen space, heavier interaction

Behavior Rules

• Only queries that were executed (Run) appear in History.
• Table supports sorting by: Run (timestamp), Status, Run Time.
• Implement standard YDB infinite scroll/pagination.
• Save dialog: Auto-generate name from first mentioned table/object in query + command/date.

Section 2: Saved Queries

Opens in same window area with Back button and Saved title

Search bar below title
Table with columns
Name (e.g., "Weekly report").
Edited: Date/time of last modification.
Query: Same display as History (max 3 lines with syntax highlighting).
Actions (appear on row hover):

• Preview Icon Button. Same behavior as History section.
• Rename Icon Button (letter icon). Opens rename dialog. Tooltip: "Rename".
• Edit Primary button. Opens query in editor

Editor Tab Behavior for Saved Queries

Tab displays query name as title

When changes are made:

• Save button becomes active.
• Bold dot appears near close button (indicates unsaved changes).
• On tab hover: Close (×) button and menu (⋯) appear.
• Dot distinguishes modified tabs from others.

Core Editor Integration Rules

1. History Population: Only executed queries (via Run button) are added to History.
2. Save Prompts: Offer save for any query with modifications. For templates opened from context menu or dropdown without changes: No dot in tab, no save prompt on close
3. Save Dialog on Close Attempt:
   Title: "Save changes to query?"
   Description: "Your changes will be lost if you don't save them"
   Primary: "Save changes". Secondary: "Cancel". Additional: "Don't Save"