Skip to content

Conversation

@taishikato
Copy link
Contributor

@taishikato taishikato commented Sep 2, 2025

I have read the CONTRIBUTING.md file.

YES

What kind of change does this PR introduce?

feature - add syntax highlight to SQL on Query performance page

What is the current behavior?

No syntax highlighting:
CleanShot 2025-09-02 at 14 52 04@2x

What is the new behavior?

CleanShot 2025-09-02 at 14 53 14@2x

Additional context

Add any other context or screenshots.

@taishikato taishikato requested a review from a team as a code owner September 2, 2025 18:51
@vercel
Copy link

vercel bot commented Sep 2, 2025

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

Project Deployment Preview Comments Updated (UTC)
docs Ready Ready Preview Comment Sep 5, 2025 0:20am
studio-self-hosted Ready Ready Preview Comment Sep 5, 2025 0:20am
studio-staging Ready Ready Preview Comment Sep 5, 2025 0:20am
ui-library Ready Ready Preview Comment Sep 5, 2025 0:20am
zone-www-dot-com Ready Ready Preview Comment Sep 5, 2025 0:20am
3 Skipped Deployments
Project Deployment Preview Comments Updated (UTC)
cms Ignored Ignored Sep 5, 2025 0:20am
studio Ignored Ignored Sep 5, 2025 0:20am
design-system Skipped Skipped Sep 5, 2025 0:20am

@vercel
Copy link

vercel bot commented Sep 2, 2025

@taishikato is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Contributor

github-actions bot commented Sep 2, 2025

Thanks for contributing to Supabase! ❤️ Our team will review your PR.

A few tips for a smoother review process:

  • If you have a local version of the repo, run pnpm run format to make sure formatting checks pass.
  • Once we've reviewed your PR, please don't trivially merge master (don't click Update branch if there are no merge conflicts to be fixed). This invalidates any pre-merge checks we've run.

@taishikato taishikato changed the title Add syntax highlight to SQL on Query performance page Add SQL syntax highlighting to Query Performance page Sep 2, 2025
@saltcod
Copy link
Contributor

saltcod commented Sep 2, 2025

Pretty light in light mode — the SQL Editor's styles are better (though they use a full-on Monaco theme) if we could adapt them a bit?

screenshot-2025-09-02-at-17 04 52

@taishikato
Copy link
Contributor Author

taishikato commented Sep 2, 2025

Ty @saltcod, I witched to using the monaco editor 🫡
b81dc1d

CleanShot 2025-09-02 at 18 03 02@2x

Also updated the SQL in the details panel to use Monaco so it has the same syntax highlighting. the styling is more consistent and easier to read now imo.
6c871f0

CleanShot 2025-09-02 at 18 02 35@2x

@saltcod
Copy link
Contributor

saltcod commented Sep 3, 2025

Seeing these borders in light and dark mode
screenshot-2025-09-02-at-21 49 21

@taishikato
Copy link
Contributor Author

@saltcod Ty!
Based on what you shared, I tried setting the outline-color to transparent. bb9f194
Has the outline disappeared now?

@taishikato
Copy link
Contributor Author

taishikato commented Sep 3, 2025

also - now Mean time is shown in the table and details panel 🚀 2d4f0a3

CleanShot 2025-09-03 at 10 51 26@2x CleanShot 2025-09-03 at 10 51 40@2x

@taishikato taishikato force-pushed the query-performance-syntax-highlight branch from 1e060a4 to fd26660 Compare September 3, 2025 18:09
- following a pattern in `SQLEditor.tsx`
@taishikato
Copy link
Contributor Author

added keyboard navigation 🗺️ ce2ca1e b886696

CleanShot.2025-09-03.at.14.22.22.mp4

@taishikato
Copy link
Contributor Author

taishikato commented Sep 3, 2025

also no horizontal scrollbar unless some of the columns become very wide 👍 fd26660

CleanShot 2025-09-03 at 14 25 02@2x

Copy link
Contributor

@saltcod saltcod left a comment

Choose a reason for hiding this comment

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

Tested and looks great on staging!

@saltcod saltcod enabled auto-merge (squash) September 5, 2025 00:12
@coveralls
Copy link

Coverage Status

coverage: 70.662%. remained the same
when pulling 013e653 on taishikato:query-performance-syntax-highlight
into 5e4cc21 on supabase:master.

@saltcod saltcod merged commit 97b631f into supabase:master Sep 5, 2025
18 of 19 checks passed
@taishikato taishikato deleted the query-performance-syntax-highlight branch September 5, 2025 21:09
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