Skip to content

feat(studio): show SQL snippet description#42090

Merged
joshenlim merged 4 commits intomasterfrom
dnywh/feat/sql-snippet-descriptions
Jan 23, 2026
Merged

feat(studio): show SQL snippet description#42090
joshenlim merged 4 commits intomasterfrom
dnywh/feat/sql-snippet-descriptions

Conversation

@dnywh
Copy link
Contributor

@dnywh dnywh commented Jan 23, 2026

What kind of change does this PR introduce?

  • Feature
  • Resolves DEPR-332

What is the current behavior?

Some users add descriptions to their SQL snippets. We don’t show this description anywhere.

What is the new behavior?

We show this optional description when hovering over the snippet’s name on the sidebar.

Before After
before after3

Additional context

  • A cleaner approach might be to deprecate the description field but people are actively using it
    • It might come in handy later too, e.g. with improved sharing
  • I chose to append the description to the snippet name as the title element already is in use for that
    • This title is needed because some (many of my) snippets are truncated
  • Our built-in Tooltip component is a too heavy-handed for this
    • The HTML title element has the perfect weight, I think, for this type of affordance

Summary by CodeRabbit

  • Improvements
    • Tree view items in the SQL editor now show clearer titles and optional descriptions, improving readability.
    • Tooltips updated: item hover text now combines title and description when present; redundant per-element tooltips removed for a cleaner UI.
    • Names can display richer content (not limited to plain text), ensuring more flexible item rendering across navigation and search.

✏️ Tip: You can customize this high-level summary in your review settings.

@dnywh dnywh requested review from a team as code owners January 23, 2026 03:21
@vercel
Copy link

vercel bot commented Jan 23, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
design-system Ready Ready Preview, Comment Jan 23, 2026 3:47am
docs Ready Ready Preview, Comment Jan 23, 2026 3:47am
studio-self-hosted Ready Ready Preview, Comment Jan 23, 2026 3:47am
studio-staging Ready Ready Preview, Comment Jan 23, 2026 3:47am
ui-library Ready Ready Preview, Comment Jan 23, 2026 3:47am
zone-www-dot-com Ready Ready Preview, Comment Jan 23, 2026 3:47am
2 Skipped Deployments
Project Deployment Review Updated (UTC)
cms Ignored Ignored Jan 23, 2026 3:47am
studio Ignored Ignored Jan 23, 2026 3:47am

Request Review

@supabase
Copy link

supabase bot commented Jan 23, 2026

This pull request has been ignored for the connected project xguihxuzqibwxjnimxev because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 23, 2026

Walkthrough

Propagates new display props through the TreeView: nameForTitle and description are accepted by the core TreeViewItem and passed from SearchList and SQLEditorTreeViewItem to control item title and tooltip text; name now accepts string | ReactNode.

Changes

Cohort / File(s) Summary
TreeView Core
packages/ui/src/components/TreeView/TreeView.tsx
Public props updated: `name: string
SQLEditor TreeView Components
apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SQLEditorTreeViewItem.tsx, apps/studio/components/layouts/SQLEditorLayout/SQLEditorNavV2/SearchList.tsx
Pass nameForTitle into TreeViewItem (nameForTitle={...}); pass description from element.metadata?.description; removed title attributes from name spans in SearchList to rely on computed titleText.

Possibly related PRs

Suggested reviewers

  • alaister
  • jordienr
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the main change: displaying SQL snippet descriptions on hover in the sidebar.
Description check ✅ Passed The PR description covers the change type (Feature), current behavior, new behavior with screenshots, and additional context explaining design decisions.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@dnywh dnywh changed the title show browser title feat(studio): show SQL snippet description Jan 23, 2026
{element.name}
</span>
{!!visibility && (
<span title={visibility} className="text-foreground-lighter text-xs">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant as it's always 'Private' or 'Shared'; never truncated.

...element,
name: (
<span className="flex flex-col py-0.5">
<span title={element.name} className="truncate">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This and the below title collide with that on the parent row. Removing.

name: string | ReactNode
/** Optional description of entity */
description?: string
/** String name to use for title attribute when name is a ReactNode */
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Name comes through as a ReactNode on the SearchList.

/>
)
)}
<span className={cn(isEditing && 'hidden', 'truncate text-sm')} title={name}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As above: removed to avoid clashing with title on parent row.

Comment on lines +108 to +109
const nameString = nameForTitle ?? (typeof name === 'string' ? name : '')
const [localValueState, setLocalValueState] = useState(nameString)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As above: needs to be checked as sometimes name is a ReactNode.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026

🎭 Playwright Test Results

passed  82 passed
flaky  2 flaky
skipped  4 skipped

Details

stats  88 tests across 14 suites
duration  10 minutes, 10 seconds
commit  36293cb

Flaky tests

Features › index-advisor.spec.ts › Index Advisor › Enable Index Advisor › should enable Index Advisor via Database > Extensions page
Features › index-advisor.spec.ts › Index Advisor › Index Advisor Functionality › should create test table without indexes

Skipped tests

Features › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected
Features › sql-editor.spec.ts › SQL Editor › share with team works as expected
Features › sql-editor.spec.ts › SQL Editor › folders works as expected
Features › sql-editor.spec.ts › SQL Editor › other SQL snippets actions work as expected

Copy link
Contributor

@SaxonF SaxonF left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested in design system and in studio on snippets and edge function code

Copy link
Member

@joshenlim joshenlim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified changes on preview - although separately i reckon we look into consolidating how we wanna handle description tooltips like these - via title or Tooltip component

this and this PR does similar things, but deviates in how its presented - am presuming we might also opt to do something similar for table comments too

@joshenlim joshenlim merged commit e961990 into master Jan 23, 2026
27 of 28 checks passed
@joshenlim joshenlim deleted the dnywh/feat/sql-snippet-descriptions branch January 23, 2026 08:11
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026

Braintrust eval report

Assistant (master-1769156004)

Score Average Improvements Regressions
Completeness 87.5% (-12pp) - 1 🔴
Conciseness 0% (+0pp) - -
Goal Completion 81.3% (-6pp) - 1 🔴
SQL Validity 100% (+0pp) - -
Tool Usage 75% (+0pp) - -
Correctness 66.7% (-33pp) - 1 🔴
Docs Faithfulness 62.5% (+0pp) - -
Time_to_first_token 0.14tok (+0tok) 5 🟢 2 🔴
Llm_calls 8.5 (+0.63) 3 🟢 -
Tool_calls 3.63 (+1.13) 2 🟢 -
Errors 0 (+0) - -
Llm_errors 0 (+0) - -
Tool_errors 0 (+0) - -
Prompt_tokens 118829.5tok (+35986.25tok) 5 🟢 3 🔴
Prompt_cached_tokens 69728tok (+18048tok) 4 🟢 1 🔴
Prompt_cache_creation_tokens 0tok (+0tok) - -
Completion_tokens 5415.5tok (+860.75tok) 2 🟢 6 🔴
Completion_reasoning_tokens 4192tok (+912tok) 1 🟢 7 🔴
Completion_accepted_prediction_tokens 0tok (+0tok) - -
Completion_rejected_prediction_tokens 0tok (+0tok) - -
Completion_audio_tokens 0tok (+0tok) - -
Total_tokens 124245tok (+36847tok) 3 🟢 5 🔴
Estimated_cost 0.02$ (+0.01$) 2 🟢 6 🔴
Duration 53.33s (+16.38s) 2 🟢 6 🔴
Llm_duration 105.55s (+32.57s) 2 🟢 6 🔴

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants