feat(admin): Put the System Queries editor in a sticky, closable panel

snuba/admin/static/clickhouse_queries/index.tsx

@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from "react";
 import Client from "SnubaAdmin/api_client";
 import { Table } from "SnubaAdmin/table";
-import QueryDisplay from "SnubaAdmin/clickhouse_queries/query_display";
+import QueryDisplay, {
+  STICKY_HEADER_TOP,
+} from "SnubaAdmin/clickhouse_queries/query_display";
+import { COLORS } from "SnubaAdmin/theme";
 import { parseSystemQueryPrefill } from "SnubaAdmin/clickhouse_queries/prefill";
 import { QueryResult, PredefinedQuery } from "./types";
 
@@ -34,12 +37,11 @@ function ClickhouseQueries(props: { api: Client }) {
 
   function tablePopulator(queryResult: QueryResult) {
     return (
-      <div style={scroll}>
-        <Table
-          headerData={queryResult.column_names}
-          rowData={queryResult.rows}
-        />
-      </div>
+      <Table
+        headerData={queryResult.column_names}
+        rowData={queryResult.rows}
+        customStyles={stickyHeaderStyles}
+      />
     );
   }
 
@@ -68,9 +70,19 @@ const selectStyle = {
   height: 30,
 };
 
-const scroll = {
-  overflowX: "scroll" as const,
-  width: "100%",
+// Keeps column names in view below the editor pane while scrolling a long
+// result. This needs no scrolling ancestor between the table and the page,
+// so wide results wrap rather than scroll sideways.
+const stickyHeaderStyles = {
+  thStyle: {
+    position: "sticky" as const,
+    top: STICKY_HEADER_TOP,
+    zIndex: 1,
+    backgroundColor: COLORS.TABLE_HEADER_BG,
+    // Collapsed borders don't move with a stuck cell, so draw its bottom
+    // edge here.
+    boxShadow: `inset 0 -1px 0 ${COLORS.TABLE_BORDER}`,
+  },
 };
 
 export default ClickhouseQueries;