Fix code highlighting + disable analyse button for sql queries

edgedb · Dec 10, 2024 · ec0692b · ec0692b
1 parent 56fa763
commit ec0692b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/shared/studio/tabs/perfStats/perfStats.module.scss b/shared/studio/tabs/perfStats/perfStats.module.scss
@@ -291,7 +291,7 @@
   .fullData {
     display: grid;
     grid-template-columns: repeat(6, auto);
-    margin: 0 48px 0 12px;
+    margin: 0 48px 16px 12px;
     gap: 16px 24px;
     max-width: 880px;
 
@@ -350,7 +350,7 @@
 
   .analyseQueryButton {
     align-self: flex-end;
-    margin-top: -32px;
+    margin-top: -48px;
     margin-bottom: 16px;
     margin-right: 8px;
   }

diff --git a/shared/studio/tabs/perfStats/statsTable.tsx b/shared/studio/tabs/perfStats/statsTable.tsx
@@ -1,6 +1,8 @@
 import {useEffect, useRef, useState} from "react";
 import {observer} from "mobx-react-lite";
 
+import {sql, PostgreSQL} from "@codemirror/lang-sql";
+
 import cn from "@edgedb/common/utils/classNames";
 
 import {
@@ -19,6 +21,8 @@ import {OrderBy, PerfStatsState, QueryStats} from "./state";
 
 import styles from "./perfStats.module.scss";
 
+const sqlLang = sql({dialect: PostgreSQL}).language;
+
 export const StatsTable = observer(function StatsTable({
   state,
 }: {
@@ -236,21 +240,28 @@ export const QueryStatsRow = observer(function QueryStatsRow({
               </div>
             </div>
 
-            <Button
-              className={styles.analyseQueryButton}
-              kind="outline"
-              onClick={() => state.setAnalyzeQuery(queryStats.query)}
-            >
-              Analyze Query
-            </Button>
+            {queryStats.query_type === "EdgeQL" ? (
+              <Button
+                className={styles.analyseQueryButton}
+                kind="outline"
+                onClick={() => state.setAnalyzeQuery(queryStats.query)}
+              >
+                Analyze Query
+              </Button>
+            ) : null}
 
             <div className={styles.fullQuery}>
               <CopyButton
                 className={styles.copyButton}
                 content={queryStats.query}
                 mini
               />
-              <CodeBlock code={queryStats.query} />
+              <CodeBlock
+                code={queryStats.query}
+                language={
+                  queryStats.query_type === "SQL" ? sqlLang : undefined
+                }
+              />
             </div>
           </div>
         ) : null}