fix: update SQL editor

Author: mohamadyasser118

internal/webui/src/App.tsx

@@ -13,6 +13,9 @@ import { privateRoutes, publicRoutes } from "layout/Routes";
 
 import { AppBar } from "./layout/AppBar";
 
+import "prismjs/components/prism-sql";
+import "prismjs/themes/prism.css";
+
 const mdTheme = createTheme();
 
 export default function App() {

internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSQL.tsx

@@ -1,17 +1,16 @@
-import { FormControl, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
-import { useFormContext } from "react-hook-form";
+import { FormControl, FormHelperText, InputLabel, OutlinedInput, useTheme } from "@mui/material";
+import { Controller, 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 { control, formState: { errors } } = useFormContext<MetricFormValues>();
   const { classes, cx } = useFormStyles();
+  const theme = useTheme();
 
   const hasError = !!errors.SQLs;
   const errorMessage = errors.SQLs?.message;
@@ -22,6 +21,7 @@ export const MetricFormStepSQL = () => {
         className={cx(classes.formControlInput, classes.widthFull)}
         error={hasError}
         variant="outlined"
+        aria-describedby="SQLs-error"
       >
         <InputLabel
           shrink
@@ -37,18 +37,22 @@ export const MetricFormStepSQL = () => {
             <Editor
               value={field.value ?? ""}
               onValueChange={field.onChange}
+              onBlur={field.onBlur} 
               highlight={(code) => highlight(code, languages.sql, "sql")}
               padding={12}
-              id="SQLs"
+              id="InitSQL"
+              aria-describedby="InitSQL-error"
               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",
+                backgroundColor: theme.palette.background.paper,
+                color: theme.palette.text.primary,
+                border: hasError
+                ? `1px solid ${theme.palette.error.main}`
+                : `1px solid ${theme.palette.divider}`,
               }}
             />
           )}

internal/webui/src/containers/MetricFormDialog/components/MetricForm/components/MetricFormStepSettings.tsx

@@ -1,24 +1,26 @@
-import { Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, OutlinedInput } from "@mui/material";
-import { useController, useFormContext } from "react-hook-form";
+import { Checkbox, FormControl, FormControlLabel, FormHelperText, InputLabel, OutlinedInput, useTheme } from "@mui/material";
+import { Controller, 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 { register, control, formState: { errors }, } = useFormContext<MetricFormValues>();
   const { classes, cx } = useFormStyles();
-
+  const theme = useTheme();
+    const hasError = !!errors.SQLs;
+  const errorMessage = errors.SQLs?.message;
   const { field: instanceLevelField } = useController({ name: "IsInstanceLevel", control });
 
   return (
     <div className={classes.form}>
       <FormControl
         className={cx(classes.formControlInput, classes.widthDefault)}
         variant="outlined"
+        error={hasError}
+        aria-describedby="InitSQL-error"
       >
         <InputLabel htmlFor="Gauges">Gauges</InputLabel>
         <OutlinedInput
@@ -33,7 +35,7 @@ export const MetricFormStepSettings = () => {
       </FormControl>
       <FormControl
         className={cx(classes.formControlInput, classes.widthFull)}
-        variant="outlined"
+         variant="outlined"
       >
          <InputLabel
           shrink
@@ -46,25 +48,29 @@ export const MetricFormStepSettings = () => {
           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",
-              }}
-            />
-          )}
+              <Editor
+                value={field.value ?? ""}
+                onValueChange={field.onChange}
+                onBlur={field.onBlur} 
+                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",
+                  borderRadius: "4px",
+                  backgroundColor: theme.palette.background.paper,
+                  color: theme.palette.text.primary,
+                  border: hasError
+                  ? `1px solid ${theme.palette.error.main}`
+                  : `1px solid ${theme.palette.divider}`,
+                }}
+              />
+            )}
         />
+        <FormHelperText id="InitSQL-error">{errorMessage}</FormHelperText>
       </FormControl>
       <FormControlLabel
         className={classes.formControlCheckbox}

internal/webui/tsconfig.json

@@ -25,6 +25,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
+    "ignoreDeprecations": "6.0",
     "downlevelIteration": true,
     "noFallthroughCasesInSwitch": true,
     "jsx": "react-jsx"