[+] add SQL syntax highlighting in metrics popup (#1299)

* add SQL syntax highlighting in metrics popup

* add registerLanguage call for Light build

* remove accidentally generated package-lock.json

* add a chip badge showing the number of SQL queries next to the icon

* tidy yarn.lock

---------

Co-authored-by: Pavlo Golub <pavlo.golub@gmail.com>

Author: mohamadyasser118

internal/webui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-gui",
-  "version": "0.1.0",
+  "version": "5.1.0",
   "private": true,
   "homepage": ".",
   "license": "MIT",
@@ -50,6 +50,7 @@
     "react-hook-form": "^7.55.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.28.1",
+    "react-syntax-highlighter": "^16.1.1",
     "react-use-websocket": "^4.5.0",
     "tss-react": "^4.9.6",
     "typescript": "^5.7.0",
@@ -61,6 +62,7 @@
     "@types/node": "^22.15.0",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-react": "^5.1.3",
@@ -82,4 +84,4 @@
     "node": ">=22.0.0",
     "npm": ">=8.0.0"
   }
-}
+}

internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/SqlPopUp/SqlPopUp.consts.tsx

@@ -1,8 +1,12 @@
-import { Box } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import sql from "react-syntax-highlighter/dist/esm/languages/hljs/sql";
+import { atomOneLight } from "react-syntax-highlighter/dist/esm/styles/hljs";
+
+SyntaxHighlighter.registerLanguage("sql", sql);
 
 export const useSqlPopUpColumns = (): GridColDef[] => [
-  {
+  { 
     field: "version",
     headerName: "Version",
     width: 80,
@@ -15,23 +19,19 @@ export const useSqlPopUpColumns = (): GridColDef[] => [
     headerAlign: "left",
     flex: 1,
     renderCell: ({ value }) => (
-      <Box
-        component="pre"
-        sx={{
-          fontFamily: "'Fira Code', 'Cascadia Code', 'Consolas', monospace",
+       <SyntaxHighlighter
+        language="sql"
+        style={atomOneLight}
+        wrapLongLines
+        customStyle={{
           fontSize: "0.75rem",
-          lineHeight: 1.6,
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word",
-          overflowX: "auto",
-          m: 0,
-          py: 1.5,
-          px: 0,
-          color: "text.primary",
+          borderRadius: "4px",
+          width: "100%",
+          margin: 0,
         }}
       >
         {value}
-      </Box>
+      </SyntaxHighlighter>
     ),
   },
 ];

internal/webui/src/pages/MetricsPage/components/MetricsGrid/components/SqlPopUp/SqlPopUp.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import TableViewIcon from '@mui/icons-material/TableView';
-import { Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
+import { Box, Chip, Dialog, DialogContent, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { DataGrid } from "@mui/x-data-grid";
 import { useSqlPopUpColumns } from "./SqlPopUp.consts";
 
@@ -31,11 +31,12 @@ export const SqlPopUp = ({ SQLs }: Props) => {
 
   return rows.length !== 0 ? (
     <>
-      <IconButton onClick={handleOpen}>
-        <Tooltip title="View SQLs table">
-          <span>
-            <TableViewIcon />
-          </span>
+      <IconButton onClick={handleOpen} size="small">
+        <Tooltip title={`View SQLs (${rows.length})`}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+            <TableViewIcon fontSize="small" color="primary" />
+            <Chip label={rows.length} size="small" variant="outlined" sx={{ height: 20, fontSize: "0.75rem" }} />
+          </Box>
         </Tooltip>
       </IconButton>
       <Dialog