From 64dabd4379e06ff1d007339030c569d4da63a328 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Thu, 14 Mar 2024 12:20:19 +0100
Subject: [PATCH] Use redux-based settings in expression input component

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 .../src/pages/query/ExpressionInput.tsx       | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
index 9c8fa7363..3b1a9aecf 100644
--- a/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
+++ b/web/ui/mantine-ui/src/pages/query/ExpressionInput.tsx
@@ -61,6 +61,7 @@ import {
 } from "@tabler/icons-react";
 import { useAPIQuery } from "../../api/api";
 import { notifications } from "@mantine/notifications";
+import { useAppSelector } from "../../state/hooks";
 
 const promqlExtension = new PromQLExtension();
 
@@ -120,6 +121,12 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
   removePanel,
 }) => {
   const theme = useComputedColorScheme();
+  const {
+    pathPrefix,
+    enableAutocomplete,
+    enableSyntaxHighlighting,
+    enableLinter,
+  } = useAppSelector((state) => state.settings);
   const [expr, setExpr] = useState(initialExpr);
   useEffect(() => {
     setExpr(initialExpr);
@@ -159,11 +166,6 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
     }
   }, [formatResult, formatError]);
 
-  // TODO: make dynamic:
-  const enableAutocomplete = true;
-  const enableLinter = true;
-  const pathPrefix = "";
-  // const metricNames = ...
   const queryHistory = [] as string[];
 
   // (Re)initialize editor based on settings / setting changes.
@@ -183,7 +185,7 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
           queryHistory
         ),
       });
-  }, [metricNames, enableAutocomplete, enableLinter, queryHistory]); // TODO: Make this depend on external settings changes, maybe use dynamic config compartment again.
+  }, [pathPrefix, metricNames, enableAutocomplete, enableLinter, queryHistory]); // TODO: Make this depend on external settings changes, maybe use dynamic config compartment again.
 
   return (
     <Group align="flex-start" wrap="nowrap" gap="xs">
@@ -262,9 +264,11 @@ const ExpressionInput: FC<ExpressionInputProps> = ({
             ...lintKeymap,
           ]),
           placeholder("Enter expression (press Shift+Enter for newlines)"),
-          syntaxHighlighting(
-            theme === "light" ? promqlHighlighter : darkPromqlHighlighter
-          ),
+          enableSyntaxHighlighting
+            ? syntaxHighlighting(
+                theme === "light" ? promqlHighlighter : darkPromqlHighlighter
+              )
+            : [],
           promqlExtension.asExtension(),
           theme === "light" ? lightTheme : darkTheme,
           keymap.of([