chore(explore): Add format sql and view in SQL Lab option in View Query #33341

justinpark · 2025-05-02T00:21:27Z

SUMMARY

The "View Query" feature was previously used to display SQL in a formatted manner. However, the prettier formatting was reverted in this pull request due to unintended changes in the original SQL. To minimize the impact while retaining the formatting option, this commit introduces a "Format SQL" feature in View Query modal and an option to show the original SQL for comparison. Additionally, this commit adds a "View in SQL Lab" button, allowing users to conveniently connect to SQL Lab directly from the dashboard, which is particularly useful for users.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

after--view-query-actions.mov

TESTING INSTRUCTIONS

Click "View Query" in the chart or explore and then check the toolbars above.

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

korbit-ai

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Unexplained API Query Parameters ▹ view	🧠 Not in scope
	Unexplained Magic String Separator ▹ view	🧠 Incorrect
	Missing Error Handling in API Calls ▹ view	🧠 Not in scope

Files scanned

File Path	Reviewed
superset-frontend/src/explore/components/controls/ViewQueryModal.tsx	✅
superset-frontend/src/explore/components/controls/ViewQuery.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

superset-frontend/src/explore/components/controls/ViewQuery.tsx

+      const queryParams = rison.encode({
+        keys: ['none'],
+        columns: ['database.backend'],
+      });


superset-frontend/src/explore/components/controls/ViewQuery.tsx

+      SupersetClient.get({
+        endpoint: `/api/v1/dataset/${datasetId}?q=${queryParams}`,
+      }).then(({ json }) => {
+        SupersetClient.post({
+          endpoint: `/api/v1/sqllab/format_sql/`,
+          body: JSON.stringify({
+            sql,
+            engine: json.result.database.backend,
+          }),
+          headers: { 'Content-Type': 'application/json' },
+        }).then(({ json }) => {
+          setFormattedSQL(json.result);
+          setShowFormatSQL(true);
+        });
+      });


superset-frontend/src/explore/components/controls/ViewQuery.tsx

 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
  flex: 1;
 `;

 const ViewQuery: FC<ViewQueryProps> = props => {
-  const { sql, language = 'sql' } = props;
+  const { sql, language = 'sql', datasource } = props;
+  const datasetId = datasource.split('__')[0];


michael-s-molina · 2025-05-02T12:08:23Z

@justinpark The View in SQL Lab button is a great addition!

About the "Format SQL" feature, I think a formatted SQL is better for users when visualizing a query. Given that #30350 states:

When running a query we pass it through sqlglot to prettify the SQL, but sqlglot is doing some unwanted changes when the dialect is set to generic.

and the fact that the dialect will not be generic most of the time, I wonder if we should always format the SQL when visualizing the query. To be clear, I'm not proposing reverting @betodealmeida's changes but to always format the SQL when clicking on View query.

If the dialect is generic, then you could always show the non-formatted version of the query and warning saying that the SQL can't be formatted for that database type.

Pinging @betodealmeida, who probably has more context, to review too.

justinpark · 2025-05-02T17:58:32Z

and the fact that the dialect will not be generic most of the time, I wonder if we should always format the SQL when visualizing the query. To be clear, I'm not proposing reverting betodealmeida's changes but to always format the SQL when clicking on View query.

I like the idea too. Since the formatted SQL in this section doesn't modify the original SQL, it should be okay.
Additionally, I plan to display a "Show Original" button so that users can revert back to the original SQL if needed, allowing access to both versions.

justinpark · 2025-05-02T20:30:15Z

Here is the updated design.

michael-s-molina · 2025-05-05T13:29:22Z

superset-frontend/src/explore/components/controls/ViewQuery.test.tsx

+const getFormatSwitch = () =>
+  screen.getByRole('switch', { name: 'Show original SQL' });
+
+it('renders the component with Formatted SQL and buttons', async () => {


Can you use test instead of it?

pull-request-size bot added the size/L label May 2, 2025

justinpark requested review from rusackas, betodealmeida, eschutho and michael-s-molina May 2, 2025 00:21

dosubot bot added the explore:control Related to the controls panel of Explore label May 2, 2025

korbit-ai bot reviewed May 2, 2025

View reviewed changes

justinpark added 2 commits May 2, 2025 10:20

chore(explore): Add format sql and view in SQL Lab option in View Query

c1e6808

fix mock and spec

99bf21c

justinpark added 2 commits May 2, 2025 11:00

add network fallback case

b6fa310

set formatted sql default and change to switch for toggle

c79e886

justinpark force-pushed the chore--add-format-and-view-in-sql-on-view-query branch from 3c4dae5 to c79e886 Compare May 2, 2025 20:29

justinpark added 2 commits May 2, 2025 13:54

fix arrow-body-style

96a6748

change formatted to original option

a4dc5e4

michael-s-molina reviewed May 5, 2025

View reviewed changes

replace it by test

1172230

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(explore): Add format sql and view in SQL Lab option in View Query #33341

chore(explore): Add format sql and view in SQL Lab option in View Query #33341

justinpark commented May 2, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

michael-s-molina commented May 2, 2025

justinpark commented May 2, 2025

justinpark commented May 2, 2025 •

edited

Loading

michael-s-molina May 5, 2025

chore(explore): Add format sql and view in SQL Lab option in View Query #33341

Are you sure you want to change the base?

chore(explore): Add format sql and view in SQL Lab option in View Query #33341

Conversation

justinpark commented May 2, 2025 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

korbit-ai bot left a comment • edited Loading

Choose a reason for hiding this comment

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

michael-s-molina commented May 2, 2025

justinpark commented May 2, 2025

justinpark commented May 2, 2025 • edited Loading

michael-s-molina May 5, 2025

Choose a reason for hiding this comment

justinpark commented May 2, 2025 •

edited

Loading

korbit-ai bot left a comment •

edited

Loading

justinpark commented May 2, 2025 •

edited

Loading