Skip to content

feat(webui): add SQL syntax highlighting to metric form editors #1341

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mohamadyasser118 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(webui): add SQL syntax highlighting to metric form editors #1341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93463f2
feat(webui): add SQL syntax highlighting to metric form editors
mohamadyasser118 Mar 27, 2026
7ed1a40
feat(webui): add SQL syntax highlighting to metric form editors
mohamadyasser118 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions internal/webui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,13 @@
"axios": "^1.13.5",
"classnames": "^2.5.1",
"form-data": "^4.0.0",
"prismjs": "^1.30.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.55.0",
"react-markdown": "^10.1.0",
"react-router-dom": "^6.28.1",
"react-simple-code-editor": "^0.14.1",
"react-syntax-highlighter": "^16.1.1",
"react-use-websocket": "^4.5.0",
"tss-react": "^4.9.6",
Expand All @@ -60,6 +62,7 @@
"devDependencies": {
"@eslint/js": "^9.27.0",
"@types/node": "^22.15.0",
"@types/prismjs": "^1.26.6",
"@types/react": "^18.3.28",
"@types/react-dom": "^18.3.7",
"@types/react-syntax-highlighter": "^15.5.13",
Expand Down
66 changes: 40 additions & 26 deletions ...ui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,58 @@ import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/mat
import { useFormContext } from "react-hook-form";
import { useFormStyles } from "styles/form";
import { MetricFormValues } from "../MetricForm.types";
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs";
import "prismjs/components/prism-sql";
import "prismjs/themes/prism.css";
import { Controller } from "react-hook-form";


export const MetricFormStepSQL = () => {
const { register, formState: { errors } } = useFormContext<MetricFormValues>();
const { control, formState: { errors } } = useFormContext<MetricFormValues>();
const { classes, cx } = useFormStyles();

const hasError = (field: keyof MetricFormValues) => !!errors[field];

const getError = (field: keyof MetricFormValues) => {
const error = errors[field];
if (error) {
return error.message;
}
return undefined;
};
const hasError = !!errors.SQLs;
const errorMessage = errors.SQLs?.message;

return (
<div className={classes.form}>
<FormControl
className={cx(classes.formControlInput, classes.widthFull)}
error={hasError("SQLs")}
error={hasError}
variant="outlined"
>
<InputLabel htmlFor="SQLs">SQLs</InputLabel>
<OutlinedInput
{...register("SQLs")}
id="SQLs"
label="SQLs"
aria-describedby="SQLs-error"
multiline
rows={15}
inputProps={{
style: {
font: "revert",
fontSize: "0.7rem",
}
}}
<InputLabel
shrink
htmlFor="SQLs"
sx={{ backgroundColor: "white", px: 0.5 }}
>
SQLs
</InputLabel>
<Controller
name="SQLs"
control={control}
render={({ field }) => (
<Editor
value={field.value ?? ""}
onValueChange={field.onChange}
highlight={(code) => highlight(code, languages.sql, "sql")}
padding={12}
id="SQLs"
style={{
fontFamily: "'Fira Code', 'Consolas', monospace",
fontSize: "0.75rem",
lineHeight: 1.6,
minHeight: "240px",
border: hasError ? "1px solid #d32f2f" : "1px solid rgba(0,0,0,0.23)",
borderRadius: "4px",
backgroundColor: "#fafafa",
color: "#333",
}}
/>
)}
/>
<FormHelperText id="SQLs-error">{getError("SQLs")}</FormHelperText>
<FormHelperText id="SQLs-error">{errorMessage}</FormHelperText>
</FormControl>
</div>
);
Expand Down
47 changes: 37 additions & 10 deletions ...c/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import { Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, Ou
import { useController, useFormContext } from "react-hook-form";
import { useFormStyles } from "styles/form";
import { MetricFormValues } from "../MetricForm.types";
import Editor from "react-simple-code-editor";
import { highlight, languages } from "prismjs";
import "prismjs/components/prism-sql";
import "prismjs/themes/prism.css";
import { Controller } from "react-hook-form";

export const MetricFormStepSettings = () => {
const { register, control } = useFormContext<MetricFormValues>();
const { classes, cx } = useFormStyles();

const { field } = useController({ name: "IsInstanceLevel", control });
const { field: instanceLevelField } = useController({ name: "IsInstanceLevel", control });

return (
<div className={classes.form}>
Expand All @@ -30,13 +35,35 @@ export const MetricFormStepSettings = () => {
className={cx(classes.formControlInput, classes.widthFull)}
variant="outlined"
>
<InputLabel htmlFor="InitSQL">Init SQL</InputLabel>
<OutlinedInput
{...register("InitSQL")}
id="InitSQL"
label="Init SQL"
multiline
maxRows={5}
<InputLabel
shrink
htmlFor="InitSQL"
sx={{ backgroundColor: "white", px: 0.5 }}
>
Init SQL
</InputLabel>
<Controller
name="InitSQL"
control={control}
render={({ field }) => (
<Editor
value={field.value ?? ""}
onValueChange={field.onChange}
highlight={(code) => highlight(code, languages.sql, "sql")}
padding={12}
id="InitSQL"
style={{
fontFamily: "'Fira Code', 'Consolas', monospace",
fontSize: "0.75rem",
lineHeight: 1.6,
minHeight: "120px",
border: "1px solid rgba(0,0,0,0.23)",
borderRadius: "4px",
backgroundColor: "#fafafa",
color: "#333",
}}
/>
)}
/>
</FormControl>
<FormControlLabel
Expand All @@ -45,9 +72,9 @@ export const MetricFormStepSettings = () => {
labelPlacement="start"
control={
<Checkbox
{...field}
{...instanceLevelField}
size="medium"
checked={field.value}
checked={instanceLevelField.value}
/>
}
/>
Expand Down
7 changes: 6 additions & 1 deletion internal/webui/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1013,7 +1013,7 @@
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==

"@types/prismjs@^1.0.0":
"@types/prismjs@^1.0.0", "@types/prismjs@^1.26.6":
version "1.26.6"
resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.6.tgz#6ea27c126d645319ae4f7055eda63a9e835c0187"
integrity sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==
Expand Down Expand Up @@ -3428,6 +3428,11 @@ react-router@6.30.3:
dependencies:
"@remix-run/router" "1.23.2"

react-simple-code-editor@^0.14.1:
version "0.14.1"
resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.14.1.tgz#fd37eb3349f5def45900dd46acf296f796d81d2c"
integrity sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow==

react-syntax-highlighter@^16.1.1:
version "16.1.1"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz#928459855d375f5cfc8e646071e20d541cebcb52"
Expand Down
Loading